@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.1

package/client/App.tsx

@@ -2,7 +2,6 @@ import "./global.css";
 
 import { Toaster } from "@/components/ui/toaster";
 import { createRoot } from "react-dom/client";
-import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
@@ -15,7 +14,6 @@ const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />
-      <Sonner />
       <BrowserRouter>
         <div className="min-h-screen">
           <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur-sm">

package/client/assets/alert/icon-clear.svg

@@ -0,0 +1,4 @@
+<svg width="9.5" height="9.5" viewBox="0 0 9.5 9.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.75 0.75L8.75 8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.75 0.75L0.75 8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/alert/icon-done.svg

@@ -0,0 +1,3 @@
+<svg width="12.7" height="9.15217" viewBox="0 0 12.7 9.15217" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.95 0.75L4.25 8.40217L0.75 4.92391" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/avatar-identity/placeholder-icon.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 50.0084 63.25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<g id="icon_2">
+<path d="M25.0045 27.5C31.0796 27.5 36.0045 22.5751 36.0045 16.5C36.0045 10.4249 31.0796 5.5 25.0045 5.5C18.9293 5.5 14.0045 10.4249 14.0045 16.5C14.0045 22.5751 18.9293 27.5 25.0045 27.5Z" fill="#FFFFFF"/>
+<path d="M0 51.7864C4.34615 42.3222 13.9076 35.75 25.0041 35.75C36.1007 35.75 45.6623 42.3224 50.0084 51.7869C43.9567 58.8064 34.9995 63.25 25.0044 63.25C15.009 63.25 6.05161 58.8062 0 51.7864Z" fill="#FFFFFF"/>
+</g>
+</g>
+</svg>

package/client/assets/breadcrumb/icon-ellipsis.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.00004 8.66666C8.36823 8.66666 8.66671 8.36818 8.66671 7.99999C8.66671 7.63181 8.36823 7.33333 8.00004 7.33333C7.63185 7.33333 7.33337 7.63181 7.33337 7.99999C7.33337 8.36818 7.63185 8.66666 8.00004 8.66666Z" stroke="#52545D" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.6667 8.66666C13.0349 8.66666 13.3333 8.36818 13.3333 7.99999C13.3333 7.63181 13.0349 7.33333 12.6667 7.33333C12.2985 7.33333 12 7.63181 12 7.99999C12 8.36818 12.2985 8.66666 12.6667 8.66666Z" stroke="#52545D" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.33329 8.66666C3.70148 8.66666 3.99996 8.36818 3.99996 7.99999C3.99996 7.63181 3.70148 7.33333 3.33329 7.33333C2.9651 7.33333 2.66663 7.63181 2.66663 7.99999C2.66663 8.36818 2.9651 8.66666 3.33329 8.66666Z" stroke="#52545D" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/breadcrumb/icon-home.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13.5475" viewBox="0 0 14 13.5475" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.13 3.8375L8.17 0.3675C7.47 -0.1225 6.54 -0.1225 5.83 0.3675L0.87 3.8375C0.33 4.2175 0 4.8375 0 5.5075V11.5075C0 12.6275 0.91 13.5475 2.04 13.5475H3.95C4.39 13.5475 4.75 13.1875 4.75 12.7475V8.9575C4.75 7.7675 5.61 6.6575 6.8 6.5575C8.13 6.4375 9.25 7.4875 9.25 8.7975V12.7475C9.25 13.1875 9.61 13.5475 10.05 13.5475H11.96C13.08 13.5475 14 12.6375 14 11.5075V5.5075C14 4.8475 13.68 4.2175 13.13 3.8375Z" fill="#52545D"/>
+</svg>

package/client/assets/breadcrumb/icon-separator.svg

@@ -0,0 +1,3 @@
+<svg width="4.5" height="7.5" viewBox="0 0 4.5 7.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.75 6.75L3.75 3.75L0.75 0.75" stroke="#CBCDD2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/button-v01/icon-back.svg

@@ -0,0 +1,4 @@
+<svg width="13.3" height="13.3" viewBox="0 0 13.3 13.3" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.65 12.65L0.65 6.65L6.65 0.65" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.65 6.65H0.65" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/button-v01/icon-check.svg

@@ -0,0 +1,3 @@
+<svg width="12.7" height="9.15217" viewBox="0 0 12.7 9.15217" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.95 0.75L4.25 8.40217L0.75 4.92391" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/button-v01/icon-close.svg

@@ -0,0 +1,4 @@
+<svg width="11.1" height="11.1" viewBox="0 0 11.1 11.1" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.35 0.75L0.75 10.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M0.75 0.75L10.35 10.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/button-v01/icon-delete.svg

@@ -0,0 +1,3 @@
+<svg width="14.1" height="15.5" viewBox="0 0 14.1 15.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.95 3.55V13.35C11.95 13.7213 11.8025 14.0774 11.5399 14.3399C11.2774 14.6025 10.9213 14.75 10.55 14.75H3.55C3.1787 14.75 2.8226 14.6025 2.56005 14.3399C2.2975 14.0774 2.15 13.7213 2.15 13.35V3.55M0.75 3.55H13.35M4.25 3.55V2.15C4.25 1.7787 4.3975 1.4226 4.66005 1.16005C4.9226 0.8975 5.2787 0.75 5.65 0.75H8.45C8.8213 0.75 9.1774 0.8975 9.43995 1.16005C9.7025 1.4226 9.85 1.7787 9.85 2.15V3.55" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/button-v01/icon-device.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19.0963" viewBox="0 0 20 19.0963" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 13.6C19 14.0774 18.8104 14.5352 18.4728 14.8728C18.1352 15.2104 17.6774 15.4 17.2 15.4H5.3452C4.86785 15.4001 4.41009 15.5898 4.0726 15.9274L2.0908 17.9092C2.00143 17.9985 1.88758 18.0594 1.76364 18.084C1.6397 18.1087 1.51123 18.096 1.39448 18.0477C1.27772 17.9993 1.17793 17.9174 1.10772 17.8124C1.0375 17.7073 1.00002 17.5838 1 17.4574V2.8C1 2.32261 1.18964 1.86477 1.52721 1.52721C1.86477 1.18964 2.32261 1 2.8 1H17.2C17.6774 1 18.1352 1.18964 18.4728 1.52721C18.8104 1.86477 19 2.32261 19 2.8V13.6Z" fill="white" fill-opacity="0.2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/dropdown/icon-carrot-contract.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 10.25L8 5.75L13 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/dropdown/icon-carrot-expand.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 5.75L8 10.25L3 5.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/dropdown/icon-clear.svg

@@ -0,0 +1,4 @@
+<svg width="11.1" height="11.1" viewBox="0 0 11.1 11.1" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.35 0.75L0.75 10.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M0.75 0.75L10.35 10.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/assets/dropdown/icon-enter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.16667 13.6L15 8.00002L9.16667 2.40002M15 8.00002L1 8.00002" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/components/icons/UtilityChangeType.tsx

@@ -0,0 +1,21 @@
+const CHANGE_TYPE_PATH =
+  "M7.03821 0.597996C6.9327 0.416112 6.78127 0.265138 6.59906 0.160189C6.41685 0.0552399 6.21027 2.66508e-16 6 0C5.78973 2.66508e-16 5.58315 0.0552399 5.40094 0.160189C5.21873 0.265138 5.0673 0.416112 4.96179 0.597996L0.160803 8.99972C0.0555113 9.18209 5.41026e-05 9.38895 3.95658e-08 9.59953C-5.40234e-05 9.81012 0.0552969 10.017 0.160495 10.1994C0.265693 10.3819 0.417035 10.5334 0.599324 10.6388C0.781613 10.7443 0.988433 10.7999 1.19902 10.8001L10.801 10.8001C11.0116 10.7999 11.2184 10.7443 11.4007 10.6388C11.583 10.5334 11.7343 10.3819 11.8395 10.1994C11.9447 10.017 12.0001 9.81012 12 9.59953C11.9999 9.38895 11.9445 9.18209 11.8392 8.99972L7.03821 0.597996Z";
+
+export function UtilityChangeType({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="-0.75 -0.75 13.5 12.3"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHANGE_TYPE_PATH}
+        fill="var(--change-fill)"
+        stroke="var(--change-stroke)"
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/client/components/ui/alert-dialog-panel.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { ButtonV01 } from "@/components/ui/button-v01";
+
+const alertDialogPanelVariants = cva("alert-dialog-panel", {
+  variants: {
+    variant: {
+      default: "alert-dialog-panel--default",
+      destruction: "alert-dialog-panel--destruction",
+      success: "alert-dialog-panel--success",
+    },
+    size: {
+      medium: "alert-dialog-panel--medium",
+      small: "alert-dialog-panel--small",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "medium",
+  },
+});
+
+type AlertDialogPanelVariant = "default" | "destruction" | "success";
+type AlertDialogPanelSize = "medium" | "small";
+
+/**
+ * Cancel and confirm buttons resolve to different design-system button
+ * variants per variant/size combination, mirroring the Figma component set.
+ */
+const cancelHierarchy = (
+  variant: AlertDialogPanelVariant,
+  size: AlertDialogPanelSize,
+): "secondary" | "tertiary" =>
+  size === "medium" && variant !== "success" ? "tertiary" : "secondary";
+
+/**
+ * Figma's success action is a flat translucent pill, not a gradient — the CTA
+ * type is used for its shape and label, and `.alert-dialog-panel-button--success`
+ * replaces the surface with `--alert-dialog-action-success-bg`.
+ */
+const actionIsCta = (variant: AlertDialogPanelVariant) => variant === "success";
+
+/**
+ * Design-system typography utilities. These carry the cap-height trim that
+ * reproduces the Figma frame heights exactly.
+ */
+const titleTypography: Record<AlertDialogPanelSize, string> = {
+  medium: "heading-xsmall",
+  small: "heading-xxsmall",
+};
+
+const descriptionTypography: Record<AlertDialogPanelSize, string> = {
+  medium: "body-base",
+  small: "body-small",
+};
+
+/** Body copy and button labels are set in Mazzard Soft M, headings in FT Made. */
+const bodyFontClass = "font-mazzardSoft";
+
+// ---------------------------------------------------------------------------
+// Surface — the presentational panel, usable inline or inside a modal
+// ---------------------------------------------------------------------------
+
+interface AlertDialogPanelSurfaceProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof alertDialogPanelVariants> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Mirrors the Figma `show description` boolean property. */
+  showDescription?: boolean;
+  cancelLabel?: React.ReactNode;
+  actionLabel?: React.ReactNode;
+  onCancel?: () => void;
+  onAction?: () => void;
+  /** Render labelled elements as Radix Cancel/Action targets. */
+  asPrimitive?: boolean;
+}
+
+const AlertDialogPanelSurface = React.forwardRef<
+  HTMLDivElement,
+  AlertDialogPanelSurfaceProps
+>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "medium",
+      title,
+      description,
+      showDescription = true,
+      cancelLabel = "Cancel",
+      actionLabel = "Confirm",
+      onCancel,
+      onAction,
+      asPrimitive = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedVariant = (variant ?? "default") as AlertDialogPanelVariant;
+    const resolvedSize = (size ?? "medium") as AlertDialogPanelSize;
+    const buttonSize = resolvedSize === "medium" ? "medium" : "small";
+
+    const TitleTag = asPrimitive ? AlertDialogPrimitive.Title : "h2";
+    const DescriptionTag = asPrimitive ? AlertDialogPrimitive.Description : "p";
+
+    const cancelButton = (
+      <ButtonV01
+        type="button"
+        size={buttonSize}
+        typeVariant="cta"
+        hierarchy={cancelHierarchy(resolvedVariant, resolvedSize)}
+        appearance="stroke"
+        theme="light"
+        className="alert-dialog-panel-button"
+        onClick={onCancel}
+      >
+        {cancelLabel}
+      </ButtonV01>
+    );
+
+    const actionButton = (
+      <ButtonV01
+        type="button"
+        size={buttonSize}
+        typeVariant={actionIsCta(resolvedVariant) ? "cta" : "utility"}
+        hierarchy="primary"
+        appearance={actionIsCta(resolvedVariant) ? "gradient" : "solid"}
+        className={cn(
+          "alert-dialog-panel-button",
+          resolvedVariant === "destruction" &&
+            "alert-dialog-panel-button--destruction",
+          resolvedVariant === "success" && "alert-dialog-panel-button--success",
+        )}
+        onClick={onAction}
+      >
+        {actionLabel}
+      </ButtonV01>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(alertDialogPanelVariants({ variant, size }), className)}
+        {...props}
+      >
+        <div className="alert-dialog-panel-text">
+          <TitleTag
+            className={cn(
+              "alert-dialog-panel-title",
+              titleTypography[resolvedSize],
+            )}
+          >
+            {title}
+          </TitleTag>
+          {showDescription && description ? (
+            <DescriptionTag
+              className={cn(
+                "alert-dialog-panel-description",
+                descriptionTypography[resolvedSize],
+                bodyFontClass,
+              )}
+            >
+              {description}
+            </DescriptionTag>
+          ) : null}
+        </div>
+
+        {children ?? (
+          <div className="alert-dialog-panel-actions">
+            {asPrimitive ? (
+              <>
+                <AlertDialogPrimitive.Cancel asChild>
+                  {cancelButton}
+                </AlertDialogPrimitive.Cancel>
+                <AlertDialogPrimitive.Action asChild>
+                  {actionButton}
+                </AlertDialogPrimitive.Action>
+              </>
+            ) : (
+              <>
+                {cancelButton}
+                {actionButton}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+AlertDialogPanelSurface.displayName = "AlertDialogPanelSurface";
+
+// ---------------------------------------------------------------------------
+// Modal — Radix-backed dialog wrapping the surface
+// ---------------------------------------------------------------------------
+
+interface AlertDialogPanelProps
+  extends Omit<AlertDialogPanelSurfaceProps, "asPrimitive"> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+}
+
+const AlertDialogPanel = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  ...surfaceProps
+}: AlertDialogPanelProps) => (
+  <AlertDialogPrimitive.Root
+    open={open}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    {trigger ? (
+      <AlertDialogPrimitive.Trigger asChild>
+        {trigger}
+      </AlertDialogPrimitive.Trigger>
+    ) : null}
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay className="alert-dialog-panel-overlay" />
+      <AlertDialogPrimitive.Content className="alert-dialog-panel-positioner">
+        <AlertDialogPanelSurface asPrimitive {...surfaceProps} />
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  </AlertDialogPrimitive.Root>
+);
+AlertDialogPanel.displayName = "AlertDialogPanel";
+
+export { AlertDialogPanel, AlertDialogPanelSurface, alertDialogPanelVariants };
+
+export type {
+  AlertDialogPanelProps,
+  AlertDialogPanelSurfaceProps,
+  AlertDialogPanelVariant,
+  AlertDialogPanelSize,
+};

package/client/components/ui/alert-v02.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { ButtonV01 } from "@/components/ui/button-v01";
+import { AvatarIdentity } from "@/components/ui/avatar-identity";
+import iconDone from "@/assets/alert/icon-done.svg";
+import iconClear from "@/assets/alert/icon-clear.svg";
+
+const alertV02Variants = cva("alert-v02 font-mazzardSoft", {
+  variants: {
+    variant: {
+      solid: "alert-v02--solid",
+      subtle: "alert-v02--subtle",
+      outline: "alert-v02--outline",
+    },
+    size: {
+      large: "alert-v02--large",
+      small: "alert-v02--small",
+    },
+    color: {
+      default: "alert-v02--default",
+      success: "alert-v02--success",
+      error: "alert-v02--error",
+    },
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "large",
+    color: "default",
+  },
+});
+
+export type AlertV02Variant = NonNullable<
+  VariantProps<typeof alertV02Variants>["variant"]
+>;
+export type AlertV02Size = NonNullable<
+  VariantProps<typeof alertV02Variants>["size"]
+>;
+export type AlertV02Color = NonNullable<
+  VariantProps<typeof alertV02Variants>["color"]
+>;
+export type AlertV02Indicator = "icon" | "avatar";
+
+function MaskIcon({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn("alert-v02-mask-icon", className)}
+      style={{
+        WebkitMaskImage: `url(${src})`,
+        maskImage: `url(${src})`,
+      }}
+      aria-hidden
+    />
+  );
+}
+
+export interface AlertV02Props
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "title">,
+    VariantProps<typeof alertV02Variants> {
+  /** Figma `indicator`. */
+  indicator?: AlertV02Indicator;
+  /** Figma `action` — shows Confirm (and Cancel on large). */
+  action?: boolean;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onDismiss?: () => void;
+  /** Replace the default checkmark. */
+  icon?: React.ReactNode;
+  /** Replace the default avatar. */
+  avatar?: React.ReactNode;
+  avatarSrc?: string;
+  avatarAlt?: string;
+}
+
+const AlertV02 = React.forwardRef<HTMLDivElement, AlertV02Props>(
+  (
+    {
+      className,
+      variant = "solid",
+      size = "large",
+      color = "default",
+      indicator = "icon",
+      action = true,
+      title,
+      description,
+      confirmLabel = "Confirm",
+      cancelLabel = "Cancel",
+      onConfirm,
+      onCancel,
+      onDismiss,
+      icon,
+      avatar,
+      avatarSrc,
+      avatarAlt,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isLarge = size !== "small";
+    const showDescription = isLarge && description != null && description !== "";
+    const showCancel = isLarge && action;
+    const heading = title ?? children;
+
+    const indicatorNode =
+      indicator === "avatar"
+        ? (avatar ?? (
+            <AvatarIdentity
+              className="alert-v02-avatar"
+              size="medium"
+              variant={avatarSrc ? "image" : "placeholder"}
+              src={avatarSrc}
+              alt={avatarAlt}
+              showText={false}
+            />
+          ))
+        : (icon ?? (
+            <span className="alert-v02-indicator">
+              <MaskIcon src={iconDone} className="alert-v02-icon-done" />
+            </span>
+          ));
+
+    const dismissButton = (
+      <button
+        type="button"
+        className="alert-v02-dismiss"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+      >
+        <MaskIcon src={iconClear} className="alert-v02-icon-clear" />
+      </button>
+    );
+
+    const confirmButton = (
+      <ButtonV01
+        type="button"
+        size="small"
+        typeVariant="utility"
+        hierarchy="primary"
+        appearance="solid"
+        context="general"
+        className="alert-v02-button"
+        onClick={onConfirm}
+      >
+        {confirmLabel}
+      </ButtonV01>
+    );
+
+    const cancelButton = (
+      <ButtonV01
+        type="button"
+        size="small"
+        typeVariant="utility"
+        hierarchy="tertiary"
+        appearance="stroke"
+        theme="light"
+        context="general"
+        className="alert-v02-button"
+        onClick={onCancel}
+      >
+        {cancelLabel}
+      </ButtonV01>
+    );
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertV02Variants({ variant, size, color }), className)}
+        {...props}
+      >
+        {indicatorNode}
+
+        {isLarge ? (
+          <div className="alert-v02-content">
+            <div className="alert-v02-heading">
+              <h5 className="alert-v02-title">{heading}</h5>
+              {dismissButton}
+            </div>
+            {showDescription ? (
+              <div className="alert-v02-description">{description}</div>
+            ) : null}
+            {action ? (
+              <div className="alert-v02-actions">
+                {confirmButton}
+                {showCancel ? cancelButton : null}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <>
+            <h5 className="alert-v02-title">{heading}</h5>
+            {action ? confirmButton : null}
+            {dismissButton}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+AlertV02.displayName = "AlertV02";
+
+export { AlertV02, alertV02Variants };