@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/src/primitives/Badge.tsx

@@ -1,30 +1,40 @@
 import { type ReactNode } from "react";
 import { cn } from "../utils/cn";
 
-type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-type BadgeType = "label" | "icon";
+export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+export type BadgeType = "label" | "icon";
 
 export type BadgeProps = {
   color: BadgeColor;
+  /** `label` grows with content (pill). `icon` is a compact circle for a glyph/digit. */
   type?: BadgeType;
   children: ReactNode;
   className?: string;
 };
 
 const colorStyles: Record<BadgeColor, string> = {
-  blue: "bg-meta-blue text-meta-on-blue",
-  green: "bg-meta-green text-meta-on-green",
-  red: "bg-meta-red text-meta-on-red",
-  orange: "bg-meta-orange text-meta-on-orange",
-  purple: "bg-meta-purple text-meta-on-purple",
+  blue: "bg-meta-blue text-meta-onBlue",
+  green: "bg-meta-green text-meta-onGreen",
+  red: "bg-meta-red text-meta-onRed",
+  orange: "bg-meta-orange text-meta-onOrange",
+  purple: "bg-meta-purple text-meta-onPurple",
   grey: "bg-grey-100 text-display-on-light-secondary",
 };
 
-export const Badge = ({ color, type = "label", children, className }: BadgeProps) => (
+/**
+ * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
+ */
+export const Badge = ({
+  color,
+  type = "label",
+  children,
+  className,
+}: BadgeProps) => (
   <span
     className={cn(
-      "inline-flex shrink-0 items-center justify-center text-footnote-em",
-      type === "label" ? "rounded-control px-2 py-0.5" : "size-6 rounded-full",
+      "inline-flex shrink-0 items-center justify-center text-footnote-em leading-none",
+      type === "label" && "rounded-full px-1.5 py-0.5",
+      type === "icon" && "size-5 rounded-full [&>svg]:size-3",
       colorStyles[color],
       className,
     )}

package/src/primitives/Button.tsx

@@ -34,6 +34,8 @@ export type ButtonProps = Omit<
   disabled?: boolean;
   icon?: ComponentType<IconProps> | ReactNode;
   startIcon?: ComponentType<IconProps> | ReactNode;
+  /** Renders after the label, inside the same button (no split/dropdown segment). */
+  endIcon?: ComponentType<IconProps> | ReactNode;
   dropdownOptions?: ButtonDropdownOption[];
   dropdownOpen?: boolean;
   onDropdownOpenChange?: (open: boolean) => void;
@@ -110,6 +112,7 @@ export const Button = ({
   disabled = false,
   icon,
   startIcon,
+  endIcon,
   dropdownOptions,
   dropdownOpen,
   onDropdownOpenChange,
@@ -121,6 +124,9 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const resolvedIcon = icon ?? startIcon;
+  const renderedIcon = renderIcon(resolvedIcon);
+  const renderedEndIcon = renderIcon(endIcon);
+  const hasIcon = renderedIcon != null || renderedEndIcon != null;
   const hasDropdown = Boolean(dropdownOptions?.length);
   const dropdownDisabled = !dropdownOptions?.some((option) => !option.disabled);
   const mainAppearance = getAppearance(disabled, forcedState);
@@ -135,11 +141,19 @@ export const Button = ({
     dropdownAppearance,
     forcedState,
   );
-  const label = (
-    <>
-      {renderIcon(resolvedIcon)}
-      <span className="px-2">{children}</span>
-    </>
+
+  /** Label-only: centered text. With start icon: gap between icon and label. */
+  const content = (
+    <span
+      className={cn(
+        "flex min-h-6 items-center justify-center",
+        hasIcon && "gap-2",
+      )}
+    >
+      {renderedIcon}
+      <span>{children}</span>
+      {renderedEndIcon}
+    </span>
   );
 
   if (!hasDropdown) {
@@ -156,9 +170,7 @@ export const Button = ({
         )}
         {...props}
       >
-        <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
-          {label}
-        </span>
+        {content}
       </button>
     );
   }
@@ -175,9 +187,7 @@ export const Button = ({
       )}
       {...props}
     >
-      <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
-        {label}
-      </span>
+      {content}
     </button>
   );
 

package/src/primitives/Logo.tsx

@@ -8,20 +8,32 @@ export type LogoProps = {
   muted?: boolean;
 };
 
+// The "A" body only — no topper. Technical adds a straight bar; Compliance
+// adds a curved arc. Previously the bar lived inside this shared path, so the
+// Compliance glyph rendered the technical bar (plus a faint arc) and looked
+// identical to Technical.
 const ASK_CHIEF_A =
-  "M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z";
+  "M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172Z";
 
-const TechnicalGlyph = () => <path d={ASK_CHIEF_A} fill="currentColor" />;
+const TECHNICAL_BAR = "M12.6904 3.375V4.64355H5.61328V3.375H12.6904Z";
 
-const ComplianceGlyph = () => (
+const TechnicalGlyph = () => (
   <>
     <path d={ASK_CHIEF_A} fill="currentColor" />
+    <path d={TECHNICAL_BAR} fill="currentColor" />
+  </>
+);
+
+// Exact Figma export (Logo → Compliance): filled "A" body + filled crescent.
+const ComplianceGlyph = () => (
+  <>
+    <path
+      d="M8.30335 5.84666L5.18335 14.2917H6.33835V14.2883C6.34002 14.2883 6.34168 14.29 6.34168 14.29L8.90668 11.7267H9.06668L11.6283 14.2917H12.8233L9.71668 5.84666H8.30502H8.30335ZM9.21502 10.4433H8.75668L7.15168 12.0483L8.89002 7.25166H9.10168L10.825 12.055L9.21668 10.4433H9.21502Z"
+      fill="currentColor"
+    />
     <path
-      d="M6.2 5.2C7.4 4.1 10.6 4.1 11.8 5.2"
-      stroke="currentColor"
-      strokeWidth="0.9"
-      fill="none"
-      strokeLinecap="round"
+      d="M8.98839 4.85833C9.87172 4.85833 10.6817 5.23 11.3117 5.84666H12.7967C11.9251 4.54666 10.5434 3.70667 8.98839 3.70667C7.43339 3.70667 6.05172 4.54666 5.18005 5.84666H6.66505C7.29339 5.23 8.10505 4.85833 8.98839 4.85833Z"
+      fill="currentColor"
     />
   </>
 );

package/src/primitives/Switch.tsx

@@ -1,12 +1,20 @@
 import { type ButtonHTMLAttributes } from "react";
 import { cn } from "../utils/cn";
 
-export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export type SwitchProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> & {
   checked: boolean;
   onChange: (checked: boolean) => void;
   disabled?: boolean;
 };
 
+/**
+ * On/off control — Figma Switch (3068:65681).
+ * Track: 36×16 (grey-400 off / grey-900 on). Thumb: 24×24 white (grey-50 off),
+ * 1px border matching track, Raise-2 shadow. Off left / on right, edges flush.
+ */
 export const Switch = ({
   checked,
   onChange,
@@ -19,19 +27,31 @@ export const Switch = ({
     role="switch"
     aria-checked={checked}
     disabled={disabled}
-    onClick={() => onChange(!checked)}
+    onClick={(event) => {
+      event.stopPropagation();
+      onChange(!checked);
+    }}
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed",
-      checked ? "bg-blue-600" : "bg-grey-200",
-      disabled && "opacity-50",
+      "relative inline-flex h-6 w-9 shrink-0 items-center",
+      "disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
   >
     <span
+      aria-hidden
       className={cn(
-        "inline-block size-5 rounded-full bg-white shadow-raise1 transition-transform",
-        checked ? "translate-x-[18px]" : "translate-x-0.5",
+        "pointer-events-none absolute inset-x-0 top-1/2 h-4 -translate-y-1/2 rounded-full transition-colors",
+        checked ? "bg-grey-900" : "bg-grey-400",
+      )}
+    />
+    <span
+      aria-hidden
+      className={cn(
+        "relative inline-block size-6 rounded-full border border-solid shadow-raise2 transition-[transform,border-color,background-color]",
+        checked
+          ? "translate-x-3 border-grey-900 bg-white"
+          : "translate-x-0 border-grey-400 bg-grey-50",
       )}
     />
   </button>

package/src/primitives/button-styles.ts

@@ -1,92 +1,92 @@
-export type ButtonHierarchy =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "quaternary"
-  | "destructive";
-
-export type ButtonAppearance = "idle" | "hover" | "disabled";
-
-type HierarchyStyleMap = Record<ButtonAppearance, string>;
-
-const primaryStyles: HierarchyStyleMap = {
-  idle: "bg-action-primary-idle text-action-primary-on-idle",
-  hover: "bg-action-primary-hover text-action-primary-on-hover",
-  disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
-};
-
-const secondaryStyles: HierarchyStyleMap = {
-  idle:
-    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
-  hover:
-    "border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
-  disabled:
-    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
-};
-
-const tertiaryStyles: HierarchyStyleMap = {
-  idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
-  hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
-  disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
-};
-
-const quaternaryStyles: HierarchyStyleMap = {
-  idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
-  hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
-  disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
-};
-
-const destructiveStyles: HierarchyStyleMap = {
-  idle: "bg-action-destructive-idle text-action-destructive-on-idle",
-  hover: "bg-action-destructive-hover text-action-destructive-on-hover",
-  disabled:
-    "bg-action-destructive-disabled text-action-destructive-on-disabled",
-};
-
-const hierarchyStyles: Record<ButtonHierarchy, HierarchyStyleMap> = {
-  primary: primaryStyles,
-  secondary: secondaryStyles,
-  tertiary: tertiaryStyles,
-  quaternary: quaternaryStyles,
-  destructive: destructiveStyles,
-};
-
-const interactiveHierarchyStyles: Record<ButtonHierarchy, string> = {
-  primary:
-    "bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover",
-  secondary:
-    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:border-divider-secondary hover:bg-action-secondary-hover hover:text-action-secondary-on-hover",
-  tertiary:
-    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover",
-  quaternary:
-    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover",
-  destructive:
-    "bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover",
-};
-
-const disabledHierarchyStyles: Record<ButtonHierarchy, string> = {
-  primary: "bg-action-primary-disabled text-action-primary-on-disabled",
-  secondary:
-    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
-  tertiary: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
-  quaternary:
-    "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
-  destructive:
-    "bg-action-destructive-disabled text-action-destructive-on-disabled",
-};
-
-export const getButtonAppearanceClasses = (
-  hierarchy: ButtonHierarchy,
-  appearance: ButtonAppearance,
-) => hierarchyStyles[hierarchy][appearance];
-
-export const getButtonInteractiveClasses = (
-  hierarchy: ButtonHierarchy,
-  disabled: boolean,
-) => {
-  if (disabled) {
-    return disabledHierarchyStyles[hierarchy];
-  }
-
-  return interactiveHierarchyStyles[hierarchy];
-};
+export type ButtonHierarchy =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "destructive";
+
+export type ButtonAppearance = "idle" | "hover" | "disabled";
+
+type HierarchyStyleMap = Record<ButtonAppearance, string>;
+
+const primaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-primary-idle text-action-primary-on-idle",
+  hover: "bg-action-primary-hover text-action-primary-on-hover",
+  disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
+};
+
+const secondaryStyles: HierarchyStyleMap = {
+  idle:
+    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
+  hover:
+    "border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
+  disabled:
+    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
+};
+
+const tertiaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
+  hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
+  disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
+};
+
+const quaternaryStyles: HierarchyStyleMap = {
+  idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
+  hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
+  disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
+};
+
+const destructiveStyles: HierarchyStyleMap = {
+  idle: "bg-action-destructive-idle text-action-destructive-on-idle",
+  hover: "bg-action-destructive-hover text-action-destructive-on-hover",
+  disabled:
+    "bg-action-destructive-disabled text-action-destructive-on-disabled",
+};
+
+const hierarchyStyles: Record<ButtonHierarchy, HierarchyStyleMap> = {
+  primary: primaryStyles,
+  secondary: secondaryStyles,
+  tertiary: tertiaryStyles,
+  quaternary: quaternaryStyles,
+  destructive: destructiveStyles,
+};
+
+const interactiveHierarchyStyles: Record<ButtonHierarchy, string> = {
+  primary:
+    "bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover",
+  secondary:
+    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:border-divider-secondary hover:bg-action-secondary-hover hover:text-action-secondary-on-hover",
+  tertiary:
+    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover",
+  quaternary:
+    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover",
+  destructive:
+    "bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover",
+};
+
+const disabledHierarchyStyles: Record<ButtonHierarchy, string> = {
+  primary: "bg-action-primary-disabled text-action-primary-on-disabled",
+  secondary:
+    "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
+  tertiary: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
+  quaternary:
+    "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
+  destructive:
+    "bg-action-destructive-disabled text-action-destructive-on-disabled",
+};
+
+export const getButtonAppearanceClasses = (
+  hierarchy: ButtonHierarchy,
+  appearance: ButtonAppearance,
+) => hierarchyStyles[hierarchy][appearance];
+
+export const getButtonInteractiveClasses = (
+  hierarchy: ButtonHierarchy,
+  disabled: boolean,
+) => {
+  if (disabled) {
+    return disabledHierarchyStyles[hierarchy];
+  }
+
+  return interactiveHierarchyStyles[hierarchy];
+};

package/src/primitives/index.ts

@@ -14,5 +14,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from ".
 export { ThinkingDot, type ThinkingDotProps } from "./ThinkingDot";
 export { Count, type CountProps } from "./Count";
 export { Switch, type SwitchProps } from "./Switch";
-export { Badge, type BadgeProps } from "./Badge";
+export { Badge, type BadgeProps, type BadgeColor, type BadgeType } from "./Badge";
 export { Callout, type CalloutProps } from "./Callout";

package/src/stories/canvases/ButtonsCanvas.tsx

@@ -1,107 +1,107 @@
-import { AttachmentIcon } from "../../icons";
-import { Button } from "../../primitives";
-import { FigmaContent, FigmaPage, FigmaSection } from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-import {
-  BUTTON_VARIANT_SLOTS,
-  FIGMA_BUTTON_SLOTS,
-  FIGMA_BUTTONS_CANVAS,
-  FIGMA_BUTTONS_GRID,
-  type ButtonVisualState,
-} from "./figma-buttons-layout";
-import { IconButtonSnapshot } from "./helpers";
-
-const demoDropdownOptions = [
-  { label: "Option A", onSelect: () => undefined },
-  { label: "Option B", onSelect: () => undefined },
-];
-
-const slotProps = (visualState: ButtonVisualState) => ({
-  forcedState: visualState === "idle" ? undefined : visualState,
-  disabled: visualState === "disabled",
-});
-
-export const ButtonsCanvas = () => (
-  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
-    <FigmaContent padding={0}>
-      <div className="px-8 pb-8 pt-6">
-        <FigmaSection label="Button">
-          <div
-            className="relative"
-            style={{
-              width: FIGMA_BUTTONS_CANVAS.width,
-              height: FIGMA_BUTTONS_CANVAS.height,
-            }}
-          >
-            <div
-              data-figma-buttons-grid
-              className="absolute left-0 top-0"
-              style={{
-                width: FIGMA_BUTTONS_GRID.width,
-                height: FIGMA_BUTTONS_GRID.height,
-              }}
-            >
-              {FIGMA_BUTTON_SLOTS.map((slot) => (
-                <div
-                  key={`${slot.hierarchy}-${slot.visualState}`}
-                  className="absolute"
-                  style={{ left: slot.x, top: slot.y }}
-                >
-                  <Button
-                    hierarchy={slot.hierarchy}
-                    icon={AttachmentIcon}
-                    dropdownOptions={demoDropdownOptions}
-                    {...slotProps(slot.visualState)}
-                  >
-                    Button
-                  </Button>
-                </div>
-              ))}
-            </div>
-
-            {BUTTON_VARIANT_SLOTS.map((slot) => (
-              <div
-                key={`${slot.hierarchy}-${slot.variant}`}
-                data-visual-test-only
-                className="absolute"
-                style={{ left: slot.x, top: slot.y }}
-              >
-                {slot.variant === "noIcon" ? (
-                  <Button
-                    hierarchy={slot.hierarchy}
-                    dropdownOptions={demoDropdownOptions}
-                  >
-                    Button
-                  </Button>
-                ) : (
-                  <Button hierarchy={slot.hierarchy} icon={AttachmentIcon}>
-                    Button
-                  </Button>
-                )}
-              </div>
-            ))}
-          </div>
-        </FigmaSection>
-
-        <FigmaSection label="Icon Button" className="mt-8">
-          <div className="flex flex-wrap items-center gap-6">
-            <IconButtonSnapshot hierarchy="tertiary" visualState="idle" />
-            <IconButtonSnapshot hierarchy="tertiary" visualState="hover" />
-            <IconButtonSnapshot hierarchy="quaternary" visualState="idle" />
-            <IconButtonSnapshot hierarchy="quaternary" visualState="hover" />
-            <IconButtonSnapshot
-              hierarchy="quaternary"
-              visualState="idle"
-              size="small"
-            />
-            <IconButtonSnapshot
-              hierarchy="quaternary"
-              visualState="hover"
-              size="small"
-            />
-          </div>
-        </FigmaSection>
-      </div>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { AttachmentIcon } from "../../icons";
+import { Button } from "../../primitives";
+import { FigmaContent, FigmaPage, FigmaSection } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  BUTTON_VARIANT_SLOTS,
+  FIGMA_BUTTON_SLOTS,
+  FIGMA_BUTTONS_CANVAS,
+  FIGMA_BUTTONS_GRID,
+  type ButtonVisualState,
+} from "./figma-buttons-layout";
+import { IconButtonSnapshot } from "./helpers";
+
+const demoDropdownOptions = [
+  { label: "Option A", onSelect: () => undefined },
+  { label: "Option B", onSelect: () => undefined },
+];
+
+const slotProps = (visualState: ButtonVisualState) => ({
+  forcedState: visualState === "idle" ? undefined : visualState,
+  disabled: visualState === "disabled",
+});
+
+export const ButtonsCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
+    <FigmaContent padding={0}>
+      <div className="px-8 pb-8 pt-6">
+        <FigmaSection label="Button">
+          <div
+            className="relative"
+            style={{
+              width: FIGMA_BUTTONS_CANVAS.width,
+              height: FIGMA_BUTTONS_CANVAS.height,
+            }}
+          >
+            <div
+              data-figma-buttons-grid
+              className="absolute left-0 top-0"
+              style={{
+                width: FIGMA_BUTTONS_GRID.width,
+                height: FIGMA_BUTTONS_GRID.height,
+              }}
+            >
+              {FIGMA_BUTTON_SLOTS.map((slot) => (
+                <div
+                  key={`${slot.hierarchy}-${slot.visualState}`}
+                  className="absolute"
+                  style={{ left: slot.x, top: slot.y }}
+                >
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    icon={AttachmentIcon}
+                    dropdownOptions={demoDropdownOptions}
+                    {...slotProps(slot.visualState)}
+                  >
+                    Button
+                  </Button>
+                </div>
+              ))}
+            </div>
+
+            {BUTTON_VARIANT_SLOTS.map((slot) => (
+              <div
+                key={`${slot.hierarchy}-${slot.variant}`}
+                data-visual-test-only
+                className="absolute"
+                style={{ left: slot.x, top: slot.y }}
+              >
+                {slot.variant === "noIcon" ? (
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    dropdownOptions={demoDropdownOptions}
+                  >
+                    Button
+                  </Button>
+                ) : (
+                  <Button hierarchy={slot.hierarchy} icon={AttachmentIcon}>
+                    Button
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        </FigmaSection>
+
+        <FigmaSection label="Icon Button" className="mt-8">
+          <div className="flex flex-wrap items-center gap-6">
+            <IconButtonSnapshot hierarchy="tertiary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="tertiary" visualState="hover" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="hover" />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="idle"
+              size="small"
+            />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="hover"
+              size="small"
+            />
+          </div>
+        </FigmaSection>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);