Implement modals across create flow

app/components/buttons/InlineTextButton.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { memo } from "react";
+
+export interface InlineTextButtonProps {
+  /**
+   * Button label content.
+   */
+  children: React.ReactNode;
+  /**
+   * Click handler.
+   */
+  onClick?: (_event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Extra class names. Use `className` to override typography/color when the
+   * button must inherit parent font-size/leading (e.g. mid-paragraph usage).
+   */
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+/**
+ * Small text-styled button for in-paragraph "link"-like controls (expand,
+ * add, etc.). The Figma "link" treatment is a tertiary-colored underline with
+ * a 3px underline-offset and inherited typography, which sits between a real
+ * anchor and a styled `Button`.
+ *
+ * Use this anywhere a `<button>` is needed inline with body copy — do not use
+ * for primary/secondary actions (reach for `Button` instead).
+ */
+function InlineTextButtonComponent({
+  children,
+  onClick,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: InlineTextButtonProps) {
+  const baseClasses =
+    "cursor-pointer border-none bg-transparent p-0 font-inter font-normal text-[length:inherit] leading-[inherit] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={`${baseClasses} ${className}`.trim()}
+    >
+      {children}
+    </button>
+  );
+}
+
+InlineTextButtonComponent.displayName = "InlineTextButton";
+
+export default memo(InlineTextButtonComponent);

app/components/controls/Chip/Chip.types.ts

@@ -33,6 +33,13 @@ export interface ChipProps {
    */
   size?: ChipSizeValue;
   className?: string;
+  /**
+   * Whether the chip should be non-interactive. Defaults to `true` when
+   * `state === "disabled"` to preserve historical behavior. Pass
+   * `disabled={false}` alongside `state="Disabled"` to render the dimmed
+   * "disabled" visual while keeping the chip clickable — useful for toggle
+   * groups where the unselected state is the disabled Figma visual.
+   */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**

app/components/controls/Chip/Chip.view.tsx

@@ -20,7 +20,10 @@ function ChipView({
   inputRef,
   ariaLabel,
 }: ChipViewProps) {
-  const isDisabled = disabled || state === "disabled";
+  // The container is the source of truth for `disabled`. This allows
+  // `state="disabled"` to be used purely as a visual (for toggle-group chips
+  // that look dimmed while remaining clickable) by passing `disabled={false}`.
+  const isDisabled = disabled ?? false;
   const isSelected = state === "selected";
   const isCustom = state === "custom";
 
@@ -57,11 +60,13 @@ function ChipView({
     } else if (state === "disabled") {
       background = "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background
       border = "border-none";
-      textColor = "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
+      // Per Figma (node 19839:13842) disabled uses invert-tertiary for the
+      // strongly dimmed look, not default-tertiary.
+      textColor = "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
     } else if (isSelected) {
-      background = "bg-[var(--color-surface-inverse-brandaccent,#fdfaa8)]"; // yellow selected
+      background = "bg-[var(--color-surface-invert-brand-primary,#fefcc9)]"; // yellow selected
       border = `${borderWidth} border-[var(--color-border-default-brand-primary,#fdfaa8)]`;
-      textColor = "text-[color:var(--color-content-inverse-primary,black)]";
+      textColor = "text-[color:var(--color-content-invert-primary,black)]";
     } else {
       // Unselected default
       background =

app/components/controls/Incrementer/Incrementer.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { memo } from "react";
+
+export interface IncrementerProps {
+  value: number;
+  /** Minimum value (default `-Infinity`). */
+  min?: number;
+  /** Maximum value (default `Infinity`). */
+  max?: number;
+  /** Step size applied to +/- actions (default `1`). */
+  step?: number;
+  onChange: (_next: number) => void;
+  /**
+   * Optional formatter for the displayed value. Receives the raw number and
+   * should return the rendered content. Default: `String(value)`.
+   */
+  formatValue?: (_value: number) => React.ReactNode;
+  /**
+   * When true, the whole incrementer is non-interactive and the value renders
+   * in the "inactive" (tertiary) color per Figma.
+   */
+  disabled?: boolean;
+  /** Accessible label for the decrement button (default "Decrease"). */
+  decrementAriaLabel?: string;
+  /** Accessible label for the increment button (default "Increase"). */
+  incrementAriaLabel?: string;
+  className?: string;
+}
+
+const STEP_BUTTON_CLASSES =
+  "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,transform] duration-200 ease-in-out hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100";
+
+function MinusIcon() {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 24"
+      className="block size-[12px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 12h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 24"
+      className="block size-[12px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 5v14M5 12h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
+ * row used for numeric step inputs (e.g. a percentage setting).
+ *
+ * For a labelled variant that matches "Control / Incrementer Block"
+ * (`19883:13283`), compose with {@link IncrementerBlock} instead.
+ */
+function IncrementerComponent({
+  value,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  onChange,
+  formatValue,
+  disabled = false,
+  decrementAriaLabel = "Decrease",
+  incrementAriaLabel = "Increase",
+  className = "",
+}: IncrementerProps) {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const atMin = clampedValue <= min;
+  const atMax = clampedValue >= max;
+
+  const decrement = () => {
+    if (disabled || atMin) return;
+    onChange(Math.max(min, clampedValue - step));
+  };
+  const increment = () => {
+    if (disabled || atMax) return;
+    onChange(Math.min(max, clampedValue + step));
+  };
+
+  const valueColor = disabled
+    ? "text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
+    : "text-[color:var(--color-content-default-primary,#fff)]";
+
+  return (
+    <div
+      className={`inline-flex items-center gap-[16px] ${className}`.trim()}
+      data-figma-node="17857:30943"
+    >
+      <button
+        type="button"
+        onClick={decrement}
+        disabled={disabled || atMin}
+        aria-label={decrementAriaLabel}
+        className={STEP_BUTTON_CLASSES}
+      >
+        <MinusIcon />
+      </button>
+      <span
+        aria-live="polite"
+        className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
+      >
+        {formatValue ? formatValue(clampedValue) : clampedValue}
+      </span>
+      <button
+        type="button"
+        onClick={increment}
+        disabled={disabled || atMax}
+        aria-label={incrementAriaLabel}
+        className={STEP_BUTTON_CLASSES}
+      >
+        <PlusIcon />
+      </button>
+    </div>
+  );
+}
+
+IncrementerComponent.displayName = "Incrementer";
+
+export default memo(IncrementerComponent);

app/components/controls/Incrementer/IncrementerBlock.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { memo } from "react";
+import Incrementer, { type IncrementerProps } from "./Incrementer";
+import InputLabel from "../../utility/InputLabel";
+import type {
+  InputLabelPaletteValue,
+  InputLabelSizeValue,
+} from "../../utility/InputLabel/InputLabel.types";
+
+export interface IncrementerBlockProps extends IncrementerProps {
+  /** Label text displayed above the incrementer. */
+  label: string;
+  /** Show the help "?" icon next to the label. Defaults to `true`. */
+  helpIcon?: boolean;
+  /**
+   * Helper text shown to the right of the label. Pass a string or `true` to
+   * render the default "Optional text".
+   */
+  helperText?: boolean | string;
+  /** Show an asterisk indicating a required field. */
+  asterisk?: boolean;
+  /**
+   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
+   * "Incrementer Block" spec.
+   */
+  labelSize?: InputLabelSizeValue;
+  /** Palette. Defaults to `"default"`. */
+  palette?: InputLabelPaletteValue;
+  /**
+   * Class applied to the root `<div>` wrapping the label + incrementer. Use
+   * this to control the block's layout width (e.g. `w-full`).
+   */
+  blockClassName?: string;
+}
+
+/**
+ * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
+ * an {@link Incrementer} row, stacked with a 12px gap.
+ */
+function IncrementerBlockComponent({
+  label,
+  helpIcon = true,
+  helperText,
+  asterisk,
+  labelSize = "s",
+  palette = "default",
+  blockClassName = "",
+  className,
+  ...incrementerProps
+}: IncrementerBlockProps) {
+  return (
+    <div
+      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
+      data-figma-node="19883:13283"
+    >
+      <InputLabel
+        label={label}
+        helpIcon={helpIcon}
+        helperText={helperText}
+        asterisk={asterisk}
+        size={labelSize}
+        palette={palette}
+      />
+      <Incrementer {...incrementerProps} className={className} />
+    </div>
+  );
+}
+
+IncrementerBlockComponent.displayName = "IncrementerBlock";
+
+export default memo(IncrementerBlockComponent);

app/components/controls/Incrementer/index.tsx

@@ -0,0 +1,5 @@
+export { default } from "./Incrementer";
+export { default as Incrementer } from "./Incrementer";
+export { default as IncrementerBlock } from "./IncrementerBlock";
+export type { IncrementerProps } from "./Incrementer";
+export type { IncrementerBlockProps } from "./IncrementerBlock";