@edgeandnode/eds-react 1.0.0

package/skill/references/icons.md

@@ -0,0 +1,62 @@
+# EDS Icons
+
+All icons are exported from `@edgeandnode/eds-react/icons`. Each icon is a React component that extends `IconProps` (with required `alt` prop).
+
+## Phosphor Icons
+
+~1,450 icons re-exported from [Phosphor](https://phosphoricons.com/). All names end with `Icon` (e.g. `ArrowRight` → `ArrowRightIcon`). Each has a `variant` prop: `'regular'` (default), `'thin'`, or `'fill'`.
+
+**A:** `Acorn`, `AddressBook`, `AddressBookTabs`, `AdvocatesDaoLogo`, `AirTrafficControl`, `Airplane`, `AirplaneInFlight`, `AirplaneLanding`, `AirplaneTakeoff`, `AirplaneTaxiing`, `AirplaneTilt`, `Airplay`, `Alarm`, `Alien`, `AlignBottom`, `AlignBottomSimple`, `AlignCenterHorizontal`, `AlignCenterHorizontalSimple`, `AlignCenterVertical`, `AlignCenterVerticalSimple`, `AlignLeft`, `AlignLeftSimple`, `AlignRight`, `AlignRightSimple`, `AlignTop`, `AlignTopSimple`, `Ambulance`, `AmpLogo`, `AmpersendLogo`, `Anchor`, `AnchorSimple`, `Angle`, `AnvilLogo`, `Aperture`, `AppWindow`, `ApproximateEquals`, `Apps`, `Archive`, `Armchair`, `ArrowArcLeft`, `ArrowArcRight`, `ArrowBendDoubleUpLeft`, `ArrowBendDoubleUpRight`, `ArrowBendDownLeft`, `ArrowBendDownRight`, `ArrowBendLeftDown`, `ArrowBendLeftUp`, `ArrowBendRightDown`, `ArrowBendRightUp`, `ArrowBendUpLeft`, `ArrowBendUpRight`, `ArrowCircleDown`, `ArrowCircleDownLeft`, `ArrowCircleDownRight`, `ArrowCircleLeft`, `ArrowCircleRight`, `ArrowCircleUp`, `ArrowCircleUpLeft`, `ArrowCircleUpRight`, `ArrowClockwise`, `ArrowCounterClockwise`, `ArrowDown`, `ArrowDownLeft`, `ArrowDownRight`, `ArrowElbowDownLeft`, `ArrowElbowDownRight`, `ArrowElbowLeftDown`, `ArrowElbowLeft`, `ArrowElbowLeftUp`, `ArrowElbowRightDown`, `ArrowElbowRight`, `ArrowElbowRightUp`, `ArrowElbowUpLeft`, `ArrowElbowUpRight`, `ArrowFatDown`, `ArrowFatLeft`, `ArrowFatLineDown`, `ArrowFatLineLeft`, `ArrowFatLineRight`, `ArrowFatLineUp`, `ArrowFatLinesDown`, `ArrowFatLinesLeft`, `ArrowFatLinesRight`, `ArrowFatLinesUp`, `ArrowFatRight`, `ArrowFatUp`, `ArrowLeft`, `ArrowLineDown`, `ArrowLineDownLeft`, `ArrowLineDownRight`, `ArrowLineLeft`, `ArrowLineRight`, `ArrowLineUp`, `ArrowLineUpLeft`, `ArrowLineUpRight`, `ArrowRight`, `ArrowSquareDown`, `ArrowSquareDownLeft`, `ArrowSquareDownRight`, `ArrowSquareIn`, `ArrowSquareLeft`, `ArrowSquareOut`, `ArrowSquareRight`, `ArrowSquareUp`, `ArrowSquareUpLeft`, `ArrowSquareUpRight`, `ArrowUDownLeft`, `ArrowUDownRight`, `ArrowULeftDown`, `ArrowULeftUp`, `ArrowURightDown`, `ArrowURightUp`, `ArrowUUpLeft`, `ArrowUUpRight`, `ArrowUp`, `ArrowUpLeft`, `ArrowUpRight`, `ArrowsClockwise`, `ArrowsCounterClockwise`, `ArrowsDownUp`, `ArrowsHorizontal`, `ArrowsInCardinal`, `ArrowsIn`, `ArrowsInLineHorizontal`, `ArrowsInLineVertical`, `ArrowsInSimple`, `ArrowsLeftRight`, `ArrowsMerge`, `ArrowsOutCardinal`, `ArrowsOut`, `ArrowsOutLineHorizontal`, `ArrowsOutLineVertical`, `ArrowsOutSimple`, `ArrowsSplit`, `ArrowsVertical`, `Article`, `ArticleMedium`, `ArticleNyTimes`, `Asclepius`, `Asterisk`, `AsteriskSimple`, `At`, `Atom`, `Avocado`, `Axe`
+**B:** `BabyCarriage`, `Baby`, `Backpack`, `Backspace`, `Bag`, `BagSimple`, `Balloon`, `Bandaids`, `Bank`, `Barbell`, `Barcode`, `Barn`, `Barricade`, `BaseballCap`, `BaseballHelmet`, `Baseball`, `Basket`, `Basketball`, `Bathtub`, `BatteryCharging`, `BatteryChargingVertical`, `BatteryEmpty`, `BatteryFull`, `BatteryHigh`, `BatteryLow`, `BatteryMedium`, `BatteryPlus`, `BatteryPlusVertical`, `BatteryVerticalEmpty`, `BatteryVerticalFull`, `BatteryVerticalHigh`, `BatteryVerticalLow`, `BatteryVerticalMedium`, `BatteryWarning`, `BatteryWarningVertical`, `BeachBall`, `Beanie`, `Bed`, `BeerBottle`, `BeerStein`, `Bell`, `BellRinging`, `BellSimple`, `BellSimpleRinging`, `BellSimpleSlash`, `BellSimpleZ`, `BellSlash`, `BellZ`, `Belt`, `BezierCurve`, `Bicycle`, `Binary`, `Binoculars`, `Biohazard`, `Bird`, `Blueprint`, `BluetoothConnected`, `Bluetooth`, `BluetoothSlash`, `BluetoothX`, `Boat`, `Bomb`, `Bone`, `BookBookmark`, `Book`, `BookOpen`, `BookOpenText`, `BookOpenUser`, `Bookmark`, `BookmarkSimple`, `Bookmarks`, `BookmarksSimple`, `Books`, `Boot`, `Boules`, `BoundingBox`, `BowlFood`, `BowlSteam`, `BowlingBall`, `BoxArrowDown`, `BoxArrowUp`, `BoxingGlove`, `BracketsAngle`, `BracketsCurly`, `BracketsRound`, `BracketsSquare`, `Brain`, `Brandy`, `Bread`, `Bridge`, `Briefcase`, `BriefcaseMetal`, `Broadcast`, `Broom`, `Browser`, `Browsers`, `BugBeetle`, `BugDroid`, `Bug`, `BuildersDaoLogo`, `BuildingApartment`, `Building`, `BuildingOffice`, `Buildings`, `Bulldozer`, `Bus`, `Butterfly`
+**C:** `CableCar`, `Cactus`, `Cake`, `Calculator`, `CalendarBlank`, `CalendarCheck`, `CalendarDot`, `CalendarDots`, `CalendarHeart`, `Calendar`, `CalendarMinus`, `CalendarPlus`, `CalendarSlash`, `CalendarStar`, `CalendarX`, `CallBell`, `Camera`, `CameraPlus`, `CameraRotate`, `CameraSlash`, `Campfire`, `CarBattery`, `Car`, `CarProfile`, `CarSimple`, `Cardholder`, `Cards`, `CardsThree`, `CaretCircleDoubleDown`, `CaretCircleDoubleLeft`, `CaretCircleDoubleRight`, `CaretCircleDoubleUp`, `CaretCircleDown`, `CaretCircleLeft`, `CaretCircleRight`, `CaretCircleUpDown`, `CaretCircleUp`, `CaretDoubleDown`, `CaretDoubleLeft`, `CaretDoubleRight`, `CaretDoubleUp`, `CaretDown`, `CaretLeft`, `CaretLineDown`, `CaretLineLeft`, `CaretLineRight`, `CaretLineUp`, `CaretRight`, `CaretUpDown`, `CaretUp`, `Carrot`, `CashRegister`, `CassetteTape`, `CastleTurret`, `Cat`, `CellSignalFull`, `CellSignalHigh`, `CellSignalLow`, `CellSignalMedium`, `CellSignalNone`, `CellSignalSlash`, `CellSignalX`, `CellTower`, `Certificate`, `Chair`, `Chalkboard`, `ChalkboardSimple`, `ChalkboardTeacher`, `Champagne`, `ChargingStation`, `ChartBarHorizontal`, `ChartBar`, `ChartDonut`, `ChartLineDown`, `ChartLine`, `ChartLineUp`, `ChartPie`, `ChartPieSlice`, `ChartPolar`, `ChartScatter`, `ChatCenteredDots`, `ChatCentered`, `ChatCenteredSlash`, `ChatCenteredText`, `ChatCircleDots`, `ChatCircle`, `ChatCircleSlash`, `ChatCircleText`, `ChatDots`, `Chat`, `ChatSlash`, `ChatTeardropDots`, `ChatTeardrop`, `ChatTeardropSlash`, `ChatTeardropText`, `ChatText`, `ChatsCircle`, `Chats`, `ChatsTeardrop`, `CheckCircle`, `CheckFat`, `Check`, `CheckSquare`, `CheckSquareOffset`, `Checkerboard`, `Checks`, `Cheers`, `Cheese`, `ChefHat`, `Cherries`, `Church`, `Cigarette`, `CigaretteSlash`, `CircleDashed`, `CircleHalf`, `CircleHalfTilt`, `Circle`, `CircleNotch`, `CirclesFour`, `CirclesThree`, `CirclesThreePlus`, `Circuitry`, `City`, `Clipboard`, `ClipboardText`, `ClockAfternoon`, `ClockClockwise`, `ClockCountdown`, `ClockCounterClockwise`, `Clock`, `ClockUser`, `ClosedCaptioning`, `CloudArrowDown`, `CloudArrowUp`, `CloudCheck`, `CloudFog`, `Cloud`, `CloudLightning`, `CloudMoon`, `CloudRain`, `CloudSlash`, `CloudSnow`, `CloudSun`, `CloudWarning`, `CloudX`, `Clover`, `Club`, `CoatHanger`, `CodeBlock`, `Code`, `CodeSimple`, `CoffeeBean`, `Coffee`, `Coin`, `CoinVertical`, `Coins`, `Columns`, `ColumnsPlusLeft`, `ColumnsPlusRight`, `Command`, `Compass`, `CompassRose`, `CompassTool`, `ComputerTower`, `Confetti`, `ContactlessPayment`, `Control`, `Cookie`, `CookingPot`, `Copy`, `CopySimple`, `Copyleft`, `Copyright`, `CoreDevs`, `CornersIn`, `CornersOut`, `Couch`, `CourtBasketball`, `Cow`, `CowboyHat`, `Cpu`, `Crane`, `CraneTower`, `CreditCard`, `Cricket`, `Crop`, `Cross`, `Crosshair`, `CrosshairSimple`, `CrownCross`, `Crown`, `CrownSimple`, `CubeFocus`, `Cube`, `CubeTransparent`, `CurlLogo`, `CurrencyBtc`, `CurrencyCircleDollar`, `CurrencyCny`, `CurrencyDollar`, `CurrencyDollarSimple`, `CurrencyEth`, `CurrencyEur`, `CurrencyGbp`, `CurrencyInr`, `CurrencyJpy`, `CurrencyKrw`, `CurrencyKzt`, `CurrencyNgn`, `CurrencyRub`, `CursorClick`, `Cursor`, `CursorText`, `Cylinder`
+**D:** `Dao`, `Database`, `Dataset`, `Desk`, `Desktop`, `DesktopTower`, `Detective`, `DeviceMobileCamera`, `DeviceMobile`, `DeviceMobileSlash`, `DeviceMobileSpeaker`, `DeviceRotate`, `DeviceTabletCamera`, `DeviceTablet`, `DeviceTabletSpeaker`, `Devices`, `Diamond`, `DiamondsFour`, `DiceFive`, `DiceFour`, `DiceOne`, `DiceSix`, `DiceThree`, `DiceTwo`, `Disc`, `DiscoBall`, `DiscordLogo`, `Divide`, `Dna`, `Dog`, `Door`, `DoorOpen`, `Dot`, `DotOutline`, `DotsNine`, `DotsSix`, `DotsSixVertical`, `DotsThreeCircle`, `DotsThreeCircleVertical`, `DotsThree`, `DotsThreeOutline`, `DotsThreeOutlineVertical`, `DotsThreeVertical`, `Download`, `DownloadSimple`, `Dress`, `Dresser`, `Drone`, `DropHalfBottom`, `DropHalf`, `Drop`, `DropSimple`, `DropSlash`
+**E:** `Ear`, `EarSlash`, `EdgeAndNodeLogo`, `EggCrack`, `Egg`, `Eject`, `EjectSimple`, `Elevator`, `Empty`, `Engine`, `Envelope`, `EnvelopeOpen`, `EnvelopeSimple`, `EnvelopeSimpleOpen`, `Equalizer`, `Equals`, `Eraser`, `EscalatorDown`, `EscalatorUp`, `Exam`, `ExclamationMark`, `Exclude`, `ExcludeSquare`, `Export`, `EyeClosed`, `Eye`, `EyeSlash`, `Eyedropper`, `EyedropperSample`, `Eyeglasses`, `Eyes`
+**F:** `FaceMask`, `Factory`, `FadersHorizontal`, `Faders`, `FalloutShelter`, `Fan`, `FarcasterLogo`, `Farm`, `FastForwardCircle`, `FastForward`, `Feather`, `FileArchive`, `FileArrowDown`, `FileArrowUp`, `FileAudio`, `FileC`, `FileCSharp`, `FileCloud`, `FileCode`, `FileCpp`, `FileCss`, `FileCsv`, `FileDashed`, `FileDoc`, `FileHtml`, `File`, `FileImage`, `FileIni`, `FileJpg`, `FileJs`, `FileJsx`, `FileLock`, `FileMagnifyingGlass`, `FileMd`, `FileMinus`, `FilePdf`, `FilePlus`, `FilePng`, `FilePpt`, `FilePy`, `FileRs`, `FileSol`, `FileSql`, `FileSvg`, `FileText`, `FileTs`, `FileTsx`, `FileTxt`, `FileVideo`, `FileVue`, `FileX`, `FileXls`, `FileZip`, `Files`, `FilmReel`, `FilmScript`, `FilmSlate`, `FilmStrip`, `Fingerprint`, `FingerprintSimple`, `FinnTheHuman`, `FireExtinguisher`, `Fire`, `FireSimple`, `FireTruck`, `Firehose`, `FirstAid`, `FirstAidKit`, `Fish`, `FishSimple`, `FlagBannerFold`, `FlagBanner`, `FlagCheckered`, `Flag`, `FlagPennant`, `Flame`, `Flashlight`, `Flask`, `FlipHorizontal`, `FlipVertical`, `FloppyDiskBack`, `FloppyDisk`, `FlowArrow`, `Flower`, `FlowerLotus`, `FlowerTulip`, `FlyingSaucer`, `FolderDashed`, `Folder`, `FolderLock`, `FolderMinus`, `FolderOpen`, `FolderPlus`, `FolderSimpleDashed`, `FolderSimple`, `FolderSimpleLock`, `FolderSimpleMinus`, `FolderSimplePlus`, `FolderSimpleStar`, `FolderSimpleUser`, `FolderStar`, `FolderUser`, `Folders`, `FootballHelmet`, `Football`, `Footprints`, `ForkKnife`, `FourK`, `FrameCorners`, `Function`, `Funnel`, `FunnelSimple`, `FunnelSimpleX`, `FunnelX`
+**G:** `GameController`, `Garage`, `GasCan`, `GasPump`, `Gauge`, `Gavel`, `GearFine`, `Gear`, `GearSix`, `GenderFemale`, `GenderIntersex`, `GenderMale`, `GenderNeuter`, `GenderNonbinary`, `GenderTransgender`, `GeoLogo`, `Ghost`, `Gif`, `Gift`, `GitBranch`, `GitCommit`, `GitDiff`, `GitFork`, `GitMerge`, `GitPullRequest`, `GithubLogo`, `GlobeHemisphereEast`, `GlobeHemisphereWest`, `Globe`, `GlobeSimple`, `GlobeSimpleX`, `GlobeStand`, `GlobeX`, `Goggles`, `Golf`, `GoogleLogo`, `Governance`, `GpsFix`, `Gps`, `GpsSlash`, `Gradient`, `GraduationCap`, `Grains`, `GrainsSlash`, `GraphExplorerLogo`, `Graph`, `GraphNode`, `GraphOpsLogo`, `GraphicsCard`, `GraphtronautsLogo`, `GreaterThan`, `GreaterThanOrEqual`, `GridFour`, `GridNine`, `Guitar`
+**H:** `HairDryer`, `Hamburger`, `Hammer`, `HandArrowDown`, `HandArrowUp`, `HandCoins`, `HandDeposit`, `HandEye`, `HandFist`, `HandGrabbing`, `HandHeart`, `Hand`, `HandPalm`, `HandPeace`, `HandPointing`, `HandSoap`, `HandSwipeLeft`, `HandSwipeRight`, `HandTap`, `HandWaving`, `HandWithdraw`, `Handbag`, `HandbagSimple`, `HandsClapping`, `HandsPraying`, `Handshake`, `HardDrive`, `HardDrives`, `HardHat`, `Hash`, `HashStraight`, `HeadCircuit`, `Headlights`, `Headphones`, `Headset`, `HeartBreak`, `HeartHalf`, `Heart`, `HeartStraightBreak`, `HeartStraight`, `Heartbeat`, `Hexagon`, `HighDefinition`, `HighHeel`, `HighlighterCircle`, `Highlighter`, `Hockey`, `Hoodie`, `Horizon`, `Horse`, `Hospital`, `HourglassHigh`, `Hourglass`, `HourglassLow`, `HourglassMedium`, `HourglassSimpleHigh`, `HourglassSimple`, `HourglassSimpleLow`, `HourglassSimpleMedium`, `House`, `HouseLine`, `HouseOfWeb3Logo`, `HouseSimple`, `Hurricane`, `HypergraphLogo`
+**I:** `IceCream`, `IdentificationBadge`, `IdentificationCard`, `ImageBroken`, `Image`, `ImageSquare`, `Images`, `ImagesSquare`, `IndexerTooling`, `Infinity`, `Info`, `InfraDaoLogo`, `InstagramLogo`, `Intersect`, `IntersectSquare`, `IntersectThree`, `Intersection`, `Invoice`, `Island`
+**J:** `Jar`, `JarLabel`, `Jeep`, `Joystick`
+**K:** `Kanban`, `Key`, `KeyReturn`, `Keyboard`, `Keyhole`, `Knife`
+**L:** `Ladder`, `LadderSimple`, `Lamp`, `LampPendant`, `Laptop`, `Lasso`, `Layout`, `Leaf`, `Lectern`, `Lego`, `LegoSmiley`, `LessThan`, `LessThanOrEqual`, `LetterCircleH`, `LetterCircleP`, `LetterCircleV`, `Lifebuoy`, `LightbulbFilament`, `Lightbulb`, `Lighthouse`, `LightningA`, `Lightning`, `LightningSlash`, `LineSegment`, `LineSegments`, `LineVertical`, `LinkBreak`, `Link`, `LinkSimpleBreak`, `LinkSimpleHorizontalBreak`, `LinkSimpleHorizontal`, `LinkSimple`, `ListBullets`, `ListChecks`, `ListDashes`, `ListHeart`, `List`, `ListMagnifyingGlass`, `ListNumbers`, `ListPlus`, `ListStar`, `Lock`, `LockKey`, `LockKeyOpen`, `LockLaminated`, `LockLaminatedOpen`, `LockOpen`, `LockSimple`, `LockSimpleOpen`, `Lockers`, `Log`
+**M:** `MagicWand`, `Magnet`, `MagnetStraight`, `MagnifyingGlass`, `MagnifyingGlassMinus`, `MagnifyingGlassPlus`, `Mailbox`, `MapPinArea`, `MapPin`, `MapPinLine`, `MapPinPlus`, `MapPinSimpleArea`, `MapPinSimple`, `MapPinSimpleLine`, `MapTrifold`, `MarkerCircle`, `Martini`, `MaskHappy`, `MaskSad`, `MathOperations`, `Medal`, `MedalMilitary`, `Megaphone`, `MegaphoneSimple`, `MemberOf`, `Memory`, `MessariLogo`, `Meteor`, `Metronome`, `Microphone`, `MicrophoneSlash`, `MicrophoneStage`, `Microscope`, `MinusCircle`, `Minus`, `MinusSquare`, `Money`, `MoneyWavy`, `MonitorArrowUp`, `Monitor`, `MonitorPlay`, `Moon`, `MoonStars`, `MopedFront`, `Moped`, `Mosque`, `Motorcycle`, `Mountains`, `Mouse`, `MouseLeftClick`, `MouseMiddleClick`, `MouseRightClick`, `MouseScroll`, `MouseSimple`, `MusicNote`, `MusicNoteSimple`, `MusicNotes`, `MusicNotesMinus`, `MusicNotesPlus`, `MusicNotesSimple`
+**N:** `NavigationArrow`, `Needle`, `Network`, `NetworkSlash`, `NetworkX`, `Networks`, `NewspaperClipping`, `Newspaper`, `NextJsLogo`, `NodeJsLogo`, `NotEquals`, `NotMemberOf`, `NotSubsetOf`, `NotSupersetOf`, `Notches`, `NoteBlank`, `Note`, `NotePencil`, `Notebook`, `Notepad`, `Notification`, `NuclearPlant`, `NumberCircleEight`, `NumberCircleFive`, `NumberCircleFour`, `NumberCircleNine`, `NumberCircleOne`, `NumberCircleSeven`, `NumberCircleSix`, `NumberCircleThree`, `NumberCircleTwo`, `NumberCircleZero`, `NumberEight`, `NumberFive`, `NumberFour`, `NumberNine`, `NumberOne`, `NumberSeven`, `NumberSix`, `NumberSquareEight`, `NumberSquareFive`, `NumberSquareFour`, `NumberSquareNine`, `NumberSquareOne`, `NumberSquareSeven`, `NumberSquareSix`, `NumberSquareThree`, `NumberSquareTwo`, `NumberSquareZero`, `NumberThree`, `NumberTwo`, `NumberZero`, `Numpad`, `Nut`
+**O:** `Octagon`, `OfficeChair`, `Onigiri`, `Option`, `Orange`, `OrangeSlice`, `Oven`
+**P:** `Package`, `PaintBrushBroad`, `PaintBrushHousehold`, `PaintBrush`, `PaintBucket`, `PaintRoller`, `Palette`, `Panorama`, `Pants`, `PaperPlane`, `PaperPlaneRight`, `PaperPlaneTilt`, `PaperclipHorizontal`, `Paperclip`, `Parachute`, `Paragraph`, `Parallelogram`, `Park`, `Password`, `Path`, `PauseCircle`, `Pause`, `PawPrint`, `Peace`, `Pen`, `PenNib`, `PenNibStraight`, `PencilCircle`, `Pencil`, `PencilLine`, `PencilRuler`, `PencilSimple`, `PencilSimpleLine`, `PencilSimpleSlash`, `PencilSlash`, `Pentagon`, `Pentagram`, `Pepper`, `Percent`, `PersonArmsSpread`, `Person`, `PersonSimpleBike`, `PersonSimpleCircle`, `PersonSimpleHike`, `PersonSimple`, `PersonSimpleRun`, `PersonSimpleSki`, `PersonSimpleSnowboard`, `PersonSimpleSwim`, `PersonSimpleTaiChi`, `PersonSimpleThrow`, `PersonSimpleWalk`, `Perspective`, `PhoneCall`, `PhoneDisconnect`, `Phone`, `PhoneIncoming`, `PhoneList`, `PhoneOutgoing`, `PhonePause`, `PhonePlus`, `PhoneSlash`, `PhoneTransfer`, `PhoneX`, `Pi`, `PianoKeys`, `PicnicTable`, `PictureInPicture`, `PiggyBank`, `Pill`, `PinaxLogo`, `PingPong`, `PintGlass`, `Pinwheel`, `Pipe`, `PipeWrench`, `Pizza`, `Placeholder`, `Planet`, `Plant`, `PlayCircle`, `Play`, `PlayPause`, `Playlist`, `PlugCharging`, `Plug`, `PlugsConnected`, `Plugs`, `PlusCircle`, `Plus`, `PlusMinus`, `PlusSquare`, `PokerChip`, `PoliceCar`, `Polygon`, `Popcorn`, `Popsicle`, `PottedPlant`, `Power`, `Prescription`, `PresentationChart`, `Presentation`, `PriceApi`, `Printer`, `Prohibit`, `ProhibitInset`, `ProjectorScreenChart`, `ProjectorScreen`, `Pulse`, `PushPin`, `PushPinSimple`, `PushPinSimpleSlash`, `PushPinSlash`, `PuzzlePiece`
+**Q:** `QrCode`, `Question`, `QuestionMark`, `Queue`, `Quotes`
+**R:** `Rabbit`, `Racquet`, `Radical`, `RadioButton`, `Radio`, `Radioactive`, `RainbowCloud`, `Rainbow`, `Ranking`, `ReactJsLogo`, `Receipt`, `ReceiptX`, `Record`, `RectangleDashed`, `Rectangle`, `Recycle`, `RedditLogo`, `Repeat`, `RepeatOnce`, `Resize`, `RewindCircle`, `Rewind`, `RoadHorizon`, `Robot`, `Rocket`, `RocketLaunch`, `RoleConsumer`, `RoleCurator`, `RoleDelegator`, `RoleDeveloper`, `RoleIndexer`, `Rows`, `RowsPlusBottom`, `RowsPlusTop`, `Rss`, `RssSimple`, `Rug`, `Ruler`
+**S:** `Sailboat`, `Scales`, `Scan`, `ScanSmiley`, `Scissors`, `Scooter`, `Screencast`, `Screwdriver`, `Scribble`, `ScribbleLoop`, `Scroll`, `SealCheck`, `Seal`, `SealPercent`, `SealQuestion`, `SealWarning`, `Seat`, `Seatbelt`, `SecurityCamera`, `SelectionAll`, `SelectionBackground`, `SelectionForeground`, `Selection`, `SelectionInverse`, `SelectionPlus`, `SelectionSlash`, `SemioticLabsLogo`, `Shapes`, `ShareFat`, `Share`, `ShareNetwork`, `ShieldCheck`, `ShieldCheckered`, `ShieldChevron`, `Shield`, `ShieldPlus`, `ShieldSlash`, `ShieldStar`, `ShieldWarning`, `ShippingContainer`, `ShirtFolded`, `ShootingStar`, `ShoppingBag`, `ShoppingBagOpen`, `ShoppingCart`, `ShoppingCartSimple`, `Shovel`, `Shower`, `Shrimp`, `ShuffleAngular`, `Shuffle`, `ShuffleSimple`, `SidebarLeft`, `SidebarRight`, `Sigma`, `SignIn`, `SignOut`, `Signature`, `Signpost`, `SimCard`, `Siren`, `SkipBackCircle`, `SkipBack`, `SkipForwardCircle`, `SkipForward`, `Skull`, `SlidersHorizontal`, `Sliders`, `Slideshow`, `SmileyAngry`, `SmileyBlank`, `Smiley`, `SmileyMeh`, `SmileyMelting`, `SmileyNervous`, `SmileySad`, `SmileySticker`, `SmileyWink`, `SmileyXEyes`, `Sneaker`, `SneakerMove`, `Snowflake`, `SoccerBall`, `Sock`, `SolarPanel`, `SolarRoof`, `SortAscending`, `SortDescending`, `Spade`, `Sparkle`, `SpeakerHifi`, `SpeakerHigh`, `SpeakerLow`, `SpeakerNone`, `SpeakerSimpleHigh`, `SpeakerSimpleLow`, `SpeakerSimpleNone`, `SpeakerSimpleSlash`, `SpeakerSimpleX`, `SpeakerSlash`, `SpeakerX`, `Speedometer`, `Sphere`, `Spiral`, `SplitHorizontal`, `SplitVertical`, `SpotifyLogo`, `SprayBottle`, `SquareHalfBottom`, `SquareHalf`, `Square`, `SquareSplitHorizontal`, `SquareSplitVertical`, `SquaresFour`, `Stack`, `StackMinus`, `StackPlus`, `StackSimple`, `Stairs`, `Stamp`, `StandardDefinition`, `StarAndCrescent`, `StarFour`, `StarHalf`, `Star`, `StarOfDavid`, `SteeringWheel`, `Steps`, `Stethoscope`, `Sticker`, `Stool`, `StopCircle`, `Stop`, `Storefront`, `Strategy`, `StreamingFastLogo`, `Student`, `Subgraph`, `SubgraphNetwork`, `SubgraphStudioLogo`, `SubsetOf`, `SubsetProperOf`, `SubstreamsDevLogo`, `Substreams`, `SubstreamsPoweredSubgraph`, `Subtitles`, `SubtitlesSlash`, `Subtract`, `SubtractSquare`, `Subway`, `Suitcase`, `SuitcaseRolling`, `SuitcaseSimple`, `SunDim`, `SunHorizon`, `Sun`, `Sunglasses`, `SupersetOf`, `SupersetProperOf`, `Swap`, `Swatches`, `SwimmingPool`, `Sword`, `Synagogue`, `Syringe`
+**T:** `TShirt`, `Table`, `Tabs`, `TagChevron`, `Tag`, `TagSimple`, `Target`, `Taxi`, `TeaBag`, `TelegramLogo`, `Television`, `TelevisionSimple`, `TennisBall`, `Tent`, `Terminal`, `TerminalWindow`, `TestTube`, `TextAUnderline`, `TextAa`, `TextAlignCenter`, `TextAlignJustify`, `TextAlignLeft`, `TextAlignRight`, `TextB`, `TextColumns`, `TextHFive`, `TextHFour`, `TextH`, `TextHOne`, `TextHSix`, `TextHThree`, `TextHTwo`, `TextIndent`, `TextItalic`, `TextOutdent`, `TextStrikethrough`, `TextSubscript`, `TextSuperscript`, `TextT`, `TextTSlash`, `TextUnderline`, `Textbox`, `TheHouseLogo`, `ThermometerCold`, `ThermometerHot`, `Thermometer`, `ThermometerSimple`, `ThreadsLogo`, `ThreeD`, `ThumbsDown`, `ThumbsUp`, `Ticket`, `Tilde`, `Timer`, `TipJar`, `Tipi`, `Tire`, `ToggleLeft`, `ToggleRight`, `Toilet`, `ToiletPaper`, `TokenApi`, `Toolbox`, `Tooth`, `Tornado`, `Tote`, `ToteSimple`, `Towel`, `Tractor`, `Trademark`, `TrademarkRegistered`, `TrafficCone`, `TrafficSign`, `TrafficSignal`, `Train`, `TrainRegional`, `TrainSimple`, `Tram`, `Translate`, `TrashClock`, `Trash`, `TrashSimple`, `TrayArrowDown`, `TrayArrowUp`, `Tray`, `TreasureChest`, `TreeEvergreen`, `Tree`, `TreePalm`, `TreeStructure`, `TreeView`, `TrendDown`, `TrendUp`, `TriangleDashed`, `Triangle`, `Trolley`, `TrolleySuitcase`, `Trophy`, `Truck`, `TruckTrailer`
+**U:** `Umbrella`, `UmbrellaSimple`, `Union`, `Unite`, `UniteSquare`, `Upload`, `UploadSimple`, `Usb`, `UserCheck`, `UserCircleCheck`, `UserCircleDashed`, `UserCircleGear`, `UserCircle`, `UserCircleMinus`, `UserCirclePlus`, `UserFocus`, `UserGear`, `User`, `UserList`, `UserMinus`, `UserPlus`, `UserRectangle`, `UserSound`, `UserSquare`, `UserSwitch`, `UsersFour`, `Users`, `UsersThree`
+**V:** `Van`, `Vault`, `VectorThree`, `VectorTwo`, `Vibrate`, `VideoCamera`, `VideoCameraSlash`, `VideoConference`, `Video`, `Vignette`, `VinylRecord`, `VirtualReality`, `Virus`, `Visor`, `Voicemail`, `Volleyball`
+**W:** `Wall`, `Wallet`, `Warehouse`, `WarningCircle`, `WarningDiamond`, `Warning`, `WarningOctagon`, `WarpcastLogo`, `WashingMachine`, `Watch`, `WaveSawtooth`, `WaveSine`, `WaveSquare`, `WaveTriangle`, `Waveform`, `WaveformSlash`, `Waves`, `Webcam`, `WebcamSlash`, `Wheelchair`, `WheelchairMotion`, `WifiHigh`, `WifiLow`, `WifiMedium`, `WifiNone`, `WifiSlash`, `WifiX`, `Wind`, `Windmill`, `Wine`, `WonderlandLogo`, `Wrench`
+**X:** `XCircle`, `X`, `XLogo`, `XSquare`
+**Y:** `Yarn`, `YinYang`, `YoutubeLogo`
+
+## Interactive Icons
+
+Custom icons that animate or change based on the state of the button/link they're inside.
+
+- **`ArrowLeftInteractiveIcon`** / **`ArrowRightInteractiveIcon`** / **`ArrowUpRightInteractiveIcon`** — like their Phosphor counterparts but translate in the direction they point on hover. Have a `hiddenByDefault` prop: when `false` (default), the arrow is always visible and translates away on hover; when `true`, it starts hidden and appears on hover; when `'if-can-hover'`, behaves like `true` on hover-capable devices and `false` on touch-only devices. `ArrowUpRightInteractiveIcon` is used by `Link` as the default `addonAfter` when `target="blank"`.
+- **`CaretDownInteractiveIcon`** — like `CaretDownIcon` but rotates 180° when the parent element is "open" (matches `[open]`, `:popover-open`, `[aria-expanded=true]`, etc.).
+- **`CaretUpDownInteractiveIcon`** — like `CaretUpDownIcon` but highlights one direction based on the `direction` prop (`'ascending'` or `'descending'`). Used by `Table` column headings to show sort state.
+- **`SidebarLeftInteractiveIcon`** / **`SidebarRightInteractiveIcon`** — like their Phosphor counterparts but the sidebar panel appears filled when the parent element is "checked" (matches `[aria-checked=true]`, `[aria-pressed=true]`, `[aria-selected=true]`). Used by `Pane.ToggleButton`.
+
+## Dynamic Icons
+
+Custom icons whose appearance depends on a data prop.
+
+- **`CalendarDynamicIcon`** — displays a calendar with the current (or specified) day number. Has a `date` prop (number or `Date`, defaults to `new Date()`).
+- **`HourglassDynamicIcon`** — displays an hourglass with variable fill level. Has a `filledPercentage` prop (0–100, defaults to 0).
+
+## Other Custom Icons
+
+- **`LoadingIcon`** — animated "spinner" (three dots/diamonds that grow and shrink in a staggered pattern). Not a traditional spinning circle. Used by `Button` (with `loading={true}`). **Do not add `animate-spin`** — it has its own animation.
+- **`CopyInteractiveIcon`** — like `CopyIcon` but animates when the `copied` prop is `true`. Used by `CopyButton`.
+
+## Logo Icons
+
+Brand/product logos. Some have a `variant` prop with `'mono'` (default) and `'branded'` (full-color) options:
+
+**With `mono`/`branded` variant:** `AmpLogo`, `AmpersendLogo`, `AnvilLogo`, `CurlLogo`, `DiscordLogo`, `FarcasterLogo`, `GeoLogo`, `GoogleLogo`, `GraphExplorerLogo`, `HouseOfWeb3Logo`, `NodeJsLogo`, `ReactJsLogo`, `RedditLogo`, `SpotifyLogo`, `SubgraphStudioLogo`, `SubstreamsDevLogo`, `TelegramLogo`, `TheHouseLogo`, `WarpcastLogo`, `YoutubeLogo`
+
+**Mono only (no variant prop):** `AdvocatesDaoLogo`, `BuildersDaoLogo`, `EdgeAndNodeLogo`, `GithubLogo`, `GraphOpsLogo`, `GraphtronautsLogo`, `HypergraphLogo`, `InfraDaoLogo`, `InstagramLogo`, `MessariLogo`, `NextJsLogo`, `PinaxLogo`, `SemioticLabsLogo`, `StreamingFastLogo`, `SubgraphStudioLogo`, `ThreadsLogo`, `WonderlandLogo`, `XLogo`

package/skill/references/patterns.md

@@ -0,0 +1,573 @@
+# EDS Patterns
+
+Common UI compositions that demonstrate proper EDS usage. These are **inspiration, not templates** — adapt and combine them for your specific needs. Don't copy them verbatim.
+
+## Dashboard Stats
+
+BAD: Cards for every stat, nested in a container card.
+
+```tsx
+<Card>
+  <div className="grid grid-cols-4 gap-4">
+    <Card>Total: 100</Card>
+    <Card>Active: 50</Card>
+    <Card>Pending: 30</Card>
+    <Card>Failed: 20</Card>
+  </div>
+</Card>
+```
+
+GOOD: Description list.
+
+```tsx
+<DescriptionList orientation="horizontal">
+  <DescriptionList.Item label="Total" addon={<Status variant="brand" />}>100</DescriptionList.Item>
+  <DescriptionList.Item label="Active" addon={<Status variant="success" />}>
+    50
+  </DescriptionList.Item>
+  <DescriptionList.Item label="Pending" addon={<Status variant="warning" />}>
+    30
+  </DescriptionList.Item>
+  <DescriptionList.Item label="Failed" addon={<Status variant="error" />}>
+    20
+  </DescriptionList.Item>
+</DescriptionList>
+
+// OR, for a more custom design:
+
+<dl className="flex gap-6">
+  <div>
+    <dt className="text-12 text-muted">Total</dt>
+    <dd className="mt-1 text-20 font-medium">100</dd>
+  </div>
+  <Divider orientation="vertical" />
+  <div>
+    <dt className="text-12 text-muted">Active</dt>
+    <dd className="mt-1 text-20 font-medium">50</dd>
+  </div>
+</dl>
+```
+
+## Activity Lists
+
+BAD: Stacked cards for each item.
+
+```tsx
+<div className="grid grid-cols-4 gap-4">
+  {items.map((item) => (
+    <Card key={item.id}>
+      <p>{item.title}</p>
+      <p>{item.time}</p>
+    </Card>
+  ))}
+</div>
+```
+
+GOOD: Table with proper semantic markup.
+
+```tsx
+<Table>
+  <Table.Header>
+    <Table.HeaderCell>Event</Table.HeaderCell>
+    <Table.HeaderCell>Time</Table.HeaderCell>
+    <Table.HeaderCell>Status</Table.HeaderCell>
+  </Table.Header>
+  <Table.Body>
+    {items.map((item) => (
+      <Table.Row key={item.id}>
+        <Table.Cell>{item.title}</Table.Cell>
+        <Table.Cell className="text-muted">{item.time}</Table.Cell>
+        <Table.Cell>
+          <Status variant={item.status}>{item.statusLabel}</Status>
+        </Table.Cell>
+      </Table.Row>
+    ))}
+  </Table.Body>
+</Table>
+
+// OR, for less complex data, a simple list with borders between items:
+
+<ul className="text-14">
+  {items.map((item) => (
+    <li
+      key={item.id}
+      className="flex justify-between gap-4 py-3 not-first:border-t not-first:border-subtle"
+    >
+      <span className="truncate">{item.title}</span>
+      <span className="shrink-0 text-muted">{item.time}</span>
+    </li>
+  ))}
+</ul>
+```
+
+## Transaction/Record Details
+
+GOOD: Description list, optionally inside a card.
+
+```tsx
+<Card variant="tertiary">
+  <h3 className="mb-4 text-16 font-medium">Transaction Details</h3>
+  <DescriptionList>
+    <DescriptionList.Item label="Hash">
+      <Address address={tx.hash} />
+    </DescriptionList.Item>
+    <DescriptionList.Item label="From">
+      <Address address={tx.from}>{tx.fromEns}</Address>
+    </DescriptionList.Item>
+    <DescriptionList.Item label="Value">{tx.value} ETH</DescriptionList.Item>
+    <DescriptionList.Item label="Status">
+      <Status variant={tx.success ? 'success' : 'error'}>
+        {tx.success ? 'Confirmed' : 'Failed'}
+      </Status>
+    </DescriptionList.Item>
+  </DescriptionList>
+</Card>
+```
+
+## Form Layouts
+
+**Standard form with proper spacing:**
+
+```tsx
+<form onSubmit={handleSubmit} className="flex flex-col gap-6">
+  <Input
+    label="Subgraph Name"
+    description="A unique identifier for your subgraph"
+    value={name}
+    onValueChange={setName}
+  />
+  <Input label="Description" value={description} onValueChange={setDescription} />
+  <TextArea label="Schema" value={schema} onValueChange={setSchema} />
+  <ButtonGroup>
+    <Button variant="tertiary" onClick={onCancel}>
+      Cancel
+    </Button>
+    <Button variant="secondary" type="submit">
+      Create Subgraph
+    </Button>
+  </ButtonGroup>
+</form>
+```
+
+Note: Submit is `secondary`, not `primary`. Save the `primary` for the most critical action on the entire page.
+
+## Navigation Sidebars
+
+BAD: Large category labels, small nav items, poor touch targets.
+
+GOOD: Category labels smaller than items, icons, adequate spacing, clear active state. Uses `ButtonOrLink` (from `@edgeandnode/eds-react/base`) instead of raw `<a>` for router integration without visual opinions.
+
+```tsx
+<nav className="flex flex-col gap-6 p-4">
+  <div>
+    <div className="mb-2 px-3 text-10 text-caption text-muted">Overview</div>
+    <div className="flex flex-col gap-1">
+      <ButtonOrLink
+        href="/"
+        aria-current
+        className="flex items-center gap-2 rounded-8 px-3 py-2 text-14 font-medium text-muted transition-colors hover:bg-muted current:bg-muted current:text-default"
+      >
+        <HouseIcon alt="" />
+        <span className="truncate">Dashboard</span>
+      </ButtonOrLink>
+      <ButtonOrLink
+        href="/analytics"
+        className="flex items-center gap-2 rounded-8 px-3 py-2 text-14 font-medium text-muted transition-colors hover:bg-muted current:bg-muted current:text-default"
+      >
+        <ChartLineUpIcon alt="" />
+        <span className="truncate">Analytics</span>
+      </ButtonOrLink>
+    </div>
+  </div>
+
+  <div>
+    <div className="mb-2 px-3 text-10 text-caption text-muted">Subgraphs</div>
+    <div className="flex flex-col gap-1">
+      <ButtonOrLink
+        href="/my-subgraphs"
+        className="flex items-center gap-2 rounded-8 px-3 py-2 text-14 font-medium text-muted transition-colors hover:bg-muted current:bg-muted current:text-default"
+      >
+        <SubgraphIcon alt="" />
+        <span className="truncate">My Subgraphs</span>
+      </ButtonOrLink>
+      <ButtonOrLink
+        href="/deployments"
+        className="flex items-center gap-2 rounded-8 px-3 py-2 text-14 font-medium text-muted transition-colors hover:bg-muted current:bg-muted current:text-default"
+      >
+        <RocketIcon alt="" />
+        <span className="truncate">Deployments</span>
+      </ButtonOrLink>
+    </div>
+  </div>
+</nav>
+```
+
+## Action Menus
+
+**Use Menu for dropdowns:**
+
+```tsx
+<Menu
+  trigger={
+    <Button variant="tertiary" addonAfter={CaretDownInteractiveIcon}>
+      Actions
+    </Button>
+  }
+>
+  <Menu.Item>Edit</Menu.Item>
+  <Menu.Item>Duplicate</Menu.Item>
+  <Menu.Item variant="danger">Delete</Menu.Item>
+</Menu>
+```
+
+## Wallet Connection
+
+```tsx
+{
+  isConnected ? (
+    <Menu trigger={<Address variant="enclosed" address={account} copy={false} />}>
+      <Menu.Item>Copy Address</Menu.Item>
+      <Menu.Item>Disconnect</Menu.Item>
+    </Menu>
+  ) : (
+    <Button variant="secondary" onClick={connect}>
+      Connect Wallet
+    </Button>
+  )
+}
+```
+
+Note: Connect is `secondary`, not `primary`. The primary action is whatever the user came to do (delegate, stake, etc.), not connecting their wallet.
+
+## Empty States
+
+```tsx
+<div className="flex flex-col items-center justify-center py-16 text-center">
+  <TrayIcon alt="" size={8} className="text-muted" />
+  <h3 className="mt-4 text-16 font-medium">No subgraphs yet</h3>
+  <p className="mt-2 max-w-sm text-14 text-muted">
+    Create your first subgraph to start indexing blockchain data.
+  </p>
+  <Button variant="secondary" className="mt-6">
+    Create Subgraph
+  </Button>
+</div>
+```
+
+## Responsive UIs
+
+**Use `Pane` for responsive sidebars.** On desktop it's a docked sidebar; on mobile it overlays.
+
+```tsx
+<div className="flex min-h-full w-full flex-col border border-default">
+  <header className="border-b border-default bg-subtle p-4">
+    <Pane.ToggleButton name="sidebar">
+      <SidebarLeftInteractiveIcon />
+    </Pane.ToggleButton>
+  </header>
+  <Pane.Container className="flex-1">
+    <Pane
+      name="sidebar"
+      className="w-64 border-e border-default bg-subtle p-6 max-sm:prop-layout-overlay"
+    >
+      Sidebar content
+    </Pane>
+    <main className="p-6">Main content</main>
+  </Pane.Container>
+</div>
+```
+
+**Hide/show labels on mobile:**
+
+```tsx
+<Button addonBefore={PlusIcon} className="max-sm:prop-hide-label-true">
+  Create Subgraph
+</Button>
+```
+
+**Responsive grids:**
+
+```tsx
+<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+  {items.map((item) => (
+    <Card key={item.id}>{/* ... */}</Card>
+  ))}
+</div>
+```
+
+## Clickable Cards
+
+**Card as a link or button with interactive content inside.** Use the `interactiveContent` prop to prevent rendering a button/link inside another button/link.
+
+```tsx
+<Card
+  interactiveContent
+  // If the card is a link:
+  href="/agents/1"
+  // If the card is a button:
+  onClick={() => {
+    /* ... */
+  }}
+>
+  <div className="flex justify-between gap-4">
+    <div>
+      <h3 className="font-medium">My Agent</h3>
+      <p className="mt-1 text-14 text-muted">An agent that does things</p>
+    </div>
+    <ButtonGroup variant="tertiary">
+      <Button>
+        <PencilIcon alt="Edit" />
+      </Button>
+      <Button>
+        <TrashIcon alt="Delete" />
+      </Button>
+    </ButtonGroup>
+  </div>
+</Card>
+```
+
+## Checkable Cards
+
+**Use `.Area` components to make entire cards checkable.** `Checkbox.Area`, `Radio.Area`, and `Switch.Area` wrap a `Card` rendered as a `<label>` — clicking anywhere on the card toggles the control.
+
+```tsx
+// Toggle (on/off)
+<Switch.Area render={<Card as="label" />}>
+  <Switch checked={enabled} onCheckedChange={setEnabled}>
+    <span className="block">Email notifications</span>
+    <span className="mt-1 block text-12 text-muted">Receive updates via email</span>
+  </Switch>
+</Switch.Area>
+
+// Single-select (pick one)
+<Radio.Group name="theme">
+  <div className="flex flex-col gap-3">
+    <Radio.Area render={<Card as="label" />}>
+      <Radio value="dark">Dark mode</Radio>
+    </Radio.Area>
+    <Radio.Area render={<Card as="label" />}>
+      <Radio value="light">Light mode</Radio>
+    </Radio.Area>
+  </div>
+</Radio.Group>
+
+// Multi-select (pick many)
+<div className="flex flex-col gap-3">
+  <Checkbox.Area render={<Card as="label" />}>
+    <Checkbox checked={a} onCheckedChange={setA}>
+      Option A
+    </Checkbox>
+  </Checkbox.Area>
+  <Checkbox.Area render={<Card as="label" />}>
+    <Checkbox checked={b} onCheckedChange={setB}>
+      Option B
+    </Checkbox>
+  </Checkbox.Area>
+</div>
+```
+
+## Collapsibles / Accordion
+
+**Use native `<details>`/`<summary>` — not `useState`-based toggles.** Put padding on `<summary>`, not `<details>`, so the clickable area matches the visual target. Use a container with flex + gap for spacing between items.
+
+BAD: Padding on `<details>`, no open indicator.
+
+```tsx
+<div className="flex flex-col">
+  {faqs.map((faq) => (
+    <details key={faq.question} className="border-b border-muted py-4">
+      <summary>{faq.question}</summary>
+      <p>{faq.answer}</p>
+    </details>
+  ))}
+</div>
+```
+
+GOOD: No padding on `<details>`, open indicator, hover highlight.
+
+```tsx
+<div className="flex flex-col gap-1">
+  {faqs.map((faq) => (
+    <details key={faq.question} className="group">
+      <summary className="flex items-center justify-between gap-4 rounded-8 px-4 py-3 text-16 font-medium hover:bg-muted">
+        {faq.question}
+        <CaretDownInteractiveIcon alt="" />
+      </summary>
+      <div className="px-4 pb-3 text-14 text-muted">{faq.answer}</div>
+    </details>
+  ))}
+</div>
+```
+
+GOOD: Same as above but with a bordered/divided style.
+
+```tsx
+<div className="flex flex-col">
+  {faqs.map((faq) => (
+    <details key={faq.question} className="group not-first:border-t not-first:border-subtle">
+      <summary className="flex items-center justify-between gap-4 py-4 text-16 font-medium">
+        {faq.question}
+        <CaretDownInteractiveIcon alt="" />
+      </summary>
+      <div className="pb-4 text-14 text-muted">{faq.answer}</div>
+    </details>
+  ))}
+</div>
+```
+
+**Animated version** using `ExperimentalTransition` for smooth height transitions:
+
+```tsx
+function Disclosure({ trigger, children }: { trigger: ReactNode; children: ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const [detailsOpen, setDetailsOpen] = useState(false)
+
+  return (
+    <details
+      open={detailsOpen || undefined}
+      onToggle={(event) => {
+        // Handle the browser's "find" feature opening the disclosure
+        if (event.newState === 'open') {
+          setOpen(true)
+          setDetailsOpen(true)
+        }
+      }}
+    >
+      <summary
+        onClick={(event) => {
+          event.preventDefault()
+          const newOpen = !open
+          setOpen(newOpen)
+          if (newOpen) setDetailsOpen(true)
+        }}
+        className="flex items-center justify-between gap-4 py-4 text-16 font-medium"
+      >
+        {trigger}
+        <CaretDownInteractiveIcon alt="" className="text-muted" />
+      </summary>
+      <ExperimentalTransition
+        visibleKey={open ? 'content' : null}
+        onTransitionEnd={({ exited }) => {
+          if (exited.has('content')) setDetailsOpen(false)
+        }}
+        renderChild={(renderProps) => (
+          /**
+           * `hidden` prevents the browser's "find" feature from finding the disclosure's content
+           * when it is closed, so we make it invisible without removing it from the accessibility
+           * tree instead (with `pointer-events-none absolute opacity-0`).
+           *
+           * TODO: Replace with `hidden={state.status === 'hidden' ? 'until-found' : false}` once
+           * it's supported by React: https://github.com/facebook/react/issues/24740.
+           */
+          <span
+            {...renderProps}
+            hidden={false}
+            className={cn(
+              renderProps.className,
+              'data-[status=hidden]:pointer-events-none data-[status=hidden]:absolute data-[status=hidden]:opacity-0',
+            )}
+          />
+        )}
+      >
+        <div key="content" className="pb-4 text-14 text-muted">
+          {children}
+        </div>
+      </ExperimentalTransition>
+    </details>
+  )
+}
+```
+
+## Multi-step Modals
+
+For a `Modal` that walks a user through several steps (confirm → sign → success, etc.), declare the possible steps up front and drive `currentStep` from state. The function-form `children` receives `{ currentStep, setCurrentStep, closeModal }` — switch on `currentStep` and return the JSX for that step. **Always render the exact same set of `<Modal.Header>` / `<Modal.Body>` / `<Modal.Footer>` in every step** — leave one empty if a step doesn't need it, don't omit it — otherwise the step transition breaks.
+
+```tsx
+type Step = 'confirm' | 'sign' | 'success'
+
+function DeleteSubgraphModal() {
+  const [currentStep, setCurrentStep] = useState<Step>('confirm')
+
+  return (
+    <Modal
+      trigger={<Button variant="danger">Delete</Button>}
+      steps={['confirm', 'sign', 'success']}
+      currentStep={currentStep}
+      onCurrentStepChange={setCurrentStep}
+    >
+      {({ currentStep, setCurrentStep, closeModal }) => {
+        switch (currentStep) {
+          case 'confirm':
+            return (
+              <>
+                <Modal.Header title="Delete Subgraph" />
+                <Modal.Body>Are you sure? This is irreversible.</Modal.Body>
+                <Modal.Footer
+                  actionPrimary={
+                    <Button variant="danger" onClick={() => setCurrentStep('sign')}>
+                      Delete
+                    </Button>
+                  }
+                  actionSecondary={<Button onClick={closeModal}>Cancel</Button>}
+                />
+              </>
+            )
+          case 'sign':
+            return (
+              <>
+                <Modal.Header title="Signature Required" />
+                <Modal.Body>Please confirm on your wallet.</Modal.Body>
+                <Modal.Footer />
+              </>
+            )
+          case 'success':
+            return (
+              <>
+                <Modal.Header title="Deleted" />
+                <Modal.Body>Your subgraph has been deleted.</Modal.Body>
+                <Modal.Footer actionPrimary={<Button onClick={closeModal}>Close</Button>} />
+              </>
+            )
+        }
+      }}
+    </Modal>
+  )
+}
+```
+
+**Extracting steps into their own components?** Wrap the conditional in an outer `<Modal.Step>` (provider), and have each extracted step component wrap its `<Modal.Header>` / `<Modal.Body>` / `<Modal.Footer>` in an inner `<Modal.Step>` (consumer). Together they preserve stable element identity for the Header/Body/Footer slots across steps, so React doesn't remount them and the transition still animates.
+
+```tsx
+<Modal.Step>
+  {currentStep === 'confirm' ? (
+    <ConfirmStep onNext={() => setCurrentStep('sign')} onCancel={closeModal} />
+  ) : currentStep === 'sign' ? (
+    <SignStep />
+  ) : (
+    <SuccessStep onClose={closeModal} />
+  )}
+</Modal.Step>
+```
+
+Each extracted step wraps its slots in `<Modal.Step>`:
+
+```tsx
+function ConfirmStep({ onNext, onCancel }: { onNext: () => void; onCancel: () => void }) {
+  return (
+    <Modal.Step>
+      <Modal.Header title="Delete Subgraph" />
+      <Modal.Body>Are you sure? This is irreversible.</Modal.Body>
+      <Modal.Footer
+        actionPrimary={
+          <Button variant="danger" onClick={onNext}>
+            Delete
+          </Button>
+        }
+        actionSecondary={<Button onClick={onCancel}>Cancel</Button>}
+      />
+    </Modal.Step>
+  )
+}
+```
+
+Without the `<Modal.Step>` provider/consumer pair, React would treat each conditional branch as a different component (`ConfirmStep` vs `SignStep` vs `SuccessStep`) and remount everything inside — including the Header/Body/Footer — on every step change, which breaks the transition.