@acronis-platform/ui-react 4.0.0 → 5.0.0

package/dist/components/ui/alert/alert.js

@@ -1,157 +1,96 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as l from "react";
-import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { TimesIcon as g } from "@acronis-platform/icons-react/stroke-mono";
-import { DiamondWarningRedIcon as f, CircleWarningOrangeIcon as b, TriangleWarningYellowIcon as p, CircleCheckGreenIcon as u, CircleInfoBlueIcon as v } from "@acronis-platform/icons-react/stroke-multi";
-import { cn as o } from "../../../lib/utils.js";
-import { ButtonIcon as x } from "../button-icon/button-icon.js";
-const m = d(
-  "relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]",
-  {
-    variants: {
-      variant: {
-        info: "border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]",
-        success: "border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]",
-        warning: "border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]",
-        critical: "border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]",
-        danger: "border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]"
-      }
-    },
-    defaultVariants: {
-      variant: "info"
-    }
-  }
-), w = {
-  info: v,
-  success: u,
-  warning: p,
-  critical: b,
-  danger: f
-}, i = l.createContext("info"), y = l.forwardRef(
-  ({ className: t, variant: r, ...a }, n) => /* @__PURE__ */ e(i.Provider, { value: r ?? "info", children: /* @__PURE__ */ e(
-    "div",
-    {
-      ref: n,
-      role: "alert",
-      "data-slot": "alert",
-      "data-variant": r ?? "info",
-      className: o(m({ variant: r }), t),
-      ...a
-    }
-  ) })
-);
-y.displayName = "Alert";
-const A = l.forwardRef(({ className: t, children: r, ...a }, n) => {
-  const c = l.useContext(i), s = w[c];
-  return (
-    // The icon box's padding (4/8) is what optically aligns the 16px glyph with
-    // the first line of the title: glyph centre 8 + 8 = 16, title centre
-    // (AlertText's 4px padding) 4 + 12 = 16.
-    /* @__PURE__ */ e(
-      "div",
-      {
-        ref: n,
-        "data-slot": "alert-icon",
-        className: o(
-          "flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0",
-          t
-        ),
-        ...a,
-        children: r ?? /* @__PURE__ */ e(s, { size: 16 })
-      }
-    )
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ButtonIcon as n } from "../button-icon/button-icon.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { TimesIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+import { CircleCheckGreenIcon as o, CircleInfoBlueIcon as s, CircleWarningOrangeIcon as c, DiamondWarningRedIcon as l, TriangleWarningYellowIcon as u } from "@acronis-platform/icons-react/stroke-multi";
+//#region src/components/ui/alert/alert.tsx
+var d = t("relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]", {
+	variants: { variant: {
+		info: "border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]",
+		success: "border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]",
+		warning: "border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]",
+		critical: "border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]",
+		danger: "border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]"
+	} },
+	defaultVariants: { variant: "info" }
+}), f = {
+	info: s,
+	success: o,
+	warning: u,
+	critical: c,
+	danger: l
+}, p = r.createContext("info"), m = r.forwardRef(({ className: t, variant: n, ...r }, a) => /* @__PURE__ */ i(p.Provider, {
+	value: n ?? "info",
+	children: /* @__PURE__ */ i("div", {
+		ref: a,
+		role: "alert",
+		"data-slot": "alert",
+		"data-variant": n ?? "info",
+		className: e(d({ variant: n }), t),
+		...r
+	})
+}));
+m.displayName = "Alert";
+var h = r.forwardRef(({ className: t, children: n, ...a }, o) => {
+	let s = f[r.useContext(p)];
+	return /* @__PURE__ */ i("div", {
+		ref: o,
+		"data-slot": "alert-icon",
+		className: e("flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0", t),
+		...a,
+		children: n ?? /* @__PURE__ */ i(s, { size: 16 })
+	});
 });
-A.displayName = "AlertIcon";
-const N = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-content",
-    className: o(
-      "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]",
-      t
-    ),
-    ...r
-  }
-));
-N.displayName = "AlertContent";
-const h = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-text",
-    className: o(
-      "flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]",
-      t
-    ),
-    ...r
-  }
-));
-h.displayName = "AlertText";
-const C = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "h5",
-  {
-    ref: a,
-    "data-slot": "alert-title",
-    className: o(
-      "ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
-      t
-    ),
-    ...r
-  }
-));
-C.displayName = "AlertTitle";
-const I = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "p",
-  {
-    ref: a,
-    "data-slot": "alert-description",
-    className: o(
-      "ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]",
-      t
-    ),
-    ...r
-  }
-));
-I.displayName = "AlertDescription";
-const R = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-actions",
-    className: o(
-      "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]",
-      t
-    ),
-    ...r
-  }
-));
-R.displayName = "AlertActions";
-const k = l.forwardRef(
-  ({ className: t, ariaLabel: r = "Close", ...a }, n) => /* @__PURE__ */ e(
-    x,
-    {
-      ref: n,
-      "data-slot": "alert-close",
-      className: o("shrink-0", t),
-      ...a,
-      variant: "ghost",
-      "aria-label": r,
-      children: /* @__PURE__ */ e(g, {})
-    }
-  )
-);
-k.displayName = "AlertClose";
-export {
-  y as Alert,
-  R as AlertActions,
-  k as AlertClose,
-  N as AlertContent,
-  I as AlertDescription,
-  A as AlertIcon,
-  h as AlertText,
-  C as AlertTitle,
-  m as alertVariants
-};
-//# sourceMappingURL=alert.js.map
+h.displayName = "AlertIcon";
+var g = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-content",
+	className: e("flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]", t),
+	...n
+}));
+g.displayName = "AlertContent";
+var _ = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-text",
+	className: e("flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]", t),
+	...n
+}));
+_.displayName = "AlertText";
+var v = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("h5", {
+	ref: r,
+	"data-slot": "alert-title",
+	className: e("ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]", t),
+	...n
+}));
+v.displayName = "AlertTitle";
+var y = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("p", {
+	ref: r,
+	"data-slot": "alert-description",
+	className: e("ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]", t),
+	...n
+}));
+y.displayName = "AlertDescription";
+var b = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-actions",
+	className: e("flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]", t),
+	...n
+}));
+b.displayName = "AlertActions";
+var x = r.forwardRef(({ className: t, ariaLabel: r = "Close", ...o }, s) => /* @__PURE__ */ i(n, {
+	ref: s,
+	"data-slot": "alert-close",
+	className: e("shrink-0", t),
+	...o,
+	variant: "ghost",
+	"aria-label": r,
+	children: /* @__PURE__ */ i(a, {})
+}));
+x.displayName = "AlertClose";
+//#endregion
+export { m as Alert, b as AlertActions, x as AlertClose, g as AlertContent, y as AlertDescription, h as AlertIcon, _ as AlertText, v as AlertTitle, d as alertVariants };
+
+//# sourceMappingURL=alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the *colors* are separate token references.\n// Every other value is a `var(--ui-alert-*)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the *colors* are separate token references.\n// Every other value is a `var(--ui-alert-*)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"mappings":";;;;;;;;;AA+CA,IAAM,IAAgB,EACpB,2kBASA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SACE;EACF,SACE;EACF,UACE;EACF,QACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF,GASM,IAAoE;CACxE,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAEM,IAAsB,EAAM,cAA4B,MAAM,GAa9D,IAAQ,EAAM,YACjB,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,EAAoB,UAArB;CAA8B,OAAO,KAAW;CAC9C,UAAA,kBAAC,OAAD;EACO;EACL,MAAK;EACL,aAAU;EACV,gBAAc,KAAW;EACzB,WAAW,EAAG,EAAc,EAAE,WAAQ,CAAC,GAAG,CAAS;EACnD,GAAI;CACL,CAAA;AAC2B,CAAA,CAElC;AACA,EAAM,cAAc;AAMpB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,aAAU,GAAG,KAAS,MAAQ;CAE5C,IAAM,IAAa,EADH,EAAM,WAAW,CACF;CAC/B,OAIE,kBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,EACT,oLACA,CACF;EACA,GAAI;EAEH,UAAA,KAAY,kBAAC,GAAD,EAAY,MAAM,GAAK,CAAA;CACjC,CAAA;AAET,CAAC;AACD,EAAU,cAAc;AAExB,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,iLACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAO3B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,uPACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,wIACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAW,cAAc;AAEzB,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,KAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,+IACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAM/B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,0TACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAsB3B,IAAM,IAAa,EAAM,YACtB,EAAE,cAAW,eAAY,SAAS,GAAG,KAAS,MAC7C,kBAAC,GAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,YAAY,CAAS;CACnC,GAAI;CACJ,SAAQ;CACR,cAAY;CAEZ,UAAA,kBAAC,GAAD,CAAY,CAAA;AACF,CAAA,CAEhB;AACA,EAAW,cAAc"}