Repository: coinbase/cds Branch: master Commit: a4ec111ec61d Files: 10588 Total size: 60.8 MB Directory structure: gitextract_072gxaw6/ ├── .agents/ │ └── skills/ │ └── skill-creator/ │ ├── LICENSE.txt │ ├── SKILL.md │ ├── agents/ │ │ ├── analyzer.md │ │ ├── comparator.md │ │ └── grader.md │ ├── assets/ │ │ └── eval_review.html │ ├── eval-viewer/ │ │ ├── generate_review.py │ │ └── viewer.html │ ├── references/ │ │ └── schemas.md │ └── scripts/ │ ├── __init__.py │ ├── aggregate_benchmark.py │ ├── generate_report.py │ ├── improve_description.py │ ├── package_skill.py │ ├── quick_validate.py │ ├── run_eval.py │ ├── run_loop.py │ └── utils.py ├── .browserslistrc ├── .claude/ │ ├── agents/ │ │ └── design-system-researcher.md │ ├── settings.json │ └── skills/ │ ├── components.best-practices/ │ │ └── SKILL.md │ ├── components.styles/ │ │ ├── README.md │ │ └── SKILL.md │ ├── components.write-docs/ │ │ ├── README.md │ │ └── SKILL.md │ ├── deprecate-cds-api/ │ │ └── SKILL.md │ ├── dev.cds-mobile/ │ │ └── SKILL.md │ ├── dev.cds-web/ │ │ └── SKILL.md │ ├── eslint-plugin-custom-rule/ │ │ └── SKILL.md │ ├── feature-planner/ │ │ ├── SKILL.md │ │ └── evals/ │ │ └── evals.json │ ├── figma.audit-connect/ │ │ └── SKILL.md │ ├── figma.connect-best-practices/ │ │ └── SKILL.md │ ├── figma.create-connect/ │ │ └── SKILL.md │ ├── git.detect-breaking-changes/ │ │ └── SKILL.md │ ├── git.repo-manager/ │ │ └── SKILL.md │ ├── ktlo/ │ │ └── SKILL.md │ ├── research.component-libs/ │ │ └── SKILL.md │ └── research.deprecation-usage/ │ └── SKILL.md ├── .codeflow.yml ├── .cursor/ │ ├── mcp.json │ ├── rules/ │ │ └── nx-rules.mdc │ └── worktrees.json ├── .dockerignore ├── .dontdockerignore ├── .github/ │ ├── CODEOWNERS │ ├── PULL_REQUEST_TEMPLATE.md │ ├── actions/ │ │ ├── get-merge-base/ │ │ │ └── action.yml │ │ └── setup/ │ │ └── action.yml │ ├── labeler.yml │ └── workflows/ │ ├── ci.yml │ ├── debug-workflow.yml │ ├── figma.yml │ ├── guard-debug-workflow.yml │ ├── illustrations-icons-checklist.yml │ ├── pr.yml │ ├── publish.yml │ ├── slack-pull-request.yml │ ├── visreg-mobile.yml │ └── visreg-web.yml ├── .gitignore ├── .lasthash ├── .mcp.json ├── .nvmrc ├── .nxignore ├── .percy.js ├── .prettierignore ├── .stylelintrc.cjs ├── .vscode/ │ ├── extensions.json │ ├── launch.json │ ├── settings.json │ └── tasks.json ├── .watchmanconfig ├── .yarn/ │ ├── patches/ │ │ ├── @expo-cli-npm-0.18.29-f58906fdfb.patch │ │ ├── @testing-library-user-event-npm-14.0.4-109d618170 │ │ ├── depcheck-npm-1.4.7-d4cc813cc3.patch │ │ ├── expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch │ │ ├── expo-splash-screen-npm-0.27.5-f91e0b41df.patch │ │ ├── framer-motion-npm-10.18.0-ae9ea02138 │ │ ├── glob-npm-7.1.6-minimatch10-symbol.patch │ │ ├── react-native-gesture-handler-npm-2.16.2-c16529326b.patch │ │ ├── react-native-navigation-bar-color-npm-2.0.2-9a2ea3aaf6.patch │ │ └── react-native-npm-0.74.5-db5164f47b.patch │ └── releases/ │ └── yarn-4.9.2.cjs ├── .yarnrc.yml ├── AGENTS.md ├── CLAUDE.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── apps/ │ ├── docs/ │ │ ├── .stylelintrc.json │ │ ├── ai-doc-generator/ │ │ │ ├── concatenate-docs.cjs │ │ │ ├── generate-site-directory.cjs │ │ │ ├── generateDoc.cjs │ │ │ ├── generateRoutesContent.cjs │ │ │ ├── generateRoutesDoc.cjs │ │ │ ├── generator.cjs │ │ │ ├── resolveDoc.cjs │ │ │ └── validate.cjs │ │ ├── babel.config.cjs │ │ ├── blog/ │ │ │ ├── authors.yml │ │ │ ├── introducing-cds.mdx │ │ │ └── tags.yml │ │ ├── development.Dockerfile │ │ ├── docgen.config.js │ │ ├── docs/ │ │ │ ├── components/ │ │ │ │ ├── animation/ │ │ │ │ │ ├── Lottie/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── LottieStatusAnimation/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── cards/ │ │ │ │ │ ├── ContainedAssetCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ContentCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ContentCardBody/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ContentCardFooter/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ContentCardHeader/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DataCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── FloatingAssetCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── MediaCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── MessagingCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── NudgeCard/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── UpsellCard/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── charts/ │ │ │ │ │ ├── AreaChart/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── BarChart/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── CartesianChart/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Legend/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── LineChart/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PercentageBarChart/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PeriodSelector/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Point/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ReferenceLine/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Scrubber/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Sparkline/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SparklineGradient/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SparklineInteractive/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SparklineInteractiveHeader/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── XAxis/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── YAxis/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── data-display/ │ │ │ │ │ ├── ContentCell/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ListCell/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Table/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableBody/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableCaption/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableCell/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableCellFallback/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableFooter/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TableHeader/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── TableRow/ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── feedback/ │ │ │ │ │ ├── Banner/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Fallback/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ProgressBar/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ProgressBarWithFixedLabels/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ProgressBarWithFloatLabel/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ProgressCircle/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── Spinner/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── inputs/ │ │ │ │ │ ├── AvatarButton/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Button/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Checkbox/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── CheckboxCell/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── CheckboxGroup/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Chip/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Combobox/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ControlGroup/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── IconButton/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── InputChip/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Interactable/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── MediaChip/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Numpad/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── mobileMetadata.json │ │ │ │ │ ├── Pressable/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Radio/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── RadioCell/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── RadioGroup/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SearchInput/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SegmentedControl/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Select/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SelectAlpha/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SelectChip/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SelectChipAlpha/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SelectOption/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SlideButton/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── mobileMetadata.json │ │ │ │ │ ├── Switch/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TextInput/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── TileButton/ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── layout/ │ │ │ │ │ ├── Accordion/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── AccordionItem/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Box/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ButtonGroup/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Carousel/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Collapsible/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Divider/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Dropdown/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Grid/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── GridColumn/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── HStack/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── MultiContentModule/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Spacer/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── VStack/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── media/ │ │ │ │ │ ├── Avatar/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── CellMedia/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── HeroSquare/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Icon/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── LogoMark/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── LogoWordMark/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Pictogram/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── RemoteImage/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── RemoteImageGroup/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SpotIcon/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SpotRectangle/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SpotSquare/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SubBrandLogoMark/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── SubBrandLogoWordMark/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── navigation/ │ │ │ │ │ ├── BrowserBar/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── mobileMetadata.json │ │ │ │ │ ├── Coachmark/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── NavigationBar/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── NavigationTitle/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── NavigationTitleSelect/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PageFooter/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PageHeader/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Pagination/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SectionHeader/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SegmentedTabs/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Sidebar/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SidebarItem/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── SidebarMoreMenu/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Stepper/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TabIndicator/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TabLabel/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TabNavigation/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── a11y.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TabbedChips/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TabbedChipsAlpha/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Tabs/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── TopNavBar/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── mobileMetadata.json │ │ │ │ │ └── Tour/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── numbers/ │ │ │ │ │ └── RollingNumber/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── other/ │ │ │ │ │ ├── Calendar/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DateInput/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DatePicker/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DotCount/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DotStatusColor/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── DotSymbol/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── MediaQueryProvider/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── ThemeProvider/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── overlay/ │ │ │ │ │ ├── Alert/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── FocusTrap/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── FullscreenAlert/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── FullscreenModal/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── FullscreenModalLayout/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Modal/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ModalBody/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ModalFooter/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── ModalHeader/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Overlay/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PopoverPanel/ │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── PortalProvider/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Toast/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ ├── Tooltip/ │ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ │ ├── index.mdx │ │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ │ └── webMetadata.json │ │ │ │ │ └── Tray/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _mobileStyles.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── _webStyles.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ └── typography/ │ │ │ │ ├── Link/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── Tag/ │ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ │ ├── _webExamples.mdx │ │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ └── Text/ │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ ├── _mobilePropsTable.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── _webPropsTable.mdx │ │ │ │ ├── index.mdx │ │ │ │ ├── mobileMetadata.json │ │ │ │ └── webMetadata.json │ │ │ ├── extras/ │ │ │ │ └── color-pairing-tool.mdx │ │ │ ├── getting-started/ │ │ │ │ ├── ai-overview.mdx │ │ │ │ ├── colors.mdx │ │ │ │ ├── installation/ │ │ │ │ │ ├── _mobileContent.mdx │ │ │ │ │ ├── _webContent.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── introduction.mdx │ │ │ │ ├── playground.mdx │ │ │ │ ├── styling/ │ │ │ │ │ ├── _mobileContent.mdx │ │ │ │ │ ├── _webContent.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ ├── templates/ │ │ │ │ │ ├── _mobileContent.mdx │ │ │ │ │ ├── _webContent.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ ├── mobileMetadata.json │ │ │ │ │ └── webMetadata.json │ │ │ │ └── theming/ │ │ │ │ ├── _mobileContent.mdx │ │ │ │ ├── _webContent.mdx │ │ │ │ ├── index.mdx │ │ │ │ ├── mobileMetadata.json │ │ │ │ └── webMetadata.json │ │ │ ├── guides/ │ │ │ │ ├── _v9MobileInstallCommands.mdx │ │ │ │ ├── _v9MobilePeerDependencies.mdx │ │ │ │ ├── _v9WebInstallCommands.mdx │ │ │ │ ├── _v9WebPeerDependencies.mdx │ │ │ │ ├── v8-migration-guide.mdx │ │ │ │ └── v9-migration-guide.mdx │ │ │ ├── home/ │ │ │ │ ├── Home.tsx │ │ │ │ └── home.mdx │ │ │ └── hooks/ │ │ │ ├── useBreakpoints/ │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── webMetadata.json │ │ │ ├── useDimensions/ │ │ │ │ ├── _mobileApi.mdx │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ ├── mobileMetadata.json │ │ │ │ └── webMetadata.json │ │ │ ├── useEventHandler/ │ │ │ │ ├── _api.mdx │ │ │ │ ├── _examples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── metadata.json │ │ │ ├── useHasMounted/ │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── webMetadata.json │ │ │ ├── useIsoEffect/ │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── webMetadata.json │ │ │ ├── useMediaQuery/ │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── webMetadata.json │ │ │ ├── useMergeRefs/ │ │ │ │ ├── _api.mdx │ │ │ │ ├── _examples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── metadata.json │ │ │ ├── useOverlayContentContext/ │ │ │ │ ├── _mobileApi.mdx │ │ │ │ ├── _mobileExamples.mdx │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ ├── mobileMetadata.json │ │ │ │ └── webMetadata.json │ │ │ ├── usePreviousValue/ │ │ │ │ ├── _api.mdx │ │ │ │ ├── _examples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── metadata.json │ │ │ ├── useRefMap/ │ │ │ │ ├── _api.mdx │ │ │ │ ├── _examples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── metadata.json │ │ │ ├── useScrollBlocker/ │ │ │ │ ├── _webApi.mdx │ │ │ │ ├── _webExamples.mdx │ │ │ │ ├── index.mdx │ │ │ │ └── webMetadata.json │ │ │ └── useTheme/ │ │ │ ├── _mobileApi.mdx │ │ │ ├── _mobileExamples.mdx │ │ │ ├── _webApi.mdx │ │ │ ├── _webExamples.mdx │ │ │ ├── index.mdx │ │ │ ├── mobileMetadata.json │ │ │ └── webMetadata.json │ │ ├── docusaurus.config.ts │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── production.Dockerfile │ │ ├── project.json │ │ ├── sidebars.ts │ │ ├── src/ │ │ │ ├── components/ │ │ │ │ ├── ButtonLink/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── FeedbackWidget/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── FooterLink/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── home/ │ │ │ │ │ ├── AnimatedHero/ │ │ │ │ │ │ ├── HeroCell.tsx │ │ │ │ │ │ ├── HeroGrid.tsx │ │ │ │ │ │ ├── constants.ts │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ ├── ComponentCard/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── QuickStartCampaignCard/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── kbar/ │ │ │ │ │ ├── KBarAnimator.tsx │ │ │ │ │ ├── KBarModal/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ ├── KBarProvider.tsx │ │ │ │ │ ├── KBarResultItem.tsx │ │ │ │ │ ├── KBarResults.tsx │ │ │ │ │ ├── useKBarCustomActionsToActions.ts │ │ │ │ │ ├── useKBarPluginData.ts │ │ │ │ │ └── useKBarThemeActions.ts │ │ │ │ ├── nav/ │ │ │ │ │ └── NavbarThemeToggle/ │ │ │ │ │ └── index.tsx │ │ │ │ └── page/ │ │ │ │ ├── ColorPairingTool/ │ │ │ │ │ ├── ColorPicker.module.css │ │ │ │ │ ├── ColorPicker.tsx │ │ │ │ │ ├── ComponentPlayground.tsx │ │ │ │ │ ├── ContrastPanel.tsx │ │ │ │ │ ├── HotspotImagePreview.tsx │ │ │ │ │ ├── PlaygroundContent.tsx │ │ │ │ │ ├── README.md │ │ │ │ │ ├── ResultCard.module.css │ │ │ │ │ ├── ResultCard.tsx │ │ │ │ │ ├── UploadZone.module.css │ │ │ │ │ ├── UploadZone.tsx │ │ │ │ │ ├── WcagBadge.tsx │ │ │ │ │ ├── colorUtils.ts │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── types.ts │ │ │ │ ├── ColorSheet/ │ │ │ │ │ ├── ColorSchemeProvider.tsx │ │ │ │ │ ├── ColorSwatchGrid.tsx │ │ │ │ │ └── SpectrumGrid.tsx │ │ │ │ ├── ComponentBanner/ │ │ │ │ │ ├── BoxBanner.tsx │ │ │ │ │ ├── ButtonBanner.tsx │ │ │ │ │ ├── ButtonGroupBanner.tsx │ │ │ │ │ ├── DefaultBanner.tsx │ │ │ │ │ ├── DividerBanner.tsx │ │ │ │ │ ├── DropdownBanner.tsx │ │ │ │ │ ├── FallbackBanner.tsx │ │ │ │ │ ├── GettingStartedBanner.tsx │ │ │ │ │ ├── HStackBanner.tsx │ │ │ │ │ ├── HeroSquareBanner.tsx │ │ │ │ │ ├── HooksBanner.tsx │ │ │ │ │ ├── IconBanner.tsx │ │ │ │ │ ├── IconButtonBanner.tsx │ │ │ │ │ ├── LinkBanner.tsx │ │ │ │ │ ├── ListCellBanner.tsx │ │ │ │ │ ├── ModalBanner.tsx │ │ │ │ │ ├── PictogramBanner.tsx │ │ │ │ │ ├── PlaygroundBanner.tsx │ │ │ │ │ ├── PressableBanner.tsx │ │ │ │ │ ├── RemoteImageBanner.tsx │ │ │ │ │ ├── SelectBanner.tsx │ │ │ │ │ ├── SlideButtonBanner.tsx │ │ │ │ │ ├── SpacerBanner.tsx │ │ │ │ │ ├── SpinnerBanner.tsx │ │ │ │ │ ├── SpotRectangleBanner.tsx │ │ │ │ │ ├── SwitchBanner.tsx │ │ │ │ │ ├── TextBanner.tsx │ │ │ │ │ ├── TooltipBanner.tsx │ │ │ │ │ └── VStackBanner.tsx │ │ │ │ ├── ComponentHeader/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── ComponentPropsTable/ │ │ │ │ │ ├── ModalLink.tsx │ │ │ │ │ ├── ParentTypesList.tsx │ │ │ │ │ ├── PropsTable.tsx │ │ │ │ │ ├── PropsTableRow.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ ├── styles.module.css │ │ │ │ │ └── types.ts │ │ │ │ ├── ComponentStylesTable/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── ComponentTabsContainer/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── ContentHeader/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── ContentPageContainer/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── DeprecationTable/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── FileDropZone/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── useFileUpload.ts │ │ │ │ ├── HookTabsContainer/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── IconSheet/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── IllustrationSheet/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── JSONCodeBlock/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── LinkChip/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── LottieSheet/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── MDXArticle/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── style.module.css │ │ │ │ ├── MDXSection/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── Metadata/ │ │ │ │ │ ├── MetadataDependencies.tsx │ │ │ │ │ ├── MetadataLinks.tsx │ │ │ │ │ ├── MetadataRelatedComponents.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── PlatformSwitcher/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── ShareablePlayground/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── SheetTabs/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── StylesExplorer/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── TemplateCard/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ └── VersionLabel/ │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── constants/ │ │ │ │ └── index.ts │ │ │ ├── css/ │ │ │ │ └── custom.css │ │ │ ├── data/ │ │ │ │ └── v9Deprecations.tsx │ │ │ ├── hooks/ │ │ │ │ ├── useCDSVersions.ts │ │ │ │ └── useInternalCDSTheme.ts │ │ │ ├── theme/ │ │ │ │ ├── Admonition/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── AnnouncementBar/ │ │ │ │ │ ├── CloseButton/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Content/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── index.tsx │ │ │ │ ├── CodeBlock/ │ │ │ │ │ ├── Content/ │ │ │ │ │ │ ├── Element.tsx │ │ │ │ │ │ ├── String.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── CopyButton/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── DocItem/ │ │ │ │ │ └── Layout/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── DocRoot/ │ │ │ │ │ └── Layout/ │ │ │ │ │ ├── Main/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Sidebar/ │ │ │ │ │ │ ├── ExpandButton/ │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── index.tsx │ │ │ │ ├── DocSidebar/ │ │ │ │ │ ├── Desktop/ │ │ │ │ │ │ ├── CollapseButton/ │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ │ ├── Content/ │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ ├── Mobile/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── DocSidebarItem/ │ │ │ │ │ ├── Category/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Html/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ ├── Link/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── index.tsx │ │ │ │ ├── Footer/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── Heading/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Layout/ │ │ │ │ │ ├── Provider/ │ │ │ │ │ │ ├── UnifiedThemeContext.tsx │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Logo/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── Navbar/ │ │ │ │ │ ├── ColorModeToggle/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Content/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Layout/ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── styles.module.css │ │ │ │ │ └── MobileSidebar/ │ │ │ │ │ ├── Header/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Layout/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── PrimaryMenu/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── SecondaryMenu/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── Toggle/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── NavbarItem/ │ │ │ │ │ └── NavbarNavLink/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Playground/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ ├── sandbox/ │ │ │ │ │ │ ├── ensureDefaultExport.ts │ │ │ │ │ │ ├── generateImports.ts │ │ │ │ │ │ ├── openInStackBlitz.ts │ │ │ │ │ │ └── templateFiles.ts │ │ │ │ │ └── styles.module.css │ │ │ │ ├── ReactLiveScope/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── SearchBar/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── TOC/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ └── TOCItems/ │ │ │ │ ├── Tree.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── useTOCHightlight.ts │ │ │ └── utils/ │ │ │ ├── PlatformContext.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── isTypeAlias.test.ts │ │ │ │ └── shouldAddToParentTypes.test.ts │ │ │ ├── decreasePriorityIfCategory.ts │ │ │ ├── isTypeAlias.js │ │ │ ├── onProcessDocgen.js │ │ │ ├── shouldAddToParentTypes.js │ │ │ ├── sortByAlphabet.ts │ │ │ ├── toc/ │ │ │ │ ├── PropsTOCManager.tsx │ │ │ │ ├── TOCManager.tsx │ │ │ │ └── createTOCManager.tsx │ │ │ ├── useAnalytics.ts │ │ │ ├── useIsSticky.ts │ │ │ ├── useThrottledValue.ts │ │ │ └── useWindowSizeWithBreakpointOverride.ts │ │ ├── static/ │ │ │ ├── Inter_Medium_Regular.json │ │ │ ├── hdr/ │ │ │ │ └── wasteland_clouds_puresky_1k.hdr │ │ │ └── robots.txt │ │ ├── tsconfig.json │ │ ├── types.d.ts │ │ └── utils/ │ │ ├── __tests__/ │ │ │ └── generateComponentPeerDeps.test.ts │ │ └── generateComponentPeerDeps.ts │ ├── mobile-app/ │ │ ├── README.md │ │ ├── app.config.ts │ │ ├── babel.config.js │ │ ├── credentials/ │ │ │ └── android-release-hermes.keystore │ │ ├── credentials.json │ │ ├── detox.config.js │ │ ├── docs/ │ │ │ ├── building-mobile.md │ │ │ ├── help.md │ │ │ ├── prebuilds.md │ │ │ ├── upgrade-rn.md │ │ │ └── upgrading-mobile-dep.md │ │ ├── env.d.ts │ │ ├── index.js │ │ ├── jest.config.js │ │ ├── metro.config.js │ │ ├── package.json │ │ ├── project.json │ │ ├── react-native.config.js │ │ ├── scripts/ │ │ │ ├── build.mjs │ │ │ ├── detox.mjs │ │ │ ├── launch.mjs │ │ │ ├── patch-bundle.mjs │ │ │ ├── start.mjs │ │ │ ├── utils/ │ │ │ │ ├── apktool.jar │ │ │ │ ├── buildAndroid.mjs │ │ │ │ ├── buildIOS.mjs │ │ │ │ ├── env.mjs │ │ │ │ ├── getAffectedRoutes.mjs │ │ │ │ ├── getBuildInfo.mjs │ │ │ │ ├── routes.mjs │ │ │ │ ├── setEnvVars.mjs │ │ │ │ └── shouldRunVisreg.mjs │ │ │ └── validate.mjs │ │ ├── src/ │ │ │ ├── App.tsx │ │ │ ├── hooks/ │ │ │ │ └── useFonts.ts │ │ │ ├── index.ts │ │ │ ├── polyfills/ │ │ │ │ └── intl.ts │ │ │ └── routes.ts │ │ └── tsconfig.json │ ├── storybook/ │ │ ├── .storybook/ │ │ │ ├── StoryContainer.tsx │ │ │ ├── main.ts │ │ │ ├── manager.tsx │ │ │ ├── preview-head.html │ │ │ ├── preview.ts │ │ │ ├── useDarkMode.ts │ │ │ └── vitest.setup.ts │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── production.Dockerfile │ │ ├── project.json │ │ ├── scripts/ │ │ │ ├── analyze-bundle.ts │ │ │ ├── profile-export.js │ │ │ ├── profile-exports.js │ │ │ ├── run-a11y-tests.ts │ │ │ ├── run-percy.ts │ │ │ └── shouldRunVisreg.mjs │ │ ├── tsconfig.json │ │ ├── vite-env.d.ts │ │ ├── vitest.config.ts │ │ └── vitest.shims.d.ts │ └── vite-app/ │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── project.json │ ├── src/ │ │ ├── App.tsx │ │ ├── components/ │ │ │ ├── AssetList/ │ │ │ │ ├── data.ts │ │ │ │ └── index.tsx │ │ │ ├── CDSLogo/ │ │ │ │ └── index.tsx │ │ │ ├── CardList/ │ │ │ │ ├── DataCardWithCircle.tsx │ │ │ │ ├── ETHStakingCard.tsx │ │ │ │ ├── RecurringBuyCard.tsx │ │ │ │ └── index.tsx │ │ │ └── Navbar/ │ │ │ ├── MoreMenu.tsx │ │ │ ├── UserMenu.tsx │ │ │ └── index.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── eslint.config.mjs ├── figma.config.mobile.json ├── figma.config.web.json ├── jest.preset-mobile.js ├── jest.preset.js ├── libs/ │ ├── codegen/ │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── patches/ │ │ │ └── hygen.patch │ │ ├── project.json │ │ ├── src/ │ │ │ ├── bin.ts │ │ │ ├── codegen.ts │ │ │ ├── config.ts │ │ │ ├── configs/ │ │ │ │ ├── prettierConfig.json │ │ │ │ └── svgo.config.js │ │ │ ├── playground/ │ │ │ │ └── prepareRoutes.ts │ │ │ ├── release/ │ │ │ │ └── updatePkgsForGenericBump.mjs │ │ │ ├── templates/ │ │ │ │ ├── mobileRoutes.ejs │ │ │ │ └── partials/ │ │ │ │ ├── objectMap.ejs.t │ │ │ │ └── typescript.ejs.t │ │ │ └── utils/ │ │ │ ├── buildTemplates.ts │ │ │ ├── formatTemplateType.ts │ │ │ ├── getHeaderCommentForFileType.ts │ │ │ ├── getPrettierParser.ts │ │ │ ├── getSourcePath.ts │ │ │ ├── logError.ts │ │ │ ├── sortAlphabetically.ts │ │ │ ├── writeFile.ts │ │ │ └── writePrettyFile.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── docusaurus-plugin-docgen/ │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── jest.config.mjs │ │ ├── module-declarations.d.ts │ │ ├── package.json │ │ ├── project.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── plugin.ts │ │ │ ├── scripts/ │ │ │ │ ├── debug.ts │ │ │ │ ├── docgenParser.test.ts │ │ │ │ ├── docgenParser.ts │ │ │ │ ├── docgenRunner.test.ts │ │ │ │ ├── docgenRunner.ts │ │ │ │ ├── docgenScaffolder.ts │ │ │ │ ├── docgenWriter.ts │ │ │ │ └── prettierConfig.json │ │ │ ├── templates/ │ │ │ │ ├── doc/ │ │ │ │ │ ├── component.ejs.t │ │ │ │ │ ├── implementation.ejs.t │ │ │ │ │ └── metadata.ejs.t │ │ │ │ ├── doc-item/ │ │ │ │ │ ├── api.ejs.t │ │ │ │ │ ├── changelog-placeholder.ejs.t │ │ │ │ │ ├── changelog.ejs.t │ │ │ │ │ ├── example.ejs.t │ │ │ │ │ └── import-block.ejs.t │ │ │ │ └── shared/ │ │ │ │ ├── objectMap.ejs.t │ │ │ │ ├── sharedParentTypes.ejs.t │ │ │ │ └── sharedTypeAliases.ejs.t │ │ │ ├── types.ts │ │ │ └── utils/ │ │ │ ├── docgenCache.test.ts │ │ │ ├── docgenCache.ts │ │ │ ├── getGitInfoForFile.ts │ │ │ ├── getMinutesBetweenDates.ts │ │ │ ├── getPackageJsonFromTsconfig.ts │ │ │ └── logger.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── docusaurus-plugin-kbar/ │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── package.json │ │ ├── project.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── plugin.ts │ │ │ ├── types.ts │ │ │ └── utils/ │ │ │ ├── getKBarActions.ts │ │ │ └── logger.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── docusaurus-plugin-llm-dev-server/ │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── package.json │ │ ├── project.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── eslint-plugin-internal/ │ │ ├── README.md │ │ ├── jest.config.mjs │ │ ├── package.json │ │ ├── project.json │ │ └── src/ │ │ ├── deprecated-jsdoc-has-removal-version/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── example-screen-contains-example/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── example-screen-default/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── figma-connect-imports-package-match/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── figma-connect-imports-required/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── index.mjs │ │ ├── no-deprecated-jsdoc/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── no-object-rest-spread-in-worklet/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ ├── no-typescript-in-jsx-codeblock/ │ │ │ ├── index.mjs │ │ │ └── index.test.mjs │ │ └── safely-spread-props/ │ │ ├── README.md │ │ ├── index.mjs │ │ └── index.test.mjs │ ├── static-assets/ │ │ ├── README.md │ │ ├── package.json │ │ ├── shard-assets.sh │ │ ├── static-assets.Dockerfile │ │ ├── static-assets.Dockerfile.dockerignore │ │ └── static-assets.docker-compose.yml │ └── web-utils/ │ ├── README │ ├── babel.config.cjs │ ├── package.json │ ├── project.json │ ├── src/ │ │ ├── babel/ │ │ │ ├── linariaCssExtractPlugin.ts │ │ │ ├── linariaPreset.ts │ │ │ └── types.d.ts │ │ ├── index.ts │ │ └── jest/ │ │ ├── index.ts │ │ └── renderA11y.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── nx.json ├── package.json ├── packages/ │ ├── common/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── accordion/ │ │ │ │ ├── AccordionProvider.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── AccordionProvider.test.tsx │ │ │ ├── animation/ │ │ │ │ ├── accordion.ts │ │ │ │ ├── border.ts │ │ │ │ ├── carousel.ts │ │ │ │ ├── collapsible.ts │ │ │ │ ├── dot.ts │ │ │ │ ├── drawer.ts │ │ │ │ ├── dropdown.ts │ │ │ │ ├── fullscreenModal.ts │ │ │ │ ├── likeButton.ts │ │ │ │ ├── menu.ts │ │ │ │ ├── modal.ts │ │ │ │ ├── overlay.ts │ │ │ │ ├── paddle.ts │ │ │ │ ├── progress.ts │ │ │ │ ├── rotate.ts │ │ │ │ ├── select.ts │ │ │ │ ├── sparkline.ts │ │ │ │ ├── tabs.ts │ │ │ │ ├── toast.ts │ │ │ │ └── tooltip.ts │ │ │ ├── cards/ │ │ │ │ └── getCardBodySpacingProps.ts │ │ │ ├── carousel/ │ │ │ │ ├── __tests__/ │ │ │ │ │ └── useCarouselAutoplay.test.ts │ │ │ │ ├── index.ts │ │ │ │ └── useCarouselAutoplay.ts │ │ │ ├── chips/ │ │ │ │ └── getMediaChipSpacingProps.ts │ │ │ ├── color/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── blendColors.test.ts │ │ │ │ │ ├── isLightOrDarkColor.test.ts │ │ │ │ │ └── overrideAlpha.test.ts │ │ │ │ ├── blendColors.ts │ │ │ │ ├── colorToHex.ts │ │ │ │ ├── darkenColor.ts │ │ │ │ ├── getAccessibleForegroundGradient.ts │ │ │ │ ├── getBlendedColor.ts │ │ │ │ ├── getContrastRatio.ts │ │ │ │ ├── getLuminance.ts │ │ │ │ ├── isAccessibleColor.ts │ │ │ │ ├── isLightOrDarkColor.ts │ │ │ │ └── overrideAlpha.ts │ │ │ ├── core/ │ │ │ │ └── theme.ts │ │ │ ├── dates/ │ │ │ │ ├── DateInputValidationError.ts │ │ │ │ ├── IntlDateFormat.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── IntlDateFormat.test.ts │ │ │ │ │ └── useDateInput.test.ts │ │ │ │ ├── generateCalendarMonth.ts │ │ │ │ ├── getISOStringLocal.ts │ │ │ │ ├── getMidnightDate.ts │ │ │ │ ├── getTimesFromDatesAndRanges.ts │ │ │ │ ├── useDateInput.ts │ │ │ │ └── useDateInputValidation.ts │ │ │ ├── hooks/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── useFallbackShape.test.ts │ │ │ │ │ ├── useMergeRefs.test.ts │ │ │ │ │ ├── usePrefixedId.test.ts │ │ │ │ │ ├── usePreviousValue.test.ts │ │ │ │ │ ├── useRefMap.test.ts │ │ │ │ │ ├── useSort.test.ts │ │ │ │ │ └── useTimer.test.ts │ │ │ │ ├── useEventHandler.ts │ │ │ │ ├── useFallbackShape.ts │ │ │ │ ├── useGroupToggler.ts │ │ │ │ ├── useHasMounted.ts │ │ │ │ ├── useIndexCounter.ts │ │ │ │ ├── useInputVariant.ts │ │ │ │ ├── useLogo.ts │ │ │ │ ├── useMergeRefs.ts │ │ │ │ ├── usePrefixedId.ts │ │ │ │ ├── usePreviousValue.ts │ │ │ │ ├── usePreviousValues.ts │ │ │ │ ├── useRefMap.ts │ │ │ │ ├── useSort.ts │ │ │ │ ├── useSubBrandLogo.ts │ │ │ │ ├── useTimer.ts │ │ │ │ ├── useToggler.ts │ │ │ │ └── useValueChanges.ts │ │ │ ├── index.ts │ │ │ ├── internal/ │ │ │ │ ├── data/ │ │ │ │ │ ├── accounts.ts │ │ │ │ │ ├── announcementCards.ts │ │ │ │ │ ├── asset.ts │ │ │ │ │ ├── assets.ts │ │ │ │ │ ├── avatars.ts │ │ │ │ │ ├── candles.ts │ │ │ │ │ ├── dataCards.ts │ │ │ │ │ ├── featureEntryCards.ts │ │ │ │ │ ├── feedImages.ts │ │ │ │ │ ├── iconData.ts │ │ │ │ │ ├── loremIpsum.ts │ │ │ │ │ ├── navigation.ts │ │ │ │ │ ├── prices.ts │ │ │ │ │ ├── product.ts │ │ │ │ │ ├── tabs.ts │ │ │ │ │ └── users.ts │ │ │ │ ├── utils/ │ │ │ │ │ └── storyBuilder.tsx │ │ │ │ └── visualizations/ │ │ │ │ └── SparklineInteractiveData.tsx │ │ │ ├── jest/ │ │ │ │ └── timeTravel.ts │ │ │ ├── lottie/ │ │ │ │ ├── lottieUtils.test.ts │ │ │ │ ├── lottieUtils.ts │ │ │ │ ├── statusToAccessibilityLabel.ts │ │ │ │ └── useStatusAnimationPoller.ts │ │ │ ├── media/ │ │ │ │ ├── getAvatarFallbackColor.ts │ │ │ │ └── remoteImageFallbackSrc.ts │ │ │ ├── motion/ │ │ │ │ ├── animatedCaret.ts │ │ │ │ ├── checkbox.ts │ │ │ │ ├── dot.ts │ │ │ │ ├── hint.ts │ │ │ │ ├── switch.ts │ │ │ │ ├── tokens.ts │ │ │ │ └── utils.ts │ │ │ ├── numbers/ │ │ │ │ ├── IntlNumberFormat.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── formatToParts.test.ts │ │ │ │ │ └── subscript.test.ts │ │ │ │ ├── subscript.ts │ │ │ │ └── useValueChangeDirection.ts │ │ │ ├── overlays/ │ │ │ │ ├── ModalContext.ts │ │ │ │ ├── OverlayContentContext.tsx │ │ │ │ ├── PortalContext.tsx │ │ │ │ ├── ToastProvider.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── useOverlay.test.tsx │ │ │ │ │ └── useToastQueue.test.tsx │ │ │ │ ├── useAlert.ts │ │ │ │ ├── useModal.ts │ │ │ │ ├── useOverlay.ts │ │ │ │ ├── usePortal.ts │ │ │ │ ├── usePortalState.ts │ │ │ │ └── useToastQueue.ts │ │ │ ├── select/ │ │ │ │ ├── useMultiSelect.test.ts │ │ │ │ └── useMultiSelect.ts │ │ │ ├── stepper/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── useStepper.test.ts │ │ │ │ │ └── utils.test.ts │ │ │ │ ├── useStepper.ts │ │ │ │ └── utils.ts │ │ │ ├── system/ │ │ │ │ ├── EventHandlerProvider.tsx │ │ │ │ ├── LocaleProvider.tsx │ │ │ │ ├── RefMapContext.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── EventHandlerProvider.test.tsx │ │ │ ├── tabs/ │ │ │ │ ├── TabsContext.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── TabsContext.test.tsx │ │ │ │ │ └── useTabs.test.tsx │ │ │ │ └── useTabs.ts │ │ │ ├── tokens/ │ │ │ │ ├── accordion.ts │ │ │ │ ├── appSwitcher.ts │ │ │ │ ├── avatar.ts │ │ │ │ ├── banner.ts │ │ │ │ ├── borderRadius.ts │ │ │ │ ├── button.ts │ │ │ │ ├── card.ts │ │ │ │ ├── cell.ts │ │ │ │ ├── chip.ts │ │ │ │ ├── dot.ts │ │ │ │ ├── drawer.ts │ │ │ │ ├── illustrations.ts │ │ │ │ ├── input.ts │ │ │ │ ├── interactable.ts │ │ │ │ ├── interactableHeight.ts │ │ │ │ ├── menu.ts │ │ │ │ ├── multiContentModule.ts │ │ │ │ ├── navigation.ts │ │ │ │ ├── overlays.ts │ │ │ │ ├── page.ts │ │ │ │ ├── select.ts │ │ │ │ ├── sidebar.ts │ │ │ │ ├── sizing.ts │ │ │ │ ├── sparkline.ts │ │ │ │ ├── tags.ts │ │ │ │ ├── tile.ts │ │ │ │ ├── toast.ts │ │ │ │ ├── tooltip.ts │ │ │ │ └── zIndex.ts │ │ │ ├── tour/ │ │ │ │ ├── TourContext.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── TourContext.test.tsx │ │ │ │ │ └── useTour.test.tsx │ │ │ │ └── useTour.ts │ │ │ ├── types/ │ │ │ │ ├── AvatarBaseProps.ts │ │ │ │ ├── AvatarSize.ts │ │ │ │ ├── BannerBaseProps.ts │ │ │ │ ├── BoxBaseProps.ts │ │ │ │ ├── ButtonBaseProps.ts │ │ │ │ ├── CardHeaderProps.ts │ │ │ │ ├── CardMediaProps.ts │ │ │ │ ├── CardRemoteImageProps.ts │ │ │ │ ├── CdsPlatform.ts │ │ │ │ ├── CellBaseProps.ts │ │ │ │ ├── Chart.ts │ │ │ │ ├── CollapsibleBaseProps.ts │ │ │ │ ├── Color.ts │ │ │ │ ├── ComponentEventHandlerProps.ts │ │ │ │ ├── DimensionStyles.ts │ │ │ │ ├── Display.ts │ │ │ │ ├── DotBaseProps.ts │ │ │ │ ├── DotCountBaseProps.ts │ │ │ │ ├── ElevationLevels.ts │ │ │ │ ├── FallbackBaseProps.ts │ │ │ │ ├── Grid.ts │ │ │ │ ├── Helpers.ts │ │ │ │ ├── IconButtonBaseProps.ts │ │ │ │ ├── IconName.ts │ │ │ │ ├── IconSize.ts │ │ │ │ ├── IllustrationNames.ts │ │ │ │ ├── IllustrationProps.ts │ │ │ │ ├── InputBaseProps.ts │ │ │ │ ├── LottiePlayer.ts │ │ │ │ ├── LottieSource.ts │ │ │ │ ├── LottieStatus.ts │ │ │ │ ├── LottieStatusAnimationProps.ts │ │ │ │ ├── Motion.ts │ │ │ │ ├── OverlayLifecycleProps.ts │ │ │ │ ├── Palette.ts │ │ │ │ ├── Placement.ts │ │ │ │ ├── Position.ts │ │ │ │ ├── ProgressContainerWithButtonsProps.ts │ │ │ │ ├── PulseBaseProps.ts │ │ │ │ ├── React.ts │ │ │ │ ├── Rect.ts │ │ │ │ ├── Responsive.ts │ │ │ │ ├── ResponsiveProps.ts │ │ │ │ ├── SectionHeaderProps.ts │ │ │ │ ├── Shape.ts │ │ │ │ ├── SharedAccessibilityProps.ts │ │ │ │ ├── SharedProps.ts │ │ │ │ ├── SpacingProps.ts │ │ │ │ ├── SparklineInteractiveHeaderBaseProps.ts │ │ │ │ ├── SpreadPropsSafely.ts │ │ │ │ ├── StickyFooterProps.ts │ │ │ │ ├── TagBaseProps.ts │ │ │ │ ├── TextBaseProps.ts │ │ │ │ ├── TooltipBaseProps.ts │ │ │ │ ├── TypeOrNumber.ts │ │ │ │ ├── Visibility.ts │ │ │ │ ├── Weight.ts │ │ │ │ └── index.ts │ │ │ ├── utils/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── cell.test.ts │ │ │ │ │ ├── chart.test.ts │ │ │ │ │ ├── flattenNodes.test.tsx │ │ │ │ │ ├── formatCount.test.ts │ │ │ │ │ └── getRectWidthVariant.test.ts │ │ │ │ ├── cell.ts │ │ │ │ ├── chart.ts │ │ │ │ ├── circle.ts │ │ │ │ ├── convertDimensionToAspectRatio.ts │ │ │ │ ├── convertDimensionToSize.ts │ │ │ │ ├── convertSizeWithMultiplier.ts │ │ │ │ ├── debounce.ts │ │ │ │ ├── delay.ts │ │ │ │ ├── flattenNodes.ts │ │ │ │ ├── formatCount.ts │ │ │ │ ├── getAccessibleColor.ts │ │ │ │ ├── getButtonSpacingProps.ts │ │ │ │ ├── getDefaultAspectRatioForIllustration.ts │ │ │ │ ├── getDefaultSizeObjectForIllustration.ts │ │ │ │ ├── getRectWidthVariant.ts │ │ │ │ ├── getWidthInEm.ts │ │ │ │ ├── join.tsx │ │ │ │ ├── mergeProps.ts │ │ │ │ ├── mockUtils.ts │ │ │ │ ├── modulate.ts │ │ │ │ └── parseDotCountMaxOverflow.ts │ │ │ └── visualizations/ │ │ │ ├── __tests__/ │ │ │ │ ├── getSparklineRange.test.ts │ │ │ │ ├── largestTriangleThreeBucket.test.ts │ │ │ │ ├── useCounter.test.ts │ │ │ │ ├── useSparklineArea.test.ts │ │ │ │ ├── useSparklineCoordinates.test.ts │ │ │ │ └── useSparklinePath.test.ts │ │ │ ├── getProgressCircleParams.tsx │ │ │ ├── getProgressSize.ts │ │ │ ├── getSparklineRange.ts │ │ │ ├── getSparklineTransform.ts │ │ │ ├── largestTriangleThreeBucket.ts │ │ │ ├── useCounter.ts │ │ │ ├── useDateLookup.ts │ │ │ ├── useProgressSize.ts │ │ │ ├── useSparklineArea.tsx │ │ │ ├── useSparklineAreaOpacity.ts │ │ │ ├── useSparklineCoordinates.ts │ │ │ ├── useSparklinePath.ts │ │ │ ├── useSparklinePathGenerator.ts │ │ │ ├── useTimeseriesPaths.ts │ │ │ └── useVisualizationDimensions.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── eslint-plugin-cds/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest.config.mjs │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── rollup.config.mjs │ │ ├── scripts/ │ │ │ └── scaffold-new-rule.mjs │ │ ├── src/ │ │ │ ├── configs/ │ │ │ │ ├── mobile.ts │ │ │ │ └── web.ts │ │ │ ├── index.ts │ │ │ ├── rules/ │ │ │ │ ├── control-has-associated-label-extended.ts │ │ │ │ ├── has-valid-accessibility-descriptors-extended.ts │ │ │ │ ├── mobile-chart-scrubbing-accessibility.ts │ │ │ │ ├── no-v7-imports.ts │ │ │ │ ├── web-chart-scrubbing-accessibility.ts │ │ │ │ └── web-tooltip-interactive-content.ts │ │ │ ├── rules.ts │ │ │ ├── templates/ │ │ │ │ ├── custom-rule.test.ts │ │ │ │ └── custom-rule.ts │ │ │ └── utils/ │ │ │ ├── checkForInnerText.ts │ │ │ ├── extractA11yAttributesState.ts │ │ │ ├── getAttribute.ts │ │ │ ├── getSimpleNameFromJSX.ts │ │ │ └── isTruthyJSXBooleanAttribute.ts │ │ ├── tests/ │ │ │ ├── control-has-associated-label-extended.test.ts │ │ │ ├── has-valid-accessibility-descriptors-extended.test.ts │ │ │ ├── mobile-chart-scrubbing-accessibility.test.ts │ │ │ ├── no-v7-imports.test.ts │ │ │ ├── normalizeIndent.ts │ │ │ ├── web-chart-scrubbing-accessibility.test.ts │ │ │ └── web-tooltip-interactive-content.test.ts │ │ ├── tsconfig.build.json │ │ ├── tsconfig.json │ │ └── tsconfig.test.json │ ├── icons/ │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── manifest.json │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── IconName.ts │ │ │ ├── descriptionMap.ts │ │ │ ├── fonts/ │ │ │ │ └── web/ │ │ │ │ └── icon-font.css │ │ │ ├── glyphMap.ts │ │ │ ├── index.ts │ │ │ └── names.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── illustrations/ │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── manifest.json │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── scripts/ │ │ │ ├── generateStories.ts │ │ │ └── writeStories.ts │ │ ├── src/ │ │ │ ├── __generated__/ │ │ │ │ ├── heroSquare/ │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── descriptionMap.ts │ │ │ │ │ │ ├── names.ts │ │ │ │ │ │ ├── svgEsmMap.ts │ │ │ │ │ │ ├── svgJsMap.ts │ │ │ │ │ │ └── versionMap.ts │ │ │ │ │ ├── svgJs/ │ │ │ │ │ │ ├── cjs/ │ │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ │ ├── accountUnderReview-3.js │ │ │ │ │ │ │ │ ├── add2Fa-5.js │ │ │ │ │ │ │ │ ├── addBankAccount-4.js │ │ │ │ │ │ │ │ ├── addCreditCard-4.js │ │ │ │ │ │ │ │ ├── addMoreCrypto-4.js │ │ │ │ │ │ │ │ ├── addPhoneNumber-4.js │ │ │ │ │ │ │ │ ├── advancedTrading-5.js │ │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ │ ├── advancedTradingUi-3.js │ │ │ │ │ │ │ │ ├── airdrop-2.js │ │ │ │ │ │ │ │ ├── alienDonutSystemError-4.js │ │ │ │ │ │ │ │ ├── anonymous-1.js │ │ │ │ │ │ │ │ ├── appTrackingTransparency-5.js │ │ │ │ │ │ │ │ ├── artFrameEmptyState-5.js │ │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ │ │ ├── baseChartLarge-1.js │ │ │ │ │ │ │ │ ├── baseCheck-1.js │ │ │ │ │ │ │ │ ├── baseCoinCryptoLarge-1.js │ │ │ │ │ │ │ │ ├── baseCoinNetworkLarge-1.js │ │ │ │ │ │ │ │ ├── baseConnectLarge-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoinEmpty-1.js │ │ │ │ │ │ │ │ ├── baseDecentralizationLarge-1.js │ │ │ │ │ │ │ │ ├── baseEmptyLarge-1.js │ │ │ │ │ │ │ │ ├── baseErrorButterfly-0.js │ │ │ │ │ │ │ │ ├── baseErrorLarge-1.js │ │ │ │ │ │ │ │ ├── baseLoadingLarge-1.js │ │ │ │ │ │ │ │ ├── baseLocationLarge-1.js │ │ │ │ │ │ │ │ ├── baseMintNftLarge-1.js │ │ │ │ │ │ │ │ ├── baseNetworkLarge-1.js │ │ │ │ │ │ │ │ ├── baseNftLarge-1.js │ │ │ │ │ │ │ │ ├── basePaycoinLarge-1.js │ │ │ │ │ │ │ │ ├── basePeopleLarge-1.js │ │ │ │ │ │ │ │ ├── basePiechartLarge-1.js │ │ │ │ │ │ │ │ ├── baseRewardsCalmLarge-1.js │ │ │ │ │ │ │ │ ├── baseSecurityLarge-1.js │ │ │ │ │ │ │ │ ├── baseSendLarge-1.js │ │ │ │ │ │ │ │ ├── baseSocial-2.js │ │ │ │ │ │ │ │ ├── baseTargetLarge-1.js │ │ │ │ │ │ │ │ ├── basedInUsa-5.js │ │ │ │ │ │ │ │ ├── bigBtc-6.js │ │ │ │ │ │ │ │ ├── bigError-5.js │ │ │ │ │ │ │ │ ├── bigWarning-5.js │ │ │ │ │ │ │ │ ├── bitcoinAndOtherCrypto-3.js │ │ │ │ │ │ │ │ ├── bitcoinGlobe-5.js │ │ │ │ │ │ │ │ ├── blockchain-3.js │ │ │ │ │ │ │ │ ├── borrow-4.js │ │ │ │ │ │ │ │ ├── borrowCoins-2.js │ │ │ │ │ │ │ │ ├── borrowCoinsBtc-0.js │ │ │ │ │ │ │ │ ├── borrowWallet-5.js │ │ │ │ │ │ │ │ ├── brdGift-4.js │ │ │ │ │ │ │ │ ├── bridge-2.js │ │ │ │ │ │ │ │ ├── browseDecentralizedApps-6.js │ │ │ │ │ │ │ │ ├── browserExtension-4.js │ │ │ │ │ │ │ │ ├── buy-1.js │ │ │ │ │ │ │ │ ├── buyFirstCrypto-4.js │ │ │ │ │ │ │ │ ├── camera-4.js │ │ │ │ │ │ │ │ ├── cardAndPhone-2.js │ │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ │ ├── cardError-4.js │ │ │ │ │ │ │ │ ├── cardErrorCB1-0.js │ │ │ │ │ │ │ │ ├── cardReloadFunds-3.js │ │ │ │ │ │ │ │ ├── cashExcitement-3.js │ │ │ │ │ │ │ │ ├── catHoldingWalletEmptyState-4.js │ │ │ │ │ │ │ │ ├── catLostSystemError-3.js │ │ │ │ │ │ │ │ ├── cbada-0.js │ │ │ │ │ │ │ │ ├── cbbtc-2.js │ │ │ │ │ │ │ │ ├── cbdoge-0.js │ │ │ │ │ │ │ │ ├── cbltc-0.js │ │ │ │ │ │ │ │ ├── cbmega-0.js │ │ │ │ │ │ │ │ ├── cbxrp-0.js │ │ │ │ │ │ │ │ ├── chickenFishSystemError-3.js │ │ │ │ │ │ │ │ ├── claimCryptoUsername-2.js │ │ │ │ │ │ │ │ ├── cloud-1.js │ │ │ │ │ │ │ │ ├── cloudBacking-3.js │ │ │ │ │ │ │ │ ├── coinCheckmark-4.js │ │ │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ │ │ ├── coinbaseCard-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardIssue-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardSpend-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardSpendCrypto-4.js │ │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ │ ├── coinbaseIsDown-5.js │ │ │ │ │ │ │ │ ├── coinbaseIsDownMobile-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneAirdrop-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneCardWarning-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneDocWarning-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ │ │ ├── coinbaseOneInsufficientWallet-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ │ │ ├── coinbaseOnePercentOff-4.js │ │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneProtectedCrypto-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneTokenRewards-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneUSDCBig-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneUSDCIncentives-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWaitlist-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWalletWarning-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWelcome-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneZeroPromotion-1.js │ │ │ │ │ │ │ │ ├── coinbaseRedesigned-3.js │ │ │ │ │ │ │ │ ├── coinbaseWalletToTrade-3.js │ │ │ │ │ │ │ │ ├── coinsInWallet-3.js │ │ │ │ │ │ │ │ ├── collectableNfts-6.js │ │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ │ ├── commerceAccounting-4.js │ │ │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ │ │ ├── communication-1.js │ │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-3.js │ │ │ │ │ │ │ │ ├── connectPeople-2.js │ │ │ │ │ │ │ │ ├── contactsListWarning-3.js │ │ │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ │ ├── cryptoApps-5.js │ │ │ │ │ │ │ │ ├── cryptoAppsWallet-5.js │ │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ │ │ ├── cryptoForBeginners-4.js │ │ │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ │ │ ├── cryptoPortfolioUsdc-0.js │ │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ │ ├── currencyPairs-5.js │ │ │ │ │ │ │ │ ├── dappsArts-4.js │ │ │ │ │ │ │ │ ├── dappsFinance-6.js │ │ │ │ │ │ │ │ ├── dappsGaming-4.js │ │ │ │ │ │ │ │ ├── dappsGeneral-2.js │ │ │ │ │ │ │ │ ├── dappsL2Support-5.js │ │ │ │ │ │ │ │ ├── dappsMusic-5.js │ │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ │ ├── decentralizedWebWeb3-5.js │ │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-4.js │ │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ │ ├── defiEnrollBoost-3.js │ │ │ │ │ │ │ │ ├── defiHow-4.js │ │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ │ ├── desktopAuthorized-4.js │ │ │ │ │ │ │ │ ├── desktopUnknown-3.js │ │ │ │ │ │ │ │ ├── developer-1.js │ │ │ │ │ │ │ │ ├── diamondHands-6.js │ │ │ │ │ │ │ │ ├── didDecentralizedIdentity-4.js │ │ │ │ │ │ │ │ ├── digitalCollectibles-5.js │ │ │ │ │ │ │ │ ├── digitalGold-1.js │ │ │ │ │ │ │ │ ├── directDepositPhone-5.js │ │ │ │ │ │ │ │ ├── discardAssets-5.js │ │ │ │ │ │ │ │ ├── docError-3.js │ │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ │ ├── downloadCoinbaseWallet-6.js │ │ │ │ │ │ │ │ ├── earn-3.js │ │ │ │ │ │ │ │ ├── earnCryptoCard-4.js │ │ │ │ │ │ │ │ ├── earnCryptoInterest-5.js │ │ │ │ │ │ │ │ ├── earnGlobe-1.js │ │ │ │ │ │ │ │ ├── earnGrowth-4.js │ │ │ │ │ │ │ │ ├── earnIdVerification-3.js │ │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ │ ├── earnMore-4.js │ │ │ │ │ │ │ │ ├── earnNuxHome-5.js │ │ │ │ │ │ │ │ ├── earnSuccess-5.js │ │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ │ ├── emailNotification-4.js │ │ │ │ │ │ │ │ ├── emptyCollection-5.js │ │ │ │ │ │ │ │ ├── emptyStateCheckBackLater-5.js │ │ │ │ │ │ │ │ ├── emptyStateNft404Page-4.js │ │ │ │ │ │ │ │ ├── emptyStateNftSoldOut-4.js │ │ │ │ │ │ │ │ ├── enableBiometrics-5.js │ │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ │ ├── engagement-2.js │ │ │ │ │ │ │ │ ├── ensProfilePic-2.js │ │ │ │ │ │ │ │ ├── error400-4.js │ │ │ │ │ │ │ │ ├── errorApp500-6.js │ │ │ │ │ │ │ │ ├── errorMoblie-1.js │ │ │ │ │ │ │ │ ├── errorRefresh-4.js │ │ │ │ │ │ │ │ ├── errorRefreshWeb-1.js │ │ │ │ │ │ │ │ ├── errorWeb-1.js │ │ │ │ │ │ │ │ ├── errorWeb400-4.js │ │ │ │ │ │ │ │ ├── errorWeb404-6.js │ │ │ │ │ │ │ │ ├── errorWeb404Mobile-1.js │ │ │ │ │ │ │ │ ├── errorWeb500-4.js │ │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ │ ├── ethStakingUpsell-5.js │ │ │ │ │ │ │ │ ├── ethereumToWallet-6.js │ │ │ │ │ │ │ │ ├── exchange-1.js │ │ │ │ │ │ │ │ ├── exchangeEmptyState-5.js │ │ │ │ │ │ │ │ ├── exploreDecentralizedApps-7.js │ │ │ │ │ │ │ │ ├── faceMatchReal-4.js │ │ │ │ │ │ │ │ ├── feeScale-4.js │ │ │ │ │ │ │ │ ├── fiat-1.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-5.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-6.js │ │ │ │ │ │ │ │ ├── flipStable-0.js │ │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ │ ├── freeBtc-4.js │ │ │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ │ │ ├── futuresAndPerps-0.js │ │ │ │ │ │ │ │ ├── futuresExpire-0.js │ │ │ │ │ │ │ │ ├── futuresVsPerps-0.js │ │ │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ │ │ ├── gamer-1.js │ │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ │ ├── generative-2.js │ │ │ │ │ │ │ │ ├── genniusLaunch-0.js │ │ │ │ │ │ │ │ ├── getStartedInMinutes-4.js │ │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── governanceMallet-1.js │ │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ │ ├── hiddenCollection-3.js │ │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ │ ├── iceCreamMeltingSystemError-6.js │ │ │ │ │ │ │ │ ├── idAngles-4.js │ │ │ │ │ │ │ │ ├── idBack-2.js │ │ │ │ │ │ │ │ ├── idCard-3.js │ │ │ │ │ │ │ │ ├── idFront-3.js │ │ │ │ │ │ │ │ ├── idIssue-3.js │ │ │ │ │ │ │ │ ├── idVerificationSecure-5.js │ │ │ │ │ │ │ │ ├── indexer-2.js │ │ │ │ │ │ │ │ ├── innovation-2.js │ │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ │ ├── instoAdd2Fa-0.js │ │ │ │ │ │ │ │ ├── instoAddBankAccount-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneProtectedCrypto-1.js │ │ │ │ │ │ │ │ ├── instoDocumentSuccess-1.js │ │ │ │ │ │ │ │ ├── instoEarnGlobe-0.js │ │ │ │ │ │ │ │ ├── instoEnableBiometrics-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingUpsell-0.js │ │ │ │ │ │ │ │ ├── instoGovernance-0.js │ │ │ │ │ │ │ │ ├── instoKeyGenerationComplete-1.js │ │ │ │ │ │ │ │ ├── instoKeyGenerationPending-0.js │ │ │ │ │ │ │ │ ├── instoOnChain-2.js │ │ │ │ │ │ │ │ ├── instoOpenEmail-1.js │ │ │ │ │ │ │ │ ├── instoPhoneUnknown-0.js │ │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ │ ├── instoPrivateKey-1.js │ │ │ │ │ │ │ │ ├── instoRequestSent-1.js │ │ │ │ │ │ │ │ ├── instoSecurityKeyAuth-0.js │ │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ │ ├── instoStakingMissedReturns-1.js │ │ │ │ │ │ │ │ ├── instoWallet-0.js │ │ │ │ │ │ │ │ ├── instoWalletSecurity-0.js │ │ │ │ │ │ │ │ ├── instoWeb3MobileSetupStart-0.js │ │ │ │ │ │ │ │ ├── insufficientBalance-5.js │ │ │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ │ │ ├── invest-3.js │ │ │ │ │ │ │ │ ├── invite-4.js │ │ │ │ │ │ │ │ ├── japanVerifyId-3.js │ │ │ │ │ │ │ │ ├── keyGeneration-6.js │ │ │ │ │ │ │ │ ├── layerOne-2.js │ │ │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ │ │ ├── layerTwo-2.js │ │ │ │ │ │ │ │ ├── layeredNetworks-5.js │ │ │ │ │ │ │ │ ├── ledgerAccess-4.js │ │ │ │ │ │ │ │ ├── ledgerPlugin-4.js │ │ │ │ │ │ │ │ ├── lend-1.js │ │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ │ ├── lightningNetwork-1.js │ │ │ │ │ │ │ │ ├── lightningNetworkInvoice-2.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── lightningNetworkTransfer-1.js │ │ │ │ │ │ │ │ ├── limitOrders-5.js │ │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRedClose-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferYellow-0.js │ │ │ │ │ │ │ │ ├── lowCost-2.js │ │ │ │ │ │ │ │ ├── margin-3.js │ │ │ │ │ │ │ │ ├── marginWarning-4.js │ │ │ │ │ │ │ │ ├── mic-4.js │ │ │ │ │ │ │ │ ├── mining-4.js │ │ │ │ │ │ │ │ ├── minting-2.js │ │ │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ │ │ ├── moreGains-0.js │ │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-5.js │ │ │ │ │ │ │ │ ├── multicoinSupport-4.js │ │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ │ ├── multiplePortfolios-1.js │ │ │ │ │ │ │ │ ├── myNameIsSatoshi-3.js │ │ │ │ │ │ │ │ ├── namePortfolio-1.js │ │ │ │ │ │ │ │ ├── networkWarning-5.js │ │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ │ ├── noFeesMotion-1.js │ │ │ │ │ │ │ │ ├── noLongAddresses-2.js │ │ │ │ │ │ │ │ ├── notificationsAlt-5.js │ │ │ │ │ │ │ │ ├── notificationsAndUpdates-3.js │ │ │ │ │ │ │ │ ├── offChain-1.js │ │ │ │ │ │ │ │ ├── oilAndGold-2.js │ │ │ │ │ │ │ │ ├── onChain-2.js │ │ │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ │ │ ├── openEmail-4.js │ │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-3.js │ │ │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ │ │ ├── oracle-1.js │ │ │ │ │ │ │ │ ├── orderBooks-3.js │ │ │ │ │ │ │ │ ├── outage-1.js │ │ │ │ │ │ │ │ ├── p2pGifting-4.js │ │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ │ ├── paperHands-3.js │ │ │ │ │ │ │ │ ├── payUpFront-4.js │ │ │ │ │ │ │ │ ├── pending-5.js │ │ │ │ │ │ │ │ ├── performance-4.js │ │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ │ ├── phoneUnknown-3.js │ │ │ │ │ │ │ │ ├── platform-1.js │ │ │ │ │ │ │ │ ├── polling-3.js │ │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ │ ├── powerOfCrypto-6.js │ │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ │ │ ├── private-2.js │ │ │ │ │ │ │ │ ├── privateKey-1.js │ │ │ │ │ │ │ │ ├── processing-3.js │ │ │ │ │ │ │ │ ├── protocol-1.js │ │ │ │ │ │ │ │ ├── public-1.js │ │ │ │ │ │ │ │ ├── quest-2.js │ │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ │ ├── quickBuy-3.js │ │ │ │ │ │ │ │ ├── ratingsAndReviews-5.js │ │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ │ ├── realToUSDC-1.js │ │ │ │ │ │ │ │ ├── receiveGift-4.js │ │ │ │ │ │ │ │ ├── receivedCard-3.js │ │ │ │ │ │ │ │ ├── recommendInvest-6.js │ │ │ │ │ │ │ │ ├── recurringReward-4.js │ │ │ │ │ │ │ │ ├── referralsAvatars-6.js │ │ │ │ │ │ │ │ ├── referralsBitcoin-6.js │ │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ │ ├── referralsGenericCoin-1.js │ │ │ │ │ │ │ │ ├── referralsWalletPhones-7.js │ │ │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ │ │ ├── remittances-4.js │ │ │ │ │ │ │ │ ├── requestSent-5.js │ │ │ │ │ │ │ │ ├── restrictedCountry-7.js │ │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ │ ├── reviewInfo-4.js │ │ │ │ │ │ │ │ ├── rocket-4.js │ │ │ │ │ │ │ │ ├── rotatingRewards-7.js │ │ │ │ │ │ │ │ ├── routingAccount-4.js │ │ │ │ │ │ │ │ ├── scalable-1.js │ │ │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ │ ├── selectCorrectCrypto-4.js │ │ │ │ │ │ │ │ ├── selectReward-3.js │ │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ │ ├── selfCustodyCrypto-4.js │ │ │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ │ │ ├── sendCryptoFaster-3.js │ │ │ │ │ │ │ │ ├── sendToUsername-4.js │ │ │ │ │ │ │ │ ├── serverCatSystemError-3.js │ │ │ │ │ │ │ │ ├── settlement-1.js │ │ │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ │ │ ├── slippageTolerance-4.js │ │ │ │ │ │ │ │ ├── smartContract-2.js │ │ │ │ │ │ │ │ ├── spacedOutSystemError-5.js │ │ │ │ │ │ │ │ ├── squidEmptyState-5.js │ │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ │ ├── stablecoin-1.js │ │ │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ │ │ ├── stakingMissedReturns-3.js │ │ │ │ │ │ │ │ ├── stakingMissedReturnsUsdc-0.js │ │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ │ ├── stopLimitOrder-4.js │ │ │ │ │ │ │ │ ├── stopLimitOrderDown-5.js │ │ │ │ │ │ │ │ ├── storage-2.js │ │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ │ ├── success-4.js │ │ │ │ │ │ │ │ ├── supportAndMore-5.js │ │ │ │ │ │ │ │ ├── sustainable-1.js │ │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-4.js │ │ │ │ │ │ │ │ ├── taxesDetails-3.js │ │ │ │ │ │ │ │ ├── test-0.js │ │ │ │ │ │ │ │ ├── tools-1.js │ │ │ │ │ │ │ │ ├── tradeGeneral-3.js │ │ │ │ │ │ │ │ ├── tradeHistory-4.js │ │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ │ ├── tradingPerpetualsUsdc-0.js │ │ │ │ │ │ │ │ ├── tradingWithLeverage-0.js │ │ │ │ │ │ │ │ ├── transactionLimit-4.js │ │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ │ ├── twoIdVerify-3.js │ │ │ │ │ │ │ │ ├── unlockKey-3.js │ │ │ │ │ │ │ │ ├── usdAndUsdc-0.js │ │ │ │ │ │ │ │ ├── usdtToUSDC-2.js │ │ │ │ │ │ │ │ ├── verifyBankTransactions-4.js │ │ │ │ │ │ │ │ ├── verifyCardTransactions-4.js │ │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ │ ├── verifyIdDetails-3.js │ │ │ │ │ │ │ │ ├── verifyInfo-4.js │ │ │ │ │ │ │ │ ├── videoRequest-4.js │ │ │ │ │ │ │ │ ├── videoReview-4.js │ │ │ │ │ │ │ │ ├── videoUpload-4.js │ │ │ │ │ │ │ │ ├── vipBadge-1.js │ │ │ │ │ │ │ │ ├── vote-1.js │ │ │ │ │ │ │ │ ├── walletAsset-7.js │ │ │ │ │ │ │ │ ├── walletConfirmation-2.js │ │ │ │ │ │ │ │ ├── walletFlyEmptyState-4.js │ │ │ │ │ │ │ │ ├── walletLoading-3.js │ │ │ │ │ │ │ │ ├── walletNotifications-4.js │ │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ │ ├── walletUi-7.js │ │ │ │ │ │ │ │ ├── walletWarning-1.js │ │ │ │ │ │ │ │ ├── watchVideos-3.js │ │ │ │ │ │ │ │ ├── web3ActivityError-3.js │ │ │ │ │ │ │ │ ├── web3ActivitySigned-5.js │ │ │ │ │ │ │ │ ├── web3MobileSetupStart-4.js │ │ │ │ │ │ │ │ ├── web3MobileSetupSuccess-4.js │ │ │ │ │ │ │ │ ├── webRAT-3.js │ │ │ │ │ │ │ │ ├── whyNotBoth-4.js │ │ │ │ │ │ │ │ └── yourContacts-4.js │ │ │ │ │ │ │ ├── light/ │ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ │ ├── accountUnderReview-3.js │ │ │ │ │ │ │ │ ├── add2Fa-5.js │ │ │ │ │ │ │ │ ├── addBankAccount-4.js │ │ │ │ │ │ │ │ ├── addCreditCard-4.js │ │ │ │ │ │ │ │ ├── addMoreCrypto-4.js │ │ │ │ │ │ │ │ ├── addPhoneNumber-4.js │ │ │ │ │ │ │ │ ├── advancedTrading-5.js │ │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ │ ├── advancedTradingUi-3.js │ │ │ │ │ │ │ │ ├── airdrop-2.js │ │ │ │ │ │ │ │ ├── alienDonutSystemError-4.js │ │ │ │ │ │ │ │ ├── anonymous-1.js │ │ │ │ │ │ │ │ ├── appTrackingTransparency-5.js │ │ │ │ │ │ │ │ ├── artFrameEmptyState-5.js │ │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ │ │ ├── baseChartLarge-1.js │ │ │ │ │ │ │ │ ├── baseCheck-1.js │ │ │ │ │ │ │ │ ├── baseCoinCryptoLarge-1.js │ │ │ │ │ │ │ │ ├── baseCoinNetworkLarge-1.js │ │ │ │ │ │ │ │ ├── baseConnectLarge-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoinEmpty-1.js │ │ │ │ │ │ │ │ ├── baseDecentralizationLarge-1.js │ │ │ │ │ │ │ │ ├── baseEmptyLarge-1.js │ │ │ │ │ │ │ │ ├── baseErrorButterfly-0.js │ │ │ │ │ │ │ │ ├── baseErrorLarge-1.js │ │ │ │ │ │ │ │ ├── baseLoadingLarge-1.js │ │ │ │ │ │ │ │ ├── baseLocationLarge-1.js │ │ │ │ │ │ │ │ ├── baseMintNftLarge-1.js │ │ │ │ │ │ │ │ ├── baseNetworkLarge-1.js │ │ │ │ │ │ │ │ ├── baseNftLarge-1.js │ │ │ │ │ │ │ │ ├── basePaycoinLarge-1.js │ │ │ │ │ │ │ │ ├── basePeopleLarge-1.js │ │ │ │ │ │ │ │ ├── basePiechartLarge-1.js │ │ │ │ │ │ │ │ ├── baseRewardsCalmLarge-1.js │ │ │ │ │ │ │ │ ├── baseSecurityLarge-1.js │ │ │ │ │ │ │ │ ├── baseSendLarge-1.js │ │ │ │ │ │ │ │ ├── baseSocial-2.js │ │ │ │ │ │ │ │ ├── baseTargetLarge-1.js │ │ │ │ │ │ │ │ ├── basedInUsa-5.js │ │ │ │ │ │ │ │ ├── bigBtc-6.js │ │ │ │ │ │ │ │ ├── bigError-5.js │ │ │ │ │ │ │ │ ├── bigWarning-5.js │ │ │ │ │ │ │ │ ├── bitcoinAndOtherCrypto-3.js │ │ │ │ │ │ │ │ ├── bitcoinGlobe-5.js │ │ │ │ │ │ │ │ ├── blockchain-3.js │ │ │ │ │ │ │ │ ├── borrow-4.js │ │ │ │ │ │ │ │ ├── borrowCoins-2.js │ │ │ │ │ │ │ │ ├── borrowCoinsBtc-0.js │ │ │ │ │ │ │ │ ├── borrowWallet-5.js │ │ │ │ │ │ │ │ ├── brdGift-4.js │ │ │ │ │ │ │ │ ├── bridge-2.js │ │ │ │ │ │ │ │ ├── browseDecentralizedApps-6.js │ │ │ │ │ │ │ │ ├── browserExtension-4.js │ │ │ │ │ │ │ │ ├── buy-1.js │ │ │ │ │ │ │ │ ├── buyFirstCrypto-4.js │ │ │ │ │ │ │ │ ├── camera-4.js │ │ │ │ │ │ │ │ ├── cardAndPhone-2.js │ │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ │ ├── cardError-4.js │ │ │ │ │ │ │ │ ├── cardErrorCB1-0.js │ │ │ │ │ │ │ │ ├── cardReloadFunds-3.js │ │ │ │ │ │ │ │ ├── cashExcitement-3.js │ │ │ │ │ │ │ │ ├── catHoldingWalletEmptyState-4.js │ │ │ │ │ │ │ │ ├── catLostSystemError-3.js │ │ │ │ │ │ │ │ ├── cbada-0.js │ │ │ │ │ │ │ │ ├── cbbtc-2.js │ │ │ │ │ │ │ │ ├── cbdoge-0.js │ │ │ │ │ │ │ │ ├── cbltc-0.js │ │ │ │ │ │ │ │ ├── cbmega-0.js │ │ │ │ │ │ │ │ ├── cbxrp-0.js │ │ │ │ │ │ │ │ ├── chickenFishSystemError-3.js │ │ │ │ │ │ │ │ ├── claimCryptoUsername-2.js │ │ │ │ │ │ │ │ ├── cloud-1.js │ │ │ │ │ │ │ │ ├── cloudBacking-3.js │ │ │ │ │ │ │ │ ├── coinCheckmark-4.js │ │ │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ │ │ ├── coinbaseCard-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardIssue-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardSpend-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardSpendCrypto-4.js │ │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ │ ├── coinbaseIsDown-5.js │ │ │ │ │ │ │ │ ├── coinbaseIsDownMobile-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneAirdrop-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneCardWarning-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneDocWarning-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ │ │ ├── coinbaseOneInsufficientWallet-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ │ │ ├── coinbaseOnePercentOff-4.js │ │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneProtectedCrypto-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneTokenRewards-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneUSDCBig-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneUSDCIncentives-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWaitlist-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWalletWarning-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneWelcome-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneZeroPromotion-1.js │ │ │ │ │ │ │ │ ├── coinbaseRedesigned-3.js │ │ │ │ │ │ │ │ ├── coinbaseWalletToTrade-3.js │ │ │ │ │ │ │ │ ├── coinsInWallet-3.js │ │ │ │ │ │ │ │ ├── collectableNfts-6.js │ │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ │ ├── commerceAccounting-4.js │ │ │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ │ │ ├── communication-1.js │ │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-3.js │ │ │ │ │ │ │ │ ├── connectPeople-2.js │ │ │ │ │ │ │ │ ├── contactsListWarning-3.js │ │ │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ │ ├── cryptoApps-5.js │ │ │ │ │ │ │ │ ├── cryptoAppsWallet-5.js │ │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ │ │ ├── cryptoForBeginners-4.js │ │ │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ │ │ ├── cryptoPortfolioUsdc-0.js │ │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ │ ├── currencyPairs-5.js │ │ │ │ │ │ │ │ ├── dappsArts-4.js │ │ │ │ │ │ │ │ ├── dappsFinance-6.js │ │ │ │ │ │ │ │ ├── dappsGaming-4.js │ │ │ │ │ │ │ │ ├── dappsGeneral-2.js │ │ │ │ │ │ │ │ ├── dappsL2Support-5.js │ │ │ │ │ │ │ │ ├── dappsMusic-5.js │ │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ │ ├── decentralizedWebWeb3-5.js │ │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-4.js │ │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ │ ├── defiEnrollBoost-3.js │ │ │ │ │ │ │ │ ├── defiHow-4.js │ │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ │ ├── desktopAuthorized-4.js │ │ │ │ │ │ │ │ ├── desktopUnknown-3.js │ │ │ │ │ │ │ │ ├── developer-1.js │ │ │ │ │ │ │ │ ├── diamondHands-6.js │ │ │ │ │ │ │ │ ├── didDecentralizedIdentity-4.js │ │ │ │ │ │ │ │ ├── digitalCollectibles-5.js │ │ │ │ │ │ │ │ ├── digitalGold-1.js │ │ │ │ │ │ │ │ ├── directDepositPhone-5.js │ │ │ │ │ │ │ │ ├── discardAssets-5.js │ │ │ │ │ │ │ │ ├── docError-3.js │ │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ │ ├── downloadCoinbaseWallet-6.js │ │ │ │ │ │ │ │ ├── earn-3.js │ │ │ │ │ │ │ │ ├── earnCryptoCard-4.js │ │ │ │ │ │ │ │ ├── earnCryptoInterest-5.js │ │ │ │ │ │ │ │ ├── earnGlobe-1.js │ │ │ │ │ │ │ │ ├── earnGrowth-4.js │ │ │ │ │ │ │ │ ├── earnIdVerification-3.js │ │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ │ ├── earnMore-4.js │ │ │ │ │ │ │ │ ├── earnNuxHome-5.js │ │ │ │ │ │ │ │ ├── earnSuccess-5.js │ │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ │ ├── emailNotification-4.js │ │ │ │ │ │ │ │ ├── emptyCollection-5.js │ │ │ │ │ │ │ │ ├── emptyStateCheckBackLater-5.js │ │ │ │ │ │ │ │ ├── emptyStateNft404Page-4.js │ │ │ │ │ │ │ │ ├── emptyStateNftSoldOut-4.js │ │ │ │ │ │ │ │ ├── enableBiometrics-5.js │ │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ │ ├── engagement-2.js │ │ │ │ │ │ │ │ ├── ensProfilePic-2.js │ │ │ │ │ │ │ │ ├── error400-4.js │ │ │ │ │ │ │ │ ├── errorApp500-6.js │ │ │ │ │ │ │ │ ├── errorMoblie-1.js │ │ │ │ │ │ │ │ ├── errorRefresh-4.js │ │ │ │ │ │ │ │ ├── errorRefreshWeb-1.js │ │ │ │ │ │ │ │ ├── errorWeb-1.js │ │ │ │ │ │ │ │ ├── errorWeb400-4.js │ │ │ │ │ │ │ │ ├── errorWeb404-6.js │ │ │ │ │ │ │ │ ├── errorWeb404Mobile-1.js │ │ │ │ │ │ │ │ ├── errorWeb500-4.js │ │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ │ ├── ethStakingUpsell-5.js │ │ │ │ │ │ │ │ ├── ethereumToWallet-6.js │ │ │ │ │ │ │ │ ├── exchange-1.js │ │ │ │ │ │ │ │ ├── exchangeEmptyState-5.js │ │ │ │ │ │ │ │ ├── exploreDecentralizedApps-7.js │ │ │ │ │ │ │ │ ├── faceMatchReal-4.js │ │ │ │ │ │ │ │ ├── feeScale-4.js │ │ │ │ │ │ │ │ ├── fiat-1.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-5.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-6.js │ │ │ │ │ │ │ │ ├── flipStable-0.js │ │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ │ ├── freeBtc-4.js │ │ │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ │ │ ├── futuresAndPerps-0.js │ │ │ │ │ │ │ │ ├── futuresExpire-0.js │ │ │ │ │ │ │ │ ├── futuresVsPerps-0.js │ │ │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ │ │ ├── gamer-1.js │ │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ │ ├── generative-2.js │ │ │ │ │ │ │ │ ├── genniusLaunch-0.js │ │ │ │ │ │ │ │ ├── getStartedInMinutes-4.js │ │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── governanceMallet-1.js │ │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ │ ├── hiddenCollection-3.js │ │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ │ ├── iceCreamMeltingSystemError-6.js │ │ │ │ │ │ │ │ ├── idAngles-4.js │ │ │ │ │ │ │ │ ├── idBack-2.js │ │ │ │ │ │ │ │ ├── idCard-3.js │ │ │ │ │ │ │ │ ├── idFront-3.js │ │ │ │ │ │ │ │ ├── idIssue-3.js │ │ │ │ │ │ │ │ ├── idVerificationSecure-5.js │ │ │ │ │ │ │ │ ├── indexer-2.js │ │ │ │ │ │ │ │ ├── innovation-2.js │ │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ │ ├── instoAdd2Fa-0.js │ │ │ │ │ │ │ │ ├── instoAddBankAccount-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneProtectedCrypto-1.js │ │ │ │ │ │ │ │ ├── instoDocumentSuccess-1.js │ │ │ │ │ │ │ │ ├── instoEarnGlobe-0.js │ │ │ │ │ │ │ │ ├── instoEnableBiometrics-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingUpsell-0.js │ │ │ │ │ │ │ │ ├── instoGovernance-0.js │ │ │ │ │ │ │ │ ├── instoKeyGenerationComplete-1.js │ │ │ │ │ │ │ │ ├── instoKeyGenerationPending-0.js │ │ │ │ │ │ │ │ ├── instoOnChain-2.js │ │ │ │ │ │ │ │ ├── instoOpenEmail-1.js │ │ │ │ │ │ │ │ ├── instoPhoneUnknown-0.js │ │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ │ ├── instoPrivateKey-1.js │ │ │ │ │ │ │ │ ├── instoRequestSent-1.js │ │ │ │ │ │ │ │ ├── instoSecurityKeyAuth-0.js │ │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ │ ├── instoStakingMissedReturns-1.js │ │ │ │ │ │ │ │ ├── instoWallet-0.js │ │ │ │ │ │ │ │ ├── instoWalletSecurity-0.js │ │ │ │ │ │ │ │ ├── instoWeb3MobileSetupStart-0.js │ │ │ │ │ │ │ │ ├── insufficientBalance-5.js │ │ │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ │ │ ├── invest-3.js │ │ │ │ │ │ │ │ ├── invite-4.js │ │ │ │ │ │ │ │ ├── japanVerifyId-3.js │ │ │ │ │ │ │ │ ├── keyGeneration-6.js │ │ │ │ │ │ │ │ ├── layerOne-2.js │ │ │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ │ │ ├── layerTwo-2.js │ │ │ │ │ │ │ │ ├── layeredNetworks-5.js │ │ │ │ │ │ │ │ ├── ledgerAccess-4.js │ │ │ │ │ │ │ │ ├── ledgerPlugin-4.js │ │ │ │ │ │ │ │ ├── lend-1.js │ │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ │ ├── lightningNetwork-1.js │ │ │ │ │ │ │ │ ├── lightningNetworkInvoice-2.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── lightningNetworkTransfer-1.js │ │ │ │ │ │ │ │ ├── limitOrders-5.js │ │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRedClose-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferYellow-0.js │ │ │ │ │ │ │ │ ├── lowCost-2.js │ │ │ │ │ │ │ │ ├── margin-3.js │ │ │ │ │ │ │ │ ├── marginWarning-4.js │ │ │ │ │ │ │ │ ├── mic-4.js │ │ │ │ │ │ │ │ ├── mining-4.js │ │ │ │ │ │ │ │ ├── minting-2.js │ │ │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ │ │ ├── moreGains-0.js │ │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-5.js │ │ │ │ │ │ │ │ ├── multicoinSupport-4.js │ │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ │ ├── multiplePortfolios-1.js │ │ │ │ │ │ │ │ ├── myNameIsSatoshi-3.js │ │ │ │ │ │ │ │ ├── namePortfolio-1.js │ │ │ │ │ │ │ │ ├── networkWarning-5.js │ │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ │ ├── noFeesMotion-1.js │ │ │ │ │ │ │ │ ├── noLongAddresses-2.js │ │ │ │ │ │ │ │ ├── notificationsAlt-5.js │ │ │ │ │ │ │ │ ├── notificationsAndUpdates-3.js │ │ │ │ │ │ │ │ ├── offChain-1.js │ │ │ │ │ │ │ │ ├── oilAndGold-2.js │ │ │ │ │ │ │ │ ├── onChain-2.js │ │ │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ │ │ ├── openEmail-4.js │ │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-3.js │ │ │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ │ │ ├── oracle-1.js │ │ │ │ │ │ │ │ ├── orderBooks-3.js │ │ │ │ │ │ │ │ ├── outage-1.js │ │ │ │ │ │ │ │ ├── p2pGifting-4.js │ │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ │ ├── paperHands-3.js │ │ │ │ │ │ │ │ ├── payUpFront-4.js │ │ │ │ │ │ │ │ ├── pending-5.js │ │ │ │ │ │ │ │ ├── performance-4.js │ │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ │ ├── phoneUnknown-3.js │ │ │ │ │ │ │ │ ├── platform-1.js │ │ │ │ │ │ │ │ ├── polling-3.js │ │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ │ ├── powerOfCrypto-6.js │ │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ │ │ ├── private-2.js │ │ │ │ │ │ │ │ ├── privateKey-1.js │ │ │ │ │ │ │ │ ├── processing-3.js │ │ │ │ │ │ │ │ ├── protocol-1.js │ │ │ │ │ │ │ │ ├── public-1.js │ │ │ │ │ │ │ │ ├── quest-2.js │ │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ │ ├── quickBuy-3.js │ │ │ │ │ │ │ │ ├── ratingsAndReviews-5.js │ │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ │ ├── realToUSDC-1.js │ │ │ │ │ │ │ │ ├── receiveGift-4.js │ │ │ │ │ │ │ │ ├── receivedCard-3.js │ │ │ │ │ │ │ │ ├── recommendInvest-6.js │ │ │ │ │ │ │ │ ├── recurringReward-4.js │ │ │ │ │ │ │ │ ├── referralsAvatars-6.js │ │ │ │ │ │ │ │ ├── referralsBitcoin-6.js │ │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ │ ├── referralsGenericCoin-1.js │ │ │ │ │ │ │ │ ├── referralsWalletPhones-7.js │ │ │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ │ │ ├── remittances-4.js │ │ │ │ │ │ │ │ ├── requestSent-5.js │ │ │ │ │ │ │ │ ├── restrictedCountry-7.js │ │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ │ ├── reviewInfo-4.js │ │ │ │ │ │ │ │ ├── rocket-4.js │ │ │ │ │ │ │ │ ├── rotatingRewards-7.js │ │ │ │ │ │ │ │ ├── routingAccount-4.js │ │ │ │ │ │ │ │ ├── scalable-1.js │ │ │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ │ ├── selectCorrectCrypto-4.js │ │ │ │ │ │ │ │ ├── selectReward-3.js │ │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ │ ├── selfCustodyCrypto-4.js │ │ │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ │ │ ├── sendCryptoFaster-3.js │ │ │ │ │ │ │ │ ├── sendToUsername-4.js │ │ │ │ │ │ │ │ ├── serverCatSystemError-3.js │ │ │ │ │ │ │ │ ├── settlement-1.js │ │ │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ │ │ ├── slippageTolerance-4.js │ │ │ │ │ │ │ │ ├── smartContract-2.js │ │ │ │ │ │ │ │ ├── spacedOutSystemError-5.js │ │ │ │ │ │ │ │ ├── squidEmptyState-5.js │ │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ │ ├── stablecoin-1.js │ │ │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ │ │ ├── stakingMissedReturns-3.js │ │ │ │ │ │ │ │ ├── stakingMissedReturnsUsdc-0.js │ │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ │ ├── stopLimitOrder-4.js │ │ │ │ │ │ │ │ ├── stopLimitOrderDown-5.js │ │ │ │ │ │ │ │ ├── storage-2.js │ │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ │ ├── success-4.js │ │ │ │ │ │ │ │ ├── supportAndMore-5.js │ │ │ │ │ │ │ │ ├── sustainable-1.js │ │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-4.js │ │ │ │ │ │ │ │ ├── taxesDetails-3.js │ │ │ │ │ │ │ │ ├── test-0.js │ │ │ │ │ │ │ │ ├── tools-1.js │ │ │ │ │ │ │ │ ├── tradeGeneral-3.js │ │ │ │ │ │ │ │ ├── tradeHistory-4.js │ │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ │ ├── tradingPerpetualsUsdc-0.js │ │ │ │ │ │ │ │ ├── tradingWithLeverage-0.js │ │ │ │ │ │ │ │ ├── transactionLimit-4.js │ │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ │ ├── twoIdVerify-3.js │ │ │ │ │ │ │ │ ├── unlockKey-3.js │ │ │ │ │ │ │ │ ├── usdAndUsdc-0.js │ │ │ │ │ │ │ │ ├── usdtToUSDC-2.js │ │ │ │ │ │ │ │ ├── verifyBankTransactions-4.js │ │ │ │ │ │ │ │ ├── verifyCardTransactions-4.js │ │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ │ ├── verifyIdDetails-3.js │ │ │ │ │ │ │ │ ├── verifyInfo-4.js │ │ │ │ │ │ │ │ ├── videoRequest-4.js │ │ │ │ │ │ │ │ ├── videoReview-4.js │ │ │ │ │ │ │ │ ├── videoUpload-4.js │ │ │ │ │ │ │ │ ├── vipBadge-1.js │ │ │ │ │ │ │ │ ├── vote-1.js │ │ │ │ │ │ │ │ ├── walletAsset-7.js │ │ │ │ │ │ │ │ ├── walletConfirmation-2.js │ │ │ │ │ │ │ │ ├── walletFlyEmptyState-4.js │ │ │ │ │ │ │ │ ├── walletLoading-3.js │ │ │ │ │ │ │ │ ├── walletNotifications-4.js │ │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ │ ├── walletUi-7.js │ │ │ │ │ │ │ │ ├── walletWarning-1.js │ │ │ │ │ │ │ │ ├── watchVideos-3.js │ │ │ │ │ │ │ │ ├── web3ActivityError-3.js │ │ │ │ │ │ │ │ ├── web3ActivitySigned-5.js │ │ │ │ │ │ │ │ ├── web3MobileSetupStart-4.js │ │ │ │ │ │ │ │ ├── web3MobileSetupSuccess-4.js │ │ │ │ │ │ │ │ ├── webRAT-3.js │ │ │ │ │ │ │ │ ├── whyNotBoth-4.js │ │ │ │ │ │ │ │ └── yourContacts-4.js │ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ ├── accountUnderReview-3.js │ │ │ │ │ │ │ ├── add2Fa-5.js │ │ │ │ │ │ │ ├── addBankAccount-4.js │ │ │ │ │ │ │ ├── addCreditCard-4.js │ │ │ │ │ │ │ ├── addMoreCrypto-4.js │ │ │ │ │ │ │ ├── addPhoneNumber-4.js │ │ │ │ │ │ │ ├── advancedTrading-5.js │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ ├── advancedTradingUi-3.js │ │ │ │ │ │ │ ├── airdrop-2.js │ │ │ │ │ │ │ ├── alienDonutSystemError-4.js │ │ │ │ │ │ │ ├── anonymous-1.js │ │ │ │ │ │ │ ├── appTrackingTransparency-5.js │ │ │ │ │ │ │ ├── artFrameEmptyState-5.js │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ │ ├── baseChartLarge-1.js │ │ │ │ │ │ │ ├── baseCheck-1.js │ │ │ │ │ │ │ ├── baseCoinCryptoLarge-1.js │ │ │ │ │ │ │ ├── baseCoinNetworkLarge-1.js │ │ │ │ │ │ │ ├── baseConnectLarge-1.js │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ ├── baseCreatorCoinEmpty-1.js │ │ │ │ │ │ │ ├── baseDecentralizationLarge-1.js │ │ │ │ │ │ │ ├── baseEmptyLarge-1.js │ │ │ │ │ │ │ ├── baseErrorButterfly-0.js │ │ │ │ │ │ │ ├── baseErrorLarge-1.js │ │ │ │ │ │ │ ├── baseLoadingLarge-1.js │ │ │ │ │ │ │ ├── baseLocationLarge-1.js │ │ │ │ │ │ │ ├── baseMintNftLarge-1.js │ │ │ │ │ │ │ ├── baseNetworkLarge-1.js │ │ │ │ │ │ │ ├── baseNftLarge-1.js │ │ │ │ │ │ │ ├── basePaycoinLarge-1.js │ │ │ │ │ │ │ ├── basePeopleLarge-1.js │ │ │ │ │ │ │ ├── basePiechartLarge-1.js │ │ │ │ │ │ │ ├── baseRewardsCalmLarge-1.js │ │ │ │ │ │ │ ├── baseSecurityLarge-1.js │ │ │ │ │ │ │ ├── baseSendLarge-1.js │ │ │ │ │ │ │ ├── baseSocial-2.js │ │ │ │ │ │ │ ├── baseTargetLarge-1.js │ │ │ │ │ │ │ ├── basedInUsa-5.js │ │ │ │ │ │ │ ├── bigBtc-6.js │ │ │ │ │ │ │ ├── bigError-5.js │ │ │ │ │ │ │ ├── bigWarning-5.js │ │ │ │ │ │ │ ├── bitcoinAndOtherCrypto-3.js │ │ │ │ │ │ │ ├── bitcoinGlobe-5.js │ │ │ │ │ │ │ ├── blockchain-3.js │ │ │ │ │ │ │ ├── borrow-4.js │ │ │ │ │ │ │ ├── borrowCoins-2.js │ │ │ │ │ │ │ ├── borrowCoinsBtc-0.js │ │ │ │ │ │ │ ├── borrowWallet-5.js │ │ │ │ │ │ │ ├── brdGift-4.js │ │ │ │ │ │ │ ├── bridge-2.js │ │ │ │ │ │ │ ├── browseDecentralizedApps-6.js │ │ │ │ │ │ │ ├── browserExtension-4.js │ │ │ │ │ │ │ ├── buy-1.js │ │ │ │ │ │ │ ├── buyFirstCrypto-4.js │ │ │ │ │ │ │ ├── camera-4.js │ │ │ │ │ │ │ ├── cardAndPhone-2.js │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ ├── cardError-4.js │ │ │ │ │ │ │ ├── cardErrorCB1-0.js │ │ │ │ │ │ │ ├── cardReloadFunds-3.js │ │ │ │ │ │ │ ├── cashExcitement-3.js │ │ │ │ │ │ │ ├── catHoldingWalletEmptyState-4.js │ │ │ │ │ │ │ ├── catLostSystemError-3.js │ │ │ │ │ │ │ ├── cbada-0.js │ │ │ │ │ │ │ ├── cbbtc-2.js │ │ │ │ │ │ │ ├── cbdoge-0.js │ │ │ │ │ │ │ ├── cbltc-0.js │ │ │ │ │ │ │ ├── cbmega-0.js │ │ │ │ │ │ │ ├── cbxrp-0.js │ │ │ │ │ │ │ ├── chickenFishSystemError-3.js │ │ │ │ │ │ │ ├── claimCryptoUsername-2.js │ │ │ │ │ │ │ ├── cloud-1.js │ │ │ │ │ │ │ ├── cloudBacking-3.js │ │ │ │ │ │ │ ├── coinCheckmark-4.js │ │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ │ ├── coinbaseCard-3.js │ │ │ │ │ │ │ ├── coinbaseCardIssue-3.js │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ ├── coinbaseCardSpend-3.js │ │ │ │ │ │ │ ├── coinbaseCardSpendCrypto-4.js │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ ├── coinbaseIsDown-5.js │ │ │ │ │ │ │ ├── coinbaseIsDownMobile-4.js │ │ │ │ │ │ │ ├── coinbaseOneAirdrop-1.js │ │ │ │ │ │ │ ├── coinbaseOneCardWarning-3.js │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-4.js │ │ │ │ │ │ │ ├── coinbaseOneDocWarning-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ │ ├── coinbaseOneInsufficientWallet-4.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ │ ├── coinbaseOnePercentOff-4.js │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-5.js │ │ │ │ │ │ │ ├── coinbaseOneProtectedCrypto-3.js │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ │ ├── coinbaseOneTokenRewards-3.js │ │ │ │ │ │ │ ├── coinbaseOneUSDCBig-1.js │ │ │ │ │ │ │ ├── coinbaseOneUSDCIncentives-4.js │ │ │ │ │ │ │ ├── coinbaseOneWaitlist-4.js │ │ │ │ │ │ │ ├── coinbaseOneWalletWarning-4.js │ │ │ │ │ │ │ ├── coinbaseOneWelcome-4.js │ │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ │ ├── coinbaseOneZeroPromotion-1.js │ │ │ │ │ │ │ ├── coinbaseRedesigned-3.js │ │ │ │ │ │ │ ├── coinbaseWalletToTrade-3.js │ │ │ │ │ │ │ ├── coinsInWallet-3.js │ │ │ │ │ │ │ ├── collectableNfts-6.js │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ ├── commerceAccounting-4.js │ │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ │ ├── communication-1.js │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-3.js │ │ │ │ │ │ │ ├── connectPeople-2.js │ │ │ │ │ │ │ ├── contactsListWarning-3.js │ │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ ├── cryptoApps-5.js │ │ │ │ │ │ │ ├── cryptoAppsWallet-5.js │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ │ ├── cryptoForBeginners-4.js │ │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ │ ├── cryptoPortfolioUsdc-0.js │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ ├── currencyPairs-5.js │ │ │ │ │ │ │ ├── dappsArts-4.js │ │ │ │ │ │ │ ├── dappsFinance-6.js │ │ │ │ │ │ │ ├── dappsGaming-4.js │ │ │ │ │ │ │ ├── dappsGeneral-2.js │ │ │ │ │ │ │ ├── dappsL2Support-5.js │ │ │ │ │ │ │ ├── dappsMusic-5.js │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ ├── decentralizedWebWeb3-5.js │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-4.js │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ ├── defiEnrollBoost-3.js │ │ │ │ │ │ │ ├── defiHow-4.js │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ ├── desktopAuthorized-4.js │ │ │ │ │ │ │ ├── desktopUnknown-3.js │ │ │ │ │ │ │ ├── developer-1.js │ │ │ │ │ │ │ ├── diamondHands-6.js │ │ │ │ │ │ │ ├── didDecentralizedIdentity-4.js │ │ │ │ │ │ │ ├── digitalCollectibles-5.js │ │ │ │ │ │ │ ├── digitalGold-1.js │ │ │ │ │ │ │ ├── directDepositPhone-5.js │ │ │ │ │ │ │ ├── discardAssets-5.js │ │ │ │ │ │ │ ├── docError-3.js │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ ├── downloadCoinbaseWallet-6.js │ │ │ │ │ │ │ ├── earn-3.js │ │ │ │ │ │ │ ├── earnCryptoCard-4.js │ │ │ │ │ │ │ ├── earnCryptoInterest-5.js │ │ │ │ │ │ │ ├── earnGlobe-1.js │ │ │ │ │ │ │ ├── earnGrowth-4.js │ │ │ │ │ │ │ ├── earnIdVerification-3.js │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ ├── earnMore-4.js │ │ │ │ │ │ │ ├── earnNuxHome-5.js │ │ │ │ │ │ │ ├── earnSuccess-5.js │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ ├── emailNotification-4.js │ │ │ │ │ │ │ ├── emptyCollection-5.js │ │ │ │ │ │ │ ├── emptyStateCheckBackLater-5.js │ │ │ │ │ │ │ ├── emptyStateNft404Page-4.js │ │ │ │ │ │ │ ├── emptyStateNftSoldOut-4.js │ │ │ │ │ │ │ ├── enableBiometrics-5.js │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ ├── engagement-2.js │ │ │ │ │ │ │ ├── ensProfilePic-2.js │ │ │ │ │ │ │ ├── error400-4.js │ │ │ │ │ │ │ ├── errorApp500-6.js │ │ │ │ │ │ │ ├── errorMoblie-1.js │ │ │ │ │ │ │ ├── errorRefresh-4.js │ │ │ │ │ │ │ ├── errorRefreshWeb-1.js │ │ │ │ │ │ │ ├── errorWeb-1.js │ │ │ │ │ │ │ ├── errorWeb400-4.js │ │ │ │ │ │ │ ├── errorWeb404-6.js │ │ │ │ │ │ │ ├── errorWeb404Mobile-1.js │ │ │ │ │ │ │ ├── errorWeb500-4.js │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ ├── ethStakingUpsell-5.js │ │ │ │ │ │ │ ├── ethereumToWallet-6.js │ │ │ │ │ │ │ ├── exchange-1.js │ │ │ │ │ │ │ ├── exchangeEmptyState-5.js │ │ │ │ │ │ │ ├── exploreDecentralizedApps-7.js │ │ │ │ │ │ │ ├── faceMatchReal-4.js │ │ │ │ │ │ │ ├── feeScale-4.js │ │ │ │ │ │ │ ├── fiat-1.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-5.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-6.js │ │ │ │ │ │ │ ├── flipStable-0.js │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ ├── freeBtc-4.js │ │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ │ ├── futuresAndPerps-0.js │ │ │ │ │ │ │ ├── futuresExpire-0.js │ │ │ │ │ │ │ ├── futuresVsPerps-0.js │ │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ │ ├── gamer-1.js │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ ├── generative-2.js │ │ │ │ │ │ │ ├── genniusLaunch-0.js │ │ │ │ │ │ │ ├── getStartedInMinutes-4.js │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ ├── governanceMallet-1.js │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ ├── hiddenCollection-3.js │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ ├── iceCreamMeltingSystemError-6.js │ │ │ │ │ │ │ ├── idAngles-4.js │ │ │ │ │ │ │ ├── idBack-2.js │ │ │ │ │ │ │ ├── idCard-3.js │ │ │ │ │ │ │ ├── idFront-3.js │ │ │ │ │ │ │ ├── idIssue-3.js │ │ │ │ │ │ │ ├── idVerificationSecure-5.js │ │ │ │ │ │ │ ├── indexer-2.js │ │ │ │ │ │ │ ├── innovation-2.js │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ ├── instoAdd2Fa-0.js │ │ │ │ │ │ │ ├── instoAddBankAccount-0.js │ │ │ │ │ │ │ ├── instoCoinbaseOneProtectedCrypto-1.js │ │ │ │ │ │ │ ├── instoDocumentSuccess-1.js │ │ │ │ │ │ │ ├── instoEarnGlobe-0.js │ │ │ │ │ │ │ ├── instoEnableBiometrics-0.js │ │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ │ ├── instoEthStakingUpsell-0.js │ │ │ │ │ │ │ ├── instoGovernance-0.js │ │ │ │ │ │ │ ├── instoKeyGenerationComplete-1.js │ │ │ │ │ │ │ ├── instoKeyGenerationPending-0.js │ │ │ │ │ │ │ ├── instoOnChain-2.js │ │ │ │ │ │ │ ├── instoOpenEmail-1.js │ │ │ │ │ │ │ ├── instoPhoneUnknown-0.js │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ ├── instoPrivateKey-1.js │ │ │ │ │ │ │ ├── instoRequestSent-1.js │ │ │ │ │ │ │ ├── instoSecurityKeyAuth-0.js │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ ├── instoStakingMissedReturns-1.js │ │ │ │ │ │ │ ├── instoWallet-0.js │ │ │ │ │ │ │ ├── instoWalletSecurity-0.js │ │ │ │ │ │ │ ├── instoWeb3MobileSetupStart-0.js │ │ │ │ │ │ │ ├── insufficientBalance-5.js │ │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ │ ├── invest-3.js │ │ │ │ │ │ │ ├── invite-4.js │ │ │ │ │ │ │ ├── japanVerifyId-3.js │ │ │ │ │ │ │ ├── keyGeneration-6.js │ │ │ │ │ │ │ ├── layerOne-2.js │ │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ │ ├── layerTwo-2.js │ │ │ │ │ │ │ ├── layeredNetworks-5.js │ │ │ │ │ │ │ ├── ledgerAccess-4.js │ │ │ │ │ │ │ ├── ledgerPlugin-4.js │ │ │ │ │ │ │ ├── lend-1.js │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ ├── lightningNetwork-1.js │ │ │ │ │ │ │ ├── lightningNetworkInvoice-2.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── lightningNetworkTransfer-1.js │ │ │ │ │ │ │ ├── limitOrders-5.js │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ ├── liquidationBufferRedClose-1.js │ │ │ │ │ │ │ ├── liquidationBufferYellow-0.js │ │ │ │ │ │ │ ├── lowCost-2.js │ │ │ │ │ │ │ ├── margin-3.js │ │ │ │ │ │ │ ├── marginWarning-4.js │ │ │ │ │ │ │ ├── mic-4.js │ │ │ │ │ │ │ ├── mining-4.js │ │ │ │ │ │ │ ├── minting-2.js │ │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ │ ├── moreGains-0.js │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-5.js │ │ │ │ │ │ │ ├── multicoinSupport-4.js │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ ├── multiplePortfolios-1.js │ │ │ │ │ │ │ ├── myNameIsSatoshi-3.js │ │ │ │ │ │ │ ├── namePortfolio-1.js │ │ │ │ │ │ │ ├── networkWarning-5.js │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ ├── noFeesMotion-1.js │ │ │ │ │ │ │ ├── noLongAddresses-2.js │ │ │ │ │ │ │ ├── notificationsAlt-5.js │ │ │ │ │ │ │ ├── notificationsAndUpdates-3.js │ │ │ │ │ │ │ ├── offChain-1.js │ │ │ │ │ │ │ ├── oilAndGold-2.js │ │ │ │ │ │ │ ├── onChain-2.js │ │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ │ ├── openEmail-4.js │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-3.js │ │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ │ ├── oracle-1.js │ │ │ │ │ │ │ ├── orderBooks-3.js │ │ │ │ │ │ │ ├── outage-1.js │ │ │ │ │ │ │ ├── p2pGifting-4.js │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ ├── paperHands-3.js │ │ │ │ │ │ │ ├── payUpFront-4.js │ │ │ │ │ │ │ ├── pending-5.js │ │ │ │ │ │ │ ├── performance-4.js │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ ├── phoneUnknown-3.js │ │ │ │ │ │ │ ├── platform-1.js │ │ │ │ │ │ │ ├── polling-3.js │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ ├── powerOfCrypto-6.js │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ │ ├── private-2.js │ │ │ │ │ │ │ ├── privateKey-1.js │ │ │ │ │ │ │ ├── processing-3.js │ │ │ │ │ │ │ ├── protocol-1.js │ │ │ │ │ │ │ ├── public-1.js │ │ │ │ │ │ │ ├── quest-2.js │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ ├── quickBuy-3.js │ │ │ │ │ │ │ ├── ratingsAndReviews-5.js │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ ├── realToUSDC-1.js │ │ │ │ │ │ │ ├── receiveGift-4.js │ │ │ │ │ │ │ ├── receivedCard-3.js │ │ │ │ │ │ │ ├── recommendInvest-6.js │ │ │ │ │ │ │ ├── recurringReward-4.js │ │ │ │ │ │ │ ├── referralsAvatars-6.js │ │ │ │ │ │ │ ├── referralsBitcoin-6.js │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ ├── referralsGenericCoin-1.js │ │ │ │ │ │ │ ├── referralsWalletPhones-7.js │ │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ │ ├── remittances-4.js │ │ │ │ │ │ │ ├── requestSent-5.js │ │ │ │ │ │ │ ├── restrictedCountry-7.js │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ ├── reviewInfo-4.js │ │ │ │ │ │ │ ├── rocket-4.js │ │ │ │ │ │ │ ├── rotatingRewards-7.js │ │ │ │ │ │ │ ├── routingAccount-4.js │ │ │ │ │ │ │ ├── scalable-1.js │ │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ ├── selectCorrectCrypto-4.js │ │ │ │ │ │ │ ├── selectReward-3.js │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ ├── selfCustodyCrypto-4.js │ │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ │ ├── sendCryptoFaster-3.js │ │ │ │ │ │ │ ├── sendToUsername-4.js │ │ │ │ │ │ │ ├── serverCatSystemError-3.js │ │ │ │ │ │ │ ├── settlement-1.js │ │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ │ ├── slippageTolerance-4.js │ │ │ │ │ │ │ ├── smartContract-2.js │ │ │ │ │ │ │ ├── spacedOutSystemError-5.js │ │ │ │ │ │ │ ├── squidEmptyState-5.js │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ ├── stablecoin-1.js │ │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ │ ├── stakingMissedReturns-3.js │ │ │ │ │ │ │ ├── stakingMissedReturnsUsdc-0.js │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ ├── stopLimitOrder-4.js │ │ │ │ │ │ │ ├── stopLimitOrderDown-5.js │ │ │ │ │ │ │ ├── storage-2.js │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ ├── success-4.js │ │ │ │ │ │ │ ├── supportAndMore-5.js │ │ │ │ │ │ │ ├── sustainable-1.js │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-4.js │ │ │ │ │ │ │ ├── taxesDetails-3.js │ │ │ │ │ │ │ ├── test-0.js │ │ │ │ │ │ │ ├── tools-1.js │ │ │ │ │ │ │ ├── tradeGeneral-3.js │ │ │ │ │ │ │ ├── tradeHistory-4.js │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ ├── tradingPerpetualsUsdc-0.js │ │ │ │ │ │ │ ├── tradingWithLeverage-0.js │ │ │ │ │ │ │ ├── transactionLimit-4.js │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ ├── twoIdVerify-3.js │ │ │ │ │ │ │ ├── unlockKey-3.js │ │ │ │ │ │ │ ├── usdAndUsdc-0.js │ │ │ │ │ │ │ ├── usdtToUSDC-2.js │ │ │ │ │ │ │ ├── verifyBankTransactions-4.js │ │ │ │ │ │ │ ├── verifyCardTransactions-4.js │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ ├── verifyIdDetails-3.js │ │ │ │ │ │ │ ├── verifyInfo-4.js │ │ │ │ │ │ │ ├── videoRequest-4.js │ │ │ │ │ │ │ ├── videoReview-4.js │ │ │ │ │ │ │ ├── videoUpload-4.js │ │ │ │ │ │ │ ├── vipBadge-1.js │ │ │ │ │ │ │ ├── vote-1.js │ │ │ │ │ │ │ ├── walletAsset-7.js │ │ │ │ │ │ │ ├── walletConfirmation-2.js │ │ │ │ │ │ │ ├── walletFlyEmptyState-4.js │ │ │ │ │ │ │ ├── walletLoading-3.js │ │ │ │ │ │ │ ├── walletNotifications-4.js │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ ├── walletUi-7.js │ │ │ │ │ │ │ ├── walletWarning-1.js │ │ │ │ │ │ │ ├── watchVideos-3.js │ │ │ │ │ │ │ ├── web3ActivityError-3.js │ │ │ │ │ │ │ ├── web3ActivitySigned-5.js │ │ │ │ │ │ │ ├── web3MobileSetupStart-4.js │ │ │ │ │ │ │ ├── web3MobileSetupSuccess-4.js │ │ │ │ │ │ │ ├── webRAT-3.js │ │ │ │ │ │ │ ├── whyNotBoth-4.js │ │ │ │ │ │ │ └── yourContacts-4.js │ │ │ │ │ │ └── esm/ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ ├── accountUnderReview-3.js │ │ │ │ │ │ ├── add2Fa-5.js │ │ │ │ │ │ ├── addBankAccount-4.js │ │ │ │ │ │ ├── addCreditCard-4.js │ │ │ │ │ │ ├── addMoreCrypto-4.js │ │ │ │ │ │ ├── addPhoneNumber-4.js │ │ │ │ │ │ ├── advancedTrading-5.js │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ ├── advancedTradingUi-3.js │ │ │ │ │ │ ├── airdrop-2.js │ │ │ │ │ │ ├── alienDonutSystemError-4.js │ │ │ │ │ │ ├── anonymous-1.js │ │ │ │ │ │ ├── appTrackingTransparency-5.js │ │ │ │ │ │ ├── artFrameEmptyState-5.js │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ ├── baseChartLarge-1.js │ │ │ │ │ │ ├── baseCheck-1.js │ │ │ │ │ │ ├── baseCoinCryptoLarge-1.js │ │ │ │ │ │ ├── baseCoinNetworkLarge-1.js │ │ │ │ │ │ ├── baseConnectLarge-1.js │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ ├── baseCreatorCoinEmpty-1.js │ │ │ │ │ │ ├── baseDecentralizationLarge-1.js │ │ │ │ │ │ ├── baseEmptyLarge-1.js │ │ │ │ │ │ ├── baseErrorButterfly-0.js │ │ │ │ │ │ ├── baseErrorLarge-1.js │ │ │ │ │ │ ├── baseLoadingLarge-1.js │ │ │ │ │ │ ├── baseLocationLarge-1.js │ │ │ │ │ │ ├── baseMintNftLarge-1.js │ │ │ │ │ │ ├── baseNetworkLarge-1.js │ │ │ │ │ │ ├── baseNftLarge-1.js │ │ │ │ │ │ ├── basePaycoinLarge-1.js │ │ │ │ │ │ ├── basePeopleLarge-1.js │ │ │ │ │ │ ├── basePiechartLarge-1.js │ │ │ │ │ │ ├── baseRewardsCalmLarge-1.js │ │ │ │ │ │ ├── baseSecurityLarge-1.js │ │ │ │ │ │ ├── baseSendLarge-1.js │ │ │ │ │ │ ├── baseSocial-2.js │ │ │ │ │ │ ├── baseTargetLarge-1.js │ │ │ │ │ │ ├── basedInUsa-5.js │ │ │ │ │ │ ├── bigBtc-6.js │ │ │ │ │ │ ├── bigError-5.js │ │ │ │ │ │ ├── bigWarning-5.js │ │ │ │ │ │ ├── bitcoinAndOtherCrypto-3.js │ │ │ │ │ │ ├── bitcoinGlobe-5.js │ │ │ │ │ │ ├── blockchain-3.js │ │ │ │ │ │ ├── borrow-4.js │ │ │ │ │ │ ├── borrowCoins-2.js │ │ │ │ │ │ ├── borrowCoinsBtc-0.js │ │ │ │ │ │ ├── borrowWallet-5.js │ │ │ │ │ │ ├── brdGift-4.js │ │ │ │ │ │ ├── bridge-2.js │ │ │ │ │ │ ├── browseDecentralizedApps-6.js │ │ │ │ │ │ ├── browserExtension-4.js │ │ │ │ │ │ ├── buy-1.js │ │ │ │ │ │ ├── buyFirstCrypto-4.js │ │ │ │ │ │ ├── camera-4.js │ │ │ │ │ │ ├── cardAndPhone-2.js │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ ├── cardError-4.js │ │ │ │ │ │ ├── cardErrorCB1-0.js │ │ │ │ │ │ ├── cardReloadFunds-3.js │ │ │ │ │ │ ├── cashExcitement-3.js │ │ │ │ │ │ ├── catHoldingWalletEmptyState-4.js │ │ │ │ │ │ ├── catLostSystemError-3.js │ │ │ │ │ │ ├── cbada-0.js │ │ │ │ │ │ ├── cbbtc-2.js │ │ │ │ │ │ ├── cbdoge-0.js │ │ │ │ │ │ ├── cbltc-0.js │ │ │ │ │ │ ├── cbmega-0.js │ │ │ │ │ │ ├── cbxrp-0.js │ │ │ │ │ │ ├── chickenFishSystemError-3.js │ │ │ │ │ │ ├── claimCryptoUsername-2.js │ │ │ │ │ │ ├── cloud-1.js │ │ │ │ │ │ ├── cloudBacking-3.js │ │ │ │ │ │ ├── coinCheckmark-4.js │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ ├── coinbaseCard-3.js │ │ │ │ │ │ ├── coinbaseCardIssue-3.js │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ ├── coinbaseCardSpend-3.js │ │ │ │ │ │ ├── coinbaseCardSpendCrypto-4.js │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ ├── coinbaseIsDown-5.js │ │ │ │ │ │ ├── coinbaseIsDownMobile-4.js │ │ │ │ │ │ ├── coinbaseOneAirdrop-1.js │ │ │ │ │ │ ├── coinbaseOneCardWarning-3.js │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-4.js │ │ │ │ │ │ ├── coinbaseOneDocWarning-3.js │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ ├── coinbaseOneInsufficientWallet-4.js │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ ├── coinbaseOnePercentOff-4.js │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-5.js │ │ │ │ │ │ ├── coinbaseOneProtectedCrypto-3.js │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ ├── coinbaseOneTokenRewards-3.js │ │ │ │ │ │ ├── coinbaseOneUSDCBig-1.js │ │ │ │ │ │ ├── coinbaseOneUSDCIncentives-4.js │ │ │ │ │ │ ├── coinbaseOneWaitlist-4.js │ │ │ │ │ │ ├── coinbaseOneWalletWarning-4.js │ │ │ │ │ │ ├── coinbaseOneWelcome-4.js │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ ├── coinbaseOneZeroPromotion-1.js │ │ │ │ │ │ ├── coinbaseRedesigned-3.js │ │ │ │ │ │ ├── coinbaseWalletToTrade-3.js │ │ │ │ │ │ ├── coinsInWallet-3.js │ │ │ │ │ │ ├── collectableNfts-6.js │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ ├── commerceAccounting-4.js │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ ├── communication-1.js │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-3.js │ │ │ │ │ │ ├── connectPeople-2.js │ │ │ │ │ │ ├── contactsListWarning-3.js │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ ├── cryptoApps-5.js │ │ │ │ │ │ ├── cryptoAppsWallet-5.js │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ ├── cryptoForBeginners-4.js │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ ├── cryptoPortfolioUsdc-0.js │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ ├── currencyPairs-5.js │ │ │ │ │ │ ├── dappsArts-4.js │ │ │ │ │ │ ├── dappsFinance-6.js │ │ │ │ │ │ ├── dappsGaming-4.js │ │ │ │ │ │ ├── dappsGeneral-2.js │ │ │ │ │ │ ├── dappsL2Support-5.js │ │ │ │ │ │ ├── dappsMusic-5.js │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ ├── decentralizedWebWeb3-5.js │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-4.js │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ ├── defiEnrollBoost-3.js │ │ │ │ │ │ ├── defiHow-4.js │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ ├── desktopAuthorized-4.js │ │ │ │ │ │ ├── desktopUnknown-3.js │ │ │ │ │ │ ├── developer-1.js │ │ │ │ │ │ ├── diamondHands-6.js │ │ │ │ │ │ ├── didDecentralizedIdentity-4.js │ │ │ │ │ │ ├── digitalCollectibles-5.js │ │ │ │ │ │ ├── digitalGold-1.js │ │ │ │ │ │ ├── directDepositPhone-5.js │ │ │ │ │ │ ├── discardAssets-5.js │ │ │ │ │ │ ├── docError-3.js │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ ├── downloadCoinbaseWallet-6.js │ │ │ │ │ │ ├── earn-3.js │ │ │ │ │ │ ├── earnCryptoCard-4.js │ │ │ │ │ │ ├── earnCryptoInterest-5.js │ │ │ │ │ │ ├── earnGlobe-1.js │ │ │ │ │ │ ├── earnGrowth-4.js │ │ │ │ │ │ ├── earnIdVerification-3.js │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ ├── earnMore-4.js │ │ │ │ │ │ ├── earnNuxHome-5.js │ │ │ │ │ │ ├── earnSuccess-5.js │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ ├── emailNotification-4.js │ │ │ │ │ │ ├── emptyCollection-5.js │ │ │ │ │ │ ├── emptyStateCheckBackLater-5.js │ │ │ │ │ │ ├── emptyStateNft404Page-4.js │ │ │ │ │ │ ├── emptyStateNftSoldOut-4.js │ │ │ │ │ │ ├── enableBiometrics-5.js │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ ├── engagement-2.js │ │ │ │ │ │ ├── ensProfilePic-2.js │ │ │ │ │ │ ├── error400-4.js │ │ │ │ │ │ ├── errorApp500-6.js │ │ │ │ │ │ ├── errorMoblie-1.js │ │ │ │ │ │ ├── errorRefresh-4.js │ │ │ │ │ │ ├── errorRefreshWeb-1.js │ │ │ │ │ │ ├── errorWeb-1.js │ │ │ │ │ │ ├── errorWeb400-4.js │ │ │ │ │ │ ├── errorWeb404-6.js │ │ │ │ │ │ ├── errorWeb404Mobile-1.js │ │ │ │ │ │ ├── errorWeb500-4.js │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ ├── ethStakingUpsell-5.js │ │ │ │ │ │ ├── ethereumToWallet-6.js │ │ │ │ │ │ ├── exchange-1.js │ │ │ │ │ │ ├── exchangeEmptyState-5.js │ │ │ │ │ │ ├── exploreDecentralizedApps-7.js │ │ │ │ │ │ ├── faceMatchReal-4.js │ │ │ │ │ │ ├── feeScale-4.js │ │ │ │ │ │ ├── fiat-1.js │ │ │ │ │ │ ├── fileYourCryptoTaxes-5.js │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-6.js │ │ │ │ │ │ ├── flipStable-0.js │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ ├── freeBtc-4.js │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ ├── futuresAndPerps-0.js │ │ │ │ │ │ ├── futuresExpire-0.js │ │ │ │ │ │ ├── futuresVsPerps-0.js │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ ├── gamer-1.js │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ ├── generative-2.js │ │ │ │ │ │ ├── genniusLaunch-0.js │ │ │ │ │ │ ├── getStartedInMinutes-4.js │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ ├── governanceMallet-1.js │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ ├── hiddenCollection-3.js │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ ├── iceCreamMeltingSystemError-6.js │ │ │ │ │ │ ├── idAngles-4.js │ │ │ │ │ │ ├── idBack-2.js │ │ │ │ │ │ ├── idCard-3.js │ │ │ │ │ │ ├── idFront-3.js │ │ │ │ │ │ ├── idIssue-3.js │ │ │ │ │ │ ├── idVerificationSecure-5.js │ │ │ │ │ │ ├── indexer-2.js │ │ │ │ │ │ ├── innovation-2.js │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ ├── instoAdd2Fa-0.js │ │ │ │ │ │ ├── instoAddBankAccount-0.js │ │ │ │ │ │ ├── instoCoinbaseOneProtectedCrypto-1.js │ │ │ │ │ │ ├── instoDocumentSuccess-1.js │ │ │ │ │ │ ├── instoEarnGlobe-0.js │ │ │ │ │ │ ├── instoEnableBiometrics-0.js │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ ├── instoEthStakingUpsell-0.js │ │ │ │ │ │ ├── instoGovernance-0.js │ │ │ │ │ │ ├── instoKeyGenerationComplete-1.js │ │ │ │ │ │ ├── instoKeyGenerationPending-0.js │ │ │ │ │ │ ├── instoOnChain-2.js │ │ │ │ │ │ ├── instoOpenEmail-1.js │ │ │ │ │ │ ├── instoPhoneUnknown-0.js │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ ├── instoPrivateKey-1.js │ │ │ │ │ │ ├── instoRequestSent-1.js │ │ │ │ │ │ ├── instoSecurityKeyAuth-0.js │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ ├── instoStakingMissedReturns-1.js │ │ │ │ │ │ ├── instoWallet-0.js │ │ │ │ │ │ ├── instoWalletSecurity-0.js │ │ │ │ │ │ ├── instoWeb3MobileSetupStart-0.js │ │ │ │ │ │ ├── insufficientBalance-5.js │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ ├── invest-3.js │ │ │ │ │ │ ├── invite-4.js │ │ │ │ │ │ ├── japanVerifyId-3.js │ │ │ │ │ │ ├── keyGeneration-6.js │ │ │ │ │ │ ├── layerOne-2.js │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ ├── layerTwo-2.js │ │ │ │ │ │ ├── layeredNetworks-5.js │ │ │ │ │ │ ├── ledgerAccess-4.js │ │ │ │ │ │ ├── ledgerPlugin-4.js │ │ │ │ │ │ ├── lend-1.js │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ ├── lightningNetwork-1.js │ │ │ │ │ │ ├── lightningNetworkInvoice-2.js │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ ├── lightningNetworkTransfer-1.js │ │ │ │ │ │ ├── limitOrders-5.js │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ ├── liquidationBufferRedClose-1.js │ │ │ │ │ │ ├── liquidationBufferYellow-0.js │ │ │ │ │ │ ├── lowCost-2.js │ │ │ │ │ │ ├── margin-3.js │ │ │ │ │ │ ├── marginWarning-4.js │ │ │ │ │ │ ├── mic-4.js │ │ │ │ │ │ ├── mining-4.js │ │ │ │ │ │ ├── minting-2.js │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ ├── moreGains-0.js │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-5.js │ │ │ │ │ │ ├── multicoinSupport-4.js │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ ├── multiplePortfolios-1.js │ │ │ │ │ │ ├── myNameIsSatoshi-3.js │ │ │ │ │ │ ├── namePortfolio-1.js │ │ │ │ │ │ ├── networkWarning-5.js │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ ├── noFeesMotion-1.js │ │ │ │ │ │ ├── noLongAddresses-2.js │ │ │ │ │ │ ├── notificationsAlt-5.js │ │ │ │ │ │ ├── notificationsAndUpdates-3.js │ │ │ │ │ │ ├── offChain-1.js │ │ │ │ │ │ ├── oilAndGold-2.js │ │ │ │ │ │ ├── onChain-2.js │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ ├── openEmail-4.js │ │ │ │ │ │ ├── optInPushNotificationsEmail-3.js │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ ├── oracle-1.js │ │ │ │ │ │ ├── orderBooks-3.js │ │ │ │ │ │ ├── outage-1.js │ │ │ │ │ │ ├── p2pGifting-4.js │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ ├── paperHands-3.js │ │ │ │ │ │ ├── payUpFront-4.js │ │ │ │ │ │ ├── pending-5.js │ │ │ │ │ │ ├── performance-4.js │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ ├── phoneUnknown-3.js │ │ │ │ │ │ ├── platform-1.js │ │ │ │ │ │ ├── polling-3.js │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ ├── powerOfCrypto-6.js │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ ├── private-2.js │ │ │ │ │ │ ├── privateKey-1.js │ │ │ │ │ │ ├── processing-3.js │ │ │ │ │ │ ├── protocol-1.js │ │ │ │ │ │ ├── public-1.js │ │ │ │ │ │ ├── quest-2.js │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ ├── quickBuy-3.js │ │ │ │ │ │ ├── ratingsAndReviews-5.js │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ ├── realToUSDC-1.js │ │ │ │ │ │ ├── receiveGift-4.js │ │ │ │ │ │ ├── receivedCard-3.js │ │ │ │ │ │ ├── recommendInvest-6.js │ │ │ │ │ │ ├── recurringReward-4.js │ │ │ │ │ │ ├── referralsAvatars-6.js │ │ │ │ │ │ ├── referralsBitcoin-6.js │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ ├── referralsGenericCoin-1.js │ │ │ │ │ │ ├── referralsWalletPhones-7.js │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ ├── remittances-4.js │ │ │ │ │ │ ├── requestSent-5.js │ │ │ │ │ │ ├── restrictedCountry-7.js │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ ├── reviewInfo-4.js │ │ │ │ │ │ ├── rocket-4.js │ │ │ │ │ │ ├── rotatingRewards-7.js │ │ │ │ │ │ ├── routingAccount-4.js │ │ │ │ │ │ ├── scalable-1.js │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ ├── selectCorrectCrypto-4.js │ │ │ │ │ │ ├── selectReward-3.js │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ ├── selfCustodyCrypto-4.js │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ ├── sendCryptoFaster-3.js │ │ │ │ │ │ ├── sendToUsername-4.js │ │ │ │ │ │ ├── serverCatSystemError-3.js │ │ │ │ │ │ ├── settlement-1.js │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ ├── slippageTolerance-4.js │ │ │ │ │ │ ├── smartContract-2.js │ │ │ │ │ │ ├── spacedOutSystemError-5.js │ │ │ │ │ │ ├── squidEmptyState-5.js │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ ├── stablecoin-1.js │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ ├── stakingMissedReturns-3.js │ │ │ │ │ │ ├── stakingMissedReturnsUsdc-0.js │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ ├── stopLimitOrder-4.js │ │ │ │ │ │ ├── stopLimitOrderDown-5.js │ │ │ │ │ │ ├── storage-2.js │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ ├── success-4.js │ │ │ │ │ │ ├── supportAndMore-5.js │ │ │ │ │ │ ├── sustainable-1.js │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-4.js │ │ │ │ │ │ ├── taxesDetails-3.js │ │ │ │ │ │ ├── test-0.js │ │ │ │ │ │ ├── tools-1.js │ │ │ │ │ │ ├── tradeGeneral-3.js │ │ │ │ │ │ ├── tradeHistory-4.js │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ ├── tradingPerpetualsUsdc-0.js │ │ │ │ │ │ ├── tradingWithLeverage-0.js │ │ │ │ │ │ ├── transactionLimit-4.js │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ ├── twoIdVerify-3.js │ │ │ │ │ │ ├── unlockKey-3.js │ │ │ │ │ │ ├── usdAndUsdc-0.js │ │ │ │ │ │ ├── usdtToUSDC-2.js │ │ │ │ │ │ ├── verifyBankTransactions-4.js │ │ │ │ │ │ ├── verifyCardTransactions-4.js │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ ├── verifyIdDetails-3.js │ │ │ │ │ │ ├── verifyInfo-4.js │ │ │ │ │ │ ├── videoRequest-4.js │ │ │ │ │ │ ├── videoReview-4.js │ │ │ │ │ │ ├── videoUpload-4.js │ │ │ │ │ │ ├── vipBadge-1.js │ │ │ │ │ │ ├── vote-1.js │ │ │ │ │ │ ├── walletAsset-7.js │ │ │ │ │ │ ├── walletConfirmation-2.js │ │ │ │ │ │ ├── walletFlyEmptyState-4.js │ │ │ │ │ │ ├── walletLoading-3.js │ │ │ │ │ │ ├── walletNotifications-4.js │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ ├── walletUi-7.js │ │ │ │ │ │ ├── walletWarning-1.js │ │ │ │ │ │ ├── watchVideos-3.js │ │ │ │ │ │ ├── web3ActivityError-3.js │ │ │ │ │ │ ├── web3ActivitySigned-5.js │ │ │ │ │ │ ├── web3MobileSetupStart-4.js │ │ │ │ │ │ ├── web3MobileSetupSuccess-4.js │ │ │ │ │ │ ├── webRAT-3.js │ │ │ │ │ │ ├── whyNotBoth-4.js │ │ │ │ │ │ └── yourContacts-4.js │ │ │ │ │ └── types/ │ │ │ │ │ └── HeroSquareName.ts │ │ │ │ ├── pictogram/ │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── descriptionMap.ts │ │ │ │ │ │ ├── names.ts │ │ │ │ │ │ ├── svgEsmMap.ts │ │ │ │ │ │ ├── svgJsMap.ts │ │ │ │ │ │ └── versionMap.ts │ │ │ │ │ ├── svgJs/ │ │ │ │ │ │ ├── cjs/ │ │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ │ ├── 2fa-3.js │ │ │ │ │ │ │ │ ├── accountsNavigation-7.js │ │ │ │ │ │ │ │ ├── accreditedInvestor-1.js │ │ │ │ │ │ │ │ ├── add-3.js │ │ │ │ │ │ │ │ ├── addCard-3.js │ │ │ │ │ │ │ │ ├── addPayment-3.js │ │ │ │ │ │ │ │ ├── addPhone-3.js │ │ │ │ │ │ │ │ ├── addToWatchlist-3.js │ │ │ │ │ │ │ │ ├── addWallet-3.js │ │ │ │ │ │ │ │ ├── addressBook-3.js │ │ │ │ │ │ │ │ ├── advancedTradingDesktop-4.js │ │ │ │ │ │ │ │ ├── advancedTradingNavigation-6.js │ │ │ │ │ │ │ │ ├── advancedTradingRebates-3.js │ │ │ │ │ │ │ │ ├── agent-5.js │ │ │ │ │ │ │ │ ├── alerts-3.js │ │ │ │ │ │ │ │ ├── alertsCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── analyticsNavigation-5.js │ │ │ │ │ │ │ │ ├── apartOfDropsNft-3.js │ │ │ │ │ │ │ │ ├── applyForHigherLimits-3.js │ │ │ │ │ │ │ │ ├── apyInterest-5.js │ │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ │ ├── assetEncryption-5.js │ │ │ │ │ │ │ │ ├── assetHubNavigation-5.js │ │ │ │ │ │ │ │ ├── assetManagement-3.js │ │ │ │ │ │ │ │ ├── assetManagementNavigation-1.js │ │ │ │ │ │ │ │ ├── assetMeasurements-5.js │ │ │ │ │ │ │ │ ├── assetMovement-5.js │ │ │ │ │ │ │ │ ├── authenticationApp-3.js │ │ │ │ │ │ │ │ ├── authenticator-3.js │ │ │ │ │ │ │ │ ├── authenticatorAlt-3.js │ │ │ │ │ │ │ │ ├── authenticatorProgress-3.js │ │ │ │ │ │ │ │ ├── avatarAa-0.js │ │ │ │ │ │ │ │ ├── avatarAb-0.js │ │ │ │ │ │ │ │ ├── avatarAc-0.js │ │ │ │ │ │ │ │ ├── avatarAd-0.js │ │ │ │ │ │ │ │ ├── avatarAe-0.js │ │ │ │ │ │ │ │ ├── avatarAf-0.js │ │ │ │ │ │ │ │ ├── avatarAg-0.js │ │ │ │ │ │ │ │ ├── avatarAh-0.js │ │ │ │ │ │ │ │ ├── avatarAi-0.js │ │ │ │ │ │ │ │ ├── avatarAj-0.js │ │ │ │ │ │ │ │ ├── avatarBa-0.js │ │ │ │ │ │ │ │ ├── avatarBb-0.js │ │ │ │ │ │ │ │ ├── avatarBc-0.js │ │ │ │ │ │ │ │ ├── avatarBd-0.js │ │ │ │ │ │ │ │ ├── avatarBe-0.js │ │ │ │ │ │ │ │ ├── avatarBf-0.js │ │ │ │ │ │ │ │ ├── avatarBg-0.js │ │ │ │ │ │ │ │ ├── avatarBh-0.js │ │ │ │ │ │ │ │ ├── avatarBi-0.js │ │ │ │ │ │ │ │ ├── avatarBj-0.js │ │ │ │ │ │ │ │ ├── avatarCa-0.js │ │ │ │ │ │ │ │ ├── avatarCb-0.js │ │ │ │ │ │ │ │ ├── avatarCc-0.js │ │ │ │ │ │ │ │ ├── avatarCd-0.js │ │ │ │ │ │ │ │ ├── avatarCe-0.js │ │ │ │ │ │ │ │ ├── avatarCf-0.js │ │ │ │ │ │ │ │ ├── avatarCg-0.js │ │ │ │ │ │ │ │ ├── avatarCh-0.js │ │ │ │ │ │ │ │ ├── avatarCi-0.js │ │ │ │ │ │ │ │ ├── avatarCj-0.js │ │ │ │ │ │ │ │ ├── avatarDa-0.js │ │ │ │ │ │ │ │ ├── avatarDb-0.js │ │ │ │ │ │ │ │ ├── avatarDc-0.js │ │ │ │ │ │ │ │ ├── avatarDd-0.js │ │ │ │ │ │ │ │ ├── avatarDe-0.js │ │ │ │ │ │ │ │ ├── avatarDf-0.js │ │ │ │ │ │ │ │ ├── avatarDg-0.js │ │ │ │ │ │ │ │ ├── avatarDh-0.js │ │ │ │ │ │ │ │ ├── avatarDi-0.js │ │ │ │ │ │ │ │ ├── avatarDj-0.js │ │ │ │ │ │ │ │ ├── avatarEa-0.js │ │ │ │ │ │ │ │ ├── avatarEb-0.js │ │ │ │ │ │ │ │ ├── avatarEc-0.js │ │ │ │ │ │ │ │ ├── avatarEd-0.js │ │ │ │ │ │ │ │ ├── avatarEe-0.js │ │ │ │ │ │ │ │ ├── avatarEf-0.js │ │ │ │ │ │ │ │ ├── avatarEg-0.js │ │ │ │ │ │ │ │ ├── avatarEh-0.js │ │ │ │ │ │ │ │ ├── avatarEi-0.js │ │ │ │ │ │ │ │ ├── avatarEj-0.js │ │ │ │ │ │ │ │ ├── avatarFa-0.js │ │ │ │ │ │ │ │ ├── avatarFb-0.js │ │ │ │ │ │ │ │ ├── avatarFc-0.js │ │ │ │ │ │ │ │ ├── avatarFd-0.js │ │ │ │ │ │ │ │ ├── avatarFe-0.js │ │ │ │ │ │ │ │ ├── avatarFf-0.js │ │ │ │ │ │ │ │ ├── avatarFg-0.js │ │ │ │ │ │ │ │ ├── avatarFh-0.js │ │ │ │ │ │ │ │ ├── avatarFi-0.js │ │ │ │ │ │ │ │ ├── avatarFj-0.js │ │ │ │ │ │ │ │ ├── avatarGa-0.js │ │ │ │ │ │ │ │ ├── avatarGb-0.js │ │ │ │ │ │ │ │ ├── avatarGc-0.js │ │ │ │ │ │ │ │ ├── avatarGd-0.js │ │ │ │ │ │ │ │ ├── avatarGe-0.js │ │ │ │ │ │ │ │ ├── avatarGf-0.js │ │ │ │ │ │ │ │ ├── avatarGg-0.js │ │ │ │ │ │ │ │ ├── avatarGh-0.js │ │ │ │ │ │ │ │ ├── avatarGi-0.js │ │ │ │ │ │ │ │ ├── avatarGj-0.js │ │ │ │ │ │ │ │ ├── avatarHa-0.js │ │ │ │ │ │ │ │ ├── avatarHb-0.js │ │ │ │ │ │ │ │ ├── avatarHc-1.js │ │ │ │ │ │ │ │ ├── avatarHd-0.js │ │ │ │ │ │ │ │ ├── avatarHe-0.js │ │ │ │ │ │ │ │ ├── avatarHf-0.js │ │ │ │ │ │ │ │ ├── avatarHg-2.js │ │ │ │ │ │ │ │ ├── avatarHh-1.js │ │ │ │ │ │ │ │ ├── avatarHi-0.js │ │ │ │ │ │ │ │ ├── avatarHj-0.js │ │ │ │ │ │ │ │ ├── avatarIa-0.js │ │ │ │ │ │ │ │ ├── avatarIb-0.js │ │ │ │ │ │ │ │ ├── avatarIc-0.js │ │ │ │ │ │ │ │ ├── avatarId-0.js │ │ │ │ │ │ │ │ ├── avatarIe-0.js │ │ │ │ │ │ │ │ ├── avatarIf-0.js │ │ │ │ │ │ │ │ ├── avatarIg-0.js │ │ │ │ │ │ │ │ ├── avatarIh-0.js │ │ │ │ │ │ │ │ ├── avatarIi-0.js │ │ │ │ │ │ │ │ ├── avatarIj-0.js │ │ │ │ │ │ │ │ ├── avatarJa-0.js │ │ │ │ │ │ │ │ ├── avatarJb-0.js │ │ │ │ │ │ │ │ ├── avatarJc-0.js │ │ │ │ │ │ │ │ ├── avatarJd-0.js │ │ │ │ │ │ │ │ ├── avatarJe-0.js │ │ │ │ │ │ │ │ ├── avatarJf-0.js │ │ │ │ │ │ │ │ ├── avatarJg-0.js │ │ │ │ │ │ │ │ ├── avatarJh-0.js │ │ │ │ │ │ │ │ ├── avatarJi-0.js │ │ │ │ │ │ │ │ ├── avatarJj-0.js │ │ │ │ │ │ │ │ ├── barChart-2.js │ │ │ │ │ │ │ │ ├── baseAscend-1.js │ │ │ │ │ │ │ │ ├── baseCertificateStar-1.js │ │ │ │ │ │ │ │ ├── baseChartSmall-0.js │ │ │ │ │ │ │ │ ├── baseChatBubbleHeart-1.js │ │ │ │ │ │ │ │ ├── baseCheckSmall-1.js │ │ │ │ │ │ │ │ ├── baseCoinCryptoSmall-0.js │ │ │ │ │ │ │ │ ├── baseCoinNetworkSmall-0.js │ │ │ │ │ │ │ │ ├── baseCoinStack-0.js │ │ │ │ │ │ │ │ ├── baseCoinStar-1.js │ │ │ │ │ │ │ │ ├── baseComet-1.js │ │ │ │ │ │ │ │ ├── baseComputer-1.js │ │ │ │ │ │ │ │ ├── baseConfetti-1.js │ │ │ │ │ │ │ │ ├── baseConnectApps-0.js │ │ │ │ │ │ │ │ ├── baseConnectSmall-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ │ ├── baseDecentralizationSmall-1.js │ │ │ │ │ │ │ │ ├── baseDiamondSmall-0.js │ │ │ │ │ │ │ │ ├── baseDiamondTrophy-1.js │ │ │ │ │ │ │ │ ├── baseDoor-1.js │ │ │ │ │ │ │ │ ├── baseEarnedBadge-0.js │ │ │ │ │ │ │ │ ├── baseEmptySmall-0.js │ │ │ │ │ │ │ │ ├── baseErrorButterflySmall-0.js │ │ │ │ │ │ │ │ ├── baseErrorSmall-0.js │ │ │ │ │ │ │ │ ├── baseExchange-1.js │ │ │ │ │ │ │ │ ├── baseFire-0.js │ │ │ │ │ │ │ │ ├── baseGem-1.js │ │ │ │ │ │ │ │ ├── baseGlobe-1.js │ │ │ │ │ │ │ │ ├── baseHandStar-1.js │ │ │ │ │ │ │ │ ├── baseLayout-0.js │ │ │ │ │ │ │ │ ├── baseLightningbolt-1.js │ │ │ │ │ │ │ │ ├── baseLoadingSmall-1.js │ │ │ │ │ │ │ │ ├── baseLocationSmall-1.js │ │ │ │ │ │ │ │ ├── baseLogo-4.js │ │ │ │ │ │ │ │ ├── baseLogoNavigation-6.js │ │ │ │ │ │ │ │ ├── baseMedal-0.js │ │ │ │ │ │ │ │ ├── baseMessaging-0.js │ │ │ │ │ │ │ │ ├── baseMintNftSmall-1.js │ │ │ │ │ │ │ │ ├── baseNetworkSmall-0.js │ │ │ │ │ │ │ │ ├── baseNftSmall-0.js │ │ │ │ │ │ │ │ ├── basePaycoinSmall-0.js │ │ │ │ │ │ │ │ ├── basePeopleSmall-0.js │ │ │ │ │ │ │ │ ├── basePiechartSmall-1.js │ │ │ │ │ │ │ │ ├── basePlant-0.js │ │ │ │ │ │ │ │ ├── basePower-1.js │ │ │ │ │ │ │ │ ├── baseRibbon-1.js │ │ │ │ │ │ │ │ ├── baseRocket-1.js │ │ │ │ │ │ │ │ ├── baseRockon-1.js │ │ │ │ │ │ │ │ ├── baseSaved-1.js │ │ │ │ │ │ │ │ ├── baseSecuritySmall-0.js │ │ │ │ │ │ │ │ ├── baseSendSmall-1.js │ │ │ │ │ │ │ │ ├── baseSignin-0.js │ │ │ │ │ │ │ │ ├── baseSmile-1.js │ │ │ │ │ │ │ │ ├── baseStack-1.js │ │ │ │ │ │ │ │ ├── baseStar-1.js │ │ │ │ │ │ │ │ ├── baseTargetSmall-1.js │ │ │ │ │ │ │ │ ├── baseTile-1.js │ │ │ │ │ │ │ │ ├── bigBtcSend-0.js │ │ │ │ │ │ │ │ ├── bitcoin-1.js │ │ │ │ │ │ │ │ ├── bitcoinPizza-3.js │ │ │ │ │ │ │ │ ├── bitcoinRewards-2.js │ │ │ │ │ │ │ │ ├── bitcoinWhitePaper-2.js │ │ │ │ │ │ │ │ ├── blockchainConnection-4.js │ │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ │ ├── borrowCoins-3.js │ │ │ │ │ │ │ │ ├── borrowNavigation-5.js │ │ │ │ │ │ │ │ ├── borrowingLending-3.js │ │ │ │ │ │ │ │ ├── browser-3.js │ │ │ │ │ │ │ │ ├── browserMultiPlatform-7.js │ │ │ │ │ │ │ │ ├── browserTransaction-3.js │ │ │ │ │ │ │ │ ├── btcOneHundred-0.js │ │ │ │ │ │ │ │ ├── bundle-3.js │ │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ │ ├── calculator-1.js │ │ │ │ │ │ │ │ ├── calendar-3.js │ │ │ │ │ │ │ │ ├── calendarCaution-4.js │ │ │ │ │ │ │ │ ├── calendarHighlight-0.js │ │ │ │ │ │ │ │ ├── candleSticksGraph-4.js │ │ │ │ │ │ │ │ ├── cardBlocked-4.js │ │ │ │ │ │ │ │ ├── cardDeclined-3.js │ │ │ │ │ │ │ │ ├── cardNavigation-6.js │ │ │ │ │ │ │ │ ├── cardSuccess-4.js │ │ │ │ │ │ │ │ ├── cb1BankTransfers-2.js │ │ │ │ │ │ │ │ ├── chart-2.js │ │ │ │ │ │ │ │ ├── chat-4.js │ │ │ │ │ │ │ │ ├── checkmark-3.js │ │ │ │ │ │ │ │ ├── clock-3.js │ │ │ │ │ │ │ │ ├── cloudNavigation-6.js │ │ │ │ │ │ │ │ ├── coinFocus-3.js │ │ │ │ │ │ │ │ ├── coinShare-3.js │ │ │ │ │ │ │ │ ├── coinbaseLogoAdvancedBrand-0.js │ │ │ │ │ │ │ │ ├── coinbaseLogoNavigation-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneAuthenticator-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneChat-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarnCoins-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarnCoinsLogo-0.js │ │ │ │ │ │ │ │ ├── coinbaseOneFiat-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductIcon-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ │ ├── coinbaseOneRefreshed-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneShield-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneTrade-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneTrusted-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneUnlimitedRewards-0.js │ │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ │ ├── coinbaseWalletApp-6.js │ │ │ │ │ │ │ │ ├── coldStorageCheck-3.js │ │ │ │ │ │ │ │ ├── collectionOfAssets-3.js │ │ │ │ │ │ │ │ ├── commerceCheckout-4.js │ │ │ │ │ │ │ │ ├── commerceInvoice-3.js │ │ │ │ │ │ │ │ ├── commerceNavigation-6.js │ │ │ │ │ │ │ │ ├── commodities-0.js │ │ │ │ │ │ │ │ ├── completeQuiz-5.js │ │ │ │ │ │ │ │ ├── complianceNavigation-1.js │ │ │ │ │ │ │ │ ├── congratulations-4.js │ │ │ │ │ │ │ │ ├── connectNavigation-5.js │ │ │ │ │ │ │ │ ├── contactInfo-3.js │ │ │ │ │ │ │ │ ├── controlWalletStorage-4.js │ │ │ │ │ │ │ │ ├── creative-3.js │ │ │ │ │ │ │ │ ├── creditCard-3.js │ │ │ │ │ │ │ │ ├── crypto101-4.js │ │ │ │ │ │ │ │ ├── cryptoCard-3.js │ │ │ │ │ │ │ │ ├── cryptoCoins-0.js │ │ │ │ │ │ │ │ ├── cryptoFolder-3.js │ │ │ │ │ │ │ │ ├── crystalBallInsight-0.js │ │ │ │ │ │ │ │ ├── custodialJourney-5.js │ │ │ │ │ │ │ │ ├── custodyNavigation-5.js │ │ │ │ │ │ │ │ ├── dataMarketplaceNavigation-6.js │ │ │ │ │ │ │ │ ├── decentralizationEverything-5.js │ │ │ │ │ │ │ │ ├── decentralizedExchange-5.js │ │ │ │ │ │ │ │ ├── decentralizedIdentity-3.js │ │ │ │ │ │ │ │ ├── decentralizedWeb3-5.js │ │ │ │ │ │ │ │ ├── defiEarnMoment-3.js │ │ │ │ │ │ │ │ ├── delegate-3.js │ │ │ │ │ │ │ │ ├── delegateNavigation-5.js │ │ │ │ │ │ │ │ ├── derivativesNavigation-6.js │ │ │ │ │ │ │ │ ├── derivativesProduct-2.js │ │ │ │ │ │ │ │ ├── developerPlatformNavigation-2.js │ │ │ │ │ │ │ │ ├── developerSDKNavigation-2.js │ │ │ │ │ │ │ │ ├── directDepositNavigation-6.js │ │ │ │ │ │ │ │ ├── dollarShowcase-4.js │ │ │ │ │ │ │ │ ├── done-4.js │ │ │ │ │ │ │ │ ├── download-1.js │ │ │ │ │ │ │ │ ├── driversLicense-3.js │ │ │ │ │ │ │ │ ├── driversLicenseWheel-3.js │ │ │ │ │ │ │ │ ├── earnCoins-3.js │ │ │ │ │ │ │ │ ├── earnGraph-5.js │ │ │ │ │ │ │ │ ├── earnNavigation-7.js │ │ │ │ │ │ │ │ ├── easyToUse-3.js │ │ │ │ │ │ │ │ ├── economyGlobal-3.js │ │ │ │ │ │ │ │ ├── email-7.js │ │ │ │ │ │ │ │ ├── emailAndMessages-3.js │ │ │ │ │ │ │ │ ├── enableVoting-3.js │ │ │ │ │ │ │ │ ├── envelope-3.js │ │ │ │ │ │ │ │ ├── error-4.js │ │ │ │ │ │ │ │ ├── ethRewards-2.js │ │ │ │ │ │ │ │ ├── ethStaking-3.js │ │ │ │ │ │ │ │ ├── ethStakingChart-2.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-1.js │ │ │ │ │ │ │ │ ├── ethToken-1.js │ │ │ │ │ │ │ │ ├── ethereumFocus-5.js │ │ │ │ │ │ │ │ ├── exchangeNavigation-6.js │ │ │ │ │ │ │ │ ├── explore-4.js │ │ │ │ │ │ │ │ ├── fast-3.js │ │ │ │ │ │ │ │ ├── faucetNavigation-6.js │ │ │ │ │ │ │ │ ├── feesRestriction-5.js │ │ │ │ │ │ │ │ ├── fiat-4.js │ │ │ │ │ │ │ │ ├── finance-3.js │ │ │ │ │ │ │ │ ├── findYourSelection-3.js │ │ │ │ │ │ │ │ ├── formDownload-2.js │ │ │ │ │ │ │ │ ├── futures-4.js │ │ │ │ │ │ │ │ ├── futuresCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── gasFees-5.js │ │ │ │ │ │ │ │ ├── gem-3.js │ │ │ │ │ │ │ │ ├── genericCountryIDCard-3.js │ │ │ │ │ │ │ │ ├── getStarted-4.js │ │ │ │ │ │ │ │ ├── giftbox-5.js │ │ │ │ │ │ │ │ ├── globalConnections-5.js │ │ │ │ │ │ │ │ ├── globalPayments-5.js │ │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ │ ├── googleAuthenticator-3.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── hardwareWallet-5.js │ │ │ │ │ │ │ │ ├── helpCenterNavigation-5.js │ │ │ │ │ │ │ │ ├── higherLimits-3.js │ │ │ │ │ │ │ │ ├── holdingCoin-3.js │ │ │ │ │ │ │ │ ├── idBlock-0.js │ │ │ │ │ │ │ │ ├── idError-0.js │ │ │ │ │ │ │ │ ├── idVerification-4.js │ │ │ │ │ │ │ │ ├── identityCard-3.js │ │ │ │ │ │ │ │ ├── increaseLimits-3.js │ │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ │ ├── institutionalNavigation-6.js │ │ │ │ │ │ │ │ ├── institutions-3.js │ │ │ │ │ │ │ │ ├── instoAccount-0.js │ │ │ │ │ │ │ │ ├── instoAddressBook-0.js │ │ │ │ │ │ │ │ ├── instoAdvancedTradingRebates-0.js │ │ │ │ │ │ │ │ ├── instoApyInterest-2.js │ │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-0.js │ │ │ │ │ │ │ │ ├── instoBorrowCoins-0.js │ │ │ │ │ │ │ │ ├── instoBorrowingLending-0.js │ │ │ │ │ │ │ │ ├── instoCoinFocus-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneShield-0.js │ │ │ │ │ │ │ │ ├── instoCrypto101-0.js │ │ │ │ │ │ │ │ ├── instoDecentralizationEverything-0.js │ │ │ │ │ │ │ │ ├── instoDecentralizedExchange-1.js │ │ │ │ │ │ │ │ ├── instoDecentralizedWeb3-1.js │ │ │ │ │ │ │ │ ├── instoDelegate-0.js │ │ │ │ │ │ │ │ ├── instoEarnCoins-0.js │ │ │ │ │ │ │ │ ├── instoEarnGraph-0.js │ │ │ │ │ │ │ │ ├── instoEasyToUse-0.js │ │ │ │ │ │ │ │ ├── instoEth-0.js │ │ │ │ │ │ │ │ ├── instoEthRewards-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingChart-0.js │ │ │ │ │ │ │ │ ├── instoFiat-0.js │ │ │ │ │ │ │ │ ├── instoGem-0.js │ │ │ │ │ │ │ │ ├── instoGlobalConnections-0.js │ │ │ │ │ │ │ │ ├── instoKey-1.js │ │ │ │ │ │ │ │ ├── instoMonitoringPerformance-0.js │ │ │ │ │ │ │ │ ├── instoNftLibrary-0.js │ │ │ │ │ │ │ │ ├── instoPasswordWalletLocked-0.js │ │ │ │ │ │ │ │ ├── instoRestaking-2.js │ │ │ │ │ │ │ │ ├── instoRiskStaking-0.js │ │ │ │ │ │ │ │ ├── instoSecuredAssets-0.js │ │ │ │ │ │ │ │ ├── instoSelfCustodyWallet-0.js │ │ │ │ │ │ │ │ ├── instoStakingGraph-0.js │ │ │ │ │ │ │ │ ├── instoTrading-0.js │ │ │ │ │ │ │ │ ├── instoWalletWarning-0.js │ │ │ │ │ │ │ │ ├── instoprimeMobileApp-0.js │ │ │ │ │ │ │ │ ├── internationalExchangeNavigation-1.js │ │ │ │ │ │ │ │ ├── internet-3.js │ │ │ │ │ │ │ │ ├── investGraph-4.js │ │ │ │ │ │ │ │ ├── key-3.js │ │ │ │ │ │ │ │ ├── laptop-3.js │ │ │ │ │ │ │ │ ├── laptopCharts-4.js │ │ │ │ │ │ │ │ ├── laptopVideo-3.js │ │ │ │ │ │ │ │ ├── layerNetworks-5.js │ │ │ │ │ │ │ │ ├── leadGraph-0.js │ │ │ │ │ │ │ │ ├── learn-4.js │ │ │ │ │ │ │ │ ├── learningRewardsNavigation-6.js │ │ │ │ │ │ │ │ ├── learningRewardsProduct-1.js │ │ │ │ │ │ │ │ ├── lightbulbLearn-5.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── linkYourAccount-6.js │ │ │ │ │ │ │ │ ├── listingFees-5.js │ │ │ │ │ │ │ │ ├── locationUsa-4.js │ │ │ │ │ │ │ │ ├── lock-3.js │ │ │ │ │ │ │ │ ├── loop-0.js │ │ │ │ │ │ │ │ ├── lowFees-4.js │ │ │ │ │ │ │ │ ├── manageWeb3SignersAcct-1.js │ │ │ │ │ │ │ │ ├── miningCoins-3.js │ │ │ │ │ │ │ │ ├── mintedNft-2.js │ │ │ │ │ │ │ │ ├── mobileCharts-3.js │ │ │ │ │ │ │ │ ├── mobileError-4.js │ │ │ │ │ │ │ │ ├── mobileNotifcation-3.js │ │ │ │ │ │ │ │ ├── mobileSuccess-4.js │ │ │ │ │ │ │ │ ├── mobileWarning-3.js │ │ │ │ │ │ │ │ ├── moneyCrypto-0.js │ │ │ │ │ │ │ │ ├── moneyEarn-3.js │ │ │ │ │ │ │ │ ├── moneySwift-4.js │ │ │ │ │ │ │ │ ├── monitoringPerformance-5.js │ │ │ │ │ │ │ │ ├── moreThanBitcoin-3.js │ │ │ │ │ │ │ │ ├── multiAccountsAndCards-4.js │ │ │ │ │ │ │ │ ├── multiPlatform-3.js │ │ │ │ │ │ │ │ ├── multipleAssets-3.js │ │ │ │ │ │ │ │ ├── musicAndSounds-3.js │ │ │ │ │ │ │ │ ├── myNumberCard-4.js │ │ │ │ │ │ │ │ ├── newUserChecklistBuyCrypto-3.js │ │ │ │ │ │ │ │ ├── newUserChecklistCompleteAccount-3.js │ │ │ │ │ │ │ │ ├── newUserChecklistVerifyId-3.js │ │ │ │ │ │ │ │ ├── nftAvatar-4.js │ │ │ │ │ │ │ │ ├── nftLibrary-3.js │ │ │ │ │ │ │ │ ├── nftNavigation-5.js │ │ │ │ │ │ │ │ ├── noAnnualFee-4.js │ │ │ │ │ │ │ │ ├── noNftFound-3.js │ │ │ │ │ │ │ │ ├── noVisibility-3.js │ │ │ │ │ │ │ │ ├── noWiFi-3.js │ │ │ │ │ │ │ │ ├── notificationHubAnalysis-5.js │ │ │ │ │ │ │ │ ├── notificationHubNews-7.js │ │ │ │ │ │ │ │ ├── notificationHubPortfolio-4.js │ │ │ │ │ │ │ │ ├── notificationHubSocial-2.js │ │ │ │ │ │ │ │ ├── notifications-4.js │ │ │ │ │ │ │ │ ├── orders-2.js │ │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ │ ├── partialCoins-3.js │ │ │ │ │ │ │ │ ├── participateNavigation-6.js │ │ │ │ │ │ │ │ ├── passport-2.js │ │ │ │ │ │ │ │ ├── passwordWalletLocked-3.js │ │ │ │ │ │ │ │ ├── payNavigation-6.js │ │ │ │ │ │ │ │ ├── paypal-3.js │ │ │ │ │ │ │ │ ├── peerToPeer-2.js │ │ │ │ │ │ │ │ ├── phone-3.js │ │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ │ ├── pieChartData-0.js │ │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ │ ├── pizza-3.js │ │ │ │ │ │ │ │ ├── planet-5.js │ │ │ │ │ │ │ │ ├── pluginBrowser-4.js │ │ │ │ │ │ │ │ ├── podium-0.js │ │ │ │ │ │ │ │ ├── positiveReviews-3.js │ │ │ │ │ │ │ │ ├── predictionMarkets-3.js │ │ │ │ │ │ │ │ ├── premiumInvestor-2.js │ │ │ │ │ │ │ │ ├── priceTracking-3.js │ │ │ │ │ │ │ │ ├── primeMobileApp-3.js │ │ │ │ │ │ │ │ ├── primeNavigation-6.js │ │ │ │ │ │ │ │ ├── privateClientNavigation-5.js │ │ │ │ │ │ │ │ ├── proNavigation-5.js │ │ │ │ │ │ │ │ ├── protectionPlan-3.js │ │ │ │ │ │ │ │ ├── queryTransactNavigation-5.js │ │ │ │ │ │ │ │ ├── receipt-3.js │ │ │ │ │ │ │ │ ├── recurringPurchases-2.js │ │ │ │ │ │ │ │ ├── restaking-3.js │ │ │ │ │ │ │ │ ├── reviewAndAdd-3.js │ │ │ │ │ │ │ │ ├── rewardsNavigation-5.js │ │ │ │ │ │ │ │ ├── riskStaking-3.js │ │ │ │ │ │ │ │ ├── robot-0.js │ │ │ │ │ │ │ │ ├── rosettaNavigation-4.js │ │ │ │ │ │ │ │ ├── safe-3.js │ │ │ │ │ │ │ │ ├── securedAssets-5.js │ │ │ │ │ │ │ │ ├── security-3.js │ │ │ │ │ │ │ │ ├── securityCoinShield-5.js │ │ │ │ │ │ │ │ ├── securityKey-3.js │ │ │ │ │ │ │ │ ├── seedPhrase-3.js │ │ │ │ │ │ │ │ ├── selectAddNft-2.js │ │ │ │ │ │ │ │ ├── selfCustodyWallet-5.js │ │ │ │ │ │ │ │ ├── selfServe-3.js │ │ │ │ │ │ │ │ ├── sellSendAnytime-3.js │ │ │ │ │ │ │ │ ├── sendPaymentToOthers-4.js │ │ │ │ │ │ │ │ ├── settings-3.js │ │ │ │ │ │ │ │ ├── settled-3.js │ │ │ │ │ │ │ │ ├── shield-4.js │ │ │ │ │ │ │ │ ├── sideChainSide-3.js │ │ │ │ │ │ │ │ ├── signInNavigation-5.js │ │ │ │ │ │ │ │ ├── smsAuthenticate-3.js │ │ │ │ │ │ │ │ ├── sparkleCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── ssnCard-3.js │ │ │ │ │ │ │ │ ├── stableCoinMetaphor-4.js │ │ │ │ │ │ │ │ ├── stacking-3.js │ │ │ │ │ │ │ │ ├── stakingGraph-5.js │ │ │ │ │ │ │ │ ├── standWithCryptoLogoNavigation-3.js │ │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ │ ├── strongInfo-3.js │ │ │ │ │ │ │ │ ├── strongWarning-4.js │ │ │ │ │ │ │ │ ├── successPhone-3.js │ │ │ │ │ │ │ │ ├── support-5.js │ │ │ │ │ │ │ │ ├── supportChat-5.js │ │ │ │ │ │ │ │ ├── takeQuiz-3.js │ │ │ │ │ │ │ │ ├── target-4.js │ │ │ │ │ │ │ │ ├── taxBeta-3.js │ │ │ │ │ │ │ │ ├── taxCenterNavigation-7.js │ │ │ │ │ │ │ │ ├── taxSeason-3.js │ │ │ │ │ │ │ │ ├── taxes-4.js │ │ │ │ │ │ │ │ ├── taxesArrangement-3.js │ │ │ │ │ │ │ │ ├── timingCheck-4.js │ │ │ │ │ │ │ │ ├── tokenBaskets-4.js │ │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ │ ├── trading-2.js │ │ │ │ │ │ │ │ ├── transferSend-3.js │ │ │ │ │ │ │ │ ├── transistor-2.js │ │ │ │ │ │ │ │ ├── trendingAssets-4.js │ │ │ │ │ │ │ │ ├── trusted-5.js │ │ │ │ │ │ │ │ ├── tryAgainLater-3.js │ │ │ │ │ │ │ │ ├── twoBonus-0.js │ │ │ │ │ │ │ │ ├── typeScript-3.js │ │ │ │ │ │ │ │ ├── ubiKey-3.js │ │ │ │ │ │ │ │ ├── usaProduct-3.js │ │ │ │ │ │ │ │ ├── usdcEarn-1.js │ │ │ │ │ │ │ │ ├── usdcInterest-2.js │ │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ │ ├── usdcLogo-1.js │ │ │ │ │ │ │ │ ├── usdcRewards-1.js │ │ │ │ │ │ │ │ ├── usdcRewardsRibbon-1.js │ │ │ │ │ │ │ │ ├── usdcToken-1.js │ │ │ │ │ │ │ │ ├── venturesNavigation-4.js │ │ │ │ │ │ │ │ ├── verifiedPools-2.js │ │ │ │ │ │ │ │ ├── videoCalendar-4.js │ │ │ │ │ │ │ │ ├── videoContent-5.js │ │ │ │ │ │ │ │ ├── waiting-3.js │ │ │ │ │ │ │ │ ├── waitingForConsensus-3.js │ │ │ │ │ │ │ │ ├── wallet-3.js │ │ │ │ │ │ │ │ ├── walletAsServiceNavigation-6.js │ │ │ │ │ │ │ │ ├── walletDeposit-3.js │ │ │ │ │ │ │ │ ├── walletError-5.js │ │ │ │ │ │ │ │ ├── walletExchange-3.js │ │ │ │ │ │ │ │ ├── walletLinkNavigation-4.js │ │ │ │ │ │ │ │ ├── walletLogoNavigation-6.js │ │ │ │ │ │ │ │ ├── walletNavigation-6.js │ │ │ │ │ │ │ │ ├── walletPassword-4.js │ │ │ │ │ │ │ │ ├── walletSuccess-5.js │ │ │ │ │ │ │ │ ├── walletWarning-4.js │ │ │ │ │ │ │ │ ├── warning-4.js │ │ │ │ │ │ │ │ ├── winBTC-3.js │ │ │ │ │ │ │ │ ├── worldwide-3.js │ │ │ │ │ │ │ │ └── wrapEth-4.js │ │ │ │ │ │ │ ├── light/ │ │ │ │ │ │ │ │ ├── 2fa-3.js │ │ │ │ │ │ │ │ ├── accountsNavigation-7.js │ │ │ │ │ │ │ │ ├── accreditedInvestor-1.js │ │ │ │ │ │ │ │ ├── add-3.js │ │ │ │ │ │ │ │ ├── addCard-3.js │ │ │ │ │ │ │ │ ├── addPayment-3.js │ │ │ │ │ │ │ │ ├── addPhone-3.js │ │ │ │ │ │ │ │ ├── addToWatchlist-3.js │ │ │ │ │ │ │ │ ├── addWallet-3.js │ │ │ │ │ │ │ │ ├── addressBook-3.js │ │ │ │ │ │ │ │ ├── advancedTradingDesktop-4.js │ │ │ │ │ │ │ │ ├── advancedTradingNavigation-6.js │ │ │ │ │ │ │ │ ├── advancedTradingRebates-3.js │ │ │ │ │ │ │ │ ├── agent-5.js │ │ │ │ │ │ │ │ ├── alerts-3.js │ │ │ │ │ │ │ │ ├── alertsCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── analyticsNavigation-5.js │ │ │ │ │ │ │ │ ├── apartOfDropsNft-3.js │ │ │ │ │ │ │ │ ├── applyForHigherLimits-3.js │ │ │ │ │ │ │ │ ├── apyInterest-5.js │ │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ │ ├── assetEncryption-5.js │ │ │ │ │ │ │ │ ├── assetHubNavigation-5.js │ │ │ │ │ │ │ │ ├── assetManagement-3.js │ │ │ │ │ │ │ │ ├── assetManagementNavigation-1.js │ │ │ │ │ │ │ │ ├── assetMeasurements-5.js │ │ │ │ │ │ │ │ ├── assetMovement-5.js │ │ │ │ │ │ │ │ ├── authenticationApp-3.js │ │ │ │ │ │ │ │ ├── authenticator-3.js │ │ │ │ │ │ │ │ ├── authenticatorAlt-3.js │ │ │ │ │ │ │ │ ├── authenticatorProgress-3.js │ │ │ │ │ │ │ │ ├── avatarAa-0.js │ │ │ │ │ │ │ │ ├── avatarAb-0.js │ │ │ │ │ │ │ │ ├── avatarAc-0.js │ │ │ │ │ │ │ │ ├── avatarAd-0.js │ │ │ │ │ │ │ │ ├── avatarAe-0.js │ │ │ │ │ │ │ │ ├── avatarAf-0.js │ │ │ │ │ │ │ │ ├── avatarAg-0.js │ │ │ │ │ │ │ │ ├── avatarAh-0.js │ │ │ │ │ │ │ │ ├── avatarAi-0.js │ │ │ │ │ │ │ │ ├── avatarAj-0.js │ │ │ │ │ │ │ │ ├── avatarBa-0.js │ │ │ │ │ │ │ │ ├── avatarBb-0.js │ │ │ │ │ │ │ │ ├── avatarBc-0.js │ │ │ │ │ │ │ │ ├── avatarBd-0.js │ │ │ │ │ │ │ │ ├── avatarBe-0.js │ │ │ │ │ │ │ │ ├── avatarBf-0.js │ │ │ │ │ │ │ │ ├── avatarBg-0.js │ │ │ │ │ │ │ │ ├── avatarBh-0.js │ │ │ │ │ │ │ │ ├── avatarBi-0.js │ │ │ │ │ │ │ │ ├── avatarBj-0.js │ │ │ │ │ │ │ │ ├── avatarCa-0.js │ │ │ │ │ │ │ │ ├── avatarCb-0.js │ │ │ │ │ │ │ │ ├── avatarCc-0.js │ │ │ │ │ │ │ │ ├── avatarCd-0.js │ │ │ │ │ │ │ │ ├── avatarCe-0.js │ │ │ │ │ │ │ │ ├── avatarCf-0.js │ │ │ │ │ │ │ │ ├── avatarCg-0.js │ │ │ │ │ │ │ │ ├── avatarCh-0.js │ │ │ │ │ │ │ │ ├── avatarCi-0.js │ │ │ │ │ │ │ │ ├── avatarCj-0.js │ │ │ │ │ │ │ │ ├── avatarDa-0.js │ │ │ │ │ │ │ │ ├── avatarDb-0.js │ │ │ │ │ │ │ │ ├── avatarDc-0.js │ │ │ │ │ │ │ │ ├── avatarDd-0.js │ │ │ │ │ │ │ │ ├── avatarDe-0.js │ │ │ │ │ │ │ │ ├── avatarDf-0.js │ │ │ │ │ │ │ │ ├── avatarDg-0.js │ │ │ │ │ │ │ │ ├── avatarDh-0.js │ │ │ │ │ │ │ │ ├── avatarDi-0.js │ │ │ │ │ │ │ │ ├── avatarDj-0.js │ │ │ │ │ │ │ │ ├── avatarEa-0.js │ │ │ │ │ │ │ │ ├── avatarEb-0.js │ │ │ │ │ │ │ │ ├── avatarEc-0.js │ │ │ │ │ │ │ │ ├── avatarEd-0.js │ │ │ │ │ │ │ │ ├── avatarEe-0.js │ │ │ │ │ │ │ │ ├── avatarEf-0.js │ │ │ │ │ │ │ │ ├── avatarEg-0.js │ │ │ │ │ │ │ │ ├── avatarEh-0.js │ │ │ │ │ │ │ │ ├── avatarEi-0.js │ │ │ │ │ │ │ │ ├── avatarEj-0.js │ │ │ │ │ │ │ │ ├── avatarFa-0.js │ │ │ │ │ │ │ │ ├── avatarFb-0.js │ │ │ │ │ │ │ │ ├── avatarFc-0.js │ │ │ │ │ │ │ │ ├── avatarFd-0.js │ │ │ │ │ │ │ │ ├── avatarFe-0.js │ │ │ │ │ │ │ │ ├── avatarFf-0.js │ │ │ │ │ │ │ │ ├── avatarFg-0.js │ │ │ │ │ │ │ │ ├── avatarFh-0.js │ │ │ │ │ │ │ │ ├── avatarFi-0.js │ │ │ │ │ │ │ │ ├── avatarFj-0.js │ │ │ │ │ │ │ │ ├── avatarGa-0.js │ │ │ │ │ │ │ │ ├── avatarGb-0.js │ │ │ │ │ │ │ │ ├── avatarGc-0.js │ │ │ │ │ │ │ │ ├── avatarGd-0.js │ │ │ │ │ │ │ │ ├── avatarGe-0.js │ │ │ │ │ │ │ │ ├── avatarGf-0.js │ │ │ │ │ │ │ │ ├── avatarGg-0.js │ │ │ │ │ │ │ │ ├── avatarGh-0.js │ │ │ │ │ │ │ │ ├── avatarGi-0.js │ │ │ │ │ │ │ │ ├── avatarGj-0.js │ │ │ │ │ │ │ │ ├── avatarHa-0.js │ │ │ │ │ │ │ │ ├── avatarHb-0.js │ │ │ │ │ │ │ │ ├── avatarHc-1.js │ │ │ │ │ │ │ │ ├── avatarHd-0.js │ │ │ │ │ │ │ │ ├── avatarHe-0.js │ │ │ │ │ │ │ │ ├── avatarHf-0.js │ │ │ │ │ │ │ │ ├── avatarHg-2.js │ │ │ │ │ │ │ │ ├── avatarHh-1.js │ │ │ │ │ │ │ │ ├── avatarHi-0.js │ │ │ │ │ │ │ │ ├── avatarHj-0.js │ │ │ │ │ │ │ │ ├── avatarIa-0.js │ │ │ │ │ │ │ │ ├── avatarIb-0.js │ │ │ │ │ │ │ │ ├── avatarIc-0.js │ │ │ │ │ │ │ │ ├── avatarId-0.js │ │ │ │ │ │ │ │ ├── avatarIe-0.js │ │ │ │ │ │ │ │ ├── avatarIf-0.js │ │ │ │ │ │ │ │ ├── avatarIg-0.js │ │ │ │ │ │ │ │ ├── avatarIh-0.js │ │ │ │ │ │ │ │ ├── avatarIi-0.js │ │ │ │ │ │ │ │ ├── avatarIj-0.js │ │ │ │ │ │ │ │ ├── avatarJa-0.js │ │ │ │ │ │ │ │ ├── avatarJb-0.js │ │ │ │ │ │ │ │ ├── avatarJc-0.js │ │ │ │ │ │ │ │ ├── avatarJd-0.js │ │ │ │ │ │ │ │ ├── avatarJe-0.js │ │ │ │ │ │ │ │ ├── avatarJf-0.js │ │ │ │ │ │ │ │ ├── avatarJg-0.js │ │ │ │ │ │ │ │ ├── avatarJh-0.js │ │ │ │ │ │ │ │ ├── avatarJi-0.js │ │ │ │ │ │ │ │ ├── avatarJj-0.js │ │ │ │ │ │ │ │ ├── barChart-2.js │ │ │ │ │ │ │ │ ├── baseAscend-1.js │ │ │ │ │ │ │ │ ├── baseCertificateStar-1.js │ │ │ │ │ │ │ │ ├── baseChartSmall-0.js │ │ │ │ │ │ │ │ ├── baseChatBubbleHeart-1.js │ │ │ │ │ │ │ │ ├── baseCheckSmall-1.js │ │ │ │ │ │ │ │ ├── baseCoinCryptoSmall-0.js │ │ │ │ │ │ │ │ ├── baseCoinNetworkSmall-0.js │ │ │ │ │ │ │ │ ├── baseCoinStack-0.js │ │ │ │ │ │ │ │ ├── baseCoinStar-1.js │ │ │ │ │ │ │ │ ├── baseComet-1.js │ │ │ │ │ │ │ │ ├── baseComputer-1.js │ │ │ │ │ │ │ │ ├── baseConfetti-1.js │ │ │ │ │ │ │ │ ├── baseConnectApps-0.js │ │ │ │ │ │ │ │ ├── baseConnectSmall-1.js │ │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ │ ├── baseDecentralizationSmall-1.js │ │ │ │ │ │ │ │ ├── baseDiamondSmall-0.js │ │ │ │ │ │ │ │ ├── baseDiamondTrophy-1.js │ │ │ │ │ │ │ │ ├── baseDoor-1.js │ │ │ │ │ │ │ │ ├── baseEarnedBadge-0.js │ │ │ │ │ │ │ │ ├── baseEmptySmall-0.js │ │ │ │ │ │ │ │ ├── baseErrorButterflySmall-0.js │ │ │ │ │ │ │ │ ├── baseErrorSmall-0.js │ │ │ │ │ │ │ │ ├── baseExchange-1.js │ │ │ │ │ │ │ │ ├── baseFire-0.js │ │ │ │ │ │ │ │ ├── baseGem-1.js │ │ │ │ │ │ │ │ ├── baseGlobe-1.js │ │ │ │ │ │ │ │ ├── baseHandStar-1.js │ │ │ │ │ │ │ │ ├── baseLayout-0.js │ │ │ │ │ │ │ │ ├── baseLightningbolt-1.js │ │ │ │ │ │ │ │ ├── baseLoadingSmall-1.js │ │ │ │ │ │ │ │ ├── baseLocationSmall-1.js │ │ │ │ │ │ │ │ ├── baseLogo-4.js │ │ │ │ │ │ │ │ ├── baseLogoNavigation-6.js │ │ │ │ │ │ │ │ ├── baseMedal-0.js │ │ │ │ │ │ │ │ ├── baseMessaging-0.js │ │ │ │ │ │ │ │ ├── baseMintNftSmall-1.js │ │ │ │ │ │ │ │ ├── baseNetworkSmall-0.js │ │ │ │ │ │ │ │ ├── baseNftSmall-0.js │ │ │ │ │ │ │ │ ├── basePaycoinSmall-0.js │ │ │ │ │ │ │ │ ├── basePeopleSmall-0.js │ │ │ │ │ │ │ │ ├── basePiechartSmall-1.js │ │ │ │ │ │ │ │ ├── basePlant-0.js │ │ │ │ │ │ │ │ ├── basePower-1.js │ │ │ │ │ │ │ │ ├── baseRibbon-1.js │ │ │ │ │ │ │ │ ├── baseRocket-1.js │ │ │ │ │ │ │ │ ├── baseRockon-1.js │ │ │ │ │ │ │ │ ├── baseSaved-1.js │ │ │ │ │ │ │ │ ├── baseSecuritySmall-0.js │ │ │ │ │ │ │ │ ├── baseSendSmall-1.js │ │ │ │ │ │ │ │ ├── baseSignin-0.js │ │ │ │ │ │ │ │ ├── baseSmile-1.js │ │ │ │ │ │ │ │ ├── baseStack-1.js │ │ │ │ │ │ │ │ ├── baseStar-1.js │ │ │ │ │ │ │ │ ├── baseTargetSmall-1.js │ │ │ │ │ │ │ │ ├── baseTile-1.js │ │ │ │ │ │ │ │ ├── bigBtcSend-0.js │ │ │ │ │ │ │ │ ├── bitcoin-1.js │ │ │ │ │ │ │ │ ├── bitcoinPizza-3.js │ │ │ │ │ │ │ │ ├── bitcoinRewards-2.js │ │ │ │ │ │ │ │ ├── bitcoinWhitePaper-2.js │ │ │ │ │ │ │ │ ├── blockchainConnection-4.js │ │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ │ ├── borrowCoins-3.js │ │ │ │ │ │ │ │ ├── borrowNavigation-5.js │ │ │ │ │ │ │ │ ├── borrowingLending-3.js │ │ │ │ │ │ │ │ ├── browser-3.js │ │ │ │ │ │ │ │ ├── browserMultiPlatform-7.js │ │ │ │ │ │ │ │ ├── browserTransaction-3.js │ │ │ │ │ │ │ │ ├── btcOneHundred-0.js │ │ │ │ │ │ │ │ ├── bundle-3.js │ │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ │ ├── calculator-1.js │ │ │ │ │ │ │ │ ├── calendar-3.js │ │ │ │ │ │ │ │ ├── calendarCaution-4.js │ │ │ │ │ │ │ │ ├── calendarHighlight-0.js │ │ │ │ │ │ │ │ ├── candleSticksGraph-4.js │ │ │ │ │ │ │ │ ├── cardBlocked-4.js │ │ │ │ │ │ │ │ ├── cardDeclined-3.js │ │ │ │ │ │ │ │ ├── cardNavigation-6.js │ │ │ │ │ │ │ │ ├── cardSuccess-4.js │ │ │ │ │ │ │ │ ├── cb1BankTransfers-2.js │ │ │ │ │ │ │ │ ├── chart-2.js │ │ │ │ │ │ │ │ ├── chat-4.js │ │ │ │ │ │ │ │ ├── checkmark-3.js │ │ │ │ │ │ │ │ ├── clock-3.js │ │ │ │ │ │ │ │ ├── cloudNavigation-6.js │ │ │ │ │ │ │ │ ├── coinFocus-3.js │ │ │ │ │ │ │ │ ├── coinShare-3.js │ │ │ │ │ │ │ │ ├── coinbaseLogoAdvancedBrand-0.js │ │ │ │ │ │ │ │ ├── coinbaseLogoNavigation-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneAuthenticator-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneChat-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarnCoins-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarnCoinsLogo-0.js │ │ │ │ │ │ │ │ ├── coinbaseOneFiat-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductIcon-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ │ ├── coinbaseOneRefreshed-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneShield-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneTrade-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneTrusted-5.js │ │ │ │ │ │ │ │ ├── coinbaseOneUnlimitedRewards-0.js │ │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ │ ├── coinbaseWalletApp-6.js │ │ │ │ │ │ │ │ ├── coldStorageCheck-3.js │ │ │ │ │ │ │ │ ├── collectionOfAssets-3.js │ │ │ │ │ │ │ │ ├── commerceCheckout-4.js │ │ │ │ │ │ │ │ ├── commerceInvoice-3.js │ │ │ │ │ │ │ │ ├── commerceNavigation-6.js │ │ │ │ │ │ │ │ ├── commodities-0.js │ │ │ │ │ │ │ │ ├── completeQuiz-5.js │ │ │ │ │ │ │ │ ├── complianceNavigation-1.js │ │ │ │ │ │ │ │ ├── congratulations-4.js │ │ │ │ │ │ │ │ ├── connectNavigation-5.js │ │ │ │ │ │ │ │ ├── contactInfo-3.js │ │ │ │ │ │ │ │ ├── controlWalletStorage-4.js │ │ │ │ │ │ │ │ ├── creative-3.js │ │ │ │ │ │ │ │ ├── creditCard-3.js │ │ │ │ │ │ │ │ ├── crypto101-4.js │ │ │ │ │ │ │ │ ├── cryptoCard-3.js │ │ │ │ │ │ │ │ ├── cryptoCoins-0.js │ │ │ │ │ │ │ │ ├── cryptoFolder-3.js │ │ │ │ │ │ │ │ ├── crystalBallInsight-0.js │ │ │ │ │ │ │ │ ├── custodialJourney-5.js │ │ │ │ │ │ │ │ ├── custodyNavigation-5.js │ │ │ │ │ │ │ │ ├── dataMarketplaceNavigation-6.js │ │ │ │ │ │ │ │ ├── decentralizationEverything-5.js │ │ │ │ │ │ │ │ ├── decentralizedExchange-5.js │ │ │ │ │ │ │ │ ├── decentralizedIdentity-3.js │ │ │ │ │ │ │ │ ├── decentralizedWeb3-5.js │ │ │ │ │ │ │ │ ├── defiEarnMoment-3.js │ │ │ │ │ │ │ │ ├── delegate-3.js │ │ │ │ │ │ │ │ ├── delegateNavigation-5.js │ │ │ │ │ │ │ │ ├── derivativesNavigation-6.js │ │ │ │ │ │ │ │ ├── derivativesProduct-2.js │ │ │ │ │ │ │ │ ├── developerPlatformNavigation-2.js │ │ │ │ │ │ │ │ ├── developerSDKNavigation-2.js │ │ │ │ │ │ │ │ ├── directDepositNavigation-6.js │ │ │ │ │ │ │ │ ├── dollarShowcase-4.js │ │ │ │ │ │ │ │ ├── done-4.js │ │ │ │ │ │ │ │ ├── download-1.js │ │ │ │ │ │ │ │ ├── driversLicense-3.js │ │ │ │ │ │ │ │ ├── driversLicenseWheel-3.js │ │ │ │ │ │ │ │ ├── earnCoins-3.js │ │ │ │ │ │ │ │ ├── earnGraph-5.js │ │ │ │ │ │ │ │ ├── earnNavigation-7.js │ │ │ │ │ │ │ │ ├── easyToUse-3.js │ │ │ │ │ │ │ │ ├── economyGlobal-3.js │ │ │ │ │ │ │ │ ├── email-7.js │ │ │ │ │ │ │ │ ├── emailAndMessages-3.js │ │ │ │ │ │ │ │ ├── enableVoting-3.js │ │ │ │ │ │ │ │ ├── envelope-3.js │ │ │ │ │ │ │ │ ├── error-4.js │ │ │ │ │ │ │ │ ├── ethRewards-2.js │ │ │ │ │ │ │ │ ├── ethStaking-3.js │ │ │ │ │ │ │ │ ├── ethStakingChart-2.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-1.js │ │ │ │ │ │ │ │ ├── ethToken-1.js │ │ │ │ │ │ │ │ ├── ethereumFocus-5.js │ │ │ │ │ │ │ │ ├── exchangeNavigation-6.js │ │ │ │ │ │ │ │ ├── explore-4.js │ │ │ │ │ │ │ │ ├── fast-3.js │ │ │ │ │ │ │ │ ├── faucetNavigation-6.js │ │ │ │ │ │ │ │ ├── feesRestriction-5.js │ │ │ │ │ │ │ │ ├── fiat-4.js │ │ │ │ │ │ │ │ ├── finance-3.js │ │ │ │ │ │ │ │ ├── findYourSelection-3.js │ │ │ │ │ │ │ │ ├── formDownload-2.js │ │ │ │ │ │ │ │ ├── futures-4.js │ │ │ │ │ │ │ │ ├── futuresCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── gasFees-5.js │ │ │ │ │ │ │ │ ├── gem-3.js │ │ │ │ │ │ │ │ ├── genericCountryIDCard-3.js │ │ │ │ │ │ │ │ ├── getStarted-4.js │ │ │ │ │ │ │ │ ├── giftbox-5.js │ │ │ │ │ │ │ │ ├── globalConnections-5.js │ │ │ │ │ │ │ │ ├── globalPayments-5.js │ │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ │ ├── googleAuthenticator-3.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── hardwareWallet-5.js │ │ │ │ │ │ │ │ ├── helpCenterNavigation-5.js │ │ │ │ │ │ │ │ ├── higherLimits-3.js │ │ │ │ │ │ │ │ ├── holdingCoin-3.js │ │ │ │ │ │ │ │ ├── idBlock-0.js │ │ │ │ │ │ │ │ ├── idError-0.js │ │ │ │ │ │ │ │ ├── idVerification-4.js │ │ │ │ │ │ │ │ ├── identityCard-3.js │ │ │ │ │ │ │ │ ├── increaseLimits-3.js │ │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ │ ├── institutionalNavigation-6.js │ │ │ │ │ │ │ │ ├── institutions-3.js │ │ │ │ │ │ │ │ ├── instoAccount-0.js │ │ │ │ │ │ │ │ ├── instoAddressBook-0.js │ │ │ │ │ │ │ │ ├── instoAdvancedTradingRebates-0.js │ │ │ │ │ │ │ │ ├── instoApyInterest-2.js │ │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-0.js │ │ │ │ │ │ │ │ ├── instoBorrowCoins-0.js │ │ │ │ │ │ │ │ ├── instoBorrowingLending-0.js │ │ │ │ │ │ │ │ ├── instoCoinFocus-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneShield-0.js │ │ │ │ │ │ │ │ ├── instoCrypto101-0.js │ │ │ │ │ │ │ │ ├── instoDecentralizationEverything-0.js │ │ │ │ │ │ │ │ ├── instoDecentralizedExchange-1.js │ │ │ │ │ │ │ │ ├── instoDecentralizedWeb3-1.js │ │ │ │ │ │ │ │ ├── instoDelegate-0.js │ │ │ │ │ │ │ │ ├── instoEarnCoins-0.js │ │ │ │ │ │ │ │ ├── instoEarnGraph-0.js │ │ │ │ │ │ │ │ ├── instoEasyToUse-0.js │ │ │ │ │ │ │ │ ├── instoEth-0.js │ │ │ │ │ │ │ │ ├── instoEthRewards-0.js │ │ │ │ │ │ │ │ ├── instoEthStakingChart-0.js │ │ │ │ │ │ │ │ ├── instoFiat-0.js │ │ │ │ │ │ │ │ ├── instoGem-0.js │ │ │ │ │ │ │ │ ├── instoGlobalConnections-0.js │ │ │ │ │ │ │ │ ├── instoKey-1.js │ │ │ │ │ │ │ │ ├── instoMonitoringPerformance-0.js │ │ │ │ │ │ │ │ ├── instoNftLibrary-0.js │ │ │ │ │ │ │ │ ├── instoPasswordWalletLocked-0.js │ │ │ │ │ │ │ │ ├── instoRestaking-2.js │ │ │ │ │ │ │ │ ├── instoRiskStaking-0.js │ │ │ │ │ │ │ │ ├── instoSecuredAssets-0.js │ │ │ │ │ │ │ │ ├── instoSelfCustodyWallet-0.js │ │ │ │ │ │ │ │ ├── instoStakingGraph-0.js │ │ │ │ │ │ │ │ ├── instoTrading-0.js │ │ │ │ │ │ │ │ ├── instoWalletWarning-0.js │ │ │ │ │ │ │ │ ├── instoprimeMobileApp-0.js │ │ │ │ │ │ │ │ ├── internationalExchangeNavigation-1.js │ │ │ │ │ │ │ │ ├── internet-3.js │ │ │ │ │ │ │ │ ├── investGraph-4.js │ │ │ │ │ │ │ │ ├── key-3.js │ │ │ │ │ │ │ │ ├── laptop-3.js │ │ │ │ │ │ │ │ ├── laptopCharts-4.js │ │ │ │ │ │ │ │ ├── laptopVideo-3.js │ │ │ │ │ │ │ │ ├── layerNetworks-5.js │ │ │ │ │ │ │ │ ├── leadGraph-0.js │ │ │ │ │ │ │ │ ├── learn-4.js │ │ │ │ │ │ │ │ ├── learningRewardsNavigation-6.js │ │ │ │ │ │ │ │ ├── learningRewardsProduct-1.js │ │ │ │ │ │ │ │ ├── lightbulbLearn-5.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── linkYourAccount-6.js │ │ │ │ │ │ │ │ ├── listingFees-5.js │ │ │ │ │ │ │ │ ├── locationUsa-4.js │ │ │ │ │ │ │ │ ├── lock-3.js │ │ │ │ │ │ │ │ ├── loop-0.js │ │ │ │ │ │ │ │ ├── lowFees-4.js │ │ │ │ │ │ │ │ ├── manageWeb3SignersAcct-1.js │ │ │ │ │ │ │ │ ├── miningCoins-3.js │ │ │ │ │ │ │ │ ├── mintedNft-2.js │ │ │ │ │ │ │ │ ├── mobileCharts-3.js │ │ │ │ │ │ │ │ ├── mobileError-4.js │ │ │ │ │ │ │ │ ├── mobileNotifcation-3.js │ │ │ │ │ │ │ │ ├── mobileSuccess-4.js │ │ │ │ │ │ │ │ ├── mobileWarning-3.js │ │ │ │ │ │ │ │ ├── moneyCrypto-0.js │ │ │ │ │ │ │ │ ├── moneyEarn-3.js │ │ │ │ │ │ │ │ ├── moneySwift-4.js │ │ │ │ │ │ │ │ ├── monitoringPerformance-5.js │ │ │ │ │ │ │ │ ├── moreThanBitcoin-3.js │ │ │ │ │ │ │ │ ├── multiAccountsAndCards-4.js │ │ │ │ │ │ │ │ ├── multiPlatform-3.js │ │ │ │ │ │ │ │ ├── multipleAssets-3.js │ │ │ │ │ │ │ │ ├── musicAndSounds-3.js │ │ │ │ │ │ │ │ ├── myNumberCard-4.js │ │ │ │ │ │ │ │ ├── newUserChecklistBuyCrypto-3.js │ │ │ │ │ │ │ │ ├── newUserChecklistCompleteAccount-3.js │ │ │ │ │ │ │ │ ├── newUserChecklistVerifyId-3.js │ │ │ │ │ │ │ │ ├── nftAvatar-4.js │ │ │ │ │ │ │ │ ├── nftLibrary-3.js │ │ │ │ │ │ │ │ ├── nftNavigation-5.js │ │ │ │ │ │ │ │ ├── noAnnualFee-4.js │ │ │ │ │ │ │ │ ├── noNftFound-3.js │ │ │ │ │ │ │ │ ├── noVisibility-3.js │ │ │ │ │ │ │ │ ├── noWiFi-3.js │ │ │ │ │ │ │ │ ├── notificationHubAnalysis-5.js │ │ │ │ │ │ │ │ ├── notificationHubNews-7.js │ │ │ │ │ │ │ │ ├── notificationHubPortfolio-4.js │ │ │ │ │ │ │ │ ├── notificationHubSocial-2.js │ │ │ │ │ │ │ │ ├── notifications-4.js │ │ │ │ │ │ │ │ ├── orders-2.js │ │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ │ ├── partialCoins-3.js │ │ │ │ │ │ │ │ ├── participateNavigation-6.js │ │ │ │ │ │ │ │ ├── passport-2.js │ │ │ │ │ │ │ │ ├── passwordWalletLocked-3.js │ │ │ │ │ │ │ │ ├── payNavigation-6.js │ │ │ │ │ │ │ │ ├── paypal-3.js │ │ │ │ │ │ │ │ ├── peerToPeer-2.js │ │ │ │ │ │ │ │ ├── phone-3.js │ │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ │ ├── pieChartData-0.js │ │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ │ ├── pizza-3.js │ │ │ │ │ │ │ │ ├── planet-5.js │ │ │ │ │ │ │ │ ├── pluginBrowser-4.js │ │ │ │ │ │ │ │ ├── podium-0.js │ │ │ │ │ │ │ │ ├── positiveReviews-3.js │ │ │ │ │ │ │ │ ├── predictionMarkets-3.js │ │ │ │ │ │ │ │ ├── premiumInvestor-2.js │ │ │ │ │ │ │ │ ├── priceTracking-3.js │ │ │ │ │ │ │ │ ├── primeMobileApp-3.js │ │ │ │ │ │ │ │ ├── primeNavigation-6.js │ │ │ │ │ │ │ │ ├── privateClientNavigation-5.js │ │ │ │ │ │ │ │ ├── proNavigation-5.js │ │ │ │ │ │ │ │ ├── protectionPlan-3.js │ │ │ │ │ │ │ │ ├── queryTransactNavigation-5.js │ │ │ │ │ │ │ │ ├── receipt-3.js │ │ │ │ │ │ │ │ ├── recurringPurchases-2.js │ │ │ │ │ │ │ │ ├── restaking-3.js │ │ │ │ │ │ │ │ ├── reviewAndAdd-3.js │ │ │ │ │ │ │ │ ├── rewardsNavigation-5.js │ │ │ │ │ │ │ │ ├── riskStaking-3.js │ │ │ │ │ │ │ │ ├── robot-0.js │ │ │ │ │ │ │ │ ├── rosettaNavigation-4.js │ │ │ │ │ │ │ │ ├── safe-3.js │ │ │ │ │ │ │ │ ├── securedAssets-5.js │ │ │ │ │ │ │ │ ├── security-3.js │ │ │ │ │ │ │ │ ├── securityCoinShield-5.js │ │ │ │ │ │ │ │ ├── securityKey-3.js │ │ │ │ │ │ │ │ ├── seedPhrase-3.js │ │ │ │ │ │ │ │ ├── selectAddNft-2.js │ │ │ │ │ │ │ │ ├── selfCustodyWallet-5.js │ │ │ │ │ │ │ │ ├── selfServe-3.js │ │ │ │ │ │ │ │ ├── sellSendAnytime-3.js │ │ │ │ │ │ │ │ ├── sendPaymentToOthers-4.js │ │ │ │ │ │ │ │ ├── settings-3.js │ │ │ │ │ │ │ │ ├── settled-3.js │ │ │ │ │ │ │ │ ├── shield-4.js │ │ │ │ │ │ │ │ ├── sideChainSide-3.js │ │ │ │ │ │ │ │ ├── signInNavigation-5.js │ │ │ │ │ │ │ │ ├── smsAuthenticate-3.js │ │ │ │ │ │ │ │ ├── sparkleCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── ssnCard-3.js │ │ │ │ │ │ │ │ ├── stableCoinMetaphor-4.js │ │ │ │ │ │ │ │ ├── stacking-3.js │ │ │ │ │ │ │ │ ├── stakingGraph-5.js │ │ │ │ │ │ │ │ ├── standWithCryptoLogoNavigation-3.js │ │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ │ ├── strongInfo-3.js │ │ │ │ │ │ │ │ ├── strongWarning-4.js │ │ │ │ │ │ │ │ ├── successPhone-3.js │ │ │ │ │ │ │ │ ├── support-5.js │ │ │ │ │ │ │ │ ├── supportChat-5.js │ │ │ │ │ │ │ │ ├── takeQuiz-3.js │ │ │ │ │ │ │ │ ├── target-4.js │ │ │ │ │ │ │ │ ├── taxBeta-3.js │ │ │ │ │ │ │ │ ├── taxCenterNavigation-7.js │ │ │ │ │ │ │ │ ├── taxSeason-3.js │ │ │ │ │ │ │ │ ├── taxes-4.js │ │ │ │ │ │ │ │ ├── taxesArrangement-3.js │ │ │ │ │ │ │ │ ├── timingCheck-4.js │ │ │ │ │ │ │ │ ├── tokenBaskets-4.js │ │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ │ ├── trading-2.js │ │ │ │ │ │ │ │ ├── transferSend-3.js │ │ │ │ │ │ │ │ ├── transistor-2.js │ │ │ │ │ │ │ │ ├── trendingAssets-4.js │ │ │ │ │ │ │ │ ├── trusted-5.js │ │ │ │ │ │ │ │ ├── tryAgainLater-3.js │ │ │ │ │ │ │ │ ├── twoBonus-0.js │ │ │ │ │ │ │ │ ├── typeScript-3.js │ │ │ │ │ │ │ │ ├── ubiKey-3.js │ │ │ │ │ │ │ │ ├── usaProduct-3.js │ │ │ │ │ │ │ │ ├── usdcEarn-1.js │ │ │ │ │ │ │ │ ├── usdcInterest-2.js │ │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ │ ├── usdcLogo-1.js │ │ │ │ │ │ │ │ ├── usdcRewards-1.js │ │ │ │ │ │ │ │ ├── usdcRewardsRibbon-1.js │ │ │ │ │ │ │ │ ├── usdcToken-1.js │ │ │ │ │ │ │ │ ├── venturesNavigation-4.js │ │ │ │ │ │ │ │ ├── verifiedPools-2.js │ │ │ │ │ │ │ │ ├── videoCalendar-4.js │ │ │ │ │ │ │ │ ├── videoContent-5.js │ │ │ │ │ │ │ │ ├── waiting-3.js │ │ │ │ │ │ │ │ ├── waitingForConsensus-3.js │ │ │ │ │ │ │ │ ├── wallet-3.js │ │ │ │ │ │ │ │ ├── walletAsServiceNavigation-6.js │ │ │ │ │ │ │ │ ├── walletDeposit-3.js │ │ │ │ │ │ │ │ ├── walletError-5.js │ │ │ │ │ │ │ │ ├── walletExchange-3.js │ │ │ │ │ │ │ │ ├── walletLinkNavigation-4.js │ │ │ │ │ │ │ │ ├── walletLogoNavigation-6.js │ │ │ │ │ │ │ │ ├── walletNavigation-6.js │ │ │ │ │ │ │ │ ├── walletPassword-4.js │ │ │ │ │ │ │ │ ├── walletSuccess-5.js │ │ │ │ │ │ │ │ ├── walletWarning-4.js │ │ │ │ │ │ │ │ ├── warning-4.js │ │ │ │ │ │ │ │ ├── winBTC-3.js │ │ │ │ │ │ │ │ ├── worldwide-3.js │ │ │ │ │ │ │ │ └── wrapEth-4.js │ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ │ ├── 2fa-3.js │ │ │ │ │ │ │ ├── accountsNavigation-7.js │ │ │ │ │ │ │ ├── accreditedInvestor-1.js │ │ │ │ │ │ │ ├── add-3.js │ │ │ │ │ │ │ ├── addCard-3.js │ │ │ │ │ │ │ ├── addPayment-3.js │ │ │ │ │ │ │ ├── addPhone-3.js │ │ │ │ │ │ │ ├── addToWatchlist-3.js │ │ │ │ │ │ │ ├── addWallet-3.js │ │ │ │ │ │ │ ├── addressBook-3.js │ │ │ │ │ │ │ ├── advancedTradingDesktop-4.js │ │ │ │ │ │ │ ├── advancedTradingNavigation-6.js │ │ │ │ │ │ │ ├── advancedTradingRebates-3.js │ │ │ │ │ │ │ ├── agent-5.js │ │ │ │ │ │ │ ├── alerts-3.js │ │ │ │ │ │ │ ├── alertsCoinbaseOne-0.js │ │ │ │ │ │ │ ├── analyticsNavigation-5.js │ │ │ │ │ │ │ ├── apartOfDropsNft-3.js │ │ │ │ │ │ │ ├── applyForHigherLimits-3.js │ │ │ │ │ │ │ ├── apyInterest-5.js │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ ├── assetEncryption-5.js │ │ │ │ │ │ │ ├── assetHubNavigation-5.js │ │ │ │ │ │ │ ├── assetManagement-3.js │ │ │ │ │ │ │ ├── assetManagementNavigation-1.js │ │ │ │ │ │ │ ├── assetMeasurements-5.js │ │ │ │ │ │ │ ├── assetMovement-5.js │ │ │ │ │ │ │ ├── authenticationApp-3.js │ │ │ │ │ │ │ ├── authenticator-3.js │ │ │ │ │ │ │ ├── authenticatorAlt-3.js │ │ │ │ │ │ │ ├── authenticatorProgress-3.js │ │ │ │ │ │ │ ├── avatarAa-0.js │ │ │ │ │ │ │ ├── avatarAb-0.js │ │ │ │ │ │ │ ├── avatarAc-0.js │ │ │ │ │ │ │ ├── avatarAd-0.js │ │ │ │ │ │ │ ├── avatarAe-0.js │ │ │ │ │ │ │ ├── avatarAf-0.js │ │ │ │ │ │ │ ├── avatarAg-0.js │ │ │ │ │ │ │ ├── avatarAh-0.js │ │ │ │ │ │ │ ├── avatarAi-0.js │ │ │ │ │ │ │ ├── avatarAj-0.js │ │ │ │ │ │ │ ├── avatarBa-0.js │ │ │ │ │ │ │ ├── avatarBb-0.js │ │ │ │ │ │ │ ├── avatarBc-0.js │ │ │ │ │ │ │ ├── avatarBd-0.js │ │ │ │ │ │ │ ├── avatarBe-0.js │ │ │ │ │ │ │ ├── avatarBf-0.js │ │ │ │ │ │ │ ├── avatarBg-0.js │ │ │ │ │ │ │ ├── avatarBh-0.js │ │ │ │ │ │ │ ├── avatarBi-0.js │ │ │ │ │ │ │ ├── avatarBj-0.js │ │ │ │ │ │ │ ├── avatarCa-0.js │ │ │ │ │ │ │ ├── avatarCb-0.js │ │ │ │ │ │ │ ├── avatarCc-0.js │ │ │ │ │ │ │ ├── avatarCd-0.js │ │ │ │ │ │ │ ├── avatarCe-0.js │ │ │ │ │ │ │ ├── avatarCf-0.js │ │ │ │ │ │ │ ├── avatarCg-0.js │ │ │ │ │ │ │ ├── avatarCh-0.js │ │ │ │ │ │ │ ├── avatarCi-0.js │ │ │ │ │ │ │ ├── avatarCj-0.js │ │ │ │ │ │ │ ├── avatarDa-0.js │ │ │ │ │ │ │ ├── avatarDb-0.js │ │ │ │ │ │ │ ├── avatarDc-0.js │ │ │ │ │ │ │ ├── avatarDd-0.js │ │ │ │ │ │ │ ├── avatarDe-0.js │ │ │ │ │ │ │ ├── avatarDf-0.js │ │ │ │ │ │ │ ├── avatarDg-0.js │ │ │ │ │ │ │ ├── avatarDh-0.js │ │ │ │ │ │ │ ├── avatarDi-0.js │ │ │ │ │ │ │ ├── avatarDj-0.js │ │ │ │ │ │ │ ├── avatarEa-0.js │ │ │ │ │ │ │ ├── avatarEb-0.js │ │ │ │ │ │ │ ├── avatarEc-0.js │ │ │ │ │ │ │ ├── avatarEd-0.js │ │ │ │ │ │ │ ├── avatarEe-0.js │ │ │ │ │ │ │ ├── avatarEf-0.js │ │ │ │ │ │ │ ├── avatarEg-0.js │ │ │ │ │ │ │ ├── avatarEh-0.js │ │ │ │ │ │ │ ├── avatarEi-0.js │ │ │ │ │ │ │ ├── avatarEj-0.js │ │ │ │ │ │ │ ├── avatarFa-0.js │ │ │ │ │ │ │ ├── avatarFb-0.js │ │ │ │ │ │ │ ├── avatarFc-0.js │ │ │ │ │ │ │ ├── avatarFd-0.js │ │ │ │ │ │ │ ├── avatarFe-0.js │ │ │ │ │ │ │ ├── avatarFf-0.js │ │ │ │ │ │ │ ├── avatarFg-0.js │ │ │ │ │ │ │ ├── avatarFh-0.js │ │ │ │ │ │ │ ├── avatarFi-0.js │ │ │ │ │ │ │ ├── avatarFj-0.js │ │ │ │ │ │ │ ├── avatarGa-0.js │ │ │ │ │ │ │ ├── avatarGb-0.js │ │ │ │ │ │ │ ├── avatarGc-0.js │ │ │ │ │ │ │ ├── avatarGd-0.js │ │ │ │ │ │ │ ├── avatarGe-0.js │ │ │ │ │ │ │ ├── avatarGf-0.js │ │ │ │ │ │ │ ├── avatarGg-0.js │ │ │ │ │ │ │ ├── avatarGh-0.js │ │ │ │ │ │ │ ├── avatarGi-0.js │ │ │ │ │ │ │ ├── avatarGj-0.js │ │ │ │ │ │ │ ├── avatarHa-0.js │ │ │ │ │ │ │ ├── avatarHb-0.js │ │ │ │ │ │ │ ├── avatarHc-1.js │ │ │ │ │ │ │ ├── avatarHd-0.js │ │ │ │ │ │ │ ├── avatarHe-0.js │ │ │ │ │ │ │ ├── avatarHf-0.js │ │ │ │ │ │ │ ├── avatarHg-2.js │ │ │ │ │ │ │ ├── avatarHh-1.js │ │ │ │ │ │ │ ├── avatarHi-0.js │ │ │ │ │ │ │ ├── avatarHj-0.js │ │ │ │ │ │ │ ├── avatarIa-0.js │ │ │ │ │ │ │ ├── avatarIb-0.js │ │ │ │ │ │ │ ├── avatarIc-0.js │ │ │ │ │ │ │ ├── avatarId-0.js │ │ │ │ │ │ │ ├── avatarIe-0.js │ │ │ │ │ │ │ ├── avatarIf-0.js │ │ │ │ │ │ │ ├── avatarIg-0.js │ │ │ │ │ │ │ ├── avatarIh-0.js │ │ │ │ │ │ │ ├── avatarIi-0.js │ │ │ │ │ │ │ ├── avatarIj-0.js │ │ │ │ │ │ │ ├── avatarJa-0.js │ │ │ │ │ │ │ ├── avatarJb-0.js │ │ │ │ │ │ │ ├── avatarJc-0.js │ │ │ │ │ │ │ ├── avatarJd-0.js │ │ │ │ │ │ │ ├── avatarJe-0.js │ │ │ │ │ │ │ ├── avatarJf-0.js │ │ │ │ │ │ │ ├── avatarJg-0.js │ │ │ │ │ │ │ ├── avatarJh-0.js │ │ │ │ │ │ │ ├── avatarJi-0.js │ │ │ │ │ │ │ ├── avatarJj-0.js │ │ │ │ │ │ │ ├── barChart-2.js │ │ │ │ │ │ │ ├── baseAscend-1.js │ │ │ │ │ │ │ ├── baseCertificateStar-1.js │ │ │ │ │ │ │ ├── baseChartSmall-0.js │ │ │ │ │ │ │ ├── baseChatBubbleHeart-1.js │ │ │ │ │ │ │ ├── baseCheckSmall-1.js │ │ │ │ │ │ │ ├── baseCoinCryptoSmall-0.js │ │ │ │ │ │ │ ├── baseCoinNetworkSmall-0.js │ │ │ │ │ │ │ ├── baseCoinStack-0.js │ │ │ │ │ │ │ ├── baseCoinStar-1.js │ │ │ │ │ │ │ ├── baseComet-1.js │ │ │ │ │ │ │ ├── baseComputer-1.js │ │ │ │ │ │ │ ├── baseConfetti-1.js │ │ │ │ │ │ │ ├── baseConnectApps-0.js │ │ │ │ │ │ │ ├── baseConnectSmall-1.js │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ ├── baseDecentralizationSmall-1.js │ │ │ │ │ │ │ ├── baseDiamondSmall-0.js │ │ │ │ │ │ │ ├── baseDiamondTrophy-1.js │ │ │ │ │ │ │ ├── baseDoor-1.js │ │ │ │ │ │ │ ├── baseEarnedBadge-0.js │ │ │ │ │ │ │ ├── baseEmptySmall-0.js │ │ │ │ │ │ │ ├── baseErrorButterflySmall-0.js │ │ │ │ │ │ │ ├── baseErrorSmall-0.js │ │ │ │ │ │ │ ├── baseExchange-1.js │ │ │ │ │ │ │ ├── baseFire-0.js │ │ │ │ │ │ │ ├── baseGem-1.js │ │ │ │ │ │ │ ├── baseGlobe-1.js │ │ │ │ │ │ │ ├── baseHandStar-1.js │ │ │ │ │ │ │ ├── baseLayout-0.js │ │ │ │ │ │ │ ├── baseLightningbolt-1.js │ │ │ │ │ │ │ ├── baseLoadingSmall-1.js │ │ │ │ │ │ │ ├── baseLocationSmall-1.js │ │ │ │ │ │ │ ├── baseLogo-4.js │ │ │ │ │ │ │ ├── baseLogoNavigation-6.js │ │ │ │ │ │ │ ├── baseMedal-0.js │ │ │ │ │ │ │ ├── baseMessaging-0.js │ │ │ │ │ │ │ ├── baseMintNftSmall-1.js │ │ │ │ │ │ │ ├── baseNetworkSmall-0.js │ │ │ │ │ │ │ ├── baseNftSmall-0.js │ │ │ │ │ │ │ ├── basePaycoinSmall-0.js │ │ │ │ │ │ │ ├── basePeopleSmall-0.js │ │ │ │ │ │ │ ├── basePiechartSmall-1.js │ │ │ │ │ │ │ ├── basePlant-0.js │ │ │ │ │ │ │ ├── basePower-1.js │ │ │ │ │ │ │ ├── baseRibbon-1.js │ │ │ │ │ │ │ ├── baseRocket-1.js │ │ │ │ │ │ │ ├── baseRockon-1.js │ │ │ │ │ │ │ ├── baseSaved-1.js │ │ │ │ │ │ │ ├── baseSecuritySmall-0.js │ │ │ │ │ │ │ ├── baseSendSmall-1.js │ │ │ │ │ │ │ ├── baseSignin-0.js │ │ │ │ │ │ │ ├── baseSmile-1.js │ │ │ │ │ │ │ ├── baseStack-1.js │ │ │ │ │ │ │ ├── baseStar-1.js │ │ │ │ │ │ │ ├── baseTargetSmall-1.js │ │ │ │ │ │ │ ├── baseTile-1.js │ │ │ │ │ │ │ ├── bigBtcSend-0.js │ │ │ │ │ │ │ ├── bitcoin-1.js │ │ │ │ │ │ │ ├── bitcoinPizza-3.js │ │ │ │ │ │ │ ├── bitcoinRewards-2.js │ │ │ │ │ │ │ ├── bitcoinWhitePaper-2.js │ │ │ │ │ │ │ ├── blockchainConnection-4.js │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ ├── borrowCoins-3.js │ │ │ │ │ │ │ ├── borrowNavigation-5.js │ │ │ │ │ │ │ ├── borrowingLending-3.js │ │ │ │ │ │ │ ├── browser-3.js │ │ │ │ │ │ │ ├── browserMultiPlatform-7.js │ │ │ │ │ │ │ ├── browserTransaction-3.js │ │ │ │ │ │ │ ├── btcOneHundred-0.js │ │ │ │ │ │ │ ├── bundle-3.js │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ ├── calculator-1.js │ │ │ │ │ │ │ ├── calendar-3.js │ │ │ │ │ │ │ ├── calendarCaution-4.js │ │ │ │ │ │ │ ├── calendarHighlight-0.js │ │ │ │ │ │ │ ├── candleSticksGraph-4.js │ │ │ │ │ │ │ ├── cardBlocked-4.js │ │ │ │ │ │ │ ├── cardDeclined-3.js │ │ │ │ │ │ │ ├── cardNavigation-6.js │ │ │ │ │ │ │ ├── cardSuccess-4.js │ │ │ │ │ │ │ ├── cb1BankTransfers-2.js │ │ │ │ │ │ │ ├── chart-2.js │ │ │ │ │ │ │ ├── chat-4.js │ │ │ │ │ │ │ ├── checkmark-3.js │ │ │ │ │ │ │ ├── clock-3.js │ │ │ │ │ │ │ ├── cloudNavigation-6.js │ │ │ │ │ │ │ ├── coinFocus-3.js │ │ │ │ │ │ │ ├── coinShare-3.js │ │ │ │ │ │ │ ├── coinbaseLogoAdvancedBrand-0.js │ │ │ │ │ │ │ ├── coinbaseLogoNavigation-4.js │ │ │ │ │ │ │ ├── coinbaseOneAuthenticator-3.js │ │ │ │ │ │ │ ├── coinbaseOneChat-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ ├── coinbaseOneEarnCoins-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarnCoinsLogo-0.js │ │ │ │ │ │ │ ├── coinbaseOneFiat-3.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ ├── coinbaseOneProductIcon-1.js │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ ├── coinbaseOneRefreshed-4.js │ │ │ │ │ │ │ ├── coinbaseOneShield-3.js │ │ │ │ │ │ │ ├── coinbaseOneTrade-1.js │ │ │ │ │ │ │ ├── coinbaseOneTrusted-5.js │ │ │ │ │ │ │ ├── coinbaseOneUnlimitedRewards-0.js │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ ├── coinbaseWalletApp-6.js │ │ │ │ │ │ │ ├── coldStorageCheck-3.js │ │ │ │ │ │ │ ├── collectionOfAssets-3.js │ │ │ │ │ │ │ ├── commerceCheckout-4.js │ │ │ │ │ │ │ ├── commerceInvoice-3.js │ │ │ │ │ │ │ ├── commerceNavigation-6.js │ │ │ │ │ │ │ ├── commodities-0.js │ │ │ │ │ │ │ ├── completeQuiz-5.js │ │ │ │ │ │ │ ├── complianceNavigation-1.js │ │ │ │ │ │ │ ├── congratulations-4.js │ │ │ │ │ │ │ ├── connectNavigation-5.js │ │ │ │ │ │ │ ├── contactInfo-3.js │ │ │ │ │ │ │ ├── controlWalletStorage-4.js │ │ │ │ │ │ │ ├── creative-3.js │ │ │ │ │ │ │ ├── creditCard-3.js │ │ │ │ │ │ │ ├── crypto101-4.js │ │ │ │ │ │ │ ├── cryptoCard-3.js │ │ │ │ │ │ │ ├── cryptoCoins-0.js │ │ │ │ │ │ │ ├── cryptoFolder-3.js │ │ │ │ │ │ │ ├── crystalBallInsight-0.js │ │ │ │ │ │ │ ├── custodialJourney-5.js │ │ │ │ │ │ │ ├── custodyNavigation-5.js │ │ │ │ │ │ │ ├── dataMarketplaceNavigation-6.js │ │ │ │ │ │ │ ├── decentralizationEverything-5.js │ │ │ │ │ │ │ ├── decentralizedExchange-5.js │ │ │ │ │ │ │ ├── decentralizedIdentity-3.js │ │ │ │ │ │ │ ├── decentralizedWeb3-5.js │ │ │ │ │ │ │ ├── defiEarnMoment-3.js │ │ │ │ │ │ │ ├── delegate-3.js │ │ │ │ │ │ │ ├── delegateNavigation-5.js │ │ │ │ │ │ │ ├── derivativesNavigation-6.js │ │ │ │ │ │ │ ├── derivativesProduct-2.js │ │ │ │ │ │ │ ├── developerPlatformNavigation-2.js │ │ │ │ │ │ │ ├── developerSDKNavigation-2.js │ │ │ │ │ │ │ ├── directDepositNavigation-6.js │ │ │ │ │ │ │ ├── dollarShowcase-4.js │ │ │ │ │ │ │ ├── done-4.js │ │ │ │ │ │ │ ├── download-1.js │ │ │ │ │ │ │ ├── driversLicense-3.js │ │ │ │ │ │ │ ├── driversLicenseWheel-3.js │ │ │ │ │ │ │ ├── earnCoins-3.js │ │ │ │ │ │ │ ├── earnGraph-5.js │ │ │ │ │ │ │ ├── earnNavigation-7.js │ │ │ │ │ │ │ ├── easyToUse-3.js │ │ │ │ │ │ │ ├── economyGlobal-3.js │ │ │ │ │ │ │ ├── email-7.js │ │ │ │ │ │ │ ├── emailAndMessages-3.js │ │ │ │ │ │ │ ├── enableVoting-3.js │ │ │ │ │ │ │ ├── envelope-3.js │ │ │ │ │ │ │ ├── error-4.js │ │ │ │ │ │ │ ├── ethRewards-2.js │ │ │ │ │ │ │ ├── ethStaking-3.js │ │ │ │ │ │ │ ├── ethStakingChart-2.js │ │ │ │ │ │ │ ├── ethStakingRewards-1.js │ │ │ │ │ │ │ ├── ethToken-1.js │ │ │ │ │ │ │ ├── ethereumFocus-5.js │ │ │ │ │ │ │ ├── exchangeNavigation-6.js │ │ │ │ │ │ │ ├── explore-4.js │ │ │ │ │ │ │ ├── fast-3.js │ │ │ │ │ │ │ ├── faucetNavigation-6.js │ │ │ │ │ │ │ ├── feesRestriction-5.js │ │ │ │ │ │ │ ├── fiat-4.js │ │ │ │ │ │ │ ├── finance-3.js │ │ │ │ │ │ │ ├── findYourSelection-3.js │ │ │ │ │ │ │ ├── formDownload-2.js │ │ │ │ │ │ │ ├── futures-4.js │ │ │ │ │ │ │ ├── futuresCoinbaseOne-0.js │ │ │ │ │ │ │ ├── gasFees-5.js │ │ │ │ │ │ │ ├── gem-3.js │ │ │ │ │ │ │ ├── genericCountryIDCard-3.js │ │ │ │ │ │ │ ├── getStarted-4.js │ │ │ │ │ │ │ ├── giftbox-5.js │ │ │ │ │ │ │ ├── globalConnections-5.js │ │ │ │ │ │ │ ├── globalPayments-5.js │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ ├── googleAuthenticator-3.js │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ ├── hardwareWallet-5.js │ │ │ │ │ │ │ ├── helpCenterNavigation-5.js │ │ │ │ │ │ │ ├── higherLimits-3.js │ │ │ │ │ │ │ ├── holdingCoin-3.js │ │ │ │ │ │ │ ├── idBlock-0.js │ │ │ │ │ │ │ ├── idError-0.js │ │ │ │ │ │ │ ├── idVerification-4.js │ │ │ │ │ │ │ ├── identityCard-3.js │ │ │ │ │ │ │ ├── increaseLimits-3.js │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ ├── institutionalNavigation-6.js │ │ │ │ │ │ │ ├── institutions-3.js │ │ │ │ │ │ │ ├── instoAccount-0.js │ │ │ │ │ │ │ ├── instoAddressBook-0.js │ │ │ │ │ │ │ ├── instoAdvancedTradingRebates-0.js │ │ │ │ │ │ │ ├── instoApyInterest-2.js │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-0.js │ │ │ │ │ │ │ ├── instoBorrowCoins-0.js │ │ │ │ │ │ │ ├── instoBorrowingLending-0.js │ │ │ │ │ │ │ ├── instoCoinFocus-0.js │ │ │ │ │ │ │ ├── instoCoinbaseOneShield-0.js │ │ │ │ │ │ │ ├── instoCrypto101-0.js │ │ │ │ │ │ │ ├── instoDecentralizationEverything-0.js │ │ │ │ │ │ │ ├── instoDecentralizedExchange-1.js │ │ │ │ │ │ │ ├── instoDecentralizedWeb3-1.js │ │ │ │ │ │ │ ├── instoDelegate-0.js │ │ │ │ │ │ │ ├── instoEarnCoins-0.js │ │ │ │ │ │ │ ├── instoEarnGraph-0.js │ │ │ │ │ │ │ ├── instoEasyToUse-0.js │ │ │ │ │ │ │ ├── instoEth-0.js │ │ │ │ │ │ │ ├── instoEthRewards-0.js │ │ │ │ │ │ │ ├── instoEthStakingChart-0.js │ │ │ │ │ │ │ ├── instoFiat-0.js │ │ │ │ │ │ │ ├── instoGem-0.js │ │ │ │ │ │ │ ├── instoGlobalConnections-0.js │ │ │ │ │ │ │ ├── instoKey-1.js │ │ │ │ │ │ │ ├── instoMonitoringPerformance-0.js │ │ │ │ │ │ │ ├── instoNftLibrary-0.js │ │ │ │ │ │ │ ├── instoPasswordWalletLocked-0.js │ │ │ │ │ │ │ ├── instoRestaking-2.js │ │ │ │ │ │ │ ├── instoRiskStaking-0.js │ │ │ │ │ │ │ ├── instoSecuredAssets-0.js │ │ │ │ │ │ │ ├── instoSelfCustodyWallet-0.js │ │ │ │ │ │ │ ├── instoStakingGraph-0.js │ │ │ │ │ │ │ ├── instoTrading-0.js │ │ │ │ │ │ │ ├── instoWalletWarning-0.js │ │ │ │ │ │ │ ├── instoprimeMobileApp-0.js │ │ │ │ │ │ │ ├── internationalExchangeNavigation-1.js │ │ │ │ │ │ │ ├── internet-3.js │ │ │ │ │ │ │ ├── investGraph-4.js │ │ │ │ │ │ │ ├── key-3.js │ │ │ │ │ │ │ ├── laptop-3.js │ │ │ │ │ │ │ ├── laptopCharts-4.js │ │ │ │ │ │ │ ├── laptopVideo-3.js │ │ │ │ │ │ │ ├── layerNetworks-5.js │ │ │ │ │ │ │ ├── leadGraph-0.js │ │ │ │ │ │ │ ├── learn-4.js │ │ │ │ │ │ │ ├── learningRewardsNavigation-6.js │ │ │ │ │ │ │ ├── learningRewardsProduct-1.js │ │ │ │ │ │ │ ├── lightbulbLearn-5.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── linkYourAccount-6.js │ │ │ │ │ │ │ ├── listingFees-5.js │ │ │ │ │ │ │ ├── locationUsa-4.js │ │ │ │ │ │ │ ├── lock-3.js │ │ │ │ │ │ │ ├── loop-0.js │ │ │ │ │ │ │ ├── lowFees-4.js │ │ │ │ │ │ │ ├── manageWeb3SignersAcct-1.js │ │ │ │ │ │ │ ├── miningCoins-3.js │ │ │ │ │ │ │ ├── mintedNft-2.js │ │ │ │ │ │ │ ├── mobileCharts-3.js │ │ │ │ │ │ │ ├── mobileError-4.js │ │ │ │ │ │ │ ├── mobileNotifcation-3.js │ │ │ │ │ │ │ ├── mobileSuccess-4.js │ │ │ │ │ │ │ ├── mobileWarning-3.js │ │ │ │ │ │ │ ├── moneyCrypto-0.js │ │ │ │ │ │ │ ├── moneyEarn-3.js │ │ │ │ │ │ │ ├── moneySwift-4.js │ │ │ │ │ │ │ ├── monitoringPerformance-5.js │ │ │ │ │ │ │ ├── moreThanBitcoin-3.js │ │ │ │ │ │ │ ├── multiAccountsAndCards-4.js │ │ │ │ │ │ │ ├── multiPlatform-3.js │ │ │ │ │ │ │ ├── multipleAssets-3.js │ │ │ │ │ │ │ ├── musicAndSounds-3.js │ │ │ │ │ │ │ ├── myNumberCard-4.js │ │ │ │ │ │ │ ├── newUserChecklistBuyCrypto-3.js │ │ │ │ │ │ │ ├── newUserChecklistCompleteAccount-3.js │ │ │ │ │ │ │ ├── newUserChecklistVerifyId-3.js │ │ │ │ │ │ │ ├── nftAvatar-4.js │ │ │ │ │ │ │ ├── nftLibrary-3.js │ │ │ │ │ │ │ ├── nftNavigation-5.js │ │ │ │ │ │ │ ├── noAnnualFee-4.js │ │ │ │ │ │ │ ├── noNftFound-3.js │ │ │ │ │ │ │ ├── noVisibility-3.js │ │ │ │ │ │ │ ├── noWiFi-3.js │ │ │ │ │ │ │ ├── notificationHubAnalysis-5.js │ │ │ │ │ │ │ ├── notificationHubNews-7.js │ │ │ │ │ │ │ ├── notificationHubPortfolio-4.js │ │ │ │ │ │ │ ├── notificationHubSocial-2.js │ │ │ │ │ │ │ ├── notifications-4.js │ │ │ │ │ │ │ ├── orders-2.js │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ ├── partialCoins-3.js │ │ │ │ │ │ │ ├── participateNavigation-6.js │ │ │ │ │ │ │ ├── passport-2.js │ │ │ │ │ │ │ ├── passwordWalletLocked-3.js │ │ │ │ │ │ │ ├── payNavigation-6.js │ │ │ │ │ │ │ ├── paypal-3.js │ │ │ │ │ │ │ ├── peerToPeer-2.js │ │ │ │ │ │ │ ├── phone-3.js │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ ├── pieChartData-0.js │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ ├── pizza-3.js │ │ │ │ │ │ │ ├── planet-5.js │ │ │ │ │ │ │ ├── pluginBrowser-4.js │ │ │ │ │ │ │ ├── podium-0.js │ │ │ │ │ │ │ ├── positiveReviews-3.js │ │ │ │ │ │ │ ├── predictionMarkets-3.js │ │ │ │ │ │ │ ├── premiumInvestor-2.js │ │ │ │ │ │ │ ├── priceTracking-3.js │ │ │ │ │ │ │ ├── primeMobileApp-3.js │ │ │ │ │ │ │ ├── primeNavigation-6.js │ │ │ │ │ │ │ ├── privateClientNavigation-5.js │ │ │ │ │ │ │ ├── proNavigation-5.js │ │ │ │ │ │ │ ├── protectionPlan-3.js │ │ │ │ │ │ │ ├── queryTransactNavigation-5.js │ │ │ │ │ │ │ ├── receipt-3.js │ │ │ │ │ │ │ ├── recurringPurchases-2.js │ │ │ │ │ │ │ ├── restaking-3.js │ │ │ │ │ │ │ ├── reviewAndAdd-3.js │ │ │ │ │ │ │ ├── rewardsNavigation-5.js │ │ │ │ │ │ │ ├── riskStaking-3.js │ │ │ │ │ │ │ ├── robot-0.js │ │ │ │ │ │ │ ├── rosettaNavigation-4.js │ │ │ │ │ │ │ ├── safe-3.js │ │ │ │ │ │ │ ├── securedAssets-5.js │ │ │ │ │ │ │ ├── security-3.js │ │ │ │ │ │ │ ├── securityCoinShield-5.js │ │ │ │ │ │ │ ├── securityKey-3.js │ │ │ │ │ │ │ ├── seedPhrase-3.js │ │ │ │ │ │ │ ├── selectAddNft-2.js │ │ │ │ │ │ │ ├── selfCustodyWallet-5.js │ │ │ │ │ │ │ ├── selfServe-3.js │ │ │ │ │ │ │ ├── sellSendAnytime-3.js │ │ │ │ │ │ │ ├── sendPaymentToOthers-4.js │ │ │ │ │ │ │ ├── settings-3.js │ │ │ │ │ │ │ ├── settled-3.js │ │ │ │ │ │ │ ├── shield-4.js │ │ │ │ │ │ │ ├── sideChainSide-3.js │ │ │ │ │ │ │ ├── signInNavigation-5.js │ │ │ │ │ │ │ ├── smsAuthenticate-3.js │ │ │ │ │ │ │ ├── sparkleCoinbaseOne-0.js │ │ │ │ │ │ │ ├── ssnCard-3.js │ │ │ │ │ │ │ ├── stableCoinMetaphor-4.js │ │ │ │ │ │ │ ├── stacking-3.js │ │ │ │ │ │ │ ├── stakingGraph-5.js │ │ │ │ │ │ │ ├── standWithCryptoLogoNavigation-3.js │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ ├── strongInfo-3.js │ │ │ │ │ │ │ ├── strongWarning-4.js │ │ │ │ │ │ │ ├── successPhone-3.js │ │ │ │ │ │ │ ├── support-5.js │ │ │ │ │ │ │ ├── supportChat-5.js │ │ │ │ │ │ │ ├── takeQuiz-3.js │ │ │ │ │ │ │ ├── target-4.js │ │ │ │ │ │ │ ├── taxBeta-3.js │ │ │ │ │ │ │ ├── taxCenterNavigation-7.js │ │ │ │ │ │ │ ├── taxSeason-3.js │ │ │ │ │ │ │ ├── taxes-4.js │ │ │ │ │ │ │ ├── taxesArrangement-3.js │ │ │ │ │ │ │ ├── timingCheck-4.js │ │ │ │ │ │ │ ├── tokenBaskets-4.js │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ ├── trading-2.js │ │ │ │ │ │ │ ├── transferSend-3.js │ │ │ │ │ │ │ ├── transistor-2.js │ │ │ │ │ │ │ ├── trendingAssets-4.js │ │ │ │ │ │ │ ├── trusted-5.js │ │ │ │ │ │ │ ├── tryAgainLater-3.js │ │ │ │ │ │ │ ├── twoBonus-0.js │ │ │ │ │ │ │ ├── typeScript-3.js │ │ │ │ │ │ │ ├── ubiKey-3.js │ │ │ │ │ │ │ ├── usaProduct-3.js │ │ │ │ │ │ │ ├── usdcEarn-1.js │ │ │ │ │ │ │ ├── usdcInterest-2.js │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ ├── usdcLogo-1.js │ │ │ │ │ │ │ ├── usdcRewards-1.js │ │ │ │ │ │ │ ├── usdcRewardsRibbon-1.js │ │ │ │ │ │ │ ├── usdcToken-1.js │ │ │ │ │ │ │ ├── venturesNavigation-4.js │ │ │ │ │ │ │ ├── verifiedPools-2.js │ │ │ │ │ │ │ ├── videoCalendar-4.js │ │ │ │ │ │ │ ├── videoContent-5.js │ │ │ │ │ │ │ ├── waiting-3.js │ │ │ │ │ │ │ ├── waitingForConsensus-3.js │ │ │ │ │ │ │ ├── wallet-3.js │ │ │ │ │ │ │ ├── walletAsServiceNavigation-6.js │ │ │ │ │ │ │ ├── walletDeposit-3.js │ │ │ │ │ │ │ ├── walletError-5.js │ │ │ │ │ │ │ ├── walletExchange-3.js │ │ │ │ │ │ │ ├── walletLinkNavigation-4.js │ │ │ │ │ │ │ ├── walletLogoNavigation-6.js │ │ │ │ │ │ │ ├── walletNavigation-6.js │ │ │ │ │ │ │ ├── walletPassword-4.js │ │ │ │ │ │ │ ├── walletSuccess-5.js │ │ │ │ │ │ │ ├── walletWarning-4.js │ │ │ │ │ │ │ ├── warning-4.js │ │ │ │ │ │ │ ├── winBTC-3.js │ │ │ │ │ │ │ ├── worldwide-3.js │ │ │ │ │ │ │ └── wrapEth-4.js │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ └── walletAsServiceNavigation-0.js │ │ │ │ │ │ ├── esm/ │ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ │ ├── 2fa-3.js │ │ │ │ │ │ │ ├── accountsNavigation-7.js │ │ │ │ │ │ │ ├── accreditedInvestor-1.js │ │ │ │ │ │ │ ├── add-3.js │ │ │ │ │ │ │ ├── addCard-3.js │ │ │ │ │ │ │ ├── addPayment-3.js │ │ │ │ │ │ │ ├── addPhone-3.js │ │ │ │ │ │ │ ├── addToWatchlist-3.js │ │ │ │ │ │ │ ├── addWallet-3.js │ │ │ │ │ │ │ ├── addressBook-3.js │ │ │ │ │ │ │ ├── advancedTradingDesktop-4.js │ │ │ │ │ │ │ ├── advancedTradingNavigation-6.js │ │ │ │ │ │ │ ├── advancedTradingRebates-3.js │ │ │ │ │ │ │ ├── agent-5.js │ │ │ │ │ │ │ ├── alerts-3.js │ │ │ │ │ │ │ ├── alertsCoinbaseOne-0.js │ │ │ │ │ │ │ ├── analyticsNavigation-5.js │ │ │ │ │ │ │ ├── apartOfDropsNft-3.js │ │ │ │ │ │ │ ├── applyForHigherLimits-3.js │ │ │ │ │ │ │ ├── apyInterest-5.js │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ ├── assetEncryption-5.js │ │ │ │ │ │ │ ├── assetHubNavigation-5.js │ │ │ │ │ │ │ ├── assetManagement-3.js │ │ │ │ │ │ │ ├── assetManagementNavigation-1.js │ │ │ │ │ │ │ ├── assetMeasurements-5.js │ │ │ │ │ │ │ ├── assetMovement-5.js │ │ │ │ │ │ │ ├── authenticationApp-3.js │ │ │ │ │ │ │ ├── authenticator-3.js │ │ │ │ │ │ │ ├── authenticatorAlt-3.js │ │ │ │ │ │ │ ├── authenticatorProgress-3.js │ │ │ │ │ │ │ ├── avatarAa-0.js │ │ │ │ │ │ │ ├── avatarAb-0.js │ │ │ │ │ │ │ ├── avatarAc-0.js │ │ │ │ │ │ │ ├── avatarAd-0.js │ │ │ │ │ │ │ ├── avatarAe-0.js │ │ │ │ │ │ │ ├── avatarAf-0.js │ │ │ │ │ │ │ ├── avatarAg-0.js │ │ │ │ │ │ │ ├── avatarAh-0.js │ │ │ │ │ │ │ ├── avatarAi-0.js │ │ │ │ │ │ │ ├── avatarAj-0.js │ │ │ │ │ │ │ ├── avatarBa-0.js │ │ │ │ │ │ │ ├── avatarBb-0.js │ │ │ │ │ │ │ ├── avatarBc-0.js │ │ │ │ │ │ │ ├── avatarBd-0.js │ │ │ │ │ │ │ ├── avatarBe-0.js │ │ │ │ │ │ │ ├── avatarBf-0.js │ │ │ │ │ │ │ ├── avatarBg-0.js │ │ │ │ │ │ │ ├── avatarBh-0.js │ │ │ │ │ │ │ ├── avatarBi-0.js │ │ │ │ │ │ │ ├── avatarBj-0.js │ │ │ │ │ │ │ ├── avatarCa-0.js │ │ │ │ │ │ │ ├── avatarCb-0.js │ │ │ │ │ │ │ ├── avatarCc-0.js │ │ │ │ │ │ │ ├── avatarCd-0.js │ │ │ │ │ │ │ ├── avatarCe-0.js │ │ │ │ │ │ │ ├── avatarCf-0.js │ │ │ │ │ │ │ ├── avatarCg-0.js │ │ │ │ │ │ │ ├── avatarCh-0.js │ │ │ │ │ │ │ ├── avatarCi-0.js │ │ │ │ │ │ │ ├── avatarCj-0.js │ │ │ │ │ │ │ ├── avatarDa-0.js │ │ │ │ │ │ │ ├── avatarDb-0.js │ │ │ │ │ │ │ ├── avatarDc-0.js │ │ │ │ │ │ │ ├── avatarDd-0.js │ │ │ │ │ │ │ ├── avatarDe-0.js │ │ │ │ │ │ │ ├── avatarDf-0.js │ │ │ │ │ │ │ ├── avatarDg-0.js │ │ │ │ │ │ │ ├── avatarDh-0.js │ │ │ │ │ │ │ ├── avatarDi-0.js │ │ │ │ │ │ │ ├── avatarDj-0.js │ │ │ │ │ │ │ ├── avatarEa-0.js │ │ │ │ │ │ │ ├── avatarEb-0.js │ │ │ │ │ │ │ ├── avatarEc-0.js │ │ │ │ │ │ │ ├── avatarEd-0.js │ │ │ │ │ │ │ ├── avatarEe-0.js │ │ │ │ │ │ │ ├── avatarEf-0.js │ │ │ │ │ │ │ ├── avatarEg-0.js │ │ │ │ │ │ │ ├── avatarEh-0.js │ │ │ │ │ │ │ ├── avatarEi-0.js │ │ │ │ │ │ │ ├── avatarEj-0.js │ │ │ │ │ │ │ ├── avatarFa-0.js │ │ │ │ │ │ │ ├── avatarFb-0.js │ │ │ │ │ │ │ ├── avatarFc-0.js │ │ │ │ │ │ │ ├── avatarFd-0.js │ │ │ │ │ │ │ ├── avatarFe-0.js │ │ │ │ │ │ │ ├── avatarFf-0.js │ │ │ │ │ │ │ ├── avatarFg-0.js │ │ │ │ │ │ │ ├── avatarFh-0.js │ │ │ │ │ │ │ ├── avatarFi-0.js │ │ │ │ │ │ │ ├── avatarFj-0.js │ │ │ │ │ │ │ ├── avatarGa-0.js │ │ │ │ │ │ │ ├── avatarGb-0.js │ │ │ │ │ │ │ ├── avatarGc-0.js │ │ │ │ │ │ │ ├── avatarGd-0.js │ │ │ │ │ │ │ ├── avatarGe-0.js │ │ │ │ │ │ │ ├── avatarGf-0.js │ │ │ │ │ │ │ ├── avatarGg-0.js │ │ │ │ │ │ │ ├── avatarGh-0.js │ │ │ │ │ │ │ ├── avatarGi-0.js │ │ │ │ │ │ │ ├── avatarGj-0.js │ │ │ │ │ │ │ ├── avatarHa-0.js │ │ │ │ │ │ │ ├── avatarHb-0.js │ │ │ │ │ │ │ ├── avatarHc-1.js │ │ │ │ │ │ │ ├── avatarHd-0.js │ │ │ │ │ │ │ ├── avatarHe-0.js │ │ │ │ │ │ │ ├── avatarHf-0.js │ │ │ │ │ │ │ ├── avatarHg-2.js │ │ │ │ │ │ │ ├── avatarHh-1.js │ │ │ │ │ │ │ ├── avatarHi-0.js │ │ │ │ │ │ │ ├── avatarHj-0.js │ │ │ │ │ │ │ ├── avatarIa-0.js │ │ │ │ │ │ │ ├── avatarIb-0.js │ │ │ │ │ │ │ ├── avatarIc-0.js │ │ │ │ │ │ │ ├── avatarId-0.js │ │ │ │ │ │ │ ├── avatarIe-0.js │ │ │ │ │ │ │ ├── avatarIf-0.js │ │ │ │ │ │ │ ├── avatarIg-0.js │ │ │ │ │ │ │ ├── avatarIh-0.js │ │ │ │ │ │ │ ├── avatarIi-0.js │ │ │ │ │ │ │ ├── avatarIj-0.js │ │ │ │ │ │ │ ├── avatarJa-0.js │ │ │ │ │ │ │ ├── avatarJb-0.js │ │ │ │ │ │ │ ├── avatarJc-0.js │ │ │ │ │ │ │ ├── avatarJd-0.js │ │ │ │ │ │ │ ├── avatarJe-0.js │ │ │ │ │ │ │ ├── avatarJf-0.js │ │ │ │ │ │ │ ├── avatarJg-0.js │ │ │ │ │ │ │ ├── avatarJh-0.js │ │ │ │ │ │ │ ├── avatarJi-0.js │ │ │ │ │ │ │ ├── avatarJj-0.js │ │ │ │ │ │ │ ├── barChart-2.js │ │ │ │ │ │ │ ├── baseAscend-1.js │ │ │ │ │ │ │ ├── baseCertificateStar-1.js │ │ │ │ │ │ │ ├── baseChartSmall-0.js │ │ │ │ │ │ │ ├── baseChatBubbleHeart-1.js │ │ │ │ │ │ │ ├── baseCheckSmall-1.js │ │ │ │ │ │ │ ├── baseCoinCryptoSmall-0.js │ │ │ │ │ │ │ ├── baseCoinNetworkSmall-0.js │ │ │ │ │ │ │ ├── baseCoinStack-0.js │ │ │ │ │ │ │ ├── baseCoinStar-1.js │ │ │ │ │ │ │ ├── baseComet-1.js │ │ │ │ │ │ │ ├── baseComputer-1.js │ │ │ │ │ │ │ ├── baseConfetti-1.js │ │ │ │ │ │ │ ├── baseConnectApps-0.js │ │ │ │ │ │ │ ├── baseConnectSmall-1.js │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ ├── baseDecentralizationSmall-1.js │ │ │ │ │ │ │ ├── baseDiamondSmall-0.js │ │ │ │ │ │ │ ├── baseDiamondTrophy-1.js │ │ │ │ │ │ │ ├── baseDoor-1.js │ │ │ │ │ │ │ ├── baseEarnedBadge-0.js │ │ │ │ │ │ │ ├── baseEmptySmall-0.js │ │ │ │ │ │ │ ├── baseErrorButterflySmall-0.js │ │ │ │ │ │ │ ├── baseErrorSmall-0.js │ │ │ │ │ │ │ ├── baseExchange-1.js │ │ │ │ │ │ │ ├── baseFire-0.js │ │ │ │ │ │ │ ├── baseGem-1.js │ │ │ │ │ │ │ ├── baseGlobe-1.js │ │ │ │ │ │ │ ├── baseHandStar-1.js │ │ │ │ │ │ │ ├── baseLayout-0.js │ │ │ │ │ │ │ ├── baseLightningbolt-1.js │ │ │ │ │ │ │ ├── baseLoadingSmall-1.js │ │ │ │ │ │ │ ├── baseLocationSmall-1.js │ │ │ │ │ │ │ ├── baseLogo-4.js │ │ │ │ │ │ │ ├── baseLogoNavigation-6.js │ │ │ │ │ │ │ ├── baseMedal-0.js │ │ │ │ │ │ │ ├── baseMessaging-0.js │ │ │ │ │ │ │ ├── baseMintNftSmall-1.js │ │ │ │ │ │ │ ├── baseNetworkSmall-0.js │ │ │ │ │ │ │ ├── baseNftSmall-0.js │ │ │ │ │ │ │ ├── basePaycoinSmall-0.js │ │ │ │ │ │ │ ├── basePeopleSmall-0.js │ │ │ │ │ │ │ ├── basePiechartSmall-1.js │ │ │ │ │ │ │ ├── basePlant-0.js │ │ │ │ │ │ │ ├── basePower-1.js │ │ │ │ │ │ │ ├── baseRibbon-1.js │ │ │ │ │ │ │ ├── baseRocket-1.js │ │ │ │ │ │ │ ├── baseRockon-1.js │ │ │ │ │ │ │ ├── baseSaved-1.js │ │ │ │ │ │ │ ├── baseSecuritySmall-0.js │ │ │ │ │ │ │ ├── baseSendSmall-1.js │ │ │ │ │ │ │ ├── baseSignin-0.js │ │ │ │ │ │ │ ├── baseSmile-1.js │ │ │ │ │ │ │ ├── baseStack-1.js │ │ │ │ │ │ │ ├── baseStar-1.js │ │ │ │ │ │ │ ├── baseTargetSmall-1.js │ │ │ │ │ │ │ ├── baseTile-1.js │ │ │ │ │ │ │ ├── bigBtcSend-0.js │ │ │ │ │ │ │ ├── bitcoin-1.js │ │ │ │ │ │ │ ├── bitcoinPizza-3.js │ │ │ │ │ │ │ ├── bitcoinRewards-2.js │ │ │ │ │ │ │ ├── bitcoinWhitePaper-2.js │ │ │ │ │ │ │ ├── blockchainConnection-4.js │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ ├── borrowCoins-3.js │ │ │ │ │ │ │ ├── borrowNavigation-5.js │ │ │ │ │ │ │ ├── borrowingLending-3.js │ │ │ │ │ │ │ ├── browser-3.js │ │ │ │ │ │ │ ├── browserMultiPlatform-7.js │ │ │ │ │ │ │ ├── browserTransaction-3.js │ │ │ │ │ │ │ ├── btcOneHundred-0.js │ │ │ │ │ │ │ ├── bundle-3.js │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ ├── calculator-1.js │ │ │ │ │ │ │ ├── calendar-3.js │ │ │ │ │ │ │ ├── calendarCaution-4.js │ │ │ │ │ │ │ ├── calendarHighlight-0.js │ │ │ │ │ │ │ ├── candleSticksGraph-4.js │ │ │ │ │ │ │ ├── cardBlocked-4.js │ │ │ │ │ │ │ ├── cardDeclined-3.js │ │ │ │ │ │ │ ├── cardNavigation-6.js │ │ │ │ │ │ │ ├── cardSuccess-4.js │ │ │ │ │ │ │ ├── cb1BankTransfers-2.js │ │ │ │ │ │ │ ├── chart-2.js │ │ │ │ │ │ │ ├── chat-4.js │ │ │ │ │ │ │ ├── checkmark-3.js │ │ │ │ │ │ │ ├── clock-3.js │ │ │ │ │ │ │ ├── cloudNavigation-6.js │ │ │ │ │ │ │ ├── coinFocus-3.js │ │ │ │ │ │ │ ├── coinShare-3.js │ │ │ │ │ │ │ ├── coinbaseLogoAdvancedBrand-0.js │ │ │ │ │ │ │ ├── coinbaseLogoNavigation-4.js │ │ │ │ │ │ │ ├── coinbaseOneAuthenticator-3.js │ │ │ │ │ │ │ ├── coinbaseOneChat-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ ├── coinbaseOneEarnCoins-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarnCoinsLogo-0.js │ │ │ │ │ │ │ ├── coinbaseOneFiat-3.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ ├── coinbaseOneProductIcon-1.js │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ ├── coinbaseOneRefreshed-4.js │ │ │ │ │ │ │ ├── coinbaseOneShield-3.js │ │ │ │ │ │ │ ├── coinbaseOneTrade-1.js │ │ │ │ │ │ │ ├── coinbaseOneTrusted-5.js │ │ │ │ │ │ │ ├── coinbaseOneUnlimitedRewards-0.js │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ ├── coinbaseWalletApp-6.js │ │ │ │ │ │ │ ├── coldStorageCheck-3.js │ │ │ │ │ │ │ ├── collectionOfAssets-3.js │ │ │ │ │ │ │ ├── commerceCheckout-4.js │ │ │ │ │ │ │ ├── commerceInvoice-3.js │ │ │ │ │ │ │ ├── commerceNavigation-6.js │ │ │ │ │ │ │ ├── commodities-0.js │ │ │ │ │ │ │ ├── completeQuiz-5.js │ │ │ │ │ │ │ ├── complianceNavigation-1.js │ │ │ │ │ │ │ ├── congratulations-4.js │ │ │ │ │ │ │ ├── connectNavigation-5.js │ │ │ │ │ │ │ ├── contactInfo-3.js │ │ │ │ │ │ │ ├── controlWalletStorage-4.js │ │ │ │ │ │ │ ├── creative-3.js │ │ │ │ │ │ │ ├── creditCard-3.js │ │ │ │ │ │ │ ├── crypto101-4.js │ │ │ │ │ │ │ ├── cryptoCard-3.js │ │ │ │ │ │ │ ├── cryptoCoins-0.js │ │ │ │ │ │ │ ├── cryptoFolder-3.js │ │ │ │ │ │ │ ├── crystalBallInsight-0.js │ │ │ │ │ │ │ ├── custodialJourney-5.js │ │ │ │ │ │ │ ├── custodyNavigation-5.js │ │ │ │ │ │ │ ├── dataMarketplaceNavigation-6.js │ │ │ │ │ │ │ ├── decentralizationEverything-5.js │ │ │ │ │ │ │ ├── decentralizedExchange-5.js │ │ │ │ │ │ │ ├── decentralizedIdentity-3.js │ │ │ │ │ │ │ ├── decentralizedWeb3-5.js │ │ │ │ │ │ │ ├── defiEarnMoment-3.js │ │ │ │ │ │ │ ├── delegate-3.js │ │ │ │ │ │ │ ├── delegateNavigation-5.js │ │ │ │ │ │ │ ├── derivativesNavigation-6.js │ │ │ │ │ │ │ ├── derivativesProduct-2.js │ │ │ │ │ │ │ ├── developerPlatformNavigation-2.js │ │ │ │ │ │ │ ├── developerSDKNavigation-2.js │ │ │ │ │ │ │ ├── directDepositNavigation-6.js │ │ │ │ │ │ │ ├── dollarShowcase-4.js │ │ │ │ │ │ │ ├── done-4.js │ │ │ │ │ │ │ ├── download-1.js │ │ │ │ │ │ │ ├── driversLicense-3.js │ │ │ │ │ │ │ ├── driversLicenseWheel-3.js │ │ │ │ │ │ │ ├── earnCoins-3.js │ │ │ │ │ │ │ ├── earnGraph-5.js │ │ │ │ │ │ │ ├── earnNavigation-7.js │ │ │ │ │ │ │ ├── easyToUse-3.js │ │ │ │ │ │ │ ├── economyGlobal-3.js │ │ │ │ │ │ │ ├── email-7.js │ │ │ │ │ │ │ ├── emailAndMessages-3.js │ │ │ │ │ │ │ ├── enableVoting-3.js │ │ │ │ │ │ │ ├── envelope-3.js │ │ │ │ │ │ │ ├── error-4.js │ │ │ │ │ │ │ ├── ethRewards-2.js │ │ │ │ │ │ │ ├── ethStaking-3.js │ │ │ │ │ │ │ ├── ethStakingChart-2.js │ │ │ │ │ │ │ ├── ethStakingRewards-1.js │ │ │ │ │ │ │ ├── ethToken-1.js │ │ │ │ │ │ │ ├── ethereumFocus-5.js │ │ │ │ │ │ │ ├── exchangeNavigation-6.js │ │ │ │ │ │ │ ├── explore-4.js │ │ │ │ │ │ │ ├── fast-3.js │ │ │ │ │ │ │ ├── faucetNavigation-6.js │ │ │ │ │ │ │ ├── feesRestriction-5.js │ │ │ │ │ │ │ ├── fiat-4.js │ │ │ │ │ │ │ ├── finance-3.js │ │ │ │ │ │ │ ├── findYourSelection-3.js │ │ │ │ │ │ │ ├── formDownload-2.js │ │ │ │ │ │ │ ├── futures-4.js │ │ │ │ │ │ │ ├── futuresCoinbaseOne-0.js │ │ │ │ │ │ │ ├── gasFees-5.js │ │ │ │ │ │ │ ├── gem-3.js │ │ │ │ │ │ │ ├── genericCountryIDCard-3.js │ │ │ │ │ │ │ ├── getStarted-4.js │ │ │ │ │ │ │ ├── giftbox-5.js │ │ │ │ │ │ │ ├── globalConnections-5.js │ │ │ │ │ │ │ ├── globalPayments-5.js │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ ├── googleAuthenticator-3.js │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ ├── hardwareWallet-5.js │ │ │ │ │ │ │ ├── helpCenterNavigation-5.js │ │ │ │ │ │ │ ├── higherLimits-3.js │ │ │ │ │ │ │ ├── holdingCoin-3.js │ │ │ │ │ │ │ ├── idBlock-0.js │ │ │ │ │ │ │ ├── idError-0.js │ │ │ │ │ │ │ ├── idVerification-4.js │ │ │ │ │ │ │ ├── identityCard-3.js │ │ │ │ │ │ │ ├── increaseLimits-3.js │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ ├── instantUnstakingClock-1.js │ │ │ │ │ │ │ ├── institutionalNavigation-6.js │ │ │ │ │ │ │ ├── institutions-3.js │ │ │ │ │ │ │ ├── instoAccount-0.js │ │ │ │ │ │ │ ├── instoAddressBook-0.js │ │ │ │ │ │ │ ├── instoAdvancedTradingRebates-0.js │ │ │ │ │ │ │ ├── instoApyInterest-2.js │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-0.js │ │ │ │ │ │ │ ├── instoBorrowCoins-0.js │ │ │ │ │ │ │ ├── instoBorrowingLending-0.js │ │ │ │ │ │ │ ├── instoCoinFocus-0.js │ │ │ │ │ │ │ ├── instoCoinbaseOneShield-0.js │ │ │ │ │ │ │ ├── instoCrypto101-0.js │ │ │ │ │ │ │ ├── instoDecentralizationEverything-0.js │ │ │ │ │ │ │ ├── instoDecentralizedExchange-1.js │ │ │ │ │ │ │ ├── instoDecentralizedWeb3-1.js │ │ │ │ │ │ │ ├── instoDelegate-0.js │ │ │ │ │ │ │ ├── instoEarnCoins-0.js │ │ │ │ │ │ │ ├── instoEarnGraph-0.js │ │ │ │ │ │ │ ├── instoEasyToUse-0.js │ │ │ │ │ │ │ ├── instoEth-0.js │ │ │ │ │ │ │ ├── instoEthRewards-0.js │ │ │ │ │ │ │ ├── instoEthStakingChart-0.js │ │ │ │ │ │ │ ├── instoFiat-0.js │ │ │ │ │ │ │ ├── instoGem-0.js │ │ │ │ │ │ │ ├── instoGlobalConnections-0.js │ │ │ │ │ │ │ ├── instoKey-1.js │ │ │ │ │ │ │ ├── instoMonitoringPerformance-0.js │ │ │ │ │ │ │ ├── instoNftLibrary-0.js │ │ │ │ │ │ │ ├── instoPasswordWalletLocked-0.js │ │ │ │ │ │ │ ├── instoRestaking-2.js │ │ │ │ │ │ │ ├── instoRiskStaking-0.js │ │ │ │ │ │ │ ├── instoSecuredAssets-0.js │ │ │ │ │ │ │ ├── instoSelfCustodyWallet-0.js │ │ │ │ │ │ │ ├── instoStakingGraph-0.js │ │ │ │ │ │ │ ├── instoTrading-0.js │ │ │ │ │ │ │ ├── instoWalletWarning-0.js │ │ │ │ │ │ │ ├── instoprimeMobileApp-0.js │ │ │ │ │ │ │ ├── internationalExchangeNavigation-1.js │ │ │ │ │ │ │ ├── internet-3.js │ │ │ │ │ │ │ ├── investGraph-4.js │ │ │ │ │ │ │ ├── key-3.js │ │ │ │ │ │ │ ├── laptop-3.js │ │ │ │ │ │ │ ├── laptopCharts-4.js │ │ │ │ │ │ │ ├── laptopVideo-3.js │ │ │ │ │ │ │ ├── layerNetworks-5.js │ │ │ │ │ │ │ ├── leadGraph-0.js │ │ │ │ │ │ │ ├── learn-4.js │ │ │ │ │ │ │ ├── learningRewardsNavigation-6.js │ │ │ │ │ │ │ ├── learningRewardsProduct-1.js │ │ │ │ │ │ │ ├── lightbulbLearn-5.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── linkYourAccount-6.js │ │ │ │ │ │ │ ├── listingFees-5.js │ │ │ │ │ │ │ ├── locationUsa-4.js │ │ │ │ │ │ │ ├── lock-3.js │ │ │ │ │ │ │ ├── loop-0.js │ │ │ │ │ │ │ ├── lowFees-4.js │ │ │ │ │ │ │ ├── manageWeb3SignersAcct-1.js │ │ │ │ │ │ │ ├── miningCoins-3.js │ │ │ │ │ │ │ ├── mintedNft-2.js │ │ │ │ │ │ │ ├── mobileCharts-3.js │ │ │ │ │ │ │ ├── mobileError-4.js │ │ │ │ │ │ │ ├── mobileNotifcation-3.js │ │ │ │ │ │ │ ├── mobileSuccess-4.js │ │ │ │ │ │ │ ├── mobileWarning-3.js │ │ │ │ │ │ │ ├── moneyCrypto-0.js │ │ │ │ │ │ │ ├── moneyEarn-3.js │ │ │ │ │ │ │ ├── moneySwift-4.js │ │ │ │ │ │ │ ├── monitoringPerformance-5.js │ │ │ │ │ │ │ ├── moreThanBitcoin-3.js │ │ │ │ │ │ │ ├── multiAccountsAndCards-4.js │ │ │ │ │ │ │ ├── multiPlatform-3.js │ │ │ │ │ │ │ ├── multipleAssets-3.js │ │ │ │ │ │ │ ├── musicAndSounds-3.js │ │ │ │ │ │ │ ├── myNumberCard-4.js │ │ │ │ │ │ │ ├── newUserChecklistBuyCrypto-3.js │ │ │ │ │ │ │ ├── newUserChecklistCompleteAccount-3.js │ │ │ │ │ │ │ ├── newUserChecklistVerifyId-3.js │ │ │ │ │ │ │ ├── nftAvatar-4.js │ │ │ │ │ │ │ ├── nftLibrary-3.js │ │ │ │ │ │ │ ├── nftNavigation-5.js │ │ │ │ │ │ │ ├── noAnnualFee-4.js │ │ │ │ │ │ │ ├── noNftFound-3.js │ │ │ │ │ │ │ ├── noVisibility-3.js │ │ │ │ │ │ │ ├── noWiFi-3.js │ │ │ │ │ │ │ ├── notificationHubAnalysis-5.js │ │ │ │ │ │ │ ├── notificationHubNews-7.js │ │ │ │ │ │ │ ├── notificationHubPortfolio-4.js │ │ │ │ │ │ │ ├── notificationHubSocial-2.js │ │ │ │ │ │ │ ├── notifications-4.js │ │ │ │ │ │ │ ├── orders-2.js │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ ├── partialCoins-3.js │ │ │ │ │ │ │ ├── participateNavigation-6.js │ │ │ │ │ │ │ ├── passport-2.js │ │ │ │ │ │ │ ├── passwordWalletLocked-3.js │ │ │ │ │ │ │ ├── payNavigation-6.js │ │ │ │ │ │ │ ├── paypal-3.js │ │ │ │ │ │ │ ├── peerToPeer-2.js │ │ │ │ │ │ │ ├── phone-3.js │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ ├── pieChartData-0.js │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ ├── pizza-3.js │ │ │ │ │ │ │ ├── planet-5.js │ │ │ │ │ │ │ ├── pluginBrowser-4.js │ │ │ │ │ │ │ ├── podium-0.js │ │ │ │ │ │ │ ├── positiveReviews-3.js │ │ │ │ │ │ │ ├── predictionMarkets-3.js │ │ │ │ │ │ │ ├── premiumInvestor-2.js │ │ │ │ │ │ │ ├── priceTracking-3.js │ │ │ │ │ │ │ ├── primeMobileApp-3.js │ │ │ │ │ │ │ ├── primeNavigation-6.js │ │ │ │ │ │ │ ├── privateClientNavigation-5.js │ │ │ │ │ │ │ ├── proNavigation-5.js │ │ │ │ │ │ │ ├── protectionPlan-3.js │ │ │ │ │ │ │ ├── queryTransactNavigation-5.js │ │ │ │ │ │ │ ├── receipt-3.js │ │ │ │ │ │ │ ├── recurringPurchases-2.js │ │ │ │ │ │ │ ├── restaking-3.js │ │ │ │ │ │ │ ├── reviewAndAdd-3.js │ │ │ │ │ │ │ ├── rewardsNavigation-5.js │ │ │ │ │ │ │ ├── riskStaking-3.js │ │ │ │ │ │ │ ├── robot-0.js │ │ │ │ │ │ │ ├── rosettaNavigation-4.js │ │ │ │ │ │ │ ├── safe-3.js │ │ │ │ │ │ │ ├── securedAssets-5.js │ │ │ │ │ │ │ ├── security-3.js │ │ │ │ │ │ │ ├── securityCoinShield-5.js │ │ │ │ │ │ │ ├── securityKey-3.js │ │ │ │ │ │ │ ├── seedPhrase-3.js │ │ │ │ │ │ │ ├── selectAddNft-2.js │ │ │ │ │ │ │ ├── selfCustodyWallet-5.js │ │ │ │ │ │ │ ├── selfServe-3.js │ │ │ │ │ │ │ ├── sellSendAnytime-3.js │ │ │ │ │ │ │ ├── sendPaymentToOthers-4.js │ │ │ │ │ │ │ ├── settings-3.js │ │ │ │ │ │ │ ├── settled-3.js │ │ │ │ │ │ │ ├── shield-4.js │ │ │ │ │ │ │ ├── sideChainSide-3.js │ │ │ │ │ │ │ ├── signInNavigation-5.js │ │ │ │ │ │ │ ├── smsAuthenticate-3.js │ │ │ │ │ │ │ ├── sparkleCoinbaseOne-0.js │ │ │ │ │ │ │ ├── ssnCard-3.js │ │ │ │ │ │ │ ├── stableCoinMetaphor-4.js │ │ │ │ │ │ │ ├── stacking-3.js │ │ │ │ │ │ │ ├── stakingGraph-5.js │ │ │ │ │ │ │ ├── standWithCryptoLogoNavigation-3.js │ │ │ │ │ │ │ ├── startToday-3.js │ │ │ │ │ │ │ ├── strongInfo-3.js │ │ │ │ │ │ │ ├── strongWarning-4.js │ │ │ │ │ │ │ ├── successPhone-3.js │ │ │ │ │ │ │ ├── support-5.js │ │ │ │ │ │ │ ├── supportChat-5.js │ │ │ │ │ │ │ ├── takeQuiz-3.js │ │ │ │ │ │ │ ├── target-4.js │ │ │ │ │ │ │ ├── taxBeta-3.js │ │ │ │ │ │ │ ├── taxCenterNavigation-7.js │ │ │ │ │ │ │ ├── taxSeason-3.js │ │ │ │ │ │ │ ├── taxes-4.js │ │ │ │ │ │ │ ├── taxesArrangement-3.js │ │ │ │ │ │ │ ├── timingCheck-4.js │ │ │ │ │ │ │ ├── tokenBaskets-4.js │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ ├── trading-2.js │ │ │ │ │ │ │ ├── transferSend-3.js │ │ │ │ │ │ │ ├── transistor-2.js │ │ │ │ │ │ │ ├── trendingAssets-4.js │ │ │ │ │ │ │ ├── trusted-5.js │ │ │ │ │ │ │ ├── tryAgainLater-3.js │ │ │ │ │ │ │ ├── twoBonus-0.js │ │ │ │ │ │ │ ├── typeScript-3.js │ │ │ │ │ │ │ ├── ubiKey-3.js │ │ │ │ │ │ │ ├── usaProduct-3.js │ │ │ │ │ │ │ ├── usdcEarn-1.js │ │ │ │ │ │ │ ├── usdcInterest-2.js │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ ├── usdcLogo-1.js │ │ │ │ │ │ │ ├── usdcRewards-1.js │ │ │ │ │ │ │ ├── usdcRewardsRibbon-1.js │ │ │ │ │ │ │ ├── usdcToken-1.js │ │ │ │ │ │ │ ├── venturesNavigation-4.js │ │ │ │ │ │ │ ├── verifiedPools-2.js │ │ │ │ │ │ │ ├── videoCalendar-4.js │ │ │ │ │ │ │ ├── videoContent-5.js │ │ │ │ │ │ │ ├── waiting-3.js │ │ │ │ │ │ │ ├── waitingForConsensus-3.js │ │ │ │ │ │ │ ├── wallet-3.js │ │ │ │ │ │ │ ├── walletAsServiceNavigation-6.js │ │ │ │ │ │ │ ├── walletDeposit-3.js │ │ │ │ │ │ │ ├── walletError-5.js │ │ │ │ │ │ │ ├── walletExchange-3.js │ │ │ │ │ │ │ ├── walletLinkNavigation-4.js │ │ │ │ │ │ │ ├── walletLogoNavigation-6.js │ │ │ │ │ │ │ ├── walletNavigation-6.js │ │ │ │ │ │ │ ├── walletPassword-4.js │ │ │ │ │ │ │ ├── walletSuccess-5.js │ │ │ │ │ │ │ ├── walletWarning-4.js │ │ │ │ │ │ │ ├── warning-4.js │ │ │ │ │ │ │ ├── winBTC-3.js │ │ │ │ │ │ │ ├── worldwide-3.js │ │ │ │ │ │ │ └── wrapEth-4.js │ │ │ │ │ │ └── light/ │ │ │ │ │ │ └── walletAsServiceNavigation-0.js │ │ │ │ │ └── types/ │ │ │ │ │ └── PictogramName.ts │ │ │ │ ├── spotIcon/ │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── descriptionMap.ts │ │ │ │ │ │ ├── names.ts │ │ │ │ │ │ ├── svgEsmMap.ts │ │ │ │ │ │ ├── svgJsMap.ts │ │ │ │ │ │ └── versionMap.ts │ │ │ │ │ ├── svgJs/ │ │ │ │ │ │ ├── cjs/ │ │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ │ ├── 2fa-1.js │ │ │ │ │ │ │ │ ├── advancedTradeProduct-3.js │ │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEe-0.js │ │ │ │ │ │ │ │ ├── assetHubProduct-2.js │ │ │ │ │ │ │ │ ├── assetManagementProduct-3.js │ │ │ │ │ │ │ │ ├── authenticator-1.js │ │ │ │ │ │ │ │ ├── bank-3.js │ │ │ │ │ │ │ │ ├── base-6.js │ │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ │ ├── borrowProduct-3.js │ │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ │ ├── cb1Cash-2.js │ │ │ │ │ │ │ │ ├── chat-1.js │ │ │ │ │ │ │ │ ├── cloudProduct-2.js │ │ │ │ │ │ │ │ ├── coinbase-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneChart-2.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProduct-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ │ ├── commerceProduct-3.js │ │ │ │ │ │ │ │ ├── contract-0.js │ │ │ │ │ │ │ │ ├── creditCard-1.js │ │ │ │ │ │ │ │ ├── custodyProduct-2.js │ │ │ │ │ │ │ │ ├── dataMarketplace-3.js │ │ │ │ │ │ │ │ ├── delegate-1.js │ │ │ │ │ │ │ │ ├── delegateProduct-2.js │ │ │ │ │ │ │ │ ├── derivativesProduct-5.js │ │ │ │ │ │ │ │ ├── done-2.js │ │ │ │ │ │ │ │ ├── email-1.js │ │ │ │ │ │ │ │ ├── error-2.js │ │ │ │ │ │ │ │ ├── exchangeProduct-3.js │ │ │ │ │ │ │ │ ├── fast-2.js │ │ │ │ │ │ │ │ ├── helpCenterProduct-3.js │ │ │ │ │ │ │ │ ├── idVerification-3.js │ │ │ │ │ │ │ │ ├── instantAccess-1.js │ │ │ │ │ │ │ │ ├── institutionalProduct-2.js │ │ │ │ │ │ │ │ ├── instoAdvancedTradeProduct-0.js │ │ │ │ │ │ │ │ ├── instoAssetHubProduct-0.js │ │ │ │ │ │ │ │ ├── instoAuthenticator-0.js │ │ │ │ │ │ │ │ ├── instoBorrowProduct-0.js │ │ │ │ │ │ │ │ ├── instoBusinessProduct-0.js │ │ │ │ │ │ │ │ ├── instoChat-0.js │ │ │ │ │ │ │ │ ├── instoCloudProduct-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneEarn-0.js │ │ │ │ │ │ │ │ ├── instoCommerceProduct-0.js │ │ │ │ │ │ │ │ ├── instoCustodyProduct-0.js │ │ │ │ │ │ │ │ ├── instoDataMarketplace-0.js │ │ │ │ │ │ │ │ ├── instoDelegate-1.js │ │ │ │ │ │ │ │ ├── instoDerivativesProduct-0.js │ │ │ │ │ │ │ │ ├── instoFast-1.js │ │ │ │ │ │ │ │ ├── instoHelpCenterProduct-0.js │ │ │ │ │ │ │ │ ├── instoIdVerification-0.js │ │ │ │ │ │ │ │ ├── instoLayeredNetworks-0.js │ │ │ │ │ │ │ │ ├── instoLearningRewardsProduct-0.js │ │ │ │ │ │ │ │ ├── instoMultiCoin-0.js │ │ │ │ │ │ │ │ ├── instoPaySDKProduct-0.js │ │ │ │ │ │ │ │ ├── instoPieChart-0.js │ │ │ │ │ │ │ │ ├── instoPrimeProduct-0.js │ │ │ │ │ │ │ │ ├── instoPrivateClientProduct-1.js │ │ │ │ │ │ │ │ ├── instoProductCoinbaseCard-0.js │ │ │ │ │ │ │ │ ├── instoProductCompliance-0.js │ │ │ │ │ │ │ │ ├── instoProductPro-0.js │ │ │ │ │ │ │ │ ├── instoProductWallet-0.js │ │ │ │ │ │ │ │ ├── instoRecurringPurchases-1.js │ │ │ │ │ │ │ │ ├── instoRewardsProduct-0.js │ │ │ │ │ │ │ │ ├── instoShield-0.js │ │ │ │ │ │ │ │ ├── instoSignInProduct-0.js │ │ │ │ │ │ │ │ ├── instoStakingProduct-0.js │ │ │ │ │ │ │ │ ├── instoWalletAsAServiceProduct-0.js │ │ │ │ │ │ │ │ ├── internationalExchangeProduct-1.js │ │ │ │ │ │ │ │ ├── layeredNetworks-1.js │ │ │ │ │ │ │ │ ├── learningRewardsProduct-3.js │ │ │ │ │ │ │ │ ├── multiCoin-1.js │ │ │ │ │ │ │ │ ├── nftProduct-2.js │ │ │ │ │ │ │ │ ├── noFees-1.js │ │ │ │ │ │ │ │ ├── nodeProduct-2.js │ │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ │ ├── participateProduct-2.js │ │ │ │ │ │ │ │ ├── paySDKProduct-2.js │ │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ │ ├── primeProduct-3.js │ │ │ │ │ │ │ │ ├── privateClientProduct-1.js │ │ │ │ │ │ │ │ ├── productCoinbaseCard-3.js │ │ │ │ │ │ │ │ ├── productCompliance-2.js │ │ │ │ │ │ │ │ ├── productEarn-4.js │ │ │ │ │ │ │ │ ├── productPro-2.js │ │ │ │ │ │ │ │ ├── productWallet-3.js │ │ │ │ │ │ │ │ ├── recurringPurchases-3.js │ │ │ │ │ │ │ │ ├── rewardsProduct-3.js │ │ │ │ │ │ │ │ ├── rosettaProduct-3.js │ │ │ │ │ │ │ │ ├── send-3.js │ │ │ │ │ │ │ │ ├── shield-1.js │ │ │ │ │ │ │ │ ├── signInProduct-2.js │ │ │ │ │ │ │ │ ├── stakingProduct-3.js │ │ │ │ │ │ │ │ ├── venturesProduct-2.js │ │ │ │ │ │ │ │ ├── wallet-2.js │ │ │ │ │ │ │ │ ├── walletAsAServiceProduct-3.js │ │ │ │ │ │ │ │ ├── walletLogo-5.js │ │ │ │ │ │ │ │ └── warning-1.js │ │ │ │ │ │ │ ├── light/ │ │ │ │ │ │ │ │ ├── 2fa-1.js │ │ │ │ │ │ │ │ ├── advancedTradeProduct-3.js │ │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateAe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateBe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateCe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateDe-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEa-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEb-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEc-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEd-0.js │ │ │ │ │ │ │ │ ├── assetEmptyStateEe-0.js │ │ │ │ │ │ │ │ ├── assetHubProduct-2.js │ │ │ │ │ │ │ │ ├── assetManagementProduct-3.js │ │ │ │ │ │ │ │ ├── authenticator-1.js │ │ │ │ │ │ │ │ ├── bank-3.js │ │ │ │ │ │ │ │ ├── base-6.js │ │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ │ ├── borrowProduct-3.js │ │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ │ ├── cb1Cash-2.js │ │ │ │ │ │ │ │ ├── chat-1.js │ │ │ │ │ │ │ │ ├── cloudProduct-2.js │ │ │ │ │ │ │ │ ├── coinbase-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneChart-2.js │ │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProduct-1.js │ │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ │ ├── commerceProduct-3.js │ │ │ │ │ │ │ │ ├── contract-0.js │ │ │ │ │ │ │ │ ├── creditCard-1.js │ │ │ │ │ │ │ │ ├── custodyProduct-2.js │ │ │ │ │ │ │ │ ├── dataMarketplace-3.js │ │ │ │ │ │ │ │ ├── delegate-1.js │ │ │ │ │ │ │ │ ├── delegateProduct-2.js │ │ │ │ │ │ │ │ ├── derivativesProduct-5.js │ │ │ │ │ │ │ │ ├── done-2.js │ │ │ │ │ │ │ │ ├── email-1.js │ │ │ │ │ │ │ │ ├── error-2.js │ │ │ │ │ │ │ │ ├── exchangeProduct-3.js │ │ │ │ │ │ │ │ ├── fast-2.js │ │ │ │ │ │ │ │ ├── helpCenterProduct-3.js │ │ │ │ │ │ │ │ ├── idVerification-3.js │ │ │ │ │ │ │ │ ├── instantAccess-1.js │ │ │ │ │ │ │ │ ├── institutionalProduct-2.js │ │ │ │ │ │ │ │ ├── instoAdvancedTradeProduct-0.js │ │ │ │ │ │ │ │ ├── instoAssetHubProduct-0.js │ │ │ │ │ │ │ │ ├── instoAuthenticator-0.js │ │ │ │ │ │ │ │ ├── instoBorrowProduct-0.js │ │ │ │ │ │ │ │ ├── instoBusinessProduct-0.js │ │ │ │ │ │ │ │ ├── instoChat-0.js │ │ │ │ │ │ │ │ ├── instoCloudProduct-0.js │ │ │ │ │ │ │ │ ├── instoCoinbaseOneEarn-0.js │ │ │ │ │ │ │ │ ├── instoCommerceProduct-0.js │ │ │ │ │ │ │ │ ├── instoCustodyProduct-0.js │ │ │ │ │ │ │ │ ├── instoDataMarketplace-0.js │ │ │ │ │ │ │ │ ├── instoDelegate-1.js │ │ │ │ │ │ │ │ ├── instoDerivativesProduct-0.js │ │ │ │ │ │ │ │ ├── instoFast-1.js │ │ │ │ │ │ │ │ ├── instoHelpCenterProduct-0.js │ │ │ │ │ │ │ │ ├── instoIdVerification-0.js │ │ │ │ │ │ │ │ ├── instoLayeredNetworks-0.js │ │ │ │ │ │ │ │ ├── instoLearningRewardsProduct-0.js │ │ │ │ │ │ │ │ ├── instoMultiCoin-0.js │ │ │ │ │ │ │ │ ├── instoPaySDKProduct-0.js │ │ │ │ │ │ │ │ ├── instoPieChart-0.js │ │ │ │ │ │ │ │ ├── instoPrimeProduct-0.js │ │ │ │ │ │ │ │ ├── instoPrivateClientProduct-1.js │ │ │ │ │ │ │ │ ├── instoProductCoinbaseCard-0.js │ │ │ │ │ │ │ │ ├── instoProductCompliance-0.js │ │ │ │ │ │ │ │ ├── instoProductPro-0.js │ │ │ │ │ │ │ │ ├── instoProductWallet-0.js │ │ │ │ │ │ │ │ ├── instoRecurringPurchases-1.js │ │ │ │ │ │ │ │ ├── instoRewardsProduct-0.js │ │ │ │ │ │ │ │ ├── instoShield-0.js │ │ │ │ │ │ │ │ ├── instoSignInProduct-0.js │ │ │ │ │ │ │ │ ├── instoStakingProduct-0.js │ │ │ │ │ │ │ │ ├── instoWalletAsAServiceProduct-0.js │ │ │ │ │ │ │ │ ├── internationalExchangeProduct-1.js │ │ │ │ │ │ │ │ ├── layeredNetworks-1.js │ │ │ │ │ │ │ │ ├── learningRewardsProduct-3.js │ │ │ │ │ │ │ │ ├── multiCoin-1.js │ │ │ │ │ │ │ │ ├── nftProduct-2.js │ │ │ │ │ │ │ │ ├── noFees-1.js │ │ │ │ │ │ │ │ ├── nodeProduct-2.js │ │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ │ ├── participateProduct-2.js │ │ │ │ │ │ │ │ ├── paySDKProduct-2.js │ │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ │ ├── primeProduct-3.js │ │ │ │ │ │ │ │ ├── privateClientProduct-1.js │ │ │ │ │ │ │ │ ├── productCoinbaseCard-3.js │ │ │ │ │ │ │ │ ├── productCompliance-2.js │ │ │ │ │ │ │ │ ├── productEarn-4.js │ │ │ │ │ │ │ │ ├── productPro-2.js │ │ │ │ │ │ │ │ ├── productWallet-3.js │ │ │ │ │ │ │ │ ├── recurringPurchases-3.js │ │ │ │ │ │ │ │ ├── rewardsProduct-3.js │ │ │ │ │ │ │ │ ├── rosettaProduct-3.js │ │ │ │ │ │ │ │ ├── send-3.js │ │ │ │ │ │ │ │ ├── shield-1.js │ │ │ │ │ │ │ │ ├── signInProduct-2.js │ │ │ │ │ │ │ │ ├── stakingProduct-3.js │ │ │ │ │ │ │ │ ├── venturesProduct-2.js │ │ │ │ │ │ │ │ ├── wallet-2.js │ │ │ │ │ │ │ │ ├── walletAsAServiceProduct-3.js │ │ │ │ │ │ │ │ ├── walletLogo-5.js │ │ │ │ │ │ │ │ └── warning-1.js │ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ │ ├── 2fa-1.js │ │ │ │ │ │ │ ├── advancedTradeProduct-3.js │ │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ │ ├── assetEmptyStateAa-0.js │ │ │ │ │ │ │ ├── assetEmptyStateAb-0.js │ │ │ │ │ │ │ ├── assetEmptyStateAc-0.js │ │ │ │ │ │ │ ├── assetEmptyStateAd-0.js │ │ │ │ │ │ │ ├── assetEmptyStateAe-0.js │ │ │ │ │ │ │ ├── assetEmptyStateBa-0.js │ │ │ │ │ │ │ ├── assetEmptyStateBb-0.js │ │ │ │ │ │ │ ├── assetEmptyStateBc-0.js │ │ │ │ │ │ │ ├── assetEmptyStateBd-0.js │ │ │ │ │ │ │ ├── assetEmptyStateBe-0.js │ │ │ │ │ │ │ ├── assetEmptyStateCa-0.js │ │ │ │ │ │ │ ├── assetEmptyStateCb-0.js │ │ │ │ │ │ │ ├── assetEmptyStateCc-0.js │ │ │ │ │ │ │ ├── assetEmptyStateCd-0.js │ │ │ │ │ │ │ ├── assetEmptyStateCe-0.js │ │ │ │ │ │ │ ├── assetEmptyStateDa-0.js │ │ │ │ │ │ │ ├── assetEmptyStateDb-0.js │ │ │ │ │ │ │ ├── assetEmptyStateDc-0.js │ │ │ │ │ │ │ ├── assetEmptyStateDd-0.js │ │ │ │ │ │ │ ├── assetEmptyStateDe-0.js │ │ │ │ │ │ │ ├── assetEmptyStateEa-0.js │ │ │ │ │ │ │ ├── assetEmptyStateEb-0.js │ │ │ │ │ │ │ ├── assetEmptyStateEc-0.js │ │ │ │ │ │ │ ├── assetEmptyStateEd-0.js │ │ │ │ │ │ │ ├── assetEmptyStateEe-0.js │ │ │ │ │ │ │ ├── assetHubProduct-2.js │ │ │ │ │ │ │ ├── assetManagementProduct-3.js │ │ │ │ │ │ │ ├── authenticator-1.js │ │ │ │ │ │ │ ├── bank-3.js │ │ │ │ │ │ │ ├── base-6.js │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ ├── borrowProduct-3.js │ │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ │ ├── cb1Cash-2.js │ │ │ │ │ │ │ ├── chat-1.js │ │ │ │ │ │ │ ├── cloudProduct-2.js │ │ │ │ │ │ │ ├── coinbase-1.js │ │ │ │ │ │ │ ├── coinbaseOneChart-2.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ │ ├── coinbaseOneProduct-1.js │ │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ │ ├── commerceProduct-3.js │ │ │ │ │ │ │ ├── contract-0.js │ │ │ │ │ │ │ ├── creditCard-1.js │ │ │ │ │ │ │ ├── custodyProduct-2.js │ │ │ │ │ │ │ ├── dataMarketplace-3.js │ │ │ │ │ │ │ ├── delegate-1.js │ │ │ │ │ │ │ ├── delegateProduct-2.js │ │ │ │ │ │ │ ├── derivativesProduct-5.js │ │ │ │ │ │ │ ├── done-2.js │ │ │ │ │ │ │ ├── email-1.js │ │ │ │ │ │ │ ├── error-2.js │ │ │ │ │ │ │ ├── exchangeProduct-3.js │ │ │ │ │ │ │ ├── fast-2.js │ │ │ │ │ │ │ ├── helpCenterProduct-3.js │ │ │ │ │ │ │ ├── idVerification-3.js │ │ │ │ │ │ │ ├── instantAccess-1.js │ │ │ │ │ │ │ ├── institutionalProduct-2.js │ │ │ │ │ │ │ ├── instoAdvancedTradeProduct-0.js │ │ │ │ │ │ │ ├── instoAssetHubProduct-0.js │ │ │ │ │ │ │ ├── instoAuthenticator-0.js │ │ │ │ │ │ │ ├── instoBorrowProduct-0.js │ │ │ │ │ │ │ ├── instoBusinessProduct-0.js │ │ │ │ │ │ │ ├── instoChat-0.js │ │ │ │ │ │ │ ├── instoCloudProduct-0.js │ │ │ │ │ │ │ ├── instoCoinbaseOneEarn-0.js │ │ │ │ │ │ │ ├── instoCommerceProduct-0.js │ │ │ │ │ │ │ ├── instoCustodyProduct-0.js │ │ │ │ │ │ │ ├── instoDataMarketplace-0.js │ │ │ │ │ │ │ ├── instoDelegate-1.js │ │ │ │ │ │ │ ├── instoDerivativesProduct-0.js │ │ │ │ │ │ │ ├── instoFast-1.js │ │ │ │ │ │ │ ├── instoHelpCenterProduct-0.js │ │ │ │ │ │ │ ├── instoIdVerification-0.js │ │ │ │ │ │ │ ├── instoLayeredNetworks-0.js │ │ │ │ │ │ │ ├── instoLearningRewardsProduct-0.js │ │ │ │ │ │ │ ├── instoMultiCoin-0.js │ │ │ │ │ │ │ ├── instoPaySDKProduct-0.js │ │ │ │ │ │ │ ├── instoPieChart-0.js │ │ │ │ │ │ │ ├── instoPrimeProduct-0.js │ │ │ │ │ │ │ ├── instoPrivateClientProduct-1.js │ │ │ │ │ │ │ ├── instoProductCoinbaseCard-0.js │ │ │ │ │ │ │ ├── instoProductCompliance-0.js │ │ │ │ │ │ │ ├── instoProductPro-0.js │ │ │ │ │ │ │ ├── instoProductWallet-0.js │ │ │ │ │ │ │ ├── instoRecurringPurchases-1.js │ │ │ │ │ │ │ ├── instoRewardsProduct-0.js │ │ │ │ │ │ │ ├── instoShield-0.js │ │ │ │ │ │ │ ├── instoSignInProduct-0.js │ │ │ │ │ │ │ ├── instoStakingProduct-0.js │ │ │ │ │ │ │ ├── instoWalletAsAServiceProduct-0.js │ │ │ │ │ │ │ ├── internationalExchangeProduct-1.js │ │ │ │ │ │ │ ├── layeredNetworks-1.js │ │ │ │ │ │ │ ├── learningRewardsProduct-3.js │ │ │ │ │ │ │ ├── multiCoin-1.js │ │ │ │ │ │ │ ├── nftProduct-2.js │ │ │ │ │ │ │ ├── noFees-1.js │ │ │ │ │ │ │ ├── nodeProduct-2.js │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ ├── participateProduct-2.js │ │ │ │ │ │ │ ├── paySDKProduct-2.js │ │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ │ ├── primeProduct-3.js │ │ │ │ │ │ │ ├── privateClientProduct-1.js │ │ │ │ │ │ │ ├── productCoinbaseCard-3.js │ │ │ │ │ │ │ ├── productCompliance-2.js │ │ │ │ │ │ │ ├── productEarn-4.js │ │ │ │ │ │ │ ├── productPro-2.js │ │ │ │ │ │ │ ├── productWallet-3.js │ │ │ │ │ │ │ ├── recurringPurchases-3.js │ │ │ │ │ │ │ ├── rewardsProduct-3.js │ │ │ │ │ │ │ ├── rosettaProduct-3.js │ │ │ │ │ │ │ ├── send-3.js │ │ │ │ │ │ │ ├── shield-1.js │ │ │ │ │ │ │ ├── signInProduct-2.js │ │ │ │ │ │ │ ├── stakingProduct-3.js │ │ │ │ │ │ │ ├── venturesProduct-2.js │ │ │ │ │ │ │ ├── wallet-2.js │ │ │ │ │ │ │ ├── walletAsAServiceProduct-3.js │ │ │ │ │ │ │ ├── walletLogo-5.js │ │ │ │ │ │ │ └── warning-1.js │ │ │ │ │ │ └── esm/ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ ├── 2fa-1.js │ │ │ │ │ │ ├── advancedTradeProduct-3.js │ │ │ │ │ │ ├── arrowsUpDown-0.js │ │ │ │ │ │ ├── assetEmptyStateAa-0.js │ │ │ │ │ │ ├── assetEmptyStateAb-0.js │ │ │ │ │ │ ├── assetEmptyStateAc-0.js │ │ │ │ │ │ ├── assetEmptyStateAd-0.js │ │ │ │ │ │ ├── assetEmptyStateAe-0.js │ │ │ │ │ │ ├── assetEmptyStateBa-0.js │ │ │ │ │ │ ├── assetEmptyStateBb-0.js │ │ │ │ │ │ ├── assetEmptyStateBc-0.js │ │ │ │ │ │ ├── assetEmptyStateBd-0.js │ │ │ │ │ │ ├── assetEmptyStateBe-0.js │ │ │ │ │ │ ├── assetEmptyStateCa-0.js │ │ │ │ │ │ ├── assetEmptyStateCb-0.js │ │ │ │ │ │ ├── assetEmptyStateCc-0.js │ │ │ │ │ │ ├── assetEmptyStateCd-0.js │ │ │ │ │ │ ├── assetEmptyStateCe-0.js │ │ │ │ │ │ ├── assetEmptyStateDa-0.js │ │ │ │ │ │ ├── assetEmptyStateDb-0.js │ │ │ │ │ │ ├── assetEmptyStateDc-0.js │ │ │ │ │ │ ├── assetEmptyStateDd-0.js │ │ │ │ │ │ ├── assetEmptyStateDe-0.js │ │ │ │ │ │ ├── assetEmptyStateEa-0.js │ │ │ │ │ │ ├── assetEmptyStateEb-0.js │ │ │ │ │ │ ├── assetEmptyStateEc-0.js │ │ │ │ │ │ ├── assetEmptyStateEd-0.js │ │ │ │ │ │ ├── assetEmptyStateEe-0.js │ │ │ │ │ │ ├── assetHubProduct-2.js │ │ │ │ │ │ ├── assetManagementProduct-3.js │ │ │ │ │ │ ├── authenticator-1.js │ │ │ │ │ │ ├── bank-3.js │ │ │ │ │ │ ├── base-6.js │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ ├── borrowProduct-3.js │ │ │ │ │ │ ├── businessProduct-0.js │ │ │ │ │ │ ├── cb1Cash-2.js │ │ │ │ │ │ ├── chat-1.js │ │ │ │ │ │ ├── cloudProduct-2.js │ │ │ │ │ │ ├── coinbase-1.js │ │ │ │ │ │ ├── coinbaseOneChart-2.js │ │ │ │ │ │ ├── coinbaseOneEarn-1.js │ │ │ │ │ │ ├── coinbaseOneProduct-1.js │ │ │ │ │ │ ├── coinbaseOneProductInvestWeekly-0.js │ │ │ │ │ │ ├── commerceProduct-3.js │ │ │ │ │ │ ├── contract-0.js │ │ │ │ │ │ ├── creditCard-1.js │ │ │ │ │ │ ├── custodyProduct-2.js │ │ │ │ │ │ ├── dataMarketplace-3.js │ │ │ │ │ │ ├── delegate-1.js │ │ │ │ │ │ ├── delegateProduct-2.js │ │ │ │ │ │ ├── derivativesProduct-5.js │ │ │ │ │ │ ├── done-2.js │ │ │ │ │ │ ├── email-1.js │ │ │ │ │ │ ├── error-2.js │ │ │ │ │ │ ├── exchangeProduct-3.js │ │ │ │ │ │ ├── fast-2.js │ │ │ │ │ │ ├── helpCenterProduct-3.js │ │ │ │ │ │ ├── idVerification-3.js │ │ │ │ │ │ ├── instantAccess-1.js │ │ │ │ │ │ ├── institutionalProduct-2.js │ │ │ │ │ │ ├── instoAdvancedTradeProduct-0.js │ │ │ │ │ │ ├── instoAssetHubProduct-0.js │ │ │ │ │ │ ├── instoAuthenticator-0.js │ │ │ │ │ │ ├── instoBorrowProduct-0.js │ │ │ │ │ │ ├── instoBusinessProduct-0.js │ │ │ │ │ │ ├── instoChat-0.js │ │ │ │ │ │ ├── instoCloudProduct-0.js │ │ │ │ │ │ ├── instoCoinbaseOneEarn-0.js │ │ │ │ │ │ ├── instoCommerceProduct-0.js │ │ │ │ │ │ ├── instoCustodyProduct-0.js │ │ │ │ │ │ ├── instoDataMarketplace-0.js │ │ │ │ │ │ ├── instoDelegate-1.js │ │ │ │ │ │ ├── instoDerivativesProduct-0.js │ │ │ │ │ │ ├── instoFast-1.js │ │ │ │ │ │ ├── instoHelpCenterProduct-0.js │ │ │ │ │ │ ├── instoIdVerification-0.js │ │ │ │ │ │ ├── instoLayeredNetworks-0.js │ │ │ │ │ │ ├── instoLearningRewardsProduct-0.js │ │ │ │ │ │ ├── instoMultiCoin-0.js │ │ │ │ │ │ ├── instoPaySDKProduct-0.js │ │ │ │ │ │ ├── instoPieChart-0.js │ │ │ │ │ │ ├── instoPrimeProduct-0.js │ │ │ │ │ │ ├── instoPrivateClientProduct-1.js │ │ │ │ │ │ ├── instoProductCoinbaseCard-0.js │ │ │ │ │ │ ├── instoProductCompliance-0.js │ │ │ │ │ │ ├── instoProductPro-0.js │ │ │ │ │ │ ├── instoProductWallet-0.js │ │ │ │ │ │ ├── instoRecurringPurchases-1.js │ │ │ │ │ │ ├── instoRewardsProduct-0.js │ │ │ │ │ │ ├── instoShield-0.js │ │ │ │ │ │ ├── instoSignInProduct-0.js │ │ │ │ │ │ ├── instoStakingProduct-0.js │ │ │ │ │ │ ├── instoWalletAsAServiceProduct-0.js │ │ │ │ │ │ ├── internationalExchangeProduct-1.js │ │ │ │ │ │ ├── layeredNetworks-1.js │ │ │ │ │ │ ├── learningRewardsProduct-3.js │ │ │ │ │ │ ├── multiCoin-1.js │ │ │ │ │ │ ├── nftProduct-2.js │ │ │ │ │ │ ├── noFees-1.js │ │ │ │ │ │ ├── nodeProduct-2.js │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ ├── participateProduct-2.js │ │ │ │ │ │ ├── paySDKProduct-2.js │ │ │ │ │ │ ├── pieChart-3.js │ │ │ │ │ │ ├── primeProduct-3.js │ │ │ │ │ │ ├── privateClientProduct-1.js │ │ │ │ │ │ ├── productCoinbaseCard-3.js │ │ │ │ │ │ ├── productCompliance-2.js │ │ │ │ │ │ ├── productEarn-4.js │ │ │ │ │ │ ├── productPro-2.js │ │ │ │ │ │ ├── productWallet-3.js │ │ │ │ │ │ ├── recurringPurchases-3.js │ │ │ │ │ │ ├── rewardsProduct-3.js │ │ │ │ │ │ ├── rosettaProduct-3.js │ │ │ │ │ │ ├── send-3.js │ │ │ │ │ │ ├── shield-1.js │ │ │ │ │ │ ├── signInProduct-2.js │ │ │ │ │ │ ├── stakingProduct-3.js │ │ │ │ │ │ ├── venturesProduct-2.js │ │ │ │ │ │ ├── wallet-2.js │ │ │ │ │ │ ├── walletAsAServiceProduct-3.js │ │ │ │ │ │ ├── walletLogo-5.js │ │ │ │ │ │ └── warning-1.js │ │ │ │ │ └── types/ │ │ │ │ │ └── SpotIconName.ts │ │ │ │ ├── spotRectangle/ │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── descriptionMap.ts │ │ │ │ │ │ ├── names.ts │ │ │ │ │ │ ├── svgEsmMap.ts │ │ │ │ │ │ ├── svgJsMap.ts │ │ │ │ │ │ └── versionMap.ts │ │ │ │ │ ├── svgJs/ │ │ │ │ │ │ ├── cjs/ │ │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ │ ├── addBank-4.js │ │ │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ │ │ ├── advancedTradeCharts-2.js │ │ │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ │ ├── advancedTradingUi-2.js │ │ │ │ │ │ │ │ ├── apiKey-5.js │ │ │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ │ │ ├── appUpdate-2.js │ │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ │ ├── backedByUsDollar-4.js │ │ │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ │ │ ├── bigBtc-3.js │ │ │ │ │ │ │ │ ├── blockchain-5.js │ │ │ │ │ │ │ │ ├── borrowLoan-2.js │ │ │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ │ │ ├── browserExtension-5.js │ │ │ │ │ │ │ │ ├── browserHistory-3.js │ │ │ │ │ │ │ │ ├── calendar-0.js │ │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ │ ├── cardWaitlist-3.js │ │ │ │ │ │ │ │ ├── cb1BankTransfers-1.js │ │ │ │ │ │ │ │ ├── cbEth-4.js │ │ │ │ │ │ │ │ ├── cbbtc-1.js │ │ │ │ │ │ │ │ ├── clawMachinePig-4.js │ │ │ │ │ │ │ │ ├── coinGateway-0.js │ │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-3.js │ │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ │ ├── commerceAccounting-2.js │ │ │ │ │ │ │ │ ├── commerceInvoices-4.js │ │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ │ ├── concierge-1.js │ │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-4.js │ │ │ │ │ │ │ │ ├── connectWalletTutorial-4.js │ │ │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ │ │ ├── creditCardExcitement-4.js │ │ │ │ │ │ │ │ ├── creditCardExcitementCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── crossBorderPayments-3.js │ │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ │ ├── cryptoApps-3.js │ │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ │ ├── cryptoEconomy-3.js │ │ │ │ │ │ │ │ ├── cryptoEconomyCoin-0.js │ │ │ │ │ │ │ │ ├── cryptoEconomyEurc-0.js │ │ │ │ │ │ │ │ ├── cryptoEconomyUSDC-0.js │ │ │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ │ │ ├── cryptoPortfolio-3.js │ │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ │ ├── currency-4.js │ │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ │ ├── derivativesLoop-1.js │ │ │ │ │ │ │ │ ├── diamond-5.js │ │ │ │ │ │ │ │ ├── didDecentralizedIdentity-3.js │ │ │ │ │ │ │ │ ├── digitalCollectibles-3.js │ │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ │ ├── downloadCoinbaseWalletArrow-7.js │ │ │ │ │ │ │ │ ├── downloadingStatement-3.js │ │ │ │ │ │ │ │ ├── earn-4.js │ │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ │ ├── emptyNfts-3.js │ │ │ │ │ │ │ │ ├── emptyTrading-4.js │ │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ │ ├── eth2SellSend-3.js │ │ │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ │ │ ├── eth2SendSellTwo-3.js │ │ │ │ │ │ │ │ ├── ethAddress-3.js │ │ │ │ │ │ │ │ ├── ethStakeOrWrap-3.js │ │ │ │ │ │ │ │ ├── ethStakeOrWrapTwo-3.js │ │ │ │ │ │ │ │ ├── ethStakingMovement-3.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ │ ├── ethTrading-6.js │ │ │ │ │ │ │ │ ├── ethTradingTwo-4.js │ │ │ │ │ │ │ │ ├── ethWrappedStakingRewards-4.js │ │ │ │ │ │ │ │ ├── exploreDecentralizedApps-6.js │ │ │ │ │ │ │ │ ├── faceId-1.js │ │ │ │ │ │ │ │ ├── fiatInterest-1.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-3.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-3.js │ │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ │ │ ├── futures-5.js │ │ │ │ │ │ │ │ ├── gainsAndLosses-5.js │ │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ │ ├── getStartedInMinutes-6.js │ │ │ │ │ │ │ │ ├── giftBoxRewards-5.js │ │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ │ ├── highFees-5.js │ │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ │ ├── insto-0.js │ │ │ │ │ │ │ │ ├── instoAboutOnchain-0.js │ │ │ │ │ │ │ │ ├── instoApiKey-1.js │ │ │ │ │ │ │ │ ├── instoConsensusWaitingForApprovals-0.js │ │ │ │ │ │ │ │ ├── instoCryptoAndMore-2.js │ │ │ │ │ │ │ │ ├── instoCurrency-0.js │ │ │ │ │ │ │ │ ├── instoDesignateSigner-0.js │ │ │ │ │ │ │ │ ├── instoEmptyTrading-1.js │ │ │ │ │ │ │ │ ├── instoEthStakingMovement-1.js │ │ │ │ │ │ │ │ ├── instoGetStartedInMinutes-0.js │ │ │ │ │ │ │ │ ├── instoKey-0.js │ │ │ │ │ │ │ │ ├── instoMargin-0.js │ │ │ │ │ │ │ │ ├── instoOnchainSetupInProgress-0.js │ │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ │ ├── instoQRCode-0.js │ │ │ │ │ │ │ │ ├── instoRefreshKey-0.js │ │ │ │ │ │ │ │ ├── instoSemiCustodial-0.js │ │ │ │ │ │ │ │ ├── instoSetupComplete-0.js │ │ │ │ │ │ │ │ ├── instoSetupOnchain-0.js │ │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ │ ├── insuranceProtection-5.js │ │ │ │ │ │ │ │ ├── invest-4.js │ │ │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ │ │ ├── leadingProtocol-2.js │ │ │ │ │ │ │ │ ├── leadingProtocolMorpho-0.js │ │ │ │ │ │ │ │ ├── ledgerFailed-3.js │ │ │ │ │ │ │ │ ├── ledgerSignatureRejected-3.js │ │ │ │ │ │ │ │ ├── lendGraph-0.js │ │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── linkCoinbaseWallet-7.js │ │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferYellow-1.js │ │ │ │ │ │ │ │ ├── loanValue-2.js │ │ │ │ │ │ │ │ ├── login-5.js │ │ │ │ │ │ │ │ ├── margin-5.js │ │ │ │ │ │ │ │ ├── marginWarning-6.js │ │ │ │ │ │ │ │ ├── mining-5.js │ │ │ │ │ │ │ │ ├── moneyDecentralized-3.js │ │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ │ │ ├── multicoinSupport-3.js │ │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ │ ├── nft-3.js │ │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ │ ├── noTransactions-3.js │ │ │ │ │ │ │ │ ├── notificationsAlt-4.js │ │ │ │ │ │ │ │ ├── onTheList-3.js │ │ │ │ │ │ │ │ ├── openEmail-3.js │ │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ │ ├── portfolioOverview-4.js │ │ │ │ │ │ │ │ ├── portfolioOverviewRelaunch-1.js │ │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ │ ├── primeOrderConfirmation-3.js │ │ │ │ │ │ │ │ ├── primePriceLadder-3.js │ │ │ │ │ │ │ │ ├── primeStaking-4.js │ │ │ │ │ │ │ │ ├── primeTradePreferences-4.js │ │ │ │ │ │ │ │ ├── protectedNotes-4.js │ │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ │ ├── ratDashboard-3.js │ │ │ │ │ │ │ │ ├── ratFoundWallet-4.js │ │ │ │ │ │ │ │ ├── ratMigration-3.js │ │ │ │ │ │ │ │ ├── ratMigrationerror-3.js │ │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ │ ├── referralsBitcoin-4.js │ │ │ │ │ │ │ │ ├── referralsBonus-3.js │ │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ │ ├── referralsGenericCoin-2.js │ │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ │ ├── scanCode-3.js │ │ │ │ │ │ │ │ ├── secureAccount-0.js │ │ │ │ │ │ │ │ ├── secureAndTrusted-3.js │ │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ │ ├── semiCustodial-4.js │ │ │ │ │ │ │ │ ├── sendCryptoFaster-4.js │ │ │ │ │ │ │ │ ├── sendingCrypto-4.js │ │ │ │ │ │ │ │ ├── shareOnSocialMedia-3.js │ │ │ │ │ │ │ │ ├── sidechain-4.js │ │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ │ ├── staking-5.js │ │ │ │ │ │ │ │ ├── stakingUpgrade-0.js │ │ │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-5.js │ │ │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ │ ├── trade-3.js │ │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ │ ├── transferCoins-4.js │ │ │ │ │ │ │ │ ├── transferEth-3.js │ │ │ │ │ │ │ │ ├── transferFunds-5.js │ │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ │ ├── trustedContacts-0.js │ │ │ │ │ │ │ │ ├── unauthorizedTransfers-0.js │ │ │ │ │ │ │ │ ├── uob-4.js │ │ │ │ │ │ │ │ ├── update-5.js │ │ │ │ │ │ │ │ ├── uploadDocument-2.js │ │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ │ ├── usdcLoanEth-0.js │ │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ │ │ ├── walletReconnect-4.js │ │ │ │ │ │ │ │ ├── walletReconnectSuccess-5.js │ │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ │ │ ├── wrapEthTwo-3.js │ │ │ │ │ │ │ │ └── yieldHolding-4.js │ │ │ │ │ │ │ ├── light/ │ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ │ ├── addBank-4.js │ │ │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ │ │ ├── advancedTradeCharts-2.js │ │ │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ │ ├── advancedTradingUi-2.js │ │ │ │ │ │ │ │ ├── apiKey-5.js │ │ │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ │ │ ├── appUpdate-2.js │ │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ │ ├── backedByUsDollar-4.js │ │ │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ │ │ ├── bigBtc-3.js │ │ │ │ │ │ │ │ ├── blockchain-5.js │ │ │ │ │ │ │ │ ├── borrowLoan-2.js │ │ │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ │ │ ├── browserExtension-5.js │ │ │ │ │ │ │ │ ├── browserHistory-3.js │ │ │ │ │ │ │ │ ├── calendar-0.js │ │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ │ ├── cardWaitlist-3.js │ │ │ │ │ │ │ │ ├── cb1BankTransfers-1.js │ │ │ │ │ │ │ │ ├── cbEth-4.js │ │ │ │ │ │ │ │ ├── cbbtc-1.js │ │ │ │ │ │ │ │ ├── clawMachinePig-4.js │ │ │ │ │ │ │ │ ├── coinGateway-0.js │ │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-3.js │ │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ │ ├── commerceAccounting-2.js │ │ │ │ │ │ │ │ ├── commerceInvoices-4.js │ │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ │ ├── concierge-1.js │ │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-4.js │ │ │ │ │ │ │ │ ├── connectWalletTutorial-4.js │ │ │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ │ │ ├── creditCardExcitement-4.js │ │ │ │ │ │ │ │ ├── creditCardExcitementCoinbaseOne-0.js │ │ │ │ │ │ │ │ ├── crossBorderPayments-3.js │ │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ │ ├── cryptoApps-3.js │ │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ │ ├── cryptoEconomy-3.js │ │ │ │ │ │ │ │ ├── cryptoEconomyCoin-0.js │ │ │ │ │ │ │ │ ├── cryptoEconomyEurc-0.js │ │ │ │ │ │ │ │ ├── cryptoEconomyUSDC-0.js │ │ │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ │ │ ├── cryptoPortfolio-3.js │ │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ │ ├── currency-4.js │ │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ │ ├── derivativesLoop-1.js │ │ │ │ │ │ │ │ ├── diamond-5.js │ │ │ │ │ │ │ │ ├── didDecentralizedIdentity-3.js │ │ │ │ │ │ │ │ ├── digitalCollectibles-3.js │ │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ │ ├── downloadCoinbaseWalletArrow-7.js │ │ │ │ │ │ │ │ ├── downloadingStatement-3.js │ │ │ │ │ │ │ │ ├── earn-4.js │ │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ │ ├── emptyNfts-3.js │ │ │ │ │ │ │ │ ├── emptyTrading-4.js │ │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ │ ├── eth2SellSend-3.js │ │ │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ │ │ ├── eth2SendSellTwo-3.js │ │ │ │ │ │ │ │ ├── ethAddress-3.js │ │ │ │ │ │ │ │ ├── ethStakeOrWrap-3.js │ │ │ │ │ │ │ │ ├── ethStakeOrWrapTwo-3.js │ │ │ │ │ │ │ │ ├── ethStakingMovement-3.js │ │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ │ ├── ethTrading-6.js │ │ │ │ │ │ │ │ ├── ethTradingTwo-4.js │ │ │ │ │ │ │ │ ├── ethWrappedStakingRewards-4.js │ │ │ │ │ │ │ │ ├── exploreDecentralizedApps-6.js │ │ │ │ │ │ │ │ ├── faceId-1.js │ │ │ │ │ │ │ │ ├── fiatInterest-1.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-3.js │ │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-3.js │ │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ │ │ ├── futures-5.js │ │ │ │ │ │ │ │ ├── gainsAndLosses-5.js │ │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ │ ├── getStartedInMinutes-6.js │ │ │ │ │ │ │ │ ├── giftBoxRewards-5.js │ │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ │ ├── highFees-5.js │ │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ │ ├── insto-0.js │ │ │ │ │ │ │ │ ├── instoAboutOnchain-0.js │ │ │ │ │ │ │ │ ├── instoApiKey-1.js │ │ │ │ │ │ │ │ ├── instoConsensusWaitingForApprovals-0.js │ │ │ │ │ │ │ │ ├── instoCryptoAndMore-2.js │ │ │ │ │ │ │ │ ├── instoCurrency-0.js │ │ │ │ │ │ │ │ ├── instoDesignateSigner-0.js │ │ │ │ │ │ │ │ ├── instoEmptyTrading-1.js │ │ │ │ │ │ │ │ ├── instoEthStakingMovement-1.js │ │ │ │ │ │ │ │ ├── instoGetStartedInMinutes-0.js │ │ │ │ │ │ │ │ ├── instoKey-0.js │ │ │ │ │ │ │ │ ├── instoMargin-0.js │ │ │ │ │ │ │ │ ├── instoOnchainSetupInProgress-0.js │ │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ │ ├── instoQRCode-0.js │ │ │ │ │ │ │ │ ├── instoRefreshKey-0.js │ │ │ │ │ │ │ │ ├── instoSemiCustodial-0.js │ │ │ │ │ │ │ │ ├── instoSetupComplete-0.js │ │ │ │ │ │ │ │ ├── instoSetupOnchain-0.js │ │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ │ ├── insuranceProtection-5.js │ │ │ │ │ │ │ │ ├── invest-4.js │ │ │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ │ │ ├── leadingProtocol-2.js │ │ │ │ │ │ │ │ ├── leadingProtocolMorpho-0.js │ │ │ │ │ │ │ │ ├── ledgerFailed-3.js │ │ │ │ │ │ │ │ ├── ledgerSignatureRejected-3.js │ │ │ │ │ │ │ │ ├── lendGraph-0.js │ │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ │ ├── linkCoinbaseWallet-7.js │ │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ │ ├── liquidationBufferYellow-1.js │ │ │ │ │ │ │ │ ├── loanValue-2.js │ │ │ │ │ │ │ │ ├── login-5.js │ │ │ │ │ │ │ │ ├── margin-5.js │ │ │ │ │ │ │ │ ├── marginWarning-6.js │ │ │ │ │ │ │ │ ├── mining-5.js │ │ │ │ │ │ │ │ ├── moneyDecentralized-3.js │ │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ │ │ ├── multicoinSupport-3.js │ │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ │ ├── nft-3.js │ │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ │ ├── noTransactions-3.js │ │ │ │ │ │ │ │ ├── notificationsAlt-4.js │ │ │ │ │ │ │ │ ├── onTheList-3.js │ │ │ │ │ │ │ │ ├── openEmail-3.js │ │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ │ ├── portfolioOverview-4.js │ │ │ │ │ │ │ │ ├── portfolioOverviewRelaunch-1.js │ │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ │ ├── primeOrderConfirmation-3.js │ │ │ │ │ │ │ │ ├── primePriceLadder-3.js │ │ │ │ │ │ │ │ ├── primeStaking-4.js │ │ │ │ │ │ │ │ ├── primeTradePreferences-4.js │ │ │ │ │ │ │ │ ├── protectedNotes-4.js │ │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ │ ├── ratDashboard-3.js │ │ │ │ │ │ │ │ ├── ratFoundWallet-4.js │ │ │ │ │ │ │ │ ├── ratMigration-3.js │ │ │ │ │ │ │ │ ├── ratMigrationerror-3.js │ │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ │ ├── referralsBitcoin-4.js │ │ │ │ │ │ │ │ ├── referralsBonus-3.js │ │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ │ ├── referralsGenericCoin-2.js │ │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ │ ├── scanCode-3.js │ │ │ │ │ │ │ │ ├── secureAccount-0.js │ │ │ │ │ │ │ │ ├── secureAndTrusted-3.js │ │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ │ ├── semiCustodial-4.js │ │ │ │ │ │ │ │ ├── sendCryptoFaster-4.js │ │ │ │ │ │ │ │ ├── sendingCrypto-4.js │ │ │ │ │ │ │ │ ├── shareOnSocialMedia-3.js │ │ │ │ │ │ │ │ ├── sidechain-4.js │ │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ │ ├── staking-5.js │ │ │ │ │ │ │ │ ├── stakingUpgrade-0.js │ │ │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-5.js │ │ │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ │ ├── trade-3.js │ │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ │ ├── transferCoins-4.js │ │ │ │ │ │ │ │ ├── transferEth-3.js │ │ │ │ │ │ │ │ ├── transferFunds-5.js │ │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ │ ├── trustedContacts-0.js │ │ │ │ │ │ │ │ ├── unauthorizedTransfers-0.js │ │ │ │ │ │ │ │ ├── uob-4.js │ │ │ │ │ │ │ │ ├── update-5.js │ │ │ │ │ │ │ │ ├── uploadDocument-2.js │ │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ │ ├── usdcLoanEth-0.js │ │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ │ │ ├── walletReconnect-4.js │ │ │ │ │ │ │ │ ├── walletReconnectSuccess-5.js │ │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ │ │ ├── wrapEthTwo-3.js │ │ │ │ │ │ │ │ └── yieldHolding-4.js │ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ │ ├── addBank-4.js │ │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ │ ├── advancedTradeCharts-2.js │ │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ ├── advancedTradingUi-2.js │ │ │ │ │ │ │ ├── apiKey-5.js │ │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ │ ├── appUpdate-2.js │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ ├── backedByUsDollar-4.js │ │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ │ ├── bigBtc-3.js │ │ │ │ │ │ │ ├── blockchain-5.js │ │ │ │ │ │ │ ├── borrowLoan-2.js │ │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ │ ├── browserExtension-5.js │ │ │ │ │ │ │ ├── browserHistory-3.js │ │ │ │ │ │ │ ├── calendar-0.js │ │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ │ ├── cardWaitlist-3.js │ │ │ │ │ │ │ ├── cb1BankTransfers-1.js │ │ │ │ │ │ │ ├── cbEth-4.js │ │ │ │ │ │ │ ├── cbbtc-1.js │ │ │ │ │ │ │ ├── clawMachinePig-4.js │ │ │ │ │ │ │ ├── coinGateway-0.js │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-4.js │ │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-3.js │ │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ │ ├── commerceAccounting-2.js │ │ │ │ │ │ │ ├── commerceInvoices-4.js │ │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ │ ├── concierge-1.js │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-4.js │ │ │ │ │ │ │ ├── connectWalletTutorial-4.js │ │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ │ ├── creditCardExcitement-4.js │ │ │ │ │ │ │ ├── creditCardExcitementCoinbaseOne-0.js │ │ │ │ │ │ │ ├── crossBorderPayments-3.js │ │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ │ ├── cryptoApps-3.js │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ ├── cryptoEconomy-3.js │ │ │ │ │ │ │ ├── cryptoEconomyCoin-0.js │ │ │ │ │ │ │ ├── cryptoEconomyEurc-0.js │ │ │ │ │ │ │ ├── cryptoEconomyUSDC-0.js │ │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ │ ├── cryptoPortfolio-3.js │ │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ │ ├── currency-4.js │ │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ ├── derivativesLoop-1.js │ │ │ │ │ │ │ ├── diamond-5.js │ │ │ │ │ │ │ ├── didDecentralizedIdentity-3.js │ │ │ │ │ │ │ ├── digitalCollectibles-3.js │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ │ ├── downloadCoinbaseWalletArrow-7.js │ │ │ │ │ │ │ ├── downloadingStatement-3.js │ │ │ │ │ │ │ ├── earn-4.js │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ │ ├── emptyNfts-3.js │ │ │ │ │ │ │ ├── emptyTrading-4.js │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ ├── eth2SellSend-3.js │ │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ │ ├── eth2SendSellTwo-3.js │ │ │ │ │ │ │ ├── ethAddress-3.js │ │ │ │ │ │ │ ├── ethStakeOrWrap-3.js │ │ │ │ │ │ │ ├── ethStakeOrWrapTwo-3.js │ │ │ │ │ │ │ ├── ethStakingMovement-3.js │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ ├── ethTrading-6.js │ │ │ │ │ │ │ ├── ethTradingTwo-4.js │ │ │ │ │ │ │ ├── ethWrappedStakingRewards-4.js │ │ │ │ │ │ │ ├── exploreDecentralizedApps-6.js │ │ │ │ │ │ │ ├── faceId-1.js │ │ │ │ │ │ │ ├── fiatInterest-1.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxes-3.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-3.js │ │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ │ ├── futures-5.js │ │ │ │ │ │ │ ├── gainsAndLosses-5.js │ │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ │ ├── getStartedInMinutes-6.js │ │ │ │ │ │ │ ├── giftBoxRewards-5.js │ │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ │ ├── highFees-5.js │ │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ ├── insto-0.js │ │ │ │ │ │ │ ├── instoAboutOnchain-0.js │ │ │ │ │ │ │ ├── instoApiKey-1.js │ │ │ │ │ │ │ ├── instoConsensusWaitingForApprovals-0.js │ │ │ │ │ │ │ ├── instoCryptoAndMore-2.js │ │ │ │ │ │ │ ├── instoCurrency-0.js │ │ │ │ │ │ │ ├── instoDesignateSigner-0.js │ │ │ │ │ │ │ ├── instoEmptyTrading-1.js │ │ │ │ │ │ │ ├── instoEthStakingMovement-1.js │ │ │ │ │ │ │ ├── instoGetStartedInMinutes-0.js │ │ │ │ │ │ │ ├── instoKey-0.js │ │ │ │ │ │ │ ├── instoMargin-0.js │ │ │ │ │ │ │ ├── instoOnchainSetupInProgress-0.js │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ ├── instoQRCode-0.js │ │ │ │ │ │ │ ├── instoRefreshKey-0.js │ │ │ │ │ │ │ ├── instoSemiCustodial-0.js │ │ │ │ │ │ │ ├── instoSetupComplete-0.js │ │ │ │ │ │ │ ├── instoSetupOnchain-0.js │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ ├── insuranceProtection-5.js │ │ │ │ │ │ │ ├── invest-4.js │ │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ │ ├── leadingProtocol-2.js │ │ │ │ │ │ │ ├── leadingProtocolMorpho-0.js │ │ │ │ │ │ │ ├── ledgerFailed-3.js │ │ │ │ │ │ │ ├── ledgerSignatureRejected-3.js │ │ │ │ │ │ │ ├── lendGraph-0.js │ │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── linkCoinbaseWallet-7.js │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ │ ├── liquidationBufferYellow-1.js │ │ │ │ │ │ │ ├── loanValue-2.js │ │ │ │ │ │ │ ├── login-5.js │ │ │ │ │ │ │ ├── margin-5.js │ │ │ │ │ │ │ ├── marginWarning-6.js │ │ │ │ │ │ │ ├── mining-5.js │ │ │ │ │ │ │ ├── moneyDecentralized-3.js │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ │ ├── multicoinSupport-3.js │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ │ ├── nft-3.js │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ ├── noTransactions-3.js │ │ │ │ │ │ │ ├── notificationsAlt-4.js │ │ │ │ │ │ │ ├── onTheList-3.js │ │ │ │ │ │ │ ├── openEmail-3.js │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ │ ├── portfolioOverview-4.js │ │ │ │ │ │ │ ├── portfolioOverviewRelaunch-1.js │ │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ ├── primeOrderConfirmation-3.js │ │ │ │ │ │ │ ├── primePriceLadder-3.js │ │ │ │ │ │ │ ├── primeStaking-4.js │ │ │ │ │ │ │ ├── primeTradePreferences-4.js │ │ │ │ │ │ │ ├── protectedNotes-4.js │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ ├── ratDashboard-3.js │ │ │ │ │ │ │ ├── ratFoundWallet-4.js │ │ │ │ │ │ │ ├── ratMigration-3.js │ │ │ │ │ │ │ ├── ratMigrationerror-3.js │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ ├── referralsBitcoin-4.js │ │ │ │ │ │ │ ├── referralsBonus-3.js │ │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ │ ├── referralsGenericCoin-2.js │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ ├── scanCode-3.js │ │ │ │ │ │ │ ├── secureAccount-0.js │ │ │ │ │ │ │ ├── secureAndTrusted-3.js │ │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ │ ├── semiCustodial-4.js │ │ │ │ │ │ │ ├── sendCryptoFaster-4.js │ │ │ │ │ │ │ ├── sendingCrypto-4.js │ │ │ │ │ │ │ ├── shareOnSocialMedia-3.js │ │ │ │ │ │ │ ├── sidechain-4.js │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ ├── staking-5.js │ │ │ │ │ │ │ ├── stakingUpgrade-0.js │ │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-5.js │ │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ │ ├── trade-3.js │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ ├── transferCoins-4.js │ │ │ │ │ │ │ ├── transferEth-3.js │ │ │ │ │ │ │ ├── transferFunds-5.js │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ ├── trustedContacts-0.js │ │ │ │ │ │ │ ├── unauthorizedTransfers-0.js │ │ │ │ │ │ │ ├── uob-4.js │ │ │ │ │ │ │ ├── update-5.js │ │ │ │ │ │ │ ├── uploadDocument-2.js │ │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ │ ├── usdcLoanEth-0.js │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ │ ├── walletReconnect-4.js │ │ │ │ │ │ │ ├── walletReconnectSuccess-5.js │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ │ ├── wrapEthTwo-3.js │ │ │ │ │ │ │ └── yieldHolding-4.js │ │ │ │ │ │ └── esm/ │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ ├── accessToAdvancedCharts-5.js │ │ │ │ │ │ ├── addBank-4.js │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ ├── advancedTradeCharts-2.js │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ ├── advancedTradingUi-2.js │ │ │ │ │ │ ├── apiKey-5.js │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ ├── appUpdate-2.js │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ ├── backedByUsDollar-4.js │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ ├── bigBtc-3.js │ │ │ │ │ │ ├── blockchain-5.js │ │ │ │ │ │ ├── borrowLoan-2.js │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ ├── browserExtension-5.js │ │ │ │ │ │ ├── browserHistory-3.js │ │ │ │ │ │ ├── calendar-0.js │ │ │ │ │ │ ├── cardBoosted-3.js │ │ │ │ │ │ ├── cardWaitlist-3.js │ │ │ │ │ │ ├── cb1BankTransfers-1.js │ │ │ │ │ │ ├── cbEth-4.js │ │ │ │ │ │ ├── cbbtc-1.js │ │ │ │ │ │ ├── clawMachinePig-4.js │ │ │ │ │ │ ├── coinGateway-0.js │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ ├── coinbaseOneLogo-5.js │ │ │ │ │ │ ├── coinbaseOnePhoneLightning-4.js │ │ │ │ │ │ ├── coinbaseOneRewards-4.js │ │ │ │ │ │ ├── coinbaseOneSavingFunds-3.js │ │ │ │ │ │ ├── collectingNfts-5.js │ │ │ │ │ │ ├── commerceAccounting-2.js │ │ │ │ │ │ ├── commerceInvoices-4.js │ │ │ │ │ │ ├── completeAQuiz-4.js │ │ │ │ │ │ ├── concierge-1.js │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-4.js │ │ │ │ │ │ ├── connectWalletTutorial-4.js │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ ├── creditCardExcitement-4.js │ │ │ │ │ │ ├── creditCardExcitementCoinbaseOne-0.js │ │ │ │ │ │ ├── crossBorderPayments-3.js │ │ │ │ │ │ ├── cryptoAndMore-4.js │ │ │ │ │ │ ├── cryptoApps-3.js │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ ├── cryptoEconomy-3.js │ │ │ │ │ │ ├── cryptoEconomyCoin-0.js │ │ │ │ │ │ ├── cryptoEconomyEurc-0.js │ │ │ │ │ │ ├── cryptoEconomyUSDC-0.js │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ ├── cryptoPortfolio-3.js │ │ │ │ │ │ ├── cryptoWallet-5.js │ │ │ │ │ │ ├── currency-4.js │ │ │ │ │ │ ├── decentralization-5.js │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-5.js │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ ├── derivativesLoop-1.js │ │ │ │ │ │ ├── diamond-5.js │ │ │ │ │ │ ├── didDecentralizedIdentity-3.js │ │ │ │ │ │ ├── digitalCollectibles-3.js │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ ├── documentSuccess-3.js │ │ │ │ │ │ ├── downloadCoinbaseWalletArrow-7.js │ │ │ │ │ │ ├── downloadingStatement-3.js │ │ │ │ │ │ ├── earn-4.js │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ ├── earnToLearn-4.js │ │ │ │ │ │ ├── emptyNfts-3.js │ │ │ │ │ │ ├── emptyTrading-4.js │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ ├── eth2SellSend-3.js │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ ├── eth2SendSellTwo-3.js │ │ │ │ │ │ ├── ethAddress-3.js │ │ │ │ │ │ ├── ethStakeOrWrap-3.js │ │ │ │ │ │ ├── ethStakeOrWrapTwo-3.js │ │ │ │ │ │ ├── ethStakingMovement-3.js │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ ├── ethTrading-6.js │ │ │ │ │ │ ├── ethTradingTwo-4.js │ │ │ │ │ │ ├── ethWrappedStakingRewards-4.js │ │ │ │ │ │ ├── exploreDecentralizedApps-6.js │ │ │ │ │ │ ├── faceId-1.js │ │ │ │ │ │ ├── fiatInterest-1.js │ │ │ │ │ │ ├── fileYourCryptoTaxes-3.js │ │ │ │ │ │ ├── fileYourCryptoTaxesCheck-3.js │ │ │ │ │ │ ├── focusLimitOrders-4.js │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ ├── futures-5.js │ │ │ │ │ │ ├── gainsAndLosses-5.js │ │ │ │ │ │ ├── gasFeesNetworkFees-4.js │ │ │ │ │ │ ├── getStartedInMinutes-6.js │ │ │ │ │ │ ├── giftBoxRewards-5.js │ │ │ │ │ │ ├── globalTransactions-5.js │ │ │ │ │ │ ├── governance-4.js │ │ │ │ │ │ ├── graphChartTrading-0.js │ │ │ │ │ │ ├── hardwareWallets-4.js │ │ │ │ │ │ ├── highFees-5.js │ │ │ │ │ │ ├── holdCrypto-4.js │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ ├── insto-0.js │ │ │ │ │ │ ├── instoAboutOnchain-0.js │ │ │ │ │ │ ├── instoApiKey-1.js │ │ │ │ │ │ ├── instoConsensusWaitingForApprovals-0.js │ │ │ │ │ │ ├── instoCryptoAndMore-2.js │ │ │ │ │ │ ├── instoCurrency-0.js │ │ │ │ │ │ ├── instoDesignateSigner-0.js │ │ │ │ │ │ ├── instoEmptyTrading-1.js │ │ │ │ │ │ ├── instoEthStakingMovement-1.js │ │ │ │ │ │ ├── instoGetStartedInMinutes-0.js │ │ │ │ │ │ ├── instoKey-0.js │ │ │ │ │ │ ├── instoMargin-0.js │ │ │ │ │ │ ├── instoOnchainSetupInProgress-0.js │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ ├── instoQRCode-0.js │ │ │ │ │ │ ├── instoRefreshKey-0.js │ │ │ │ │ │ ├── instoSemiCustodial-0.js │ │ │ │ │ │ ├── instoSetupComplete-0.js │ │ │ │ │ │ ├── instoSetupOnchain-0.js │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ ├── insuranceProtection-5.js │ │ │ │ │ │ ├── invest-4.js │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ ├── leadingProtocol-2.js │ │ │ │ │ │ ├── leadingProtocolMorpho-0.js │ │ │ │ │ │ ├── ledgerFailed-3.js │ │ │ │ │ │ ├── ledgerSignatureRejected-3.js │ │ │ │ │ │ ├── lendGraph-0.js │ │ │ │ │ │ ├── leverage-4.js │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ ├── linkCoinbaseWallet-7.js │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-8.js │ │ │ │ │ │ ├── liquidationBufferGreen-1.js │ │ │ │ │ │ ├── liquidationBufferRed-1.js │ │ │ │ │ │ ├── liquidationBufferYellow-1.js │ │ │ │ │ │ ├── loanValue-2.js │ │ │ │ │ │ ├── login-5.js │ │ │ │ │ │ ├── margin-5.js │ │ │ │ │ │ ├── marginWarning-6.js │ │ │ │ │ │ ├── mining-5.js │ │ │ │ │ │ ├── moneyDecentralized-3.js │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ ├── multicoinSupport-3.js │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-5.js │ │ │ │ │ │ ├── nft-3.js │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ ├── noTransactions-3.js │ │ │ │ │ │ ├── notificationsAlt-4.js │ │ │ │ │ │ ├── onTheList-3.js │ │ │ │ │ │ ├── openEmail-3.js │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ ├── phoneNumber-3.js │ │ │ │ │ │ ├── portfolioOverview-4.js │ │ │ │ │ │ ├── portfolioOverviewRelaunch-1.js │ │ │ │ │ │ ├── portfolioPerformance-5.js │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ ├── primeDeFi-4.js │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ ├── primeOrderConfirmation-3.js │ │ │ │ │ │ ├── primePriceLadder-3.js │ │ │ │ │ │ ├── primeStaking-4.js │ │ │ │ │ │ ├── primeTradePreferences-4.js │ │ │ │ │ │ ├── protectedNotes-4.js │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ ├── ratDashboard-3.js │ │ │ │ │ │ ├── ratFoundWallet-4.js │ │ │ │ │ │ ├── ratMigration-3.js │ │ │ │ │ │ ├── ratMigrationerror-3.js │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ ├── referralsBitcoin-4.js │ │ │ │ │ │ ├── referralsBonus-3.js │ │ │ │ │ │ ├── referralsCoinbaseOne-2.js │ │ │ │ │ │ ├── referralsGenericCoin-2.js │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ ├── scanCode-3.js │ │ │ │ │ │ ├── secureAccount-0.js │ │ │ │ │ │ ├── secureAndTrusted-3.js │ │ │ │ │ │ ├── secureGlobalTransactions-5.js │ │ │ │ │ │ ├── secureStorage-5.js │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ ├── selfCustody-5.js │ │ │ │ │ │ ├── semiCustodial-4.js │ │ │ │ │ │ ├── sendCryptoFaster-4.js │ │ │ │ │ │ ├── sendingCrypto-4.js │ │ │ │ │ │ ├── shareOnSocialMedia-3.js │ │ │ │ │ │ ├── sidechain-4.js │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ ├── staking-5.js │ │ │ │ │ │ ├── stakingUpgrade-0.js │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-5.js │ │ │ │ │ │ ├── stressTestedColdStorage-4.js │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-5.js │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ ├── tokenSales-0.js │ │ │ │ │ │ ├── trade-3.js │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ ├── transferCoins-4.js │ │ │ │ │ │ ├── transferEth-3.js │ │ │ │ │ │ ├── transferFunds-5.js │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ ├── trustedContacts-0.js │ │ │ │ │ │ ├── unauthorizedTransfers-0.js │ │ │ │ │ │ ├── uob-4.js │ │ │ │ │ │ ├── update-5.js │ │ │ │ │ │ ├── uploadDocument-2.js │ │ │ │ │ │ ├── usdcLoan-2.js │ │ │ │ │ │ ├── usdcLoanEth-0.js │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ ├── walletReconnect-4.js │ │ │ │ │ │ ├── walletReconnectSuccess-5.js │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ ├── wrapEthTwo-3.js │ │ │ │ │ │ └── yieldHolding-4.js │ │ │ │ │ └── types/ │ │ │ │ │ └── SpotRectangleName.ts │ │ │ │ └── spotSquare/ │ │ │ │ ├── data/ │ │ │ │ │ ├── descriptionMap.ts │ │ │ │ │ ├── names.ts │ │ │ │ │ ├── svgEsmMap.ts │ │ │ │ │ ├── svgJsMap.ts │ │ │ │ │ └── versionMap.ts │ │ │ │ ├── svgJs/ │ │ │ │ │ ├── cjs/ │ │ │ │ │ │ ├── dark/ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-4.js │ │ │ │ │ │ │ ├── addCard-5.js │ │ │ │ │ │ │ ├── addEth-4.js │ │ │ │ │ │ │ ├── addMultipleCrypto-6.js │ │ │ │ │ │ │ ├── addPasswordProtection-5.js │ │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ ├── advancedTradingUi-4.js │ │ │ │ │ │ │ ├── announcementAdvancedTrading-5.js │ │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ │ ├── assetForward-5.js │ │ │ │ │ │ │ ├── assetRefresh-5.js │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ │ ├── baseCautionMedium-0.js │ │ │ │ │ │ │ ├── baseChartMedium-1.js │ │ │ │ │ │ │ ├── baseCheckMedium-0.js │ │ │ │ │ │ │ ├── baseCheckTrophyMedium-0.js │ │ │ │ │ │ │ ├── baseCoinCryptoMedium-0.js │ │ │ │ │ │ │ ├── baseCoinNetworkMedium-1.js │ │ │ │ │ │ │ ├── baseConnectMedium-0.js │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ ├── baseDecentralizationMedium-0.js │ │ │ │ │ │ │ ├── baseDiamondMedium-0.js │ │ │ │ │ │ │ ├── baseEmptyMedium-0.js │ │ │ │ │ │ │ ├── baseErrorButterflyMedium-0.js │ │ │ │ │ │ │ ├── baseErrorMedium-0.js │ │ │ │ │ │ │ ├── baseIdMedium-1.js │ │ │ │ │ │ │ ├── baseLoadingMedium-0.js │ │ │ │ │ │ │ ├── baseLocationMedium-0.js │ │ │ │ │ │ │ ├── baseMintNftMedium-0.js │ │ │ │ │ │ │ ├── baseNetworkMedium-0.js │ │ │ │ │ │ │ ├── baseNftMedium-0.js │ │ │ │ │ │ │ ├── basePaycoinMedium-0.js │ │ │ │ │ │ │ ├── basePeopleMedium-0.js │ │ │ │ │ │ │ ├── basePiechartMedium-0.js │ │ │ │ │ │ │ ├── baseQuickBuy-0.js │ │ │ │ │ │ │ ├── baseRewardChest-0.js │ │ │ │ │ │ │ ├── baseRewardClam-0.js │ │ │ │ │ │ │ ├── baseRewardPlate-0.js │ │ │ │ │ │ │ ├── baseRewardPodium-0.js │ │ │ │ │ │ │ ├── baseRewardSun-0.js │ │ │ │ │ │ │ ├── baseRewardTrophyEmblem-0.js │ │ │ │ │ │ │ ├── baseRewardTrophyStars-0.js │ │ │ │ │ │ │ ├── baseSecurityMedium-0.js │ │ │ │ │ │ │ ├── baseSendMedium-0.js │ │ │ │ │ │ │ ├── baseSwitch-1.js │ │ │ │ │ │ │ ├── baseTargetMedium-0.js │ │ │ │ │ │ │ ├── baseUsdcMedium-0.js │ │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ │ ├── bigBtc-4.js │ │ │ │ │ │ │ ├── blockchain-6.js │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ ├── boostedCard-5.js │ │ │ │ │ │ │ ├── borrowLimitsAddressed-6.js │ │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ │ ├── browserExtension-3.js │ │ │ │ │ │ │ ├── bullishCase-5.js │ │ │ │ │ │ │ ├── cardAnnouncement-5.js │ │ │ │ │ │ │ ├── cardAutoReload-5.js │ │ │ │ │ │ │ ├── cardBlocked-6.js │ │ │ │ │ │ │ ├── cardDeclined-4.js │ │ │ │ │ │ │ ├── cardShipped-5.js │ │ │ │ │ │ │ ├── cbEthWrappingUnavailable-3.js │ │ │ │ │ │ │ ├── checkVerifacation-0.js │ │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ ├── coinbaseCardSparkle-5.js │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ ├── coinbaseLock-1.js │ │ │ │ │ │ │ ├── coinbaseOneBoostedCard-1.js │ │ │ │ │ │ │ ├── coinbaseOneBoostedCardCB1-0.js │ │ │ │ │ │ │ ├── coinbaseOneConcierge-2.js │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ │ ├── coinbaseOneRewards-5.js │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ │ ├── coinbaseOneStakeOrWrap-3.js │ │ │ │ │ │ │ ├── coinbaseOneStaking-3.js │ │ │ │ │ │ │ ├── coinbaseOneStarToken-3.js │ │ │ │ │ │ │ ├── coinbaseOneTokenRewards-5.js │ │ │ │ │ │ │ ├── coinbaseOneUSDC-2.js │ │ │ │ │ │ │ ├── coinbaseOneZero-1.js │ │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ ├── collectingNfts-4.js │ │ │ │ │ │ │ ├── commerceAccounting-3.js │ │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ │ ├── completeAQuiz-5.js │ │ │ │ │ │ │ ├── confirmAddress-5.js │ │ │ │ │ │ │ ├── confirmEmail-6.js │ │ │ │ │ │ │ ├── confirmIDCard-6.js │ │ │ │ │ │ │ ├── confirmSocialSecurity-5.js │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-5.js │ │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ │ ├── cryptoAndMore-5.js │ │ │ │ │ │ │ ├── cryptoApps-7.js │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ │ ├── cryptoEconomyArrows-2.js │ │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ │ ├── cryptoWallet-6.js │ │ │ │ │ │ │ ├── dappWallet-4.js │ │ │ │ │ │ │ ├── darkModeIntroduction-5.js │ │ │ │ │ │ │ ├── decentralization-4.js │ │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-4.js │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ ├── defiEarnAnnouncement-6.js │ │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ │ ├── defiNfts-5.js │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ ├── didDecentralizedIdentity-5.js │ │ │ │ │ │ │ ├── digitalCollectibles-4.js │ │ │ │ │ │ │ ├── directDepositExcitement-5.js │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ ├── documentSuccess-4.js │ │ │ │ │ │ │ ├── earn-6.js │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ ├── earnInterestOnCryptocurrency-6.js │ │ │ │ │ │ │ ├── earnToLearn-5.js │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ │ ├── ethStakeOrWrap-4.js │ │ │ │ │ │ │ ├── ethStakeOrWrapTwo-4.js │ │ │ │ │ │ │ ├── ethStaking-4.js │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheckOther-5.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesOther-5.js │ │ │ │ │ │ │ ├── focusLimitOrders-3.js │ │ │ │ │ │ │ ├── frameEmpty-5.js │ │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ │ ├── gasFeesNetworkFees-5.js │ │ │ │ │ │ │ ├── getStartedInMinutes-5.js │ │ │ │ │ │ │ ├── giftBoxCrypto-8.js │ │ │ │ │ │ │ ├── gifting-6.js │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ ├── goldSilverFutures-0.js │ │ │ │ │ │ │ ├── guideBullCase-4.js │ │ │ │ │ │ │ ├── guideCryptoBeginner-5.js │ │ │ │ │ │ │ ├── guideFiveThings-5.js │ │ │ │ │ │ │ ├── guideNftDefi-5.js │ │ │ │ │ │ │ ├── guideStartInvesting-5.js │ │ │ │ │ │ │ ├── hardwareWallets-3.js │ │ │ │ │ │ │ ├── holdCrypto-3.js │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ ├── idError-2.js │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ ├── instantUnstaking-1.js │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-2.js │ │ │ │ │ │ │ ├── instoDappWallet-1.js │ │ │ │ │ │ │ ├── instoEthStaking-0.js │ │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ │ ├── instoPixDeposits-0.js │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ ├── instoSecurityKey-1.js │ │ │ │ │ │ │ ├── instoSideChainSide-0.js │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ ├── instoUbiKey-1.js │ │ │ │ │ │ │ ├── instoWaiting-2.js │ │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ │ ├── interestForYou-6.js │ │ │ │ │ │ │ ├── invest-5.js │ │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── linkCoinbaseWallet-6.js │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-6.js │ │ │ │ │ │ │ ├── miniGift-5.js │ │ │ │ │ │ │ ├── mining-3.js │ │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ │ ├── moneyRewards-6.js │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ │ ├── multicoinSupport-5.js │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-4.js │ │ │ │ │ │ │ ├── nft-6.js │ │ │ │ │ │ │ ├── nftTag-5.js │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ ├── noPortfolio-2.js │ │ │ │ │ │ │ ├── notificationsAlt-3.js │ │ │ │ │ │ │ ├── nuxChecklist-6.js │ │ │ │ │ │ │ ├── nuxEarnCrypto-5.js │ │ │ │ │ │ │ ├── nuxEarnYield-6.js │ │ │ │ │ │ │ ├── nuxPopularAssets-5.js │ │ │ │ │ │ │ ├── nuxRecurringBuys-5.js │ │ │ │ │ │ │ ├── offersEmpty-5.js │ │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ │ ├── openEmail-2.js │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ ├── performance-5.js │ │ │ │ │ │ │ ├── phoneNotifications-7.js │ │ │ │ │ │ │ ├── phoneNumber-2.js │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ ├── pixBankDeposits-5.js │ │ │ │ │ │ │ ├── pixDeposits-6.js │ │ │ │ │ │ │ ├── portfolioPerformance-4.js │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ │ ├── priceAlerts-5.js │ │ │ │ │ │ │ ├── primeDeFi-6.js │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ ├── recommendInvestments-5.js │ │ │ │ │ │ │ ├── referralsPeople-5.js │ │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ │ ├── refreshMobileApp-5.js │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ ├── rewardExpiring-5.js │ │ │ │ │ │ │ ├── saveTheDate-5.js │ │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ │ ├── secureGlobalTransactions-4.js │ │ │ │ │ │ │ ├── secureStorage-4.js │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ ├── selfCustody-3.js │ │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ │ ├── sendCryptoFaster-6.js │ │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ │ ├── sparkleToken-6.js │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ │ ├── starToken-5.js │ │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-4.js │ │ │ │ │ │ │ ├── stressTestedColdStorage-3.js │ │ │ │ │ │ │ ├── swapEth-4.js │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-3.js │ │ │ │ │ │ │ ├── switchReward-5.js │ │ │ │ │ │ │ ├── taxDocuments-5.js │ │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ ├── transferringCrypto-6.js │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ ├── unsupportedAsset-5.js │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ │ ├── waitlistSignup-5.js │ │ │ │ │ │ │ ├── walletApp-9.js │ │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ │ ├── walletQuestsChest-1.js │ │ │ │ │ │ │ ├── walletQuestsTrophy-1.js │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ │ ├── yieldCenter-6.js │ │ │ │ │ │ │ └── yieldCenterUSDC-2.js │ │ │ │ │ │ ├── light/ │ │ │ │ │ │ │ ├── accessToAdvancedCharts-4.js │ │ │ │ │ │ │ ├── addCard-5.js │ │ │ │ │ │ │ ├── addEth-4.js │ │ │ │ │ │ │ ├── addMultipleCrypto-6.js │ │ │ │ │ │ │ ├── addPasswordProtection-5.js │ │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ │ ├── advancedTradingUi-4.js │ │ │ │ │ │ │ ├── announcementAdvancedTrading-5.js │ │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ │ ├── assetForward-5.js │ │ │ │ │ │ │ ├── assetRefresh-5.js │ │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ │ ├── baseCautionMedium-0.js │ │ │ │ │ │ │ ├── baseChartMedium-1.js │ │ │ │ │ │ │ ├── baseCheckMedium-0.js │ │ │ │ │ │ │ ├── baseCheckTrophyMedium-0.js │ │ │ │ │ │ │ ├── baseCoinCryptoMedium-0.js │ │ │ │ │ │ │ ├── baseCoinNetworkMedium-1.js │ │ │ │ │ │ │ ├── baseConnectMedium-0.js │ │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ │ ├── baseDecentralizationMedium-0.js │ │ │ │ │ │ │ ├── baseDiamondMedium-0.js │ │ │ │ │ │ │ ├── baseEmptyMedium-0.js │ │ │ │ │ │ │ ├── baseErrorButterflyMedium-0.js │ │ │ │ │ │ │ ├── baseErrorMedium-0.js │ │ │ │ │ │ │ ├── baseIdMedium-1.js │ │ │ │ │ │ │ ├── baseLoadingMedium-0.js │ │ │ │ │ │ │ ├── baseLocationMedium-0.js │ │ │ │ │ │ │ ├── baseMintNftMedium-0.js │ │ │ │ │ │ │ ├── baseNetworkMedium-0.js │ │ │ │ │ │ │ ├── baseNftMedium-0.js │ │ │ │ │ │ │ ├── basePaycoinMedium-0.js │ │ │ │ │ │ │ ├── basePeopleMedium-0.js │ │ │ │ │ │ │ ├── basePiechartMedium-0.js │ │ │ │ │ │ │ ├── baseQuickBuy-0.js │ │ │ │ │ │ │ ├── baseRewardChest-0.js │ │ │ │ │ │ │ ├── baseRewardClam-0.js │ │ │ │ │ │ │ ├── baseRewardPlate-0.js │ │ │ │ │ │ │ ├── baseRewardPodium-0.js │ │ │ │ │ │ │ ├── baseRewardSun-0.js │ │ │ │ │ │ │ ├── baseRewardTrophyEmblem-0.js │ │ │ │ │ │ │ ├── baseRewardTrophyStars-0.js │ │ │ │ │ │ │ ├── baseSecurityMedium-0.js │ │ │ │ │ │ │ ├── baseSendMedium-0.js │ │ │ │ │ │ │ ├── baseSwitch-1.js │ │ │ │ │ │ │ ├── baseTargetMedium-0.js │ │ │ │ │ │ │ ├── baseUsdcMedium-0.js │ │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ │ ├── bigBtc-4.js │ │ │ │ │ │ │ ├── blockchain-6.js │ │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ │ ├── boostedCard-5.js │ │ │ │ │ │ │ ├── borrowLimitsAddressed-6.js │ │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ │ ├── browserExtension-3.js │ │ │ │ │ │ │ ├── bullishCase-5.js │ │ │ │ │ │ │ ├── cardAnnouncement-5.js │ │ │ │ │ │ │ ├── cardAutoReload-5.js │ │ │ │ │ │ │ ├── cardBlocked-6.js │ │ │ │ │ │ │ ├── cardDeclined-4.js │ │ │ │ │ │ │ ├── cardShipped-5.js │ │ │ │ │ │ │ ├── cbEthWrappingUnavailable-3.js │ │ │ │ │ │ │ ├── checkVerifacation-0.js │ │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ │ ├── coinbaseCardSparkle-5.js │ │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ │ ├── coinbaseLock-1.js │ │ │ │ │ │ │ ├── coinbaseOneBoostedCard-1.js │ │ │ │ │ │ │ ├── coinbaseOneBoostedCardCB1-0.js │ │ │ │ │ │ │ ├── coinbaseOneConcierge-2.js │ │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ │ ├── coinbaseOneRewards-5.js │ │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ │ ├── coinbaseOneStakeOrWrap-3.js │ │ │ │ │ │ │ ├── coinbaseOneStaking-3.js │ │ │ │ │ │ │ ├── coinbaseOneStarToken-3.js │ │ │ │ │ │ │ ├── coinbaseOneTokenRewards-5.js │ │ │ │ │ │ │ ├── coinbaseOneUSDC-2.js │ │ │ │ │ │ │ ├── coinbaseOneZero-1.js │ │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ │ ├── collectingNfts-4.js │ │ │ │ │ │ │ ├── commerceAccounting-3.js │ │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ │ ├── completeAQuiz-5.js │ │ │ │ │ │ │ ├── confirmAddress-5.js │ │ │ │ │ │ │ ├── confirmEmail-6.js │ │ │ │ │ │ │ ├── confirmIDCard-6.js │ │ │ │ │ │ │ ├── confirmSocialSecurity-5.js │ │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-5.js │ │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ │ ├── cryptoAndMore-5.js │ │ │ │ │ │ │ ├── cryptoApps-7.js │ │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ │ ├── cryptoEconomyArrows-2.js │ │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ │ ├── cryptoWallet-6.js │ │ │ │ │ │ │ ├── dappWallet-4.js │ │ │ │ │ │ │ ├── darkModeIntroduction-5.js │ │ │ │ │ │ │ ├── decentralization-4.js │ │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-4.js │ │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ │ ├── defiEarnAnnouncement-6.js │ │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ │ ├── defiNfts-5.js │ │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ │ ├── didDecentralizedIdentity-5.js │ │ │ │ │ │ │ ├── digitalCollectibles-4.js │ │ │ │ │ │ │ ├── directDepositExcitement-5.js │ │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ │ ├── documentSuccess-4.js │ │ │ │ │ │ │ ├── earn-6.js │ │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ │ ├── earnInterestOnCryptocurrency-6.js │ │ │ │ │ │ │ ├── earnToLearn-5.js │ │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ │ ├── ethStakeOrWrap-4.js │ │ │ │ │ │ │ ├── ethStakeOrWrapTwo-4.js │ │ │ │ │ │ │ ├── ethStaking-4.js │ │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesCheckOther-5.js │ │ │ │ │ │ │ ├── fileYourCryptoTaxesOther-5.js │ │ │ │ │ │ │ ├── focusLimitOrders-3.js │ │ │ │ │ │ │ ├── frameEmpty-5.js │ │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ │ ├── gasFeesNetworkFees-5.js │ │ │ │ │ │ │ ├── getStartedInMinutes-5.js │ │ │ │ │ │ │ ├── giftBoxCrypto-8.js │ │ │ │ │ │ │ ├── gifting-6.js │ │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ │ ├── goldSilverFutures-0.js │ │ │ │ │ │ │ ├── guideBullCase-4.js │ │ │ │ │ │ │ ├── guideCryptoBeginner-5.js │ │ │ │ │ │ │ ├── guideFiveThings-5.js │ │ │ │ │ │ │ ├── guideNftDefi-5.js │ │ │ │ │ │ │ ├── guideStartInvesting-5.js │ │ │ │ │ │ │ ├── hardwareWallets-3.js │ │ │ │ │ │ │ ├── holdCrypto-3.js │ │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ │ ├── idError-2.js │ │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ │ ├── instantUnstaking-1.js │ │ │ │ │ │ │ ├── instoAuthenticatorProgress-2.js │ │ │ │ │ │ │ ├── instoDappWallet-1.js │ │ │ │ │ │ │ ├── instoEthStaking-0.js │ │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ │ ├── instoPixDeposits-0.js │ │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ │ ├── instoSecurityKey-1.js │ │ │ │ │ │ │ ├── instoSideChainSide-0.js │ │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ │ ├── instoUbiKey-1.js │ │ │ │ │ │ │ ├── instoWaiting-2.js │ │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ │ ├── interestForYou-6.js │ │ │ │ │ │ │ ├── invest-5.js │ │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ │ ├── linkCoinbaseWallet-6.js │ │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-6.js │ │ │ │ │ │ │ ├── miniGift-5.js │ │ │ │ │ │ │ ├── mining-3.js │ │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ │ ├── moneyRewards-6.js │ │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ │ ├── multicoinSupport-5.js │ │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-4.js │ │ │ │ │ │ │ ├── nft-6.js │ │ │ │ │ │ │ ├── nftTag-5.js │ │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ │ ├── noPortfolio-2.js │ │ │ │ │ │ │ ├── notificationsAlt-3.js │ │ │ │ │ │ │ ├── nuxChecklist-6.js │ │ │ │ │ │ │ ├── nuxEarnCrypto-5.js │ │ │ │ │ │ │ ├── nuxEarnYield-6.js │ │ │ │ │ │ │ ├── nuxPopularAssets-5.js │ │ │ │ │ │ │ ├── nuxRecurringBuys-5.js │ │ │ │ │ │ │ ├── offersEmpty-5.js │ │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ │ ├── openEmail-2.js │ │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ │ ├── performance-5.js │ │ │ │ │ │ │ ├── phoneNotifications-7.js │ │ │ │ │ │ │ ├── phoneNumber-2.js │ │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ │ ├── pixBankDeposits-5.js │ │ │ │ │ │ │ ├── pixDeposits-6.js │ │ │ │ │ │ │ ├── portfolioPerformance-4.js │ │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ │ ├── priceAlerts-5.js │ │ │ │ │ │ │ ├── primeDeFi-6.js │ │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ │ ├── recommendInvestments-5.js │ │ │ │ │ │ │ ├── referralsPeople-5.js │ │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ │ ├── refreshMobileApp-5.js │ │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ │ ├── rewardExpiring-5.js │ │ │ │ │ │ │ ├── saveTheDate-5.js │ │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ │ ├── secureGlobalTransactions-4.js │ │ │ │ │ │ │ ├── secureStorage-4.js │ │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ │ ├── selfCustody-3.js │ │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ │ ├── sendCryptoFaster-6.js │ │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ │ ├── sparkleToken-6.js │ │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ │ ├── starToken-5.js │ │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-4.js │ │ │ │ │ │ │ ├── stressTestedColdStorage-3.js │ │ │ │ │ │ │ ├── swapEth-4.js │ │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-3.js │ │ │ │ │ │ │ ├── switchReward-5.js │ │ │ │ │ │ │ ├── taxDocuments-5.js │ │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ │ ├── transferringCrypto-6.js │ │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ │ ├── unsupportedAsset-5.js │ │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ │ ├── waitlistSignup-5.js │ │ │ │ │ │ │ ├── walletApp-9.js │ │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ │ ├── walletQuestsChest-1.js │ │ │ │ │ │ │ ├── walletQuestsTrophy-1.js │ │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ │ ├── yieldCenter-6.js │ │ │ │ │ │ │ └── yieldCenterUSDC-2.js │ │ │ │ │ │ └── themeable/ │ │ │ │ │ │ ├── accessToAdvancedCharts-4.js │ │ │ │ │ │ ├── addCard-5.js │ │ │ │ │ │ ├── addEth-4.js │ │ │ │ │ │ ├── addMultipleCrypto-6.js │ │ │ │ │ │ ├── addPasswordProtection-5.js │ │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ │ ├── advancedTradingUi-4.js │ │ │ │ │ │ ├── announcementAdvancedTrading-5.js │ │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ │ ├── assetForward-5.js │ │ │ │ │ │ ├── assetRefresh-5.js │ │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ │ ├── baseCautionMedium-0.js │ │ │ │ │ │ ├── baseChartMedium-1.js │ │ │ │ │ │ ├── baseCheckMedium-0.js │ │ │ │ │ │ ├── baseCheckTrophyMedium-0.js │ │ │ │ │ │ ├── baseCoinCryptoMedium-0.js │ │ │ │ │ │ ├── baseCoinNetworkMedium-1.js │ │ │ │ │ │ ├── baseConnectMedium-0.js │ │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ │ ├── baseDecentralizationMedium-0.js │ │ │ │ │ │ ├── baseDiamondMedium-0.js │ │ │ │ │ │ ├── baseEmptyMedium-0.js │ │ │ │ │ │ ├── baseErrorButterflyMedium-0.js │ │ │ │ │ │ ├── baseErrorMedium-0.js │ │ │ │ │ │ ├── baseIdMedium-1.js │ │ │ │ │ │ ├── baseLoadingMedium-0.js │ │ │ │ │ │ ├── baseLocationMedium-0.js │ │ │ │ │ │ ├── baseMintNftMedium-0.js │ │ │ │ │ │ ├── baseNetworkMedium-0.js │ │ │ │ │ │ ├── baseNftMedium-0.js │ │ │ │ │ │ ├── basePaycoinMedium-0.js │ │ │ │ │ │ ├── basePeopleMedium-0.js │ │ │ │ │ │ ├── basePiechartMedium-0.js │ │ │ │ │ │ ├── baseQuickBuy-0.js │ │ │ │ │ │ ├── baseRewardChest-0.js │ │ │ │ │ │ ├── baseRewardClam-0.js │ │ │ │ │ │ ├── baseRewardPlate-0.js │ │ │ │ │ │ ├── baseRewardPodium-0.js │ │ │ │ │ │ ├── baseRewardSun-0.js │ │ │ │ │ │ ├── baseRewardTrophyEmblem-0.js │ │ │ │ │ │ ├── baseRewardTrophyStars-0.js │ │ │ │ │ │ ├── baseSecurityMedium-0.js │ │ │ │ │ │ ├── baseSendMedium-0.js │ │ │ │ │ │ ├── baseSwitch-1.js │ │ │ │ │ │ ├── baseTargetMedium-0.js │ │ │ │ │ │ ├── baseUsdcMedium-0.js │ │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ │ ├── bigBtc-4.js │ │ │ │ │ │ ├── blockchain-6.js │ │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ │ ├── boostedCard-5.js │ │ │ │ │ │ ├── borrowLimitsAddressed-6.js │ │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ │ ├── browserExtension-3.js │ │ │ │ │ │ ├── bullishCase-5.js │ │ │ │ │ │ ├── cardAnnouncement-5.js │ │ │ │ │ │ ├── cardAutoReload-5.js │ │ │ │ │ │ ├── cardBlocked-6.js │ │ │ │ │ │ ├── cardDeclined-4.js │ │ │ │ │ │ ├── cardShipped-5.js │ │ │ │ │ │ ├── cbEthWrappingUnavailable-3.js │ │ │ │ │ │ ├── checkVerifacation-0.js │ │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ │ ├── coinbaseCardSparkle-5.js │ │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ │ ├── coinbaseLock-1.js │ │ │ │ │ │ ├── coinbaseOneBoostedCard-1.js │ │ │ │ │ │ ├── coinbaseOneBoostedCardCB1-0.js │ │ │ │ │ │ ├── coinbaseOneConcierge-2.js │ │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ │ ├── coinbaseOneRewards-5.js │ │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ │ ├── coinbaseOneStakeOrWrap-3.js │ │ │ │ │ │ ├── coinbaseOneStaking-3.js │ │ │ │ │ │ ├── coinbaseOneStarToken-3.js │ │ │ │ │ │ ├── coinbaseOneTokenRewards-5.js │ │ │ │ │ │ ├── coinbaseOneUSDC-2.js │ │ │ │ │ │ ├── coinbaseOneZero-1.js │ │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ │ ├── collectingNfts-4.js │ │ │ │ │ │ ├── commerceAccounting-3.js │ │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ │ ├── completeAQuiz-5.js │ │ │ │ │ │ ├── confirmAddress-5.js │ │ │ │ │ │ ├── confirmEmail-6.js │ │ │ │ │ │ ├── confirmIDCard-6.js │ │ │ │ │ │ ├── confirmSocialSecurity-5.js │ │ │ │ │ │ ├── congratulationsOnEarningCrypto-5.js │ │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ │ ├── cryptoAndMore-5.js │ │ │ │ │ │ ├── cryptoApps-7.js │ │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ │ ├── cryptoEconomyArrows-2.js │ │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ │ ├── cryptoWallet-6.js │ │ │ │ │ │ ├── dappWallet-4.js │ │ │ │ │ │ ├── darkModeIntroduction-5.js │ │ │ │ │ │ ├── decentralization-4.js │ │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ │ ├── defiDecentralizedTradingExchange-4.js │ │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ │ ├── defiEarnAnnouncement-6.js │ │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ │ ├── defiNfts-5.js │ │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ │ ├── didDecentralizedIdentity-5.js │ │ │ │ │ │ ├── digitalCollectibles-4.js │ │ │ │ │ │ ├── directDepositExcitement-5.js │ │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ │ ├── documentSuccess-4.js │ │ │ │ │ │ ├── earn-6.js │ │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ │ ├── earnInterestOnCryptocurrency-6.js │ │ │ │ │ │ ├── earnToLearn-5.js │ │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ │ ├── ethStakeOrWrap-4.js │ │ │ │ │ │ ├── ethStakeOrWrapTwo-4.js │ │ │ │ │ │ ├── ethStaking-4.js │ │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ │ ├── fileYourCryptoTaxesCheckOther-5.js │ │ │ │ │ │ ├── fileYourCryptoTaxesOther-5.js │ │ │ │ │ │ ├── focusLimitOrders-3.js │ │ │ │ │ │ ├── frameEmpty-5.js │ │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ │ ├── futures-6.js │ │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ │ ├── gasFeesNetworkFees-5.js │ │ │ │ │ │ ├── getStartedInMinutes-5.js │ │ │ │ │ │ ├── giftBoxCrypto-8.js │ │ │ │ │ │ ├── gifting-6.js │ │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ │ ├── goldSilverFutures-0.js │ │ │ │ │ │ ├── guideBullCase-4.js │ │ │ │ │ │ ├── guideCryptoBeginner-5.js │ │ │ │ │ │ ├── guideFiveThings-5.js │ │ │ │ │ │ ├── guideNftDefi-5.js │ │ │ │ │ │ ├── guideStartInvesting-5.js │ │ │ │ │ │ ├── hardwareWallets-3.js │ │ │ │ │ │ ├── holdCrypto-3.js │ │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ │ ├── idError-2.js │ │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ │ ├── instantUnstaking-1.js │ │ │ │ │ │ ├── instoAuthenticatorProgress-2.js │ │ │ │ │ │ ├── instoDappWallet-1.js │ │ │ │ │ │ ├── instoEthStaking-0.js │ │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ │ ├── instoPixDeposits-0.js │ │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ │ ├── instoSecurityKey-1.js │ │ │ │ │ │ ├── instoSideChainSide-0.js │ │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ │ ├── instoUbiKey-1.js │ │ │ │ │ │ ├── instoWaiting-2.js │ │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ │ ├── interestForYou-6.js │ │ │ │ │ │ ├── invest-5.js │ │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ │ ├── linkCoinbaseWallet-6.js │ │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-6.js │ │ │ │ │ │ ├── miniGift-5.js │ │ │ │ │ │ ├── mining-3.js │ │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ │ ├── moneyRewards-6.js │ │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ │ ├── multicoinSupport-5.js │ │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-4.js │ │ │ │ │ │ ├── nft-6.js │ │ │ │ │ │ ├── nftTag-5.js │ │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ │ ├── noPortfolio-2.js │ │ │ │ │ │ ├── notificationsAlt-3.js │ │ │ │ │ │ ├── nuxChecklist-6.js │ │ │ │ │ │ ├── nuxEarnCrypto-5.js │ │ │ │ │ │ ├── nuxEarnYield-6.js │ │ │ │ │ │ ├── nuxPopularAssets-5.js │ │ │ │ │ │ ├── nuxRecurringBuys-5.js │ │ │ │ │ │ ├── offersEmpty-5.js │ │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ │ ├── openEmail-2.js │ │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ │ ├── options-0.js │ │ │ │ │ │ ├── outage-2.js │ │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ │ ├── performance-5.js │ │ │ │ │ │ ├── phoneNotifications-7.js │ │ │ │ │ │ ├── phoneNumber-2.js │ │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ │ ├── pixBankDeposits-5.js │ │ │ │ │ │ ├── pixDeposits-6.js │ │ │ │ │ │ ├── portfolioPerformance-4.js │ │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ │ ├── priceAlerts-5.js │ │ │ │ │ │ ├── primeDeFi-6.js │ │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ │ ├── recommendInvestments-5.js │ │ │ │ │ │ ├── referralsPeople-5.js │ │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ │ ├── refreshMobileApp-5.js │ │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ │ ├── rewardExpiring-5.js │ │ │ │ │ │ ├── saveTheDate-5.js │ │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ │ ├── secureGlobalTransactions-4.js │ │ │ │ │ │ ├── secureStorage-4.js │ │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ │ ├── selfCustody-3.js │ │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ │ ├── sendCryptoFaster-6.js │ │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ │ ├── sparkleToken-6.js │ │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ │ ├── staking-4.js │ │ │ │ │ │ ├── starToken-5.js │ │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-4.js │ │ │ │ │ │ ├── stressTestedColdStorage-3.js │ │ │ │ │ │ ├── swapEth-4.js │ │ │ │ │ │ ├── switchAdvancedToSimpleTrading-3.js │ │ │ │ │ │ ├── switchReward-5.js │ │ │ │ │ │ ├── taxDocuments-5.js │ │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ │ ├── transferringCrypto-6.js │ │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ │ ├── unsupportedAsset-5.js │ │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ │ ├── waitlistSignup-5.js │ │ │ │ │ │ ├── walletApp-9.js │ │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ │ ├── walletQuestsChest-1.js │ │ │ │ │ │ ├── walletQuestsTrophy-1.js │ │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ │ ├── yieldCenter-6.js │ │ │ │ │ │ └── yieldCenterUSDC-2.js │ │ │ │ │ └── esm/ │ │ │ │ │ └── themeable/ │ │ │ │ │ ├── accessToAdvancedCharts-4.js │ │ │ │ │ ├── addCard-5.js │ │ │ │ │ ├── addEth-4.js │ │ │ │ │ ├── addMultipleCrypto-6.js │ │ │ │ │ ├── addPasswordProtection-5.js │ │ │ │ │ ├── addPhoneNumber-3.js │ │ │ │ │ ├── advancedTrading-4.js │ │ │ │ │ ├── advancedTradingChartsIndicatorsCandles-3.js │ │ │ │ │ ├── advancedTradingUi-4.js │ │ │ │ │ ├── announcementAdvancedTrading-5.js │ │ │ │ │ ├── appTrackingTransparency-3.js │ │ │ │ │ ├── assetForward-5.js │ │ │ │ │ ├── assetRefresh-5.js │ │ │ │ │ ├── automaticPayments-3.js │ │ │ │ │ ├── backedByUsDollar-5.js │ │ │ │ │ ├── baseCautionMedium-0.js │ │ │ │ │ ├── baseChartMedium-1.js │ │ │ │ │ ├── baseCheckMedium-0.js │ │ │ │ │ ├── baseCheckTrophyMedium-0.js │ │ │ │ │ ├── baseCoinCryptoMedium-0.js │ │ │ │ │ ├── baseCoinNetworkMedium-1.js │ │ │ │ │ ├── baseConnectMedium-0.js │ │ │ │ │ ├── baseCreatorCoin-1.js │ │ │ │ │ ├── baseDecentralizationMedium-0.js │ │ │ │ │ ├── baseDiamondMedium-0.js │ │ │ │ │ ├── baseEmptyMedium-0.js │ │ │ │ │ ├── baseErrorButterflyMedium-0.js │ │ │ │ │ ├── baseErrorMedium-0.js │ │ │ │ │ ├── baseIdMedium-1.js │ │ │ │ │ ├── baseLoadingMedium-0.js │ │ │ │ │ ├── baseLocationMedium-0.js │ │ │ │ │ ├── baseMintNftMedium-0.js │ │ │ │ │ ├── baseNetworkMedium-0.js │ │ │ │ │ ├── baseNftMedium-0.js │ │ │ │ │ ├── basePaycoinMedium-0.js │ │ │ │ │ ├── basePeopleMedium-0.js │ │ │ │ │ ├── basePiechartMedium-0.js │ │ │ │ │ ├── baseQuickBuy-0.js │ │ │ │ │ ├── baseRewardChest-0.js │ │ │ │ │ ├── baseRewardClam-0.js │ │ │ │ │ ├── baseRewardPlate-0.js │ │ │ │ │ ├── baseRewardPodium-0.js │ │ │ │ │ ├── baseRewardSun-0.js │ │ │ │ │ ├── baseRewardTrophyEmblem-0.js │ │ │ │ │ ├── baseRewardTrophyStars-0.js │ │ │ │ │ ├── baseSecurityMedium-0.js │ │ │ │ │ ├── baseSendMedium-0.js │ │ │ │ │ ├── baseSwitch-1.js │ │ │ │ │ ├── baseTargetMedium-0.js │ │ │ │ │ ├── baseUsdcMedium-0.js │ │ │ │ │ ├── basedInUsa-4.js │ │ │ │ │ ├── bigBtc-4.js │ │ │ │ │ ├── blockchain-6.js │ │ │ │ │ ├── bonusFivePercent-0.js │ │ │ │ │ ├── bonusTwoPercent-0.js │ │ │ │ │ ├── boostedCard-5.js │ │ │ │ │ ├── borrowLimitsAddressed-6.js │ │ │ │ │ ├── borrowWallet-4.js │ │ │ │ │ ├── bridging-3.js │ │ │ │ │ ├── browserExtension-3.js │ │ │ │ │ ├── bullishCase-5.js │ │ │ │ │ ├── cardAnnouncement-5.js │ │ │ │ │ ├── cardAutoReload-5.js │ │ │ │ │ ├── cardBlocked-6.js │ │ │ │ │ ├── cardDeclined-4.js │ │ │ │ │ ├── cardShipped-5.js │ │ │ │ │ ├── cbEthWrappingUnavailable-3.js │ │ │ │ │ ├── checkVerifacation-0.js │ │ │ │ │ ├── coinFifty-1.js │ │ │ │ │ ├── coinbaseCardLock-3.js │ │ │ │ │ ├── coinbaseCardPocket-3.js │ │ │ │ │ ├── coinbaseCardSparkle-5.js │ │ │ │ │ ├── coinbaseFees-3.js │ │ │ │ │ ├── coinbaseLock-1.js │ │ │ │ │ ├── coinbaseOneBoostedCard-1.js │ │ │ │ │ ├── coinbaseOneBoostedCardCB1-0.js │ │ │ │ │ ├── coinbaseOneConcierge-2.js │ │ │ │ │ ├── coinbaseOneDiscountedAmount-3.js │ │ │ │ │ ├── coinbaseOneEarn-2.js │ │ │ │ │ ├── coinbaseOneLogo-4.js │ │ │ │ │ ├── coinbaseOneRewards-5.js │ │ │ │ │ ├── coinbaseOneSavingFunds-4.js │ │ │ │ │ ├── coinbaseOneStakeOrWrap-3.js │ │ │ │ │ ├── coinbaseOneStaking-3.js │ │ │ │ │ ├── coinbaseOneStarToken-3.js │ │ │ │ │ ├── coinbaseOneTokenRewards-5.js │ │ │ │ │ ├── coinbaseOneUSDC-2.js │ │ │ │ │ ├── coinbaseOneZero-1.js │ │ │ │ │ ├── coinbaseOneZeroPortal-1.js │ │ │ │ │ ├── coinbaseUnlockOffers-0.js │ │ │ │ │ ├── collectingNfts-4.js │ │ │ │ │ ├── commerceAccounting-3.js │ │ │ │ │ ├── commerceInvoices-3.js │ │ │ │ │ ├── completeAQuiz-5.js │ │ │ │ │ ├── confirmAddress-5.js │ │ │ │ │ ├── confirmEmail-6.js │ │ │ │ │ ├── confirmIDCard-6.js │ │ │ │ │ ├── confirmSocialSecurity-5.js │ │ │ │ │ ├── congratulationsOnEarningCrypto-5.js │ │ │ │ │ ├── contactsListWarning-4.js │ │ │ │ │ ├── crossBorderPayments-5.js │ │ │ │ │ ├── cryptoAndMore-5.js │ │ │ │ │ ├── cryptoApps-7.js │ │ │ │ │ ├── cryptoAssets-6.js │ │ │ │ │ ├── cryptoEconomy-4.js │ │ │ │ │ ├── cryptoEconomyArrows-2.js │ │ │ │ │ ├── cryptoForBeginners-5.js │ │ │ │ │ ├── cryptoPortfolio-4.js │ │ │ │ │ ├── cryptoWallet-6.js │ │ │ │ │ ├── dappWallet-4.js │ │ │ │ │ ├── darkModeIntroduction-5.js │ │ │ │ │ ├── decentralization-4.js │ │ │ │ │ ├── decentralizedWebWeb3-4.js │ │ │ │ │ ├── defiDecentralizedBorrowingLending-3.js │ │ │ │ │ ├── defiDecentralizedTradingExchange-4.js │ │ │ │ │ ├── defiEarn-3.js │ │ │ │ │ ├── defiEarnAnnouncement-6.js │ │ │ │ │ ├── defiHow-3.js │ │ │ │ │ ├── defiNfts-5.js │ │ │ │ │ ├── defiRisk-3.js │ │ │ │ │ ├── didDecentralizedIdentity-5.js │ │ │ │ │ ├── digitalCollectibles-4.js │ │ │ │ │ ├── directDepositExcitement-5.js │ │ │ │ │ ├── documentCertified-3.js │ │ │ │ │ ├── documentSuccess-4.js │ │ │ │ │ ├── earn-6.js │ │ │ │ │ ├── earnInterest-4.js │ │ │ │ │ ├── earnInterestOnCryptocurrency-6.js │ │ │ │ │ ├── earnToLearn-5.js │ │ │ │ │ ├── encryptedEverything-4.js │ │ │ │ │ ├── estimatedAmount-3.js │ │ │ │ │ ├── eth2SendSell-4.js │ │ │ │ │ ├── ethStakeOrWrap-4.js │ │ │ │ │ ├── ethStakeOrWrapTwo-4.js │ │ │ │ │ ├── ethStaking-4.js │ │ │ │ │ ├── ethStakingRewards-4.js │ │ │ │ │ ├── fileYourCryptoTaxesCheckOther-5.js │ │ │ │ │ ├── fileYourCryptoTaxesOther-5.js │ │ │ │ │ ├── focusLimitOrders-3.js │ │ │ │ │ ├── frameEmpty-5.js │ │ │ │ │ ├── freeBtc-3.js │ │ │ │ │ ├── futures-6.js │ │ │ │ │ ├── gainsAndLosses-4.js │ │ │ │ │ ├── gasFeesNetworkFees-5.js │ │ │ │ │ ├── getStartedInMinutes-5.js │ │ │ │ │ ├── giftBoxCrypto-8.js │ │ │ │ │ ├── gifting-6.js │ │ │ │ │ ├── globalTransactions-6.js │ │ │ │ │ ├── goldSilverFutures-0.js │ │ │ │ │ ├── guideBullCase-4.js │ │ │ │ │ ├── guideCryptoBeginner-5.js │ │ │ │ │ ├── guideFiveThings-5.js │ │ │ │ │ ├── guideNftDefi-5.js │ │ │ │ │ ├── guideStartInvesting-5.js │ │ │ │ │ ├── hardwareWallets-3.js │ │ │ │ │ ├── holdCrypto-3.js │ │ │ │ │ ├── holdingCrypto-3.js │ │ │ │ │ ├── idError-2.js │ │ │ │ │ ├── inrTrade-0.js │ │ │ │ │ ├── instantUnstaking-1.js │ │ │ │ │ ├── instoAuthenticatorProgress-2.js │ │ │ │ │ ├── instoDappWallet-1.js │ │ │ │ │ ├── instoEthStaking-0.js │ │ │ │ │ ├── instoEthStakingRewards-0.js │ │ │ │ │ ├── instoPixDeposits-0.js │ │ │ │ │ ├── instoPrimeStaking-0.js │ │ │ │ │ ├── instoSecurityKey-1.js │ │ │ │ │ ├── instoSideChainSide-0.js │ │ │ │ │ ├── instoStaking-0.js │ │ │ │ │ ├── instoUbiKey-1.js │ │ │ │ │ ├── instoWaiting-2.js │ │ │ │ │ ├── insuranceProtection-4.js │ │ │ │ │ ├── interestForYou-6.js │ │ │ │ │ ├── invest-5.js │ │ │ │ │ ├── layerThree-1.js │ │ │ │ │ ├── layeredNetworks-4.js │ │ │ │ │ ├── lightningNetworkSend-1.js │ │ │ │ │ ├── linkCoinbaseWallet-6.js │ │ │ │ │ ├── linkingYourWalletToYourCoinbaseAccount-6.js │ │ │ │ │ ├── miniGift-5.js │ │ │ │ │ ├── mining-3.js │ │ │ │ │ ├── moneyDecentralized-5.js │ │ │ │ │ ├── moneyRewards-6.js │ │ │ │ │ ├── multiPlatformMobileAppBrowserExtension-4.js │ │ │ │ │ ├── multicoinSupport-5.js │ │ │ │ │ ├── multipleAccountsWalletsForOneUser-4.js │ │ │ │ │ ├── nft-6.js │ │ │ │ │ ├── nftTag-5.js │ │ │ │ │ ├── noFees-4.js │ │ │ │ │ ├── noPortfolio-2.js │ │ │ │ │ ├── notificationsAlt-3.js │ │ │ │ │ ├── nuxChecklist-6.js │ │ │ │ │ ├── nuxEarnCrypto-5.js │ │ │ │ │ ├── nuxEarnYield-6.js │ │ │ │ │ ├── nuxPopularAssets-5.js │ │ │ │ │ ├── nuxRecurringBuys-5.js │ │ │ │ │ ├── offersEmpty-5.js │ │ │ │ │ ├── onTheList-4.js │ │ │ │ │ ├── openEmail-2.js │ │ │ │ │ ├── optInPushNotificationsEmail-4.js │ │ │ │ │ ├── options-0.js │ │ │ │ │ ├── outage-2.js │ │ │ │ │ ├── p2pPayments-5.js │ │ │ │ │ ├── performance-5.js │ │ │ │ │ ├── phoneNotifications-7.js │ │ │ │ │ ├── phoneNumber-2.js │ │ │ │ │ ├── pieChartWithArrow-0.js │ │ │ │ │ ├── pieChartWithArrowBlue-0.js │ │ │ │ │ ├── pixBankDeposits-5.js │ │ │ │ │ ├── pixDeposits-6.js │ │ │ │ │ ├── portfolioPerformance-4.js │ │ │ │ │ ├── poweredByEthereum-5.js │ │ │ │ │ ├── predictionsMarkets-0.js │ │ │ │ │ ├── priceAlerts-5.js │ │ │ │ │ ├── primeDeFi-6.js │ │ │ │ │ ├── primeEarn-5.js │ │ │ │ │ ├── primeStaking-5.js │ │ │ │ │ ├── quickAndSimple-5.js │ │ │ │ │ ├── readyToTrade-4.js │ │ │ │ │ ├── recommendInvestments-5.js │ │ │ │ │ ├── referralsPeople-5.js │ │ │ │ │ ├── refresh-0.js │ │ │ │ │ ├── refreshMobileApp-5.js │ │ │ │ │ ├── retailUSDCRewards-5.js │ │ │ │ │ ├── rewardExpiring-5.js │ │ │ │ │ ├── saveTheDate-5.js │ │ │ │ │ ├── secureAndTrusted-4.js │ │ │ │ │ ├── secureGlobalTransactions-4.js │ │ │ │ │ ├── secureStorage-4.js │ │ │ │ │ ├── securityShield-4.js │ │ │ │ │ ├── selfCustody-3.js │ │ │ │ │ ├── semiCustodial-5.js │ │ │ │ │ ├── sendCryptoFaster-6.js │ │ │ │ │ ├── shareOnSocialMedia-4.js │ │ │ │ │ ├── sidechain-3.js │ │ │ │ │ ├── sparkleToken-6.js │ │ │ │ │ ├── stableValue-4.js │ │ │ │ │ ├── staking-4.js │ │ │ │ │ ├── starToken-5.js │ │ │ │ │ ├── startToday-4.js │ │ │ │ │ ├── stayInControlSelfHostedWalletsStorage-4.js │ │ │ │ │ ├── stressTestedColdStorage-3.js │ │ │ │ │ ├── swapEth-4.js │ │ │ │ │ ├── switchAdvancedToSimpleTrading-3.js │ │ │ │ │ ├── switchReward-5.js │ │ │ │ │ ├── taxDocuments-5.js │ │ │ │ │ ├── taxesDetails-5.js │ │ │ │ │ ├── tradeImmediately-4.js │ │ │ │ │ ├── transferringCrypto-6.js │ │ │ │ │ ├── trendingHotAssets-3.js │ │ │ │ │ ├── unsupportedAsset-5.js │ │ │ │ │ ├── verifyEmail-4.js │ │ │ │ │ ├── verifyInfo-3.js │ │ │ │ │ ├── waitlistSignup-5.js │ │ │ │ │ ├── walletApp-9.js │ │ │ │ │ ├── walletNotifications-3.js │ │ │ │ │ ├── walletQuestsChest-1.js │ │ │ │ │ ├── walletQuestsTrophy-1.js │ │ │ │ │ ├── walletSecurity-5.js │ │ │ │ │ ├── watchVideos-4.js │ │ │ │ │ ├── wrapEth-4.js │ │ │ │ │ ├── yieldCenter-6.js │ │ │ │ │ └── yieldCenterUSDC-2.js │ │ │ │ └── types/ │ │ │ │ └── SpotSquareName.ts │ │ │ └── index.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── lottie-files/ │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── LottieSource.ts │ │ │ ├── activityIndicator/ │ │ │ │ ├── activityIndicator.json │ │ │ │ └── index.ts │ │ │ ├── chartFallbackNegative/ │ │ │ │ ├── chartFallbackNegative.json │ │ │ │ └── index.ts │ │ │ ├── chartFallbackPositive/ │ │ │ │ ├── chartFallbackPositive.json │ │ │ │ └── index.ts │ │ │ ├── dappWallet/ │ │ │ │ ├── dappWallet.json │ │ │ │ └── index.ts │ │ │ ├── earnComplete/ │ │ │ │ ├── earnComplete.json │ │ │ │ └── index.ts │ │ │ ├── earnTask/ │ │ │ │ ├── earnTask.json │ │ │ │ └── index.ts │ │ │ ├── gift/ │ │ │ │ ├── gift.json │ │ │ │ └── index.ts │ │ │ ├── giftingZoom/ │ │ │ │ ├── giftingZoom.json │ │ │ │ └── index.ts │ │ │ ├── globalTradeButton/ │ │ │ │ ├── globalTradeButton.json │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── nux/ │ │ │ │ ├── index.ts │ │ │ │ └── nux.json │ │ │ ├── splash/ │ │ │ │ ├── index.ts │ │ │ │ └── splash.json │ │ │ ├── tradeStatus/ │ │ │ │ ├── index.ts │ │ │ │ └── tradeStatus.json │ │ │ └── watchListStar/ │ │ │ ├── index.ts │ │ │ └── watchListStar.json │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── mcp-server/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── analytics.ts │ │ │ ├── cds.md │ │ │ ├── index.ts │ │ │ ├── server.ts │ │ │ └── setup.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── mobile/ │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest/ │ │ │ ├── jestThrowOnErrorAndWarning.js │ │ │ └── setup.js │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── accordion/ │ │ │ │ ├── Accordion.tsx │ │ │ │ ├── AccordionHeader.tsx │ │ │ │ ├── AccordionItem.tsx │ │ │ │ ├── AccordionPanel.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Accordion.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Accordion.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Accordion.test.tsx │ │ │ │ └── index.ts │ │ │ ├── alpha/ │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Select.figma.tsx │ │ │ │ ├── carousel/ │ │ │ │ │ ├── Carousel.tsx │ │ │ │ │ ├── CarouselControlsWrapper.tsx │ │ │ │ │ ├── CarouselItem.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── Carousel.test.tsx │ │ │ │ │ │ └── CarouselItem.test.tsx │ │ │ │ │ ├── types.ts │ │ │ │ │ ├── useCarousel.ts │ │ │ │ │ └── useCarouselItem.ts │ │ │ │ ├── combobox/ │ │ │ │ │ ├── Combobox.tsx │ │ │ │ │ ├── DefaultComboboxControl.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Combobox.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── Combobox.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── data-card/ │ │ │ │ │ ├── DataCard.tsx │ │ │ │ │ ├── DataCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── DataCard.figma.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── DataCard.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── DataCard.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── select/ │ │ │ │ │ ├── DefaultSelectAllOption.tsx │ │ │ │ │ ├── DefaultSelectControl.tsx │ │ │ │ │ ├── DefaultSelectDropdown.tsx │ │ │ │ │ ├── DefaultSelectEmptyDropdownContents.tsx │ │ │ │ │ ├── DefaultSelectOption.tsx │ │ │ │ │ ├── DefaultSelectOptionGroup.tsx │ │ │ │ │ ├── Select.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── AlphaSelect.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── DefaultSelectControl.test.tsx │ │ │ │ │ │ ├── DefaultSelectDropdown.test.tsx │ │ │ │ │ │ ├── DefaultSelectOption.test.tsx │ │ │ │ │ │ └── Select.test.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── select-chip/ │ │ │ │ │ ├── SelectChip.tsx │ │ │ │ │ ├── SelectChipControl.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── AlphaSelectChip.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── SelectChip.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ └── tabbed-chips/ │ │ │ │ ├── TabbedChips.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── AlphaTabbedChips.stories.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── TabbedChips.test.tsx │ │ │ ├── animation/ │ │ │ │ ├── AnimationProps.ts │ │ │ │ ├── Lottie.e2e.ts │ │ │ │ ├── Lottie.tsx │ │ │ │ ├── LottieStatusAnimation.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Lottie.stories.tsx │ │ │ │ │ └── LottieStatusAnimation.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Lottie.perf-test.tsx │ │ │ │ │ ├── Lottie.test.tsx │ │ │ │ │ ├── LottieStatusAnimation.perf-test.tsx │ │ │ │ │ ├── LottieStatusAnimation.test.tsx │ │ │ │ │ ├── convertMotionConfig.test.ts │ │ │ │ │ └── createLottie.test.tsx │ │ │ │ ├── convertMotionConfig.ts │ │ │ │ ├── createLottie.e2e.tsx │ │ │ │ ├── createLottie.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── lottieProgresConfig.ts │ │ │ │ ├── mocks.tsx │ │ │ │ ├── types.ts │ │ │ │ ├── useLottie.e2e.tsx │ │ │ │ ├── useLottie.tsx │ │ │ │ ├── useLottieColorFilters.ts │ │ │ │ └── useRotateAnimation.ts │ │ │ ├── banner/ │ │ │ │ ├── Banner.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Banner.stories.tsx │ │ │ │ │ ├── BannerActions.stories.tsx │ │ │ │ │ └── BannerLayout.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Banner.test.tsx │ │ │ │ └── index.ts │ │ │ ├── buttons/ │ │ │ │ ├── AvatarButton.tsx │ │ │ │ ├── Button.tsx │ │ │ │ ├── ButtonGroup.tsx │ │ │ │ ├── DefaultSlideButtonBackground.tsx │ │ │ │ ├── DefaultSlideButtonHandle.tsx │ │ │ │ ├── IconButton.tsx │ │ │ │ ├── IconCounterButton.tsx │ │ │ │ ├── SlideButton.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── AvatarButton.figma.tsx │ │ │ │ │ ├── Button.figma.tsx │ │ │ │ │ ├── ButtonGroup.figma.tsx │ │ │ │ │ ├── IconButton.figma.tsx │ │ │ │ │ └── SlideButton.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AvatarButton.stories.tsx │ │ │ │ │ ├── Button.stories.tsx │ │ │ │ │ ├── ButtonGroup.stories.tsx │ │ │ │ │ ├── IconButton.stories.tsx │ │ │ │ │ ├── IconCounterButton.stories.tsx │ │ │ │ │ └── SlideButton.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AvatarButton.test.tsx │ │ │ │ │ ├── Button.perf-test.tsx │ │ │ │ │ ├── Button.test.tsx │ │ │ │ │ ├── ButtonEventHandler.test.tsx │ │ │ │ │ ├── IconButton.test.tsx │ │ │ │ │ ├── IconCounterButton.test.tsx │ │ │ │ │ └── SlideButton.test.tsx │ │ │ │ └── index.ts │ │ │ ├── cards/ │ │ │ │ ├── AnnouncementCard.tsx │ │ │ │ ├── Card.tsx │ │ │ │ ├── CardBody.tsx │ │ │ │ ├── CardFooter.tsx │ │ │ │ ├── CardGroup.tsx │ │ │ │ ├── CardHeader.tsx │ │ │ │ ├── CardMedia.tsx │ │ │ │ ├── CardRoot.tsx │ │ │ │ ├── ContainedAssetCard.tsx │ │ │ │ ├── ContentCard/ │ │ │ │ │ ├── ContentCard.tsx │ │ │ │ │ ├── ContentCardBody.tsx │ │ │ │ │ ├── ContentCardFooter.tsx │ │ │ │ │ ├── ContentCardHeader.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── ContentCard.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── ContentCard.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── DataCard.tsx │ │ │ │ ├── FeatureEntryCard.tsx │ │ │ │ ├── FeedCard.tsx │ │ │ │ ├── FloatingAssetCard.tsx │ │ │ │ ├── LikeButton.tsx │ │ │ │ ├── MediaCard/ │ │ │ │ │ ├── MediaCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── MediaCard.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── MediaCard.test.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── MessagingCard/ │ │ │ │ │ ├── MessagingCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── MessagingCard.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── MessagingCard.test.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── NudgeCard.tsx │ │ │ │ ├── UpsellCard.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── AnnouncementCard.figma.tsx │ │ │ │ │ ├── ContainedAssetCard.figma.tsx │ │ │ │ │ ├── FloatingAssetCard.figma.tsx │ │ │ │ │ ├── NudgeCard.figma.tsx │ │ │ │ │ └── UpsellCard.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Card.stories.tsx │ │ │ │ │ ├── ContainedAssetCard.stories.tsx │ │ │ │ │ ├── ContentCard.stories.tsx │ │ │ │ │ ├── FloatingAssetCard.stories.tsx │ │ │ │ │ ├── MediaCard.stories.tsx │ │ │ │ │ ├── MessagingCard.stories.tsx │ │ │ │ │ ├── NudgeCard.stories.tsx │ │ │ │ │ └── UpsellCard.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── CardGroup.test.tsx │ │ │ │ │ ├── CardMedia.test.tsx │ │ │ │ │ ├── ContainedAssetCard.test.tsx │ │ │ │ │ ├── FloatingAssetCard.test.tsx │ │ │ │ │ ├── NudgeCard.test.tsx │ │ │ │ │ └── UpsellCard.test.tsx │ │ │ │ └── index.ts │ │ │ ├── carousel/ │ │ │ │ ├── Carousel.tsx │ │ │ │ ├── CarouselContext.ts │ │ │ │ ├── CarouselItem.tsx │ │ │ │ ├── DefaultCarouselNavigation.tsx │ │ │ │ ├── DefaultCarouselPagination.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Carousel.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Carousel.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Carousel.test.tsx │ │ │ │ │ └── DefaultCarouselPagination.test.tsx │ │ │ │ └── index.ts │ │ │ ├── cells/ │ │ │ │ ├── Cell.tsx │ │ │ │ ├── CellAccessory.tsx │ │ │ │ ├── CellDetail.tsx │ │ │ │ ├── CellHelperText.tsx │ │ │ │ ├── CellMedia.tsx │ │ │ │ ├── ContentCell.tsx │ │ │ │ ├── ContentCellFallback.tsx │ │ │ │ ├── ListCell.tsx │ │ │ │ ├── ListCellFallback.tsx │ │ │ │ ├── MediaFallback.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── ContentCell.figma.tsx │ │ │ │ │ └── ListCell.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── ContentCell.stories.tsx │ │ │ │ │ ├── ContentCellFallback.stories.tsx │ │ │ │ │ ├── ListCell.stories.tsx │ │ │ │ │ └── ListCellFallback.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── CellMedia.test.tsx │ │ │ │ │ ├── ContentCell.test.tsx │ │ │ │ │ ├── ContentCellFallback.test.tsx │ │ │ │ │ ├── ListCell.perf-test.tsx │ │ │ │ │ ├── ListCell.test.tsx │ │ │ │ │ └── ListCellFallback.test.tsx │ │ │ │ └── index.ts │ │ │ ├── chips/ │ │ │ │ ├── Chip.tsx │ │ │ │ ├── ChipProps.ts │ │ │ │ ├── InputChip.tsx │ │ │ │ ├── MediaChip.tsx │ │ │ │ ├── SelectChip.tsx │ │ │ │ ├── TabbedChips.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── InputChip.figma.tsx │ │ │ │ │ ├── SelectChip.figma.tsx │ │ │ │ │ └── TabbedChips.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Chip.stories.tsx │ │ │ │ │ ├── InputChip.stories.tsx │ │ │ │ │ ├── MediaChip.stories.tsx │ │ │ │ │ ├── SelectChip.stories.tsx │ │ │ │ │ └── TabbedChips.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Chip.test.tsx │ │ │ │ │ ├── InputChip.test.tsx │ │ │ │ │ ├── MediaChip.test.tsx │ │ │ │ │ ├── SelectChip.test.tsx │ │ │ │ │ └── TabbedChips.test.tsx │ │ │ │ └── index.ts │ │ │ ├── coachmark/ │ │ │ │ ├── Coachmark.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Coachmark.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Coachmark.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Coachmark.test.tsx │ │ │ │ └── index.ts │ │ │ ├── collapsible/ │ │ │ │ ├── Collapsible.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Collapsible.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Collapsible.test.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── useCollapsibleAnimation.ts │ │ │ │ ├── useCollapsibleDirection.ts │ │ │ │ └── useToggleAnimation.ts │ │ │ ├── controls/ │ │ │ │ ├── Checkbox.tsx │ │ │ │ ├── CheckboxCell.tsx │ │ │ │ ├── CheckboxGroup.tsx │ │ │ │ ├── Control.tsx │ │ │ │ ├── ControlGroup.tsx │ │ │ │ ├── HelperText.tsx │ │ │ │ ├── InputIcon.tsx │ │ │ │ ├── InputIconButton.tsx │ │ │ │ ├── InputLabel.tsx │ │ │ │ ├── InputStack.tsx │ │ │ │ ├── Menu.tsx │ │ │ │ ├── NativeInput.tsx │ │ │ │ ├── Radio.tsx │ │ │ │ ├── RadioCell.tsx │ │ │ │ ├── RadioGroup.tsx │ │ │ │ ├── SearchInput.tsx │ │ │ │ ├── Select.tsx │ │ │ │ ├── SelectContext.tsx │ │ │ │ ├── SelectOption.tsx │ │ │ │ ├── Switch.tsx │ │ │ │ ├── TextInput.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Checkbox.figma.tsx │ │ │ │ │ ├── CheckboxCell.figma.tsx │ │ │ │ │ ├── CheckboxGroup.figma.tsx │ │ │ │ │ ├── RadioCell.figma.tsx │ │ │ │ │ ├── RadioGroup.figma.tsx │ │ │ │ │ ├── SearchInput.figma.tsx │ │ │ │ │ ├── SelectOption.figma.tsx │ │ │ │ │ ├── Switch.figma.tsx │ │ │ │ │ └── TextInput.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Checkbox.stories.tsx │ │ │ │ │ ├── CheckboxCell.stories.tsx │ │ │ │ │ ├── ControlGroup.stories.tsx │ │ │ │ │ ├── InputIcon.stories.tsx │ │ │ │ │ ├── InputIconButton.stories.tsx │ │ │ │ │ ├── InputStack.stories.tsx │ │ │ │ │ ├── RadioCell.stories.tsx │ │ │ │ │ ├── RadioGroup.stories.tsx │ │ │ │ │ ├── SearchInput.stories.tsx │ │ │ │ │ ├── Select.stories.tsx │ │ │ │ │ ├── SelectOption.stories.tsx │ │ │ │ │ ├── Switch.stories.tsx │ │ │ │ │ └── TextInput.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Checkbox.test.tsx │ │ │ │ │ ├── CheckboxCell.test.tsx │ │ │ │ │ ├── CheckboxGroup.test.tsx │ │ │ │ │ ├── ControlGroup.test.tsx │ │ │ │ │ ├── HelperText.test.tsx │ │ │ │ │ ├── InputIcon.test.tsx │ │ │ │ │ ├── InputIconButton.test.tsx │ │ │ │ │ ├── InputStack.test.tsx │ │ │ │ │ ├── Menu.test.tsx │ │ │ │ │ ├── NativeInput.test.tsx │ │ │ │ │ ├── RadioCell.test.tsx │ │ │ │ │ ├── RadioGroup.test.tsx │ │ │ │ │ ├── SearchInput.test.tsx │ │ │ │ │ ├── Select.test.tsx │ │ │ │ │ ├── SelectOption.test.tsx │ │ │ │ │ ├── Switch.test.tsx │ │ │ │ │ ├── TextInput.test.tsx │ │ │ │ │ └── useControlMotionProps.test.tsx │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ ├── useControlMotionProps.ts │ │ │ │ └── useSelect.tsx │ │ │ ├── core/ │ │ │ │ ├── componentConfig.ts │ │ │ │ └── theme.ts │ │ │ ├── dates/ │ │ │ │ ├── Calendar.tsx │ │ │ │ ├── DateInput.tsx │ │ │ │ ├── DatePicker.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── DatePicker.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Calendar.stories.tsx │ │ │ │ │ ├── DateInput.stories.tsx │ │ │ │ │ └── DatePicker.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Calendar.test.tsx │ │ │ │ │ └── DatePicker.test.tsx │ │ │ │ └── index.ts │ │ │ ├── dots/ │ │ │ │ ├── DotCount.tsx │ │ │ │ ├── DotStatusColor.tsx │ │ │ │ ├── DotSymbol.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── DotCount.figma.tsx │ │ │ │ │ ├── DotStatusColor.figma.tsx │ │ │ │ │ └── DotSymbol.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Dot.stories.tsx │ │ │ │ │ └── DotMisc.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── DotCount.test.tsx │ │ │ │ │ ├── DotStatusColor.test.tsx │ │ │ │ │ ├── DotSymbol.test.tsx │ │ │ │ │ └── getTransformers.test.tsx │ │ │ │ ├── dotStyles.tsx │ │ │ │ ├── index.ts │ │ │ │ └── useDotsLayout.ts │ │ │ ├── examples/ │ │ │ │ └── ExampleScreen.tsx │ │ │ ├── gradients/ │ │ │ │ ├── LinearGradient.tsx │ │ │ │ └── __stories__/ │ │ │ │ └── LinearGradient.stories.tsx │ │ │ ├── hooks/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── constants.ts │ │ │ │ │ ├── useA11y.test.ts │ │ │ │ │ ├── useAppState.test.ts │ │ │ │ │ ├── useCellSpacing.test.ts │ │ │ │ │ ├── useDimension.test.ts │ │ │ │ │ ├── useHorizontalScrollToTarget.test.ts │ │ │ │ │ ├── useInputBorderStyle.test.ts │ │ │ │ │ ├── usePressAnimation.test.ts │ │ │ │ │ ├── useScreenReaderStatus.test.ts │ │ │ │ │ ├── useScrollOffset.test.ts │ │ │ │ │ ├── useScrollTo.test.tsx │ │ │ │ │ ├── useStatusBarHeight.test.ts │ │ │ │ │ └── useWebBrowserOpener.test.tsx │ │ │ │ ├── useA11y.ts │ │ │ │ ├── useAnimatedTransition.ts │ │ │ │ ├── useAppState.ts │ │ │ │ ├── useCellSpacing.ts │ │ │ │ ├── useCheckboxGroupState.ts │ │ │ │ ├── useComponentConfig.ts │ │ │ │ ├── useContentSize.ts │ │ │ │ ├── useDeviceColorScheme.ts │ │ │ │ ├── useDeviceFontScale.ts │ │ │ │ ├── useDimensions.ts │ │ │ │ ├── useDotPinStyles.ts │ │ │ │ ├── useEventHandler.ts │ │ │ │ ├── useHasNotch.ts │ │ │ │ ├── useHorizontalScrollToTarget.ts │ │ │ │ ├── useHorizontallyScrollingPressables.ts │ │ │ │ ├── useInputBorderAnimation.tsx │ │ │ │ ├── useInputBorderStyle.ts │ │ │ │ ├── useLayout.ts │ │ │ │ ├── usePressAnimation.ts │ │ │ │ ├── useSafeBottomPadding.ts │ │ │ │ ├── useScreenReaderStatus.ts │ │ │ │ ├── useScrollOffset.ts │ │ │ │ ├── useScrollTo.ts │ │ │ │ ├── useSelectionCellBorderStyle.ts │ │ │ │ ├── useStatusBarHeight.ts │ │ │ │ ├── useTextAlign.ts │ │ │ │ ├── useTheme.ts │ │ │ │ └── useWebBrowserOpener.ts │ │ │ ├── icons/ │ │ │ │ ├── Icon.tsx │ │ │ │ ├── LogoMark.tsx │ │ │ │ ├── LogoWordmark.tsx │ │ │ │ ├── SubBrandLogoMark.tsx │ │ │ │ ├── SubBrandLogoWordmark.tsx │ │ │ │ ├── TextIcon.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Icon.figma.tsx │ │ │ │ │ ├── LogoMark.figma.tsx │ │ │ │ │ ├── LogoWordmark.figma.tsx │ │ │ │ │ ├── SubBrandLogoMark.figma.tsx │ │ │ │ │ └── SubBrandLogoWordmark.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── IconSheet.tsx │ │ │ │ │ └── Logo.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Icon.perf-test.tsx │ │ │ │ │ └── Icon.test.tsx │ │ │ │ └── index.ts │ │ │ ├── illustrations/ │ │ │ │ ├── HeroSquare.tsx │ │ │ │ ├── Pictogram.tsx │ │ │ │ ├── SpotIcon.tsx │ │ │ │ ├── SpotRectangle.tsx │ │ │ │ ├── SpotSquare.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── HeroSquare.figma.tsx │ │ │ │ │ ├── Pictogram.figma.tsx │ │ │ │ │ ├── SpotIcon.figma.tsx │ │ │ │ │ ├── SpotRectangle.figma.tsx │ │ │ │ │ └── SpotSquare.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── HeroSquare.stories.tsx │ │ │ │ │ ├── Pictogram.stories.tsx │ │ │ │ │ ├── SpotIcon.stories.tsx │ │ │ │ │ ├── SpotRectangle.stories.tsx │ │ │ │ │ ├── SpotSquare.stories.tsx │ │ │ │ │ ├── ThemedIllustrations.stories.tsx │ │ │ │ │ └── illustrationThemes.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── HeroSquare.test.tsx │ │ │ │ │ ├── Pictogram.test.tsx │ │ │ │ │ ├── SpotRectangle.test.tsx │ │ │ │ │ └── SpotSquare.test.tsx │ │ │ │ ├── createIllustration.tsx │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── jest.d.ts │ │ │ ├── layout/ │ │ │ │ ├── Box.tsx │ │ │ │ ├── Divider.tsx │ │ │ │ ├── Fallback.tsx │ │ │ │ ├── Group.tsx │ │ │ │ ├── HStack.tsx │ │ │ │ ├── OverflowGradient.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ ├── VStack.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Divider.figma.tsx │ │ │ │ │ └── Fallback.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Box.stories.tsx │ │ │ │ │ ├── Divider.stories.tsx │ │ │ │ │ ├── Fallback.stories.tsx │ │ │ │ │ ├── Group.stories.tsx │ │ │ │ │ ├── LoremIpsum.tsx │ │ │ │ │ └── Spacer.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Box.perf-test.tsx │ │ │ │ │ ├── Box.test.tsx │ │ │ │ │ ├── Divider.perf-test.tsx │ │ │ │ │ ├── Fallback.perf-test.tsx │ │ │ │ │ └── Fallback.test.tsx │ │ │ │ └── index.ts │ │ │ ├── loaders/ │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Spinner.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Spinner.test.tsx │ │ │ │ └── index.ts │ │ │ ├── media/ │ │ │ │ ├── Avatar.tsx │ │ │ │ ├── Carousel/ │ │ │ │ │ ├── Carousel.tsx │ │ │ │ │ ├── CarouselItem.tsx │ │ │ │ │ ├── CarouselItemContext.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── Carousel.test.tsx │ │ │ │ │ │ ├── useCarousel.test.tsx │ │ │ │ │ │ └── useCarouselItem.test.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ ├── useCarousel.ts │ │ │ │ │ ├── useCarouselItem.ts │ │ │ │ │ └── useDismissCarouselItem.ts │ │ │ │ ├── RemoteImage.tsx │ │ │ │ ├── RemoteImageFallbackXmls/ │ │ │ │ │ ├── dark.js │ │ │ │ │ └── light.js │ │ │ │ ├── RemoteImageGroup.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Avatar.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Avatar.stories.tsx │ │ │ │ │ ├── CarouselAlphaExample.tsx │ │ │ │ │ ├── CarouselMedia.stories.tsx │ │ │ │ │ ├── RemoteImage.stories.tsx │ │ │ │ │ └── RemoteImageGroup.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Avatar.test.tsx │ │ │ │ │ ├── RemoteImage.test.tsx │ │ │ │ │ ├── RemoteImageGroup.test.tsx │ │ │ │ │ └── getSource.test.ts │ │ │ │ └── index.ts │ │ │ ├── motion/ │ │ │ │ ├── AnimatedCaret.tsx │ │ │ │ ├── ColorSurge.tsx │ │ │ │ ├── Pulse.tsx │ │ │ │ ├── Shake.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AnimatedCaret.stories.tsx │ │ │ │ │ └── HintMotion.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AnimatedCaret.test.tsx │ │ │ │ │ ├── Pulse.test.tsx │ │ │ │ │ ├── Shake.test.tsx │ │ │ │ │ ├── convertMotionConfig.test.ts │ │ │ │ │ └── withMotionTiming.test.ts │ │ │ │ ├── convertMotionConfig.ts │ │ │ │ ├── types.ts │ │ │ │ └── withMotionTiming.ts │ │ │ ├── multi-content-module/ │ │ │ │ ├── MultiContentModule.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── MultiContentModule.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── MultiContentModule.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── MultiContentModule.test.tsx │ │ │ │ └── index.ts │ │ │ ├── navigation/ │ │ │ │ ├── BrowserBar.tsx │ │ │ │ ├── BrowserBarSearchInput.tsx │ │ │ │ ├── NavBarIconButton.tsx │ │ │ │ ├── NavigationSubtitle.tsx │ │ │ │ ├── NavigationTitle.tsx │ │ │ │ ├── NavigationTitleSelect.tsx │ │ │ │ ├── TopNavBar.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── BrowserBar.figma.tsx │ │ │ │ │ └── TopNavBar.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── BrowserBar.stories.tsx │ │ │ │ │ ├── BrowserBarSearchInput.stories.tsx │ │ │ │ │ ├── NavBarIconButton.stories.tsx │ │ │ │ │ ├── NavigationSubtitle.stories.tsx │ │ │ │ │ ├── NavigationTitle.stories.tsx │ │ │ │ │ ├── NavigationTitleSelect.stories.tsx │ │ │ │ │ └── TopNavBar.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── BrowserBar.test.tsx │ │ │ │ │ ├── BrowserBarSearchInput.test.tsx │ │ │ │ │ ├── NavBarIconButton.test.tsx │ │ │ │ │ ├── NavigationSubtitle.test.tsx │ │ │ │ │ ├── NavigationTitle.test.tsx │ │ │ │ │ ├── NavigationTitleSelect.test.tsx │ │ │ │ │ └── TopNavBar.test.tsx │ │ │ │ └── index.ts │ │ │ ├── numbers/ │ │ │ │ ├── RollingNumber/ │ │ │ │ │ ├── DefaultRollingNumberAffixSection.tsx │ │ │ │ │ ├── DefaultRollingNumberDigit.tsx │ │ │ │ │ ├── DefaultRollingNumberMask.tsx │ │ │ │ │ ├── DefaultRollingNumberSymbol.tsx │ │ │ │ │ ├── DefaultRollingNumberValueSection.tsx │ │ │ │ │ ├── RollingNumber.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── useColorPulse.ts │ │ │ │ ├── __stories__/ │ │ │ │ │ └── RollingNumber.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── RollingNumber.a11y.test.tsx │ │ │ │ └── index.ts │ │ │ ├── numpad/ │ │ │ │ ├── Numpad.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Numpad.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Numpad.stories.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── Numpad.test.tsx │ │ │ ├── overlays/ │ │ │ │ ├── Alert.tsx │ │ │ │ ├── PortalProvider.tsx │ │ │ │ ├── Toast.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Alert.figma.tsx │ │ │ │ │ └── Toast.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AlertBasic.stories.tsx │ │ │ │ │ ├── AlertLongTitle.stories.tsx │ │ │ │ │ ├── AlertOverModal.stories.tsx │ │ │ │ │ ├── AlertPortal.stories.tsx │ │ │ │ │ ├── AlertSingleAction.stories.tsx │ │ │ │ │ ├── AlertVerticalActions.stories.tsx │ │ │ │ │ ├── DrawerBottom.stories.tsx │ │ │ │ │ ├── DrawerFallback.stories.tsx │ │ │ │ │ ├── DrawerLeft.stories.tsx │ │ │ │ │ ├── DrawerMisc.stories.tsx │ │ │ │ │ ├── DrawerReduceMotion.stories.tsx │ │ │ │ │ ├── DrawerRight.stories.tsx │ │ │ │ │ ├── DrawerScrollable.stories.tsx │ │ │ │ │ ├── DrawerTop.stories.tsx │ │ │ │ │ ├── Drawers.tsx │ │ │ │ │ ├── ModalBackButton.stories.tsx │ │ │ │ │ ├── ModalBasic.stories.tsx │ │ │ │ │ ├── ModalCustomHeader.stories.tsx │ │ │ │ │ ├── ModalCustomPadding.stories.tsx │ │ │ │ │ ├── ModalLong.stories.tsx │ │ │ │ │ ├── ModalPortal.stories.tsx │ │ │ │ │ ├── Overlay.stories.tsx │ │ │ │ │ ├── Toast.stories.tsx │ │ │ │ │ ├── TooltipV2.stories.tsx │ │ │ │ │ ├── TrayAction.stories.tsx │ │ │ │ │ ├── TrayBasic.stories.tsx │ │ │ │ │ ├── TrayFallback.stories.tsx │ │ │ │ │ ├── TrayFeedCard.stories.tsx │ │ │ │ │ ├── TrayInformational.stories.tsx │ │ │ │ │ ├── TrayMessaging.stories.tsx │ │ │ │ │ ├── TrayMisc.stories.tsx │ │ │ │ │ ├── TrayNavigation.stories.tsx │ │ │ │ │ ├── TrayPromotional.stories.tsx │ │ │ │ │ ├── TrayRedesign.stories.tsx │ │ │ │ │ ├── TrayReduceMotion.stories.tsx │ │ │ │ │ ├── TrayScrollable.stories.tsx │ │ │ │ │ ├── TrayTall.stories.tsx │ │ │ │ │ ├── TrayWithTitle.stories.tsx │ │ │ │ │ └── Trays.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Alert.test.tsx │ │ │ │ │ ├── PortalProvider.test.tsx │ │ │ │ │ └── Toast.test.tsx │ │ │ │ ├── drawer/ │ │ │ │ │ ├── Drawer.tsx │ │ │ │ │ ├── DrawerStatusBar.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── Drawer.test.tsx │ │ │ │ │ │ └── useDrawerSpacing.test.tsx │ │ │ │ │ ├── useDrawerAnimation.ts │ │ │ │ │ ├── useDrawerPanResponder.ts │ │ │ │ │ └── useDrawerSpacing.ts │ │ │ │ ├── handlebar/ │ │ │ │ │ └── HandleBar.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── modal/ │ │ │ │ │ ├── Modal.tsx │ │ │ │ │ ├── ModalBody.tsx │ │ │ │ │ ├── ModalFooter.tsx │ │ │ │ │ ├── ModalHeader.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── Modal.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── Modal.perf-test.tsx │ │ │ │ │ │ └── Modal.test.tsx │ │ │ │ │ └── useModalAnimation.ts │ │ │ │ ├── overlay/ │ │ │ │ │ ├── Overlay.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── Overlay.test.tsx │ │ │ │ │ │ └── useOverlayAnimation.test.ts │ │ │ │ │ └── useOverlayAnimation.ts │ │ │ │ ├── tooltip/ │ │ │ │ │ ├── InternalTooltip.tsx │ │ │ │ │ ├── Tooltip.tsx │ │ │ │ │ ├── TooltipProps.ts │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── Tooltip.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── InternalTooltip.test.tsx │ │ │ │ │ │ ├── Tooltip.test.tsx │ │ │ │ │ │ └── UseTooltipPositionTestData.ts │ │ │ │ │ ├── useTooltipAnimation.ts │ │ │ │ │ └── useTooltipPosition.ts │ │ │ │ ├── tray/ │ │ │ │ │ ├── Tray.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── Tray.figma.tsx │ │ │ │ │ └── __tests__/ │ │ │ │ │ └── Tray.test.tsx │ │ │ │ ├── useAlertAnimation.ts │ │ │ │ ├── useModal.ts │ │ │ │ ├── usePortal.ts │ │ │ │ ├── useToast.tsx │ │ │ │ ├── useToastAnimation.ts │ │ │ │ └── useToastPanResponder.ts │ │ │ ├── page/ │ │ │ │ ├── PageFooter.tsx │ │ │ │ ├── PageHeader.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── PageFooter.figma.tsx │ │ │ │ │ └── PageHeader.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── PageFooter.stories.tsx │ │ │ │ │ ├── PageFooterInPage.stories.tsx │ │ │ │ │ ├── PageHeader.stories.tsx │ │ │ │ │ ├── PageHeaderInErrorEmptyState.stories.tsx │ │ │ │ │ └── PageHeaderInPage.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── PageFooter.test.tsx │ │ │ │ │ └── PageHeader.test.tsx │ │ │ │ └── index.ts │ │ │ ├── perf/ │ │ │ │ └── component-config/ │ │ │ │ ├── Button.component-config.perf-test.tsx │ │ │ │ ├── ComponentConfigProvider.perf-test.tsx │ │ │ │ ├── ComponentConfigStickerSheet.perf-test.tsx │ │ │ │ └── README.md │ │ │ ├── section-header/ │ │ │ │ ├── SectionHeader.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── SectionHeader.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── SectionHeader.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── SectionHeader.test.tsx │ │ │ │ └── index.ts │ │ │ ├── stepper/ │ │ │ │ ├── DefaultStepperHeaderHorizontal.tsx │ │ │ │ ├── DefaultStepperIconVertical.tsx │ │ │ │ ├── DefaultStepperLabelVertical.tsx │ │ │ │ ├── DefaultStepperProgressHorizontal.tsx │ │ │ │ ├── DefaultStepperProgressVertical.tsx │ │ │ │ ├── DefaultStepperStepHorizontal.tsx │ │ │ │ ├── DefaultStepperStepVertical.tsx │ │ │ │ ├── DefaultStepperSubstepContainerHorizontal.tsx │ │ │ │ ├── DefaultStepperSubstepContainerVertical.tsx │ │ │ │ ├── Stepper.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── StepperHorizontal.stories.tsx │ │ │ │ │ └── StepperVertical.stories.tsx │ │ │ │ └── index.ts │ │ │ ├── sticky-footer/ │ │ │ │ ├── StickyFooter.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── StickyFooter.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── StickyFooter.stories.tsx │ │ │ │ │ └── StickyFooterWithTray.stories.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── StickyFooter.test.tsx │ │ │ ├── styles/ │ │ │ │ ├── fallbackShimmer.ts │ │ │ │ ├── getBorderStyles.ts │ │ │ │ ├── getFlushStyles.ts │ │ │ │ ├── getInteractableStyles.ts │ │ │ │ ├── pinStyles.ts │ │ │ │ └── styleProps.ts │ │ │ ├── system/ │ │ │ │ ├── AndroidNavigationBar.tsx │ │ │ │ ├── ComponentConfigProvider.tsx │ │ │ │ ├── EventHandlerProvider.tsx │ │ │ │ ├── Interactable.tsx │ │ │ │ ├── Pressable.tsx │ │ │ │ ├── PressableOpacity.tsx │ │ │ │ ├── StatusBar.tsx │ │ │ │ ├── ThemeProvider.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── AndroidNavigationBar.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── ComponentConfigProvider.stories.tsx │ │ │ │ │ ├── ComponentConfigProviderCustom.stories.tsx │ │ │ │ │ ├── Frontier.stories.tsx │ │ │ │ │ ├── Palette.stories.tsx │ │ │ │ │ ├── PatternDisclosureHighFrictionBenefit.stories.tsx │ │ │ │ │ ├── PatternDisclosureHighFrictionRisk.stories.tsx │ │ │ │ │ ├── PatternDisclosureLowFriction.stories.tsx │ │ │ │ │ ├── PatternDisclosureMedFriction.stories.tsx │ │ │ │ │ ├── PatternError.stories.tsx │ │ │ │ │ ├── Pressable.stories.tsx │ │ │ │ │ ├── PressableOpacity.stories.tsx │ │ │ │ │ ├── Spectrum.stories.tsx │ │ │ │ │ ├── ThemeProvider.stories.tsx │ │ │ │ │ └── componentConfigStickerSheet/ │ │ │ │ │ ├── Container.tsx │ │ │ │ │ ├── StickerSheet.tsx │ │ │ │ │ ├── customComponentConfig.tsx │ │ │ │ │ ├── customTheme.ts │ │ │ │ │ ├── examples/ │ │ │ │ │ │ ├── Accordion.tsx │ │ │ │ │ │ ├── Avatar.tsx │ │ │ │ │ │ ├── Banner.tsx │ │ │ │ │ │ ├── Button.tsx │ │ │ │ │ │ ├── Coachmark.tsx │ │ │ │ │ │ ├── Controls.tsx │ │ │ │ │ │ ├── DatePicker.tsx │ │ │ │ │ │ ├── DotCount.tsx │ │ │ │ │ │ ├── Icon.tsx │ │ │ │ │ │ ├── InputChip.tsx │ │ │ │ │ │ ├── ListCell.tsx │ │ │ │ │ │ ├── Search.tsx │ │ │ │ │ │ ├── SegmentedTabs.tsx │ │ │ │ │ │ ├── Select.tsx │ │ │ │ │ │ ├── SelectChip.tsx │ │ │ │ │ │ ├── Tabs.tsx │ │ │ │ │ │ ├── Tag.tsx │ │ │ │ │ │ ├── TextInput.tsx │ │ │ │ │ │ └── constants.ts │ │ │ │ │ └── themeVars.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AndroidNavigationBar.test.tsx │ │ │ │ │ ├── ComponentConfigProvider.test.tsx │ │ │ │ │ ├── StatusBar.test.tsx │ │ │ │ │ └── useAndroidNavigationBarUpdater.test.tsx │ │ │ │ └── index.ts │ │ │ ├── tabs/ │ │ │ │ ├── DefaultTab.tsx │ │ │ │ ├── DefaultTabsActiveIndicator.tsx │ │ │ │ ├── SegmentedTab.tsx │ │ │ │ ├── SegmentedTabs.tsx │ │ │ │ ├── SegmentedTabsActiveIndicator.tsx │ │ │ │ ├── TabIndicator.tsx │ │ │ │ ├── TabLabel.tsx │ │ │ │ ├── TabNavigation.tsx │ │ │ │ ├── Tabs.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── SegmentedTabs.figma.tsx │ │ │ │ │ └── TabNavigation.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── SegmentedTabs.stories.tsx │ │ │ │ │ ├── TabIndicator.stories.tsx │ │ │ │ │ ├── TabLabel.stories.tsx │ │ │ │ │ ├── TabNavigation.stories.tsx │ │ │ │ │ └── Tabs.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── SegmentedTab.test.tsx │ │ │ │ │ ├── SegmentedTabs.test.tsx │ │ │ │ │ ├── TabIndicator.test.tsx │ │ │ │ │ ├── TabNavigation.test.tsx │ │ │ │ │ └── Tabs.test.tsx │ │ │ │ ├── hooks/ │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── useDotAnimation.test.ts │ │ │ │ │ ├── useDotAnimation.ts │ │ │ │ │ └── useTabIndicatorStyles.ts │ │ │ │ └── index.ts │ │ │ ├── tag/ │ │ │ │ ├── Tag.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Tag.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Tag.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Tag.test.tsx │ │ │ │ └── index.ts │ │ │ ├── themes/ │ │ │ │ ├── coinbaseDenseTheme.ts │ │ │ │ ├── coinbaseHighContrastTheme.ts │ │ │ │ ├── coinbaseTheme.ts │ │ │ │ ├── defaultHighContrastTheme.ts │ │ │ │ └── defaultTheme.ts │ │ │ ├── tour/ │ │ │ │ ├── DefaultTourMask.tsx │ │ │ │ ├── DefaultTourStepArrow.tsx │ │ │ │ ├── Tour.tsx │ │ │ │ ├── TourStep.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Tour.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Tour.test.tsx │ │ │ │ └── index.ts │ │ │ ├── typography/ │ │ │ │ ├── Link.tsx │ │ │ │ ├── Text.tsx │ │ │ │ ├── TextBody.tsx │ │ │ │ ├── TextCaption.tsx │ │ │ │ ├── TextDisplay1.tsx │ │ │ │ ├── TextDisplay2.tsx │ │ │ │ ├── TextDisplay3.tsx │ │ │ │ ├── TextHeadline.tsx │ │ │ │ ├── TextInherited.tsx │ │ │ │ ├── TextLabel1.tsx │ │ │ │ ├── TextLabel2.tsx │ │ │ │ ├── TextLegal.tsx │ │ │ │ ├── TextTitle1.tsx │ │ │ │ ├── TextTitle2.tsx │ │ │ │ ├── TextTitle3.tsx │ │ │ │ ├── TextTitle4.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Link.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Link.stories.tsx │ │ │ │ │ ├── Text.stories.tsx │ │ │ │ │ ├── TextBody.stories.tsx │ │ │ │ │ ├── TextCaption.stories.tsx │ │ │ │ │ ├── TextCore.stories.tsx │ │ │ │ │ ├── TextDisplay1.stories.tsx │ │ │ │ │ ├── TextDisplay2.stories.tsx │ │ │ │ │ ├── TextDisplay3.stories.tsx │ │ │ │ │ ├── TextExamples.tsx │ │ │ │ │ ├── TextHeadline.stories.tsx │ │ │ │ │ ├── TextLabel1.stories.tsx │ │ │ │ │ ├── TextLabel2.stories.tsx │ │ │ │ │ ├── TextLegal.stories.tsx │ │ │ │ │ ├── TextTitle1.stories.tsx │ │ │ │ │ ├── TextTitle2.stories.tsx │ │ │ │ │ ├── TextTitle3.stories.tsx │ │ │ │ │ └── TextTitle4.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Link.perf-test.tsx │ │ │ │ │ ├── Link.test.tsx │ │ │ │ │ └── Text.test.tsx │ │ │ │ └── index.ts │ │ │ ├── utils/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── convertThemedSvgToHex.test.ts │ │ │ │ │ ├── debounce.test.ts │ │ │ │ │ ├── flattenAndJoinNodes.test.tsx │ │ │ │ │ ├── isValidURL.test.ts │ │ │ │ │ ├── mergeComponentProps.test.ts │ │ │ │ │ └── openWebBrowser.test.ts │ │ │ │ ├── convertThemedSvgToHex.ts │ │ │ │ ├── customTabsHelper.ts │ │ │ │ ├── debounce.ts │ │ │ │ ├── flattenAndJoinNodes.tsx │ │ │ │ ├── getAdjustedFontScale.ts │ │ │ │ ├── getSpacerStyle.ts │ │ │ │ ├── haptics.ts │ │ │ │ ├── isValidURL.ts │ │ │ │ ├── mergeComponentProps.ts │ │ │ │ ├── openWebBrowser.ts │ │ │ │ └── testHelpers.tsx │ │ │ └── visualizations/ │ │ │ ├── Counter.tsx │ │ │ ├── DefaultProgressCircleContent.tsx │ │ │ ├── ProgressBar.tsx │ │ │ ├── ProgressBarWithFixedLabels.tsx │ │ │ ├── ProgressBarWithFloatLabel.tsx │ │ │ ├── ProgressCircle.tsx │ │ │ ├── ProgressContainerWithButtons.tsx │ │ │ ├── ProgressIndicator.tsx │ │ │ ├── ProgressTextLabel.tsx │ │ │ ├── VisualizationContainer.tsx │ │ │ ├── __figma__/ │ │ │ │ ├── ProgressBar.figma.tsx │ │ │ │ └── ProgressCircle.figma.tsx │ │ │ ├── __stories__/ │ │ │ │ ├── ProgressBar.stories.tsx │ │ │ │ └── ProgressCircle.stories.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── ProgressBar.test.tsx │ │ │ │ ├── ProgressCircle.test.tsx │ │ │ │ └── ProgressIndicator.test.tsx │ │ │ ├── getProgressBarLabelParts.ts │ │ │ └── index.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── mobile-visreg/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── config/ │ │ │ └── enabled-routes.mjs │ │ ├── flows/ │ │ │ ├── capture-overlay-route-steps.yaml │ │ │ ├── capture-route-steps.yaml │ │ │ ├── capture-route.yaml │ │ │ └── dismiss-deep-link-dialog.yaml │ │ ├── package.json │ │ ├── project.json │ │ ├── scripts/ │ │ │ └── shouldRunVisreg.mjs │ │ └── src/ │ │ ├── config.mjs │ │ ├── generate-flows.mjs │ │ ├── run.mjs │ │ ├── setup.mjs │ │ └── upload.mjs │ ├── mobile-visualization/ │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest/ │ │ │ └── setup.js │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── chart/ │ │ │ │ ├── CartesianChart.tsx │ │ │ │ ├── ChartContextBridge.tsx │ │ │ │ ├── ChartProvider.tsx │ │ │ │ ├── Path.tsx │ │ │ │ ├── PeriodSelector.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── CartesianChart.stories.tsx │ │ │ │ │ ├── ChartAccessibility.stories.tsx │ │ │ │ │ ├── ChartTransitions.stories.tsx │ │ │ │ │ └── PeriodSelector.stories.tsx │ │ │ │ ├── area/ │ │ │ │ │ ├── Area.tsx │ │ │ │ │ ├── AreaChart.tsx │ │ │ │ │ ├── DottedArea.tsx │ │ │ │ │ ├── GradientArea.tsx │ │ │ │ │ ├── SolidArea.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── AreaChart.stories.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── axis/ │ │ │ │ │ ├── Axis.tsx │ │ │ │ │ ├── DefaultAxisTickLabel.tsx │ │ │ │ │ ├── XAxis.tsx │ │ │ │ │ ├── YAxis.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Axis.stories.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── bar/ │ │ │ │ │ ├── Bar.tsx │ │ │ │ │ ├── BarChart.tsx │ │ │ │ │ ├── BarPlot.tsx │ │ │ │ │ ├── BarStack.tsx │ │ │ │ │ ├── BarStackGroup.tsx │ │ │ │ │ ├── DefaultBar.tsx │ │ │ │ │ ├── DefaultBarStack.tsx │ │ │ │ │ ├── PercentageBarChart.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ ├── BarChart.stories.tsx │ │ │ │ │ │ └── PercentageBarChart.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── PercentageBarChart.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── gradient/ │ │ │ │ │ ├── Gradient.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── legend/ │ │ │ │ │ ├── DefaultLegendEntry.tsx │ │ │ │ │ ├── DefaultLegendShape.tsx │ │ │ │ │ ├── Legend.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Legend.stories.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── line/ │ │ │ │ │ ├── DefaultReferenceLineLabel.tsx │ │ │ │ │ ├── DottedLine.tsx │ │ │ │ │ ├── Line.tsx │ │ │ │ │ ├── LineChart.tsx │ │ │ │ │ ├── ReferenceLine.tsx │ │ │ │ │ ├── SolidLine.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ ├── LineChart.stories.tsx │ │ │ │ │ │ └── ReferenceLine.stories.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── point/ │ │ │ │ │ ├── DefaultPointLabel.tsx │ │ │ │ │ ├── Point.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── scrubber/ │ │ │ │ │ ├── DefaultScrubberBeacon.tsx │ │ │ │ │ ├── DefaultScrubberBeaconLabel.tsx │ │ │ │ │ ├── DefaultScrubberLabel.tsx │ │ │ │ │ ├── Scrubber.tsx │ │ │ │ │ ├── ScrubberAccessibilityView.tsx │ │ │ │ │ ├── ScrubberBeaconGroup.tsx │ │ │ │ │ ├── ScrubberBeaconLabelGroup.tsx │ │ │ │ │ ├── ScrubberProvider.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Scrubber.stories.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── text/ │ │ │ │ │ ├── ChartText.tsx │ │ │ │ │ ├── ChartTextGroup.tsx │ │ │ │ │ └── index.ts │ │ │ │ └── utils/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── axis.test.ts │ │ │ │ │ ├── bar.test.ts │ │ │ │ │ ├── chart.test.ts │ │ │ │ │ ├── gradient.test.ts │ │ │ │ │ ├── path.test.ts │ │ │ │ │ ├── point.test.ts │ │ │ │ │ ├── scale.test.ts │ │ │ │ │ ├── scrubber.test.ts │ │ │ │ │ └── transition.test.ts │ │ │ │ ├── axis.ts │ │ │ │ ├── bar.ts │ │ │ │ ├── chart.ts │ │ │ │ ├── context.ts │ │ │ │ ├── gradient.ts │ │ │ │ ├── index.ts │ │ │ │ ├── path.ts │ │ │ │ ├── point.ts │ │ │ │ ├── scale.ts │ │ │ │ ├── scrubber.ts │ │ │ │ └── transition.ts │ │ │ ├── index.ts │ │ │ └── sparkline/ │ │ │ ├── Counter.tsx │ │ │ ├── Sparkline.tsx │ │ │ ├── SparklineArea.tsx │ │ │ ├── SparklineAreaPattern.tsx │ │ │ ├── SparklineGradient.tsx │ │ │ ├── __figma__/ │ │ │ │ └── Sparkline.figma.tsx │ │ │ ├── __stories__/ │ │ │ │ ├── Sparkline.stories.tsx │ │ │ │ └── SparklineGradient.stories.tsx │ │ │ ├── generateSparklineWithId.ts │ │ │ ├── index.ts │ │ │ ├── sparkline-interactive/ │ │ │ │ ├── SparklineAccessibleView.tsx │ │ │ │ ├── SparklineInteractive.tsx │ │ │ │ ├── SparklineInteractiveAnimatedPath.tsx │ │ │ │ ├── SparklineInteractiveHoverDate.tsx │ │ │ │ ├── SparklineInteractiveLineVertical.tsx │ │ │ │ ├── SparklineInteractiveMarkerDates.tsx │ │ │ │ ├── SparklineInteractiveMinMax.tsx │ │ │ │ ├── SparklineInteractivePanGestureHandler.tsx │ │ │ │ ├── SparklineInteractivePaths.tsx │ │ │ │ ├── SparklineInteractivePeriodSelector.tsx │ │ │ │ ├── SparklineInteractiveProvider.tsx │ │ │ │ ├── SparklineInteractiveTimeseriesPaths.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── SparklineInteractive.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── SparklineInteractive.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── SparklineInteractive.test.tsx │ │ │ │ │ ├── SparklineInteractiveHoverDate.test.tsx │ │ │ │ │ ├── SparklineInteractivePanGestureHandler.test.tsx │ │ │ │ │ ├── SparklineInteractivePeriodSelector.test.tsx │ │ │ │ │ ├── SparklineInteractiveTimeseriesPaths.test.tsx │ │ │ │ │ └── useMinMaxTransform.test.ts │ │ │ │ ├── useInterruptiblePathAnimation.test.disable.ts │ │ │ │ ├── useInterruptiblePathAnimation.ts │ │ │ │ ├── useMinMaxTransform.ts │ │ │ │ ├── useOpacityAnimation.ts │ │ │ │ ├── useSparklineInteractiveConstants.ts │ │ │ │ └── useSparklineInteractiveLineStyles.ts │ │ │ └── sparkline-interactive-header/ │ │ │ ├── SparklineInteractiveHeader.tsx │ │ │ ├── __figma__/ │ │ │ │ └── SparklineInteractiveHeader.figma.tsx │ │ │ ├── __stories__/ │ │ │ │ └── SparklineInteractiveHeader.stories.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── SparklineInteractiveHeader.test.tsx │ │ │ │ └── useSparklineInteractiveHeaderStyles.test.ts │ │ │ └── useSparklineInteractiveHeaderStyles.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── ui-mobile-playground/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── scripts/ │ │ │ └── generateIconSvgMap.ts │ │ ├── src/ │ │ │ ├── __generated__/ │ │ │ │ └── iconSvgMap.ts │ │ │ ├── components/ │ │ │ │ ├── ExamplesListScreen.tsx │ │ │ │ ├── ExamplesSearchProvider.tsx │ │ │ │ ├── IconSheetScreen.tsx │ │ │ │ ├── Playground.tsx │ │ │ │ ├── PlaygroundRoute.ts │ │ │ │ ├── index.ts │ │ │ │ ├── keyToRouteName.ts │ │ │ │ ├── staticRoutes.ts │ │ │ │ ├── transformRouteToNavComponent.ts │ │ │ │ └── useExampleNavigatorProps.tsx │ │ │ ├── index.ts │ │ │ └── routes.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── utils/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── array.ts │ │ │ ├── env.ts │ │ │ ├── index.ts │ │ │ ├── noop.ts │ │ │ ├── object.ts │ │ │ ├── string.ts │ │ │ └── types.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── vscode-plugin/ │ │ ├── .vscodeignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.mjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── cds-next/ │ │ │ │ ├── core/ │ │ │ │ │ └── theme.ts │ │ │ │ ├── styles/ │ │ │ │ │ ├── spectrum.ts │ │ │ │ │ └── vars.ts │ │ │ │ └── themes/ │ │ │ │ ├── auto.ts │ │ │ │ ├── dark.ts │ │ │ │ ├── light.ts │ │ │ │ └── subthemes/ │ │ │ │ ├── color/ │ │ │ │ │ ├── dark.ts │ │ │ │ │ └── light.ts │ │ │ │ ├── density/ │ │ │ │ │ ├── dense.ts │ │ │ │ │ └── normal.ts │ │ │ │ └── illustrationColor/ │ │ │ │ ├── dark.ts │ │ │ │ └── light.ts │ │ │ ├── client.ts │ │ │ └── server.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ ├── web/ │ │ ├── .npmignore │ │ ├── .stylelintrc.json │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── babel.config.cjs │ │ ├── deploy.yml │ │ ├── docker-compose.yml │ │ ├── jest/ │ │ │ ├── setup.js │ │ │ └── svgEsmMapMock.js │ │ ├── jest.config.js │ │ ├── optimize-css.ts │ │ ├── package.json │ │ ├── project.json │ │ ├── publish.Dockerfile │ │ ├── src/ │ │ │ ├── AccessibilityAnnouncer/ │ │ │ │ ├── AccessibilityAnnouncer.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── AccessibilityAnnouncer.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── AccessibilityAnnouncer.test.tsx │ │ │ │ └── index.ts │ │ │ ├── __stories__/ │ │ │ │ ├── AccessibilityViolations.stories.tsx │ │ │ │ ├── Palette.stories.tsx │ │ │ │ └── componentConfigStickerSheet/ │ │ │ │ ├── BodyText.tsx │ │ │ │ ├── Container.tsx │ │ │ │ ├── StickerSheet.tsx │ │ │ │ ├── customComponentConfig.tsx │ │ │ │ ├── customTheme.ts │ │ │ │ ├── examples/ │ │ │ │ │ ├── AlertExample.tsx │ │ │ │ │ ├── Controls.tsx │ │ │ │ │ ├── DatePicker.tsx │ │ │ │ │ ├── DropdownExample.tsx │ │ │ │ │ ├── ModalExample.tsx │ │ │ │ │ ├── Pagination.tsx │ │ │ │ │ ├── RollingNumber.tsx │ │ │ │ │ ├── Search.tsx │ │ │ │ │ ├── SegmentedTabs.tsx │ │ │ │ │ ├── Select.tsx │ │ │ │ │ ├── SelectChip.tsx │ │ │ │ │ ├── StepperHorizontal.tsx │ │ │ │ │ ├── StepperVertical.tsx │ │ │ │ │ ├── TableExample.tsx │ │ │ │ │ ├── Tabs.tsx │ │ │ │ │ ├── TextInput.tsx │ │ │ │ │ └── ToastExample.tsx │ │ │ │ └── themeVars.ts │ │ │ ├── accordion/ │ │ │ │ ├── Accordion.tsx │ │ │ │ ├── AccordionHeader.tsx │ │ │ │ ├── AccordionItem.tsx │ │ │ │ ├── AccordionPanel.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Accordion.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Accordion.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Accordion.test.tsx │ │ │ │ ├── index.ts │ │ │ │ └── utils.ts │ │ │ ├── alpha/ │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Select.figma.tsx │ │ │ │ ├── combobox/ │ │ │ │ │ ├── Combobox.tsx │ │ │ │ │ ├── DefaultComboboxControl.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Combobox.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── Combobox.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── data-card/ │ │ │ │ │ ├── DataCard.tsx │ │ │ │ │ ├── DataCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── DataCard.figma.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── DataCard.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── DataCard.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── select/ │ │ │ │ │ ├── DefaultSelectAllOption.tsx │ │ │ │ │ ├── DefaultSelectControl.tsx │ │ │ │ │ ├── DefaultSelectDropdown.tsx │ │ │ │ │ ├── DefaultSelectEmptyDropdownContents.tsx │ │ │ │ │ ├── DefaultSelectOption.tsx │ │ │ │ │ ├── DefaultSelectOptionGroup.tsx │ │ │ │ │ ├── Select.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ ├── MultiSelect.stories.tsx │ │ │ │ │ │ └── Select.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── DefaultSelectControl.test.tsx │ │ │ │ │ │ ├── DefaultSelectDropdown.test.tsx │ │ │ │ │ │ ├── DefaultSelectOption.test.tsx │ │ │ │ │ │ └── Select.test.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── select-chip/ │ │ │ │ │ ├── SelectChip.tsx │ │ │ │ │ ├── SelectChipControl.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── SelectChip.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── SelectChip.test.tsx │ │ │ │ │ └── index.tsx │ │ │ │ └── tabbed-chips/ │ │ │ │ ├── TabbedChips.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── TabbedChips.stories.tsx │ │ │ │ └── __tests__/ │ │ │ │ └── TabbedChips.test.tsx │ │ │ ├── animation/ │ │ │ │ ├── Lottie.tsx │ │ │ │ ├── LottieStatusAnimation.tsx │ │ │ │ ├── NewAnimatePresence.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Lottie.stories.tsx │ │ │ │ │ └── LottieStatusAnimation.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Lottie.perf-test.tsx │ │ │ │ │ ├── Lottie.test.tsx │ │ │ │ │ ├── LottieStatusAnimation.perf-test.tsx │ │ │ │ │ ├── LottieStatusAnimation.test.tsx │ │ │ │ │ ├── convertMotionConfig.test.ts │ │ │ │ │ ├── useLottieHandlers.test.ts │ │ │ │ │ └── useLottieListeners.test.ts │ │ │ │ ├── convertMotionConfig.ts │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ ├── useLottieHandlers.ts │ │ │ │ ├── useLottieListeners.ts │ │ │ │ └── useLottieLoader.ts │ │ │ ├── banner/ │ │ │ │ ├── Banner.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Banner.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Banner.test.tsx │ │ │ │ └── index.ts │ │ │ ├── buttons/ │ │ │ │ ├── AvatarButton.tsx │ │ │ │ ├── Button.tsx │ │ │ │ ├── ButtonGroup.tsx │ │ │ │ ├── IconButton.tsx │ │ │ │ ├── IconCounterButton.tsx │ │ │ │ ├── Tile.tsx │ │ │ │ ├── TileButton.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── AvatarButton.figma.tsx │ │ │ │ │ ├── Button.figma.tsx │ │ │ │ │ ├── ButtonGroup.figma.tsx │ │ │ │ │ ├── IconButton.figma.tsx │ │ │ │ │ └── TileButton.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AvatarButton.stories.tsx │ │ │ │ │ ├── Button.stories.tsx │ │ │ │ │ ├── ButtonGroup.stories.tsx │ │ │ │ │ ├── IconButton.stories.tsx │ │ │ │ │ ├── IconCounterButton.stories.tsx │ │ │ │ │ ├── TileButton.stories.tsx │ │ │ │ │ └── ToggleLoading.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AvatarButton.test.tsx │ │ │ │ │ ├── Button.perf-test.tsx │ │ │ │ │ ├── Button.test.tsx │ │ │ │ │ ├── ButtonEventHandler.test.tsx │ │ │ │ │ ├── ButtonGroup.test.tsx │ │ │ │ │ ├── IconButton.test.tsx │ │ │ │ │ ├── IconCounterButton.test.tsx │ │ │ │ │ ├── Tile.test.tsx │ │ │ │ │ └── TileButton.test.tsx │ │ │ │ └── index.ts │ │ │ ├── cards/ │ │ │ │ ├── AnnouncementCard.tsx │ │ │ │ ├── Card.tsx │ │ │ │ ├── CardBody.tsx │ │ │ │ ├── CardFooter.tsx │ │ │ │ ├── CardGroup.tsx │ │ │ │ ├── CardHeader.tsx │ │ │ │ ├── CardMedia.tsx │ │ │ │ ├── CardRoot.tsx │ │ │ │ ├── ContainedAssetCard.tsx │ │ │ │ ├── ContentCard/ │ │ │ │ │ ├── ContentCard.tsx │ │ │ │ │ ├── ContentCardBody.tsx │ │ │ │ │ ├── ContentCardFooter.tsx │ │ │ │ │ ├── ContentCardHeader.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ ├── ContentCard.figma.tsx │ │ │ │ │ │ ├── ContentCardBody.figma.tsx │ │ │ │ │ │ ├── ContentCardFooter.figma.tsx │ │ │ │ │ │ └── ContentCardHeader.figma.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── ContentCard.stories.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── ContentCard.test.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── DataCard.tsx │ │ │ │ ├── FeatureEntryCard.tsx │ │ │ │ ├── FeedCard.tsx │ │ │ │ ├── FloatingAssetCard.tsx │ │ │ │ ├── LikeButton.tsx │ │ │ │ ├── MediaCard/ │ │ │ │ │ ├── MediaCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── MediaCard.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── MediaCard.test.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── MessagingCard/ │ │ │ │ │ ├── MessagingCardLayout.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── MessagingCard.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── MessagingCard.test.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── NudgeCard.tsx │ │ │ │ ├── UpsellCard.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── AnnouncementCard.figma.tsx │ │ │ │ │ ├── ContainedAssetCard.figma.tsx │ │ │ │ │ ├── FloatingAssetCard.figma.tsx │ │ │ │ │ ├── NudgeCard.figma.tsx │ │ │ │ │ └── UpsellCard.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Card.stories.tsx │ │ │ │ │ ├── ContainedAssetCard.stories.tsx │ │ │ │ │ ├── FloatingAssetCard.stories.tsx │ │ │ │ │ ├── MediaCard.stories.tsx │ │ │ │ │ ├── MessagingCard.stories.tsx │ │ │ │ │ ├── NudgeCard.stories.tsx │ │ │ │ │ └── UpsellCard.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Card.test.tsx │ │ │ │ │ ├── CardMedia.test.tsx │ │ │ │ │ ├── ContainedAssetCard.test.tsx │ │ │ │ │ ├── FloatingAssetCard.test.tsx │ │ │ │ │ ├── NudgeCard.test.tsx │ │ │ │ │ └── UpsellCard.test.tsx │ │ │ │ └── index.ts │ │ │ ├── carousel/ │ │ │ │ ├── Carousel.tsx │ │ │ │ ├── CarouselContext.ts │ │ │ │ ├── CarouselItem.tsx │ │ │ │ ├── DefaultCarouselNavigation.tsx │ │ │ │ ├── DefaultCarouselPagination.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Carousel.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Carousel.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Carousel.test.tsx │ │ │ │ │ └── DefaultCarouselPagination.test.tsx │ │ │ │ └── index.ts │ │ │ ├── cells/ │ │ │ │ ├── Cell.tsx │ │ │ │ ├── CellAccessory.tsx │ │ │ │ ├── CellDetail.tsx │ │ │ │ ├── CellHelperText.tsx │ │ │ │ ├── CellMedia.tsx │ │ │ │ ├── ContentCell.tsx │ │ │ │ ├── ContentCellFallback.tsx │ │ │ │ ├── ListCell.tsx │ │ │ │ ├── ListCellFallback.tsx │ │ │ │ ├── MediaFallback.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── ContentCell.figma.tsx │ │ │ │ │ └── ListCell.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── ContentCell.stories.tsx │ │ │ │ │ ├── ContentCellFallback.stories.tsx │ │ │ │ │ ├── ListCell.stories.tsx │ │ │ │ │ └── ListCellFallback.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Cell.test.tsx │ │ │ │ │ ├── CellAccessory.test.tsx │ │ │ │ │ ├── CellMedia.test.tsx │ │ │ │ │ ├── ContentCell.test.tsx │ │ │ │ │ ├── ContentCellFallback.test.tsx │ │ │ │ │ ├── ListCell.perf-test.tsx │ │ │ │ │ ├── ListCell.test.tsx │ │ │ │ │ ├── ListCellFallback.test.tsx │ │ │ │ │ └── MediaFallback.test.tsx │ │ │ │ └── index.ts │ │ │ ├── chips/ │ │ │ │ ├── Chip.tsx │ │ │ │ ├── ChipProps.ts │ │ │ │ ├── InputChip.tsx │ │ │ │ ├── MediaChip.tsx │ │ │ │ ├── SelectChip.tsx │ │ │ │ ├── TabbedChips.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── InputChip.figma.tsx │ │ │ │ │ ├── SelectChip.figma.tsx │ │ │ │ │ └── TabbedChips.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Chip.stories.tsx │ │ │ │ │ ├── InputChip.stories.tsx │ │ │ │ │ ├── MediaChip.stories.tsx │ │ │ │ │ ├── SelectChip.stories.tsx │ │ │ │ │ └── TabbedChips.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Chip.test.tsx │ │ │ │ │ ├── InputChip.test.tsx │ │ │ │ │ ├── MediaChip.test.tsx │ │ │ │ │ ├── SelectChip.test.tsx │ │ │ │ │ └── TabbedChips.test.tsx │ │ │ │ └── index.ts │ │ │ ├── coachmark/ │ │ │ │ ├── Coachmark.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Coachmark.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Coachmark.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Coachmark.test.tsx │ │ │ │ └── index.ts │ │ │ ├── collapsible/ │ │ │ │ ├── Collapsible.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Collapsible.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Collapsible.test.tsx │ │ │ │ ├── index.ts │ │ │ │ └── useCollapsibleMotionProps.ts │ │ │ ├── controls/ │ │ │ │ ├── Checkbox.tsx │ │ │ │ ├── CheckboxCell.tsx │ │ │ │ ├── CheckboxGroup.tsx │ │ │ │ ├── Control.tsx │ │ │ │ ├── ControlGroup.tsx │ │ │ │ ├── HelperText.tsx │ │ │ │ ├── InputIcon.tsx │ │ │ │ ├── InputIconButton.tsx │ │ │ │ ├── InputLabel.tsx │ │ │ │ ├── InputStack.tsx │ │ │ │ ├── NativeInput.tsx │ │ │ │ ├── NativeTextArea.tsx │ │ │ │ ├── Radio.tsx │ │ │ │ ├── RadioCell.tsx │ │ │ │ ├── RadioGroup.tsx │ │ │ │ ├── SearchInput.tsx │ │ │ │ ├── SegmentedControl.tsx │ │ │ │ ├── Select.tsx │ │ │ │ ├── SelectOption.tsx │ │ │ │ ├── SelectStack.tsx │ │ │ │ ├── SelectTrigger.tsx │ │ │ │ ├── Switch.tsx │ │ │ │ ├── TextInput.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Checkbox.figma.tsx │ │ │ │ │ ├── CheckboxCell.figma.tsx │ │ │ │ │ ├── CheckboxGroup.figma.tsx │ │ │ │ │ ├── NativeTextArea.figma.tsx │ │ │ │ │ ├── RadioCell.figma.tsx │ │ │ │ │ ├── RadioGroup.figma.tsx │ │ │ │ │ ├── SearchInput.figma.tsx │ │ │ │ │ ├── SelectOption.figma.tsx │ │ │ │ │ ├── Switch.figma.tsx │ │ │ │ │ └── TextInput.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AddressForm.tsx │ │ │ │ │ ├── Checkbox.stories.tsx │ │ │ │ │ ├── CheckboxCell.stories.tsx │ │ │ │ │ ├── ControlGroup.stories.tsx │ │ │ │ │ ├── HelperText.stories.tsx │ │ │ │ │ ├── InputIcon.stories.tsx │ │ │ │ │ ├── InputIconButton.stories.tsx │ │ │ │ │ ├── InputLabel.stories.tsx │ │ │ │ │ ├── InputStack.stories.tsx │ │ │ │ │ ├── NativeInput.stories.tsx │ │ │ │ │ ├── RadioCell.stories.tsx │ │ │ │ │ ├── RadioGroup.stories.tsx │ │ │ │ │ ├── SearchInput.stories.tsx │ │ │ │ │ ├── SegmentedControl.stories.tsx │ │ │ │ │ ├── Select.stories.tsx │ │ │ │ │ ├── SelectOption.stories.tsx │ │ │ │ │ ├── Switch.stories.tsx │ │ │ │ │ ├── TextInput.stories.tsx │ │ │ │ │ └── TextInputPerformance.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Checkbox.test.tsx │ │ │ │ │ ├── CheckboxCell.test.tsx │ │ │ │ │ ├── CheckboxGroup.test.tsx │ │ │ │ │ ├── Control.test.tsx │ │ │ │ │ ├── ControlGroup.test.tsx │ │ │ │ │ ├── HelperText.test.tsx │ │ │ │ │ ├── InputIcon.test.tsx │ │ │ │ │ ├── InputIconButton.test.tsx │ │ │ │ │ ├── InputStack.test.tsx │ │ │ │ │ ├── NativeInput.test.tsx │ │ │ │ │ ├── NativeTextArea.test.tsx │ │ │ │ │ ├── RadioCell.test.tsx │ │ │ │ │ ├── RadioGroup.test.tsx │ │ │ │ │ ├── SearchInput.test.tsx │ │ │ │ │ ├── SegmentedControl.test.tsx │ │ │ │ │ ├── Select.test.tsx │ │ │ │ │ ├── Switch.test.tsx │ │ │ │ │ └── TextInput.test.tsx │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ ├── selectContext.ts │ │ │ │ ├── useHandleRadioSelect.ts │ │ │ │ ├── useRefocusTrigger.ts │ │ │ │ └── useSelectionCellControlHeight.tsx │ │ │ ├── core/ │ │ │ │ ├── __tests__/ │ │ │ │ │ └── createThemeCssVars.test.ts │ │ │ │ ├── componentConfig.ts │ │ │ │ ├── createThemeCssVars.ts │ │ │ │ ├── polymorphism.ts │ │ │ │ └── theme.ts │ │ │ ├── cx.ts │ │ │ ├── dates/ │ │ │ │ ├── Calendar.tsx │ │ │ │ ├── DateInput.tsx │ │ │ │ ├── DatePicker.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── DatePicker.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── A11yTest.stories.tsx │ │ │ │ │ ├── Calendar.stories.tsx │ │ │ │ │ ├── DateInput.stories.tsx │ │ │ │ │ ├── DatePicker.stories.tsx │ │ │ │ │ └── Note.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Calendar.test.tsx │ │ │ │ └── index.ts │ │ │ ├── defaultFontStyles.ts │ │ │ ├── dots/ │ │ │ │ ├── DotCount.tsx │ │ │ │ ├── DotStatusColor.tsx │ │ │ │ ├── DotSymbol.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── DotCount.figma.tsx │ │ │ │ │ ├── DotStatusColor.figma.tsx │ │ │ │ │ └── DotSymbol.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── DotCount.stories.tsx │ │ │ │ │ ├── DotStatusColor.stories.tsx │ │ │ │ │ └── DotSymbol.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── DotCount.test.tsx │ │ │ │ │ ├── DotStatusColor.test.tsx │ │ │ │ │ ├── DotSymbol.test.tsx │ │ │ │ │ └── getTransform.test.tsx │ │ │ │ ├── dotStyles.ts │ │ │ │ └── index.ts │ │ │ ├── dropdown/ │ │ │ │ ├── Dropdown.tsx │ │ │ │ ├── DropdownContent.tsx │ │ │ │ ├── DropdownProps.ts │ │ │ │ ├── MenuItem.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Dropdown.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Dropdown.stories.tsx │ │ │ │ │ └── DropdownContent.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Dropdown.perf-test.tsx │ │ │ │ │ ├── Dropdown.test.tsx │ │ │ │ │ └── MenuItem.test.tsx │ │ │ │ ├── index.ts │ │ │ │ └── useResponsiveHeight.ts │ │ │ ├── globalStyles.ts │ │ │ ├── hooks/ │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── useBreakpoints.stories.tsx │ │ │ │ │ └── useMediaQuery.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── useA11yControlledVisibility.test.ts │ │ │ │ │ ├── useA11yLabels.test.ts │ │ │ │ │ ├── useBreakpoints.test.tsx │ │ │ │ │ ├── useCellSpacing.test.ts │ │ │ │ │ ├── useDimensions.test.ts │ │ │ │ │ ├── useHorizontalScrollToTarget.test.ts │ │ │ │ │ ├── useIsBrowser.test.ts │ │ │ │ │ └── useMediaQuery.test.tsx │ │ │ │ ├── useA11yControlledVisibility.ts │ │ │ │ ├── useA11yLabels.ts │ │ │ │ ├── useBreakpoints.ts │ │ │ │ ├── useCellSpacing.ts │ │ │ │ ├── useCheckboxGroupState.ts │ │ │ │ ├── useClickOutside.ts │ │ │ │ ├── useComponentConfig.ts │ │ │ │ ├── useDimensions.ts │ │ │ │ ├── useEventHandler.ts │ │ │ │ ├── useHasMounted.ts │ │ │ │ ├── useHorizontalScrollToTarget.ts │ │ │ │ ├── useIsBrowser.ts │ │ │ │ ├── useIsoEffect.ts │ │ │ │ ├── useMediaQuery.ts │ │ │ │ ├── useScrollBlocker.ts │ │ │ │ └── useTheme.ts │ │ │ ├── icons/ │ │ │ │ ├── Icon.tsx │ │ │ │ ├── LogoMark.tsx │ │ │ │ ├── LogoWordmark.tsx │ │ │ │ ├── SubBrandLogoMark.tsx │ │ │ │ ├── SubBrandLogoWordmark.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Icon.figma.tsx │ │ │ │ │ ├── LogoMark.figma.tsx │ │ │ │ │ ├── LogoWordmark.figma.tsx │ │ │ │ │ ├── SubBrandLogoMark.figma.tsx │ │ │ │ │ └── SubBrandLogoWordmark.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Icon.stories.tsx │ │ │ │ │ ├── IconSheet.tsx │ │ │ │ │ └── Logo.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Icon.perf-test.tsx │ │ │ │ │ ├── Icon.test.tsx │ │ │ │ │ ├── LogoMark.test.tsx │ │ │ │ │ ├── LogoWordMark.test.tsx │ │ │ │ │ ├── SubBrandLogoMark.test.tsx │ │ │ │ │ └── SubBrandLogoWordmark.test.tsx │ │ │ │ └── index.ts │ │ │ ├── illustrations/ │ │ │ │ ├── HeroSquare.tsx │ │ │ │ ├── Pictogram.tsx │ │ │ │ ├── SpotIcon.tsx │ │ │ │ ├── SpotRectangle.tsx │ │ │ │ ├── SpotSquare.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── HeroSquare.figma.tsx │ │ │ │ │ ├── Pictogram.figma.tsx │ │ │ │ │ ├── SpotIcon.figma.tsx │ │ │ │ │ ├── SpotRectangle.figma.tsx │ │ │ │ │ └── SpotSquare.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── HeroSquare.stories.tsx │ │ │ │ │ ├── IllustrationExample.tsx │ │ │ │ │ ├── Pictogram.stories.tsx │ │ │ │ │ ├── SpotIcon.stories.tsx │ │ │ │ │ ├── SpotRectangle.stories.tsx │ │ │ │ │ ├── SpotSquare.stories.tsx │ │ │ │ │ ├── ThemedIllustrations.stories.tsx │ │ │ │ │ ├── getIllustrationSheet.tsx │ │ │ │ │ └── illustrationThemes.ts │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── HeroSquare.test.tsx │ │ │ │ │ ├── Pictogram.test.tsx │ │ │ │ │ ├── SpotRectangle.test.tsx │ │ │ │ │ └── SpotSquare.test.tsx │ │ │ │ ├── createIllustration.tsx │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── layout/ │ │ │ │ ├── Box.tsx │ │ │ │ ├── Divider.tsx │ │ │ │ ├── Fallback.tsx │ │ │ │ ├── Grid.tsx │ │ │ │ ├── GridColumn.tsx │ │ │ │ ├── Group.tsx │ │ │ │ ├── HStack.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ ├── VStack.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Divider.figma.tsx │ │ │ │ │ └── Fallback.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Box.stories.tsx │ │ │ │ │ ├── BoxPerformance.stories.tsx │ │ │ │ │ ├── Divider.stories.tsx │ │ │ │ │ ├── Fallback.stories.tsx │ │ │ │ │ ├── Grid.stories.tsx │ │ │ │ │ ├── Layouts.stories.tsx │ │ │ │ │ ├── LoremIpsum.tsx │ │ │ │ │ └── Responsive.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Box.perf-test.tsx │ │ │ │ │ ├── Box.test.tsx │ │ │ │ │ ├── Divider.perf-test.tsx │ │ │ │ │ ├── Fallback.perf-test.tsx │ │ │ │ │ ├── Fallback.test.tsx │ │ │ │ │ ├── Grid.test.tsx │ │ │ │ │ ├── GridColumn.test.tsx │ │ │ │ │ ├── Group.test.tsx │ │ │ │ │ └── VStack.test.tsx │ │ │ │ └── index.ts │ │ │ ├── loaders/ │ │ │ │ ├── CircularProgress.tsx │ │ │ │ ├── MaterialSpinner.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── CircularProgress.stories.tsx │ │ │ │ │ ├── MaterialSpinner.stories.tsx │ │ │ │ │ └── Spinner.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── CircularProgress.test.tsx │ │ │ │ │ ├── MaterialSpinner.test.tsx │ │ │ │ │ └── Spinner.test.tsx │ │ │ │ └── index.ts │ │ │ ├── media/ │ │ │ │ ├── Avatar.tsx │ │ │ │ ├── Hexagon.tsx │ │ │ │ ├── RemoteImage.tsx │ │ │ │ ├── RemoteImageGroup.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Avatar.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Avatar.stories.tsx │ │ │ │ │ ├── RemoteImage.stories.tsx │ │ │ │ │ └── RemoteImageGroup.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Avatar.test.tsx │ │ │ │ │ ├── Hexagon.test.tsx │ │ │ │ │ ├── RemoteImage.test.tsx │ │ │ │ │ └── RemoteImageGroup.test.tsx │ │ │ │ └── index.ts │ │ │ ├── motion/ │ │ │ │ ├── AnimatedCaret.tsx │ │ │ │ ├── ColorSurge.tsx │ │ │ │ ├── Pulse.tsx │ │ │ │ ├── Shake.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── AnimatedCaret.stories.tsx │ │ │ │ │ ├── HintMotion.stories.tsx │ │ │ │ │ └── Tokens.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AnimatedCaret.test.tsx │ │ │ │ │ ├── ColorSurge.test.tsx │ │ │ │ │ ├── Pulse.test.tsx │ │ │ │ │ ├── Shake.test.tsx │ │ │ │ │ ├── useMotionProps.test.tsx │ │ │ │ │ └── utils.test.ts │ │ │ │ ├── types.ts │ │ │ │ ├── useMotionProps.ts │ │ │ │ └── utils.ts │ │ │ ├── multi-content-module/ │ │ │ │ ├── MultiContentModule.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── MultiContentModule.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── MultiContentModule.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── MultiContentModule.test.tsx │ │ │ │ └── index.ts │ │ │ ├── navigation/ │ │ │ │ ├── NavLink.tsx │ │ │ │ ├── NavigationBar.tsx │ │ │ │ ├── NavigationTitle.tsx │ │ │ │ ├── NavigationTitleSelect.tsx │ │ │ │ ├── Sidebar.tsx │ │ │ │ ├── SidebarContext.tsx │ │ │ │ ├── SidebarItem.tsx │ │ │ │ ├── SidebarMoreMenu.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── NavLink.figma.tsx │ │ │ │ │ ├── NavigationBar.figma.tsx │ │ │ │ │ ├── NavigationTitle.figma.tsx │ │ │ │ │ ├── Sidebar.figma.tsx │ │ │ │ │ └── SidebarItem.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── NavLink.stories.tsx │ │ │ │ │ ├── NavigationBar.stories.tsx │ │ │ │ │ ├── NavigationStorySetup.tsx │ │ │ │ │ ├── NavigationTitle.stories.tsx │ │ │ │ │ ├── NavigationTitleSelect.stories.tsx │ │ │ │ │ └── Sidebar.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── NavigationBar.test.tsx │ │ │ │ │ ├── NavigationTitle.test.tsx │ │ │ │ │ ├── SelectableNavigationTitle.test.tsx │ │ │ │ │ ├── Sidebar.test.tsx │ │ │ │ │ ├── SidebarItem.test.tsx │ │ │ │ │ └── SidebarMoreMenu.test.tsx │ │ │ │ └── index.ts │ │ │ ├── numbers/ │ │ │ │ ├── RollingNumber/ │ │ │ │ │ ├── DefaultRollingNumberAffixSection.tsx │ │ │ │ │ ├── DefaultRollingNumberDigit.tsx │ │ │ │ │ ├── DefaultRollingNumberMask.tsx │ │ │ │ │ ├── DefaultRollingNumberSymbol.tsx │ │ │ │ │ ├── DefaultRollingNumberValueSection.tsx │ │ │ │ │ ├── RollingNumber.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── useColorPulse.ts │ │ │ │ ├── __stories__/ │ │ │ │ │ └── RollingNumber.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── RollingNumber.a11y.test.tsx │ │ │ │ └── index.ts │ │ │ ├── overlays/ │ │ │ │ ├── Alert.tsx │ │ │ │ ├── FocusTrap.tsx │ │ │ │ ├── FullscreenAlert.tsx │ │ │ │ ├── Portal.tsx │ │ │ │ ├── PortalProvider.tsx │ │ │ │ ├── Toast.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── Alert.figma.tsx │ │ │ │ │ └── Toast.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Alert.stories.tsx │ │ │ │ │ ├── FocusTrap.stories.tsx │ │ │ │ │ ├── FullscreenAlert.stories.tsx │ │ │ │ │ ├── FullscreenModal.stories.tsx │ │ │ │ │ ├── FullscreenModalLayout.stories.tsx │ │ │ │ │ ├── Modal.stories.tsx │ │ │ │ │ ├── ModalInteractive.stories.tsx │ │ │ │ │ ├── OverlayContentContext.stories.tsx │ │ │ │ │ ├── PopoverPanel.stories.tsx │ │ │ │ │ ├── PortalProvider.stories.tsx │ │ │ │ │ ├── SearchInputMenu.stories.tsx │ │ │ │ │ ├── Toast.stories.tsx │ │ │ │ │ ├── Tooltip.stories.tsx │ │ │ │ │ └── TooltipContent.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Alert.test.tsx │ │ │ │ │ ├── FocusTrap.test.tsx │ │ │ │ │ ├── FullscreenAlert.test.tsx │ │ │ │ │ ├── OverlayContentContext.test.tsx │ │ │ │ │ ├── Popover.test.tsx │ │ │ │ │ ├── PortalProvider.test.tsx │ │ │ │ │ └── Toast.test.tsx │ │ │ │ ├── handlebar/ │ │ │ │ │ ├── HandleBar.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modal/ │ │ │ │ │ ├── FullscreenModal.tsx │ │ │ │ │ ├── FullscreenModalHeader.tsx │ │ │ │ │ ├── FullscreenModalLayout.tsx │ │ │ │ │ ├── Modal.tsx │ │ │ │ │ ├── ModalBody.tsx │ │ │ │ │ ├── ModalFooter.tsx │ │ │ │ │ ├── ModalHeader.tsx │ │ │ │ │ ├── ModalWrapper.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ ├── FullscreenModal.figma.tsx │ │ │ │ │ │ └── Modal.figma.tsx │ │ │ │ │ └── __tests__/ │ │ │ │ │ ├── FullscreenModal.test.tsx │ │ │ │ │ ├── FullscreenModalLayout.test.tsx │ │ │ │ │ ├── Modal.perf-test.tsx │ │ │ │ │ └── Modal.test.tsx │ │ │ │ ├── overlay/ │ │ │ │ │ ├── Overlay.tsx │ │ │ │ │ ├── OverlayContent.tsx │ │ │ │ │ └── __tests__/ │ │ │ │ │ └── Overlay.test.tsx │ │ │ │ ├── popover/ │ │ │ │ │ ├── Popover.tsx │ │ │ │ │ ├── PopoverPanel.tsx │ │ │ │ │ ├── PopoverPanelContent.tsx │ │ │ │ │ ├── PopoverProps.ts │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── PopoverPanel.test.tsx │ │ │ │ │ └── usePopper.ts │ │ │ │ ├── tooltip/ │ │ │ │ │ ├── Tooltip.tsx │ │ │ │ │ ├── TooltipContent.tsx │ │ │ │ │ ├── TooltipProps.ts │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── Tooltip.figma.tsx │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ └── Tooltip.test.tsx │ │ │ │ │ └── useTooltipState.ts │ │ │ │ ├── tray/ │ │ │ │ │ ├── Tray.tsx │ │ │ │ │ ├── __figma__/ │ │ │ │ │ │ └── Tray.figma.tsx │ │ │ │ │ ├── __stories__/ │ │ │ │ │ │ └── Tray.stories.tsx │ │ │ │ │ └── __tests__/ │ │ │ │ │ └── Tray.test.tsx │ │ │ │ ├── useModal.ts │ │ │ │ ├── usePortal.ts │ │ │ │ └── useToast.tsx │ │ │ ├── page/ │ │ │ │ ├── PageFooter.tsx │ │ │ │ ├── PageHeader.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── PageFooter.figma.tsx │ │ │ │ │ └── PageHeader.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── PageFooter.stories.tsx │ │ │ │ │ └── PageHeader.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── PageFooter.test.tsx │ │ │ │ │ └── PageHeader.test.tsx │ │ │ │ └── index.ts │ │ │ ├── pagination/ │ │ │ │ ├── DefaultPaginationEllipsis.tsx │ │ │ │ ├── DefaultPaginationNavigationButton.tsx │ │ │ │ ├── DefaultPaginationNavigationTextButton.tsx │ │ │ │ ├── DefaultPaginationPageButton.tsx │ │ │ │ ├── Pagination.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Pagination.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Pagination.stories.tsx │ │ │ │ │ └── UsePagination.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Pagination.test.tsx │ │ │ │ │ └── usePagination.test.tsx │ │ │ │ ├── index.ts │ │ │ │ └── usePagination.ts │ │ │ ├── perf/ │ │ │ │ └── component-config/ │ │ │ │ ├── Button.component-config.perf-test.tsx │ │ │ │ ├── ComponentConfigProvider.perf-test.tsx │ │ │ │ ├── ComponentConfigStickerSheet.perf-test.tsx │ │ │ │ └── README.md │ │ │ ├── section-header/ │ │ │ │ ├── SectionHeader.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── SectionHeader.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── SectionHeader.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── SectionHeader.test.tsx │ │ │ │ └── index.ts │ │ │ ├── stepper/ │ │ │ │ ├── DefaultStepperHeaderHorizontal.tsx │ │ │ │ ├── DefaultStepperIconVertical.tsx │ │ │ │ ├── DefaultStepperLabelHorizontal.tsx │ │ │ │ ├── DefaultStepperLabelVertical.tsx │ │ │ │ ├── DefaultStepperProgressHorizontal.tsx │ │ │ │ ├── DefaultStepperProgressVertical.tsx │ │ │ │ ├── DefaultStepperStepHorizontal.tsx │ │ │ │ ├── DefaultStepperStepVertical.tsx │ │ │ │ ├── DefaultStepperSubstepContainerHorizontal.tsx │ │ │ │ ├── DefaultStepperSubstepContainerVertical.tsx │ │ │ │ ├── Stepper.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── StepperHorizontal.stories.tsx │ │ │ │ │ └── StepperVertical.stories.tsx │ │ │ │ └── index.ts │ │ │ ├── styles/ │ │ │ │ ├── booleanStyles.ts │ │ │ │ ├── config.ts │ │ │ │ ├── defaultFont.ts │ │ │ │ ├── global.ts │ │ │ │ ├── media.ts │ │ │ │ ├── responsive/ │ │ │ │ │ ├── base.ts │ │ │ │ │ ├── desktop.ts │ │ │ │ │ ├── phone.ts │ │ │ │ │ └── tablet.ts │ │ │ │ └── styleProps.ts │ │ │ ├── system/ │ │ │ │ ├── BrowserOnly.tsx │ │ │ │ ├── ButtonOrLink.tsx │ │ │ │ ├── ComponentConfigProvider.tsx │ │ │ │ ├── EventHandlerProvider.tsx │ │ │ │ ├── FramerMotionProvider.tsx │ │ │ │ ├── Interactable.tsx │ │ │ │ ├── MediaQueryProvider.tsx │ │ │ │ ├── Pressable.tsx │ │ │ │ ├── PressableOpacity.tsx │ │ │ │ ├── ThemeProvider.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── ComponentConfigProvider.stories.tsx │ │ │ │ │ ├── Interactable.stories.tsx │ │ │ │ │ ├── Patterns.stories.tsx │ │ │ │ │ ├── Pressable.stories.tsx │ │ │ │ │ └── ThemeProvider.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── BrowserOnly.test.tsx │ │ │ │ │ ├── ComponentConfigProvider.test.tsx │ │ │ │ │ ├── MediaQueryProvider.test.tsx │ │ │ │ │ └── ThemeProvider.test.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── interactableCSSProperties.ts │ │ │ │ └── reakit-utils.ts │ │ │ ├── tables/ │ │ │ │ ├── Table.tsx │ │ │ │ ├── TableBody.tsx │ │ │ │ ├── TableCaption.tsx │ │ │ │ ├── TableCell.tsx │ │ │ │ ├── TableCellFallback.tsx │ │ │ │ ├── TableCellSortIcon.tsx │ │ │ │ ├── TableFooter.tsx │ │ │ │ ├── TableHeader.tsx │ │ │ │ ├── TableRow.tsx │ │ │ │ ├── TableSection.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── TableCell.figma.tsx │ │ │ │ ├── __mocks__/ │ │ │ │ │ ├── assetHub.mock.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── retailWebYourAssets.mock.ts │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Table.stories.tsx │ │ │ │ │ ├── TableCaption.stories.tsx │ │ │ │ │ ├── TableCell.stories.tsx │ │ │ │ │ ├── TableCellFallback.stories.tsx │ │ │ │ │ ├── TableRow.stories.tsx │ │ │ │ │ └── TableSection.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Table.test.tsx │ │ │ │ │ ├── TableCaption.test.tsx │ │ │ │ │ ├── TableCell.test.tsx │ │ │ │ │ ├── TableCellFallback.test.tsx │ │ │ │ │ ├── TableCellSortIcon.test.tsx │ │ │ │ │ ├── TableFooter.test.tsx │ │ │ │ │ ├── TableHeader.test.tsx │ │ │ │ │ ├── TableRow.test.tsx │ │ │ │ │ └── TableSection.test.tsx │ │ │ │ ├── context/ │ │ │ │ │ ├── TableContext.tsx │ │ │ │ │ └── TableSectionContext.tsx │ │ │ │ ├── hooks/ │ │ │ │ │ ├── __tests__/ │ │ │ │ │ │ ├── useSortableCell.test.tsx │ │ │ │ │ │ ├── useTable.test.tsx │ │ │ │ │ │ ├── useTableRowListener.test.ts │ │ │ │ │ │ └── useTableVariant.test.tsx │ │ │ │ │ ├── useSortableCell.tsx │ │ │ │ │ ├── useTable.tsx │ │ │ │ │ ├── useTableRowListener.tsx │ │ │ │ │ └── useTableVariant.tsx │ │ │ │ └── index.ts │ │ │ ├── tabs/ │ │ │ │ ├── DefaultTab.tsx │ │ │ │ ├── DefaultTabsActiveIndicator.tsx │ │ │ │ ├── Paddle.tsx │ │ │ │ ├── SegmentedTab.tsx │ │ │ │ ├── SegmentedTabs.tsx │ │ │ │ ├── SegmentedTabsActiveIndicator.tsx │ │ │ │ ├── TabIndicator.tsx │ │ │ │ ├── TabLabel.tsx │ │ │ │ ├── TabNavigation.tsx │ │ │ │ ├── Tabs.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ ├── SegmentedTabs.figma.tsx │ │ │ │ │ └── TabNavigation.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── MockTabPanel.tsx │ │ │ │ │ ├── SegmentedTabs.stories.tsx │ │ │ │ │ ├── TabIndicator.stories.tsx │ │ │ │ │ ├── TabLabel.stories.tsx │ │ │ │ │ ├── TabNavigation.stories.tsx │ │ │ │ │ └── Tabs.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── SegmentedTab.test.tsx │ │ │ │ │ ├── SegmentedTabs.test.tsx │ │ │ │ │ ├── TabIndicator.test.tsx │ │ │ │ │ └── TabNavigation.test.tsx │ │ │ │ ├── hooks/ │ │ │ │ │ └── useAnimateTabIndicator.ts │ │ │ │ └── index.ts │ │ │ ├── tag/ │ │ │ │ ├── Tag.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Tag.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Tag.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Tag.test.tsx │ │ │ │ └── index.ts │ │ │ ├── themes/ │ │ │ │ ├── coinbaseDenseTheme.ts │ │ │ │ ├── coinbaseHighContrastTheme.ts │ │ │ │ ├── coinbaseTheme.ts │ │ │ │ ├── defaultHighContrastTheme.ts │ │ │ │ └── defaultTheme.ts │ │ │ ├── tour/ │ │ │ │ ├── DefaultTourMask.tsx │ │ │ │ ├── DefaultTourStepArrow.tsx │ │ │ │ ├── Tour.tsx │ │ │ │ ├── TourStep.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Tour.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Tour.test.tsx │ │ │ │ └── index.ts │ │ │ ├── types.ts │ │ │ ├── typography/ │ │ │ │ ├── Link.tsx │ │ │ │ ├── Text.tsx │ │ │ │ ├── TextBody.tsx │ │ │ │ ├── TextCaption.tsx │ │ │ │ ├── TextDisplay1.tsx │ │ │ │ ├── TextDisplay2.tsx │ │ │ │ ├── TextDisplay3.tsx │ │ │ │ ├── TextHeadline.tsx │ │ │ │ ├── TextInherited.tsx │ │ │ │ ├── TextLabel1.tsx │ │ │ │ ├── TextLabel2.tsx │ │ │ │ ├── TextLegal.tsx │ │ │ │ ├── TextTitle1.tsx │ │ │ │ ├── TextTitle2.tsx │ │ │ │ ├── TextTitle3.tsx │ │ │ │ ├── TextTitle4.tsx │ │ │ │ ├── __figma__/ │ │ │ │ │ └── Link.figma.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── Link.stories.tsx │ │ │ │ │ └── Text.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Link.perf-test.tsx │ │ │ │ │ ├── Link.test.tsx │ │ │ │ │ └── Text.test.tsx │ │ │ │ └── index.ts │ │ │ ├── utils/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── browser.test.ts │ │ │ │ │ ├── eventHandler.test.ts │ │ │ │ │ ├── eventHandlers.test.ts │ │ │ │ │ ├── flattenAndJoinNodes.test.tsx │ │ │ │ │ ├── isRtl.test.ts │ │ │ │ │ ├── mediaQueryListener.test.ts │ │ │ │ │ └── mergeComponentProps.test.ts │ │ │ │ ├── browser.ts │ │ │ │ ├── eventHandlers.ts │ │ │ │ ├── findClosestNonDisabledNodeIndex.ts │ │ │ │ ├── flattenAndJoinNodes.tsx │ │ │ │ ├── isRtl.ts │ │ │ │ ├── mediaQueryListener.ts │ │ │ │ ├── mergeComponentProps.ts │ │ │ │ ├── storybook.ts │ │ │ │ └── test.tsx │ │ │ └── visualizations/ │ │ │ ├── Counter.tsx │ │ │ ├── DefaultProgressCircleContent.tsx │ │ │ ├── ProgressBar.tsx │ │ │ ├── ProgressBarWithFixedLabels.tsx │ │ │ ├── ProgressBarWithFloatLabel.tsx │ │ │ ├── ProgressCircle.tsx │ │ │ ├── ProgressContainerWithButtons.tsx │ │ │ ├── ProgressTextLabel.tsx │ │ │ ├── VisualizationContainer.tsx │ │ │ ├── __figma__/ │ │ │ │ ├── ProgressBar.figma.tsx │ │ │ │ └── ProgressCircle.figma.tsx │ │ │ ├── __stories__/ │ │ │ │ ├── ProgressBar.stories.tsx │ │ │ │ └── ProgressCircle.stories.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── ProgressBar.test.tsx │ │ │ │ └── ProgressCircle.test.tsx │ │ │ ├── getProgressBarLabelParts.ts │ │ │ └── index.ts │ │ ├── tsconfig.build.json │ │ └── tsconfig.json │ └── web-visualization/ │ ├── .npmignore │ ├── .stylelintrc.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.cjs │ ├── deploy.yml │ ├── docker-compose.yml │ ├── jest/ │ │ └── setup.js │ ├── jest.config.js │ ├── package.json │ ├── project.json │ ├── publish.Dockerfile │ ├── src/ │ │ ├── chart/ │ │ │ ├── CartesianChart.tsx │ │ │ ├── ChartProvider.tsx │ │ │ ├── Path.tsx │ │ │ ├── PeriodSelector.tsx │ │ │ ├── __stories__/ │ │ │ │ ├── CartesianChart.stories.tsx │ │ │ │ ├── ChartTransitions.stories.tsx │ │ │ │ ├── PeriodSelector.stories.tsx │ │ │ │ └── TextStories.stories.tsx │ │ │ ├── __tests__/ │ │ │ │ └── CartesianChart.test.tsx │ │ │ ├── area/ │ │ │ │ ├── Area.tsx │ │ │ │ ├── AreaChart.tsx │ │ │ │ ├── DottedArea.tsx │ │ │ │ ├── GradientArea.tsx │ │ │ │ ├── SolidArea.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── AreaChart.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── AreaChart.test.tsx │ │ │ │ │ └── AreaChartBaseline.test.tsx │ │ │ │ └── index.ts │ │ │ ├── axis/ │ │ │ │ ├── Axis.tsx │ │ │ │ ├── DefaultAxisTickLabel.tsx │ │ │ │ ├── XAxis.tsx │ │ │ │ ├── YAxis.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Axis.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Axis.test.tsx │ │ │ │ └── index.ts │ │ │ ├── bar/ │ │ │ │ ├── Bar.tsx │ │ │ │ ├── BarChart.tsx │ │ │ │ ├── BarPlot.tsx │ │ │ │ ├── BarStack.tsx │ │ │ │ ├── BarStackGroup.tsx │ │ │ │ ├── DefaultBar.tsx │ │ │ │ ├── DefaultBarStack.tsx │ │ │ │ ├── PercentageBarChart.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── BarChart.stories.tsx │ │ │ │ │ └── PercentageBarChart.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── BarChart.test.tsx │ │ │ │ │ ├── BarChartBaseline.test.tsx │ │ │ │ │ └── PercentageBarChart.test.tsx │ │ │ │ └── index.ts │ │ │ ├── gradient/ │ │ │ │ ├── Gradient.tsx │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── legend/ │ │ │ │ ├── DefaultLegendEntry.tsx │ │ │ │ ├── DefaultLegendShape.tsx │ │ │ │ ├── Legend.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Legend.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Legend.test.tsx │ │ │ │ └── index.ts │ │ │ ├── line/ │ │ │ │ ├── DefaultReferenceLineLabel.tsx │ │ │ │ ├── DottedLine.tsx │ │ │ │ ├── Line.tsx │ │ │ │ ├── LineChart.tsx │ │ │ │ ├── ReferenceLine.tsx │ │ │ │ ├── SolidLine.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ ├── LineChart.stories.tsx │ │ │ │ │ └── ReferenceLine.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── LineChart.test.tsx │ │ │ │ │ └── ReferenceLine.test.tsx │ │ │ │ └── index.ts │ │ │ ├── point/ │ │ │ │ ├── DefaultPointLabel.tsx │ │ │ │ ├── Point.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Point.test.tsx │ │ │ │ └── index.ts │ │ │ ├── scrubber/ │ │ │ │ ├── DefaultScrubberBeacon.tsx │ │ │ │ ├── DefaultScrubberBeaconLabel.tsx │ │ │ │ ├── DefaultScrubberLabel.tsx │ │ │ │ ├── Scrubber.tsx │ │ │ │ ├── ScrubberBeaconGroup.tsx │ │ │ │ ├── ScrubberBeaconLabelGroup.tsx │ │ │ │ ├── ScrubberProvider.tsx │ │ │ │ ├── __stories__/ │ │ │ │ │ └── Scrubber.stories.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ └── Scrubber.test.tsx │ │ │ │ └── index.ts │ │ │ ├── text/ │ │ │ │ ├── ChartText.tsx │ │ │ │ ├── ChartTextGroup.tsx │ │ │ │ └── index.ts │ │ │ └── utils/ │ │ │ ├── __tests__/ │ │ │ │ ├── axis.test.ts │ │ │ │ ├── bar.test.ts │ │ │ │ ├── chart.test.ts │ │ │ │ ├── gradient.test.ts │ │ │ │ ├── path.test.ts │ │ │ │ ├── point.test.ts │ │ │ │ ├── scale.test.ts │ │ │ │ ├── scrubber.test.ts │ │ │ │ └── transition.test.ts │ │ │ ├── axis.ts │ │ │ ├── bar.ts │ │ │ ├── chart.ts │ │ │ ├── context.ts │ │ │ ├── gradient.ts │ │ │ ├── index.ts │ │ │ ├── interpolate.ts │ │ │ ├── path.ts │ │ │ ├── point.ts │ │ │ ├── scale.ts │ │ │ ├── scrubber.ts │ │ │ └── transition.ts │ │ ├── index.ts │ │ └── sparkline/ │ │ ├── Counter.tsx │ │ ├── Sparkline.tsx │ │ ├── SparklineArea.tsx │ │ ├── SparklineAreaPattern.tsx │ │ ├── SparklineGradient.tsx │ │ ├── SparklinePath.tsx │ │ ├── __figma__/ │ │ │ └── Sparkline.figma.tsx │ │ ├── generateSparklineWithId.ts │ │ ├── index.ts │ │ ├── sparkline-interactive/ │ │ │ ├── InnerSparklineInteractiveProvider.tsx │ │ │ ├── SparklineInteractive.tsx │ │ │ ├── SparklineInteractiveAnimatedPath.tsx │ │ │ ├── SparklineInteractiveHoverDate.tsx │ │ │ ├── SparklineInteractiveHoverPrice.tsx │ │ │ ├── SparklineInteractiveLineVertical.tsx │ │ │ ├── SparklineInteractiveMarkerDates.tsx │ │ │ ├── SparklineInteractivePaths.tsx │ │ │ ├── SparklineInteractivePeriodSelector.tsx │ │ │ ├── SparklineInteractiveProvider.tsx │ │ │ ├── SparklineInteractiveScrubHandler.tsx │ │ │ ├── SparklineInteractiveScrubProvider.tsx │ │ │ ├── SparklineInteractiveTimeseriesPaths.tsx │ │ │ ├── __figma__/ │ │ │ │ └── SparklineInteractive.figma.tsx │ │ │ ├── __stories__/ │ │ │ │ └── SparklineInteractive.stories.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── SparklineInteractive.test.tsx │ │ │ │ └── SparklineInteractivePeriodSelector.test.tsx │ │ │ ├── fade.ts │ │ │ └── useSparklineInteractiveConstants.ts │ │ └── sparkline-interactive-header/ │ │ ├── SparklineInteractiveHeader.tsx │ │ ├── __figma__/ │ │ │ └── SparklineInteractiveHeader.figma.tsx │ │ ├── __stories__/ │ │ │ └── SparklineInteractiveHeader.stories.tsx │ │ └── __tests__/ │ │ └── SparklineInteractiveHeader.test.tsx │ ├── tsconfig.build.json │ └── tsconfig.json ├── postcss.config.js ├── prettier.config.js ├── scripts/ │ ├── auditFigmaIntegration/ │ │ ├── cli.mjs │ │ ├── codeConnect.mjs │ │ ├── components.mjs │ │ ├── config.mjs │ │ ├── constants.mjs │ │ ├── devResources.mjs │ │ ├── figma.mjs │ │ ├── index.mjs │ │ └── io.mjs │ ├── ci/ │ │ └── shouldRunVisreg.mjs │ └── findDeprecations.mjs ├── skills/ │ ├── cds-code/ │ │ ├── README.md │ │ ├── SKILL.md │ │ ├── evals/ │ │ │ └── evals.json │ │ ├── guidelines/ │ │ │ ├── components.md │ │ │ ├── customizing-styles.md │ │ │ ├── icons.md │ │ │ └── illustrations.md │ │ └── scripts/ │ │ ├── discover-cds-icons.mjs │ │ ├── discover-cds-illustrations.mjs │ │ └── discover-cds-packages.sh │ ├── cds-design-to-code/ │ │ ├── README.md │ │ └── SKILL.md │ └── cds-docs/ │ ├── README.md │ ├── SKILL.md │ └── evals/ │ └── evals.json ├── skills-lock.json ├── templates/ │ ├── expo-app/ │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── .yarnrc.yml │ │ ├── App.tsx │ │ ├── README.md │ │ ├── app.json │ │ ├── babel.config.js │ │ ├── components/ │ │ │ ├── AssetCarousel.tsx │ │ │ ├── AssetChart.tsx │ │ │ ├── AssetList.tsx │ │ │ ├── CardList.tsx │ │ │ ├── Navbar.tsx │ │ │ └── TabBarButton.tsx │ │ ├── metro.config.js │ │ ├── package.json │ │ └── tsconfig.json │ ├── next-app/ │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── App.tsx │ │ ├── README.md │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ └── app/ │ │ │ ├── components/ │ │ │ │ ├── AssetList/ │ │ │ │ │ ├── data.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── CDSLogo/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── CardList/ │ │ │ │ │ ├── DataCardWithCircle.tsx │ │ │ │ │ ├── ETHStakingCard.tsx │ │ │ │ │ ├── RecurringBuyCard.tsx │ │ │ │ │ └── index.tsx │ │ │ │ └── Navbar/ │ │ │ │ ├── MoreMenu.tsx │ │ │ │ ├── UserMenu.tsx │ │ │ │ └── index.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ └── tsconfig.json │ ├── vite-app/ │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.tsx │ │ │ ├── components/ │ │ │ │ ├── AssetList/ │ │ │ │ │ ├── data.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── CDSLogo/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── CardList/ │ │ │ │ │ ├── DataCardWithCircle.tsx │ │ │ │ │ ├── ETHStakingCard.tsx │ │ │ │ │ ├── RecurringBuyCard.tsx │ │ │ │ │ └── index.tsx │ │ │ │ └── Navbar/ │ │ │ │ ├── MoreMenu.tsx │ │ │ │ ├── UserMenu.tsx │ │ │ │ └── index.tsx │ │ │ ├── main.tsx │ │ │ └── vite-env.d.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ └── webpack-app/ │ ├── .gitignore │ ├── .nvmrc │ ├── README.md │ ├── babel.config.json │ ├── package.json │ ├── src/ │ │ ├── App.tsx │ │ ├── components/ │ │ │ ├── AssetList/ │ │ │ │ ├── data.ts │ │ │ │ └── index.tsx │ │ │ ├── CDSLogo/ │ │ │ │ └── index.tsx │ │ │ ├── CardList/ │ │ │ │ ├── DataCardWithCircle.tsx │ │ │ │ ├── ETHStakingCard.tsx │ │ │ │ ├── RecurringBuyCard.tsx │ │ │ │ └── index.tsx │ │ │ └── Navbar/ │ │ │ ├── MoreMenu.tsx │ │ │ ├── UserMenu.tsx │ │ │ └── index.tsx │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── tools/ │ ├── __tests__/ │ │ ├── bumpVersion.spec.mjs │ │ ├── getAffectedPackages.spec.mjs │ │ ├── getProjectsNeedingVersion.spec.mjs │ │ └── isReleaseBranch.spec.mjs │ ├── bumpVersion.mjs │ ├── ci/ │ │ ├── docker-debug.sh │ │ ├── findFiles.mjs │ │ ├── getAffectedPackages.mjs │ │ ├── getBase.mjs │ │ ├── getChangedFiles.mjs │ │ ├── getCurrentCIBranch.mjs │ │ ├── getFileHash.mjs │ │ ├── getProjectsNeedingVersion.mjs │ │ ├── getPublishableProjects.mjs │ │ ├── isCI.mjs │ │ ├── isReleaseBranch.mjs │ │ ├── list-directories.sh │ │ ├── logging.mjs │ │ └── validators/ │ │ ├── validateLockfile.mjs │ │ ├── validatePatches.mjs │ │ └── validateVersioned.mjs │ ├── depcheck.mjs │ ├── generateTarballs.mjs │ ├── generateUpdates.mjs │ ├── jest.config.mjs │ ├── package.json │ ├── project.json │ └── validateCDSVersions.mjs ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.project.json └── yarn.config.cjs ================================================ FILE CONTENTS ================================================ ================================================ FILE: .agents/skills/skill-creator/LICENSE.txt ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright 2026 Anthropic, PBC. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: .agents/skills/skill-creator/SKILL.md ================================================ --- name: skill-creator description: Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy. --- # Skill Creator A skill for creating new skills and iteratively improving them. At a high level, the process of creating a skill goes like this: - Decide what you want the skill to do and roughly how it should do it - Write a draft of the skill - Create a few test prompts and run claude-with-access-to-the-skill on them - Help the user evaluate the results both qualitatively and quantitatively - While the runs happen in the background, draft some quantitative evals if there aren't any (if there are some, you can either use as is or modify if you feel something needs to change about them). Then explain them to the user (or if they already existed, explain the ones that already exist) - Use the `eval-viewer/generate_review.py` script to show the user the results for them to look at, and also let them look at the quantitative metrics - Rewrite the skill based on feedback from the user's evaluation of the results (and also if there are any glaring flaws that become apparent from the quantitative benchmarks) - Repeat until you're satisfied - Expand the test set and try again at larger scale Your job when using this skill is to figure out where the user is in this process and then jump in and help them progress through these stages. So for instance, maybe they're like "I want to make a skill for X". You can help narrow down what they mean, write a draft, write the test cases, figure out how they want to evaluate, run all the prompts, and repeat. On the other hand, maybe they already have a draft of the skill. In this case you can go straight to the eval/iterate part of the loop. Of course, you should always be flexible and if the user is like "I don't need to run a bunch of evaluations, just vibe with me", you can do that instead. Then after the skill is done (but again, the order is flexible), you can also run the skill description improver, which we have a whole separate script for, to optimize the triggering of the skill. Cool? Cool. ## Communicating with the user The skill creator is liable to be used by people across a wide range of familiarity with coding jargon. If you haven't heard (and how could you, it's only very recently that it started), there's a trend now where the power of Claude is inspiring plumbers to open up their terminals, parents and grandparents to google "how to install npm". On the other hand, the bulk of users are probably fairly computer-literate. So please pay attention to context cues to understand how to phrase your communication! In the default case, just to give you some idea: - "evaluation" and "benchmark" are borderline, but OK - for "JSON" and "assertion" you want to see serious cues from the user that they know what those things are before using them without explaining them It's OK to briefly explain terms if you're in doubt, and feel free to clarify terms with a short definition if you're unsure if the user will get it. --- ## Creating a skill ### Capture Intent Start by understanding the user's intent. The current conversation might already contain a workflow the user wants to capture (e.g., they say "turn this into a skill"). If so, extract answers from the conversation history first — the tools used, the sequence of steps, corrections the user made, input/output formats observed. The user may need to fill the gaps, and should confirm before proceeding to the next step. 1. What should this skill enable Claude to do? 2. When should this skill trigger? (what user phrases/contexts) 3. What's the expected output format? 4. Should we set up test cases to verify the skill works? Skills with objectively verifiable outputs (file transforms, data extraction, code generation, fixed workflow steps) benefit from test cases. Skills with subjective outputs (writing style, art) often don't need them. Suggest the appropriate default based on the skill type, but let the user decide. ### Interview and Research Proactively ask questions about edge cases, input/output formats, example files, success criteria, and dependencies. Wait to write test prompts until you've got this part ironed out. Check available MCPs - if useful for research (searching docs, finding similar skills, looking up best practices), research in parallel via subagents if available, otherwise inline. Come prepared with context to reduce burden on the user. ### Write the SKILL.md Based on the user interview, fill in these components: - **name**: Skill identifier - **description**: When to trigger, what it does. This is the primary triggering mechanism - include both what the skill does AND specific contexts for when to use it. All "when to use" info goes here, not in the body. Note: currently Claude has a tendency to "undertrigger" skills -- to not use them when they'd be useful. To combat this, please make the skill descriptions a little bit "pushy". So for instance, instead of "How to build a simple fast dashboard to display internal Anthropic data.", you might write "How to build a simple fast dashboard to display internal Anthropic data. Make sure to use this skill whenever the user mentions dashboards, data visualization, internal metrics, or wants to display any kind of company data, even if they don't explicitly ask for a 'dashboard.'" - **compatibility**: Required tools, dependencies (optional, rarely needed) - **the rest of the skill :)** ### Skill Writing Guide #### Anatomy of a Skill ``` skill-name/ ├── SKILL.md (required) │ ├── YAML frontmatter (name, description required) │ └── Markdown instructions └── Bundled Resources (optional) ├── scripts/ - Executable code for deterministic/repetitive tasks ├── references/ - Docs loaded into context as needed └── assets/ - Files used in output (templates, icons, fonts) ``` #### Progressive Disclosure Skills use a three-level loading system: 1. **Metadata** (name + description) - Always in context (~100 words) 2. **SKILL.md body** - In context whenever skill triggers (<500 lines ideal) 3. **Bundled resources** - As needed (unlimited, scripts can execute without loading) These word counts are approximate and you can feel free to go longer if needed. **Key patterns:** - Keep SKILL.md under 500 lines; if you're approaching this limit, add an additional layer of hierarchy along with clear pointers about where the model using the skill should go next to follow up. - Reference files clearly from SKILL.md with guidance on when to read them - For large reference files (>300 lines), include a table of contents **Domain organization**: When a skill supports multiple domains/frameworks, organize by variant: ``` cloud-deploy/ ├── SKILL.md (workflow + selection) └── references/ ├── aws.md ├── gcp.md └── azure.md ``` Claude reads only the relevant reference file. #### Principle of Lack of Surprise This goes without saying, but skills must not contain malware, exploit code, or any content that could compromise system security. A skill's contents should not surprise the user in their intent if described. Don't go along with requests to create misleading skills or skills designed to facilitate unauthorized access, data exfiltration, or other malicious activities. Things like a "roleplay as an XYZ" are OK though. #### Writing Patterns Prefer using the imperative form in instructions. **Defining output formats** - You can do it like this: ```markdown ## Report structure ALWAYS use this exact template: # [Title] ## Executive summary ## Key findings ## Recommendations ``` **Examples pattern** - It's useful to include examples. You can format them like this (but if "Input" and "Output" are in the examples you might want to deviate a little): ```markdown ## Commit message format **Example 1:** Input: Added user authentication with JWT tokens Output: feat(auth): implement JWT-based authentication ``` ### Writing Style Try to explain to the model why things are important in lieu of heavy-handed musty MUSTs. Use theory of mind and try to make the skill general and not super-narrow to specific examples. Start by writing a draft and then look at it with fresh eyes and improve it. ### Test Cases After writing the skill draft, come up with 2-3 realistic test prompts — the kind of thing a real user would actually say. Share them with the user: [you don't have to use this exact language] "Here are a few test cases I'd like to try. Do these look right, or do you want to add more?" Then run them. Save test cases to `evals/evals.json`. Don't write assertions yet — just the prompts. You'll draft assertions in the next step while the runs are in progress. ```json { "skill_name": "example-skill", "evals": [ { "id": 1, "prompt": "User's task prompt", "expected_output": "Description of expected result", "files": [] } ] } ``` See `references/schemas.md` for the full schema (including the `assertions` field, which you'll add later). ## Running and evaluating test cases This section is one continuous sequence — don't stop partway through. Do NOT use `/skill-test` or any other testing skill. Put results in `-workspace/` as a sibling to the skill directory. Within the workspace, organize results by iteration (`iteration-1/`, `iteration-2/`, etc.) and within that, each test case gets a directory (`eval-0/`, `eval-1/`, etc.). Don't create all of this upfront — just create directories as you go. ### Step 1: Spawn all runs (with-skill AND baseline) in the same turn For each test case, spawn two subagents in the same turn — one with the skill, one without. This is important: don't spawn the with-skill runs first and then come back for baselines later. Launch everything at once so it all finishes around the same time. **With-skill run:** ``` Execute this task: - Skill path: - Task: - Input files: - Save outputs to: /iteration-/eval-/with_skill/outputs/ - Outputs to save: ``` **Baseline run** (same prompt, but the baseline depends on context): - **Creating a new skill**: no skill at all. Same prompt, no skill path, save to `without_skill/outputs/`. - **Improving an existing skill**: the old version. Before editing, snapshot the skill (`cp -r /skill-snapshot/`), then point the baseline subagent at the snapshot. Save to `old_skill/outputs/`. Write an `eval_metadata.json` for each test case (assertions can be empty for now). Give each eval a descriptive name based on what it's testing — not just "eval-0". Use this name for the directory too. If this iteration uses new or modified eval prompts, create these files for each new eval directory — don't assume they carry over from previous iterations. ```json { "eval_id": 0, "eval_name": "descriptive-name-here", "prompt": "The user's task prompt", "assertions": [] } ``` ### Step 2: While runs are in progress, draft assertions Don't just wait for the runs to finish — you can use this time productively. Draft quantitative assertions for each test case and explain them to the user. If assertions already exist in `evals/evals.json`, review them and explain what they check. Good assertions are objectively verifiable and have descriptive names — they should read clearly in the benchmark viewer so someone glancing at the results immediately understands what each one checks. Subjective skills (writing style, design quality) are better evaluated qualitatively — don't force assertions onto things that need human judgment. Update the `eval_metadata.json` files and `evals/evals.json` with the assertions once drafted. Also explain to the user what they'll see in the viewer — both the qualitative outputs and the quantitative benchmark. ### Step 3: As runs complete, capture timing data When each subagent task completes, you receive a notification containing `total_tokens` and `duration_ms`. Save this data immediately to `timing.json` in the run directory: ```json { "total_tokens": 84852, "duration_ms": 23332, "total_duration_seconds": 23.3 } ``` This is the only opportunity to capture this data — it comes through the task notification and isn't persisted elsewhere. Process each notification as it arrives rather than trying to batch them. ### Step 4: Grade, aggregate, and launch the viewer Once all runs are done: 1. **Grade each run** — spawn a grader subagent (or grade inline) that reads `agents/grader.md` and evaluates each assertion against the outputs. Save results to `grading.json` in each run directory. The grading.json expectations array must use the fields `text`, `passed`, and `evidence` (not `name`/`met`/`details` or other variants) — the viewer depends on these exact field names. For assertions that can be checked programmatically, write and run a script rather than eyeballing it — scripts are faster, more reliable, and can be reused across iterations. 2. **Aggregate into benchmark** — run the aggregation script from the skill-creator directory: ```bash python -m scripts.aggregate_benchmark /iteration-N --skill-name ``` This produces `benchmark.json` and `benchmark.md` with pass_rate, time, and tokens for each configuration, with mean ± stddev and the delta. If generating benchmark.json manually, see `references/schemas.md` for the exact schema the viewer expects. Put each with_skill version before its baseline counterpart. 3. **Do an analyst pass** — read the benchmark data and surface patterns the aggregate stats might hide. See `agents/analyzer.md` (the "Analyzing Benchmark Results" section) for what to look for — things like assertions that always pass regardless of skill (non-discriminating), high-variance evals (possibly flaky), and time/token tradeoffs. 4. **Launch the viewer** with both qualitative outputs and quantitative data: ```bash nohup python /eval-viewer/generate_review.py \ /iteration-N \ --skill-name "my-skill" \ --benchmark /iteration-N/benchmark.json \ > /dev/null 2>&1 & VIEWER_PID=$! ``` For iteration 2+, also pass `--previous-workspace /iteration-`. **Cowork / headless environments:** If `webbrowser.open()` is not available or the environment has no display, use `--static ` to write a standalone HTML file instead of starting a server. Feedback will be downloaded as a `feedback.json` file when the user clicks "Submit All Reviews". After download, copy `feedback.json` into the workspace directory for the next iteration to pick up. Note: please use generate_review.py to create the viewer; there's no need to write custom HTML. 5. **Tell the user** something like: "I've opened the results in your browser. There are two tabs — 'Outputs' lets you click through each test case and leave feedback, 'Benchmark' shows the quantitative comparison. When you're done, come back here and let me know." ### What the user sees in the viewer The "Outputs" tab shows one test case at a time: - **Prompt**: the task that was given - **Output**: the files the skill produced, rendered inline where possible - **Previous Output** (iteration 2+): collapsed section showing last iteration's output - **Formal Grades** (if grading was run): collapsed section showing assertion pass/fail - **Feedback**: a textbox that auto-saves as they type - **Previous Feedback** (iteration 2+): their comments from last time, shown below the textbox The "Benchmark" tab shows the stats summary: pass rates, timing, and token usage for each configuration, with per-eval breakdowns and analyst observations. Navigation is via prev/next buttons or arrow keys. When done, they click "Submit All Reviews" which saves all feedback to `feedback.json`. ### Step 5: Read the feedback When the user tells you they're done, read `feedback.json`: ```json { "reviews": [ { "run_id": "eval-0-with_skill", "feedback": "the chart is missing axis labels", "timestamp": "..." }, { "run_id": "eval-1-with_skill", "feedback": "", "timestamp": "..." }, { "run_id": "eval-2-with_skill", "feedback": "perfect, love this", "timestamp": "..." } ], "status": "complete" } ``` Empty feedback means the user thought it was fine. Focus your improvements on the test cases where the user had specific complaints. Kill the viewer server when you're done with it: ```bash kill $VIEWER_PID 2>/dev/null ``` --- ## Improving the skill This is the heart of the loop. You've run the test cases, the user has reviewed the results, and now you need to make the skill better based on their feedback. ### How to think about improvements 1. **Generalize from the feedback.** The big picture thing that's happening here is that we're trying to create skills that can be used a million times (maybe literally, maybe even more who knows) across many different prompts. Here you and the user are iterating on only a few examples over and over again because it helps move faster. The user knows these examples in and out and it's quick for them to assess new outputs. But if the skill you and the user are codeveloping works only for those examples, it's useless. Rather than put in fiddly overfitty changes, or oppressively constrictive MUSTs, if there's some stubborn issue, you might try branching out and using different metaphors, or recommending different patterns of working. It's relatively cheap to try and maybe you'll land on something great. 2. **Keep the prompt lean.** Remove things that aren't pulling their weight. Make sure to read the transcripts, not just the final outputs — if it looks like the skill is making the model waste a bunch of time doing things that are unproductive, you can try getting rid of the parts of the skill that are making it do that and seeing what happens. 3. **Explain the why.** Try hard to explain the **why** behind everything you're asking the model to do. Today's LLMs are _smart_. They have good theory of mind and when given a good harness can go beyond rote instructions and really make things happen. Even if the feedback from the user is terse or frustrated, try to actually understand the task and why the user is writing what they wrote, and what they actually wrote, and then transmit this understanding into the instructions. If you find yourself writing ALWAYS or NEVER in all caps, or using super rigid structures, that's a yellow flag — if possible, reframe and explain the reasoning so that the model understands why the thing you're asking for is important. That's a more humane, powerful, and effective approach. 4. **Look for repeated work across test cases.** Read the transcripts from the test runs and notice if the subagents all independently wrote similar helper scripts or took the same multi-step approach to something. If all 3 test cases resulted in the subagent writing a `create_docx.py` or a `build_chart.py`, that's a strong signal the skill should bundle that script. Write it once, put it in `scripts/`, and tell the skill to use it. This saves every future invocation from reinventing the wheel. This task is pretty important (we are trying to create billions a year in economic value here!) and your thinking time is not the blocker; take your time and really mull things over. I'd suggest writing a draft revision and then looking at it anew and making improvements. Really do your best to get into the head of the user and understand what they want and need. ### The iteration loop After improving the skill: 1. Apply your improvements to the skill 2. Rerun all test cases into a new `iteration-/` directory, including baseline runs. If you're creating a new skill, the baseline is always `without_skill` (no skill) — that stays the same across iterations. If you're improving an existing skill, use your judgment on what makes sense as the baseline: the original version the user came in with, or the previous iteration. 3. Launch the reviewer with `--previous-workspace` pointing at the previous iteration 4. Wait for the user to review and tell you they're done 5. Read the new feedback, improve again, repeat Keep going until: - The user says they're happy - The feedback is all empty (everything looks good) - You're not making meaningful progress --- ## Advanced: Blind comparison For situations where you want a more rigorous comparison between two versions of a skill (e.g., the user asks "is the new version actually better?"), there's a blind comparison system. Read `agents/comparator.md` and `agents/analyzer.md` for the details. The basic idea is: give two outputs to an independent agent without telling it which is which, and let it judge quality. Then analyze why the winner won. This is optional, requires subagents, and most users won't need it. The human review loop is usually sufficient. --- ## Description Optimization The description field in SKILL.md frontmatter is the primary mechanism that determines whether Claude invokes a skill. After creating or improving a skill, offer to optimize the description for better triggering accuracy. ### Step 1: Generate trigger eval queries Create 20 eval queries — a mix of should-trigger and should-not-trigger. Save as JSON: ```json [ { "query": "the user prompt", "should_trigger": true }, { "query": "another prompt", "should_trigger": false } ] ``` The queries must be realistic and something a Claude Code or Claude.ai user would actually type. Not abstract requests, but requests that are concrete and specific and have a good amount of detail. For instance, file paths, personal context about the user's job or situation, column names and values, company names, URLs. A little bit of backstory. Some might be in lowercase or contain abbreviations or typos or casual speech. Use a mix of different lengths, and focus on edge cases rather than making them clear-cut (the user will get a chance to sign off on them). Bad: `"Format this data"`, `"Extract text from PDF"`, `"Create a chart"` Good: `"ok so my boss just sent me this xlsx file (its in my downloads, called something like 'Q4 sales final FINAL v2.xlsx') and she wants me to add a column that shows the profit margin as a percentage. The revenue is in column C and costs are in column D i think"` For the **should-trigger** queries (8-10), think about coverage. You want different phrasings of the same intent — some formal, some casual. Include cases where the user doesn't explicitly name the skill or file type but clearly needs it. Throw in some uncommon use cases and cases where this skill competes with another but should win. For the **should-not-trigger** queries (8-10), the most valuable ones are the near-misses — queries that share keywords or concepts with the skill but actually need something different. Think adjacent domains, ambiguous phrasing where a naive keyword match would trigger but shouldn't, and cases where the query touches on something the skill does but in a context where another tool is more appropriate. The key thing to avoid: don't make should-not-trigger queries obviously irrelevant. "Write a fibonacci function" as a negative test for a PDF skill is too easy — it doesn't test anything. The negative cases should be genuinely tricky. ### Step 2: Review with user Present the eval set to the user for review using the HTML template: 1. Read the template from `assets/eval_review.html` 2. Replace the placeholders: - `__EVAL_DATA_PLACEHOLDER__` → the JSON array of eval items (no quotes around it — it's a JS variable assignment) - `__SKILL_NAME_PLACEHOLDER__` → the skill's name - `__SKILL_DESCRIPTION_PLACEHOLDER__` → the skill's current description 3. Write to a temp file (e.g., `/tmp/eval_review_.html`) and open it: `open /tmp/eval_review_.html` 4. The user can edit queries, toggle should-trigger, add/remove entries, then click "Export Eval Set" 5. The file downloads to `~/Downloads/eval_set.json` — check the Downloads folder for the most recent version in case there are multiple (e.g., `eval_set (1).json`) This step matters — bad eval queries lead to bad descriptions. ### Step 3: Run the optimization loop Tell the user: "This will take some time — I'll run the optimization loop in the background and check on it periodically." Save the eval set to the workspace, then run in the background: ```bash python -m scripts.run_loop \ --eval-set \ --skill-path \ --model \ --max-iterations 5 \ --verbose ``` Use the model ID from your system prompt (the one powering the current session) so the triggering test matches what the user actually experiences. While it runs, periodically tail the output to give the user updates on which iteration it's on and what the scores look like. This handles the full optimization loop automatically. It splits the eval set into 60% train and 40% held-out test, evaluates the current description (running each query 3 times to get a reliable trigger rate), then calls Claude to propose improvements based on what failed. It re-evaluates each new description on both train and test, iterating up to 5 times. When it's done, it opens an HTML report in the browser showing the results per iteration and returns JSON with `best_description` — selected by test score rather than train score to avoid overfitting. ### How skill triggering works Understanding the triggering mechanism helps design better eval queries. Skills appear in Claude's `available_skills` list with their name + description, and Claude decides whether to consult a skill based on that description. The important thing to know is that Claude only consults skills for tasks it can't easily handle on its own — simple, one-step queries like "read this PDF" may not trigger a skill even if the description matches perfectly, because Claude can handle them directly with basic tools. Complex, multi-step, or specialized queries reliably trigger skills when the description matches. This means your eval queries should be substantive enough that Claude would actually benefit from consulting a skill. Simple queries like "read file X" are poor test cases — they won't trigger skills regardless of description quality. ### Step 4: Apply the result Take `best_description` from the JSON output and update the skill's SKILL.md frontmatter. Show the user before/after and report the scores. --- ### Package and Present (only if `present_files` tool is available) Check whether you have access to the `present_files` tool. If you don't, skip this step. If you do, package the skill and present the .skill file to the user: ```bash python -m scripts.package_skill ``` After packaging, direct the user to the resulting `.skill` file path so they can install it. --- ## Claude.ai-specific instructions In Claude.ai, the core workflow is the same (draft → test → review → improve → repeat), but because Claude.ai doesn't have subagents, some mechanics change. Here's what to adapt: **Running test cases**: No subagents means no parallel execution. For each test case, read the skill's SKILL.md, then follow its instructions to accomplish the test prompt yourself. Do them one at a time. This is less rigorous than independent subagents (you wrote the skill and you're also running it, so you have full context), but it's a useful sanity check — and the human review step compensates. Skip the baseline runs — just use the skill to complete the task as requested. **Reviewing results**: If you can't open a browser (e.g., Claude.ai's VM has no display, or you're on a remote server), skip the browser reviewer entirely. Instead, present results directly in the conversation. For each test case, show the prompt and the output. If the output is a file the user needs to see (like a .docx or .xlsx), save it to the filesystem and tell them where it is so they can download and inspect it. Ask for feedback inline: "How does this look? Anything you'd change?" **Benchmarking**: Skip the quantitative benchmarking — it relies on baseline comparisons which aren't meaningful without subagents. Focus on qualitative feedback from the user. **The iteration loop**: Same as before — improve the skill, rerun the test cases, ask for feedback — just without the browser reviewer in the middle. You can still organize results into iteration directories on the filesystem if you have one. **Description optimization**: This section requires the `claude` CLI tool (specifically `claude -p`) which is only available in Claude Code. Skip it if you're on Claude.ai. **Blind comparison**: Requires subagents. Skip it. **Packaging**: The `package_skill.py` script works anywhere with Python and a filesystem. On Claude.ai, you can run it and the user can download the resulting `.skill` file. **Updating an existing skill**: The user might be asking you to update an existing skill, not create a new one. In this case: - **Preserve the original name.** Note the skill's directory name and `name` frontmatter field -- use them unchanged. E.g., if the installed skill is `research-helper`, output `research-helper.skill` (not `research-helper-v2`). - **Copy to a writeable location before editing.** The installed skill path may be read-only. Copy to `/tmp/skill-name/`, edit there, and package from the copy. - **If packaging manually, stage in `/tmp/` first**, then copy to the output directory -- direct writes may fail due to permissions. --- ## Cowork-Specific Instructions If you're in Cowork, the main things to know are: - You have subagents, so the main workflow (spawn test cases in parallel, run baselines, grade, etc.) all works. (However, if you run into severe problems with timeouts, it's OK to run the test prompts in series rather than parallel.) - You don't have a browser or display, so when generating the eval viewer, use `--static ` to write a standalone HTML file instead of starting a server. Then proffer a link that the user can click to open the HTML in their browser. - For whatever reason, the Cowork setup seems to disincline Claude from generating the eval viewer after running the tests, so just to reiterate: whether you're in Cowork or in Claude Code, after running tests, you should always generate the eval viewer for the human to look at examples before revising the skill yourself and trying to make corrections, using `generate_review.py` (not writing your own boutique html code). Sorry in advance but I'm gonna go all caps here: GENERATE THE EVAL VIEWER _BEFORE_ evaluating inputs yourself. You want to get them in front of the human ASAP! - Feedback works differently: since there's no running server, the viewer's "Submit All Reviews" button will download `feedback.json` as a file. You can then read it from there (you may have to request access first). - Packaging works — `package_skill.py` just needs Python and a filesystem. - Description optimization (`run_loop.py` / `run_eval.py`) should work in Cowork just fine since it uses `claude -p` via subprocess, not a browser, but please save it until you've fully finished making the skill and the user agrees it's in good shape. - **Updating an existing skill**: The user might be asking you to update an existing skill, not create a new one. Follow the update guidance in the claude.ai section above. --- ## Reference files The agents/ directory contains instructions for specialized subagents. Read them when you need to spawn the relevant subagent. - `agents/grader.md` — How to evaluate assertions against outputs - `agents/comparator.md` — How to do blind A/B comparison between two outputs - `agents/analyzer.md` — How to analyze why one version beat another The references/ directory has additional documentation: - `references/schemas.md` — JSON structures for evals.json, grading.json, etc. --- Repeating one more time the core loop here for emphasis: - Figure out what the skill is about - Draft or edit the skill - Run claude-with-access-to-the-skill on test prompts - With the user, evaluate the outputs: - Create benchmark.json and run `eval-viewer/generate_review.py` to help the user review them - Run quantitative evals - Repeat until you and the user are satisfied - Package the final skill and return it to the user. Please add steps to your TodoList, if you have such a thing, to make sure you don't forget. If you're in Cowork, please specifically put "Create evals JSON and run `eval-viewer/generate_review.py` so human can review test cases" in your TodoList to make sure it happens. Good luck! ================================================ FILE: .agents/skills/skill-creator/agents/analyzer.md ================================================ # Post-hoc Analyzer Agent Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions. ## Role After the blind comparator determines a winner, the Post-hoc Analyzer "unblids" the results by examining the skills and transcripts. The goal is to extract actionable insights: what made the winner better, and how can the loser be improved? ## Inputs You receive these parameters in your prompt: - **winner**: "A" or "B" (from blind comparison) - **winner_skill_path**: Path to the skill that produced the winning output - **winner_transcript_path**: Path to the execution transcript for the winner - **loser_skill_path**: Path to the skill that produced the losing output - **loser_transcript_path**: Path to the execution transcript for the loser - **comparison_result_path**: Path to the blind comparator's output JSON - **output_path**: Where to save the analysis results ## Process ### Step 1: Read Comparison Result 1. Read the blind comparator's output at comparison_result_path 2. Note the winning side (A or B), the reasoning, and any scores 3. Understand what the comparator valued in the winning output ### Step 2: Read Both Skills 1. Read the winner skill's SKILL.md and key referenced files 2. Read the loser skill's SKILL.md and key referenced files 3. Identify structural differences: - Instructions clarity and specificity - Script/tool usage patterns - Example coverage - Edge case handling ### Step 3: Read Both Transcripts 1. Read the winner's transcript 2. Read the loser's transcript 3. Compare execution patterns: - How closely did each follow their skill's instructions? - What tools were used differently? - Where did the loser diverge from optimal behavior? - Did either encounter errors or make recovery attempts? ### Step 4: Analyze Instruction Following For each transcript, evaluate: - Did the agent follow the skill's explicit instructions? - Did the agent use the skill's provided tools/scripts? - Were there missed opportunities to leverage skill content? - Did the agent add unnecessary steps not in the skill? Score instruction following 1-10 and note specific issues. ### Step 5: Identify Winner Strengths Determine what made the winner better: - Clearer instructions that led to better behavior? - Better scripts/tools that produced better output? - More comprehensive examples that guided edge cases? - Better error handling guidance? Be specific. Quote from skills/transcripts where relevant. ### Step 6: Identify Loser Weaknesses Determine what held the loser back: - Ambiguous instructions that led to suboptimal choices? - Missing tools/scripts that forced workarounds? - Gaps in edge case coverage? - Poor error handling that caused failures? ### Step 7: Generate Improvement Suggestions Based on the analysis, produce actionable suggestions for improving the loser skill: - Specific instruction changes to make - Tools/scripts to add or modify - Examples to include - Edge cases to address Prioritize by impact. Focus on changes that would have changed the outcome. ### Step 8: Write Analysis Results Save structured analysis to `{output_path}`. ## Output Format Write a JSON file with this structure: ```json { "comparison_summary": { "winner": "A", "winner_skill": "path/to/winner/skill", "loser_skill": "path/to/loser/skill", "comparator_reasoning": "Brief summary of why comparator chose winner" }, "winner_strengths": [ "Clear step-by-step instructions for handling multi-page documents", "Included validation script that caught formatting errors", "Explicit guidance on fallback behavior when OCR fails" ], "loser_weaknesses": [ "Vague instruction 'process the document appropriately' led to inconsistent behavior", "No script for validation, agent had to improvise and made errors", "No guidance on OCR failure, agent gave up instead of trying alternatives" ], "instruction_following": { "winner": { "score": 9, "issues": ["Minor: skipped optional logging step"] }, "loser": { "score": 6, "issues": [ "Did not use the skill's formatting template", "Invented own approach instead of following step 3", "Missed the 'always validate output' instruction" ] } }, "improvement_suggestions": [ { "priority": "high", "category": "instructions", "suggestion": "Replace 'process the document appropriately' with explicit steps: 1) Extract text, 2) Identify sections, 3) Format per template", "expected_impact": "Would eliminate ambiguity that caused inconsistent behavior" }, { "priority": "high", "category": "tools", "suggestion": "Add validate_output.py script similar to winner skill's validation approach", "expected_impact": "Would catch formatting errors before final output" }, { "priority": "medium", "category": "error_handling", "suggestion": "Add fallback instructions: 'If OCR fails, try: 1) different resolution, 2) image preprocessing, 3) manual extraction'", "expected_impact": "Would prevent early failure on difficult documents" } ], "transcript_insights": { "winner_execution_pattern": "Read skill -> Followed 5-step process -> Used validation script -> Fixed 2 issues -> Produced output", "loser_execution_pattern": "Read skill -> Unclear on approach -> Tried 3 different methods -> No validation -> Output had errors" } } ``` ## Guidelines - **Be specific**: Quote from skills and transcripts, don't just say "instructions were unclear" - **Be actionable**: Suggestions should be concrete changes, not vague advice - **Focus on skill improvements**: The goal is to improve the losing skill, not critique the agent - **Prioritize by impact**: Which changes would most likely have changed the outcome? - **Consider causation**: Did the skill weakness actually cause the worse output, or is it incidental? - **Stay objective**: Analyze what happened, don't editorialize - **Think about generalization**: Would this improvement help on other evals too? ## Categories for Suggestions Use these categories to organize improvement suggestions: | Category | Description | | ---------------- | ---------------------------------------------- | | `instructions` | Changes to the skill's prose instructions | | `tools` | Scripts, templates, or utilities to add/modify | | `examples` | Example inputs/outputs to include | | `error_handling` | Guidance for handling failures | | `structure` | Reorganization of skill content | | `references` | External docs or resources to add | ## Priority Levels - **high**: Would likely change the outcome of this comparison - **medium**: Would improve quality but may not change win/loss - **low**: Nice to have, marginal improvement --- # Analyzing Benchmark Results When analyzing benchmark results, the analyzer's purpose is to **surface patterns and anomalies** across multiple runs, not suggest skill improvements. ## Role Review all benchmark run results and generate freeform notes that help the user understand skill performance. Focus on patterns that wouldn't be visible from aggregate metrics alone. ## Inputs You receive these parameters in your prompt: - **benchmark_data_path**: Path to the in-progress benchmark.json with all run results - **skill_path**: Path to the skill being benchmarked - **output_path**: Where to save the notes (as JSON array of strings) ## Process ### Step 1: Read Benchmark Data 1. Read the benchmark.json containing all run results 2. Note the configurations tested (with_skill, without_skill) 3. Understand the run_summary aggregates already calculated ### Step 2: Analyze Per-Assertion Patterns For each expectation across all runs: - Does it **always pass** in both configurations? (may not differentiate skill value) - Does it **always fail** in both configurations? (may be broken or beyond capability) - Does it **always pass with skill but fail without**? (skill clearly adds value here) - Does it **always fail with skill but pass without**? (skill may be hurting) - Is it **highly variable**? (flaky expectation or non-deterministic behavior) ### Step 3: Analyze Cross-Eval Patterns Look for patterns across evals: - Are certain eval types consistently harder/easier? - Do some evals show high variance while others are stable? - Are there surprising results that contradict expectations? ### Step 4: Analyze Metrics Patterns Look at time_seconds, tokens, tool_calls: - Does the skill significantly increase execution time? - Is there high variance in resource usage? - Are there outlier runs that skew the aggregates? ### Step 5: Generate Notes Write freeform observations as a list of strings. Each note should: - State a specific observation - Be grounded in the data (not speculation) - Help the user understand something the aggregate metrics don't show Examples: - "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value" - "Eval 3 shows high variance (50% ± 40%) - run 2 had an unusual failure that may be flaky" - "Without-skill runs consistently fail on table extraction expectations (0% pass rate)" - "Skill adds 13s average execution time but improves pass rate by 50%" - "Token usage is 80% higher with skill, primarily due to script output parsing" - "All 3 without-skill runs for eval 1 produced empty output" ### Step 6: Write Notes Save notes to `{output_path}` as a JSON array of strings: ```json [ "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value", "Eval 3 shows high variance (50% ± 40%) - run 2 had an unusual failure", "Without-skill runs consistently fail on table extraction expectations", "Skill adds 13s average execution time but improves pass rate by 50%" ] ``` ## Guidelines **DO:** - Report what you observe in the data - Be specific about which evals, expectations, or runs you're referring to - Note patterns that aggregate metrics would hide - Provide context that helps interpret the numbers **DO NOT:** - Suggest improvements to the skill (that's for the improvement step, not benchmarking) - Make subjective quality judgments ("the output was good/bad") - Speculate about causes without evidence - Repeat information already in the run_summary aggregates ================================================ FILE: .agents/skills/skill-creator/agents/comparator.md ================================================ # Blind Comparator Agent Compare two outputs WITHOUT knowing which skill produced them. ## Role The Blind Comparator judges which output better accomplishes the eval task. You receive two outputs labeled A and B, but you do NOT know which skill produced which. This prevents bias toward a particular skill or approach. Your judgment is based purely on output quality and task completion. ## Inputs You receive these parameters in your prompt: - **output_a_path**: Path to the first output file or directory - **output_b_path**: Path to the second output file or directory - **eval_prompt**: The original task/prompt that was executed - **expectations**: List of expectations to check (optional - may be empty) ## Process ### Step 1: Read Both Outputs 1. Examine output A (file or directory) 2. Examine output B (file or directory) 3. Note the type, structure, and content of each 4. If outputs are directories, examine all relevant files inside ### Step 2: Understand the Task 1. Read the eval_prompt carefully 2. Identify what the task requires: - What should be produced? - What qualities matter (accuracy, completeness, format)? - What would distinguish a good output from a poor one? ### Step 3: Generate Evaluation Rubric Based on the task, generate a rubric with two dimensions: **Content Rubric** (what the output contains): | Criterion | 1 (Poor) | 3 (Acceptable) | 5 (Excellent) | |-----------|----------|----------------|---------------| | Correctness | Major errors | Minor errors | Fully correct | | Completeness | Missing key elements | Mostly complete | All elements present | | Accuracy | Significant inaccuracies | Minor inaccuracies | Accurate throughout | **Structure Rubric** (how the output is organized): | Criterion | 1 (Poor) | 3 (Acceptable) | 5 (Excellent) | |-----------|----------|----------------|---------------| | Organization | Disorganized | Reasonably organized | Clear, logical structure | | Formatting | Inconsistent/broken | Mostly consistent | Professional, polished | | Usability | Difficult to use | Usable with effort | Easy to use | Adapt criteria to the specific task. For example: - PDF form → "Field alignment", "Text readability", "Data placement" - Document → "Section structure", "Heading hierarchy", "Paragraph flow" - Data output → "Schema correctness", "Data types", "Completeness" ### Step 4: Evaluate Each Output Against the Rubric For each output (A and B): 1. **Score each criterion** on the rubric (1-5 scale) 2. **Calculate dimension totals**: Content score, Structure score 3. **Calculate overall score**: Average of dimension scores, scaled to 1-10 ### Step 5: Check Assertions (if provided) If expectations are provided: 1. Check each expectation against output A 2. Check each expectation against output B 3. Count pass rates for each output 4. Use expectation scores as secondary evidence (not the primary decision factor) ### Step 6: Determine the Winner Compare A and B based on (in priority order): 1. **Primary**: Overall rubric score (content + structure) 2. **Secondary**: Assertion pass rates (if applicable) 3. **Tiebreaker**: If truly equal, declare a TIE Be decisive - ties should be rare. One output is usually better, even if marginally. ### Step 7: Write Comparison Results Save results to a JSON file at the path specified (or `comparison.json` if not specified). ## Output Format Write a JSON file with this structure: ```json { "winner": "A", "reasoning": "Output A provides a complete solution with proper formatting and all required fields. Output B is missing the date field and has formatting inconsistencies.", "rubric": { "A": { "content": { "correctness": 5, "completeness": 5, "accuracy": 4 }, "structure": { "organization": 4, "formatting": 5, "usability": 4 }, "content_score": 4.7, "structure_score": 4.3, "overall_score": 9.0 }, "B": { "content": { "correctness": 3, "completeness": 2, "accuracy": 3 }, "structure": { "organization": 3, "formatting": 2, "usability": 3 }, "content_score": 2.7, "structure_score": 2.7, "overall_score": 5.4 } }, "output_quality": { "A": { "score": 9, "strengths": ["Complete solution", "Well-formatted", "All fields present"], "weaknesses": ["Minor style inconsistency in header"] }, "B": { "score": 5, "strengths": ["Readable output", "Correct basic structure"], "weaknesses": ["Missing date field", "Formatting inconsistencies", "Partial data extraction"] } }, "expectation_results": { "A": { "passed": 4, "total": 5, "pass_rate": 0.8, "details": [ { "text": "Output includes name", "passed": true }, { "text": "Output includes date", "passed": true }, { "text": "Format is PDF", "passed": true }, { "text": "Contains signature", "passed": false }, { "text": "Readable text", "passed": true } ] }, "B": { "passed": 3, "total": 5, "pass_rate": 0.6, "details": [ { "text": "Output includes name", "passed": true }, { "text": "Output includes date", "passed": false }, { "text": "Format is PDF", "passed": true }, { "text": "Contains signature", "passed": false }, { "text": "Readable text", "passed": true } ] } } } ``` If no expectations were provided, omit the `expectation_results` field entirely. ## Field Descriptions - **winner**: "A", "B", or "TIE" - **reasoning**: Clear explanation of why the winner was chosen (or why it's a tie) - **rubric**: Structured rubric evaluation for each output - **content**: Scores for content criteria (correctness, completeness, accuracy) - **structure**: Scores for structure criteria (organization, formatting, usability) - **content_score**: Average of content criteria (1-5) - **structure_score**: Average of structure criteria (1-5) - **overall_score**: Combined score scaled to 1-10 - **output_quality**: Summary quality assessment - **score**: 1-10 rating (should match rubric overall_score) - **strengths**: List of positive aspects - **weaknesses**: List of issues or shortcomings - **expectation_results**: (Only if expectations provided) - **passed**: Number of expectations that passed - **total**: Total number of expectations - **pass_rate**: Fraction passed (0.0 to 1.0) - **details**: Individual expectation results ## Guidelines - **Stay blind**: DO NOT try to infer which skill produced which output. Judge purely on output quality. - **Be specific**: Cite specific examples when explaining strengths and weaknesses. - **Be decisive**: Choose a winner unless outputs are genuinely equivalent. - **Output quality first**: Assertion scores are secondary to overall task completion. - **Be objective**: Don't favor outputs based on style preferences; focus on correctness and completeness. - **Explain your reasoning**: The reasoning field should make it clear why you chose the winner. - **Handle edge cases**: If both outputs fail, pick the one that fails less badly. If both are excellent, pick the one that's marginally better. ================================================ FILE: .agents/skills/skill-creator/agents/grader.md ================================================ # Grader Agent Evaluate expectations against an execution transcript and outputs. ## Role The Grader reviews a transcript and output files, then determines whether each expectation passes or fails. Provide clear evidence for each judgment. You have two jobs: grade the outputs, and critique the evals themselves. A passing grade on a weak assertion is worse than useless — it creates false confidence. When you notice an assertion that's trivially satisfied, or an important outcome that no assertion checks, say so. ## Inputs You receive these parameters in your prompt: - **expectations**: List of expectations to evaluate (strings) - **transcript_path**: Path to the execution transcript (markdown file) - **outputs_dir**: Directory containing output files from execution ## Process ### Step 1: Read the Transcript 1. Read the transcript file completely 2. Note the eval prompt, execution steps, and final result 3. Identify any issues or errors documented ### Step 2: Examine Output Files 1. List files in outputs_dir 2. Read/examine each file relevant to the expectations. If outputs aren't plain text, use the inspection tools provided in your prompt — don't rely solely on what the transcript says the executor produced. 3. Note contents, structure, and quality ### Step 3: Evaluate Each Assertion For each expectation: 1. **Search for evidence** in the transcript and outputs 2. **Determine verdict**: - **PASS**: Clear evidence the expectation is true AND the evidence reflects genuine task completion, not just surface-level compliance - **FAIL**: No evidence, or evidence contradicts the expectation, or the evidence is superficial (e.g., correct filename but empty/wrong content) 3. **Cite the evidence**: Quote the specific text or describe what you found ### Step 4: Extract and Verify Claims Beyond the predefined expectations, extract implicit claims from the outputs and verify them: 1. **Extract claims** from the transcript and outputs: - Factual statements ("The form has 12 fields") - Process claims ("Used pypdf to fill the form") - Quality claims ("All fields were filled correctly") 2. **Verify each claim**: - **Factual claims**: Can be checked against the outputs or external sources - **Process claims**: Can be verified from the transcript - **Quality claims**: Evaluate whether the claim is justified 3. **Flag unverifiable claims**: Note claims that cannot be verified with available information This catches issues that predefined expectations might miss. ### Step 5: Read User Notes If `{outputs_dir}/user_notes.md` exists: 1. Read it and note any uncertainties or issues flagged by the executor 2. Include relevant concerns in the grading output 3. These may reveal problems even when expectations pass ### Step 6: Critique the Evals After grading, consider whether the evals themselves could be improved. Only surface suggestions when there's a clear gap. Good suggestions test meaningful outcomes — assertions that are hard to satisfy without actually doing the work correctly. Think about what makes an assertion _discriminating_: it passes when the skill genuinely succeeds and fails when it doesn't. Suggestions worth raising: - An assertion that passed but would also pass for a clearly wrong output (e.g., checking filename existence but not file content) - An important outcome you observed — good or bad — that no assertion covers at all - An assertion that can't actually be verified from the available outputs Keep the bar high. The goal is to flag things the eval author would say "good catch" about, not to nitpick every assertion. ### Step 7: Write Grading Results Save results to `{outputs_dir}/../grading.json` (sibling to outputs_dir). ## Grading Criteria **PASS when**: - The transcript or outputs clearly demonstrate the expectation is true - Specific evidence can be cited - The evidence reflects genuine substance, not just surface compliance (e.g., a file exists AND contains correct content, not just the right filename) **FAIL when**: - No evidence found for the expectation - Evidence contradicts the expectation - The expectation cannot be verified from available information - The evidence is superficial — the assertion is technically satisfied but the underlying task outcome is wrong or incomplete - The output appears to meet the assertion by coincidence rather than by actually doing the work **When uncertain**: The burden of proof to pass is on the expectation. ### Step 8: Read Executor Metrics and Timing 1. If `{outputs_dir}/metrics.json` exists, read it and include in grading output 2. If `{outputs_dir}/../timing.json` exists, read it and include timing data ## Output Format Write a JSON file with this structure: ```json { "expectations": [ { "text": "The output includes the name 'John Smith'", "passed": true, "evidence": "Found in transcript Step 3: 'Extracted names: John Smith, Sarah Johnson'" }, { "text": "The spreadsheet has a SUM formula in cell B10", "passed": false, "evidence": "No spreadsheet was created. The output was a text file." }, { "text": "The assistant used the skill's OCR script", "passed": true, "evidence": "Transcript Step 2 shows: 'Tool: Bash - python ocr_script.py image.png'" } ], "summary": { "passed": 2, "failed": 1, "total": 3, "pass_rate": 0.67 }, "execution_metrics": { "tool_calls": { "Read": 5, "Write": 2, "Bash": 8 }, "total_tool_calls": 15, "total_steps": 6, "errors_encountered": 0, "output_chars": 12450, "transcript_chars": 3200 }, "timing": { "executor_duration_seconds": 165.0, "grader_duration_seconds": 26.0, "total_duration_seconds": 191.0 }, "claims": [ { "claim": "The form has 12 fillable fields", "type": "factual", "verified": true, "evidence": "Counted 12 fields in field_info.json" }, { "claim": "All required fields were populated", "type": "quality", "verified": false, "evidence": "Reference section was left blank despite data being available" } ], "user_notes_summary": { "uncertainties": ["Used 2023 data, may be stale"], "needs_review": [], "workarounds": ["Fell back to text overlay for non-fillable fields"] }, "eval_feedback": { "suggestions": [ { "assertion": "The output includes the name 'John Smith'", "reason": "A hallucinated document that mentions the name would also pass — consider checking it appears as the primary contact with matching phone and email from the input" }, { "reason": "No assertion checks whether the extracted phone numbers match the input — I observed incorrect numbers in the output that went uncaught" } ], "overall": "Assertions check presence but not correctness. Consider adding content verification." } } ``` ## Field Descriptions - **expectations**: Array of graded expectations - **text**: The original expectation text - **passed**: Boolean - true if expectation passes - **evidence**: Specific quote or description supporting the verdict - **summary**: Aggregate statistics - **passed**: Count of passed expectations - **failed**: Count of failed expectations - **total**: Total expectations evaluated - **pass_rate**: Fraction passed (0.0 to 1.0) - **execution_metrics**: Copied from executor's metrics.json (if available) - **output_chars**: Total character count of output files (proxy for tokens) - **transcript_chars**: Character count of transcript - **timing**: Wall clock timing from timing.json (if available) - **executor_duration_seconds**: Time spent in executor subagent - **total_duration_seconds**: Total elapsed time for the run - **claims**: Extracted and verified claims from the output - **claim**: The statement being verified - **type**: "factual", "process", or "quality" - **verified**: Boolean - whether the claim holds - **evidence**: Supporting or contradicting evidence - **user_notes_summary**: Issues flagged by the executor - **uncertainties**: Things the executor wasn't sure about - **needs_review**: Items requiring human attention - **workarounds**: Places where the skill didn't work as expected - **eval_feedback**: Improvement suggestions for the evals (only when warranted) - **suggestions**: List of concrete suggestions, each with a `reason` and optionally an `assertion` it relates to - **overall**: Brief assessment — can be "No suggestions, evals look solid" if nothing to flag ## Guidelines - **Be objective**: Base verdicts on evidence, not assumptions - **Be specific**: Quote the exact text that supports your verdict - **Be thorough**: Check both transcript and output files - **Be consistent**: Apply the same standard to each expectation - **Explain failures**: Make it clear why evidence was insufficient - **No partial credit**: Each expectation is pass or fail, not partial ================================================ FILE: .agents/skills/skill-creator/assets/eval_review.html ================================================ Eval Set Review - __SKILL_NAME_PLACEHOLDER__

Eval Set Review: __SKILL_NAME_PLACEHOLDER__

Current description: __SKILL_DESCRIPTION_PLACEHOLDER__

Query Should Trigger Actions

================================================ FILE: .agents/skills/skill-creator/eval-viewer/generate_review.py ================================================ #!/usr/bin/env python3 """Generate and serve a review page for eval results. Reads the workspace directory, discovers runs (directories with outputs/), embeds all output data into a self-contained HTML page, and serves it via a tiny HTTP server. Feedback auto-saves to feedback.json in the workspace. Usage: python generate_review.py [--port PORT] [--skill-name NAME] python generate_review.py --previous-feedback /path/to/old/feedback.json No dependencies beyond the Python stdlib are required. """ import argparse import base64 import json import mimetypes import os import re import signal import subprocess import sys import time import webbrowser from functools import partial from http.server import HTTPServer, BaseHTTPRequestHandler from pathlib import Path # Files to exclude from output listings METADATA_FILES = {"transcript.md", "user_notes.md", "metrics.json"} # Extensions we render as inline text TEXT_EXTENSIONS = { ".txt", ".md", ".json", ".csv", ".py", ".js", ".ts", ".tsx", ".jsx", ".yaml", ".yml", ".xml", ".html", ".css", ".sh", ".rb", ".go", ".rs", ".java", ".c", ".cpp", ".h", ".hpp", ".sql", ".r", ".toml", } # Extensions we render as inline images IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"} # MIME type overrides for common types MIME_OVERRIDES = { ".svg": "image/svg+xml", ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document", ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation", } def get_mime_type(path: Path) -> str: ext = path.suffix.lower() if ext in MIME_OVERRIDES: return MIME_OVERRIDES[ext] mime, _ = mimetypes.guess_type(str(path)) return mime or "application/octet-stream" def find_runs(workspace: Path) -> list[dict]: """Recursively find directories that contain an outputs/ subdirectory.""" runs: list[dict] = [] _find_runs_recursive(workspace, workspace, runs) runs.sort(key=lambda r: (r.get("eval_id", float("inf")), r["id"])) return runs def _find_runs_recursive(root: Path, current: Path, runs: list[dict]) -> None: if not current.is_dir(): return outputs_dir = current / "outputs" if outputs_dir.is_dir(): run = build_run(root, current) if run: runs.append(run) return skip = {"node_modules", ".git", "__pycache__", "skill", "inputs"} for child in sorted(current.iterdir()): if child.is_dir() and child.name not in skip: _find_runs_recursive(root, child, runs) def build_run(root: Path, run_dir: Path) -> dict | None: """Build a run dict with prompt, outputs, and grading data.""" prompt = "" eval_id = None # Try eval_metadata.json for candidate in [run_dir / "eval_metadata.json", run_dir.parent / "eval_metadata.json"]: if candidate.exists(): try: metadata = json.loads(candidate.read_text()) prompt = metadata.get("prompt", "") eval_id = metadata.get("eval_id") except (json.JSONDecodeError, OSError): pass if prompt: break # Fall back to transcript.md if not prompt: for candidate in [run_dir / "transcript.md", run_dir / "outputs" / "transcript.md"]: if candidate.exists(): try: text = candidate.read_text() match = re.search(r"## Eval Prompt\n\n([\s\S]*?)(?=\n##|$)", text) if match: prompt = match.group(1).strip() except OSError: pass if prompt: break if not prompt: prompt = "(No prompt found)" run_id = str(run_dir.relative_to(root)).replace("/", "-").replace("\\", "-") # Collect output files outputs_dir = run_dir / "outputs" output_files: list[dict] = [] if outputs_dir.is_dir(): for f in sorted(outputs_dir.iterdir()): if f.is_file() and f.name not in METADATA_FILES: output_files.append(embed_file(f)) # Load grading if present grading = None for candidate in [run_dir / "grading.json", run_dir.parent / "grading.json"]: if candidate.exists(): try: grading = json.loads(candidate.read_text()) except (json.JSONDecodeError, OSError): pass if grading: break return { "id": run_id, "prompt": prompt, "eval_id": eval_id, "outputs": output_files, "grading": grading, } def embed_file(path: Path) -> dict: """Read a file and return an embedded representation.""" ext = path.suffix.lower() mime = get_mime_type(path) if ext in TEXT_EXTENSIONS: try: content = path.read_text(errors="replace") except OSError: content = "(Error reading file)" return { "name": path.name, "type": "text", "content": content, } elif ext in IMAGE_EXTENSIONS: try: raw = path.read_bytes() b64 = base64.b64encode(raw).decode("ascii") except OSError: return {"name": path.name, "type": "error", "content": "(Error reading file)"} return { "name": path.name, "type": "image", "mime": mime, "data_uri": f"data:{mime};base64,{b64}", } elif ext == ".pdf": try: raw = path.read_bytes() b64 = base64.b64encode(raw).decode("ascii") except OSError: return {"name": path.name, "type": "error", "content": "(Error reading file)"} return { "name": path.name, "type": "pdf", "data_uri": f"data:{mime};base64,{b64}", } elif ext == ".xlsx": try: raw = path.read_bytes() b64 = base64.b64encode(raw).decode("ascii") except OSError: return {"name": path.name, "type": "error", "content": "(Error reading file)"} return { "name": path.name, "type": "xlsx", "data_b64": b64, } else: # Binary / unknown — base64 download link try: raw = path.read_bytes() b64 = base64.b64encode(raw).decode("ascii") except OSError: return {"name": path.name, "type": "error", "content": "(Error reading file)"} return { "name": path.name, "type": "binary", "mime": mime, "data_uri": f"data:{mime};base64,{b64}", } def load_previous_iteration(workspace: Path) -> dict[str, dict]: """Load previous iteration's feedback and outputs. Returns a map of run_id -> {"feedback": str, "outputs": list[dict]}. """ result: dict[str, dict] = {} # Load feedback feedback_map: dict[str, str] = {} feedback_path = workspace / "feedback.json" if feedback_path.exists(): try: data = json.loads(feedback_path.read_text()) feedback_map = { r["run_id"]: r["feedback"] for r in data.get("reviews", []) if r.get("feedback", "").strip() } except (json.JSONDecodeError, OSError, KeyError): pass # Load runs (to get outputs) prev_runs = find_runs(workspace) for run in prev_runs: result[run["id"]] = { "feedback": feedback_map.get(run["id"], ""), "outputs": run.get("outputs", []), } # Also add feedback for run_ids that had feedback but no matching run for run_id, fb in feedback_map.items(): if run_id not in result: result[run_id] = {"feedback": fb, "outputs": []} return result def generate_html( runs: list[dict], skill_name: str, previous: dict[str, dict] | None = None, benchmark: dict | None = None, ) -> str: """Generate the complete standalone HTML page with embedded data.""" template_path = Path(__file__).parent / "viewer.html" template = template_path.read_text() # Build previous_feedback and previous_outputs maps for the template previous_feedback: dict[str, str] = {} previous_outputs: dict[str, list[dict]] = {} if previous: for run_id, data in previous.items(): if data.get("feedback"): previous_feedback[run_id] = data["feedback"] if data.get("outputs"): previous_outputs[run_id] = data["outputs"] embedded = { "skill_name": skill_name, "runs": runs, "previous_feedback": previous_feedback, "previous_outputs": previous_outputs, } if benchmark: embedded["benchmark"] = benchmark data_json = json.dumps(embedded) return template.replace("/*__EMBEDDED_DATA__*/", f"const EMBEDDED_DATA = {data_json};") # --------------------------------------------------------------------------- # HTTP server (stdlib only, zero dependencies) # --------------------------------------------------------------------------- def _kill_port(port: int) -> None: """Kill any process listening on the given port.""" try: result = subprocess.run( ["lsof", "-ti", f":{port}"], capture_output=True, text=True, timeout=5, ) for pid_str in result.stdout.strip().split("\n"): if pid_str.strip(): try: os.kill(int(pid_str.strip()), signal.SIGTERM) except (ProcessLookupError, ValueError): pass if result.stdout.strip(): time.sleep(0.5) except subprocess.TimeoutExpired: pass except FileNotFoundError: print("Note: lsof not found, cannot check if port is in use", file=sys.stderr) class ReviewHandler(BaseHTTPRequestHandler): """Serves the review HTML and handles feedback saves. Regenerates the HTML on each page load so that refreshing the browser picks up new eval outputs without restarting the server. """ def __init__( self, workspace: Path, skill_name: str, feedback_path: Path, previous: dict[str, dict], benchmark_path: Path | None, *args, **kwargs, ): self.workspace = workspace self.skill_name = skill_name self.feedback_path = feedback_path self.previous = previous self.benchmark_path = benchmark_path super().__init__(*args, **kwargs) def do_GET(self) -> None: if self.path == "/" or self.path == "/index.html": # Regenerate HTML on each request (re-scans workspace for new outputs) runs = find_runs(self.workspace) benchmark = None if self.benchmark_path and self.benchmark_path.exists(): try: benchmark = json.loads(self.benchmark_path.read_text()) except (json.JSONDecodeError, OSError): pass html = generate_html(runs, self.skill_name, self.previous, benchmark) content = html.encode("utf-8") self.send_response(200) self.send_header("Content-Type", "text/html; charset=utf-8") self.send_header("Content-Length", str(len(content))) self.end_headers() self.wfile.write(content) elif self.path == "/api/feedback": data = b"{}" if self.feedback_path.exists(): data = self.feedback_path.read_bytes() self.send_response(200) self.send_header("Content-Type", "application/json") self.send_header("Content-Length", str(len(data))) self.end_headers() self.wfile.write(data) else: self.send_error(404) def do_POST(self) -> None: if self.path == "/api/feedback": length = int(self.headers.get("Content-Length", 0)) body = self.rfile.read(length) try: data = json.loads(body) if not isinstance(data, dict) or "reviews" not in data: raise ValueError("Expected JSON object with 'reviews' key") self.feedback_path.write_text(json.dumps(data, indent=2) + "\n") resp = b'{"ok":true}' self.send_response(200) except (json.JSONDecodeError, OSError, ValueError) as e: resp = json.dumps({"error": str(e)}).encode() self.send_response(500) self.send_header("Content-Type", "application/json") self.send_header("Content-Length", str(len(resp))) self.end_headers() self.wfile.write(resp) else: self.send_error(404) def log_message(self, format: str, *args: object) -> None: # Suppress request logging to keep terminal clean pass def main() -> None: parser = argparse.ArgumentParser(description="Generate and serve eval review") parser.add_argument("workspace", type=Path, help="Path to workspace directory") parser.add_argument("--port", "-p", type=int, default=3117, help="Server port (default: 3117)") parser.add_argument("--skill-name", "-n", type=str, default=None, help="Skill name for header") parser.add_argument( "--previous-workspace", type=Path, default=None, help="Path to previous iteration's workspace (shows old outputs and feedback as context)", ) parser.add_argument( "--benchmark", type=Path, default=None, help="Path to benchmark.json to show in the Benchmark tab", ) parser.add_argument( "--static", "-s", type=Path, default=None, help="Write standalone HTML to this path instead of starting a server", ) args = parser.parse_args() workspace = args.workspace.resolve() if not workspace.is_dir(): print(f"Error: {workspace} is not a directory", file=sys.stderr) sys.exit(1) runs = find_runs(workspace) if not runs: print(f"No runs found in {workspace}", file=sys.stderr) sys.exit(1) skill_name = args.skill_name or workspace.name.replace("-workspace", "") feedback_path = workspace / "feedback.json" previous: dict[str, dict] = {} if args.previous_workspace: previous = load_previous_iteration(args.previous_workspace.resolve()) benchmark_path = args.benchmark.resolve() if args.benchmark else None benchmark = None if benchmark_path and benchmark_path.exists(): try: benchmark = json.loads(benchmark_path.read_text()) except (json.JSONDecodeError, OSError): pass if args.static: html = generate_html(runs, skill_name, previous, benchmark) args.static.parent.mkdir(parents=True, exist_ok=True) args.static.write_text(html) print(f"\n Static viewer written to: {args.static}\n") sys.exit(0) # Kill any existing process on the target port port = args.port _kill_port(port) handler = partial(ReviewHandler, workspace, skill_name, feedback_path, previous, benchmark_path) try: server = HTTPServer(("127.0.0.1", port), handler) except OSError: # Port still in use after kill attempt — find a free one server = HTTPServer(("127.0.0.1", 0), handler) port = server.server_address[1] url = f"http://localhost:{port}" print(f"\n Eval Viewer") print(f" ─────────────────────────────────") print(f" URL: {url}") print(f" Workspace: {workspace}") print(f" Feedback: {feedback_path}") if previous: print(f" Previous: {args.previous_workspace} ({len(previous)} runs)") if benchmark_path: print(f" Benchmark: {benchmark_path}") print(f"\n Press Ctrl+C to stop.\n") webbrowser.open(url) try: server.serve_forever() except KeyboardInterrupt: print("\nStopped.") server.server_close() if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/eval-viewer/viewer.html ================================================ Eval Review

Eval Review:

Review each output and leave feedback below. Navigate with arrow keys or buttons. When done, copy feedback and paste into Claude Code.
Prompt
Output
No output files found
Your Feedback
No benchmark data available. Run a benchmark to see quantitative results here.

Review Complete

Your feedback has been saved. Go back to your Claude Code session and tell Claude you're done reviewing.

================================================ FILE: .agents/skills/skill-creator/references/schemas.md ================================================ # JSON Schemas This document defines the JSON schemas used by skill-creator. --- ## evals.json Defines the evals for a skill. Located at `evals/evals.json` within the skill directory. ```json { "skill_name": "example-skill", "evals": [ { "id": 1, "prompt": "User's example prompt", "expected_output": "Description of expected result", "files": ["evals/files/sample1.pdf"], "expectations": ["The output includes X", "The skill used script Y"] } ] } ``` **Fields:** - `skill_name`: Name matching the skill's frontmatter - `evals[].id`: Unique integer identifier - `evals[].prompt`: The task to execute - `evals[].expected_output`: Human-readable description of success - `evals[].files`: Optional list of input file paths (relative to skill root) - `evals[].expectations`: List of verifiable statements --- ## history.json Tracks version progression in Improve mode. Located at workspace root. ```json { "started_at": "2026-01-15T10:30:00Z", "skill_name": "pdf", "current_best": "v2", "iterations": [ { "version": "v0", "parent": null, "expectation_pass_rate": 0.65, "grading_result": "baseline", "is_current_best": false }, { "version": "v1", "parent": "v0", "expectation_pass_rate": 0.75, "grading_result": "won", "is_current_best": false }, { "version": "v2", "parent": "v1", "expectation_pass_rate": 0.85, "grading_result": "won", "is_current_best": true } ] } ``` **Fields:** - `started_at`: ISO timestamp of when improvement started - `skill_name`: Name of the skill being improved - `current_best`: Version identifier of the best performer - `iterations[].version`: Version identifier (v0, v1, ...) - `iterations[].parent`: Parent version this was derived from - `iterations[].expectation_pass_rate`: Pass rate from grading - `iterations[].grading_result`: "baseline", "won", "lost", or "tie" - `iterations[].is_current_best`: Whether this is the current best version --- ## grading.json Output from the grader agent. Located at `/grading.json`. ```json { "expectations": [ { "text": "The output includes the name 'John Smith'", "passed": true, "evidence": "Found in transcript Step 3: 'Extracted names: John Smith, Sarah Johnson'" }, { "text": "The spreadsheet has a SUM formula in cell B10", "passed": false, "evidence": "No spreadsheet was created. The output was a text file." } ], "summary": { "passed": 2, "failed": 1, "total": 3, "pass_rate": 0.67 }, "execution_metrics": { "tool_calls": { "Read": 5, "Write": 2, "Bash": 8 }, "total_tool_calls": 15, "total_steps": 6, "errors_encountered": 0, "output_chars": 12450, "transcript_chars": 3200 }, "timing": { "executor_duration_seconds": 165.0, "grader_duration_seconds": 26.0, "total_duration_seconds": 191.0 }, "claims": [ { "claim": "The form has 12 fillable fields", "type": "factual", "verified": true, "evidence": "Counted 12 fields in field_info.json" } ], "user_notes_summary": { "uncertainties": ["Used 2023 data, may be stale"], "needs_review": [], "workarounds": ["Fell back to text overlay for non-fillable fields"] }, "eval_feedback": { "suggestions": [ { "assertion": "The output includes the name 'John Smith'", "reason": "A hallucinated document that mentions the name would also pass" } ], "overall": "Assertions check presence but not correctness." } } ``` **Fields:** - `expectations[]`: Graded expectations with evidence - `summary`: Aggregate pass/fail counts - `execution_metrics`: Tool usage and output size (from executor's metrics.json) - `timing`: Wall clock timing (from timing.json) - `claims`: Extracted and verified claims from the output - `user_notes_summary`: Issues flagged by the executor - `eval_feedback`: (optional) Improvement suggestions for the evals, only present when the grader identifies issues worth raising --- ## metrics.json Output from the executor agent. Located at `/outputs/metrics.json`. ```json { "tool_calls": { "Read": 5, "Write": 2, "Bash": 8, "Edit": 1, "Glob": 2, "Grep": 0 }, "total_tool_calls": 18, "total_steps": 6, "files_created": ["filled_form.pdf", "field_values.json"], "errors_encountered": 0, "output_chars": 12450, "transcript_chars": 3200 } ``` **Fields:** - `tool_calls`: Count per tool type - `total_tool_calls`: Sum of all tool calls - `total_steps`: Number of major execution steps - `files_created`: List of output files created - `errors_encountered`: Number of errors during execution - `output_chars`: Total character count of output files - `transcript_chars`: Character count of transcript --- ## timing.json Wall clock timing for a run. Located at `/timing.json`. **How to capture:** When a subagent task completes, the task notification includes `total_tokens` and `duration_ms`. Save these immediately — they are not persisted anywhere else and cannot be recovered after the fact. ```json { "total_tokens": 84852, "duration_ms": 23332, "total_duration_seconds": 23.3, "executor_start": "2026-01-15T10:30:00Z", "executor_end": "2026-01-15T10:32:45Z", "executor_duration_seconds": 165.0, "grader_start": "2026-01-15T10:32:46Z", "grader_end": "2026-01-15T10:33:12Z", "grader_duration_seconds": 26.0 } ``` --- ## benchmark.json Output from Benchmark mode. Located at `benchmarks//benchmark.json`. ```json { "metadata": { "skill_name": "pdf", "skill_path": "/path/to/pdf", "executor_model": "claude-sonnet-4-20250514", "analyzer_model": "most-capable-model", "timestamp": "2026-01-15T10:30:00Z", "evals_run": [1, 2, 3], "runs_per_configuration": 3 }, "runs": [ { "eval_id": 1, "eval_name": "Ocean", "configuration": "with_skill", "run_number": 1, "result": { "pass_rate": 0.85, "passed": 6, "failed": 1, "total": 7, "time_seconds": 42.5, "tokens": 3800, "tool_calls": 18, "errors": 0 }, "expectations": [{ "text": "...", "passed": true, "evidence": "..." }], "notes": ["Used 2023 data, may be stale", "Fell back to text overlay for non-fillable fields"] } ], "run_summary": { "with_skill": { "pass_rate": { "mean": 0.85, "stddev": 0.05, "min": 0.8, "max": 0.9 }, "time_seconds": { "mean": 45.0, "stddev": 12.0, "min": 32.0, "max": 58.0 }, "tokens": { "mean": 3800, "stddev": 400, "min": 3200, "max": 4100 } }, "without_skill": { "pass_rate": { "mean": 0.35, "stddev": 0.08, "min": 0.28, "max": 0.45 }, "time_seconds": { "mean": 32.0, "stddev": 8.0, "min": 24.0, "max": 42.0 }, "tokens": { "mean": 2100, "stddev": 300, "min": 1800, "max": 2500 } }, "delta": { "pass_rate": "+0.50", "time_seconds": "+13.0", "tokens": "+1700" } }, "notes": [ "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value", "Eval 3 shows high variance (50% ± 40%) - may be flaky or model-dependent", "Without-skill runs consistently fail on table extraction expectations", "Skill adds 13s average execution time but improves pass rate by 50%" ] } ``` **Fields:** - `metadata`: Information about the benchmark run - `skill_name`: Name of the skill - `timestamp`: When the benchmark was run - `evals_run`: List of eval names or IDs - `runs_per_configuration`: Number of runs per config (e.g. 3) - `runs[]`: Individual run results - `eval_id`: Numeric eval identifier - `eval_name`: Human-readable eval name (used as section header in the viewer) - `configuration`: Must be `"with_skill"` or `"without_skill"` (the viewer uses this exact string for grouping and color coding) - `run_number`: Integer run number (1, 2, 3...) - `result`: Nested object with `pass_rate`, `passed`, `total`, `time_seconds`, `tokens`, `errors` - `run_summary`: Statistical aggregates per configuration - `with_skill` / `without_skill`: Each contains `pass_rate`, `time_seconds`, `tokens` objects with `mean` and `stddev` fields - `delta`: Difference strings like `"+0.50"`, `"+13.0"`, `"+1700"` - `notes`: Freeform observations from the analyzer **Important:** The viewer reads these field names exactly. Using `config` instead of `configuration`, or putting `pass_rate` at the top level of a run instead of nested under `result`, will cause the viewer to show empty/zero values. Always reference this schema when generating benchmark.json manually. --- ## comparison.json Output from blind comparator. Located at `/comparison-N.json`. ```json { "winner": "A", "reasoning": "Output A provides a complete solution with proper formatting and all required fields. Output B is missing the date field and has formatting inconsistencies.", "rubric": { "A": { "content": { "correctness": 5, "completeness": 5, "accuracy": 4 }, "structure": { "organization": 4, "formatting": 5, "usability": 4 }, "content_score": 4.7, "structure_score": 4.3, "overall_score": 9.0 }, "B": { "content": { "correctness": 3, "completeness": 2, "accuracy": 3 }, "structure": { "organization": 3, "formatting": 2, "usability": 3 }, "content_score": 2.7, "structure_score": 2.7, "overall_score": 5.4 } }, "output_quality": { "A": { "score": 9, "strengths": ["Complete solution", "Well-formatted", "All fields present"], "weaknesses": ["Minor style inconsistency in header"] }, "B": { "score": 5, "strengths": ["Readable output", "Correct basic structure"], "weaknesses": ["Missing date field", "Formatting inconsistencies", "Partial data extraction"] } }, "expectation_results": { "A": { "passed": 4, "total": 5, "pass_rate": 0.8, "details": [{ "text": "Output includes name", "passed": true }] }, "B": { "passed": 3, "total": 5, "pass_rate": 0.6, "details": [{ "text": "Output includes name", "passed": true }] } } } ``` --- ## analysis.json Output from post-hoc analyzer. Located at `/analysis.json`. ```json { "comparison_summary": { "winner": "A", "winner_skill": "path/to/winner/skill", "loser_skill": "path/to/loser/skill", "comparator_reasoning": "Brief summary of why comparator chose winner" }, "winner_strengths": [ "Clear step-by-step instructions for handling multi-page documents", "Included validation script that caught formatting errors" ], "loser_weaknesses": [ "Vague instruction 'process the document appropriately' led to inconsistent behavior", "No script for validation, agent had to improvise" ], "instruction_following": { "winner": { "score": 9, "issues": ["Minor: skipped optional logging step"] }, "loser": { "score": 6, "issues": [ "Did not use the skill's formatting template", "Invented own approach instead of following step 3" ] } }, "improvement_suggestions": [ { "priority": "high", "category": "instructions", "suggestion": "Replace 'process the document appropriately' with explicit steps", "expected_impact": "Would eliminate ambiguity that caused inconsistent behavior" } ], "transcript_insights": { "winner_execution_pattern": "Read skill -> Followed 5-step process -> Used validation script", "loser_execution_pattern": "Read skill -> Unclear on approach -> Tried 3 different methods" } } ``` ================================================ FILE: .agents/skills/skill-creator/scripts/__init__.py ================================================ ================================================ FILE: .agents/skills/skill-creator/scripts/aggregate_benchmark.py ================================================ #!/usr/bin/env python3 """ Aggregate individual run results into benchmark summary statistics. Reads grading.json files from run directories and produces: - run_summary with mean, stddev, min, max for each metric - delta between with_skill and without_skill configurations Usage: python aggregate_benchmark.py Example: python aggregate_benchmark.py benchmarks/2026-01-15T10-30-00/ The script supports two directory layouts: Workspace layout (from skill-creator iterations): / └── eval-N/ ├── with_skill/ │ ├── run-1/grading.json │ └── run-2/grading.json └── without_skill/ ├── run-1/grading.json └── run-2/grading.json Legacy layout (with runs/ subdirectory): / └── runs/ └── eval-N/ ├── with_skill/ │ └── run-1/grading.json └── without_skill/ └── run-1/grading.json """ import argparse import json import math import sys from datetime import datetime, timezone from pathlib import Path def calculate_stats(values: list[float]) -> dict: """Calculate mean, stddev, min, max for a list of values.""" if not values: return {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0} n = len(values) mean = sum(values) / n if n > 1: variance = sum((x - mean) ** 2 for x in values) / (n - 1) stddev = math.sqrt(variance) else: stddev = 0.0 return { "mean": round(mean, 4), "stddev": round(stddev, 4), "min": round(min(values), 4), "max": round(max(values), 4) } def load_run_results(benchmark_dir: Path) -> dict: """ Load all run results from a benchmark directory. Returns dict keyed by config name (e.g. "with_skill"/"without_skill", or "new_skill"/"old_skill"), each containing a list of run results. """ # Support both layouts: eval dirs directly under benchmark_dir, or under runs/ runs_dir = benchmark_dir / "runs" if runs_dir.exists(): search_dir = runs_dir elif list(benchmark_dir.glob("eval-*")): search_dir = benchmark_dir else: print(f"No eval directories found in {benchmark_dir} or {benchmark_dir / 'runs'}") return {} results: dict[str, list] = {} for eval_idx, eval_dir in enumerate(sorted(search_dir.glob("eval-*"))): metadata_path = eval_dir / "eval_metadata.json" if metadata_path.exists(): try: with open(metadata_path) as mf: eval_id = json.load(mf).get("eval_id", eval_idx) except (json.JSONDecodeError, OSError): eval_id = eval_idx else: try: eval_id = int(eval_dir.name.split("-")[1]) except ValueError: eval_id = eval_idx # Discover config directories dynamically rather than hardcoding names for config_dir in sorted(eval_dir.iterdir()): if not config_dir.is_dir(): continue # Skip non-config directories (inputs, outputs, etc.) if not list(config_dir.glob("run-*")): continue config = config_dir.name if config not in results: results[config] = [] for run_dir in sorted(config_dir.glob("run-*")): run_number = int(run_dir.name.split("-")[1]) grading_file = run_dir / "grading.json" if not grading_file.exists(): print(f"Warning: grading.json not found in {run_dir}") continue try: with open(grading_file) as f: grading = json.load(f) except json.JSONDecodeError as e: print(f"Warning: Invalid JSON in {grading_file}: {e}") continue # Extract metrics result = { "eval_id": eval_id, "run_number": run_number, "pass_rate": grading.get("summary", {}).get("pass_rate", 0.0), "passed": grading.get("summary", {}).get("passed", 0), "failed": grading.get("summary", {}).get("failed", 0), "total": grading.get("summary", {}).get("total", 0), } # Extract timing — check grading.json first, then sibling timing.json timing = grading.get("timing", {}) result["time_seconds"] = timing.get("total_duration_seconds", 0.0) timing_file = run_dir / "timing.json" if result["time_seconds"] == 0.0 and timing_file.exists(): try: with open(timing_file) as tf: timing_data = json.load(tf) result["time_seconds"] = timing_data.get("total_duration_seconds", 0.0) result["tokens"] = timing_data.get("total_tokens", 0) except json.JSONDecodeError: pass # Extract metrics if available metrics = grading.get("execution_metrics", {}) result["tool_calls"] = metrics.get("total_tool_calls", 0) if not result.get("tokens"): result["tokens"] = metrics.get("output_chars", 0) result["errors"] = metrics.get("errors_encountered", 0) # Extract expectations — viewer requires fields: text, passed, evidence raw_expectations = grading.get("expectations", []) for exp in raw_expectations: if "text" not in exp or "passed" not in exp: print(f"Warning: expectation in {grading_file} missing required fields (text, passed, evidence): {exp}") result["expectations"] = raw_expectations # Extract notes from user_notes_summary notes_summary = grading.get("user_notes_summary", {}) notes = [] notes.extend(notes_summary.get("uncertainties", [])) notes.extend(notes_summary.get("needs_review", [])) notes.extend(notes_summary.get("workarounds", [])) result["notes"] = notes results[config].append(result) return results def aggregate_results(results: dict) -> dict: """ Aggregate run results into summary statistics. Returns run_summary with stats for each configuration and delta. """ run_summary = {} configs = list(results.keys()) for config in configs: runs = results.get(config, []) if not runs: run_summary[config] = { "pass_rate": {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0}, "time_seconds": {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0}, "tokens": {"mean": 0, "stddev": 0, "min": 0, "max": 0} } continue pass_rates = [r["pass_rate"] for r in runs] times = [r["time_seconds"] for r in runs] tokens = [r.get("tokens", 0) for r in runs] run_summary[config] = { "pass_rate": calculate_stats(pass_rates), "time_seconds": calculate_stats(times), "tokens": calculate_stats(tokens) } # Calculate delta between the first two configs (if two exist) if len(configs) >= 2: primary = run_summary.get(configs[0], {}) baseline = run_summary.get(configs[1], {}) else: primary = run_summary.get(configs[0], {}) if configs else {} baseline = {} delta_pass_rate = primary.get("pass_rate", {}).get("mean", 0) - baseline.get("pass_rate", {}).get("mean", 0) delta_time = primary.get("time_seconds", {}).get("mean", 0) - baseline.get("time_seconds", {}).get("mean", 0) delta_tokens = primary.get("tokens", {}).get("mean", 0) - baseline.get("tokens", {}).get("mean", 0) run_summary["delta"] = { "pass_rate": f"{delta_pass_rate:+.2f}", "time_seconds": f"{delta_time:+.1f}", "tokens": f"{delta_tokens:+.0f}" } return run_summary def generate_benchmark(benchmark_dir: Path, skill_name: str = "", skill_path: str = "") -> dict: """ Generate complete benchmark.json from run results. """ results = load_run_results(benchmark_dir) run_summary = aggregate_results(results) # Build runs array for benchmark.json runs = [] for config in results: for result in results[config]: runs.append({ "eval_id": result["eval_id"], "configuration": config, "run_number": result["run_number"], "result": { "pass_rate": result["pass_rate"], "passed": result["passed"], "failed": result["failed"], "total": result["total"], "time_seconds": result["time_seconds"], "tokens": result.get("tokens", 0), "tool_calls": result.get("tool_calls", 0), "errors": result.get("errors", 0) }, "expectations": result["expectations"], "notes": result["notes"] }) # Determine eval IDs from results eval_ids = sorted(set( r["eval_id"] for config in results.values() for r in config )) benchmark = { "metadata": { "skill_name": skill_name or "", "skill_path": skill_path or "", "executor_model": "", "analyzer_model": "", "timestamp": datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%SZ"), "evals_run": eval_ids, "runs_per_configuration": 3 }, "runs": runs, "run_summary": run_summary, "notes": [] # To be filled by analyzer } return benchmark def generate_markdown(benchmark: dict) -> str: """Generate human-readable benchmark.md from benchmark data.""" metadata = benchmark["metadata"] run_summary = benchmark["run_summary"] # Determine config names (excluding "delta") configs = [k for k in run_summary if k != "delta"] config_a = configs[0] if len(configs) >= 1 else "config_a" config_b = configs[1] if len(configs) >= 2 else "config_b" label_a = config_a.replace("_", " ").title() label_b = config_b.replace("_", " ").title() lines = [ f"# Skill Benchmark: {metadata['skill_name']}", "", f"**Model**: {metadata['executor_model']}", f"**Date**: {metadata['timestamp']}", f"**Evals**: {', '.join(map(str, metadata['evals_run']))} ({metadata['runs_per_configuration']} runs each per configuration)", "", "## Summary", "", f"| Metric | {label_a} | {label_b} | Delta |", "|--------|------------|---------------|-------|", ] a_summary = run_summary.get(config_a, {}) b_summary = run_summary.get(config_b, {}) delta = run_summary.get("delta", {}) # Format pass rate a_pr = a_summary.get("pass_rate", {}) b_pr = b_summary.get("pass_rate", {}) lines.append(f"| Pass Rate | {a_pr.get('mean', 0)*100:.0f}% ± {a_pr.get('stddev', 0)*100:.0f}% | {b_pr.get('mean', 0)*100:.0f}% ± {b_pr.get('stddev', 0)*100:.0f}% | {delta.get('pass_rate', '—')} |") # Format time a_time = a_summary.get("time_seconds", {}) b_time = b_summary.get("time_seconds", {}) lines.append(f"| Time | {a_time.get('mean', 0):.1f}s ± {a_time.get('stddev', 0):.1f}s | {b_time.get('mean', 0):.1f}s ± {b_time.get('stddev', 0):.1f}s | {delta.get('time_seconds', '—')}s |") # Format tokens a_tokens = a_summary.get("tokens", {}) b_tokens = b_summary.get("tokens", {}) lines.append(f"| Tokens | {a_tokens.get('mean', 0):.0f} ± {a_tokens.get('stddev', 0):.0f} | {b_tokens.get('mean', 0):.0f} ± {b_tokens.get('stddev', 0):.0f} | {delta.get('tokens', '—')} |") # Notes section if benchmark.get("notes"): lines.extend([ "", "## Notes", "" ]) for note in benchmark["notes"]: lines.append(f"- {note}") return "\n".join(lines) def main(): parser = argparse.ArgumentParser( description="Aggregate benchmark run results into summary statistics" ) parser.add_argument( "benchmark_dir", type=Path, help="Path to the benchmark directory" ) parser.add_argument( "--skill-name", default="", help="Name of the skill being benchmarked" ) parser.add_argument( "--skill-path", default="", help="Path to the skill being benchmarked" ) parser.add_argument( "--output", "-o", type=Path, help="Output path for benchmark.json (default: /benchmark.json)" ) args = parser.parse_args() if not args.benchmark_dir.exists(): print(f"Directory not found: {args.benchmark_dir}") sys.exit(1) # Generate benchmark benchmark = generate_benchmark(args.benchmark_dir, args.skill_name, args.skill_path) # Determine output paths output_json = args.output or (args.benchmark_dir / "benchmark.json") output_md = output_json.with_suffix(".md") # Write benchmark.json with open(output_json, "w") as f: json.dump(benchmark, f, indent=2) print(f"Generated: {output_json}") # Write benchmark.md markdown = generate_markdown(benchmark) with open(output_md, "w") as f: f.write(markdown) print(f"Generated: {output_md}") # Print summary run_summary = benchmark["run_summary"] configs = [k for k in run_summary if k != "delta"] delta = run_summary.get("delta", {}) print(f"\nSummary:") for config in configs: pr = run_summary[config]["pass_rate"]["mean"] label = config.replace("_", " ").title() print(f" {label}: {pr*100:.1f}% pass rate") print(f" Delta: {delta.get('pass_rate', '—')}") if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/generate_report.py ================================================ #!/usr/bin/env python3 """Generate an HTML report from run_loop.py output. Takes the JSON output from run_loop.py and generates a visual HTML report showing each description attempt with check/x for each test case. Distinguishes between train and test queries. """ import argparse import html import json import sys from pathlib import Path def generate_html(data: dict, auto_refresh: bool = False, skill_name: str = "") -> str: """Generate HTML report from loop output data. If auto_refresh is True, adds a meta refresh tag.""" history = data.get("history", []) holdout = data.get("holdout", 0) title_prefix = html.escape(skill_name + " \u2014 ") if skill_name else "" # Get all unique queries from train and test sets, with should_trigger info train_queries: list[dict] = [] test_queries: list[dict] = [] if history: for r in history[0].get("train_results", history[0].get("results", [])): train_queries.append({"query": r["query"], "should_trigger": r.get("should_trigger", True)}) if history[0].get("test_results"): for r in history[0].get("test_results", []): test_queries.append({"query": r["query"], "should_trigger": r.get("should_trigger", True)}) refresh_tag = ' \n' if auto_refresh else "" html_parts = [""" """ + refresh_tag + """ """ + title_prefix + """Skill Description Optimization

""" + title_prefix + """Skill Description Optimization

Optimizing your skill's description. This page updates automatically as Claude tests different versions of your skill's description. Each row is an iteration — a new description attempt. The columns show test queries: green checkmarks mean the skill triggered correctly (or correctly didn't trigger), red crosses mean it got it wrong. The "Train" score shows performance on queries used to improve the description; the "Test" score shows performance on held-out queries the optimizer hasn't seen. When it's done, Claude will apply the best-performing description to your skill.
"""] # Summary section best_test_score = data.get('best_test_score') best_train_score = data.get('best_train_score') html_parts.append(f"""

Original: {html.escape(data.get('original_description', 'N/A'))}

Best: {html.escape(data.get('best_description', 'N/A'))}

Best Score: {data.get('best_score', 'N/A')} {'(test)' if best_test_score else '(train)'}

Iterations: {data.get('iterations_run', 0)} | Train: {data.get('train_size', '?')} | Test: {data.get('test_size', '?')}

""") # Legend html_parts.append("""
Query columns: Should trigger Should NOT trigger Train Test
""") # Table header html_parts.append("""
""") # Add column headers for train queries for qinfo in train_queries: polarity = "positive-col" if qinfo["should_trigger"] else "negative-col" html_parts.append(f' \n') # Add column headers for test queries (different color) for qinfo in test_queries: polarity = "positive-col" if qinfo["should_trigger"] else "negative-col" html_parts.append(f' \n') html_parts.append(""" """) # Find best iteration for highlighting if test_queries: best_iter = max(history, key=lambda h: h.get("test_passed") or 0).get("iteration") else: best_iter = max(history, key=lambda h: h.get("train_passed", h.get("passed", 0))).get("iteration") # Add rows for each iteration for h in history: iteration = h.get("iteration", "?") train_passed = h.get("train_passed", h.get("passed", 0)) train_total = h.get("train_total", h.get("total", 0)) test_passed = h.get("test_passed") test_total = h.get("test_total") description = h.get("description", "") train_results = h.get("train_results", h.get("results", [])) test_results = h.get("test_results", []) # Create lookups for results by query train_by_query = {r["query"]: r for r in train_results} test_by_query = {r["query"]: r for r in test_results} if test_results else {} # Compute aggregate correct/total runs across all retries def aggregate_runs(results: list[dict]) -> tuple[int, int]: correct = 0 total = 0 for r in results: runs = r.get("runs", 0) triggers = r.get("triggers", 0) total += runs if r.get("should_trigger", True): correct += triggers else: correct += runs - triggers return correct, total train_correct, train_runs = aggregate_runs(train_results) test_correct, test_runs = aggregate_runs(test_results) # Determine score classes def score_class(correct: int, total: int) -> str: if total > 0: ratio = correct / total if ratio >= 0.8: return "score-good" elif ratio >= 0.5: return "score-ok" return "score-bad" train_class = score_class(train_correct, train_runs) test_class = score_class(test_correct, test_runs) row_class = "best-row" if iteration == best_iter else "" html_parts.append(f""" """) # Add result for each train query for qinfo in train_queries: r = train_by_query.get(qinfo["query"], {}) did_pass = r.get("pass", False) triggers = r.get("triggers", 0) runs = r.get("runs", 0) icon = "✓" if did_pass else "✗" css_class = "pass" if did_pass else "fail" html_parts.append(f' \n') # Add result for each test query (with different background) for qinfo in test_queries: r = test_by_query.get(qinfo["query"], {}) did_pass = r.get("pass", False) triggers = r.get("triggers", 0) runs = r.get("runs", 0) icon = "✓" if did_pass else "✗" css_class = "pass" if did_pass else "fail" html_parts.append(f' \n') html_parts.append(" \n") html_parts.append("""
Iter Train Test Description{html.escape(qinfo["query"])}{html.escape(qinfo["query"])}
{iteration} {train_correct}/{train_runs} {test_correct}/{test_runs} {html.escape(description)}{icon}{triggers}/{runs}{icon}{triggers}/{runs}
""") html_parts.append(""" """) return "".join(html_parts) def main(): parser = argparse.ArgumentParser(description="Generate HTML report from run_loop output") parser.add_argument("input", help="Path to JSON output from run_loop.py (or - for stdin)") parser.add_argument("-o", "--output", default=None, help="Output HTML file (default: stdout)") parser.add_argument("--skill-name", default="", help="Skill name to include in the report title") args = parser.parse_args() if args.input == "-": data = json.load(sys.stdin) else: data = json.loads(Path(args.input).read_text()) html_output = generate_html(data, skill_name=args.skill_name) if args.output: Path(args.output).write_text(html_output) print(f"Report written to {args.output}", file=sys.stderr) else: print(html_output) if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/improve_description.py ================================================ #!/usr/bin/env python3 """Improve a skill description based on eval results. Takes eval results (from run_eval.py) and generates an improved description by calling `claude -p` as a subprocess (same auth pattern as run_eval.py — uses the session's Claude Code auth, no separate ANTHROPIC_API_KEY needed). """ import argparse import json import os import re import subprocess import sys from pathlib import Path from scripts.utils import parse_skill_md def _call_claude(prompt: str, model: str | None, timeout: int = 300) -> str: """Run `claude -p` with the prompt on stdin and return the text response. Prompt goes over stdin (not argv) because it embeds the full SKILL.md body and can easily exceed comfortable argv length. """ cmd = ["claude", "-p", "--output-format", "text"] if model: cmd.extend(["--model", model]) # Remove CLAUDECODE env var to allow nesting claude -p inside a # Claude Code session. The guard is for interactive terminal conflicts; # programmatic subprocess usage is safe. Same pattern as run_eval.py. env = {k: v for k, v in os.environ.items() if k != "CLAUDECODE"} result = subprocess.run( cmd, input=prompt, capture_output=True, text=True, env=env, timeout=timeout, ) if result.returncode != 0: raise RuntimeError( f"claude -p exited {result.returncode}\nstderr: {result.stderr}" ) return result.stdout def improve_description( skill_name: str, skill_content: str, current_description: str, eval_results: dict, history: list[dict], model: str, test_results: dict | None = None, log_dir: Path | None = None, iteration: int | None = None, ) -> str: """Call Claude to improve the description based on eval results.""" failed_triggers = [ r for r in eval_results["results"] if r["should_trigger"] and not r["pass"] ] false_triggers = [ r for r in eval_results["results"] if not r["should_trigger"] and not r["pass"] ] # Build scores summary train_score = f"{eval_results['summary']['passed']}/{eval_results['summary']['total']}" if test_results: test_score = f"{test_results['summary']['passed']}/{test_results['summary']['total']}" scores_summary = f"Train: {train_score}, Test: {test_score}" else: scores_summary = f"Train: {train_score}" prompt = f"""You are optimizing a skill description for a Claude Code skill called "{skill_name}". A "skill" is sort of like a prompt, but with progressive disclosure -- there's a title and description that Claude sees when deciding whether to use the skill, and then if it does use the skill, it reads the .md file which has lots more details and potentially links to other resources in the skill folder like helper files and scripts and additional documentation or examples. The description appears in Claude's "available_skills" list. When a user sends a query, Claude decides whether to invoke the skill based solely on the title and on this description. Your goal is to write a description that triggers for relevant queries, and doesn't trigger for irrelevant ones. Here's the current description: "{current_description}" Current scores ({scores_summary}): """ if failed_triggers: prompt += "FAILED TO TRIGGER (should have triggered but didn't):\n" for r in failed_triggers: prompt += f' - "{r["query"]}" (triggered {r["triggers"]}/{r["runs"]} times)\n' prompt += "\n" if false_triggers: prompt += "FALSE TRIGGERS (triggered but shouldn't have):\n" for r in false_triggers: prompt += f' - "{r["query"]}" (triggered {r["triggers"]}/{r["runs"]} times)\n' prompt += "\n" if history: prompt += "PREVIOUS ATTEMPTS (do NOT repeat these — try something structurally different):\n\n" for h in history: train_s = f"{h.get('train_passed', h.get('passed', 0))}/{h.get('train_total', h.get('total', 0))}" test_s = f"{h.get('test_passed', '?')}/{h.get('test_total', '?')}" if h.get('test_passed') is not None else None score_str = f"train={train_s}" + (f", test={test_s}" if test_s else "") prompt += f'\n' prompt += f'Description: "{h["description"]}"\n' if "results" in h: prompt += "Train results:\n" for r in h["results"]: status = "PASS" if r["pass"] else "FAIL" prompt += f' [{status}] "{r["query"][:80]}" (triggered {r["triggers"]}/{r["runs"]})\n' if h.get("note"): prompt += f'Note: {h["note"]}\n' prompt += "\n\n" prompt += f""" Skill content (for context on what the skill does): {skill_content} Based on the failures, write a new and improved description that is more likely to trigger correctly. When I say "based on the failures", it's a bit of a tricky line to walk because we don't want to overfit to the specific cases you're seeing. So what I DON'T want you to do is produce an ever-expanding list of specific queries that this skill should or shouldn't trigger for. Instead, try to generalize from the failures to broader categories of user intent and situations where this skill would be useful or not useful. The reason for this is twofold: 1. Avoid overfitting 2. The list might get loooong and it's injected into ALL queries and there might be a lot of skills, so we don't want to blow too much space on any given description. Concretely, your description should not be more than about 100-200 words, even if that comes at the cost of accuracy. There is a hard limit of 1024 characters — descriptions over that will be truncated, so stay comfortably under it. Here are some tips that we've found to work well in writing these descriptions: - The skill should be phrased in the imperative -- "Use this skill for" rather than "this skill does" - The skill description should focus on the user's intent, what they are trying to achieve, vs. the implementation details of how the skill works. - The description competes with other skills for Claude's attention — make it distinctive and immediately recognizable. - If you're getting lots of failures after repeated attempts, change things up. Try different sentence structures or wordings. I'd encourage you to be creative and mix up the style in different iterations since you'll have multiple opportunities to try different approaches and we'll just grab the highest-scoring one at the end. Please respond with only the new description text in tags, nothing else.""" text = _call_claude(prompt, model) match = re.search(r"(.*?)", text, re.DOTALL) description = match.group(1).strip().strip('"') if match else text.strip().strip('"') transcript: dict = { "iteration": iteration, "prompt": prompt, "response": text, "parsed_description": description, "char_count": len(description), "over_limit": len(description) > 1024, } # Safety net: the prompt already states the 1024-char hard limit, but if # the model blew past it anyway, make one fresh single-turn call that # quotes the too-long version and asks for a shorter rewrite. (The old # SDK path did this as a true multi-turn; `claude -p` is one-shot, so we # inline the prior output into the new prompt instead.) if len(description) > 1024: shorten_prompt = ( f"{prompt}\n\n" f"---\n\n" f"A previous attempt produced this description, which at " f"{len(description)} characters is over the 1024-character hard limit:\n\n" f'"{description}"\n\n' f"Rewrite it to be under 1024 characters while keeping the most " f"important trigger words and intent coverage. Respond with only " f"the new description in tags." ) shorten_text = _call_claude(shorten_prompt, model) match = re.search(r"(.*?)", shorten_text, re.DOTALL) shortened = match.group(1).strip().strip('"') if match else shorten_text.strip().strip('"') transcript["rewrite_prompt"] = shorten_prompt transcript["rewrite_response"] = shorten_text transcript["rewrite_description"] = shortened transcript["rewrite_char_count"] = len(shortened) description = shortened transcript["final_description"] = description if log_dir: log_dir.mkdir(parents=True, exist_ok=True) log_file = log_dir / f"improve_iter_{iteration or 'unknown'}.json" log_file.write_text(json.dumps(transcript, indent=2)) return description def main(): parser = argparse.ArgumentParser(description="Improve a skill description based on eval results") parser.add_argument("--eval-results", required=True, help="Path to eval results JSON (from run_eval.py)") parser.add_argument("--skill-path", required=True, help="Path to skill directory") parser.add_argument("--history", default=None, help="Path to history JSON (previous attempts)") parser.add_argument("--model", required=True, help="Model for improvement") parser.add_argument("--verbose", action="store_true", help="Print thinking to stderr") args = parser.parse_args() skill_path = Path(args.skill_path) if not (skill_path / "SKILL.md").exists(): print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) sys.exit(1) eval_results = json.loads(Path(args.eval_results).read_text()) history = [] if args.history: history = json.loads(Path(args.history).read_text()) name, _, content = parse_skill_md(skill_path) current_description = eval_results["description"] if args.verbose: print(f"Current: {current_description}", file=sys.stderr) print(f"Score: {eval_results['summary']['passed']}/{eval_results['summary']['total']}", file=sys.stderr) new_description = improve_description( skill_name=name, skill_content=content, current_description=current_description, eval_results=eval_results, history=history, model=args.model, ) if args.verbose: print(f"Improved: {new_description}", file=sys.stderr) # Output as JSON with both the new description and updated history output = { "description": new_description, "history": history + [{ "description": current_description, "passed": eval_results["summary"]["passed"], "failed": eval_results["summary"]["failed"], "total": eval_results["summary"]["total"], "results": eval_results["results"], }], } print(json.dumps(output, indent=2)) if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/package_skill.py ================================================ #!/usr/bin/env python3 """ Skill Packager - Creates a distributable .skill file of a skill folder Usage: python utils/package_skill.py [output-directory] Example: python utils/package_skill.py skills/public/my-skill python utils/package_skill.py skills/public/my-skill ./dist """ import fnmatch import sys import zipfile from pathlib import Path from scripts.quick_validate import validate_skill # Patterns to exclude when packaging skills. EXCLUDE_DIRS = {"__pycache__", "node_modules"} EXCLUDE_GLOBS = {"*.pyc"} EXCLUDE_FILES = {".DS_Store"} # Directories excluded only at the skill root (not when nested deeper). ROOT_EXCLUDE_DIRS = {"evals"} def should_exclude(rel_path: Path) -> bool: """Check if a path should be excluded from packaging.""" parts = rel_path.parts if any(part in EXCLUDE_DIRS for part in parts): return True # rel_path is relative to skill_path.parent, so parts[0] is the skill # folder name and parts[1] (if present) is the first subdir. if len(parts) > 1 and parts[1] in ROOT_EXCLUDE_DIRS: return True name = rel_path.name if name in EXCLUDE_FILES: return True return any(fnmatch.fnmatch(name, pat) for pat in EXCLUDE_GLOBS) def package_skill(skill_path, output_dir=None): """ Package a skill folder into a .skill file. Args: skill_path: Path to the skill folder output_dir: Optional output directory for the .skill file (defaults to current directory) Returns: Path to the created .skill file, or None if error """ skill_path = Path(skill_path).resolve() # Validate skill folder exists if not skill_path.exists(): print(f"❌ Error: Skill folder not found: {skill_path}") return None if not skill_path.is_dir(): print(f"❌ Error: Path is not a directory: {skill_path}") return None # Validate SKILL.md exists skill_md = skill_path / "SKILL.md" if not skill_md.exists(): print(f"❌ Error: SKILL.md not found in {skill_path}") return None # Run validation before packaging print("🔍 Validating skill...") valid, message = validate_skill(skill_path) if not valid: print(f"❌ Validation failed: {message}") print(" Please fix the validation errors before packaging.") return None print(f"✅ {message}\n") # Determine output location skill_name = skill_path.name if output_dir: output_path = Path(output_dir).resolve() output_path.mkdir(parents=True, exist_ok=True) else: output_path = Path.cwd() skill_filename = output_path / f"{skill_name}.skill" # Create the .skill file (zip format) try: with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf: # Walk through the skill directory, excluding build artifacts for file_path in skill_path.rglob('*'): if not file_path.is_file(): continue arcname = file_path.relative_to(skill_path.parent) if should_exclude(arcname): print(f" Skipped: {arcname}") continue zipf.write(file_path, arcname) print(f" Added: {arcname}") print(f"\n✅ Successfully packaged skill to: {skill_filename}") return skill_filename except Exception as e: print(f"❌ Error creating .skill file: {e}") return None def main(): if len(sys.argv) < 2: print("Usage: python utils/package_skill.py [output-directory]") print("\nExample:") print(" python utils/package_skill.py skills/public/my-skill") print(" python utils/package_skill.py skills/public/my-skill ./dist") sys.exit(1) skill_path = sys.argv[1] output_dir = sys.argv[2] if len(sys.argv) > 2 else None print(f"📦 Packaging skill: {skill_path}") if output_dir: print(f" Output directory: {output_dir}") print() result = package_skill(skill_path, output_dir) if result: sys.exit(0) else: sys.exit(1) if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/quick_validate.py ================================================ #!/usr/bin/env python3 """ Quick validation script for skills - minimal version """ import sys import os import re import yaml from pathlib import Path def validate_skill(skill_path): """Basic validation of a skill""" skill_path = Path(skill_path) # Check SKILL.md exists skill_md = skill_path / 'SKILL.md' if not skill_md.exists(): return False, "SKILL.md not found" # Read and validate frontmatter content = skill_md.read_text() if not content.startswith('---'): return False, "No YAML frontmatter found" # Extract frontmatter match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL) if not match: return False, "Invalid frontmatter format" frontmatter_text = match.group(1) # Parse YAML frontmatter try: frontmatter = yaml.safe_load(frontmatter_text) if not isinstance(frontmatter, dict): return False, "Frontmatter must be a YAML dictionary" except yaml.YAMLError as e: return False, f"Invalid YAML in frontmatter: {e}" # Define allowed properties ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata', 'compatibility'} # Check for unexpected properties (excluding nested keys under metadata) unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES if unexpected_keys: return False, ( f"Unexpected key(s) in SKILL.md frontmatter: {', '.join(sorted(unexpected_keys))}. " f"Allowed properties are: {', '.join(sorted(ALLOWED_PROPERTIES))}" ) # Check required fields if 'name' not in frontmatter: return False, "Missing 'name' in frontmatter" if 'description' not in frontmatter: return False, "Missing 'description' in frontmatter" # Extract name for validation name = frontmatter.get('name', '') if not isinstance(name, str): return False, f"Name must be a string, got {type(name).__name__}" name = name.strip() if name: # Check naming convention (kebab-case: lowercase with hyphens) if not re.match(r'^[a-z0-9-]+$', name): return False, f"Name '{name}' should be kebab-case (lowercase letters, digits, and hyphens only)" if name.startswith('-') or name.endswith('-') or '--' in name: return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens" # Check name length (max 64 characters per spec) if len(name) > 64: return False, f"Name is too long ({len(name)} characters). Maximum is 64 characters." # Extract and validate description description = frontmatter.get('description', '') if not isinstance(description, str): return False, f"Description must be a string, got {type(description).__name__}" description = description.strip() if description: # Check for angle brackets if '<' in description or '>' in description: return False, "Description cannot contain angle brackets (< or >)" # Check description length (max 1024 characters per spec) if len(description) > 1024: return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters." # Validate compatibility field if present (optional) compatibility = frontmatter.get('compatibility', '') if compatibility: if not isinstance(compatibility, str): return False, f"Compatibility must be a string, got {type(compatibility).__name__}" if len(compatibility) > 500: return False, f"Compatibility is too long ({len(compatibility)} characters). Maximum is 500 characters." return True, "Skill is valid!" if __name__ == "__main__": if len(sys.argv) != 2: print("Usage: python quick_validate.py ") sys.exit(1) valid, message = validate_skill(sys.argv[1]) print(message) sys.exit(0 if valid else 1) ================================================ FILE: .agents/skills/skill-creator/scripts/run_eval.py ================================================ #!/usr/bin/env python3 """Run trigger evaluation for a skill description. Tests whether a skill's description causes Claude to trigger (read the skill) for a set of queries. Outputs results as JSON. """ import argparse import json import os import select import subprocess import sys import time import uuid from concurrent.futures import ProcessPoolExecutor, as_completed from pathlib import Path from scripts.utils import parse_skill_md def find_project_root() -> Path: """Find the project root by walking up from cwd looking for .claude/. Mimics how Claude Code discovers its project root, so the command file we create ends up where claude -p will look for it. """ current = Path.cwd() for parent in [current, *current.parents]: if (parent / ".claude").is_dir(): return parent return current def run_single_query( query: str, skill_name: str, skill_description: str, timeout: int, project_root: str, model: str | None = None, ) -> bool: """Run a single query and return whether the skill was triggered. Creates a command file in .claude/commands/ so it appears in Claude's available_skills list, then runs `claude -p` with the raw query. Uses --include-partial-messages to detect triggering early from stream events (content_block_start) rather than waiting for the full assistant message, which only arrives after tool execution. """ unique_id = uuid.uuid4().hex[:8] clean_name = f"{skill_name}-skill-{unique_id}" project_commands_dir = Path(project_root) / ".claude" / "commands" command_file = project_commands_dir / f"{clean_name}.md" try: project_commands_dir.mkdir(parents=True, exist_ok=True) # Use YAML block scalar to avoid breaking on quotes in description indented_desc = "\n ".join(skill_description.split("\n")) command_content = ( f"---\n" f"description: |\n" f" {indented_desc}\n" f"---\n\n" f"# {skill_name}\n\n" f"This skill handles: {skill_description}\n" ) command_file.write_text(command_content) cmd = [ "claude", "-p", query, "--output-format", "stream-json", "--verbose", "--include-partial-messages", ] if model: cmd.extend(["--model", model]) # Remove CLAUDECODE env var to allow nesting claude -p inside a # Claude Code session. The guard is for interactive terminal conflicts; # programmatic subprocess usage is safe. env = {k: v for k, v in os.environ.items() if k != "CLAUDECODE"} process = subprocess.Popen( cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL, cwd=project_root, env=env, ) triggered = False start_time = time.time() buffer = "" # Track state for stream event detection pending_tool_name = None accumulated_json = "" try: while time.time() - start_time < timeout: if process.poll() is not None: remaining = process.stdout.read() if remaining: buffer += remaining.decode("utf-8", errors="replace") break ready, _, _ = select.select([process.stdout], [], [], 1.0) if not ready: continue chunk = os.read(process.stdout.fileno(), 8192) if not chunk: break buffer += chunk.decode("utf-8", errors="replace") while "\n" in buffer: line, buffer = buffer.split("\n", 1) line = line.strip() if not line: continue try: event = json.loads(line) except json.JSONDecodeError: continue # Early detection via stream events if event.get("type") == "stream_event": se = event.get("event", {}) se_type = se.get("type", "") if se_type == "content_block_start": cb = se.get("content_block", {}) if cb.get("type") == "tool_use": tool_name = cb.get("name", "") if tool_name in ("Skill", "Read"): pending_tool_name = tool_name accumulated_json = "" else: return False elif se_type == "content_block_delta" and pending_tool_name: delta = se.get("delta", {}) if delta.get("type") == "input_json_delta": accumulated_json += delta.get("partial_json", "") if clean_name in accumulated_json: return True elif se_type in ("content_block_stop", "message_stop"): if pending_tool_name: return clean_name in accumulated_json if se_type == "message_stop": return False # Fallback: full assistant message elif event.get("type") == "assistant": message = event.get("message", {}) for content_item in message.get("content", []): if content_item.get("type") != "tool_use": continue tool_name = content_item.get("name", "") tool_input = content_item.get("input", {}) if tool_name == "Skill" and clean_name in tool_input.get("skill", ""): triggered = True elif tool_name == "Read" and clean_name in tool_input.get("file_path", ""): triggered = True return triggered elif event.get("type") == "result": return triggered finally: # Clean up process on any exit path (return, exception, timeout) if process.poll() is None: process.kill() process.wait() return triggered finally: if command_file.exists(): command_file.unlink() def run_eval( eval_set: list[dict], skill_name: str, description: str, num_workers: int, timeout: int, project_root: Path, runs_per_query: int = 1, trigger_threshold: float = 0.5, model: str | None = None, ) -> dict: """Run the full eval set and return results.""" results = [] with ProcessPoolExecutor(max_workers=num_workers) as executor: future_to_info = {} for item in eval_set: for run_idx in range(runs_per_query): future = executor.submit( run_single_query, item["query"], skill_name, description, timeout, str(project_root), model, ) future_to_info[future] = (item, run_idx) query_triggers: dict[str, list[bool]] = {} query_items: dict[str, dict] = {} for future in as_completed(future_to_info): item, _ = future_to_info[future] query = item["query"] query_items[query] = item if query not in query_triggers: query_triggers[query] = [] try: query_triggers[query].append(future.result()) except Exception as e: print(f"Warning: query failed: {e}", file=sys.stderr) query_triggers[query].append(False) for query, triggers in query_triggers.items(): item = query_items[query] trigger_rate = sum(triggers) / len(triggers) should_trigger = item["should_trigger"] if should_trigger: did_pass = trigger_rate >= trigger_threshold else: did_pass = trigger_rate < trigger_threshold results.append({ "query": query, "should_trigger": should_trigger, "trigger_rate": trigger_rate, "triggers": sum(triggers), "runs": len(triggers), "pass": did_pass, }) passed = sum(1 for r in results if r["pass"]) total = len(results) return { "skill_name": skill_name, "description": description, "results": results, "summary": { "total": total, "passed": passed, "failed": total - passed, }, } def main(): parser = argparse.ArgumentParser(description="Run trigger evaluation for a skill description") parser.add_argument("--eval-set", required=True, help="Path to eval set JSON file") parser.add_argument("--skill-path", required=True, help="Path to skill directory") parser.add_argument("--description", default=None, help="Override description to test") parser.add_argument("--num-workers", type=int, default=10, help="Number of parallel workers") parser.add_argument("--timeout", type=int, default=30, help="Timeout per query in seconds") parser.add_argument("--runs-per-query", type=int, default=3, help="Number of runs per query") parser.add_argument("--trigger-threshold", type=float, default=0.5, help="Trigger rate threshold") parser.add_argument("--model", default=None, help="Model to use for claude -p (default: user's configured model)") parser.add_argument("--verbose", action="store_true", help="Print progress to stderr") args = parser.parse_args() eval_set = json.loads(Path(args.eval_set).read_text()) skill_path = Path(args.skill_path) if not (skill_path / "SKILL.md").exists(): print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) sys.exit(1) name, original_description, content = parse_skill_md(skill_path) description = args.description or original_description project_root = find_project_root() if args.verbose: print(f"Evaluating: {description}", file=sys.stderr) output = run_eval( eval_set=eval_set, skill_name=name, description=description, num_workers=args.num_workers, timeout=args.timeout, project_root=project_root, runs_per_query=args.runs_per_query, trigger_threshold=args.trigger_threshold, model=args.model, ) if args.verbose: summary = output["summary"] print(f"Results: {summary['passed']}/{summary['total']} passed", file=sys.stderr) for r in output["results"]: status = "PASS" if r["pass"] else "FAIL" rate_str = f"{r['triggers']}/{r['runs']}" print(f" [{status}] rate={rate_str} expected={r['should_trigger']}: {r['query'][:70]}", file=sys.stderr) print(json.dumps(output, indent=2)) if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/run_loop.py ================================================ #!/usr/bin/env python3 """Run the eval + improve loop until all pass or max iterations reached. Combines run_eval.py and improve_description.py in a loop, tracking history and returning the best description found. Supports train/test split to prevent overfitting. """ import argparse import json import random import sys import tempfile import time import webbrowser from pathlib import Path from scripts.generate_report import generate_html from scripts.improve_description import improve_description from scripts.run_eval import find_project_root, run_eval from scripts.utils import parse_skill_md def split_eval_set(eval_set: list[dict], holdout: float, seed: int = 42) -> tuple[list[dict], list[dict]]: """Split eval set into train and test sets, stratified by should_trigger.""" random.seed(seed) # Separate by should_trigger trigger = [e for e in eval_set if e["should_trigger"]] no_trigger = [e for e in eval_set if not e["should_trigger"]] # Shuffle each group random.shuffle(trigger) random.shuffle(no_trigger) # Calculate split points n_trigger_test = max(1, int(len(trigger) * holdout)) n_no_trigger_test = max(1, int(len(no_trigger) * holdout)) # Split test_set = trigger[:n_trigger_test] + no_trigger[:n_no_trigger_test] train_set = trigger[n_trigger_test:] + no_trigger[n_no_trigger_test:] return train_set, test_set def run_loop( eval_set: list[dict], skill_path: Path, description_override: str | None, num_workers: int, timeout: int, max_iterations: int, runs_per_query: int, trigger_threshold: float, holdout: float, model: str, verbose: bool, live_report_path: Path | None = None, log_dir: Path | None = None, ) -> dict: """Run the eval + improvement loop.""" project_root = find_project_root() name, original_description, content = parse_skill_md(skill_path) current_description = description_override or original_description # Split into train/test if holdout > 0 if holdout > 0: train_set, test_set = split_eval_set(eval_set, holdout) if verbose: print(f"Split: {len(train_set)} train, {len(test_set)} test (holdout={holdout})", file=sys.stderr) else: train_set = eval_set test_set = [] history = [] exit_reason = "unknown" for iteration in range(1, max_iterations + 1): if verbose: print(f"\n{'='*60}", file=sys.stderr) print(f"Iteration {iteration}/{max_iterations}", file=sys.stderr) print(f"Description: {current_description}", file=sys.stderr) print(f"{'='*60}", file=sys.stderr) # Evaluate train + test together in one batch for parallelism all_queries = train_set + test_set t0 = time.time() all_results = run_eval( eval_set=all_queries, skill_name=name, description=current_description, num_workers=num_workers, timeout=timeout, project_root=project_root, runs_per_query=runs_per_query, trigger_threshold=trigger_threshold, model=model, ) eval_elapsed = time.time() - t0 # Split results back into train/test by matching queries train_queries_set = {q["query"] for q in train_set} train_result_list = [r for r in all_results["results"] if r["query"] in train_queries_set] test_result_list = [r for r in all_results["results"] if r["query"] not in train_queries_set] train_passed = sum(1 for r in train_result_list if r["pass"]) train_total = len(train_result_list) train_summary = {"passed": train_passed, "failed": train_total - train_passed, "total": train_total} train_results = {"results": train_result_list, "summary": train_summary} if test_set: test_passed = sum(1 for r in test_result_list if r["pass"]) test_total = len(test_result_list) test_summary = {"passed": test_passed, "failed": test_total - test_passed, "total": test_total} test_results = {"results": test_result_list, "summary": test_summary} else: test_results = None test_summary = None history.append({ "iteration": iteration, "description": current_description, "train_passed": train_summary["passed"], "train_failed": train_summary["failed"], "train_total": train_summary["total"], "train_results": train_results["results"], "test_passed": test_summary["passed"] if test_summary else None, "test_failed": test_summary["failed"] if test_summary else None, "test_total": test_summary["total"] if test_summary else None, "test_results": test_results["results"] if test_results else None, # For backward compat with report generator "passed": train_summary["passed"], "failed": train_summary["failed"], "total": train_summary["total"], "results": train_results["results"], }) # Write live report if path provided if live_report_path: partial_output = { "original_description": original_description, "best_description": current_description, "best_score": "in progress", "iterations_run": len(history), "holdout": holdout, "train_size": len(train_set), "test_size": len(test_set), "history": history, } live_report_path.write_text(generate_html(partial_output, auto_refresh=True, skill_name=name)) if verbose: def print_eval_stats(label, results, elapsed): pos = [r for r in results if r["should_trigger"]] neg = [r for r in results if not r["should_trigger"]] tp = sum(r["triggers"] for r in pos) pos_runs = sum(r["runs"] for r in pos) fn = pos_runs - tp fp = sum(r["triggers"] for r in neg) neg_runs = sum(r["runs"] for r in neg) tn = neg_runs - fp total = tp + tn + fp + fn precision = tp / (tp + fp) if (tp + fp) > 0 else 1.0 recall = tp / (tp + fn) if (tp + fn) > 0 else 1.0 accuracy = (tp + tn) / total if total > 0 else 0.0 print(f"{label}: {tp+tn}/{total} correct, precision={precision:.0%} recall={recall:.0%} accuracy={accuracy:.0%} ({elapsed:.1f}s)", file=sys.stderr) for r in results: status = "PASS" if r["pass"] else "FAIL" rate_str = f"{r['triggers']}/{r['runs']}" print(f" [{status}] rate={rate_str} expected={r['should_trigger']}: {r['query'][:60]}", file=sys.stderr) print_eval_stats("Train", train_results["results"], eval_elapsed) if test_summary: print_eval_stats("Test ", test_results["results"], 0) if train_summary["failed"] == 0: exit_reason = f"all_passed (iteration {iteration})" if verbose: print(f"\nAll train queries passed on iteration {iteration}!", file=sys.stderr) break if iteration == max_iterations: exit_reason = f"max_iterations ({max_iterations})" if verbose: print(f"\nMax iterations reached ({max_iterations}).", file=sys.stderr) break # Improve the description based on train results if verbose: print(f"\nImproving description...", file=sys.stderr) t0 = time.time() # Strip test scores from history so improvement model can't see them blinded_history = [ {k: v for k, v in h.items() if not k.startswith("test_")} for h in history ] new_description = improve_description( skill_name=name, skill_content=content, current_description=current_description, eval_results=train_results, history=blinded_history, model=model, log_dir=log_dir, iteration=iteration, ) improve_elapsed = time.time() - t0 if verbose: print(f"Proposed ({improve_elapsed:.1f}s): {new_description}", file=sys.stderr) current_description = new_description # Find the best iteration by TEST score (or train if no test set) if test_set: best = max(history, key=lambda h: h["test_passed"] or 0) best_score = f"{best['test_passed']}/{best['test_total']}" else: best = max(history, key=lambda h: h["train_passed"]) best_score = f"{best['train_passed']}/{best['train_total']}" if verbose: print(f"\nExit reason: {exit_reason}", file=sys.stderr) print(f"Best score: {best_score} (iteration {best['iteration']})", file=sys.stderr) return { "exit_reason": exit_reason, "original_description": original_description, "best_description": best["description"], "best_score": best_score, "best_train_score": f"{best['train_passed']}/{best['train_total']}", "best_test_score": f"{best['test_passed']}/{best['test_total']}" if test_set else None, "final_description": current_description, "iterations_run": len(history), "holdout": holdout, "train_size": len(train_set), "test_size": len(test_set), "history": history, } def main(): parser = argparse.ArgumentParser(description="Run eval + improve loop") parser.add_argument("--eval-set", required=True, help="Path to eval set JSON file") parser.add_argument("--skill-path", required=True, help="Path to skill directory") parser.add_argument("--description", default=None, help="Override starting description") parser.add_argument("--num-workers", type=int, default=10, help="Number of parallel workers") parser.add_argument("--timeout", type=int, default=30, help="Timeout per query in seconds") parser.add_argument("--max-iterations", type=int, default=5, help="Max improvement iterations") parser.add_argument("--runs-per-query", type=int, default=3, help="Number of runs per query") parser.add_argument("--trigger-threshold", type=float, default=0.5, help="Trigger rate threshold") parser.add_argument("--holdout", type=float, default=0.4, help="Fraction of eval set to hold out for testing (0 to disable)") parser.add_argument("--model", required=True, help="Model for improvement") parser.add_argument("--verbose", action="store_true", help="Print progress to stderr") parser.add_argument("--report", default="auto", help="Generate HTML report at this path (default: 'auto' for temp file, 'none' to disable)") parser.add_argument("--results-dir", default=None, help="Save all outputs (results.json, report.html, log.txt) to a timestamped subdirectory here") args = parser.parse_args() eval_set = json.loads(Path(args.eval_set).read_text()) skill_path = Path(args.skill_path) if not (skill_path / "SKILL.md").exists(): print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) sys.exit(1) name, _, _ = parse_skill_md(skill_path) # Set up live report path if args.report != "none": if args.report == "auto": timestamp = time.strftime("%Y%m%d_%H%M%S") live_report_path = Path(tempfile.gettempdir()) / f"skill_description_report_{skill_path.name}_{timestamp}.html" else: live_report_path = Path(args.report) # Open the report immediately so the user can watch live_report_path.write_text("

Starting optimization loop...

") webbrowser.open(str(live_report_path)) else: live_report_path = None # Determine output directory (create before run_loop so logs can be written) if args.results_dir: timestamp = time.strftime("%Y-%m-%d_%H%M%S") results_dir = Path(args.results_dir) / timestamp results_dir.mkdir(parents=True, exist_ok=True) else: results_dir = None log_dir = results_dir / "logs" if results_dir else None output = run_loop( eval_set=eval_set, skill_path=skill_path, description_override=args.description, num_workers=args.num_workers, timeout=args.timeout, max_iterations=args.max_iterations, runs_per_query=args.runs_per_query, trigger_threshold=args.trigger_threshold, holdout=args.holdout, model=args.model, verbose=args.verbose, live_report_path=live_report_path, log_dir=log_dir, ) # Save JSON output json_output = json.dumps(output, indent=2) print(json_output) if results_dir: (results_dir / "results.json").write_text(json_output) # Write final HTML report (without auto-refresh) if live_report_path: live_report_path.write_text(generate_html(output, auto_refresh=False, skill_name=name)) print(f"\nReport: {live_report_path}", file=sys.stderr) if results_dir and live_report_path: (results_dir / "report.html").write_text(generate_html(output, auto_refresh=False, skill_name=name)) if results_dir: print(f"Results saved to: {results_dir}", file=sys.stderr) if __name__ == "__main__": main() ================================================ FILE: .agents/skills/skill-creator/scripts/utils.py ================================================ """Shared utilities for skill-creator scripts.""" from pathlib import Path def parse_skill_md(skill_path: Path) -> tuple[str, str, str]: """Parse a SKILL.md file, returning (name, description, full_content).""" content = (skill_path / "SKILL.md").read_text() lines = content.split("\n") if lines[0].strip() != "---": raise ValueError("SKILL.md missing frontmatter (no opening ---)") end_idx = None for i, line in enumerate(lines[1:], start=1): if line.strip() == "---": end_idx = i break if end_idx is None: raise ValueError("SKILL.md missing frontmatter (no closing ---)") name = "" description = "" frontmatter_lines = lines[1:end_idx] i = 0 while i < len(frontmatter_lines): line = frontmatter_lines[i] if line.startswith("name:"): name = line[len("name:"):].strip().strip('"').strip("'") elif line.startswith("description:"): value = line[len("description:"):].strip() # Handle YAML multiline indicators (>, |, >-, |-) if value in (">", "|", ">-", "|-"): continuation_lines: list[str] = [] i += 1 while i < len(frontmatter_lines) and (frontmatter_lines[i].startswith(" ") or frontmatter_lines[i].startswith("\t")): continuation_lines.append(frontmatter_lines[i].strip()) i += 1 description = " ".join(continuation_lines) continue else: description = value.strip('"').strip("'") i += 1 return name, description, content ================================================ FILE: .browserslistrc ================================================ firefox esr ios>=11 last 1 safari version last 2 chrome versions last 2 edge versions last 2 firefox versions last 2 opera versions ================================================ FILE: .claude/agents/design-system-researcher.md ================================================ --- name: design-system-researcher description: Use this agent when you need to conduct in-depth research on a single open source design system or component library. This agent should be invoked when:\n\n\nContext: User wants to understand how a specific design system implements its theming architecture.\nuser: "How does Material UI handle theming and dark mode"\nassistant: "I'm going to use the Task tool to launch the design-system-researcher agent to conduct this research on Material UI."\nThe user has explicitly requested research on Material UI's implementation, which is the primary use case for this agent.\n\n\n\nContext: User is exploring how a specific library implements a feature.\nuser: "Can you look into how Mantine offers style customizations for its progress bar component?"\nassistant: "I'll use the design-system-researcher agent to investigate Mantine's Progress Bar component and create a detailed report on how Mantine built this component."\nThis is a targeted research task about a specific design system's component that requires investigation and documentation.\n\n\n tools: Read, Grep, Glob, Bash, BashOutput, Write, WebFetch, Task permissionMode: bypassPermissions model: opus color: cyan --- You are an expert design systems researcher and technical analyst with deep expertise in frontend architecture, React ecosystems, component library design patterns, and open source software. Your role is to conduct thorough, methodical research on a project, producing actionable insights and comprehensive documentation. ## Your Research Mandate You will receive two key inputs: 1. **Target Project**: The name of the open source design system or component library to research (e.g., "Material UI", "Ant Design", "Radix", "Base UI", "Mantine") 2. **Research Goal**: The specific aspect, pattern, or feature you need to investigate (e.g., "theming architecture", "React component props", "component composition patterns", "styling solutions") ## Design Systems These are the projects you may be tasked to research: ### Ant Design - Name: Ant Design - Docs: https://ant.design/components/overview/ - Repo: https://github.com/ant-design/ant-design.git - Branch: master - Component Paths: - components/ ### Material UI - Name: Material UI - Docs: https://mui.com/material-ui/llms.txt - Repo: https://github.com/mui/material-ui.git - Branch: master - Component Paths: - packages/mui-material/src/ ### Base UI - Name: Base UI - Docs: https://base-ui.com/llms.txt - Repo: https://github.com/mui/base-ui.git - Branch: master - Component Paths: - packages/react/src/ ### Radix Primitives - Name: Radix - Docs: https://www.radix-ui.com/primitives/docs/overview/introduction - Repo: https://github.com/radix-ui/primitives.git - Branch: main - Component Paths: - packages/react/ ### Mantine - Name: Mantine - Docs: https://ui.mantine.dev/#main - Repo: https://github.com/mantinedev/mantine.git - Branch: master - Component Paths: - packages/@mantine/core/src/components/ - packages/@mantine/dates/src/components/ - packages/@mantine/carousel/src/ - packages/@mantine/charts/src/ - packages/@mantine/modals/src/ ### React Aria - Name: React Aria - Docs: https://react-aria.adobe.com/ - Repo: https://github.com/adobe/react-spectrum.git - Branch: main - Component Paths: - packages/react-aria-components/src/ ### Tamagui - Name: Tamagui - Docs: https://tamagui.dev/docs/intro/introduction - Repo: https://github.com/tamagui/tamagui.git - Branch: master - Component Paths: - code/ui/ ## Research Methodology Follow this systematic approach: 1. **Task Validation** - Identify the project you need to research from the `Design Systems` section above. - If the requested project is not in the `Design Systems` section above, abandon the research task - If the specified project cannot be found or is ambiguous, abandon the research task - If the theme of the research goal cannot be found within the project source code, abandon the research task 2. **Environment Preparation** - Use the `git.repo-manager` skill (`.claude/skills/git.repo-manager/SKILL.md`) to ensure the project's repository is cloned and up to date in `temp/repo-cache/`. - Only manage the single repository you are researching. 3. **Deep Technical Analysis** - Examine actual source code implementations, not just documentation - Use the `Component Paths` list from the `Design Systems` section above to focus your search on relevant files to the project - Identify key patterns, abstractions, and architectural decisions - Analyze how the project solves specific problems - Note any trade-offs, limitations, or known issues - Look for TypeScript types, interfaces, and API contracts - Understand the dependency footprint and external libraries used 4. **Comparative Context** - When relevant, briefly note how this approach differs from common alternatives - Identify unique innovations or distinctive characteristics - Consider adoption complexity and developer experience implications 5. **Practical Insights** - Extract concrete code examples that illustrate key concepts - Document actual APIs, prop interfaces, and usage patterns - Note configuration options and customization points - Identify best practices recommended by the maintainers ## Research Report Structure Create a comprehensive markdown report with the following structure: ````markdown # [Project Name]: [Research Goal] ## Executive Summary [2-3 sentences capturing the core findings and key takeaways] ## Overview [Brief context about the project and the specific aspect being researched] ## Key Findings ### [Finding Category 1] [Detailed analysis with code examples where relevant] ### [Finding Category 2] [Detailed analysis with code examples where relevant] [Continue with additional categories as needed] ## Technical Implementation Details [Deep dive into how things work under the hood] ## Code Examples ```[language] [Concrete, runnable examples demonstrating key concepts] ``` ## Strengths - [Specific advantage with explanation] - [Another strength] ## Considerations & Trade-offs - [Potential limitation or complexity] - [Another consideration] ## Relevance to the Coinbase Design System [How these findings might apply to or inform the Coinbase Design System] ## References - [Link to source code] - [Link to documentation] - [Link to relevant discussions] ```` ## File Management 1. Reports should be organized in subdirectories within `.claude/research/` based on the research goal 2. Convert the research goal into a kebab-case directory name (e.g., "theming architecture" → `theming-architecture`) 3. Create your report in the research goal subdirectory: `.claude/research/[research-goal]/` 4. Use a descriptive filename format: `[project]-[date].md` - Example: `.claude/research/theming-architecture/material-ui-2024-01-15.md` 5. Ensure the directory exists before writing (create if needed) 6. After completing your research and writing the report, explicitly communicate the full file path to the parent agent ## Quality Standards - **Accuracy**: Verify all technical claims by examining actual source code - **Depth**: Go beyond surface-level documentation to understand implementation details - **Clarity**: Use precise technical language while remaining accessible - **Actionability**: Focus on insights that can inform design decisions - **Evidence**: Support claims with code examples, links, or quotes from official sources - **Brevity**: Be comprehensive but concise - every section should provide value ## Communication Protocol When you complete your research: 1. Confirm the report has been written successfully 2. State the full path to the report file ================================================ FILE: .claude/settings.json ================================================ { "permissions": { "allow": [ "WebFetch", "WebSearch", "Write", "Skill(cds-components)", "mcp__linear-server__get_issue", "mcp__linear-server__get_user", "mcp__linear-server__list_teams", "mcp__linear-server__list_issues", "mcp__linear-server__list_cycles", "mcp__figma-dev-mode-mcp-server__get_design_context", "mcp__figma-dev-mode-mcp-server__get_screenshot", "mcp__figma-dev-mode-mcp-server__get_metadata", "mcp__figma-dev-mode-mcp-server__get_variable_defs", "Bash(ls:*)", "Bash(find:*)", "Bash(yarn nx run-many:*)", "Bash(yarn nx run web:typecheck)", "Bash(yarn nx run mobile:typecheck)", "Bash(yarn nx run common:typecheck)", "Bash(yarn nx run web:test:*)", "Bash(yarn nx run mobile:test:*)", "Bash(yarn nx run common:test:*)", "Bash(yarn nx format:write)", "Bash(yarn nx format:check)" ], "deny": [], "ask": [] } } ================================================ FILE: .claude/skills/components.best-practices/SKILL.md ================================================ --- name: components.best-practices description: Use this skill whenever working on CDS React components in any package. user-invocable: false --- # React Component Development Rules ## Component Development Workflow 1. Research similar reference components and given requirements/description 2. Optionally, ask clarifying questions about the component's requirements & behavior 3. Implement the component with unit tests & stories on web first before proceeding to mobile if both platforms were requested. 4. Never write figma code connect files unless explicitly instructed to do so. 5. Follow remaining general coding standards and guidelines you've been given. ## Reference Components These high quality components demonstrate proper use of patterns/conventions: - **Select** (alpha/): generics, controlled/uncontrolled, compound architecture - **Stepper**: props-based defaults, metadata generics, compound components - **Carousel** (web): compound components, imperative handle, context + hook - **RollingNumber**: animation config extraction, measurement patterns - **SlideButton** (mobile): gesture handling, spring animations, accessibility actions ## Organization ### File Structure Every main CDS component should live within its own folder: ``` ComponentName/ ├── ComponentName.tsx # Main component file ├── SubComponent.tsx # Supporting component (if needed) ├── index.ts # Re-exports for public API ├── __stories__/ # Storybook stories │ └── ComponentName.stories.tsx ├── __tests__/ # Unit tests │ └── ComponentName.test.tsx ├── __figma__/ # Figma Code Connect files │ └── ComponentName.figma.tsx ``` ### Component Categories Organize components into category folders: - `buttons` - Button, IconButton, SlideButton - `controls` - TextInput, Select, Checkbox, Radio, Switch - `cards` - Card, DataCard, ContentCard - `overlays` - Modal, Toast, Alert, Drawer - `layout` - Box, Stack, Divider - `typography` - Text, Heading - `icons` - Icon - `navigation` - Tabs, Breadcrumb ## Component Conventions - **Memoize**: Always memoize components with React's memo HOC - **refs**: All components should accept a ref via React's forwardRef pattern - **Props documentation**: Every prop that does not have a falsy default must have JSDoc comments with `@default` tags - **Type exports**: Export both a `*BaseProps` and `*Props` type (e.g., `ButtonBaseProps`, `ButtonProps`) - **Style overrides**: All components MUST support a way to override styles (varries by web/mobile platform) - **testID**: Support `testID` prop on root element for every component - **Use design tokens**: Reference packages/common/src/core/theme.ts:57-331 as the definitive source for available token names - **Padding over margin**: Use padding in combination with flex gap to achieve spacing instead of margin. ## Design Token System ### Token Categories Design tokens are defined in `packages/common/src/core/theme.ts`: - **Color**: fg, fgMuted, fgInverse, fgPrimary, bgPrimary, bgSecondary, bgNegative, bgPositive, etc. - **Space**: 0, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10 (8px base unit) - **IconSize**: xs (12px), s (16px), m (24px), l (32px) - **AvatarSize**: s, m, l, xl, xxl, xxxl - **BorderWidth**: 0, 100, 200, 300, 400, 500 - **BorderRadius**: 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 - **Font**: display1-3, title1-4, headline, body, label1-2, caption, legal - **Shadow**: elevation1, elevation2 ### Semantic Color System Colors use a spectrum system with hue + step notation: - **Hues**: blue, green, orange, yellow, gray, indigo, pink, purple, red, teal, chartreuse - **Steps**: 0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100 - **Example**: blue60 = Coinbase brand blue (#0052FF) Semantic tokens map to spectrum colors and adapt to light/dark mode: - `fgPrimary`: blue60 (light) / blue70 (dark) - `bgPrimary`: blue60 (light) / blue70 (dark) - `bgNegative`: red60 (both modes) - `bgPositive`: green60 (both modes) ### Space Scale ```typescript space: { '0': 0, // 0px '0.25': 2, // 2px '0.5': 4, // 4px '0.75': 6, // 6px '1': 8, // 8px - base unit '1.5': 12, // 12px '2': 16, // 16px '3': 24, // 24px '4': 32, // 32px '5': 40, // 40px // ... up to 10 (80px) } ``` ## Component Patterns ### Compound Components - Break components down into discrete subcomponents (i.e. "slots") - Use this pattern for complex components with clear, distinct parts - Accept optional subcomponent props with sensible defaults using `*Component`/`Default*` naming: ```ts NavigationComponent = DefaultCarouselNavigation, PaginationComponent = DefaultCarouselPagination, ``` - The names of classNames/styles keys must line up with the name of the subcomponents (e.g. `classNames.pagination`, `styles.pagination`). - Examples: Stepper, Carousel, Select (alpha) **Benefits:** - Complete customization without forking - Sensible defaults for common use case - Exported subcomponents for consumers to customize/wrap themselves ### Context + Hook Pattern - Pair contexts with `use*Context()` hooks that throw descriptive errors on misuse: ```ts export const useCarouselContext = () => { const context = useContext(CarouselContext); if (!context) throw new Error('useCarouselContext must be used within Carousel'); return context; }; ``` ### Controlled/Uncontrolled Components - Support both patterns for input components; validate and throw if consumer mixes them (e.g., provides `value` but not `onChange`) - Use internal state with prop override: `const open = openProp ?? openInternal;` ### Generics for Type Safety - Use generics for components with dynamic value types: ```ts type SelectComponent = ( props: SelectProps, ) => React.ReactElement; ``` - Examples: Select (alpha), Stepper ### BaseProps & Props - Component modules encapsulate two prop Types: `*BaseProps` (platform-agnostic) and `*Props` (extends BaseProps with platform and component specific properties like `className`, `classNames`, `styles`, etc.) - Reuse other components' Types via utilities: `Pick` being preferred then secondarily `Omit`/`Exclude` - Compose prop types using Typescript intersections (`&`) in this order: (1) full types (2) Picks (3) Omits (4) other type literal(s): ```ts type MyComponentProps = BoxBaseProps & Pick & Omit & { propA: string; propB: number; }; ``` - When accepting components as props, define the contract types (`*Props`, `*Component`) in the main component file. These child component contracts do not use the `*BaseProps` pattern—only the main component needs BaseProps/Props separation. Default implementations can extend the contract with additional props in their own file: ```ts // In MyComponent.tsx - defines the contract type ChildProps = { id: string; label: ReactNode }; type ChildComponent = React.FC; // In DefaultChild.tsx - extends for default implementation type DefaultChildProps = SharedProps & Omit & ChildProps; ``` ================================================ FILE: .claude/skills/components.styles/README.md ================================================ # components.styles agent skill This skill may be invoked by the user following the examples below. **Usage:** `/components.styles [additional context]` Examples: - `/components.styles SlideButton` - `/components.styles Button add static classnames for sub elements` - `/components.styles Select add styles documentation` - `/components.styles Avatar mobile only` ================================================ FILE: .claude/skills/components.styles/SKILL.md ================================================ --- name: components.styles description: Guidelines writing styles API (styles, classNames, and static classNames) for a CDS component. Use this skill when adding customization options to a React component via `styles` or `classNames` props or when needing to update the docsite with component styles documentation. argument-hint: [additional context] (e.g., "Button", "LineChart add real-time examples") --- Goal: Add styles API (styles, classNames, and static classNames) to a CDS component and/or update the component documentation with styles documentation. If no component name is provided, ask the user which component they want to add styles to. ## Step 1: Locate the Component Find the component source file: ```bash packages/web/src/[source-category]/[ComponentName].tsx # for web packages/mobile/src/[source-category]/[ComponentName].tsx # for mobile packages/web-visualization/src/[source-category]/[ComponentName].tsx # for web visualization packages/mobile-visualization/src/[source-category]/[ComponentName].tsx # for mobile visualization ``` ## Step 2: Evaluate Component Structure > **⚠️ IMPORTANT: Adding styles/classNames props is a commitment to the component's internal structure.** > > Before adding styles API, carefully review the component's JSX structure: > > - **Flag if the component could be simplified** (e.g., unnecessary wrappers, redundant containers) > - **Do NOT add styles to elements that may be refactored** - this creates breaking changes > - **Ask the user** if you notice the component structure could be improved before committing to it > > Once published, changing or removing selectors is a **breaking change** for consumers. ## Step 3: Identify Styleable Elements Review the component's JSX to identify elements that should be targetable via styles/classNames: - **Root element**: The outermost container element - **Named sections**: Elements with semantic meaning (e.g., `start`, `content`, `end`, `header`, `footer`) - **Sub-components**: Internal elements that users might want to customize - **Conditional elements**: Elements that render based on props ## Approved Selector Names > **IMPORTANT:** Before adding a new selector name not in this list, **get explicit confirmation from the user**. > When a new selector is approved, add it to this list. ### Approved Selectors (alphabetical) | Selector | Description | | --------------------- | ----------------------------------------------------- | | `accessory` | Accessory element (e.g., chevron, icon at end) | | `activeIndicator` | Active indicator element (e.g., in tabs) | | `bottomContent` | Bottom section content | | `carousel` | Main carousel track element | | `carouselContainer` | Outer carousel container | | `childrenContainer` | Container wrapping children | | `content` | Main content area | | `contentContainer` | Container wrapping content | | `description` | Description text element | | `day` | Date cell in a calendar grid | | `end` | End slot content (e.g., actions, icons) | | `fill` | Fill/progress indicator within a track | | `header` | Header section | | `helperText` | Helper/assistive text below content | | `icon` | Icon element | | `intermediary` | Middle/intermediary element between sections | | `label` | Label text element | | `labels` | Container for multiple labels | | `logo` | Logo element | | `mainContent` | Primary content area | | `media` | Media element (image, avatar, icon) | | `navigation` | Navigation controls (e.g., prev/next buttons) | | `pagination` | Pagination indicators | | `pressable` | Pressable/interactive wrapper | | `progress` | Progress indicator element | | `progressBar` | ProgressBar sub-component within a composed component | | `root` | Root/outermost container element | | `start` | Start slot content (e.g., back button) | | `step` | Individual step element (in steppers) | | `substepContainer` | Container for nested sub-steps | | `subtitle` | Subtitle text element | | `tab` | Tab element (in tabs) | | `tabs` | Tabs container element | | `thumb` | Draggable thumb element (in sliders) | | `title` | Title text element | | `titleStack` | Stack containing title/subtitle/description | | `titleStackContainer` | Container wrapping titleStack | | `topContent` | Top section content | | `track` | Track/rail element (in progress bars, sliders) | | `trigger` | Trigger element that opens a dropdown/popover | ## JSDoc Convention for Selector Descriptions Selector JSDoc comments describe **what the element is**, not what the prop does: - Sentence case, no trailing period - Concise noun phrase describing the element itself - Single-line format: `/** Description */` - For conditional elements, append context after a comma: `/** Header element, only rendered on phone viewport */` **Examples:** ```tsx /** Root element */ /** Title text element */ /** Navigation controls element */ /** Header element, only rendered on phone viewport in horizontal direction */ ``` ## Step 4: Add Styles API (Web Components) For web components, add three things: ### 4.1 Static Class Names Add a static classNames object with JSDoc comments. Place this before the component's type definitions: ```tsx /** * Static class names for [ComponentName] component parts. * Use these selectors to target specific elements with CSS. */ export const [componentName]ClassNames = { /** Root element */ root: 'cds-[ComponentName]', /** [Concise element description] */ [selectorName]: 'cds-[ComponentName]-[selectorName]', // ... more selectors as needed } as const; ``` **Naming conventions:** - Use `cds-` prefix for all class names - Use PascalCase for component name: `cds-NavigationBar` - Use camelCase for sub-elements: `cds-NavigationBar-contentWrapper`, `cds-Foo-titleStack` - Keep names descriptive but concise **Example:** ```tsx export const fooClassNames = { root: 'cds-Foo', contentWrapper: 'cds-Foo-contentWrapper', titleStack: 'cds-Foo-titleStack', helperText: 'cds-Foo-helperText', } as const; ``` ### 4.2 Update Component Props Type Import and use the `StylesAndClassNames` utility type: ```tsx import type { StylesAndClassNames } from '../types'; export type [ComponentName]BaseProps = BoxBaseProps & { // ... other props (without styles/classNames) }; export type [ComponentName]Props = [ComponentName]BaseProps & StylesAndClassNames & Omit, 'children'>; ``` This automatically generates the `styles` and `classNames` props based on your static classNames object. ### 4.3 Apply in Component Implementation Apply the static classNames, dynamic classNames, and styles in the component: ```tsx import { cx } from '../cx'; // In the component: {children} ``` ### 4.4 Add Tests for Static Class Names Add tests to verify that static class names are applied correctly to the component. This ensures the class names remain stable for consumers who depend on them for CSS targeting. **Test pattern:** ```tsx import { [componentName]ClassNames } from '../[ComponentName]'; describe('[ComponentName] static classNames', () => { it('applies static class names to component elements', () => { render( <[ComponentName]WithTheme start={
Start
} // Include props that render conditional elements >
Children
, ); // Test root element const root = screen.getByRole('[role]'); // or use testID/other selector expect(root).toHaveClass([componentName]ClassNames.root); // Test sub-elements using querySelector with the static class name expect(root.querySelector(`.${[componentName]ClassNames.start}`)).toBeInTheDocument(); expect(root.querySelector(`.${[componentName]ClassNames.content}`)).toBeInTheDocument(); }); }); ``` **Key testing principles:** - Import the static classNames object from the component - Use `toHaveClass()` for elements accessible via roles/queries - Use `querySelector()` with the static class name for internal elements - Test all selectors, including those on conditionally rendered elements (pass appropriate props) **Example from NavigationBar:** ```tsx import { navigationBarClassNames } from '../NavigationBar'; describe('NavigationBar static classNames', () => { it('applies static class names to component elements', () => { render( Start}>
Children
, ); const nav = screen.getByRole('navigation'); expect(nav).toHaveClass(navigationBarClassNames.root); expect(nav.querySelector(`.${navigationBarClassNames.start}`)).toBeInTheDocument(); expect(nav.querySelector(`.${navigationBarClassNames.content}`)).toBeInTheDocument(); }); }); ``` ## Step 5: Add Styles API (Mobile Components) For mobile components, the pattern is simpler (no static classNames): ### 5.1 Add styles prop type ```tsx export type [ComponentName]Props = { // ... other props /** Custom styles for individual elements of the [ComponentName] component */ styles?: { /** Root container element */ root?: StyleProp; /** [Concise element description] */ [selectorName]?: StyleProp; // ... more selectors as needed }; }; ``` ### 5.2 Apply in Component Implementation ```tsx {children} ``` ## Step 6: Add JSDoc Notes for Special Cases If any selectors have special rendering conditions, append the note after the element description with a comma: ```tsx styles?: { /** Header element, only rendered on phone viewport in horizontal direction */ header?: React.CSSProperties; }; ``` Common cases to document: - Viewport-specific rendering (phone/tablet/desktop) - Direction-specific rendering (horizontal/vertical) - Conditional rendering based on props - Elements that only render with certain data (e.g., subSteps) ## Reference: StylesAndClassNames Utility The `StylesAndClassNames` utility type (from `packages/web/src/types.ts`) automatically generates: ```tsx // Given: const fooClassNames = { root: 'cds-Foo', contentWrapper: 'cds-Foo-contentWrapper', } as const; // StylesAndClassNames generates: { styles?: { root?: React.CSSProperties; contentWrapper?: React.CSSProperties; }; classNames?: { root?: string; contentWrapper?: string; }; } ``` ## Reference: NavigationBar Example See `packages/web/src/navigation/NavigationBar.tsx` for a complete example of the styles API pattern: - Lines 16-28: Static classNames with JSDoc - Line 80: Using `StylesAndClassNames` type on regular Props (not BaseProps) - Lines 117, 140, 149: Applying classNames with `cx()` - Lines 125, 142, 152: Applying styles See `packages/web/src/navigation/__tests__/NavigationBar.test.tsx` for static classNames test example: - `NavigationBar static classNames` describe block: Tests all static class names are applied ## Step 7: Update Documentation After adding the styles API to the component, update the documentation: 1. **Run the docgen** to regenerate styles data: ```bash yarn nx run docs:docgen ``` 2. **Create or update the styles documentation** use the `components.write-docs` SKILL for general knowledge on how to write component documentation: - Create `_webStyles.mdx` with ComponentStylesTable and StylesExplorer - Create `_mobileStyles.mdx` with ComponentStylesTable (if mobile) - Update `index.mdx` to import and render the styles tables ## Final Checklist Before completing, verify: - [ ] Reviewed component structure for potential simplifications (flagged to user if found) - [ ] Selector names are from the approved list (or got user confirmation for new ones) - [ ] Each selector has a JSDoc comment following the convention (sentence case, no trailing period, concise noun phrase) - [ ] Class names follow `cds-ComponentName-selectorName` convention (camelCase) - [ ] Using `StylesAndClassNames` utility type on regular Props (not BaseProps) (web) or manual styles type (mobile) - [ ] Static classNames applied with `cx()` in component JSX (web only) - [ ] Dynamic classNames and styles props applied correctly - [ ] Special rendering conditions documented in JSDoc - [ ] Tests added for static classNames (web only) - see Step 4.4 - [ ] Ran `yarn nx run docs:docgen` to regenerate styles data - [ ] Documentation updated to include new component styles information - [ ] Updated this file's "Approved Selector Names" table if new selectors were added ================================================ FILE: .claude/skills/components.write-docs/README.md ================================================ # components.write-docs agent skill This skill may be invoked by the user following the examples below. **Usage:** `/component-docs [additional context]` Examples: - `/component-docs Button` - `/component-docs LineChart add examples for real-time data updates` - `/component-docs Avatar needs accessibility improvements` ================================================ FILE: .claude/skills/components.write-docs/SKILL.md ================================================ --- name: components.write-docs description: Guidelines for creating or updating documentation for a CDS component on the docsite (apps/docs/). Use this skill after creating or making updates to a CDS React component to write high quality documentaiton in the CDS docsite. argument-hint: [additional context] (e.g., "Button", "LineChart add real-time examples") model: claude-sonnet-4-6 --- Goal: Create or update documentation for a CDS component on the docsite (apps/docs/). If no component name is provided, ask the user which component they want to document. ## Step 1: Check for Existing Documentation First, check if documentation already exists for this component: ```bash apps/docs/docs/components/*/[ComponentName]/ ``` - **If docs exist**: Review the existing documentation and identify what needs to be added, updated, or improved. Consider the user's additional context if provided. - **If docs don't exist**: Follow the full workflow below to create new documentation. For updates, focus on the specific areas that need improvement rather than rewriting everything. ### Reference Components When creating or updating docs, reference these well-documented components to understand the documentation style and patterns: - **LineChart** (`apps/docs/docs/components/charts/LineChart/`) - Comprehensive example with many composed examples - **Button** (`apps/docs/docs/components/buttons/Button/`) - Good basic component documentation - **IconButton** (`apps/docs/docs/components/buttons/IconButton/`) - Simple component with clear examples - **Sidebar** (`apps/docs/docs/components/navigation/Sidebar/`) - Complex component with multiple sub-components Review these before writing to ensure consistency in style, structure, and depth. ### Reference Files When writing examples, reference these files for valid values: - **Icon names** (`packages/icons/src/IconName.ts`) - All valid icon names (e.g., `'checkmark'`, `'close'`, `'warning'`) - **Design tokens** - Use the `components.best-practices` SKILL for knowledge on valid CDS design token values (Color, Space, BorderRadius, Font, etc.) ## Step 2: Research Phase (for new docs or major updates) Before writing documentation, research how other popular component libraries document the same (or similar) component. Use web search to find documentation for the component in: - **Material UI** (mui.com) - **Radix UI** (radix-ui.com) - **Mantine** (mantine.dev) - **Ant Design** (ant.design) - **Base UI** (base-ui.com) Look for: - What examples they provide and how they're organized - Common use cases they demonstrate - Edge cases or patterns worth highlighting - Accessibility guidance they include - How they explain complex features Use these insights to inform your documentation structure and examples. ## Step 3: Check Component Availability Verify where the component exists: ```bash packages/web/src/[source-category]/[ComponentName].tsx # for web packages/mobile/src/[source-category]/[ComponentName].tsx # for mobile ``` Also check visualization packages if applicable: - `packages/web-visualization/src/...` - `packages/mobile-visualization/src/...` Also check for Storybook stories (`packages/*/src/**/__stories__/[ComponentName].stories.tsx`). If one exists, add the `storybook` field to webMetadata.json. ### Check for Styles Check if the component supports the `styles` and/or `classNames` props by looking at its type definitions. Components with these props should have a styles tab in the documentation. Look for: - `styles?: { ... }` prop with named style selectors - `classNames?: { ... }` prop with named class selectors If the component has these props, the docgen will generate styles data that can be used for the styles doc. ## Step 4: Required Setup Steps (for new docs only) Before creating the component documentation, complete these setup steps: ### 4.1 Add to ReactLiveScope In `apps/docs/src/components/page/ReactLiveScope.ts`, add the component imports and add them to the scope: ```ts // Add imports import { ComponentName } from '@coinbase/cds-web'; // Add to scope object const ReactLiveScope = { // ... existing scope ComponentName, }; ``` There is a chance that the component has already been imported. ### 4.2 Update sidebars.ts In `apps/docs/sidebars.ts`, add the component to its category section: ```ts module.exports = { docs: [ // ... other sections { type: 'category', label: 'Category', // e.g., 'Buttons', 'Layout', etc. items: [ // ... other components 'components/category/ComponentName/index', ], }, ], }; ``` ### 4.3 Update docgen.config.js In `apps/docs/docgen.config.js`, add the component paths to generate props data: ```js module.exports = { web: { // ... other configs category: { // e.g., 'buttons', 'layout', etc. ComponentName: { source: 'packages/web/src/category/ComponentName.tsx', }, }, }, // If component has a mobile version mobile: { // ... other configs category: { ComponentName: { source: 'packages/mobile/src/category/ComponentName.tsx', }, }, }, }; ``` ## Step 5: Create Directory Structure (for new docs only) Create the documentation directory and files based on component availability: ```bash apps/docs/docs/components/[docs-category]/[ComponentName]/ ├── index.mdx # Required for all components ├── webMetadata.json # If web version exists ├── _webExamples.mdx # If web version exists ├── _webPropsTable.mdx # If web version exists ├── _webStyles.mdx # If web version has styles/classNames API ├── mobileMetadata.json # If mobile version exists ├── _mobileExamples.mdx # If mobile version exists ├── _mobilePropsTable.mdx # If mobile version exists └── _mobileStyles.mdx # If mobile version has styles/classNames API ``` ## File Templates ### Metadata Files #### webMetadata.json ```json { "import": "import { ComponentName } from '@coinbase/cds-web/[source-category]/[ComponentName]'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/[source-category]/[ComponentName].tsx", "description": "[Component description]", "figma": "[figma link]", "storybook": "[storybook link]", "relatedComponents": [ { "label": "[componentName]", "url": "/components/[category]/[componentName]" } ], "dependencies": [{ "name": "[peer-dependency-name]", "version": "[version-range]" }] } ``` **Notes:** - `description` should be the full component description - what the component is and when to use it (e.g., "A non-intrusive notification component that temporarily displays brief messages at the bottom of the screen.") - `figma` and `storybook` fields are optional - only add if provided (check for story files in `packages/web/src/**/__stories__/`) - `dependencies` is optional - only include if the component imports from external packages that are peer dependencies. To determine: 1. Check the component's source file for imports from external packages (e.g., `framer-motion`) 2. Cross-reference those imports with `peerDependencies` in `packages/web/package.json` 3. Use the exact version range from `peerDependencies` in the package.json file - `relatedComponents` should link to components commonly used together #### mobileMetadata.json ```json { "import": "import { ComponentName } from '@coinbase/cds-mobile/[source-category]/[ComponentName]'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/[source-category]/[ComponentName].tsx", "description": "[Component description]", "figma": "[figma link]", "relatedComponents": [ { "label": "[componentName]", "url": "/components/[category]/[componentName]" } ], "dependencies": [{ "name": "[peer-dependency-name]", "version": "[version-range]" }] } ``` **Notes:** - `figma` is optional - only add if provided - `dependencies` is optional - only include if the component imports from external packages that are peer dependencies. To determine: 1. Check the component's source file for imports from external packages (e.g., `@shopify/react-native-skia`, `react-native-reanimated`, `react-native-gesture-handler`) 2. Cross-reference those imports with `peerDependencies` in `packages/mobile/package.json` 3. Use the exact version range from `peerDependencies` in the package.json file ### Props Tables #### \_webPropsTable.mdx ```mdx import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/[source-category]/[ComponentName]/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ``` #### \_mobilePropsTable.mdx ```mdx import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/[source-category]/[ComponentName]/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ``` ### Styles Doc Styles doc showcases the `styles` and `classNames` API for components that support custom styling of internal elements. Only create these files if the component has a styles/classNames API. #### \_webStyles.mdx (with Explorer) For web components, always include both the selectors table AND the interactive StylesExplorer. The StylesExplorer lets users hover or click on selectors to highlight the corresponding elements in a live example: ```mdx import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { [ComponentName] } from '@coinbase/cds-web/[source-category]/[ComponentName]'; import webStylesData from ':docgen/web/[source-category]/[ComponentName]/styles-data'; ## Explorer {(classNames) => ( <[ComponentName] {...exampleProps} classNames={classNames} /> )} ## Selectors ``` If the component requires state management, bundle everything into a single exported example component. ```mdx import { useState } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Select } from '@coinbase/cds-web/alpha/select'; import webStylesData from ':docgen/web/alpha/select/Select/styles-data'; export const SelectExample = ({ classNames }) => { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); }; const [selected, setSelected] = useState(['premium']); return ( Custom Card Toggle} ControlComponent={CustomCardToggle} value={selected} onChange={(e) => { const { value: toggleValue, checked } = e.target; setSelected((prev) => checked ? [...prev, toggleValue] : prev.filter((v) => v !== toggleValue), ); }} options={[ { value: 'basic', label: 'Basic Plan' }, { value: 'premium', label: 'Premium Plan' }, { value: 'enterprise', label: 'Enterprise Plan' }, { value: 'custom', label: 'Custom Plan (disabled)', disabled: true }, ]} /> Selected: {selected.join(', ')} ); } ``` ### Custom Radio Button ```tsx live function CustomRadioButtonExample() { // Custom radio component with enhanced styling const CustomRadioButton = ({ checked, onChange, disabled, children, value, ...props }) => { return ( {checked && ( )} {children} {value === 'starter' && 'Perfect for beginners'} {value === 'professional' && 'For growing businesses'} {value === 'enterprise' && 'For large organizations'} ); }; const [selected, setSelected] = useState('professional'); return ( Custom Radio Button} ControlComponent={CustomRadioButton} value={selected} role="radiogroup" onChange={(e) => setSelected(e.target.value)} options={[ { value: 'starter', label: 'Starter' }, { value: 'professional', label: 'Professional' }, { value: 'enterprise', label: 'Enterprise' }, ]} /> Selected: {selected} ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/ControlGroup/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/ControlGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/ControlGroup/index.mdx ================================================ --- id: controlGroup title: ControlGroup platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/controls/ControlGroup/toc-props'; import mobilePropsToc from ':docgen/mobile/controls/ControlGroup/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/ControlGroup/mobileMetadata.json ================================================ { "import": "import { ControlGroup } from '@coinbase/cds-mobile/controls/ControlGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/ControlGroup.tsx", "description": "A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.", "relatedComponents": [ { "label": "Checkbox", "url": "/components/inputs/Checkbox/" }, { "label": "CheckboxCell", "url": "/components/inputs/CheckboxCell/" }, { "label": "CheckboxGroup", "url": "/components/inputs/CheckboxGroup/" }, { "label": "Radio", "url": "/components/inputs/Radio/" }, { "label": "RadioCell", "url": "/components/inputs/RadioCell/" }, { "label": "RadioGroup", "url": "/components/inputs/RadioGroup/" }, { "label": "Switch", "url": "/components/inputs/Switch/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/ControlGroup/webMetadata.json ================================================ { "import": "import { ControlGroup } from '@coinbase/cds-web/controls/ControlGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/ControlGroup.tsx", "description": "A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-controlgroup--radio-group-story", "relatedComponents": [ { "label": "Checkbox", "url": "/components/inputs/Checkbox/" }, { "label": "CheckboxCell", "url": "/components/inputs/CheckboxCell/" }, { "label": "CheckboxGroup", "url": "/components/inputs/CheckboxGroup/" }, { "label": "Radio", "url": "/components/inputs/Radio/" }, { "label": "RadioCell", "url": "/components/inputs/RadioCell/" }, { "label": "RadioGroup", "url": "/components/inputs/RadioGroup/" }, { "label": "Switch", "url": "/components/inputs/Switch/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_mobileExamples.mdx ================================================ IconButton is a compact button that displays only an icon. Use it for actions where the icon alone clearly communicates the purpose. ## Basics The only required props are `name` (which determines the icon) and `accessibilityLabel` (for screen readers). ```jsx ``` ## Variants Use variants to denote intent and importance. The `active` prop fills the icon when enabled. ```jsx ``` ### Transparent Use the `transparent` prop to remove the background until the user interacts with the button. ```jsx ``` ## States ### Loading Use the `loading` prop to show a spinner when an action is in progress. The button becomes non-interactive and displays a loading spinner instead of the icon. ```jsx ``` ### Disabled Use the `disabled` prop to prevent interaction and show a disabled visual state. ```jsx ``` ## Sizing IconButtons are compact by default. Use `compact={false}` for larger touch targets. ```jsx ``` ## Accessibility Since icon buttons have no visible text, an `accessibilityLabel` is required to describe the button's purpose for screen readers. ```jsx ``` When composing a button with a visible label, use `accessibilityLabelledBy` to reference the label's `id` instead. See the [Claim Drop example](#claim-drop) below. For most use cases, keep the IconButton target area at `40 x 40` or larger. Reserve `iconSize="xs"` for specific constrained layouts, and avoid shrinking the interactive area below `24 x 24`, which is the absolute minimum target size recommended by [WCAG 2.2 target size guidance](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). ## Composed Examples ### Claim Drop A toggleable icon button with an adjacent label. Uses `accessibilityLabelledBy` to associate the button with its visible label. ```jsx function ClaimDropExample() { const [active, setActive] = useState(false); const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]); const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]); return ( setActive((active) => !active)} id="claim-drop-button" accessibilityLabelledBy="claim-drop-label" /> {label} ); } ``` ### Notification Bell An icon button with a badge showing the notification count. Uses `DotCount` to display the number of unread notifications. ```jsx ``` ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/buttons/IconButton/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/buttons/IconButton/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_webExamples.mdx ================================================ IconButton is a compact button that displays only an icon. Use it for actions where the icon alone clearly communicates the purpose. ## Basics The only required props are `name` (which determines the icon) and `accessibilityLabel` (for screen readers). ```jsx live ``` ## Variants Use variants to denote intent and importance. The `active` prop fills the icon when enabled. ```jsx live ``` ### Transparent Use the `transparent` prop to remove the background until the user interacts with the button. ```jsx live ``` ## States ### Loading Use the `loading` prop when an action is in progress. The button becomes non-interactive and shows an indeterminate [ProgressCircle](/components/feedback/ProgressCircle) instead of the icon. The circle size follows the button’s `iconSize`. #### Loading by variant Loading works with all variants, transparent, and compact. Provide `accessibilityLabel` so screen readers announce the loading state (e.g. "Loading"). ```jsx live ``` #### Interactive loading Toggle loading to simulate an async action. The button’s `accessibilityLabel` can reflect the state (e.g. "Submit form" vs "Processing submission"). ```jsx live function LoadingExample() { const [isLoading, setIsLoading] = useState(false); const handleSubmit = () => { setIsLoading(true); setTimeout(() => setIsLoading(false), 2000); }; return ( ); } ``` ### Disabled Use the `disabled` prop to prevent interaction and show a disabled visual state. ```jsx live ``` ## Sizing IconButtons are compact by default. Use `compact={false}` for larger touch targets. ```jsx live ``` ## Accessibility Since icon buttons have no visible text, an `accessibilityLabel` is required to describe the button's purpose for screen readers. ```jsx ``` When composing a button with a visible label, use `accessibilityLabelledBy` to reference the label's `id` instead. See the [Claim Drop example](#claim-drop) below. For most use cases, keep the IconButton target area at `40 x 40` or larger. Reserve `iconSize="xs"` for specific constrained layouts, and avoid shrinking the interactive area below `24 x 24`, which is the absolute minimum target size recommended by [WCAG 2.2 target size guidance](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). ## Composed Examples ### Claim Drop A toggleable icon button with an adjacent label. Uses `accessibilityLabelledBy` to associate the button with its visible label. ```jsx live function ClaimDropExample() { const [active, setActive] = useState(false); const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]); const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]); return ( setActive((active) => !active)} id="claim-drop-button" accessibilityLabelledBy="claim-drop-label" /> {label} ); } ``` ### Notification Bell An icon button with a badge showing the notification count. Uses `DotCount` to display the number of unread notifications. ```jsx live ``` ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/buttons/IconButton/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/IconButton/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { IconButton } from '@coinbase/cds-web/buttons'; import webStylesData from ':docgen/web/buttons/IconButton/styles-data'; ## Explorer {(classNames) => ( )} ## Selectors ================================================ FILE: apps/docs/docs/components/inputs/IconButton/index.mdx ================================================ --- id: iconButton title: IconButton platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import { IconButtonBanner } from '@site/src/components/page/ComponentBanner/IconButtonBanner'; import webPropsToc from ':docgen/web/buttons/IconButton/toc-props'; import mobilePropsToc from ':docgen/mobile/buttons/IconButton/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } /> } webStyles={} webExamples={} mobilePropsTable={} mobileStyles={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} webStylesToc={webStylesToc} mobilePropsToc={mobilePropsToc} mobileStylesToc={mobileStylesToc} /> ================================================ FILE: apps/docs/docs/components/inputs/IconButton/mobileMetadata.json ================================================ { "import": "import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/buttons/IconButton.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=50-638&t=8hgl6nX25pIzCo0y-1", "description": "A Button with an Icon for content.", "relatedComponents": [ { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "Icon", "url": "/components/media/Icon/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/IconButton/webMetadata.json ================================================ { "import": "import { IconButton } from '@coinbase/cds-web/buttons/IconButton'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/buttons/IconButton.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-buttons-iconbutton--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=50-638&t=8hgl6nX25pIzCo0y-1", "description": "A Button with an Icon for content.", "relatedComponents": [ { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "Icon", "url": "/components/media/Icon/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/InputChip/_mobileExamples.mdx ================================================ InputChip is built for remove actions. For other uses, see [Chip](/components/inputs/Chip/) which supports interaction. ## Basics Use `onPress` for remove behavior. ```tsx function Example() { const [selectedValues, setSelectedValues] = React.useState(['BTC', 'ETH', 'SOL']); return ( {selectedValues.map((value) => ( setSelectedValues((current) => current.filter((item) => item !== value))} value={value} /> ))} ); } ``` ### Disabled Use `disabled` when the value should stay visible but not removable. ```tsx function Example() { return ( console.log('Remove Basic')} value="Basic Chip" /> {}} value="Disabled Chip" /> ); } ``` ## Styling ### With start content ```tsx function Example() { return ( console.log('Remove Star')} value="With Icon" start={} /> console.log('Remove BTC')} value="BTC" start={} /> console.log('Remove ETH')} value="ETH" start={} /> ); } ``` ### Compact Use `compact` to reduce chip height and spacing in dense layouts. ```tsx function Example() { return ( console.log('Remove Default')} value="Default" /> console.log('Remove Compact')} value="Compact" /> ); } ``` ### Invert color scheme Use `invertColorScheme` to emphasize removable values. ```tsx function Example() { return ( console.log('Remove Default')} value="Default" /> console.log('Remove Inverted')} value="Inverted" /> ); } ``` ## Accessibility InputChip defaults to a remove label (`Remove ${children}` for string content, otherwise `Remove option`). Override `accessibilityLabel` when you need more specific wording. ```tsx function Example() { return ( console.log('Remove BTC')} value="BTC" /> console.log('Remove Custom')} value="Custom Label" accessibilityLabel="Remove custom selection" /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/InputChip/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/chips/InputChip/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/InputChip/_webExamples.mdx ================================================ InputChip is built for remove actions. For other uses, see [Chip](/components/inputs/Chip/) which supports interaction. ## Basics Use `onClick` for remove behavior. ```tsx live function Example() { const [selectedValues, setSelectedValues] = React.useState(['BTC', 'ETH', 'SOL']); return ( {selectedValues.map((value) => ( setSelectedValues((current) => current.filter((item) => item !== value))} value={value} /> ))} ); } ``` ### Disabled Use `disabled` when the value should stay visible but not removable. ```tsx live function Example() { return ( console.log('Remove Basic')} value="Basic Chip" /> {}} value="Disabled Chip" /> ); } ``` ## Styling ### With start content ```tsx live function Example() { return ( console.log('Remove Star')} value="With Icon" start={} /> console.log('Remove BTC')} value="BTC" start={} /> console.log('Remove ETH')} value="ETH" start={} /> ); } ``` ### Compact Use `compact` to reduce chip height and spacing in dense layouts. ```tsx live function Example() { return ( console.log('Remove Default')} value="Default" /> console.log('Remove Compact')} value="Compact" /> ); } ``` ### Invert color scheme Use `invertColorScheme` to emphasize removable values. ```tsx live function Example() { return ( console.log('Remove Default')} value="Default" /> console.log('Remove Inverted')} value="Inverted" /> ); } ``` ## Accessibility InputChip defaults to a remove label (`Remove ${children}` for string content, otherwise `Remove option`). Override `accessibilityLabel` when you need more specific wording. ```tsx live function Example() { return ( console.log('Remove BTC')} value="BTC" /> console.log('Remove Custom')} value="Custom Label" accessibilityLabel="Remove custom selection" /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/InputChip/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/chips/InputChip/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/InputChip/index.mdx ================================================ --- id: input-chip title: InputChip platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/chips/InputChip/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/chips/InputChip/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/InputChip/mobileMetadata.json ================================================ { "import": "import { InputChip } from '@coinbase/cds-mobile/chips/InputChip'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/chips/InputChip.tsx", "description": "A Chip used for removing selected values.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=10177-4850&t=YbvYrnHXUU8AZpH5-4", "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/InputChip/webMetadata.json ================================================ { "import": "import { InputChip } from '@coinbase/cds-web/chips/InputChip'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/chips/InputChip.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chips-inputchip--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=10177-4850&t=YbvYrnHXUU8AZpH5-4", "description": "A Chip used for removing selected values.", "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Interactable/_mobileExamples.mdx ================================================ Interactable components are simple elements that define background and border styles, both of which are used in determining state styles. ### Hover and pressed states These states are rather complex as they are _not_ a simple color hexcode. Instead, we dynamically blend the background/foreground color with a chosen spectrum color, coupled with an opacity change, to determine the new state color. On mobile, stacked `View`s are used to achieve this. On web, combining `background-image`, `background-color`, and CSS variables are used to achieve this. ```jsx Content goes here! ``` ### Disabled states On both platforms, interactable elements have their opacity greatly reduced when disabled. ```jsx Content goes here! ``` ### Block Interactable Interactables expand to 100% width when the `block` prop is passed. ```jsx Content goes here! ``` ### A11y Since this component is low-level, it doesn't require much accessibility out of the box. Instead, accessibility should be applied when composing _with_ interactable. An example of this can be found in the [Pressable](/components/inputs/Pressable) component. ================================================ FILE: apps/docs/docs/components/inputs/Interactable/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/system/Interactable/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Interactable/_webExamples.mdx ================================================ Interactable components are simple elements that define background and border styles, both of which are used in determining state styles. ### Hover and pressed states These states are rather complex as they are _not_ a simple color hexcode. Instead, we dynamically blend the background/foreground color with a chosen spectrum color, coupled with an opacity change, to determine the new state color. On mobile, stacked `View`s are used to achieve this. On web, combining `background-image`, `background-color`, and CSS variables are used to achieve this. ```jsx live Content goes here! ``` ### Disabled states On both platforms, interactable elements have their opacity greatly reduced when disabled. ```jsx live Content goes here! ``` ### Block Interactable Interactables expand to 100% width when the `block` prop is passed. ```jsx live Content goes here! ``` ### A11y Since this component is low-level, it doesn't require much accessibility out of the box. Instead, accessibility should be applied when composing _with_ interactable. An example of this can be found in the [Pressable](/components/inputs/Pressable) component. ================================================ FILE: apps/docs/docs/components/inputs/Interactable/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/system/Interactable/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Interactable/index.mdx ================================================ --- id: interactable title: Interactable platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/system/Interactable/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/system/Interactable/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/Interactable/mobileMetadata.json ================================================ { "import": "import { Interactable } from '@coinbase/cds-mobile/system/Interactable'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/system/Interactable.tsx", "description": "A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.", "relatedComponents": [ { "label": "Pressable", "url": "/components/inputs/Pressable/" }, { "label": "Button", "url": "/components/inputs/Button/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Interactable/webMetadata.json ================================================ { "import": "import { Interactable } from '@coinbase/cds-web/system/Interactable'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/system/Interactable.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-interactable--generated-color-states", "description": "A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.", "relatedComponents": [ { "label": "Pressable", "url": "/components/inputs/Pressable/" }, { "label": "Button", "url": "/components/inputs/Button/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/_mobileExamples.mdx ================================================ MediaChip automatically adjusts spacing based on the combination of `start`, `children`, and `end` content. ## Basics :::tip Recommended component sizes for regular-sized chips - Start: **24×24** circular media - End: **xs** size icons ::: ```tsx Label only } /> } > Media + Label ``` ## Layout Configurations MediaChip supports all six content combinations automatically. ```tsx Label only } /> } start={} /> } > Media + Label }>Label + Icon } start={} > All three ``` ## Styling ### Compact The compact variant reduces spacing for denser layouts. :::tip Recommended component sizes for compact chips - Start: **16×16** circular media - End: **xs** size icons ::: ```tsx Label only } /> } start={} > Compact ``` ### Invert color scheme Use `invertColorScheme` to emphasize the chip with inverted colors. ```tsx Selected } start={} > Active State ``` ### Custom spacing Override automatic spacing with custom values when needed. ```tsx Custom spacing } > Asymmetric padding ``` ## Interactivity Provide `onPress` to make MediaChip interactive. Use `disabled` to prevent interaction. ```tsx console.log('Pressed!')}>Pressable console.log('Pressed!')} start={} > With Media console.log('Should not fire')}> Disabled ``` ## Accessibility When `onPress` is provided and visible text is unclear (or absent), provide an `accessibilityLabel`. ```tsx console.log('Open ETH')} start={} /> } onPress={() => console.log('Open filter')} > Filter ``` ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/chips/MediaChip/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/_webExamples.mdx ================================================ MediaChip automatically adjusts spacing based on the combination of `start`, `children`, and `end` content. ## Basics :::tip Recommended component sizes for regular-sized chips - Start: **24×24** circular media - End: **xs** size icons ::: ```tsx live Label only } /> } > Media + Label ``` ## Layout Configurations MediaChip supports all six content combinations automatically. ```tsx live Label only } /> } start={} /> } > Media + Label }>Label + Icon } start={} > All three ``` ## Styling ### Compact The compact variant reduces spacing for denser layouts. :::tip Recommended component sizes for compact chips - Start: **16×16** circular media - End: **xs** size icons ::: ```tsx live Label only } /> } start={} > Compact ``` ### Invert color scheme Use `invertColorScheme` to emphasize the chip with inverted colors. ```tsx live Selected } start={} > Active State ``` ### Custom spacing Override automatic spacing with custom values when needed. ```tsx live Custom spacing } > Asymmetric padding ``` ## Interactivity Provide `onClick` to make MediaChip interactive. Use `disabled` to prevent interaction. ```tsx live alert('Clicked!')}>Clickable alert('Clicked!')} start={} > With Media alert('Should not fire')}> Disabled ``` ## Accessibility When `onClick` is provided and visible text is unclear (or absent), provide an `accessibilityLabel`. ```tsx live alert('Open ETH')} start={} /> } onClick={() => alert('Open filter')} > Filter ``` ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/chips/MediaChip/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/index.mdx ================================================ --- id: mediaChip title: MediaChip platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/chips/MediaChip/toc-props'; import mobilePropsToc from ':docgen/mobile/chips/MediaChip/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/mobileMetadata.json ================================================ { "import": "import { MediaChip } from '@coinbase/cds-mobile/chips/MediaChip'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/chips/MediaChip.tsx", "description": "A chip with spacing optimized for displaying circular asset media and CTA accessories. Automatically adjusts padding based on content configuration.", "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "InputChip", "url": "/components/inputs/InputChip/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" }, { "label": "TabbedChips", "url": "/components/navigation/TabbedChips/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/MediaChip/webMetadata.json ================================================ { "import": "import { MediaChip } from '@coinbase/cds-web/chips/MediaChip'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/chips/MediaChip.tsx", "description": "A chip with spacing optimized for displaying circular asset media and CTA accessories. Automatically adjusts padding based on content configuration.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chips-mediachip--default", "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "InputChip", "url": "/components/inputs/InputChip/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" }, { "label": "TabbedChips", "url": "/components/navigation/TabbedChips/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Numpad/_mobileExamples.mdx ================================================ import useBaseUrl from '@docusaurus/useBaseUrl'; import ThemedImage from '@theme/ThemedImage'; ### Pin Numpad Primary use case for this is when a user is inputing a PIN code. Notice it does not have any of the hallmarks of a transactional numpad (CTA, utility button, suggested amounts). ```tsx const PinNumpadExample = () => { // localState const [visible, { toggleOn, toggleOff }] = useToggler(false); const [value, setValue] = useState(''); // hooks const safeBottomPadding = useSafeBottomPadding(); const palette = usePalette(); // callbacks const onPress = useCallback((input: NumpadValue) => { if (input === DELETE) { setValue((preValue) => preValue.slice(0, -1)); } else if (input !== SEPARATOR) { setValue((prevValue) => (prevValue.length < 4 ? prevValue + input : prevValue)); } }, []); const onLongPress = useCallback((input: NumpadValue) => { if (input === DELETE) { setValue(''); } else if (input !== SEPARATOR) { setValue((prevValue) => (prevValue.length < 4 ? prevValue + input : prevValue)); } }, []); return ( {Array.from({ length: 4 }).map((_, index) => ( ))} Unlock with your PIN ); }; ``` ### Transactional Numpad Best when used in the context of a transactional scenario. This could range from the standard Buy / Sell, all the way to Gift, Convert, Stake, etc. ```tsx const VALUE_MAX = 1000000; const TransactionalNumpadExample = () => { const [visible, { toggleOn, toggleOff }] = useToggler(false); const [value, setValue] = useState('100'); const safeBottomPadding = useSafeBottomPadding(); const onPress = useCallback((value: NumpadValue) => { switch (value) { case DELETE: setValue((prev) => prev.slice(0, -1)); break; case SEPARATOR: setValue((prev) => (prev.includes('.') ? prev : `${prev}.`)); break; default: setValue((prev) => { const newValue = prev + value; return parseFloat(newValue) > VALUE_MAX ? prev : newValue; }); } }, []); const onLongPress = useCallback((value: NumpadValue) => { switch (value) { case DELETE: setValue(''); break; case SEPARATOR: if (!value.includes('.')) { setValue((prevValue) => `${prevValue}.00`); } break; default: setValue((prev) => { const newValue = prev + value; return parseFloat(newValue) > VALUE_MAX ? prev : newValue; }); } }, []); const setValueCallback = useCallback((value: string) => () => setValue(value), []); const accessory = useMemo(() => { if (value === '') return ( Enter an amount greater than zero. ); if (parseFloat(value) >= VALUE_MAX) { return ( Max ${VALUE_MAX} ); } return ( ); }, [setValueCallback, value]); return ( } deleteAccessibilityLabel="delete" onLongPress={onLongPress} onPress={onPress} separatorAccessibilityLabel="period" /> ); }; ``` ================================================ FILE: apps/docs/docs/components/inputs/Numpad/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/numpad/Numpad/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Numpad/index.mdx ================================================ --- id: numpad title: Numpad platform_switcher_options: { mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/numpad/Numpad/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import mobileMetadata from './mobileMetadata.json'; } mobileExamples={} mobileExamplesToc={mobileExamplesToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/Numpad/mobileMetadata.json ================================================ { "import": "import { Numpad } from '@coinbase/cds-mobile/numpad/Numpad'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/numpad/Numpad.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=14012-3416&t=6hbCJmIQxCsPCzeU-1", "description": "A keypad for entering numbers.", "relatedComponents": [ { "label": "TextInput", "url": "/components/inputs/TextInput/" }, { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "DatePicker", "url": "/components/other/DatePicker/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Pressable/_mobileExamples.mdx ================================================ ### Basic Pressable Pressables support an `onPress` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop. ```jsx Click me... ``` ### Pressable with Transparent Background ```jsx Click me... ``` ### Block Pressable Pressables support an `onPress` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop. ```jsx Click me... ``` ### A11y On mobile, all [AccessibilityProps](https://reactnative.dev/docs/accessibility#accessibility-properties) can be passed, with `accessibilityComponentType` and `accessibilityTraits` defaulting to `button`, and `accessibilityState` being set based on loading/disabled props. On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) can be passed, with `aria-busy` being set based on loading/disabled props. > The `as` prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs. ================================================ FILE: apps/docs/docs/components/inputs/Pressable/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/system/Pressable/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Pressable/_webExamples.mdx ================================================ ### Basic Pressable Pressables support an `onClick` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop. ```jsx live Click me... ``` ### Pressable with Transparent Background ```jsx live Click me... ``` ### Block Pressable Pressables expand to 100% width when the `block` prop is passed. ```jsx live Click me... ``` ### A11y On mobile, all [AccessibilityProps](https://reactnative.dev/docs/accessibility#accessibility-properties) can be passed, with `accessibilityComponentType` and `accessibilityTraits` defaulting to `button`, and `accessibilityState` being set based on loading/disabled props. On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) can be passed, with `aria-busy` being set based on loading/disabled props. > The `as` prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs. ================================================ FILE: apps/docs/docs/components/inputs/Pressable/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/system/Pressable/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Pressable/index.mdx ================================================ --- id: pressable title: Pressable platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import { PressableBanner } from '@site/src/components/page/ComponentBanner/PressableBanner'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/system/Pressable/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/system/Pressable/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } /> } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/Pressable/mobileMetadata.json ================================================ { "import": "import { Pressable } from '@coinbase/cds-mobile/system/Pressable'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/system/Pressable.tsx", "description": "Extends the Interactable component to add accessibility support for press interactions.", "relatedComponents": [ { "label": "Interactable", "url": "/components/inputs/Interactable/" }, { "label": "Button", "url": "/components/inputs/Button/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Pressable/webMetadata.json ================================================ { "import": "import { Pressable } from '@coinbase/cds-web/system/Pressable'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/system/Pressable.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-pressable--variations", "description": "Extends the Interactable component to add accessibility support for press interactions.", "relatedComponents": [ { "label": "Interactable", "url": "/components/inputs/Interactable/" }, { "label": "Button", "url": "/components/inputs/Button/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Radio/_mobileExamples.mdx ================================================ ### Basic Usage Radio components are typically used individually as part of a radio group. Each radio represents a single option in a mutually exclusive set. ```jsx function BasicRadio() { const [selectedValue, setSelectedValue] = useState('option1'); return ( setSelectedValue(value)} > Option 1 setSelectedValue(value)} > Option 2 setSelectedValue(value)} > Option 3 ); } ``` ### Radio Groups The recommended way to use Radio components is with a ControlGroup for better accessibility and easier state management. ```jsx function RadioGroupExample() { const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, { value: 'ltc', children: 'Litecoin' }, ]; const [selectedCurrency, setSelectedCurrency] = useState('btc'); return ( ); } ``` ### Custom Colors You can customize the radio's color using the `controlColor` prop. ```jsx function CustomColorRadio() { const [selectedColor, setSelectedColor] = useState('default'); return ( setSelectedColor(value)} > Default Color setSelectedColor(value)} controlColor="accentBoldGreen" > Custom Green setSelectedColor(value)} controlColor="accentBoldPurple" > Custom Purple ); } ``` ### Disabled State Radio components can be disabled to prevent user interaction. ```jsx function DisabledRadio() { const [selectedValue, setSelectedValue] = useState('enabled'); return ( setSelectedValue(value)} > Enabled Radio setSelectedValue(value)} > Disabled & Unchecked setSelectedValue(value)} > Disabled & Checked ); } ``` ### Accessibility Radio components on mobile should always include proper accessibility labels and hints. ```jsx function AccessibleRadio() { const [selectedPayment, setSelectedPayment] = useState('credit'); return ( setSelectedPayment(value)} accessibilityLabel="Credit Card" accessibilityHint="Pay with credit card" > Credit Card setSelectedPayment(value)} accessibilityLabel="Debit Card" accessibilityHint="Pay with debit card" > Debit Card setSelectedPayment(value)} accessibilityLabel="Cryptocurrency" accessibilityHint="Pay with cryptocurrency" > Cryptocurrency ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/Radio/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/controls/Radio/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Radio/_webExamples.mdx ================================================ ### Basic Usage Radio components are typically used individually as part of a radio group. Each radio represents a single option in a mutually exclusive set. ```jsx live function BasicRadio() { const [selectedValue, setSelectedValue] = useState('option1'); return ( setSelectedValue(e.target.value)} > Option 1 setSelectedValue(e.target.value)} > Option 2 setSelectedValue(e.target.value)} > Option 3 ); } ``` ### Radio Groups The recommended way to use Radio components is with a ControlGroup for better accessibility and easier state management. ```jsx live function RadioGroupExample() { const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, { value: 'ltc', children: 'Litecoin' }, ]; const [selectedCurrency, setSelectedCurrency] = useState('btc'); return ( setSelectedCurrency(e.target.value)} name="currency-radio-group" /> ); } ``` ### Custom Colors You can customize the radio's color using the `controlColor` prop. ```jsx live function CustomColorRadio() { const [selectedColor, setSelectedColor] = useState('default'); return ( setSelectedColor(e.target.value)} > Default Color setSelectedColor(e.target.value)} controlColor="accentBoldGreen" > Custom Green setSelectedColor(e.target.value)} controlColor="accentBoldPurple" > Custom Purple ); } ``` ### Disabled State Radio components can be disabled to prevent user interaction. ```jsx live function DisabledRadio() { const [selectedValue, setSelectedValue] = useState('enabled'); return ( setSelectedValue(e.target.value)} > Enabled Radio setSelectedValue(e.target.value)} > Disabled & Unchecked setSelectedValue(e.target.value)} > Disabled & Checked ); } ``` ### Custom Styling You can further customize the radio's appearance using style props. ```jsx live function CustomStyledRadio() { const [selectedStyle, setSelectedStyle] = useState('styled1'); return ( setSelectedStyle(e.target.value)} background="bgSecondary" borderColor="accentBoldBlue" controlColor="accentBoldBlue" > Custom Background & Border setSelectedStyle(e.target.value)} controlColor="accentBoldOrange" borderColor="accentBoldOrange" > Orange Theme ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/Radio/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/Radio/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Radio/index.mdx ================================================ --- id: radio title: Radio platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/controls/Radio/toc-props'; import mobilePropsToc from ':docgen/mobile/controls/Radio/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/Radio/mobileMetadata.json ================================================ { "import": "import { Radio } from '@coinbase/cds-mobile/controls/Radio'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/Radio.tsx", "description": "Radio is a control component that allows users to select one option from a set of mutually exclusive options.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=465-13782&t=DfwvmXdSSL0yIBag-0", "relatedComponents": [ { "label": "Checkbox", "url": "/components/inputs/Checkbox" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup" }, { "label": "RadioCell", "url": "/components/inputs/RadioCell" }, { "label": "RadioGroup", "url": "/components/inputs/RadioGroup" }, { "label": "Switch", "url": "/components/inputs/Switch" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/Radio/webMetadata.json ================================================ { "import": "import { Radio } from '@coinbase/cds-web/controls/Radio'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/Radio.tsx", "description": "Radio is a control component that allows users to select one option from a set of mutually exclusive options.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=465-13782&t=DfwvmXdSSL0yIBag-0", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-radiogroup--normal", "relatedComponents": [ { "label": "Checkbox", "url": "/components/inputs/Checkbox" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup" }, { "label": "RadioCell", "url": "/components/inputs/RadioCell" }, { "label": "RadioGroup", "url": "/components/inputs/RadioGroup" }, { "label": "Switch", "url": "/components/inputs/Switch" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_mobileExamples.mdx ================================================ ### Basic usage ```tsx function RadioCellExample() { const [value, setValue] = React.useState('one'); return ( {}} value="three" disabled /> ); } ``` ### With Custom Content and Styling ```tsx function CustomRadioCellExample() { const [selectedPlan, setSelectedPlan] = React.useState('pro'); return ( Perfect for individuals getting started $9/month • Up to 5 projects • 1GB storage } onChange={setSelectedPlan} title="Basic Plan" value="basic" /> Great for growing teams and businesses $29/month • Unlimited projects • 10GB storage • Most Popular } onChange={setSelectedPlan} title="Pro Plan" value="pro" /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/controls/RadioCell/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/controls/RadioCell/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_webExamples.mdx ================================================ ### Basic usage ```tsx live function RadioCellExample() { const [value, setValue] = React.useState('one'); return ( setValue('one')} value="one" name="radio-cell-example" /> setValue('two')} value="two" name="radio-cell-example" /> {}} value="three" name="radio-cell-example" disabled /> ); } ``` ### With Custom Content and Styling ```tsx live function CustomRadioCellExample() { const [selectedPlan, setSelectedPlan] = useState('pro'); return ( Perfect for individuals getting started $9/month • Up to 5 projects • 1GB storage } onChange={(e) => setSelectedPlan(e.target.value)} title="Basic Plan" value="basic" name="subscription-plan" /> Great for growing teams and businesses $29/month • Unlimited projects • 10GB storage • Most Popular } onChange={(e) => setSelectedPlan(e.target.value)} title="Pro Plan" value="pro" name="subscription-plan" /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/RadioCell/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { RadioCell } from '@coinbase/cds-web/controls'; import webStylesData from ':docgen/web/controls/RadioCell/styles-data'; ## Explorer {(classNames) => ( )} ## Selectors ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/index.mdx ================================================ --- id: radioCell title: RadioCell platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/controls/RadioCell/toc-props'; import mobilePropsToc from ':docgen/mobile/controls/RadioCell/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webStyles={} webExamples={} mobilePropsTable={} mobileStyles={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} webStylesToc={webStylesToc} mobilePropsToc={mobilePropsToc} mobileStylesToc={mobileStylesToc} /> ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/mobileMetadata.json ================================================ { "import": "import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/RadioCell.tsx", "description": "A selectable cell that pairs a radio button with a title and description for single-choice selections.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-7435&t=bB42Gj18RZGeD6DD-4", "relatedComponents": [ { "label": "CheckboxCell", "url": "/components/inputs/CheckboxCell/?platform=mobile" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup/?platform=mobile" }, { "label": "Radio", "url": "/components/inputs/Radio/?platform=mobile" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/RadioCell/webMetadata.json ================================================ { "import": "import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/RadioCell.tsx", "description": "A selectable cell that pairs a radio button with a title and description for single-choice selections.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-radiocell--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-7435&t=bB42Gj18RZGeD6DD-4", "relatedComponents": [ { "label": "CheckboxCell", "url": "/components/inputs/CheckboxCell/" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup/" }, { "label": "Radio", "url": "/components/inputs/Radio/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/_mobileExamples.mdx ================================================ ## Deprecation Notice :::danger Deprecated Component **RadioGroup is deprecated and will be removed in a future version.** Use **[ControlGroup](/components/inputs/ControlGroup)** with `accessibilityRole="radiogroup"` instead for better accessibility, consistency, and maintainability. ::: :::caution Types RadioGroup onChange fails without a string type declaration for setGroup fns. ``` const [group, setGroup] = useState(); ``` ::: ## Migration Guide ### ✅ Recommended: Using ControlGroup The new recommended approach provides better accessibility, cleaner API, and consistent behavior across the design system. ```jsx function RecommendedRadioGroup() { const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, { value: 'ltc', children: 'Litecoin' }, ]; const [selectedCurrency, setSelectedCurrency] = useState('btc'); return ( Selected: {selectedCurrency} ); } ``` ### Migration Steps 1. **Replace RadioGroup with [ControlGroup](/components/inputs/ControlGroup)**: ```jsx // Old (deprecated) // New (recommended) ``` 2. **Update options format**: ```jsx // Old: Object format const options = { btc: 'Bitcoin', eth: 'Ethereum' }; // New: Array format const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, ]; ``` 3. **Update onChange handler**: ```jsx // Old: Direct value callback const oldOnChange = (value) => setSelected(value); // New: Value-only callback (mobile pattern) const newOnChange = (value) => setSelected(value); ``` 4. **Update accessibility**: ```jsx // Old: No specific role requirement // New: Explicit accessibility role ``` ## Legacy Usage (Deprecated) :::warning Legacy Example The following examples show the **deprecated** RadioGroup usage. **Do not use this in new code.** Use [ControlGroup](/components/inputs/ControlGroup) instead. ::: ### Basic RadioGroup (Legacy) ```jsx function LegacyRadioGroupDemo() { const options = { btc: 'Bitcoin', eth: 'Ethereum', dai: 'Dai', }; const [group, setGroup] = useState('btc'); return ( Currency Selection (Legacy RadioGroup) Selected: {group} ); } ``` ### With Accessibility Features (Legacy) ```jsx function LegacyAccessibleRadioGroup() { const options = { 'plan-basic': 'Basic Plan', 'plan-pro': 'Professional Plan', 'plan-enterprise': 'Enterprise Plan', }; const [selectedPlan, setSelectedPlan] = useState('plan-pro'); return ( ); } ``` ### Color Customization (Legacy) Like other control components (i.e. Checkbox, Switch), you can customize the color of the Radio by setting the `controlColor` prop. ```jsx function CustomColors() { // static values should live outside the component in product code. const options = { btc: 'Bitcoin', eth: 'Ethereum', dai: 'Dai', }; const [group, setGroup] = useState(); return ( ); } ``` For more advanced color customization, you can use additional style props on individual Radio components like `background`, `borderColor`, and `color`: ```jsx function AdvancedCustomColors() { const [checked, setChecked] = useState(false); return ( setChecked((s) => !s)}> Control color prop setChecked((s) => !s)} > Advanced styling ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/controls/RadioGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/_webExamples.mdx ================================================ ## Deprecation Notice :::danger Deprecated Component **RadioGroup is deprecated and will be removed in a future version.** Use **[ControlGroup](/components/inputs/ControlGroup)** with `role="radiogroup"` instead for better accessibility, consistency, and maintainability. ::: :::caution Types RadioGroup onChange fails without a string type declaration for setGroup fns. ``` const [group, setGroup] = useState(); ``` ::: ## Migration Guide ### ✅ Recommended: Using ControlGroup The new recommended approach provides better accessibility, cleaner API, and consistent behavior across the design system. ```jsx live function RecommendedRadioGroup() { const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, { value: 'ltc', children: 'Litecoin' }, ]; const [selectedCurrency, setSelectedCurrency] = useState('btc'); return ( setSelectedCurrency(e.target.value)} name="recommended-radio-group" /> Selected: {selectedCurrency} ); } ``` ### Migration Steps 1. **Replace RadioGroup with [ControlGroup](/components/inputs/ControlGroup)**: ```jsx // Old (deprecated) // New (recommended) ``` 2. **Update options format**: ```jsx // Old: Object format const options = { btc: 'Bitcoin', eth: 'Ethereum' }; // New: Array format const options = [ { value: 'btc', children: 'Bitcoin' }, { value: 'eth', children: 'Ethereum' }, ]; ``` 3. **Update onChange handler**: ```jsx // Old: Direct value callback const oldOnChange = (value) => setSelected(value); // New: Event-based handler const newOnChange = (e) => setSelected(e.target.value); ``` 4. **Add proper role**: ```jsx // Always include role="radiogroup" for accessibility ``` ## Legacy Usage (Deprecated) :::warning Legacy Example The following examples show the **deprecated** RadioGroup usage. **Do not use this in new code.** Use [ControlGroup](/components/inputs/ControlGroup) instead. ::: ### Basic RadioGroup (Legacy) ```jsx live function LegacyRadioGroupDemo() { // static values should live outside the component in product code. const options = { btc: 'Bitcoin', eth: 'Ethereum', dai: 'Dai', }; const [group, setGroup] = useState('btc'); return ( Currency Selection (Legacy RadioGroup) Choose a currency } name="radio-group1" value={group} onChange={setGroup} options={options} /> Selected: {group} ); } ``` ### With Custom Label (Legacy) ```jsx live function LegacyRadioGroupWithLabel() { const options = { 'yellow-jacket': 'Yellow Jacket', bruin: 'Bruin', bronco: 'Bronco', }; const [mascot, setMascot] = useState('bruin'); return ( Choose a mascot } name="radio-group2" value={mascot} onChange={setMascot} options={options} /> ); } ``` ### Color Customization (Legacy) Like other control components (i.e. Checkbox, Switch), you can customize the color of the Radio by setting the `controlColor` prop. ```jsx live function CustomColors() { // static values should live outside the component in product code. const options = { btc: 'Bitcoin', eth: 'Ethereum', dai: 'Dai', }; const [checked, setChecked] = useState(false); const [group, setGroup] = useState(); return ( setChecked((s) => !s)} checked={checked} > Custom control color ); } ``` For more advanced color customization, you can use additional style props on individual Radio components like `background`, `borderColor`, and `color`: ```jsx live function AdvancedCustomColors() { const [checked, setChecked] = useState(false); return ( setChecked((s) => !s)}> Control color prop setChecked((s) => !s)} > Advanced styling ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/RadioGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/index.mdx ================================================ --- id: radioGroup title: RadioGroup platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/controls/RadioGroup/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/controls/RadioGroup/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/mobileMetadata.json ================================================ { "import": "import { RadioGroup } from '@coinbase/cds-mobile/controls/RadioGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/RadioGroup.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=465-13782", "description": "Radio is a control component that allows users to select one option from a set.", "relatedComponents": [ { "label": "Radio", "url": "/components/inputs/Radio/", "description": "Radio is a control component that allows users to select one option from a set." }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup/", "description": "ControlGroup is a component that allows users to group related controls together." } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/RadioGroup/webMetadata.json ================================================ { "import": "import { RadioGroup } from '@coinbase/cds-web/controls/RadioGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/RadioGroup.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-radiogroup--normal", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=465-13782", "description": "Radio is a control component that allows users to select one option from a set.", "relatedComponents": [ { "label": "Radio", "url": "/components/inputs/Radio/" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/_mobileExamples.mdx ================================================ ### Basic usage ```tsx function BasicSearchInput() { const [value, setValue] = useState(''); return ( setValue('')} onSearch={(searchTerm) => console.log('Searching for:', searchTerm)} placeholder="Search..." /> Submit on keyboard or tap search icon ); } ``` ### With Back Navigation ```tsx function SearchInputWithBack() { const [value, setValue] = useState(''); return ( setValue('')} onBack={() => console.log('Navigating back')} onSearch={(searchTerm) => console.log('Searching for:', searchTerm)} placeholder="Focus to see back arrow..." /> Search icon changes to back arrow on focus ); } ``` ### Variants When `bordered={false}`, SearchInput keeps focused border styling disabled by default. Set `focusedBorderWidth` to opt into a focus border style. ```tsx function SearchInputVariants() { const [value1, setValue1] = useState(''); const [value2, setValue2] = useState(''); const [value3, setValue3] = useState(''); const [value4, setValue4] = useState(''); return ( setValue1('')} placeholder="Always show search icon..." disableBackArrow /> setValue2('')} placeholder="Borderless search (default focus behavior)..." bordered={false} /> setValue3('')} placeholder="Borderless search (with focus border)..." bordered={false} focusedBorderWidth={200} /> setValue4('')} placeholder="No icons..." hideStartIcon hideEndIcon /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/controls/SearchInput/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/_webExamples.mdx ================================================ ### Basic usage ```tsx live function BasicSearchInput() { const [value, setValue] = useState(''); return ( setValue('')} onSearch={(searchTerm) => console.log('Searching for:', searchTerm)} placeholder="Search..." /> Press Enter to trigger search ); } ``` ### Variants When `bordered={false}`, SearchInput keeps focused border styling disabled by default. Set `focusedBorderWidth` to opt into a focus border style. ```tsx live function SearchInputVariants() { const [value1, setValue1] = useState(''); const [value2, setValue2] = useState(''); const [value3, setValue3] = useState(''); const [value4, setValue4] = useState(''); return ( setValue1('')} placeholder="Compact search..." compact /> setValue2('')} placeholder="Borderless search (default focus behavior)..." bordered={false} /> setValue3('')} placeholder="Borderless search (with focus border)..." bordered={false} focusedBorderWidth={200} /> setValue4('')} placeholder="No icons..." hideStartIcon hideEndIcon /> ); } ``` ### With Custom End Element ```tsx live function CustomEndSearchInput() { const [value, setValue] = useState(''); return ( setValue('')} placeholder="Custom end element..." end={ console.log('Filter clicked')} />} /> ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/SearchInput/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/index.mdx ================================================ --- id: searchInput title: SearchInput platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/controls/SearchInput/toc-props'; import mobilePropsToc from ':docgen/mobile/controls/SearchInput/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/mobileMetadata.json ================================================ { "import": "import { SearchInput } from '@coinbase/cds-mobile/controls/SearchInput'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/SearchInput.tsx", "description": "A control for searching a dataset.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=67-974&t=qPs9YwJiJSNpJUR1-4", "relatedComponents": [ { "label": "TextInput", "url": "/components/inputs/TextInput/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/SearchInput/webMetadata.json ================================================ { "import": "import { SearchInput } from '@coinbase/cds-web/controls/SearchInput'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/SearchInput.tsx", "description": "A control for searching a dataset.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-inputs-searchinput--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=67-974&t=qPs9YwJiJSNpJUR1-4", "relatedComponents": [ { "label": "TextInput", "url": "/components/inputs/TextInput/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/SegmentedControl/_webExamples.mdx ================================================ SegmentedControl uses native radio inputs with labels to provide an accessible, compact switch between options. It supports both text labels and icon options. ## Basics Pass an array of `options` with `value` and `label` properties. Use `value` and `onChange` for controlled usage, or omit them for uncontrolled behavior. The component manages its own state when uncontrolled. ```jsx live function SegmentedControlBasic() { const options = [ { value: 'eth', label: 'ETH' }, { value: 'usd', label: 'USD' }, { value: 'btc', label: 'BTC' }, ]; const [selected, setSelected] = useState('eth'); return ( Selected: {selected} ); } ``` ### Uncontrolled When you omit `value` and `onChange`, SegmentedControl manages selection internally. Use `onChange` only when you need to react to changes. ```jsx live function SegmentedControlUncontrolled() { const options = [ { value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }, ]; return ; } ``` ## Icons For icon-only segments, set `type="icon"` and provide `iconSize` and options with `label` as an icon name. Use `accessibilityLabel` on each option for screen readers. ```jsx live function SegmentedControlIcons() { const options = [ { value: 'eth', label: 'ethereum', accessibilityLabel: 'Ethereum' }, { value: 'usd', label: 'cashUSD', accessibilityLabel: 'US Dollar' }, ]; const [value, setValue] = useState('eth'); return ( ); } ``` You can also set `active` to `true` to apply an active icon style. ```jsx live function SegmentedControlActiveIcons() { const options = [ { value: 'eth', label: 'ethereum', accessibilityLabel: 'Ethereum', active: true }, { value: 'usd', label: 'cashUSD', accessibilityLabel: 'US Dollar' }, ]; const [value, setValue] = useState('eth'); return ( ); } ``` ## Disabled Disable the entire control with the `disabled` prop. ```jsx live function SegmentedControlDisabled() { const options = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, ]; return ; } ``` ## Accessibility Provide `accessibilityLabel` on each option when using icons so screen readers can announce the segment. For text options, the label text is used automatically. ```jsx live function SegmentedControlAccessible() { const options = [ { value: 'eth', label: 'ethereum', accessibilityLabel: 'View in Ethereum' }, { value: 'usd', label: 'cashUSD', accessibilityLabel: 'View in US Dollars' }, ]; const [value, setValue] = useState('eth'); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/SegmentedControl/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/SegmentedControl/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/SegmentedControl/index.mdx ================================================ --- id: segmentedControl title: SegmentedControl platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/controls/SegmentedControl/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/SegmentedControl/webMetadata.json ================================================ { "import": "import { SegmentedControl } from '@coinbase/cds-web/controls/SegmentedControl'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/SegmentedControl.tsx", "description": "A horizontal control composed of mutually exclusive segments, used to switch between related options.", "warning": "SegmentedControl is deprecated and will be removed in a future version. Please use Tabs or SegmentedTabs instead.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-segmented-control--normal", "relatedComponents": [ { "label": "SegmentedTabs", "url": "/components/navigation/SegmentedTabs/" }, { "label": "RadioGroup", "url": "/components/inputs/RadioGroup/" }, { "label": "ControlGroup", "url": "/components/inputs/ControlGroup/" } ] } ================================================ FILE: apps/docs/docs/components/inputs/Select/_mobileExamples.mdx ================================================ ### Default Composition The mobile version of `Select` is quite different from web; where on mobile, `Select` is just the trigger to toggle the visibility of a `Menu` that is contained in a `Tray`. On mobile, all `SelectOption`s must be wrapped in a `Menu`. Think of it as a controlled `Select` on web, where you pass it the `value` and `onChange` handler. ```tsx const SelectMobile = () => { const [isTrayVisible, { toggleOff: handleClose, toggleOn: handleOpenTray }] = useToggler(false); const [value, setValue] = useState(); const trayRef = useRef(undefined); const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']; const handleOptionPress = () => { trayRef.current?.handleClose(); }; return ( <> {isTrayVisible && ( {/* You must wrap options in Menu. Treat it as a Select on web */} {options.map((option: string) => ( ))} )} ); }; ``` ### Value/Label Object Model Sometimes you may want to surface a label instead of the select value. You can pass a `valueLabel` prop with the currently selected value's corresponding label, which will appear to be the value of the Select. ```jsx const SelectWithValueLabel = () => { const [value, setValue] = useState(); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; const selectedValueLabel = value && options.find((option) => option.value === value).label; return ( <> {isTrayVisible && ( {options.map((option) => ( ))} )} ); }; ``` ### Input Stack Options The `Select` trigger can be customized similar to `TextInput`. These options are also available for mobile implementations. #### Label and Helper Text You can add a label above the input and helper text below to provide context and guidance to users. ```jsx } > ... ``` ### Compact When space is tight, this brings the label inside of the Input. Should be used with a `compact` `SelectOption`. ```jsx ... ``` ### Variants Variants can be used to surface positive or negative feedback. The available variants are `positive`, `negative`, `primary`, `foreground`, `foregroundMuted`, and `secondary`. ```jsx ... ``` ### Label Variants Select supports two label variants: `outside` (default) and `inside`. Note that the `compact` prop, when set to true, will override label variant preference. :::warning When using the `inside` label variant, you should always include a `placeholder` prop. ::: #### Outside label (default) ```jsx ... ``` #### Inside label ```jsx ... ``` #### Inside label (with start content) ```jsx } placeholder="Search and select" > ... ``` ================================================ FILE: apps/docs/docs/components/inputs/Select/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/controls/RadioGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Select/_webExamples.mdx ================================================ ### Default Composition `Select` can take anything as a child, however, we strongly recommend that you use `SelectOption`. It has the same API as a `ListCell`, but with custom styles specific to usage within a `Select`. `SelectOption` also comes with a lot of baked in functionality, like keyboard navigation, accessibility properties, and focus behaviors. ```jsx live function DefaultSelect() { const [value, setValue] = useState(); const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6']; return ( {options.map((option) => ( ))} ); } ``` ### Value/Label Object Model Sometimes you may want to surface a label instead of the select value. You can pass a `valueLabel` prop with the currently selected value's corresponding label, which will appear to be the value of the Select. ```jsx live function DefaultSelect() { const [value, setValue] = useState(); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; const selectedValueLabel = value && options.find((option) => option.value === value).label; return ( {options.map((option) => ( ))} ); } ``` ### Input Stack Options The `Select` trigger can be customized similar to `TextInput`. These options are also available for mobile implementations. #### Label and Helper Text When space is tight, this brings the label inside of the Input. Should be used with a `compact` `SelectOption`. ```jsx live function LabelHelperTextSelect() { const [value, setValue] = useState('Option 2'); const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6']; return ( } > {options.map((option) => ( ))} ); } ``` ### Compact When space is tight, this brings the label inside of the Input. Should be used with a `compact` `SelectOption`. ```jsx live function CompactSelect() { const [value, setValue] = useState('Option 2'); const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6']; return ( {options.map((option) => ( ))} ); } ``` ### Variants Variants can be used to surface positive or negative feedback. ```jsx live function Variant() { const [value, setValue] = useState('Positive'); const options = ['Positive', 'Negative', 'Primary', 'Secondary', 'Foreground']; return ( {options.map((option) => ( ))} ); } ``` ### Label Variants Select supports two label variants: `outside` (default) and `inside`. Note that the `compact` prop, when set to true, will override label variant preference. :::warning When using the `inside` label variant, you should always include a `placeholder` prop. ::: ```jsx live Outside label (default): Inside label: Inside label (with start content): } placeholder="Search and select" > ``` ================================================ FILE: apps/docs/docs/components/inputs/Select/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/controls/RadioGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/Select/index.mdx ================================================ --- id: select title: Select (Deprecated) platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import { SelectBanner } from '@site/src/components/page/ComponentBanner/SelectBanner'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/controls/Select/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/controls/Select/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } /> } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/inputs/Select/mobileMetadata.json ================================================ { "import": "import { Select } from '@coinbase/cds-mobile/controls/Select'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/controls/Select.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1", "description": "A control for selecting from a list of options.", "warning": "This component is deprecated. Please use the new Select alpha component instead.", "relatedComponents": [ { "label": "SelectOption", "url": "/components/inputs/SelectOption/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/inputs/Select/webMetadata.json ================================================ { "import": "import { Select } from '@coinbase/cds-web/controls/Select'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/controls/Select.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-select-select--asset-select", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=415-15061&t=6hbCJmIQxCsPCzeU-1", "description": "A Dropdown control for selecting from a list of options.", "warning": "This component is deprecated. Please use the new Select alpha component instead.", "relatedComponents": [ { "label": "SelectAlpha", "url": "/components/inputs/SelectAlpha/" }, { "label": "Dropdown", "url": "/components/layout/Dropdown/" }, { "label": "SelectOption", "url": "/components/inputs/SelectOption/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" }, { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/inputs/SelectAlpha/_mobileExamples.mdx ================================================ :::note Duplicate Values Avoid using options with duplicate values. Each option's `value` should be unique within the options array to ensure proper selection behavior. ::: ## Single Select Basic single selection with predefined options for mobile interfaces. ```jsx function SingleSelectExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; return ( ); } ``` ## Single Select with Groups Organize options into logical groups for better organization on mobile. ```jsx function SingleSelectWithGroupsExample() { const [value, setValue] = useState(null); const groupedOptions = [ { label: 'Group A', options: [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ], }, { label: 'Group B', options: [ { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, ], }, { label: 'Group C', options: [{ value: '6', label: 'Option 6' }], }, ]; return ( ); } ``` ## Alignment The mobile Select component supports aligning the selected value(s) using the `align` prop. ::::note Left / right alignment is preferred for styling. :::: ```jsx function AlignmentExample() { const exampleOptions = [ { value: null, label: 'Remove selection' }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, { value: '6', label: 'Option 6' }, { value: '7', label: 'Option 7' }, { value: '8', label: 'Option 8' }, ]; const [singleValue, setSingleValue] = useState('1'); const { value: multiValue, onChange } = useMultiSelect({ initialValue: ['1'], }); return ( ); } ``` ## Accessibility Props The mobile Select component supports comprehensive accessibility features including custom labels, hints, and roles. ```jsx function AccessibilityExample() { const [value, setValue] = useState('2'); const options = [ { value: '1', label: 'High Priority' }, { value: '2', label: 'Medium Priority' }, { value: '3', label: 'Low Priority' }, ]; return ( ); } ``` ## Compact Mode The Select component can be rendered in a compact size for denser mobile UIs. ```jsx function CompactExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Small Option 1' }, { value: '2', label: 'Small Option 2' }, { value: '3', label: 'Small Option 3' }, ]; return ( ); } ``` ## Disabled States Components can be disabled entirely or have individual options disabled. ```jsx function DisabledExample() { const [value1, setValue1] = useState('2'); const [value2, setValue2] = useState('2'); const optionsWithDisabled = [ { value: '1', label: 'Option 1', disabled: true }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4', disabled: true }, ]; return ( ); } ``` ## Options with Descriptions Options can include descriptions for additional context, perfect for mobile interfaces. ```jsx function DescriptionExample() { const [value, setValue] = useState('1'); const optionsWithDescriptions = [ { value: '1', label: 'Bitcoin', description: 'The first cryptocurrency' }, { value: '2', label: 'Ethereum', description: 'Smart contract platform' }, { value: '3', label: 'USDC', description: 'USD-backed stablecoin' }, { value: '4', label: 'Solana', description: 'High-performance blockchain' }, ]; return ( } placeholder="Search for options" /> ); } ``` ## End Node Add an icon or element at the end of the select control. ```jsx function EndNodeExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Search Result 1' }, { value: '2', label: 'Search Result 2' }, { value: '3', label: 'Search Result 3' }, ]; return ( ); } ``` ## Empty State Handle empty option lists with custom messages optimized for mobile screens. ```jsx function EmptyStateExample() { const [value, setValue] = useState(null); return ( No items found. Try refreshing! } placeholder="No options" /> ); } ``` ## Long Labels Handle very long option labels that may wrap on smaller mobile screens. ```jsx function LongLabelsExample() { const [value, setValue] = useState('1'); const longOptions = [ { value: '1', label: 'This is an extremely long option label that should test how the component handles very long text content on mobile devices', }, { value: '2', label: 'Another super long option label with even more text to see how it wraps or truncates in the mobile UI', }, { value: '3', label: 'Short', }, { value: '4', label: 'A moderately long label that is somewhere between short and extremely long', }, ]; return ( ); } ``` ## Custom Select All labels Customize the select all functionality in multi-select mode for mobile. ```jsx function CustomSelectAllExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1'], }); const options = [ { value: '1', label: 'Monday' }, { value: '2', label: 'Tuesday' }, { value: '3', label: 'Wednesday' }, { value: '4', label: 'Thursday' }, { value: '5', label: 'Friday' }, { value: '6', label: 'Saturday' }, { value: '7', label: 'Sunday' }, ]; return ( ); } ``` ## Combined Features Example combining multiple features for a rich mobile experience. ```jsx function CombinedFeaturesExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Premium Account', description: 'Access to all features', accessory: , media: , }, { value: '2', label: 'Standard Account', description: 'Basic features included', media: , }, { value: '3', label: 'Trial Account', description: 'Limited time access', disabled: true, media: , }, ]; return ( ); } ``` ## No Visible Label Select without a visible label (accessibility label/hint still required). ```jsx function NoLabelExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Variant Combinations Combine compact mode with different variants. ```jsx function VariantCombinationsExample() { const [value1, setValue1] = useState('1'); const [value2, setValue2] = useState('2'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Multi-Select with Descriptions Multi-select mode with descriptive options. ```jsx function MultiSelectWithDescriptionsExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1', '2'], }); const optionsWithDescriptions = [ { value: '1', label: 'Push Notifications', description: 'Get alerts on your device' }, { value: '2', label: 'Email Updates', description: 'Weekly newsletter' }, { value: '3', label: 'SMS Alerts', description: 'Text message notifications' }, { value: '4', label: 'In-App Messages', description: 'Messages within the app' }, ]; return ( ); } ``` ## Custom Long Placeholder Extended placeholder text for mobile screens. ```jsx function LongPlaceholderExample() { const [value, setValue] = useState(null); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Options with Only Media Options with media icons only. ```jsx function OnlyMediaExample() { const [value, setValue] = useState('1'); const optionsWithMedia = [ { value: '1', label: 'Home', media: , }, { value: '2', label: 'Profile', media: , }, { value: '3', label: 'Settings', media: , }, ]; return ( ); } ``` ## Custom Select All Option Customize the select all option component in multi-select. ```jsx function CustomSelectAllOptionExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1'], }); const CustomSelectAllOption = ({ onChange, selected, disabled, label, style }) => { return ( onChange('select-all')} paddingX={3} paddingY={4} style={style} > {String(label || 'Select Everything')} ); }; const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; return ( ); } ``` ## Stress Test Many Options Test performance with many options on mobile. ```jsx function StressTestExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1', '5', '10'], }); const manyOptions = Array.from({ length: 100 }, (_, i) => ({ value: (i + 1).toString(), label: `Option ${i + 1}`, description: i % 3 === 0 ? `Description for ${i + 1}` : undefined, disabled: i % 15 === 0, accessory: i % 10 === 0 ? : undefined, })); return ( ); } ``` ## Custom class names You can use custom class names on the various subcomponents in Select. ```jsx function CustomClassNamesExamples() { const exampleOptions = [ { value: null, label: 'Remove selection' }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; const [value, setValue] = useState('1'); return ( Custom Label {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */} } value={value} onChange={setValue} options={options} placeholder="Select an option" /> ); } ``` ## Custom components Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select. ### Customizable subcomponents - **SelectControlComponent**: Trigger component used to open and close the Select. - **SelectDropdownComponent**: Component which renders the dropdown menu and SelectOptionComponents. - **SelectOptionComponent**: Component which renders the content of an option in the select. - **SelectAllOptionComponent**: Component which renders the Select All option in a multi-select select menu. - **SelectEmptyDropdownContentsComponent**: Component which renders as the select menu's content when no options are passed in. Below is a diagram to help visualize the Select anatomy. ```text Select ├── SelectControlComponent (trigger to open/close) └── SelectDropdownComponent (dropdown menu) ├── SelectAllOptionComponent ├── SelectOptionComponent (option 1) ├── SelectOptionComponent (option 2) ├── SelectOptionComponent (option 3) └── SelectOptionComponent (option N...) ``` ### Example ```tsx function CustomComponentExamples() { const exampleOptions = [ { value: null, label: 'Remove selection' }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; const [value, setValue] = useState('1'); const CustomControlComponent: SelectControlComponent = ({ value, setOpen }) => { return ; }; const CustomOptionComponent: SelectOptionComponent = ({ value, onPress }) => { return ( ); }; return ( ); } ``` ## Multi-Select Multi-selection mode allows users to select multiple options from the list. :::note Disabled Options and Select All Disabled options and options inside disabled groups will be skipped when "Select all" is pressed. Only enabled options will be selected. ::: ```jsx live function MultiSelectExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1', '3', '7', '8', '9', '10'], }); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, { value: '6', label: 'Option 6' }, { value: '7', label: 'Option 7' }, { value: '8', label: 'Option 8' }, { value: '9', label: 'Option 9' }, { value: '10', label: 'Option 10' }, ]; return ( ); } ``` ## Multi-Select with Groups Use groups in multi-select mode to organize selections. ```jsx live function MultiSelectWithGroupsExample() { const { value, onChange } = useMultiSelect({ initialValue: [], }); const groupedOptions = [ { label: 'Group A', options: [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ], }, { label: 'Group B', options: [ { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, ], }, { label: 'Group C', options: [{ value: '6', label: 'Option 6' }], }, ]; return ( ); } ``` ## Variant Props The Select component supports different visual variants for various states and contexts. ```jsx live function VariantExample() { const [positiveValue, setPositiveValue] = useState('success'); const [negativeValue, setNegativeValue] = useState(''); const positiveOptions = [ { value: 'success', label: 'Success' }, { value: 'completed', label: 'Completed' }, { value: 'approved', label: 'Approved' }, ]; const negativeOptions = [ { value: 'error', label: 'Error' }, { value: 'failed', label: 'Failed' }, { value: 'rejected', label: 'Rejected' }, ]; return ( ); } ``` ## With Disabled Option Group Disable entire groups to prevent selection of those options. ```jsx live function DisabledGroupExample() { const [value, setValue] = useState(null); const groupedOptions = [ { label: 'Available Options', options: [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ], }, { label: 'Unavailable Options (Group Disabled)', disabled: true, options: [ { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, { value: '6', label: 'Option 6' }, ], }, { label: 'More Available Options', options: [ { value: '7', label: 'Option 7' }, { value: '8', label: 'Option 8' }, ], }, ]; return ( ); } ``` You can also use multi-selection mode while in a compact size. ```jsx live function CompactMultiSelectExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1', '3', '7', '8', '9', '10'], }); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, { value: '6', label: 'Option 6' }, { value: '7', label: 'Option 7' }, { value: '8', label: 'Option 8' }, { value: '9', label: 'Option 9' }, { value: '10', label: 'Option 10' }, ]; return ( ); } ``` ## Start Node Add an icon or element at the start of the select control. ```jsx live function StartNodeExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Search Result 1' }, { value: '2', label: 'Search Result 2' }, { value: '3', label: 'Search Result 3' }, ]; return ( } label="Single select - end node" onChange={setValue} options={options} placeholder="Empty value" value={value} /> ); } ``` ## Custom Icons Add custom icons as accessories or media to options. ```jsx live function CustomIconsExample() { const [value, setValue] = useState('1'); const optionsWithIcons = [ { value: '1', label: 'Favorites', accessory: , media: , }, { value: '2', label: 'Verified', accessory: , media: , }, { value: '3', label: 'Settings', accessory: , media: , }, ]; return ( ); } ``` ## Controlled Open State Control the open/closed state of the dropdown programmatically. ```jsx live function ControlledOpenExample() { const [value, setValue] = useState('1'); const [open, setOpen] = useState(false); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Custom Select All labels Customize the select all functionality in multi-select mode. ```jsx live function CustomSelectAllExample() { const { value, onChange } = useMultiSelect({ initialValue: ['1'], }); const options = [ { value: '1', label: 'Monday' }, { value: '2', label: 'Tuesday' }, { value: '3', label: 'Wednesday' }, { value: '4', label: 'Thursday' }, { value: '5', label: 'Friday' }, { value: '6', label: 'Saturday' }, { value: '7', label: 'Sunday' }, ]; return ( ); } ``` ## Custom Long Placeholder Use extended placeholder text for more descriptive empty states. ```jsx live function LongPlaceholderExample() { const [value, setValue] = useState(null); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Options with Only Accessory Add accessories without media for cleaner layouts. ```jsx live function OnlyAccessoryExample() { const [value, setValue] = useState('1'); const optionsWithAccessory = [ { value: '1', label: 'Favorites', accessory: , }, { value: '2', label: 'Verified', accessory: , }, { value: '3', label: 'Premium', accessory: , }, ]; return ( ); } ``` ## Variants with Additional Props Combine variants with other properties for complex states. ```jsx live function VariantCombinationsExample() { const [value1, setValue1] = useState('1'); const [value2, setValue2] = useState('2'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Long Helper Text Extended helper text for detailed instructions. ```jsx live function LongHelperTextExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ## Complex Nested Options Options with special characters, emojis, and complex content. ```jsx live function ComplexOptionsExample() { const [value, setValue] = useState('1'); const complexOptions = [ { value: '1', label: 'USD $100.00', description: 'United States Dollar', accessory: '🇺🇸', }, { value: '2', label: 'EUR €85.50', description: 'Euro (€)', accessory: '🇪🇺', }, { value: '3', label: 'GBP £73.25', description: 'British Pound Sterling', accessory: '🇬🇧', }, { value: '4', label: 'JPY ¥11,050', description: '日本円 (Japanese Yen)', accessory: '🇯🇵', }, ]; return ( ); } ``` ## Value Display Show the selected value in another component. ```jsx live function ValueDisplayExample() { const [value, setValue] = useState('btc'); const cryptoOptions = [ { value: 'btc', label: 'Bitcoin', description: 'BTC' }, { value: 'eth', label: 'Ethereum', description: 'ETH' }, { value: 'usdc', label: 'USD Coin', description: 'USDC' }, ]; const selectedOption = cryptoOptions.find((opt) => opt.value === value); return (
Selected Asset: {selectedOption?.label || 'None'} {selectedOption?.description || 'No selection'}
); } ``` ## Custom styles You can use custom styles on the various subcomponents in Select. ```jsx live function CustomStylesExample() { const exampleOptions = [ { value: null, label: 'Remove selection' }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; const [value, setValue] = useState('1'); return ( ); } ``` ## Custom Label You can pass a ReactNode to `label` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance. ```jsx live function CustomLabelExample() { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/inputs/SelectAlpha/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/alpha/select/Select/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/inputs/SelectAlpha/_webStyles.mdx ================================================ import { useState } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Select } from '@coinbase/cds-web/alpha/select'; import webStylesData from ':docgen/web/alpha/select/Select/styles-data'; export const SelectExample = ({ classNames }) => { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, ]; return ( ); } ``` ### Bordered Images Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set. ```tsx live ``` ================================================ FILE: apps/docs/docs/components/media/RemoteImageGroup/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/media/RemoteImageGroup/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/RemoteImageGroup/index.mdx ================================================ --- id: remoteImageGroup title: RemoteImageGroup platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/media/RemoteImageGroup/toc-props'; import mobilePropsToc from ':docgen/mobile/media/RemoteImageGroup/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/RemoteImageGroup/mobileMetadata.json ================================================ { "import": "import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/media/RemoteImageGroup.tsx", "description": "A component to display a group of RemoteImage components in a stack.", "relatedComponents": [ { "label": "RemoteImage", "url": "/components/media/RemoteImage" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/RemoteImageGroup/webMetadata.json ================================================ { "import": "import { RemoteImageGroup } from '@coinbase/cds-web/media/RemoteImageGroup'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/media/RemoteImageGroup.tsx", "description": "A component to display a group of RemoteImage components in a stack.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-remoteimage-remoteimagegroup--all", "relatedComponents": [ { "label": "RemoteImage", "url": "/components/media/RemoteImage" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/media/SpotIcon/_mobileExamples.mdx ================================================ ### Basic example ```jsx ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant. ```jsx const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; ; ``` ================================================ FILE: apps/docs/docs/components/media/SpotIcon/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/illustrations/SpotIcon/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotIcon/_webExamples.mdx ================================================ ### Basic example ```jsx live ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx live ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx live ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette. ```jsx live ``` To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme: ```jsx live function ThemedSpotIcon() { const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/media/SpotIcon/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/illustrations/SpotIcon/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotIcon/index.mdx ================================================ --- id: spotIcon title: SpotIcon platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import { IllustrationSheet } from '@site/src/components/page/IllustrationSheet'; import webPropsToc from ':docgen/web/illustrations/SpotIcon/toc-props'; import mobilePropsToc from ':docgen/mobile/illustrations/SpotIcon/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; ### Illustrations } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/SpotIcon/mobileMetadata.json ================================================ { "import": "import { SpotIcon } from '@coinbase/cds-mobile/illustratations/SpotIcon'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/illustrations/SpotIcon.tsx", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "An icon-sized illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotSquare", "url": "/components/media/SpotSquare/" }, { "label": "SpotRectangle", "url": "/components/media/SpotRectangle/" }, { "label": "Icon", "url": "/components/media/Icon/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/SpotIcon/webMetadata.json ================================================ { "import": "import { SpotIcon } from '@coinbase/cds-web/illustratations/SpotIcon'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/illustrations/SpotIcon.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/illustrations--spot-icon", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "An icon-sized illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotSquare", "url": "/components/media/SpotSquare/" }, { "label": "SpotRectangle", "url": "/components/media/SpotRectangle/" }, { "label": "Icon", "url": "/components/media/Icon/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/_mobileExamples.mdx ================================================ ### Basic example ```jsx ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant. ```jsx const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; ; ``` ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/illustrations/SpotRectangle/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/_webExamples.mdx ================================================ ### Basic example ```jsx live ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx live ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx live ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette. ```jsx live ``` To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme: ```jsx live function ThemedSpotRectangle() { const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/illustrations/SpotRectangle/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/index.mdx ================================================ --- id: spotRectangle title: SpotRectangle platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import { SpotRectangleBanner } from '@site/src/components/page/ComponentBanner/SpotRectangleBanner'; import { IllustrationSheet } from '@site/src/components/page/IllustrationSheet'; import webPropsToc from ':docgen/web/illustrations/SpotRectangle/toc-props'; import mobilePropsToc from ':docgen/mobile/illustrations/SpotRectangle/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webMetadata={webMetadata} mobileMetadata={mobileMetadata} /> ### Illustrations } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/mobileMetadata.json ================================================ { "import": "import { SpotRectangle } from '@coinbase/cds-mobile/illustratations/SpotRectangle'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/illustrations/SpotRectangle.tsx", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "A rectangular illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotSquare", "url": "/components/media/SpotSquare/" }, { "label": "SpotIcon", "url": "/components/media/SpotIcon/" }, { "label": "HeroSquare", "url": "/components/media/HeroSquare/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/SpotRectangle/webMetadata.json ================================================ { "import": "import { SpotRectangle } from '@coinbase/cds-web/illustratations/SpotRectangle'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/illustrations/SpotRectangle.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/illustrations--spot-rectangle", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "A rectangular illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotSquare", "url": "/components/media/SpotSquare/" }, { "label": "SpotIcon", "url": "/components/media/SpotIcon/" }, { "label": "HeroSquare", "url": "/components/media/HeroSquare/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/media/SpotSquare/_mobileExamples.mdx ================================================ ### Basic example ```jsx ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant. ```jsx const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; ; ``` ================================================ FILE: apps/docs/docs/components/media/SpotSquare/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/illustrations/SpotSquare/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotSquare/_webExamples.mdx ================================================ ### Basic example ```jsx live ``` ### `scaleMultiplier` prop If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration. Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly. ```jsx live ``` ### Scaling with dimension If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension. ```jsx live ``` ## Theming Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette. ```jsx live ``` To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme: ```jsx live function ThemedSpotSquare() { const customTheme = { ...defaultTheme, lightIllustrationColor: { ...defaultTheme.lightIllustrationColor, primary: 'rgb(220, 38, 38)', accent1: 'rgb(124, 58, 237)', }, darkIllustrationColor: { ...defaultTheme.darkIllustrationColor, primary: 'rgb(248, 113, 113)', accent1: 'rgb(167, 139, 250)', }, }; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/media/SpotSquare/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/illustrations/SpotSquare/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SpotSquare/index.mdx ================================================ --- id: spotSquare title: SpotSquare platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { IllustrationSheet } from '@site/src/components/page/IllustrationSheet'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/illustrations/SpotSquare/toc-props'; import mobilePropsToc from ':docgen/mobile/illustrations/SpotSquare/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; ### Illustrations } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/SpotSquare/mobileMetadata.json ================================================ { "import": "import { SpotSquare } from '@coinbase/cds-mobile/illustratations/SpotSquare'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/illustrations/SpotSquare.tsx", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "A square-shaped illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotIcon", "url": "/components/media/SpotIcon/" }, { "label": "SpotRectangle", "url": "/components/media/SpotRectangle/" }, { "label": "HeroSquare", "url": "/components/media/HeroSquare/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/SpotSquare/webMetadata.json ================================================ { "import": "import { SpotSquare } from '@coinbase/cds-web/illustratations/SpotSquare'", "changelog": "https://github.com/coinbase/cds/blob/master/packages/illustrations/CHANGELOG.md", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/illustrations/SpotSquare.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/illustrations--spot-square", "figma": "https://www.figma.com/design/LmkJatvMRVzNgfiIkJDb99/%E2%9C%A8-Illustrations?node-id=3668-22&m=dev", "description": "A square-shaped illustration component for displaying spot graphics.", "relatedComponents": [ { "label": "SpotIcon", "url": "/components/media/SpotIcon/" }, { "label": "SpotRectangle", "url": "/components/media/SpotRectangle/" }, { "label": "HeroSquare", "url": "/components/media/HeroSquare/" }, { "label": "Pictogram", "url": "/components/media/Pictogram/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/_mobileExamples.mdx ================================================ ### Basic usage ```tsx ``` ### Different Sub-Brand Types ```tsx Wallet Business Commerce ``` ### Foreground Variations ```tsx Default (brand blue in light mode, white in dark mode) Foreground (high contrast black in light mode, white in dark mode) ``` ### Sizing SubBrandLogoMark doesn't have a `size` prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio. ```tsx Small (24px height) Medium (40px height) Large (60px height) Width-constrained (100px width) ``` ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/icons/SubBrandLogoMark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/_webExamples.mdx ================================================ ### Basic usage ```tsx live ``` ### Different Sub-Brand Types ```tsx live Wallet Business Commerce ``` ### Foreground Variations ```tsx live Default (brand blue in light mode, white in dark mode) Foreground (high contrast black in light mode, white in dark mode) ``` ### Sizing SubBrandLogoMark doesn't have a `size` prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio. ```tsx live Small (24px height) Medium (40px height) Large (60px height) Width-constrained (100px width) ``` ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/icons/SubBrandLogoMark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/index.mdx ================================================ --- id: subBrandLogoMark title: SubBrandLogoMark platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/icons/SubBrandLogoMark/toc-props'; import mobilePropsToc from ':docgen/mobile/icons/SubBrandLogoMark/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/mobileMetadata.json ================================================ { "import": "import { SubBrandLogoMark } from '@coinbase/cds-mobile/icons/SubBrandLogoMark'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/icons/SubBrandLogoMark.tsx", "description": "Coinbase sub-brand logo marks for specialized branding.", "relatedComponents": [ { "label": "SubBrandLogoWordMark", "url": "/components/media/SubBrandLogoWordMark/" }, { "label": "LogoMark", "url": "/components/media/LogoMark/" }, { "label": "LogoWordMark", "url": "/components/media/LogoWordMark/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoMark/webMetadata.json ================================================ { "import": "import { SubBrandLogoMark } from '@coinbase/cds-web/icons/SubBrandLogoMark'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/icons/SubBrandLogoMark.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-logo-sheet--logo-sheet", "description": "Coinbase sub-brand logo marks for specialized branding.", "relatedComponents": [ { "label": "SubBrandLogoWordMark", "url": "/components/media/SubBrandLogoWordMark/" }, { "label": "LogoMark", "url": "/components/media/LogoMark/" }, { "label": "LogoWordMark", "url": "/components/media/LogoWordMark/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/_mobileExamples.mdx ================================================ ### Basic usage ```tsx ``` ### Different Sub-Brand Types ```tsx Wallet Advanced Commerce ``` ### Foreground Variations ```tsx Default (brand blue in light mode, white in dark mode) Foreground (high contrast black in light mode, white in dark mode) ``` ### Sizing SubBrandLogoWordmark doesn't have a `size` prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio. ```tsx Small (24px height) Medium (40px height) Large (60px height) Width-constrained (150px width) ``` ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/icons/SubBrandLogoWordmark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/_webExamples.mdx ================================================ ### Basic usage ```tsx live ``` ### Different Sub-Brand Types ```tsx live Wallet Advanced Commerce ``` ### Foreground Variations ```tsx live Default (brand blue in light mode, white in dark mode) Foreground (high contrast black in light mode, white in dark mode) ``` ### Sizing SubBrandLogoWordmark doesn't have a `size` prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio. ```tsx live Small (24px height) Medium (40px height) Large (60px height) Width-constrained (150px width) ``` ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/icons/SubBrandLogoWordmark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/index.mdx ================================================ --- id: subBrandLogoWordMark title: SubBrandLogoWordMark platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/icons/SubBrandLogoWordmark/toc-props'; import mobilePropsToc from ':docgen/mobile/icons/SubBrandLogoWordmark/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/mobileMetadata.json ================================================ { "import": "import { SubBrandLogoWordmark } from '@coinbase/cds-mobile/icons/SubBrandLogoWordmark'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/icons/SubBrandLogoWordmark.tsx", "description": "Coinbase sub-brand logo wordmarks for specialized branding.", "relatedComponents": [ { "label": "SubBrandLogoMark", "url": "/components/media/SubBrandLogoMark/" }, { "label": "LogoWordMark", "url": "/components/media/LogoWordMark/" }, { "label": "LogoMark", "url": "/components/media/LogoMark/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/media/SubBrandLogoWordMark/webMetadata.json ================================================ { "import": "import { SubBrandLogoWordmark } from '@coinbase/cds-web/icons/SubBrandLogoWordmark'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/icons/SubBrandLogoWordmark.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-logo-sheet--logo-sheet", "description": "Coinbase sub-brand logo wordmarks for specialized branding.", "relatedComponents": [ { "label": "SubBrandLogoMark", "url": "/components/media/SubBrandLogoMark/" }, { "label": "LogoWordMark", "url": "/components/media/LogoWordMark/" }, { "label": "LogoMark", "url": "/components/media/LogoMark/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/BrowserBar/_mobileExamples.mdx ================================================ ### Basic usage A `BrowserBar` can be used to display information and actions, like in a web browser. ```tsx } end={} > Coinbase ``` ### With Search Input A common use case is to include a search or URL input field. ```tsx } end={ } > ``` ### Contextual Hiding `BrowserBar` provides a `BrowserBarContext`. Components rendered inside the `BrowserBar` can use the `useBrowserBarContext` hook to gain access to `setHideStart` and `setHideEnd` functions. These functions allow children components to dynamically hide the `start` and `end` content of the `BrowserBar`, which can be useful to maximize space for the primary content. ================================================ FILE: apps/docs/docs/components/navigation/BrowserBar/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/navigation/BrowserBar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/BrowserBar/index.mdx ================================================ --- id: browserBar title: BrowserBar platform_switcher_options: { web: false, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import mobilePropsToc from ':docgen/mobile/navigation/BrowserBar/toc-props'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import mobileMetadata from './mobileMetadata.json'; } mobileExamples={} mobileExamplesToc={mobileExamplesToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/BrowserBar/mobileMetadata.json ================================================ { "import": "import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/navigation/BrowserBar.tsx", "description": "A navigation bar designed for browser-like interfaces, featuring slots for start, end, and central content. It provides a structured layout for controls and information within a browser context.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4025&t=HVdVREeFwcWeSo2R-4", "relatedComponents": [ { "label": "TopNavBar", "url": "/components/navigation/TopNavBar/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/_mobileExamples.mdx ================================================ ### Basic usage ```tsx {}}>Got it} onClose={() => {}} /> ``` ### With Media ```tsx } action={} onClose={() => {}} /> ``` ### With Checkbox ```tsx {}}> Don't show this again } action={} onClose={() => {}} /> ``` ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/coachmark/Coachmark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/_webExamples.mdx ================================================ ### Basic usage ```tsx live () => { const [open, setOpen] = useState(true); if (!open) return ; return ( setOpen(false)}> Got it } onClose={() => setOpen(false)} /> ); }; ``` ### With Media ```tsx live () => { const [open, setOpen] = useState(true); if (!open) return ; return ( } action={ } onClose={() => setOpen(false)} /> ); }; ``` ### With Checkbox ```tsx live () => { const [open, setOpen] = useState(true); const [checked, setChecked] = useState(false); if (!open) return ; return ( setChecked(e.target.checked)}> Don't show again } action={} onClose={() => setOpen(false)} /> ); }; ``` ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/coachmark/Coachmark/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/index.mdx ================================================ --- id: coachmark title: Coachmark platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/coachmark/Coachmark/toc-props'; import mobilePropsToc from ':docgen/mobile/coachmark/Coachmark/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/mobileMetadata.json ================================================ { "import": "import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/coachmark/Coachmark.tsx", "description": "Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help in React Native apps. It supports custom content, actions, and media.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=25128-9889&t=7bpcjquwgXNk9lnN-4", "relatedComponents": [ { "label": "Tour", "url": "/components/navigation/Tour/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/Coachmark/webMetadata.json ================================================ { "import": "import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/coachmark/Coachmark.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-coachmark--coachmark-examples", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=25128-9889&t=7bpcjquwgXNk9lnN-4", "description": "Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help. It supports custom content, actions, and media.", "relatedComponents": [ { "label": "Tour", "url": "/components/navigation/Tour/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/NavigationBar/_webExamples.mdx ================================================ NavigationBar is a horizontal navigation component that provides a consistent header for application navigation and wayfinding. It supports flexible content areas, theming, and custom styling. ## Basics ```jsx live } end={ } > Dashboard ``` ### With Tab Navigation Use the `bottom` prop to add tab navigation below the main content. ```jsx live function NavigationWithTabs() { const tabs = [ { id: 'all', label: 'All' }, { id: 'watchlist', label: 'Watchlist' }, { id: 'tradable', label: 'Tradable' }, { id: 'gainers', label: 'Gainers' }, ]; const [value, setValue] = useState(tabs[0].id); return ( } bottom={} > Portfolio ); } ``` ### With Search ```jsx live function NavigationWithSearch() { const [search, setSearch] = useState(''); return ( } end={} > ); } ``` ## Accessibility Use `accessibilityLabel` to provide context for screen readers. The default label is "main navigation". ```jsx live } end={} > Account Settings ``` When using interactive elements in the navigation bar, ensure each has appropriate accessibility labels describing their action. ## Composed Examples ### Full Navigation with Back Button A complete navigation example with dynamic back button visibility and tab navigation. ```jsx live function FullNavigation() { const tabs = [ { id: 'all', label: 'All' }, { id: 'watchlist', label: 'Watchlist' }, { id: 'tradable', label: 'Tradable' }, { id: 'gainers', label: 'Gainers' }, { id: 'losers', label: 'Losers' }, ]; const [search, setSearch] = useState(''); const [value, setValue] = useState(tabs[1].id); const showBackButton = useMemo(() => value !== tabs[0].id, [value]); const handleBackPress = useCallback(() => { setValue(tabs[0].id); }, []); return ( ) } end={ } bottom={} > ); } ``` ### Responsive Navigation A responsive navigation bar that adapts to screen size. On mobile, the search input collapses to an icon button. ```jsx live function ResponsiveNavigation() { const [search, setSearch] = useState(''); const [searchOpen, setSearchOpen] = useState(false); const { isMobile } = useBreakpoints(); const handleSearchToggle = useCallback(() => { setSearchOpen((prev) => !prev); if (searchOpen) { setSearch(''); } }, [searchOpen]); return ( } end={ {isMobile && ( )} } > {isMobile ? ( searchOpen && ( ) ) : ( )} {!isMobile && !searchOpen && Trading} ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/NavigationBar/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/NavigationBar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/NavigationBar/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Avatar } from '@coinbase/cds-web/media'; import { HStack } from '@coinbase/cds-web/layout'; import { NavigationBar, NavigationTitle } from '@coinbase/cds-web/navigation'; import { IconButton } from '@coinbase/cds-web/buttons'; import webStylesData from ':docgen/web/navigation/NavigationBar/styles-data'; ## Explorer {(classNames) => ( } end={ } > Dashboard )} ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/NavigationBar/index.mdx ================================================ --- id: navigationBar title: NavigationBar platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/NavigationBar/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webStyles={} webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/NavigationBar/webMetadata.json ================================================ { "import": "import { NavigationBar } from '@coinbase/cds-web/navigation/NavigationBar'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/NavigationBar.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-navigationbar--navigation-bar-full-example-default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12187", "description": "A universal header component for navigation and wayfinding.", "relatedComponents": [ { "label": "NavigationTitle", "url": "/components/navigation/NavigationTitle/" }, { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" }, { "label": "Sidebar", "url": "/components/navigation/Sidebar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/_mobileExamples.mdx ================================================ ### Basic usage The `NavigationTitle` should be used inside a `TopNavBar` or `BrowserBar` to provide a consistent header style. ```tsx }> Settings ``` ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/navigation/NavigationTitle/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/_webExamples.mdx ================================================ ### Basic Example ```jsx live Personal Portfolio ``` ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/NavigationTitle/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/index.mdx ================================================ --- id: navigationTitle title: NavigationTitle platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/NavigationTitle/toc-props'; import mobilePropsToc from ':docgen/mobile/navigation/NavigationTitle/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/mobileMetadata.json ================================================ { "import": "import { NavigationTitle } from '@coinbase/cds-mobile/navigation/NavigationTitle'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/navigation/NavigationTitle.tsx", "description": "A component used to display a title within a navigation bar, with default styling for headlines.", "relatedComponents": [ { "label": "TopNavBar", "url": "/components/navigation/TopNavBar/" }, { "label": "BrowserBar", "url": "/components/navigation/BrowserBar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitle/webMetadata.json ================================================ { "import": "import { NavigationTitle } from '@coinbase/cds-web/navigation/NavigationTitle'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/NavigationTitle.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-navigationtitle--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12187", "description": "Navigation Title is used to display the current page or section title in the Navigation Bar.", "relatedComponents": [ { "label": "NavigationBar", "url": "/components/navigation/NavigationBar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/_mobileExamples.mdx ================================================ NavigationTitleSelect opens a [Tray](/components/overlay/Tray) to create a context-switching control styled as a navigation title. Use it within a [TopNavBar](/components/navigation/TopNavBar) to let users switch between accounts, portfolios, or other contexts. ## Basics Provide an array of `options` with `label` and `id` fields, a `value` matching the selected option's `id`, and an `onChange` handler. ```jsx const options = [ { label: 'My Portfolio', id: 'portfolio' }, { label: 'Family Account', id: 'family' }, { label: 'Business Account', id: 'business' }, ]; const [value, setValue] = useState('portfolio'); ; ``` ### With TopNavBar NavigationTitleSelect is typically used as the center content of a TopNavBar. ```jsx }> console.log(value)} /> ``` ## Custom Labels Option labels can be React nodes for richer content, such as displaying an icon alongside text. ```jsx const options = [ { label: ( Personal Wallet ), id: 'personal', }, { label: ( Shared Vault ), id: 'shared', }, ]; ; ``` ## Styling ### Color Use `color` to customize the text and caret icon color. Any valid CDS design token color works. ```jsx ``` ### Font Use `font` to adjust the typography. The default is `headline`. ```jsx ``` ## Accessibility The component sets `accessibilityRole="header"` by default. Screen readers will announce the selected label as a header element. When the Tray opens, focus moves to the options list for navigation. ```jsx ``` ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/navigation/NavigationTitleSelect/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/_webExamples.mdx ================================================ NavigationTitleSelect wraps a [Dropdown](/components/layout/Dropdown) to create a context-switching control styled as a navigation title. Use it to let users switch between accounts, portfolios, or other contexts in a header. ## Basics Provide an array of `options` with `label` and `id` fields, a `value` matching the selected option's `id`, and an `onChange` handler. ```jsx live function BasicExample() { const options = [ { label: 'My Portfolio', id: 'portfolio' }, { label: 'Family Account', id: 'family' }, { label: 'Business Account', id: 'business' }, ]; const [value, setValue] = useState('portfolio'); return ( ); } ``` ## Custom Labels Option labels can be React nodes for richer content, such as displaying an icon alongside text. ```jsx live function CustomLabelExample() { const options = [ { label: ( Personal Wallet ), id: 'personal', }, { label: ( Shared Vault ), id: 'shared', }, ]; const [value, setValue] = useState('personal'); return ( ); } ``` ## Styling ### Color Use `color` to customize the text and caret icon color. Any valid CDS design token color works. ```jsx live function ColorExample() { const options = [ { label: 'Assets', id: 'assets' }, { label: 'Activity', id: 'activity' }, ]; const [value, setValue] = useState('assets'); return ( ); } ``` ### Font Use `font` to adjust the typography. The default is `title1`. ```jsx live function FontExample() { const options = [ { label: 'Dashboard', id: 'dashboard' }, { label: 'Settings', id: 'settings' }, ]; const [value, setValue] = useState('dashboard'); return ( ); } ``` ## Accessibility Always provide `accessibilityLabel` to describe the purpose of the select for screen readers. The component manages focus and keyboard navigation through the underlying [Dropdown](/components/layout/Dropdown). ```jsx live function AccessibilityExample() { const accounts = [ { label: 'Checking ••4521', id: 'checking' }, { label: 'Savings ••8832', id: 'savings' }, { label: 'Investment ••2109', id: 'investment' }, ]; const [account, setAccount] = useState('checking'); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/NavigationTitleSelect/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/index.mdx ================================================ --- id: navigationTitleSelect title: NavigationTitleSelect platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/NavigationTitleSelect/toc-props'; import mobilePropsToc from ':docgen/mobile/navigation/NavigationTitleSelect/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/mobileMetadata.json ================================================ { "import": "import { NavigationTitleSelect } from '@coinbase/cds-mobile/navigation/NavigationTitleSelect'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/navigation/NavigationTitleSelect.tsx", "description": "A select component styled as a navigation title, allowing users to switch between different views or contexts from the header. It opens a Tray to display options.", "relatedComponents": [ { "label": "NavigationTitle", "url": "/components/navigation/NavigationTitle" }, { "label": "TopNavBar", "url": "/components/navigation/TopNavBar" }, { "label": "Tray", "url": "/components/overlay/Tray" }, { "label": "SelectOption", "url": "/components/inputs/SelectOption" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/NavigationTitleSelect/webMetadata.json ================================================ { "import": "import { NavigationTitleSelect } from '@coinbase/cds-web/navigation/NavigationTitleSelect'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/NavigationTitleSelect.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-navigationtitleselect--default", "description": "A select component styled as a navigation title, allowing users to switch between different views or contexts from the header. It uses a Dropdown to display options.", "relatedComponents": [ { "label": "NavigationTitle", "url": "/components/navigation/NavigationTitle" }, { "label": "Dropdown", "url": "/components/layout/Dropdown" }, { "label": "SelectOption", "url": "/components/inputs/SelectOption" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" }, { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/_mobileExamples.mdx ================================================ ### Basic usage ```tsx function BasicPageFooter() { return ( console.log('Pressed')}> Submit } /> ); } ``` ### Multiple Actions ```tsx function MultipleActionsFooter() { return ( } /> ); } ``` ### With Background Color ```tsx function StyledFooter() { return ( console.log('Pressed')}> Submit } backgroundColor="bgSecondary" /> ); } ``` ### With Legal Text ```tsx function LegalTextPageFooter() { return ( } legalText="By continuing, you agree to our Terms of Service and Privacy Policy." /> ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/page/PageFooter/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/_webExamples.mdx ================================================ ### Basic usage ```tsx live function BasicPageFooter() { return ( console.log('Clicked')}> Submit } /> ); } ``` ### Responsive Layout ```tsx live function ResponsivePageFooter() { return ( Resize window to see button alignment change: centered on mobile, right-aligned on tablet/desktop } /> ); } ``` ### Custom Layout ```tsx live function CustomLayoutFooter() { return ( {/* Override responsive defaults */} console.log('Centered')}> Always Centered } justifyContent="center" paddingX={2} /> {/* Custom styling */} console.log('Custom')}> Custom Height } backgroundColor="bgSecondary" height={80} paddingY={3} /> ); } ``` ### With Legal Text ```tsx live function LegalTextPageFooter() { return ( } legalText="By continuing, you agree to our Terms of Service and Privacy Policy." /> ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/page/PageFooter/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/index.mdx ================================================ --- id: pageFooter title: PageFooter platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/page/PageFooter/toc-props'; import mobilePropsToc from ':docgen/mobile/page/PageFooter/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/mobileMetadata.json ================================================ { "import": "import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/page/PageFooter.tsx", "description": "PageFooter is a layout component that provides a consistent footer area for pages, with centered alignment and fixed height, typically used for action buttons or navigation elements.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=25243-33004&t=FBeqcXSJfIhHYQmy-4", "relatedComponents": [ { "label": "PageHeader", "url": "/components/navigation/PageHeader/" }, { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "ButtonGroup", "url": "/components/layout/ButtonGroup/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/PageFooter/webMetadata.json ================================================ { "import": "import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/page/PageFooter.tsx", "description": "PageFooter is a layout component that provides a consistent footer area for pages, with responsive padding and justification, typically used for action buttons or navigation elements.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-pagefooter--interactive-footer", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=25243-33004&t=FBeqcXSJfIhHYQmy-4", "relatedComponents": [ { "label": "PageHeader", "url": "/components/navigation/PageHeader/" }, { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "ButtonGroup", "url": "/components/layout/ButtonGroup/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_mobileExamples.mdx ================================================ ### Basic PageHeader ```jsx function Example() { return ( Help } start={} title={'Page Title'} /> ); } ``` ### PageHeader With Custom Styles Use the `styles` prop to customize the `start`, `end`, `title`, or `root` of `PageHeader`. This example adjusts the spacing to align the header with page content. ```jsx function Example() { const theme = useTheme(); return ( <> Help console.log()} testID="header-external-link-button" /> console.log()} testID="header-close-button" /> } start={ console.log()} testID="header-back-button" /> } styles={{ start: { paddingStart: theme.space[1.5] }, end: { paddingEnd: theme.space[1.5] }, }} title="Page Title" /> Content below with padding 3 to align visually with the header actions. ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/page/PageHeader/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/page/PageHeader/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_webExamples.mdx ================================================ ### Basic PageHeader A basic page header with a logo on the left, title in the center, and a help link on the right. ```jsx live function Example() { return ( Help } start={} title={'Page Title'} /> ); } ``` ### PageHeader With Custom Styles Use the `styles` or `classNames` props to customize the `start`, `end`, `title`, or `root` of `PageHeader`. This example adjusts the spacing to align the header with page content. ```jsx live function Example() { return ( <> Help console.log('Share clicked')} testID="header-external-link-button" /> console.log('Close clicked')} testID="header-close-button" /> } start={ console.log('Back clicked')} testID="header-back-button" /> } title="Trading Settings" /> Configure Your Trading Preferences Customize your trading experience by adjusting the settings below. These preferences will apply to all your trading activities and can be modified at any time. Order Types Choose your preferred default order types for buying and selling. Market orders execute immediately at current prices, while limit orders allow you to set specific price targets. ); } ``` ### Messaging State (Web) Use Page Header for full-screen messaging states. ```jsx live function Example() { return ( } top="0" /> You need to X before you Y You'll need to [add funds] before you can [complete this transaction] ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/page/PageHeader/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { PageHeader } from '@coinbase/cds-web/page'; import { IconButton } from '@coinbase/cds-web/buttons'; import webStylesData from ':docgen/web/page/PageHeader/styles-data'; ## Explorer {(classNames) => ( } title="Page Title" end={} /> )} ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/index.mdx ================================================ --- id: pageHeader title: PageHeader platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/page/PageHeader/toc-props'; import mobilePropsToc from ':docgen/mobile/page/PageHeader/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobileExamplesToc={mobileExamplesToc} mobilePropsTable={} mobilePropsToc={mobilePropsToc} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} webStyles={} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/mobileMetadata.json ================================================ { "import": "import { PageHeader } from '@coinbase/cds-mobile/page/PageHeader'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/page/PageHeader.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=17685-3212&t=pR950kABXn1ahUj4-0", "description": "Page Header is a flexible header component.", "relatedComponents": [ { "label": "NavigationBar", "url": "/components/navigation/NavigationBar/" }, { "label": "FullscreenModal", "url": "/components/overlay/FullscreenModal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/PageHeader/webMetadata.json ================================================ { "import": "import { PageHeader } from '@coinbase/cds-web/page/PageHeader'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/page/PageHeader.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-pageheader--interactive-header", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=17685-3212&t=pR950kABXn1ahUj4-0", "description": "A flexible header component for pages.", "relatedComponents": [ { "label": "NavigationBar", "url": "/components/navigation/NavigationBar/" }, { "label": "FullscreenModal", "url": "/components/overlay/FullscreenModal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/Pagination/_webExamples.mdx ================================================ ### Basic Pagination A simple example showing basic pagination with 10 total pages. ```jsx live function BasicPaginationExample() { const [activePage, setActivePage] = useState(1); const totalPages = 10; return ; } ``` ### Pagination with First/Last Buttons Shows pagination with the optional First and Last page navigation buttons enabled. ```jsx live function FirstLastButtonsPaginationExample() { const [activePage, setActivePage] = useState(5); const totalPages = 15; return ( ); } ``` ### Custom First/Last Button Labels Demonstrates customizing the text labels for the first and last page buttons using `firstPageButtonLabel` and `lastPageButtonLabel` props. ```jsx live function CustomButtonLabelsPaginationExample() { const [activePage, setActivePage] = useState(5); const totalPages = 15; return ( ); } ``` ### Pagination with Custom Counts Demonstrates using `siblingCount` and `boundaryCount` to adjust the number of pages displayed around the current page and at the boundaries, useful for larger page ranges. ```jsx live function CustomCountsPaginationExample() { const [activePage, setActivePage] = useState(10); const totalPages = 20; return ( ); } ``` ### Controlled Pagination This example explicitly manages the current page state, which might be necessary if the page change triggers other actions like fetching data. ```jsx live function ControlledPaginationExample() { const [activePage, setActivePage] = useState(3); const totalPages = 10; const handlePageChange = (newPage) => { console.log(`Navigating to page: ${newPage}`); // Here you might fetch data for the new page setActivePage(newPage); }; return ( ); } ``` ### Using the `usePagination` Hook This example shows how to use the headless `usePagination` hook to build a custom pagination interface. The hook provides the logic, and you render the UI. ```jsx live function UsePaginationHookExample() { const [activePage, setActivePage] = useState(5); const totalPages = 12; const { items, goNextPage, goPrevPage, updateActivePage, isFirstPage, isLastPage } = usePagination({ totalPages, activePage, onChange: setActivePage, siblingCount: 1, boundaryCount: 1, }); return ( {items.map((item, index) => { if (item.type === 'ellipsis') { // Render ellipsis as simple text return ( ); } // Render page buttons return ( ); })} ); } ``` ### Customized Components This example demonstrates how to customize the appearance of pagination by providing custom components for page buttons, navigation buttons, and ellipsis. ```jsx live function CustomizedPaginationExample() { const [activePage, setActivePage] = useState(5); const totalPages = 20; // Custom page button component const CustomPageButton = forwardRef( ({ page, isCurrentPage, onClick, accessibilityLabel }, ref) => ( onClick(page)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(page); } }} padding={1} role="button" tabIndex={0} style={{ cursor: 'pointer' }} > {page} ), ); // Custom navigation button component const CustomNavButton = forwardRef( ({ direction, disabled, onClick, accessibilityLabel }, ref) => { // Direction-specific arrows const getArrow = () => { switch (direction) { case 'first': return '««'; case 'previous': return '«'; case 'next': return '»'; case 'last': return '»»'; default: return ''; } }; return ( { if (!disabled && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onClick(); } }} opacity={disabled ? 0.7 : 1} padding={1} role="button" tabIndex={disabled ? -1 : 0} style={{ cursor: disabled ? 'not-allowed' : 'pointer' }} > {getArrow()} ); }, ); // Custom ellipsis component const CustomEllipsis = ({ content = '•••', testID }) => ( ); return ( ); } ``` ### Pagination with Table This example demonstrates integrating the Pagination component with a Table, a common use case for pagination. ```jsx live function TablePaginationExample() { const totalResults = accounts.length; const PAGE_SIZE = 5; const [activePage, setActivePage] = useState(1); const [isFixed, setIsFixed] = useState(false); // Calculate pagination indexes const startIdx = (activePage - 1) * PAGE_SIZE; const endIdx = Math.min(startIdx + PAGE_SIZE, totalResults); const paginatedAccounts = accounts.slice(startIdx, endIdx); const totalPages = Math.ceil(totalResults / PAGE_SIZE); const toggleFixed = () => setIsFixed(!isFixed); return ( Fixed Layout Cryptocurrency Accounts {paginatedAccounts.map((account) => ( } title={account.name} subtitle={account.currency?.code} /> ))} Page {startIdx + 1}-{endIdx}
); } ``` ================================================ FILE: apps/docs/docs/components/navigation/Pagination/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/pagination/Pagination/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Pagination/index.mdx ================================================ --- id: pagination title: Pagination platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/pagination/Pagination/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Pagination/webMetadata.json ================================================ { "import": "import { Pagination } from '@coinbase/cds-web/pagination/Pagination'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/pagination/Pagination.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-pagination--pagination-examples", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=49607-6712&t=VzGX5hnRKveOrhnl-1", "description": "Pagination is used to navigate through a list of items.", "relatedComponents": [ { "label": "NavigationBar", "url": "/components/navigation/NavigationBar/" }, { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "IconButton", "url": "/components/inputs/IconButton/" }, { "label": "Table", "url": "/components/data-display/Table/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/_mobileExamples.mdx ================================================ ### Basic usage ```tsx function BasicSectionHeader() { return ( ); } ``` ### With Description and Icons ```tsx function SectionHeaderWithDetails() { return ( } icon="info-circle" description="Shows both start and info icons" testID="icons-header" /> ); } ``` ### With Balance and Actions ```tsx function SectionHeaderWithActions() { return ( console.log('View history')} testID="view-history-button" > History } testID="balance-header" /> } testID="actions-header" /> ); } ``` ### Custom Styling ```tsx function StyledSectionHeader() { return ( ); } ``` # With Start Icon ```tsx } /> ``` # With Icon After Title ```tsx ``` # With Balance ```tsx ``` # With End Content ```tsx Action } /> ``` # Full Example ```tsx } icon="info-circle" description="This example shows all the main features of the SectionHeader component." balance="$1,234.56" end={ } /> Content below the section header... ``` # With Accessibility ```tsx ``` Note: The mobile version of SectionHeader is optimized for touch interactions and mobile screen sizes while maintaining the same core functionality as the web version. The main differences are: - Uses React Native's View component underneath - Includes mobile-specific props like `testID` and `accessibilityLabel` - Default padding is adjusted for mobile screens - Wraps content appropriately for mobile viewports ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/section-header/SectionHeader/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/_webExamples.mdx ================================================ ### Basic usage ```tsx live ``` ### With Description ```tsx live ``` ### With Icons ```tsx live } /> ``` ### With Balance and Actions ```tsx live console.log('View history')}> View History } /> } /> ``` ### Layout Customization ```tsx live {/* Custom spacing */} {/* Custom background and borders */} {/* Custom alignment */} console.log('Action')}> Action } /> ``` ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/section-header/SectionHeader/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/index.mdx ================================================ --- id: sectionHeader title: SectionHeader platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/section-header/SectionHeader/toc-props'; import mobilePropsToc from ':docgen/mobile/section-header/SectionHeader/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/mobileMetadata.json ================================================ { "import": "import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/section-header/SectionHeader.tsx", "description": "A header component used to organize and label sections of content, with support for icons, descriptions, and additional content, optimized for mobile platforms.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14010-2846&t=FEaHiLjNPeV1t8K2-4", "relatedComponents": [ { "label": "PageHeader", "url": "/components/navigation/PageHeader/" }, { "label": "NavigationTitle", "url": "/components/navigation/NavigationTitle/" }, { "label": "Accordion", "url": "/components/layout/Accordion/" }, { "label": "Collapsible", "url": "/components/layout/Collapsible/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/SectionHeader/webMetadata.json ================================================ { "import": "import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/section-header/SectionHeader.tsx", "description": "A header component used to organize and label sections of content, with support for icons, descriptions, and additional content.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-sectionheader--examples", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14010-2846&t=FEaHiLjNPeV1t8K2-4", "relatedComponents": [ { "label": "PageHeader", "url": "/components/navigation/PageHeader/" }, { "label": "NavigationTitle", "url": "/components/navigation/NavigationTitle/" }, { "label": "Accordion", "url": "/components/layout/Accordion/" }, { "label": "Collapsible", "url": "/components/layout/Collapsible/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_mobileExamples.mdx ================================================ SegmentedTabs is a controlled component that uses `activeTab` and `onChange` to manage selection state. ## Basics ### Initial Value You can set any tab as the initial active tab by passing it to the `activeTab` state. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` SegmentedTabs can also start with no active selection by passing `null`. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(null); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Disabled The entire component can be disabled with the `disabled` prop. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` Individual tabs can also be disabled while keeping others interactive. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell', disabled: true }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ## Styling ### Border Radius Set `borderRadius` to change the shape of both the container and the active indicator. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` Use the `styles` prop to set a different `borderRadius` on the active indicator than the outer container, with `padding` to create an inset effect. ```jsx function Example() { const theme = useTheme(); const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Colors You can set `color` and `activeColor` to change the color of the labels. ```jsx function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Labels Labels can be customized with any `ReactNode`, including instances of `Icon`. ```jsx import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring, } from 'react-native-reanimated'; import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs'; function ColoredIcon({ tabId, name }) { const { activeTab } = useTabsContext(); const isActive = activeTab?.id === tabId; const theme = useTheme(); const progress = useSharedValue(isActive ? 1 : 0); const [color, setColor] = useState(isActive ? theme.color.fgInverse : theme.color.fg); useEffect(() => { progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig); }, [isActive, progress]); useAnimatedReaction( () => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgInverse]), (newColor) => { runOnJS(setColor)(newColor); }, ); return ; } function Example() { const theme = useTheme(); const tabs = [ { id: 'buy', label: }, { id: 'sell', label: }, { id: 'convert', label: }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ## Custom Components Use `TabComponent` and `TabsActiveIndicatorComponent` to fully customize the tabs and active indicator. Individual tabs can also be customized by providing a `Component` in the tab definition. ```jsx function Example() { const CustomActiveIndicator = ({ activeTabRect }) => ( ); const CustomTab = ({ id, label, disabled }) => { const { activeTab } = useTabsContext(); const isActive = activeTab?.id === id; const renderedLabel = ( {label} ); return ; }; const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tabs/SegmentedTabs/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/tabs/SegmentedTabs/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_webExamples.mdx ================================================ SegmentedTabs is a controlled component that uses `activeTab` and `onChange` to manage selection state. ## Basics ### Initial Value You can set any tab as the initial active tab by passing it to the `activeTab` state. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` SegmentedTabs can also start with no active selection by passing `null`. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(null); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Disabled The entire component can be disabled with the `disabled` prop. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` Individual tabs can also be disabled while keeping others interactive. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell', disabled: true }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ## Styling ### Border Radius Set `borderRadius` to change the shape of both the container and the active indicator. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` Use the `styles` prop to set a different `borderRadius` on the active indicator than the outer container, with `padding` to create an inset effect. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Colors You can set `color` and `activeColor` to change the color of the labels. ```jsx live function Example() { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ### Labels Labels can be customized with any `ReactNode`, including instances of `Icon`. ```jsx live function Example() { const tabs = [ { id: 'buy', label: }, { id: 'sell', label: }, { id: 'convert', label: }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ## Custom Components Use `TabComponent` and `TabsActiveIndicatorComponent` to fully customize the tabs and active indicator. Individual tabs can also be customized by providing a `Component` in the tab definition. ```jsx live function Example() { const CustomActiveIndicator = useCallback( ({ activeTabRect }) => ( ), [], ); const CustomTab = useCallback(({ id, label, disabled }) => { const { activeTab } = useTabsContext(); const isActive = activeTab?.id === id; const renderedLabel = ( {label} ); return ( ); }, []); const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tabs/SegmentedTabs/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/_webStyles.mdx ================================================ import { useState, useCallback } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { SegmentedTabs } from '@coinbase/cds-web/tabs/SegmentedTabs'; import webStylesData from ':docgen/web/tabs/SegmentedTabs/styles-data'; export const SegmentedTabsExample = ({ classNames }) => { const tabs = [ { id: 'buy', label: 'Buy' }, { id: 'sell', label: 'Sell' }, { id: 'convert', label: 'Convert' }, ]; const [activeTab, updateActiveTab] = useState(tabs[0]); const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []); return ( ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/index.mdx ================================================ --- id: segmentedTabs title: SegmentedTabs platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tabs/SegmentedTabs/toc-props'; import mobilePropsToc from ':docgen/mobile/tabs/SegmentedTabs/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobileExamplesToc={mobileExamplesToc} mobilePropsTable={} mobilePropsToc={mobilePropsToc} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} webStyles={} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/mobileMetadata.json ================================================ { "import": "import { SegmentedTabs } from '@coinbase/cds-mobile/tabs/SegmentedTabs'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tabs/SegmentedTabs.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=20859-1665", "description": "Switches between different views of content.", "relatedComponents": [ { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/SegmentedTabs/webMetadata.json ================================================ { "import": "import { SegmentedTabs } from '@coinbase/cds-web/tabs/SegmentedTabs'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tabs/SegmentedTabs.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tabs-segmented-tabs--all", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=20859-1665", "description": "Switches between different views of content.", "relatedComponents": [ { "label": "Button", "url": "/components/inputs/Button/" }, { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Sidebar/_webExamples.mdx ================================================ Sidebar is a vertical navigation component for accessing different sections of an application. It supports multiple variants, collapsible states, and custom content areas. ## Basics A Sidebar is composed of the following parts: - `Sidebar` - The main container with logo and navigation items - `SidebarItem` - Individual navigation items with icon and title - `SidebarMoreMenu` - Overflow menu for additional navigation options ```jsx live function BasicSidebar() { const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; return ( }> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Variants ### Default Use the Default variant on standard consumer-facing surfaces like Retail where maximum navigation and content space is desired. This variant shows full labels alongside icons. ```jsx live function DefaultVariant() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Pay', icon: 'pay' }, { title: 'For you', icon: 'newsFeed' }, { title: 'Earn', icon: 'giftBox' }, { title: 'Borrow', icon: 'cash' }, { title: 'DeFi', icon: 'defi' }, ]; const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const navItems = items.slice(0, 8); const moreMenuOptions = items.slice(4); const handleMoreMenuChange = (newValue) => { const moreIndex = moreMenuOptions.findIndex((option) => option.title === newValue) + navItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemPress = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; const renderEnd = () => { return ( console.log} > End item ); }; return ( } renderEnd={renderEnd} styles={{ end: { width: '100%', }, }} > {navItems.map((item, index) => ( handleItemPress(index)} tooltipContent={item.title} {...item} /> ))} = navItems.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreMenuOptions.map((item) => ( } value={item.title} /> ))} ); } ``` ### Condensed Use in specialized workflows with complex data displays, such as Exchange and Advanced Trade, where navigation space is minimized to focus on core tasks. This variant displays icons with small labels below. ```jsx live function CondensedVariant() { const items = [ { title: 'Spot', icon: 'chartCandles' }, { title: 'Futures', icon: 'chartBar' }, { title: 'Portfolio', icon: 'chartPie' }, { title: 'Orders', icon: 'documentation' }, { title: 'For you', icon: 'newsFeed' }, { title: 'Earn', icon: 'giftBox' }, { title: 'Borrow', icon: 'cash' }, { title: 'DeFi', icon: 'defi' }, ]; const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const navItems = items.slice(0, 4); const moreMenuOptions = items.slice(4); const handleMoreMenuChange = (newValue) => { const moreIndex = moreMenuOptions.findIndex((option) => option.title === newValue) + navItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemClick = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; return ( } variant="condensed"> {navItems.map((item, index) => ( handleItemClick(index)} tooltipContent={item.title} {...item} /> ))} = navItems.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreMenuOptions.map((item) => ( } value={item.title} /> ))} ); } ``` ## Collapsed State ### Controlled Collapse Use the `collapsed` prop to control the sidebar's collapsed state. When collapsed, only icons are shown with tooltips for labels. ```jsx live function ControlledCollapse() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Pay', icon: 'pay' }, { title: 'For you', icon: 'newsFeed' }, { title: 'Earn', icon: 'giftBox' }, { title: 'Borrow', icon: 'cash' }, { title: 'DeFi', icon: 'defi' }, ]; const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const [collapsed, setCollapsed] = useState(true); const moreMenuOptions = items.slice(4); const handleMoreMenuChange = (newValue) => { const moreIndex = moreMenuOptions.findIndex((option) => option.title === newValue) + items.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemPress = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; const renderEnd = () => ( setCollapsed(!collapsed)} width="48px" height="48px" /> ); return ( } renderEnd={renderEnd}> {items.map((item, index) => ( handleItemPress(index)} tooltipContent={item.title} {...item} /> ))} = items.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreMenuOptions.map((item) => ( } value={item.title} /> ))} ); } ``` ### Auto Collapse Use the `autoCollapse` prop to automatically collapse the sidebar at or below the tablet breakpoint (768px). This is useful for responsive layouts where the sidebar should adapt to screen size. ```jsx live function AutoCollapse() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; const [activeIndex, setActiveIndex] = useState(0); return ( }> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} Resize the browser window to see the sidebar auto-collapse at the tablet breakpoint. ); } ``` ## Custom Content ### Logo The `logo` prop accepts either a React element or a render function that receives the collapsed state. Use the render function when you need different logos for collapsed and expanded states. ```jsx live function CustomLogo() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, ]; const [activeIndex, setActiveIndex] = useState(0); const [collapsed, setCollapsed] = useState(false); const renderLogo = (isCollapsed) => isCollapsed ? ( ) : ( ); return ( ( setCollapsed(!collapsed)} /> )} > {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ### Render End The `renderEnd` prop places content at the bottom of the sidebar. It receives the collapsed state as a parameter, allowing you to adapt the content based on the sidebar's state. ```jsx live function RenderEndExample() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, ]; const [activeIndex, setActiveIndex] = useState(0); const renderEnd = (isCollapsed) => ( alert('Help clicked!')} > {!isCollapsed && ( Help & Support )} ); return ( } renderEnd={renderEnd} styles={{ end: { width: '100%', }, }} > {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Styling Use the `styles` prop to customize specific parts of the sidebar. ```jsx live function CustomStyles() { const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; const [activeIndex, setActiveIndex] = useState(0); return ( } renderEnd={() => ( Help )} styles={{ root: { background: 'linear-gradient(180deg, var(--color-bg) 0%, var(--color-bgAlternate) 100%)', }, logo: { paddingBottom: 32 }, end: { width: '100%' }, }} > {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` You can also use custom class names on the various subcomponents in Sidebar using the `classNames` prop. ```jsx const customLogoStyles = css` padding-bottom: var(--spacing-6); `; function CustomClassNamesExample() { const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; return ( } classNames={{ logo: customLogoStyles, }} > {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Composed Examples ### Application Shell A complete application layout with sidebar navigation, main content area, and responsive behavior. ```jsx live function ApplicationShell() { const items = [ { title: 'Dashboard', icon: 'home' }, { title: 'Analytics', icon: 'chartPie' }, { title: 'Transactions', icon: 'trading' }, { title: 'Payments', icon: 'pay' }, { title: 'News Feed', icon: 'newsFeed' }, { title: 'Rewards', icon: 'giftBox' }, { title: 'Lending', icon: 'cash' }, { title: 'DeFi', icon: 'defi' }, ]; const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const navItems = items.slice(0, 5); const moreMenuOptions = items.slice(5); const handleMoreMenuChange = (newValue) => { const moreIndex = moreMenuOptions.findIndex((option) => option.title === newValue) + navItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemPress = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; const currentPage = items[activeIndex]?.title || 'Dashboard'; return ( } renderEnd={(isCollapsed) => ( {!isCollapsed && Settings} {!isCollapsed && Profile} )} > {navItems.map((item, index) => ( handleItemPress(index)} title={item.title} tooltipContent={item.title} /> ))} = navItems.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreMenuOptions.map((item) => ( } value={item.title} /> ))} {currentPage} Welcome to the {currentPage.toLowerCase()} page. This is a sample application shell demonstrating the Sidebar component with responsive behavior. ); } ``` ### Condensed Trading Interface A condensed sidebar optimized for professional trading interfaces with minimal visual footprint. ```jsx live function TradingInterface() { const items = [ { title: 'Spot', icon: 'chartCandles' }, { title: 'Futures', icon: 'chartBar' }, { title: 'Portfolio', icon: 'chartPie' }, { title: 'Orders', icon: 'documentation' }, ]; const [activeIndex, setActiveIndex] = useState(0); return ( } variant="condensed"> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} /> ))} BTC/USD $67,432.50 {items[activeIndex].title} Chart Area ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/Sidebar/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/Sidebar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Sidebar/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { HStack } from '@coinbase/cds-web/layout'; import { Sidebar, SidebarItem } from '@coinbase/cds-web/navigation'; import { LogoMark } from '@coinbase/cds-web/icons'; import { Icon } from '@coinbase/cds-web/icons'; import { Text } from '@coinbase/cds-web/typography'; import { Pressable } from '@coinbase/cds-web/system'; import webStylesData from ':docgen/web/navigation/Sidebar/styles-data'; export const SidebarExample = ({ classNames }) => { const sidebarItems = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; const renderEnd = () => ( End item ); return ( } renderEnd={renderEnd} styles={{ end: { width: '100%' } }} > {sidebarItems.map((item, index) => ( ))} ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Sidebar/index.mdx ================================================ --- id: sidebar title: Sidebar platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/Sidebar/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webStyles={} webStylesToc={webStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Sidebar/webMetadata.json ================================================ { "import": "import { Sidebar } from '@coinbase/cds-web/navigation/Sidebar'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/Sidebar.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-sidebar--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12187", "description": "A composable and customizable vertical navigation component with support for multiple variants, collapsible states, and custom content areas.", "relatedComponents": [ { "label": "SidebarItem", "url": "/components/navigation/SidebarItem/" }, { "label": "SidebarMoreMenu", "url": "/components/navigation/SidebarMoreMenu/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/SidebarItem/_webExamples.mdx ================================================ ## Basics SidebarItem requires an `icon` and `title`. Place it inside a Sidebar component which provides context for collapsed state and variant styling. ```jsx live function BasicSidebarItem() { const [active, setActive] = useState(false); return ( }> setActive(!active)} title="Home" tooltipContent="Home" /> ); } ``` ## Active State Use the `active` prop to indicate the currently selected navigation item. The active state changes the text and icon color to provide visual feedback. ```jsx live function ActiveState() { const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, { title: 'Settings', icon: 'cog' }, ]; return ( }> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Collapsed State When the parent Sidebar is collapsed, SidebarItem automatically hides the title text and shows only the icon. Use `tooltipContent` to display a tooltip on hover, which is essential for usability since the title is hidden. ```jsx live function CollapsedState() { const [collapsed, setCollapsed] = useState(true); const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, ]; return ( } renderEnd={() => ( setCollapsed(!collapsed)} /> )} > {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Styling ### Border Radius The default border radius is `1000` (pill shape) for the default sidebar variant. You can customize it with the `borderRadius` prop. ```jsx live function CustomBorderRadius() { return ( }> ); } ``` ## Custom Component Use the `Component` prop to render a completely custom layout while still benefiting from SidebarItem's state management. Your custom component receives `icon`, `title`, `color`, `active`, and `isCollapsed` props. ```jsx live function CustomComponent() { const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Dashboard', icon: 'home', badge: 3 }, { title: 'Messages', icon: 'speechBubble', badge: 12 }, { title: 'Analytics', icon: 'chartBar', badge: 0 }, ]; const CustomSidebarContent = ({ icon, title, color, active, isCollapsed }) => ( {!isCollapsed && ( {title} {items.find((i) => i.title === title)?.badge > 0 && ( {items.find((i) => i.title === title)?.badge} )} )} ); return ( }> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ## Accessibility SidebarItem automatically sets `accessibilityLabel` to the `title` value and uses `aria-current="page"` when active. When collapsed, the accessibility label is applied to the Pressable to ensure screen readers announce the item correctly. Provide a custom `accessibilityLabel` for more descriptive screen reader announcements. ```jsx live function Accessibility() { const [activeIndex, setActiveIndex] = useState(0); const items = [ { title: 'Home', icon: 'home', label: 'Navigate to home page' }, { title: 'Assets', icon: 'chartPie', label: 'View your asset portfolio' }, { title: 'Trade', icon: 'trading', label: 'Open trading interface' }, ]; return ( }> {items.map((item, index) => ( setActiveIndex(index)} title={item.title} tooltipContent={item.title} /> ))} ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/SidebarItem/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/SidebarItem/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SidebarItem/index.mdx ================================================ --- id: sidebarItem title: SidebarItem platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/SidebarItem/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/SidebarItem/webMetadata.json ================================================ { "import": "import { SidebarItem } from '@coinbase/cds-web/navigation/SidebarItem'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/SidebarItem.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-sidebaritem--sidebar-item-default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12187", "description": "A navigation item component designed to work within a Sidebar.", "relatedComponents": [ { "label": "Sidebar", "url": "/components/navigation/Sidebar/" }, { "label": "SidebarMoreMenu", "url": "/components/navigation/SidebarMoreMenu/" } ], "dependencies": [ { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/navigation/SidebarMoreMenu/_webExamples.mdx ================================================ SidebarMoreMenu wraps a [Dropdown](/components/layout/Dropdown) to provide an overflow menu for additional navigation items in a [Sidebar](/components/navigation/Sidebar). Use it when you have more navigation items than can fit in the visible sidebar area. ## Basics Place `SidebarMoreMenu` inside a `Sidebar` component. Pass `SelectOption` components as children to define the menu items. Use the `onChange` callback to handle selection and `value` to control the selected item. ```jsx live function BasicSidebarMoreMenu() { const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const mainItems = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, { title: 'Trade', icon: 'trading' }, ]; const moreItems = [ { title: 'Rewards', icon: 'giftBox' }, { title: 'Lending', icon: 'cash' }, { title: 'DeFi', icon: 'defi' }, ]; const handleMoreMenuChange = (newValue) => { const moreIndex = moreItems.findIndex((item) => item.title === newValue) + mainItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemClick = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; return ( }> {mainItems.map((item, index) => ( handleItemClick(index)} title={item.title} tooltipContent={item.title} /> ))} = mainItems.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ## Trigger Title Use `triggerTitle` to customize the label shown on the menu trigger. This is useful for localization. ```jsx live function TriggerTitleExample() { const [moreMenuValue, setMoreMenuValue] = useState(); const moreItems = [ { title: 'Settings', icon: 'cog' }, { title: 'Help', icon: 'questionCircle' }, ]; return ( }> {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ## With Collapsed Sidebar When the sidebar is collapsed, the `tooltipContent` prop displays a tooltip on hover to identify the menu trigger. ```jsx live function CollapsedSidebarExample() { const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const [collapsed, setCollapsed] = useState(true); const mainItems = [ { title: 'Home', icon: 'home' }, { title: 'Assets', icon: 'chartPie' }, ]; const moreItems = [ { title: 'Rewards', icon: 'giftBox' }, { title: 'Settings', icon: 'cog' }, ]; const handleMoreMenuChange = (newValue) => { const moreIndex = moreItems.findIndex((item) => item.title === newValue) + mainItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemClick = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; return ( } renderEnd={() => ( setCollapsed(!collapsed)} /> )} > {mainItems.map((item, index) => ( handleItemClick(index)} title={item.title} tooltipContent={item.title} /> ))} = mainItems.length} onChange={handleMoreMenuChange} tooltipContent="More options" value={moreMenuValue} > {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ## Condensed Variant `SidebarMoreMenu` adapts automatically to the sidebar's `condensed` variant. ```jsx live function CondensedVariantExample() { const [activeIndex, setActiveIndex] = useState(0); const [moreMenuValue, setMoreMenuValue] = useState(); const mainItems = [ { title: 'Spot', icon: 'chartCandles' }, { title: 'Futures', icon: 'chartBar' }, ]; const moreItems = [ { title: 'Portfolio', icon: 'chartPie' }, { title: 'Orders', icon: 'documentation' }, { title: 'History', icon: 'orderHistory' }, ]; const handleMoreMenuChange = (newValue) => { const moreIndex = moreItems.findIndex((item) => item.title === newValue) + mainItems.length; setActiveIndex(moreIndex); setMoreMenuValue(newValue); }; const handleItemClick = (index) => { setActiveIndex(index); setMoreMenuValue(undefined); }; return ( } variant="condensed"> {mainItems.map((item, index) => ( handleItemClick(index)} title={item.title} tooltipContent={item.title} /> ))} = mainItems.length} onChange={handleMoreMenuChange} tooltipContent="More" value={moreMenuValue} > {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ## Styling ### Border Radius Use the `borderRadius` prop to customize the trigger's corner radius. ```jsx live function BorderRadiusExample() { const [moreMenuValue, setMoreMenuValue] = useState(); const moreItems = [ { title: 'Settings', icon: 'cog' }, { title: 'Help', icon: 'questionCircle' }, ]; return ( }> {moreItems.map((item) => ( } value={item.title} /> ))} }> {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ## Accessibility `SidebarMoreMenu` automatically handles ARIA attributes for the dropdown menu pattern. Set `tooltipContent` to provide context when the sidebar is collapsed, ensuring users can identify the trigger via tooltip. ```jsx live function AccessibilityExample() { const [moreMenuValue, setMoreMenuValue] = useState(); const moreItems = [ { title: 'Account Settings', icon: 'cog' }, { title: 'Help Center', icon: 'questionCircle' }, { title: 'Log Out', icon: 'logout' }, ]; return ( }> {moreItems.map((item) => ( } value={item.title} /> ))} ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/SidebarMoreMenu/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/navigation/SidebarMoreMenu/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/SidebarMoreMenu/index.mdx ================================================ --- id: sidebarMoreMenu title: SidebarMoreMenu platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/navigation/SidebarMoreMenu/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/SidebarMoreMenu/webMetadata.json ================================================ { "import": "import { SidebarMoreMenu } from '@coinbase/cds-web/navigation/SidebarMoreMenu'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/navigation/SidebarMoreMenu.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-navigation-sidebarmoremenu--sidebar-more-menu-default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12187", "description": "SidebarMoreMenu provides a dropdown menu for additional navigation options in the Sidebar. Use it when you have more navigation items than can comfortably fit in the visible sidebar area.", "relatedComponents": [ { "label": "Sidebar", "url": "/components/navigation/Sidebar/" }, { "label": "SidebarItem", "url": "/components/navigation/SidebarItem/" }, { "label": "Dropdown", "url": "/components/layout/Dropdown/" }, { "label": "SelectOption", "url": "/components/inputs/SelectOption/" } ], "dependencies": [ { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_mobileExamples.mdx ================================================ ## Basic Usage The stepper can be used in two directions: horizontal and vertical. Each direction has its own unique default design in order to support different use cases. ### Direction: Horizontal ```tsx const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); // Handle completion logic in your component const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; return ( ); ``` ### Direction: Vertical ```tsx const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); // Handle completion logic in your component const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; return ( ); ``` ## Step Config The Stepper is ultimately a visual representation of an array of step objects (i.e. `StepperValue[]`). These should be defined outside of the component or memoized prior to rendering a Stepper. Commonly used or required **StepperValue** properties: - `id` - A required, unique identifier for the step. - `label` - The label of the step. Optionally exclude this property to hide the label text. - `subSteps` - An optional array of sub-steps to nest under the step. - `metadata` - An optional object that can be used to store additional data about the step. This is useful when providing your own custom Step components. ## useStepper hook Call the `useStepper` hook to initialize stepper state, access the current state and perform state mutations with its API. The hook returns a tuple where the first member is the current stepper state containing the `activeStepId`. ```tsx const [stepperState, stepperApi] = useStepper({ steps }); ; ``` The second member is an API for manipulating the stepper state and includes the following methods: ```tsx type StepperApi = { /** Update the currently active step to the step with `id`. */ goToStep: (id: string) => void; /** Update the currently active step to the next enabled step in the steps array. Does nothing if the last step is already active. */ goNextStep: () => void; /** Update the currently active step to the previous enabled step in the steps array. Does nothing if the first step is already active. */ goPreviousStep: () => void; /** Reset the active step to the original default active step. */ reset: () => void; }; ``` ## Common Patterns & Use Cases ### Sub-steps A common use-case for the vertical stepper is to visualize long and complex workflows with nested/grouped steps. A StepperValue object optionally accepts a `subSteps` property, which is also an array of StepperValue objects. :::danger Avoid Deep Nesting Steps can be nested arbritrarily deep, however CDS does not advise nesting deeper than one level. ::: ```tsx const steps: StepperValue[] = [ { id: 'first-step', label: 'First step', }, { id: 'second-step', label: 'Second step', subSteps: [ { id: 'second-step-substep-one', label: 'Substep one', }, { id: 'second-step-substep-two', label: 'Substep two', }, { id: 'second-step-substep-three', label: 'Substep three', }, ], }, { id: 'final-step', label: 'Final step', }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); return ( ); ``` ## Customization Options ### 1. Custom Components Stepper is highly customizable. Use the _Component_ props to customize Stepper with your own React components. Components can be set on the Stepper or individually on each step. Custom components set on a specific step will override the same component set on the Stepper. #### Customizable subcomponents - **StepperHeaderComponent**: Rendered above the entire stepper, helpful to display an overall title or label. - **StepperIconComponent**: Useful for showing a small visual with the step to convey state or the intent of the step. - **StepperProgressComponent**: Can be used to show an animated marker of progress with each step. - **StepperLabelComponent**: A component responsible for rendering the label text or main content associated with the step. - **StepperSubstepContainerComponent**: Responsible for rendering the recursive sub-steps of a step. Below are some basic diagrams to help visualize the Stepper anatomy in its two orientations. ```text direction: horizontal ┌─────────────────────────────────┐ │ Step (VStack) │ │ ┌───────────────────────────┐ │ │ │ HStack │ │ │ │ ┌──────┐ ┌──────────────┐ │ │ │ │ │ Icon │ │ Progress │ │ │ │ │ │ │ │ │ │ │ │ │ └──────┘ └──────────────┘ │ │ │ └───────────────────────────┘ │ │ ┌───────────────────────────┐ │ │ │ Label │ │ │ └───────────────────────────┘ │ │ ┌───────────────────────────┐ │ │ │ SubstepContainer │ │ │ │ (recursive) │ │ │ └───────────────────────────┘ │ └─────────────────────────────────┘ ``` ```text direction: vertical ┌─────────────────────────────────────────────────┐ │ Step (VStack) │ │ ┌───────────────────────────────────────────┐ │ │ │ HStack │ │ │ │ ┌─────────────┐ ┌───────────────────┐ │ │ │ │ │ VStack │ │ VStack │ │ │ │ │ │ ┌─────────┐ │ │ ┌───────────────┐ │ │ │ │ │ │ │ Icon │ │ │ │ Label │ │ │ │ │ │ │ └─────────┘ │ │ └───────────────┘ │ │ │ │ │ │ ┌─────────┐ │ │ ┌───────────────┐ │ │ │ │ │ │ │Progress │ │ │ │ Substeps │ │ │ │ │ │ │ └─────────┘ │ │ │ (recursive) │ │ │ │ │ │ └─────────────┘ │ └───────────────┘ │ │ │ │ └───────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘ ``` Each custom component receives a specific set of props that provide access to step data and state. When writing your own components, make sure you're getting the most out of Stepper by importing our custom component types like so: ```tsx import type { StepperLabelProps } from '@coinbase/cds-web/stepper/Stepper'; const TravelBookingLabel = ({ step, active, depth, }: StepperLabelProps) => { const { label, metadata, id } = step; const subtitle = metadata?.subtitle as string; if (depth === 0 && metadata) { return ( ); } ``` :::tip Using Default Components In many cases, it may be helpful to compose the default Stepper Components within your own. For example, you may want to make the default label pressable. All of the default components used by Stepper are exported and available for you to use. ```tsx import { DefaultStepperLabelHorizontal } from '@coinbase/cds-web/stepper'; ( )} />; ``` ::: #### Null Components Pass null to any of the component props to completely disable its functionality and hide it from the user. ```tsx const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); return ( ); ``` #### Custom Metadata for Rich Step Data The `metadata` property on each step allows you to store additional data that can be used by custom components to create rich, interactive experiences. This is particularly useful for complex workflows where each step needs to display contextual information. ```tsx function StepperCustomMetadataExample() { const CustomBookingLabel = ({ step, active }) => { const { label, metadata } = step; return ( ); }; const bookingSteps: StepperValue<{ name: string; date: string; time: string; }>[] = [ { id: 'book-hotel', label: 'Book Hotel', metadata: { name: 'Marriott Downtown', date: '2025-06-13', time: '3:00 PM Check-in', }, }, { id: 'book-flight', label: 'Book Flight', metadata: { name: 'Delta Airlines', date: '2025-06-13', time: '11:03 AM Departure', }, }, { id: 'rental-car', label: 'Reserve Rental Car', metadata: { name: 'Enterprise Rent-A-Car', date: '2025-06-14', time: '2:24 PM Pickup', }, }, ]; const [stepperState, stepperApi] = useStepper({ steps: bookingSteps, }); return ( ); } ``` #### Custom Step with Error State You can create custom icon, label, and progress components for individual steps to show special states like errors. In this example, the "Payment Method" step uses metadata to indicate an error condition. The custom components check this metadata and the completion state to dynamically render an error indicator, falling back to default components otherwise. ```jsx const ErrorStepperIcon = memo(function ErrorStepperIcon(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }); const ErrorStepperLabel = memo(function ErrorStepperLabel(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }); const ErrorStepperProgress = memo(function ErrorStepperProgress(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }); function StepperErrorStepExample() { const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method', metadata: { isError: true }, }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; return ( ); } ``` ### 2. styles API The Stepper component provides flexible styling options through the `styles` prop. Through this prop, you can apply inline styles to specific subcomponents of the Stepper; the same components which you can override with the `Component` props. #### styles The `styles` prop allows you to apply inline styles to specific child elements. It accepts an object with the following optional keys: - `header` - Applied to the header component - `step` - Applied to each individual step element - `substepContainer` - Applied to each substep container element - `progress` - Applied to each step progress bar element - `label` - Applied to each step label element - `icon` - Applied to each step icon element ```tsx ``` ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/stepper/Stepper/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/stepper/Stepper/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_webExamples.mdx ================================================ ## Basic Usage The stepper can be used in two directions: horizontal and vertical. Each direction has its own unique default design in order to support different use cases. ### Direction: Horizontal ```tsx live function StepperHorizontalBasicExample() { const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; const handlePrevious = () => { setComplete(false); stepperApi.goPreviousStep(); }; const handleReset = () => { setComplete(false); stepperApi.reset(); }; return ( {complete && } ); } ``` ### Direction: Vertical ```tsx live function StepperVerticalBasicExample() { const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; const handlePrevious = () => { setComplete(false); stepperApi.goPreviousStep(); }; const handleReset = () => { setComplete(false); stepperApi.reset(); }; return ( {complete && } ); } ``` ## Step Config The Stepper is ultimately a visual representation of an array of step objects (i.e. `StepperValue[]`). These should be defined outside of the component or memoized prior to rendering a Stepper. Commonly used or required **StepperValue** properties: - `id` - A required, unique identifier for the step. - `label` - The label of the step. Optionally exclude this property to hide the label text. - `subSteps` - An optional array of sub-steps to nest under the step. - `metadata` - An optional object that can be used to store additional data about the step. This is useful when providing your own custom Step components. ## useStepper hook Call the `useStepper` hook to initialize stepper state, access the current state and perform state mutations with its API. The hook returns a tuple where the first member is the current stepper state containing the `activeStepId`. ```tsx const [stepperState, stepperApi] = useStepper({ steps }); ; ``` The second member is an API for manipulating the stepper state and includes the following methods: ```tsx type StepperApi = { /** Update the currently active step to the step with `id`. */ goToStep: (id: string) => void; /** Update the currently active step to the next enabled step in the steps array. Does nothing if the last step is already active. */ goNextStep: () => void; /** Update the currently active step to the previous enabled step in the steps array. Does nothing if the first step is already active. */ goPreviousStep: () => void; /** Reset the active step to the original default active step. */ reset: () => void; }; ``` ## Common Patterns & Use Cases ### Sub-steps A common use-case for the vertical stepper is to visualize long and complex workflows with nested/grouped steps. A StepperValue object optionally accepts a `subSteps` property, which is also an array of StepperValue objects. :::danger Avoid Deep Nesting Steps can be nested arbritrarily deep, however CDS does not advise nesting deeper than one level. ::: ```tsx live function StepperVerticalSubStepsExample() { const steps: StepperValue[] = [ { id: 'first-step', label: 'First step', }, { id: 'second-step', label: 'Second step', subSteps: [ { id: 'second-step-substep-one', label: 'Substep one', }, { id: 'second-step-substep-two', label: 'Substep two', }, { id: 'second-step-substep-three', label: 'Substep three', }, ], }, { id: 'final-step', label: 'Final step', }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === 'final-step') { setComplete(true); } else { stepperApi.goNextStep(); } }; const handlePrevious = () => { setComplete(false); stepperApi.goPreviousStep(); }; const handleReset = () => { setComplete(false); stepperApi.reset(); }; return ( {complete && } ); } ``` ## Customization Options ### 1. Custom Components Stepper is highly customizable. Use the _Component_ props to customize Stepper with your own React components. Components can be set on the Stepper or individually on each step. Custom components set on a specific step will override the same component set on the Stepper. #### Customizable subcomponents - **StepperHeaderComponent**: Rendered above the entire stepper, helpful to display an overall title or label. - **StepperIconComponent**: Useful for showing a small visual with the step to convey state or the intent of the step. - **StepperProgressComponent**: Can be used to show an animated marker of progress with each step. - **StepperLabelComponent**: A component responsible for rendering the label text or main content associated with the step. - **StepperSubstepContainerComponent**: Responsible for rendering the recursive sub-steps of a step. Below are some basic diagrams to help visualize the Stepper anatomy in its two orientations. ```text direction: horizontal ┌─────────────────────────────────┐ │ Step (VStack) │ │ ┌───────────────────────────┐ │ │ │ HStack │ │ │ │ ┌──────┐ ┌──────────────┐ │ │ │ │ │ Icon │ │ Progress │ │ │ │ │ │ │ │ │ │ │ │ │ └──────┘ └──────────────┘ │ │ │ └───────────────────────────┘ │ │ ┌───────────────────────────┐ │ │ │ Label │ │ │ └───────────────────────────┘ │ │ ┌───────────────────────────┐ │ │ │ SubstepContainer │ │ │ │ (recursive) │ │ │ └───────────────────────────┘ │ └─────────────────────────────────┘ ``` ```text direction: vertical ┌─────────────────────────────────────────────────┐ │ Step (VStack) │ │ ┌───────────────────────────────────────────┐ │ │ │ HStack │ │ │ │ ┌─────────────┐ ┌───────────────────┐ │ │ │ │ │ VStack │ │ VStack │ │ │ │ │ │ ┌─────────┐ │ │ ┌───────────────┐ │ │ │ │ │ │ │ Icon │ │ │ │ Label │ │ │ │ │ │ │ └─────────┘ │ │ └───────────────┘ │ │ │ │ │ │ ┌─────────┐ │ │ ┌───────────────┐ │ │ │ │ │ │ │Progress │ │ │ │ Substeps │ │ │ │ │ │ │ └─────────┘ │ │ │ (recursive) │ │ │ │ │ │ └─────────────┘ │ └───────────────┘ │ │ │ │ └───────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘ ``` Each custom component receives a specific set of props that provide access to step data and state. When writing your own components, make sure you're getting the most out of Stepper by importing our custom component types like so: ```tsx import type { StepperLabelProps } from '@coinbase/cds-web/stepper/Stepper'; const TravelBookingLabel = ({ step, active, depth, }: StepperLabelProps) => { const { label, metadata, id } = step; const subtitle = metadata?.subtitle as string; if (depth === 0 && metadata) { return ( ); } ``` :::tip Using Default Components In many cases, it may be helpful to compose the default Stepper Components within your own. For example, you may want to make the default label pressable. All of the default components used by Stepper are exported and available for you to use. ```tsx import { DefaultStepperLabelHorizontal } from '@coinbase/cds-web/stepper'; ( )} />; ``` ::: #### Null Components Pass null to any of the component props to completely disable its functionality and hide it from the user. ```tsx live function StepperNullComponentsExample() { const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; const handlePrevious = () => { setComplete(false); stepperApi.goPreviousStep(); }; return ( ); } ``` #### Custom Metadata for Rich Step Data The `metadata` property on each step allows you to store additional data that can be used by custom components to create rich, interactive experiences. This is particularly useful for complex workflows where each step needs to display contextual information. ```tsx live function StepperCustomMetadataExample() { const CustomBookingLabel = ({ step, active }) => { const { label, metadata } = step; return ( ); }; const bookingSteps: StepperValue<{ name: string; date: string; time: string; }>[] = [ { id: 'book-hotel', label: 'Book Hotel', metadata: { name: 'Marriott Downtown', date: '2025-06-13', time: '3:00 PM Check-in', }, }, { id: 'book-flight', label: 'Book Flight', metadata: { name: 'Delta Airlines', date: '2025-06-13', time: '11:03 AM Departure', }, }, { id: 'rental-car', label: 'Reserve Rental Car', metadata: { name: 'Enterprise Rent-A-Car', date: '2025-06-14', time: '2:24 PM Pickup', }, }, ]; const [stepperState, stepperApi] = useStepper({ steps: bookingSteps, }); return ( ); } ``` #### Custom Step with Error State You can create custom icon, label, and progress components for individual steps to show special states like errors. In this example, the "Payment Method" step uses metadata to indicate an error condition. The custom components check this metadata and the completion state to dynamically render an error indicator, falling back to default components otherwise. ```jsx live function StepperErrorStepExample() { const ErrorStepperIcon = useMemo( () => memo(function ErrorStepperIcon(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }), [], ); const ErrorStepperLabel = useMemo( () => memo(function ErrorStepperLabel(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }), [], ); const ErrorStepperProgress = useMemo( () => memo(function ErrorStepperProgress(props) { const { step, visited, complete } = props; const showError = step.metadata?.isError && (visited || complete); if (!showError) { return ; } return ( ); }), [], ); const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information' }, { id: '3', label: 'Payment Method', metadata: { isError: true }, }, { id: '4', label: 'Review & Submit' }, ]; const [stepperState, stepperApi] = useStepper({ steps }); const [complete, setComplete] = useState(false); const handleNext = () => { if (stepperState.activeStepId === '4') { setComplete(true); } else { stepperApi.goNextStep(); } }; const handlePrevious = () => { setComplete(false); stepperApi.goPreviousStep(); }; const handleReset = () => { setComplete(false); stepperApi.reset(); }; return ( {complete && } ); } ``` ### 2. style and className APIs The Stepper component provides flexible styling options through the `classNames` and `styles` props. Through these props, you can apply CSS classes and inline styles to specific subcomponents of the Stepper; the same components which you can override with the `Component` props. #### classNames The `classNames` prop allows you to apply CSS classes to specific child elements. It accepts an object with the following optional keys: - `header` - Applied to the header component - `step` - Applied to each individual step element - `substepContainer` - Applied to each substep container element - `progress` - Applied to each step progress bar element - `label` - Applied to each step label element - `icon` - Applied to each step icon element ```tsx ``` :::tip data-attributes Each step element, automatically receives data attributes that reflect its step's current state, making it easy to style different step states with CSS. - `data-step-active=(true|false)` - Indicates when the step is the current, active step: - `data-step-complete=(true|false)` - Indicates when the stepper has been completed - `data-step-visited=(true|false)` - Indicates when the position of the active step is greater than or equal to the step's position in the stepper - `data-step-descendent-active=(true|false)` - Indicates when the active step has a descendent sub-step that is active ```css /* Style active step labels */ [data-step-active='true'] { color: var(--color-fgPrimary); font-weight: bold; } ``` ::: #### styles The `styles` prop allows you to apply inline styles to specific child elements. It follows the same structure as `classNames`: ```tsx ``` ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/stepper/Stepper/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Stepper/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Stepper } from '@coinbase/cds-web/stepper'; import webStylesData from ':docgen/web/stepper/Stepper/styles-data'; export const StepperExample = ({ classNames, direction }) => { const steps = [ { id: '1', label: 'Account Details' }, { id: '2', label: 'Personal Information', subSteps: [ { id: '2a', label: 'Contact Info' }, { id: '2b', label: 'Address' }, ], }, { id: '3', label: 'Payment Method' }, { id: '4', label: 'Review & Submit' }, ]; return ; }; ## Explorer ### Horizontal {(classNames) => } ### Vertical {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Stepper/index.mdx ================================================ --- id: stepper title: Stepper platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/stepper/Stepper/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import mobilePropsToc from ':docgen/mobile/stepper/Stepper/toc-props'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobileExamplesToc={mobileExamplesToc} mobilePropsTable={} mobilePropsToc={mobilePropsToc} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} webStyles={} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Stepper/mobileMetadata.json ================================================ { "import": "import { Stepper } from '@coinbase/cds-mobile/stepper/Stepper'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/stepper/Stepper.tsx", "description": "A component that visualizes states within a multi-step process.", "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/Stepper/webMetadata.json ================================================ { "import": "import { Stepper } from '@coinbase/cds-web/stepper/Stepper'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/stepper/Stepper.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-stepper-horizontal--default", "description": "A component that visualizes states within a multi-step process.", "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/_mobileExamples.mdx ================================================ ### Basic Example ```jsx function TabIndicatorExample() { const getRandomNumber = () => Math.random() * 100 + 100; const [width, setWidth] = useState(120); const [x, setX] = useState(120); const handlePress = () => { setWidth(getRandomNumber()); setX(getRandomNumber()); }; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tabs/TabIndicator/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/_webExamples.mdx ================================================ ### Basic Example ```jsx live function TabIndicatorExample() { const getRandomNumber = () => Math.random() * 100 + 100; const [width, setWidth] = useState(120); const [x, setX] = useState(120); const handlePress = () => { setWidth(getRandomNumber()); setX(getRandomNumber()); }; return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tabs/TabIndicator/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/index.mdx ================================================ --- id: tabIndicator title: TabIndicator platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tabs/TabIndicator/toc-props'; import mobilePropsToc from ':docgen/mobile/tabs/TabIndicator/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/mobileMetadata.json ================================================ { "import": "import { TabIndicator } from '@coinbase/cds-mobile/tabs/TabIndicator'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tabs/TabIndicator.tsx", "description": "A visual indicator that shows the active tab position.", "warning": "This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTabsActiveIndicator instead.", "relatedComponents": [ { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/navigation/TabIndicator/webMetadata.json ================================================ { "import": "import { TabIndicator } from '@coinbase/cds-web/tabs/TabIndicator'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tabs/TabIndicator.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tabs-tabindicator--default", "warning": "This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTabsActiveIndicator instead.", "description": "A visual indicator that shows the active tab position.", "relatedComponents": [ { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/_mobileExamples.mdx ================================================ ### Basic Example ```jsx Primary tab Primary tab Primary tab Primary tab Secondary tab Secondary tab Secondary tab Secondary tab ``` ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tabs/TabLabel/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/_webExamples.mdx ================================================ ### Basic Example ```jsx live Primary tab Primary tab Primary tab Primary tab Secondary tab Secondary tab Secondary tab Secondary tab ``` ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tabs/TabLabel/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/index.mdx ================================================ --- id: tabLabel title: TabLabel platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tabs/TabLabel/toc-props'; import mobilePropsToc from ':docgen/mobile/tabs/TabLabel/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/mobileMetadata.json ================================================ { "import": "import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tabs/TabLabel.tsx", "description": "A text label component used within tab navigation.", "warning": "This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTab instead.", "relatedComponents": [ { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" }, { "label": "TabIndicator", "url": "/components/navigation/TabIndicator/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabLabel/webMetadata.json ================================================ { "import": "import { TabLabel } from '@coinbase/cds-web/tabs/TabLabel'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tabs/TabLabel.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tabs-tablabel--default", "description": "A text label component used within tab navigation.", "warning": "This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTab instead.", "relatedComponents": [ { "label": "TabNavigation", "url": "/components/navigation/TabNavigation/" }, { "label": "TabIndicator", "url": "/components/navigation/TabIndicator/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/_mobileExamples.mdx ================================================ ### Basic Example ```jsx function TabNavigationExample() { // TAB MOCK DATA const tabs = useMemo(() => [ { id: 'first_primary_tab', label: 'Tab one' }, { id: 'second_primary_tab', label: 'Tab two' }, { id: 'third_primary_tab', label: 'Tab three' }, { id: 'fourth_primary_tab', label: 'Tab four' }, { id: 'fifth_primary_tab', label: 'Tab five' }, ]); const secondaryTabs = useMemo(() => [ { id: 'first_secondary_tab', label: 'Tab one' }, { id: 'second_secondary_tab', label: 'Tab two' }, ]); const [primary, setPrimary] = useState(); const [secondary, setSecondary] = useState(); return ( ); } ``` import A11y from './a11y.mdx'; ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tabs/TabNavigation/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/_webExamples.mdx ================================================ ### Basic Example ```jsx live function TabNavigationExample() { // TAB MOCK DATA const tabs = useMemo(() => [ { id: 'first_primary_tab', label: 'Tab one' }, { id: 'second_primary_tab', label: 'Tab two' }, { id: 'third_primary_tab', label: 'Tab three' }, { id: 'fourth_primary_tab', label: 'Tab four' }, { id: 'fifth_primary_tab', label: 'Tab five' }, ]); const secondaryTabs = useMemo(() => [ { id: 'first_secondary_tab', label: 'Tab one' }, { id: 'second_secondary_tab', label: 'Tab two' }, ]); const [primary, setPrimary] = useState(); const [secondary, setSecondary] = useState(); return ( ); } ``` import A11y from './a11y.mdx'; ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tabs/TabNavigation/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/a11y.mdx ================================================ ### Accessibility #### Screen reader Screen reader will read all tab labels in the group regardless if some are behind the overflow menu. Ensure that the nextArrowAccessibilityLabel and previousArrowAccessibilityLabel props are set if the tab list has overflow content #### Keyboarding Once a tab button is focused, other tabs can be selected by using the arrow keys, following the [w3.org Tabs Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/). Tabs are focus trapped, so pressing RightArrow on the last element will cycle back to the first element. ##### Tab: - When focus moves into the tab list, places focus on the active tab element. - When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable. ##### When focus is on a tab element : - Left Arrow: moves focus to the previous tab. If focus is on the first tab, this action moves focus to the last tab. Optionally, activates the newly focused tab (See note below). - Right Arrow: Moves focus to the next tab. If focus is on the last tab element, this action moves focus to the first tab. Optionally, activates the newly focused tab (See note below). - Space or Enter: Activates the tab. ```jsx live function TabNavigationExample() { // TAB MOCK DATA const tabs = useMemo(() => [ { id: 'first_primary_tab', label: 'Tab one' }, { id: 'second_primary_tab', label: 'Tab two' }, { id: 'third_primary_tab', label: 'Tab three' }, ]); const [primary, setPrimary] = useState(tabs[0].id); // This should be kept out of the fn const MockTabPanel = ({ id, children }) => { /** This is a naive and simple approach to * illustrate the proper a11y configuration * Ideally you'll be using some nice animations **/ const display = useMemo(() => (primary !== id ? 'none' : undefined), [primary, id]); return ( {children} ); }; // This should be kept out of the fn const MockTabPanels = ({ activeId }) => { const tabDisplay = useMemo( () => ({ one: activeId !== tabs[0].id ? 'none' : 'block', two: activeId !== tabs[1].id ? 'none' : 'block', three: activeId !== tabs[2].id ? 'none' : 'block', }), [activeId, tabs], ); return ( <> Let's tab! Press the tab key until the Tab one tab is focused. Now try using the right arrow key to move through the tab list. Pretty neat, hey? Okay, what happens if you press the right arrow key when you're at the end of the list? This link {' '} in the body of the tab is here to provide another thing to focus on. You made it to tab two! You're a natural 🕺 Can you make it to tab three? Heyooo, tab three! Now if you really want to have some fun, turn on a screen reader like{' '} VoiceOver and see how it sounds! ); }; return ( Tab navigation example ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/index.mdx ================================================ --- id: tabNavigation title: TabNavigation (Deprecated) platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tabs/TabNavigation/toc-props'; import mobilePropsToc from ':docgen/mobile/tabs/TabNavigation/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/mobileMetadata.json ================================================ { "import": "import { TabNavigation } from '@coinbase/cds-mobile/navigation/TabNavigation'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tabs/TabNavigation.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=240-10484&t=Qy6RCJCgjp5sUPUq-0", "description": "Organizes content across different screens or data sets.", "warning": "This component is deprecated. Please use the Tabs component instead.", "relatedComponents": [ { "label": "Tabs", "url": "/components/navigation/Tabs/" }, { "label": "TopNavBar", "url": "/components/navigation/TopNavBar/" }, { "label": "SegmentedTabs", "url": "/components/navigation/SegmentedTabs/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabNavigation/webMetadata.json ================================================ { "import": "import { TabNavigation } from '@coinbase/cds-web/tabs/TabNavigation'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tabs/TabNavigation.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tabs-tabnavigation--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=240-10484&t=Qy6RCJCgjp5sUPUq-0", "description": "Organizes content across different screens or data sets.", "warning": "This component is deprecated. Please use the Tabs component instead.", "relatedComponents": [ { "label": "Tabs", "url": "/components/navigation/Tabs/" }, { "label": "NavigationBar", "url": "/components/navigation/NavigationBar/" }, { "label": "SegmentedTabs", "url": "/components/navigation/SegmentedTabs/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/_mobileExamples.mdx ================================================ ### Basic Example ```jsx function TabbedChipsExample() { const tabs = [ { id: 'all_tab', label: 'All', }, { id: 'swap_', label: 'Swap', }, { id: 'collect_tab', label: 'Collect', }, { id: 'bridge_tab', label: 'Bridge', }, ]; const [value, setValue] = useState(tabs[0].id); return ( Popular assets ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/chips/TabbedChips/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/_webExamples.mdx ================================================ ### Basic Example ```jsx live function TabbedChipsExample() { const tabs = [ { id: 'all_tab', label: 'All', }, { id: 'swap_', label: 'Swap', }, { id: 'collect_tab', label: 'Collect', }, { id: 'bridge_tab', label: 'Bridge', }, ]; const [value, setValue] = useState(tabs[0].id); return ( Popular assets ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/chips/TabbedChips/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/index.mdx ================================================ --- id: tabbedChips title: TabbedChips (Deprecated) platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/chips/TabbedChips/toc-props'; import mobilePropsToc from ':docgen/mobile/chips/TabbedChips/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/mobileMetadata.json ================================================ { "import": "import { TabbedChips } from '@coinbase/cds-mobile/chips/TabbedChips'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/chips/TabbedChips.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=10177-4851&t=CBAoZQsuZ7YFfLxB-0", "description": "Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.", "warning": "This component is deprecated. Please use the new TabbedChips alpha component instead.", "relatedComponents": [ { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabbedChips/webMetadata.json ================================================ { "import": "import { TabbedChips } from '@coinbase/cds-web/chips/TabbedChips'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/chips/TabbedChips.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chips-tabbedchips--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=10177-4851&t=CBAoZQsuZ7YFfLxB-0", "description": "Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.", "warning": "This component is deprecated. Please use the new TabbedChips alpha component instead.", "relatedComponents": [ { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_mobileExamples.mdx ================================================ ### Basic usage ```tsx function ExampleDefault() { const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, { id: 'bridge', label: 'Bridge' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Compact ```tsx function ExampleCompactNoStart() { const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, { id: 'bridge', label: 'Bridge' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Many tabs (scrollable) :::tip Scrolling behavior The list becomes horizontally scrollable when content overflows; an `OverflowGradient` appears on the edge to hint more content. ::: ```tsx function ExampleManyTabs() { const tabs = Array.from({ length: 12 }).map((_, i) => ({ id: `tab_${i + 1}`, label: `Tab ${i + 1}`, })); const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### With autoScrollOffset :::tip Auto-scroll offset The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the overflow gradient on the left side. Try clicking tabs near the edges to see the difference. ::: ```tsx function ExampleAutoScrollOffset() { const tabs = Array.from({ length: 25 }).map((_, i) => ({ id: `tab_${i + 1}`, label: `Tab ${i + 1}`, })); const [activeTab, setActiveTab] = useState(tabs[0]); return ( Default offset (30px) Custom offset (60px) ); } ``` ### Long text tabs ```tsx function ExampleLongText() { const tabs = [ { id: 'a', label: 'Very long tab label that can wrap on small widths' }, { id: 'b', label: 'Another extra long label to test overflow' }, { id: 'c', label: 'Short' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Disabled tab ```tsx function ExampleDisabled() { const tabs = [ { id: 'first', label: 'First' }, { id: 'second', label: 'Second', disabled: true }, { id: 'third', label: 'Third' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### With start media :::tip Media sizing For start media, use circular images sized 24×24 for regular chips and 16×16 for compact chips. ::: ```tsx function ExampleWithStart() { const icon = { height: 24, width: 24, shape: 'circle', source: assets.eth.imageUrl }; const compactIcon = { height: 16, width: 16, shape: 'circle', source: assets.eth.imageUrl }; const tabs = [ { id: 'all', label: 'All', start: }, { id: 'swap', label: 'Swap', start: }, { id: 'collect', label: 'Collect', start: }, { id: 'bridge', label: 'Bridge', start: }, ]; const compactTabs = tabs.map((tab) => ({ ...tab, start: })); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Custom TabComponent :::tip Custom Tab behavior When providing a custom TabComponent, use `useTabsContext()` and call `updateActiveTab(id)` to update selection state. Reflect the active state (e.g., end icon state) based on `activeTab?.id === id`. ::: ```tsx function CustomTab({ id, label, ...props }: TabbedChipProps) { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} end={} {...props} > {label} ); } const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, ]; function Example() { const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } render(); ``` ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/alpha/tabbed-chips/TabbedChips/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/alpha/tabbed-chips/TabbedChips/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_webExamples.mdx ================================================ ### Basic usage ```jsx live function ExampleDefault() { const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, { id: 'bridge', label: 'Bridge' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Compact ```jsx lived function ExampleCompactNoStart() { const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, { id: 'bridge', label: 'Bridge' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Many tabs (paddles) :::tip Paddles & overflow Paddles appear automatically when the tab list overflows. ::: ```jsx live function ExampleWithPaddles() { const tabs = Array.from({ length: 12 }).map((_, i) => ({ id: `tab_${i + 1}`, label: `Tab ${i + 1}`, })); const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### With autoScrollOffset :::tip Auto-scroll offset The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the paddle on the left side. Try clicking tabs near the edges to see the difference. ::: ```jsx live function ExampleAutoScrollOffset() { const tabs = Array.from({ length: 25 }).map((_, i) => ({ id: `tab_${i + 1}`, label: `Tab ${i + 1}`, })); const [activeTab, setActiveTab] = useState(tabs[0]); return ( Default offset (50px) Custom offset (100px) ); } ``` ### With custom sized paddles :::tip Paddle styling You can adjust the size of the paddles via `styles.paddle`. ::: ```jsx live function ExampleCustomPaddles() { const tabs = Array.from({ length: 10 }).map((_, i) => ({ id: `t_${i + 1}`, label: `Item ${i + 1}`, })); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Long text tabs ```jsx live function ExampleLongText() { const tabs = [ { id: 'a', label: 'Very long tab label that can wrap on small widths' }, { id: 'b', label: 'Another extra long label to test overflow' }, { id: 'c', label: 'Short' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### Disabled tab ```jsx live function ExampleDisabled() { const tabs = [ { id: 'first', label: 'First' }, { id: 'second', label: 'Second', disabled: true }, { id: 'third', label: 'Third' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ; } ``` ### With start media :::tip Media sizing For start media, use circular images sized 24×24 for regular chips and 16×16 for compact chips. ::: ```jsx live function ExampleWithStart() { const icon = { height: 24, width: 24, shape: 'circle', source: assets.eth.imageUrl }; const compactIcon = { height: 16, width: 16, shape: 'circle', source: assets.eth.imageUrl }; const tabs = [ { id: 'all', label: 'All', start: }, { id: 'swap', label: 'Swap', start: }, { id: 'collect', label: 'Collect', start: }, { id: 'bridge', label: 'Bridge', start: }, ]; const compactTabs = tabs.map((tab) => ({ ...tab, start: })); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Custom TabComponent :::tip Custom Tab behavior When providing a custom TabComponent, use `useTabsContext()` and call `updateActiveTab(id)` to update selection state. Reflect the active state (e.g., end icon state) based on `activeTab?.id === id`. ::: ```tsx live noInline function CustomTab({ id, label, ...props }: TabbedChipProps) { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( } onClick={() => updateActiveTab(id)} {...props} > {label} ); } const tabs = [ { id: 'all', label: 'All' }, { id: 'swap', label: 'Swap' }, { id: 'collect', label: 'Collect' }, ]; function Example() { const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } render(); ``` ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/alpha/tabbed-chips/TabbedChips/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/_webStyles.mdx ================================================ import { useState, useCallback } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { TabbedChips } from '@coinbase/cds-web/alpha/tabbed-chips/TabbedChips'; import webStylesData from ':docgen/web/alpha/tabbed-chips/TabbedChips/styles-data'; export const TabbedChipsExample = ({ classNames }) => { const tabs = [ { id: 'all', label: 'All' }, { id: 'recent', label: 'Recent' }, { id: 'favorites', label: 'Favorites' }, { id: 'archived', label: 'Archived' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); const handleChange = useCallback((tab) => setActiveTab(tab), []); return ( ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/index.mdx ================================================ --- id: tabbedChipsAlpha title: TabbedChips (Alpha) platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/alpha/tabbed-chips/TabbedChips/toc-props'; import mobilePropsToc from ':docgen/mobile/alpha/tabbed-chips/TabbedChips/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webStyles={} webExamples={} mobilePropsTable={} mobileStyles={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} webStylesToc={webStylesToc} mobilePropsToc={mobilePropsToc} mobileStylesToc={mobileStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/mobileMetadata.json ================================================ { "import": "import { TabbedChips } from '@coinbase/cds-mobile/alpha/tabbed-chips/TabbedChips'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx", "description": "A chip component commonly used in filter context to refine a date source", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=52745-18139&t=oNwj9s4WegnZ1o3v-4", "alpha": true, "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "MediaChip", "url": "/components/inputs/MediaChip/" }, { "label": "InputChip", "url": "/components/inputs/InputChip/" }, { "label": "Tabs", "url": "/components/navigation/Tabs/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TabbedChipsAlpha/webMetadata.json ================================================ { "import": "import { TabbedChips } from '@coinbase/cds-web/alpha/tabbed-chips/TabbedChips'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-alpha-tabbedchips--default", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=10177-4851", "description": "A chip component commonly used in filter context to refine a date source", "alpha": true, "relatedComponents": [ { "label": "Chip", "url": "/components/inputs/Chip/" }, { "label": "MediaChip", "url": "/components/inputs/MediaChip/" }, { "label": "InputChip", "url": "/components/inputs/InputChip/" }, { "label": "Tabs", "url": "/components/navigation/Tabs/" }, { "label": "SelectChip", "url": "/components/inputs/SelectChip/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_mobileExamples.mdx ================================================ Tabs manages which tab is active and positions the animated indicator. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs/) instead. ## Basics Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. Set **`color`** / **`activeColor`** on **`Tabs`** for inactive / active label tokens, and **`activeBackground`** for the underline (forwarded to the indicator as its **`background`** token). ```jsx function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### No initial selection ```jsx function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(null); return ( ); } ``` ### Dot counts ```jsx function Example() { const tabs = [ { id: 'inbox', label: 'Inbox', count: 3, max: 99 }, { id: 'sent', label: 'Sent' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Disabled ```jsx function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2', disabled: true }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ## Accessibility Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilityRole="tab"` and selection state; keep tab panels in sync in your screen content. ## Styling ### Colors You can set **`color`** and **`activeColor`** for label tokens, and **`activeBackground`** for the underline. ```jsx function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ## Custom `TabComponent` Use **`useTabsContext`** with your own **`Pressable`** and **`Text`** for labels (and a custom **`TabsActiveIndicatorComponent`** if needed) when you need more control than `DefaultTab`. ```jsx function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const TabComponent = useCallback(({ id, label, disabled }) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} disabled={disabled} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled }} > {label} ); }, []); const ActiveIndicator = useCallback( (props) => , [], ); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Custom label content ```jsx function Example() { const tabs = [ { id: 'home', label: 'Home', icon: 'home' }, { id: 'profile', label: 'Profile', icon: 'user' }, { id: 'settings', label: 'Settings', icon: 'settings' }, ]; const CustomTab = useCallback(({ id, label, icon, disabled }) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} disabled={disabled} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled }} > {label} ); }, []); const ActiveIndicator = useCallback( (props) => , [], ); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tabs/Tabs/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/tabs/Tabs/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_webExamples.mdx ================================================ Tabs manages which tab is active and positions the animated indicator. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs) instead. ## Basics Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. Set **`color`** / **`activeColor`** on **`Tabs`** for inactive / active label tokens, and **`activeBackground`** for the underline (forwarded to the indicator as its **`background`** token). ```jsx live function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### No initial selection ```jsx live function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(null); return ( ); } ``` ### Dot counts Optional **`count`** and **`max`** on each tab are forwarded to the badge next to the label (see [DotCount](/components/other/DotCount/)). ```jsx live function Example() { const tabs = [ { id: 'inbox', label: 'Inbox', count: 3, max: 99 }, { id: 'sent', label: 'Sent' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Disabled Disable the whole row with **`disabled`**, or set **`disabled: true`** on individual tab items. ```jsx live function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2', disabled: true }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ## Accessibility Provide a descriptive **`accessibilityLabel`** on **`Tabs`** for the tab list. **`DefaultTab`** sets `aria-controls` / `aria-selected` for each tab; pair tabs with **`role="tabpanel"`** regions in your page content when you switch panels. ## Styling ### Colors You can set **`color`** and **`activeColor`** for label tokens, and **`activeBackground`** for the underline. ```jsx live function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ## Custom `TabComponent` Use **`useTabsContext`** inside your own tab button. ```jsx live function Example() { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const TabComponent = useCallback(({ id, label, disabled, ...props }) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} disabled={disabled} aria-pressed={isActive} {...props} > {label} ); }, []); const ActiveIndicator = useCallback( (props) => , [], ); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ### Custom label content Pass extra fields on each tab and read them in your `TabComponent` (for example icons). ```jsx live function Example() { const tabs = [ { id: 'home', label: 'Home', icon: 'home' }, { id: 'profile', label: 'Profile', icon: 'user' }, { id: 'settings', label: 'Settings', icon: 'settings' }, ]; const CustomTab = useCallback(({ id, label, icon, disabled, ...props }) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} disabled={disabled} aria-pressed={isActive} {...props} > {label} ); }, []); const ActiveIndicator = useCallback( (props) => , [], ); const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tabs/Tabs/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Tabs/_webStyles.mdx ================================================ import { useState } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { DefaultTabsActiveIndicator, Tabs } from '@coinbase/cds-web/tabs'; import webStylesData from ':docgen/web/tabs/Tabs/styles-data'; export const TabsExample = ({ classNames }) => { const tabs = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; const [activeTab, setActiveTab] = useState(tabs[0]); return ( ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Tabs/index.mdx ================================================ --- id: tabs title: Tabs platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tabs/Tabs/toc-props'; import mobilePropsToc from ':docgen/mobile/tabs/Tabs/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobileExamplesToc={mobileExamplesToc} mobilePropsTable={} mobilePropsToc={mobilePropsToc} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} webStyles={} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Tabs/mobileMetadata.json ================================================ { "import": "import { Tabs, DefaultTabsActiveIndicator } from '@coinbase/cds-mobile/tabs'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tabs/Tabs.tsx", "description": "Tabs is a flexible, accessible tab list for switching between related views. Use `DefaultTab` and `DefaultTabsActiveIndicator` for a standard underline tab row without custom tab wiring, or provide your own `TabComponent` and `TabsActiveIndicatorComponent`. For pill-style selection, see SegmentedTabs.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=25128-9889&t=7bpcjquwgXNk9lnN-4", "relatedComponents": [ { "label": "SegmentedTabs", "url": "/components/navigation/SegmentedTabs/" }, { "label": "TabIndicator", "url": "/components/navigation/TabIndicator/" }, { "label": "TabLabel", "url": "/components/navigation/TabLabel/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Tabs/webMetadata.json ================================================ { "import": "import { Tabs, DefaultTabsActiveIndicator } from '@coinbase/cds-web/tabs'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tabs/Tabs.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tabs-tabs--all", "description": "Tabs is a flexible, accessible tab list for switching between related views. Use `DefaultTab` and `DefaultTabsActiveIndicator` for a standard underline tab row without wiring custom components, or supply your own `TabComponent` and `TabsActiveIndicatorComponent` for full control. For pill-style selection, see SegmentedTabs.", "relatedComponents": [ { "label": "SegmentedTabs", "url": "/components/navigation/SegmentedTabs" }, { "label": "TabIndicator", "url": "/components/navigation/TabIndicator/" }, { "label": "TabLabel", "url": "/components/navigation/TabLabel/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/TopNavBar/_mobileExamples.mdx ================================================ ### Basic usage A `TopNavBar` with a title and back button. ```tsx }> Page Title ``` ### With Start and End Actions You can add actions to both the start and end sections of the navigation bar. ```tsx } end={ } > Profile ``` ### With a Bottom Section The `bottom` prop can be used to render components like tabs below the main navigation bar. ```tsx } end={} bottom={ {}} /> } > Home ``` ================================================ FILE: apps/docs/docs/components/navigation/TopNavBar/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/navigation/TopNavBar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/TopNavBar/index.mdx ================================================ --- id: topNavBar title: TopNavBar platform_switcher_options: { web: false, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import mobilePropsToc from ':docgen/mobile/navigation/TopNavBar/toc-props'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import mobileMetadata from './mobileMetadata.json'; } mobileExamples={} mobileExamplesToc={mobileExamplesToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/TopNavBar/mobileMetadata.json ================================================ { "import": "import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/navigation/TopNavBar.tsx", "description": "A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4024&t=HiiJP32sC3eSrsic-4", "relatedComponents": [ { "label": "BrowserBar", "url": "/components/navigation/BrowserBar/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Tour/_mobileExamples.mdx ================================================ The Tour component guides users through your app with step-by-step coachmarks. You define tour steps with unique IDs and wrap target elements with `TourStep` components. ## Basic usage ```jsx function BasicTourExample() { const [activeTourStep, setActiveTourStep] = useState(null); const StepOne = () => { const [checked, setChecked] = useState(false); const { goNextTourStep, stopTour } = useTourContext(); return ( Next } checkbox={ Don't show again } closeButtonAccessibilityLabel="Close" content="Add up to 3 lines of body copy. Deliver your message with clarity and impact" onClose={stopTour} title="My first step" /> ); }; const StepTwo = () => { const { goNextTourStep, stopTour } = useTourContext(); return ( Next } closeButtonAccessibilityLabel="Close" content={ 50% Add up to 3 lines of body copy. Deliver your message with clarity and impact } media={} onClose={stopTour} title="My second step" /> ); }; const StepThree = () => { const { stopTour, goNextTourStep, goPreviousTourStep } = useTourContext(); return ( } content="Add up to 3 lines of body copy. Deliver your message with clarity and impact" title="My third step" width={350} /> ); }; const tourSteps = [ { id: 'step1', Component: StepOne }, { id: 'step2', Component: StepTwo }, { id: 'step3', Component: StepThree }, ]; const TourContent = () => { const { startTour } = useTourContext(); return ( This is step 1 This is step 2 This is step 3 ); }; return ( ); } ``` Coachmarks can contain rich content including images, progress indicators, and custom layouts. ```jsx function RichContentExample() { const RichStep = () => { const { goNextTourStep, stopTour } = useTourContext(); return ( Continue } closeButtonAccessibilityLabel="Close" content={ Step 2 of 4 This step showcases how you can include rich content like progress bars and images. } media={ } onClose={stopTour} title="Rich Content Example" /> ); }; } ``` You can use TypeScript string literal types to ensure type safety for your step IDs. ```tsx type StepId = 'intro' | 'feature-highlight' | 'call-to-action'; function TypeSafeTourExample() { const [activeTourStep, setActiveTourStep] = useState | null>(null); const tourSteps: TourStepValue[] = [ { id: 'intro', Component: IntroStep }, { id: 'feature-highlight', Component: FeatureStep }, { id: 'call-to-action', Component: CTAStep }, ]; return ( {/* TypeScript error if id doesn't match StepId type */} ); } ``` ## Scrolling When tour steps are off-screen, you can use the `onBeforeActive` callback to scroll them into view. This callback runs before the step becomes active and can be async. ```jsx function ScrollingTourExample() { const [activeTourStep, setActiveTourStep] = useState(null); const scrollViewRef = useRef(null); const step2Ref = useRef(null); const step3Ref = useRef(null); // Helper function to scroll an element into view const scrollIntoView = async (scrollViewRef, elementRef) => { const scrollView = scrollViewRef.current; if (!scrollView) return; elementRef.current?.measureLayout(scrollView, (x, y) => { scrollView.scrollTo({ x, y, animated: true }); }); }; const tourSteps = [ { id: 'step1', Component: StepOne, }, { id: 'step2', onBeforeActive: async () => { // Scroll step 2 into view before showing the coachmark await scrollIntoView(scrollViewRef, step2Ref); }, Component: StepTwo, }, { id: 'step3', onBeforeActive: async () => { await scrollIntoView(scrollViewRef, step3Ref); }, Component: StepThree, }, ]; return ( Step 1 - visible on load Step 2 - requires scroll Step 3 - requires more scroll ); } ``` ## Customization ### Overlay You can hide the dimmed overlay behind the coachmark using the `hideOverlay` prop. This can be set globally on the `Tour` component or per-step. ```jsx function HideOverlayExample() { const [activeTourStep, setActiveTourStep] = useState(null); const tourSteps = [ { id: 'step1', Component: StepOne, // Hide overlay for just this step hideOverlay: true, }, { id: 'step2', Component: StepTwo, }, ]; return ( // Or hide overlay for all steps ... ); } ``` ### Mask Customize the mask (cutout) around the highlighted element with padding and border radius. ```jsx function MaskCustomizationExample() { const [activeTourStep, setActiveTourStep] = useState(null); const tourSteps = [ { id: 'step1', Component: StepOne, // Per-step mask customization tourMaskPadding: 16, tourMaskBorderRadius: 12, }, { id: 'step2', Component: StepTwo }, ]; return ( ... ); } ``` ### Positioning The Tour component uses `@floating-ui` to position coachmarks relative to their target elements. You can customize positioning with the `tourStepOffset`, `tourStepShift`, and `tourStepAutoPlacement` props. ```jsx function PositioningExample() { const [activeTourStep, setActiveTourStep] = useState(null); const tourSteps = [ { id: 'step1', Component: StepOne }, { id: 'step2', Component: StepTwo }, ]; return ( ... ); } ``` ### Arrow You can customize the arrow that points to the target element by providing a custom `TourStepArrowComponent`. ```jsx function CustomArrowExample() { const [activeTourStep, setActiveTourStep] = useState(null); // Custom arrow component (must forward ref) const CustomArrow = memo( forwardRef((props, ref) => { return ; }), ); const tourSteps = [ { id: 'step1', Component: StepOne, // Per-step custom arrow ArrowComponent: CustomArrow, arrowStyle: { color: 'red' }, }, { id: 'step2', Component: StepTwo }, ]; return ( ... ); } ``` ## Accessibility Always provide accessibility labels for close buttons using the `closeButtonAccessibilityLabel` prop and ensure coachmarks are navigable. ```jsx function AccessibleTourExample() { const AccessibleStep = () => { const { goNextTourStep, stopTour } = useTourContext(); return ( Next } closeButtonAccessibilityLabel="Close tour and return to main content" content="This coachmark has proper accessibility labels for screen readers." onClose={stopTour} title="Accessible Step" /> ); }; } ``` ## Callbacks Use the `onBeforeActive` callback to perform actions before a step becomes active, such as scrolling, fetching data, or preparing the UI. ```jsx function CallbacksExample() { const tourSteps = [ { id: 'step1', onBeforeActive: () => { console.log('Step 1 is about to become active'); // Perform any setup needed }, Component: StepOne, }, { id: 'step2', onBeforeActive: async () => { // Async operations are supported await someAsyncSetup(); console.log('Step 2 setup complete'); }, Component: StepTwo, }, ]; } ``` ================================================ FILE: apps/docs/docs/components/navigation/Tour/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/tour/Tour/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Tour/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/tour/Tour/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Tour/_webExamples.mdx ================================================ The Tour component guides users through your app with step-by-step coachmarks. You define tour steps with unique IDs and wrap target elements with `TourStep` components. ## Basic usage ```jsx live function Example() { const [activeTourStep, setActiveTourStep] = useState(null); const StepOne = () => { const [checked, setChecked] = useState(false); const { goNextTourStep, stopTour } = useTourContext(); return ( Next } checkbox={ Don't show again } content="Add up to 3 lines of body copy. Deliver your message with clarity and impact" onClose={stopTour} title="My first step" /> ); }; const StepTwo = () => { const { goNextTourStep, goPreviousTourStep, stopTour } = useTourContext(); return ( } content={ 50% Add up to 3 lines of body copy. Deliver your message with clarity and impact } media={} onClose={stopTour} title="My second step" /> ); }; const StepThree = () => { const { stopTour, goPreviousTourStep } = useTourContext(); return ( } content="Add up to 3 lines of body copy. Deliver your message with clarity and impact" title="My third step" width={350} /> ); }; const tourSteps = [ { id: 'step1', onBeforeActive: () => console.log('step1 before'), Component: StepOne, }, { id: 'step2', onBeforeActive: () => console.log('step2 before'), Component: StepTwo, }, { id: 'step3', onBeforeActive: () => console.log('step3 before'), Component: StepThree, }, ]; const TourExample = ({ spacerWidthIncrement = 0, spacerHeightIncrement = 500 }) => { const { startTour } = useTourContext(); const handleClick = useCallback(() => startTour(), [startTour]); return ( This is step 1 This is step 2 This is step 3 ); }; return ( ); } ``` You can use TypeScript string literal types to ensure type safety for your step IDs. ```tsx type StepId = 'intro' | 'feature-highlight' | 'call-to-action'; function TypeSafeTourExample() { const [activeTourStep, setActiveTourStep] = useState | null>(null); const tourSteps: TourStepValue[] = [ { id: 'intro', Component: IntroStep }, { id: 'feature-highlight', Component: FeatureStep }, { id: 'call-to-action', Component: CTAStep }, ]; return ( {/* TypeScript error if id doesn't match StepId type */} ); } ``` ## Scrolling The Tour component automatically scrolls to bring off-screen targets into view. You can customize this behavior with the `scrollOptions` prop or disable it entirely with `disableAutoScroll`. ```jsx function ScrollingExample() { const [activeTourStep, setActiveTourStep] = useState(null); const tourSteps = [ { id: 'step1', Component: StepOne }, { id: 'step2', // Disable auto-scroll for just this step disableAutoScroll: true, Component: StepTwo, }, { id: 'step3', // Custom scroll options for this step scrollOptions: { behavior: 'smooth', marginX: 50, marginY: 150, }, Component: StepThree, }, ]; return ( ... ); } ``` ## Customization ### Overlay You can hide the dimmed overlay behind the coachmark using the `hideOverlay` prop. This can be set globally on the `Tour` component or per-step. ```jsx live function HideOverlayExample() { const [activeTourStep, setActiveTourStep] = useState(null); const [hideOverlay, setHideOverlay] = useState(false); const StepOne = () => { const { goNextTourStep, stopTour } = useTourContext(); return ( Next } content="This step respects the global hideOverlay setting." onClose={stopTour} title="Step One" /> ); }; const StepTwo = () => { const { stopTour, goPreviousTourStep } = useTourContext(); return ( } content="This step also respects the global hideOverlay setting." title="Step Two" /> ); }; const tourSteps = [ { id: 'step1', Component: StepOne }, { id: 'step2', Component: StepTwo }, ]; const TourContent = () => { const { startTour } = useTourContext(); return ( setHideOverlay((prev) => !prev)}> Hide overlay Step 1 Step 2 ); }; return ( ); } ``` ### Mask Customize the mask (cutout) around the highlighted element with the `tourMaskPadding` and `tourMaskBorderRadius` props. ```jsx ... ``` You can provide a completely custom mask component using the `TourMaskComponent` prop. ```jsx function CustomMaskExample() { const [activeTourStep, setActiveTourStep] = useState(null); const CustomMask = ({ activeTourStepTargetRect, padding = 8, borderRadius = 8 }) => { // Custom mask implementation // activeTourStepTargetRect contains { x, y, width, height } of the target element return ( ); }; return ( ... ); } ``` ### Positioning The Tour component uses `@floating-ui` to position coachmarks relative to their target elements. You can customize positioning with the `tourStepOffset`, `tourStepShift`, and `tourStepAutoPlacement` props. ```jsx function PositioningExample() { const [activeTourStep, setActiveTourStep] = useState(null); const tourSteps = [ { id: 'step1', Component: StepOne }, { id: 'step2', Component: StepTwo }, ]; return ( ... ); } ``` ### Arrow You can customize the arrow that points to the target element by providing a custom `TourStepArrowComponent`. ```jsx function CustomArrowExample() { const [activeTourStep, setActiveTourStep] = useState(null); // Custom arrow component - MUST forward ref const CustomArrow = memo( forwardRef((props, ref) => { return ; }), ); const tourSteps = [ { id: 'step1', Component: StepOne, // Per-step custom arrow ArrowComponent: CustomArrow, // Or just customize the style arrowStyle: { color: 'var(--color-purple60)' }, }, { id: 'step2', Component: StepTwo }, ]; return ( ... ); } ``` ### Portal By default, the Tour uses React portals to render outside the DOM hierarchy. You can disable this behavior if needed. ```jsx ... ``` ## Accessibility Always provide accessibility labels for close buttons using the `closeButtonAccessibilityLabel` prop and ensure coachmarks are navigable. ```jsx function AccessibleTourExample() { const AccessibleStep = () => { const { goNextTourStep, stopTour } = useTourContext(); return ( Next } closeButtonAccessibilityLabel="Close tour and return to main content" content="This coachmark has proper accessibility labels for screen readers." onClose={stopTour} title="Accessible Step" /> ); }; } ``` ## Callbacks Use the `onBeforeActive` callback to perform actions before a step becomes active, such as fetching data, preparing the UI, or custom scrolling logic. ```jsx function CallbacksExample() { const tourSteps = [ { id: 'step1', onBeforeActive: () => { console.log('Step 1 is about to become active'); // Perform any setup needed }, Component: StepOne, }, { id: 'step2', onBeforeActive: async () => { // Async operations are supported await fetchStepData(); console.log('Step 2 data loaded'); }, Component: StepTwo, }, ]; } ``` ================================================ FILE: apps/docs/docs/components/navigation/Tour/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/tour/Tour/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/navigation/Tour/_webStyles.mdx ================================================ import { useState } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Button } from '@coinbase/cds-web/buttons'; import { VStack } from '@coinbase/cds-web/layout'; import { Text } from '@coinbase/cds-web/typography'; import { Tour, TourStep } from '@coinbase/cds-web/tour'; import { useTourContext } from '@coinbase/cds-common/tour/TourContext'; import webStylesData from ':docgen/web/tour/Tour/styles-data'; export const TourStylesExample = ({ classNames }) => { const [activeTourStep, setActiveTourStep] = useState(null); const StepContent = () => { const { stopTour } = useTourContext(); return (

Tour step content

); }; const steps = [{ id: 'step1', Component: StepContent }]; return ( Select a selector, then click Start Tour to see it highlighted ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/navigation/Tour/index.mdx ================================================ --- id: tour title: Tour platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/tour/Tour/toc-props'; import mobilePropsToc from ':docgen/mobile/tour/Tour/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} webStyles={} webStylesToc={webStylesToc} mobilePropsTable={} mobileExamples={} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/navigation/Tour/mobileMetadata.json ================================================ { "import": "import { Tour, TourStep } from '@coinbase/cds-mobile/tour'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/tour/Tour.tsx", "description": "Creates guided tours of a user interface.", "relatedComponents": [ { "label": "Coachmark", "url": "/components/navigation/Coachmark/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/navigation/Tour/webMetadata.json ================================================ { "import": "import { Tour, TourStep } from '@coinbase/cds-web/tour'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/tour/Tour.tsx", "description": "Creates guided tours of a user interface.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-tour--tour-default", "relatedComponents": [ { "label": "Coachmark", "url": "/components/navigation/Coachmark/" } ], "dependencies": [ { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_mobileExamples.mdx ================================================ ## Basic Example RollingNumber displays changing numeric values with a smooth per-digit roll animation and optional color pulse. It supports `Intl.NumberFormat` options, custom typography, ReactNode prefixes/suffixes, and accessibility. Pass a number in the `value` prop. Use the `format` prop for Intl formatting (currency, percent, grouping, compact) instead of pre-formatting the string yourself. ```tsx ``` ## Example Use Case ```tsx function ExampleUseCase() { const price = 12345.67; const difference = 79.65; const trendColor = difference >= 0 ? 'fgPositive' : 'fgNegative'; return ( Portfolio Balance 0 ? 'up ' : difference < 0 ? 'down ' : ''} color={trendColor} font="body" format={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2, }} prefix={ difference >= 0 ? ( ) : ( ) } suffix={`(${((Math.abs(difference) / price) * 100).toFixed(2)}%)`} value={Math.abs(difference)} /> BTC Conversion ); } ``` ## Formatting Use `format` prop for currency, percent, grouping, and compact notation formatting. The `format` prop takes in `Intl.NumberFormat` [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). ```tsx function Format() { const value = 98345.67; return ( Compact number with currency sign Number without grouping ); } ``` ## Typography RollingNumber forwards all Text props, but only character-level typographic props (e.g., `font`, `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `tabularNumbers`, `color`) are meaningful for its per-digit rendering. Layout/container props may have no effect—use them judiciously. ::::tip Mobile limitation Non-tabular numbers are currently not supported on mobile. The `tabularNumbers` setting should not be disabled. :::: ```tsx function TypographyExamples() { const price = 9876.54; return ( Font sizes, weights, and line heights Monospaced figures ); } ``` ## Color and Transition You can customize the number color and its animation transitions. Configure `y` to control the digit roll, and `color` to control the pulse. #### `transition` prop: - Type: `y?: ({ type: 'timing' } & WithTimingConfig) | ({ type: 'spring' } & WithSpringConfig); color?: ({ type: 'timing' } & WithTimingConfig) | ({ type: 'spring' } & WithSpringConfig);` - Default: `{ y: { type: 'timing', duration: durations.moderate3, easing: Easing.bezier(...curves.global), }, color: { type: 'timing', duration: durations.slow4, easing: Easing.bezier(...curves.global), }, }` ```tsx function ColorAndTransition() { const price = 555.55; return ( Color pulse and custom transition Customize positive and negative change colors Fast digits, slow color Springy digits Custom easings ); } ``` ## Digit Transition Variants RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop: - **`'every'`** (default): Rolls through every intermediate digit (e.g., 1→2→3→...→9). - **`'single'`**: Rolls directly to the new digit without showing intermediates. Direction (up/down) is based on the total value change. ```tsx function DigitTransitionVariants() { const price = 12345.67; return ( Every variant (default) Single variant ); } ``` ::::tip Direction-aware animation The single variant determines scroll direction based on the **total value change**, not individual digit changes. When the value increases, digits roll up (new digits enter from below). When the value decreases, digits roll down (new digits enter from above). This matches the behavior of the color pulse feature. :::: ## Prefix and Suffix Attach text or React nodes before/after the number to create rich compositions. If the prefix/suffix is a string, it will pulse color together with the main number. ```tsx function PrefixAndSuffix() { const value = 98345.67; const format = { style: 'currency' as const, currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 5, }; return ( Simple text prefix and suffix Dynamic prefix and suffix ReactNode prefix and suffix } suffix={} value={value} /> Suffix wraps to second line Suffix no wrapping ); } ``` ## Style Overrides Customize the look of each logical section (`i18nPrefix`, `integer`, `fraction`, `i18nSuffix`, `prefix`, `suffix`). :::tip Mobile limitation Per-section text styling (color, font, etc.) is not supported on mobile; text styles are applied globally within `RollingNumber`. ::: ```tsx function StyleOverrides() { const price = 12345.67; return ( Style overrides per section ); } ``` ## Subscript Notation for Tiny Decimals Enable `enableSubscriptNotation` to compactly represent leading zeros in the fractional part. ```tsx function Subscript() { const value = 0.0000000001; const format = { minimumFractionDigits: 2, maximumFractionDigits: 25 } as const; return ( Subscript for small decimals Default: With subscript: ); } ``` ## User-Provided Formatted Value You can also provide `formattedValue`; the component will render it directly instead of using the internal formatter. The numeric `value` is still required to drive animations and the color pulse. ```tsx function UserProvidedFormattedValue() { const btc = { value: 98_765.43, formattedValue: '¥98,765.43 BTC' } as const; const tiny = { value: 0.00009, formattedValue: '€0,0₄9', accessibilityLabel: '€0.00009', } as const; return ( User provided formatted value BTC prices } value={btc.value} /> Subscripts with comma as decimal separator ); } ``` ::::tip Accessibility and formattedValue When you provide `formattedValue`, the `accessibilityLabel` will default to your `formattedValue`. However, what’s rendered on screen is not always ideal for accessibility. For example, the subscript notation '0₉' may be announced as '09'. Provide your own `accessibilityLabel` as needed. :::: ## Patterns & Recipes Practical demos combining formatting, animation, and interactivity. ### Counter ```tsx function CounterExample() { const [count, setCount] = React.useState(0); const onInc = () => setCount((c) => c + 1); const onDec = () => setCount((c) => Math.max(0, c - 1)); return ( ); } ``` ### Countdown ```tsx function CountDownExample() { const pad = (n: number) => String(n).padStart(2, '0'); const totalSeconds = 5 * 60; const [seconds, setSeconds] = React.useState(totalSeconds); const [running, setRunning] = React.useState(false); React.useEffect(() => { if (!running) return; const id = setInterval(() => { setSeconds((prev) => { if (prev <= 1) { clearInterval(id); return 0; } return prev - 1; }); }, 1000); return () => clearInterval(id); }, [running]); const minutes = Math.floor(seconds / 60); const secs = seconds % 60; const formatted = `${pad(minutes)}:${pad(secs)}`; const onReset = () => setSeconds(totalSeconds); const progress = Math.max(0, Math.min(1, (totalSeconds - seconds) / totalSeconds)); return ( Countdown with progress ); } ``` ### Live Auction ```tsx function LiveBiddingExample() { const [currentBid, setCurrentBid] = React.useState(45000); const [bidCount, setBidCount] = React.useState(23); const [timeLeft, setTimeLeft] = React.useState(180); React.useEffect(() => { const timer = setInterval(() => { setTimeLeft((t) => Math.max(0, t - 1)); }, 1000); return () => clearInterval(timer); }, []); const placeBid = (increment: number) => { setCurrentBid((b) => b + increment); setBidCount((c) => c + 1); }; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; return ( Current Bid bids placed • remaining ); } ``` ## Anatomy & Customization RollingNumber (mobile) is composed of swappable subcomponents and exposes style hooks for each section of the number. Use these to customize structure and styling or to plug in your own components. ### Subcomponents - **RollingNumberMaskComponent**: Component responsible for masking the animated digit content. - **RollingNumberAffixSectionComponent**: Component responsible for rendering ReactNode `prefix` / `suffix` props. - **RollingNumberValueSectionComponent**: Component responsible for rendering the four `Intl.NumberFormat` sections (`i18nPrefix`, `integer`, `fraction`, `i18nSuffix`). - **RollingNumberDigitComponent**: Component responsible for the per-digit roll animation (Reanimated-driven). - **RollingNumberSymbolComponent**: Component responsible for rendering non-digit symbols (group separators, decimal, literals, etc.). You can replace any of these with your own components via props: ```tsx ``` ### Style overrides Use the `styles` prop to inline style specific parts: - **root**: Outer container (`HStack` root) - **visibleContent**: Container around the visible number and prefix/suffix - **formattedValueSection**: Container around the four i18n sections - **i18nPrefix**: Section generated by `Intl.NumberFormat` before the number - **integer**: Integer part of the number - **fraction**: Fractional part of the number - **i18nSuffix**: Section generated by `Intl.NumberFormat` after the number - **prefix**: Wrapper around your `prefix` prop - **suffix**: Wrapper around your `suffix` prop - **text**: Shared text style applied to digits, symbols, prefix, and suffix (mobile only) ### Structure diagrams High-level anatomy of RollingNumber (mobile) and its sections: ```text RollingNumber (root: HStack) ├── invisibleMeasuredDigits 0 (offscreen, used for measuring digit height) ├── screenReaderOnly (hidden a11y text) └── HStack (visibleContent) ├── AffixSection (prefix) ← your ReactNode prefix ├── HStack (formattedValueSection) │ ├── ValueSection (i18nPrefix) │ ├── ValueSection (integer) │ ├── ValueSection (fraction) │ └── ValueSection (i18nSuffix) └── AffixSection (suffix) ← your ReactNode suffix ``` Per-digit rendering inside a ValueSection: ```text ValueSection ├── Symbol(s) (e.g., currency, group, decimal) └── Digit(s) ├── Fallback (rendered until digitHeight is measured) └── Measured └── Mask (RollingNumberMaskComponent) └── Animated.View (digit container): vertical stack of digits 0-9 (use translateY to position the current digit) ``` ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/numbers/RollingNumber/RollingNumber/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/numbers/RollingNumber/RollingNumber/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_webExamples.mdx ================================================ ## Basic Example RollingNumber displays changing numeric values with a smooth per-digit roll animation and optional color pulse. It supports full `Intl.NumberFormat` options, custom typography, ReactNode prefixes/suffixes, and accessibility. Pass a number in the `value` prop. Use the `format` prop for Intl formatting (currency, percent, grouping, compact) instead of pre-formatting the string yourself. ```tsx live function Example() { const values = [12345.67, 123340.011, 1220340.0123]; const [valIdx, setValIdx] = useState(0); return ( ); } ``` ## Example Use Case ```tsx live function Examples() { const [price, setPrice] = useState(12345.67); const [difference, setDifference] = useState(0); const onNext = () => setPrice((p) => { const delta = (Math.random() - 0.5) * 200; // +/- 100 const next = Math.max(0, p + delta); const newPrice = Math.round(next * 100) / 100; setDifference(newPrice - p); return newPrice; }); const trendColor = difference >= 0 ? 'fgPositive' : 'fgNegative'; return ( Portfolio Balance 0 ? 'up ' : difference < 0 ? 'down ' : ''} color={trendColor} font="body" format={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2, }} prefix={ difference >= 0 ? ( ) : ( ) } styles={{ prefix: { paddingRight: 'var(--space-1)', }, }} suffix={`(${((Math.abs(difference) / price) * 100).toFixed(2)}%)`} value={Math.abs(difference)} /> BTC Conversion ); } ``` ## Formatting Use `format` prop for currency, percent, grouping, and compact notation formatting. The `format` prop takes in `Intl.NumberFormat` [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). ```tsx live function Example() { const [value, setValue] = React.useState(92345.67); const onNext = () => setValue((v) => v * 13.5); return ( Compact number with currency sign

Number without grouping ); } ``` ## Typography RollingNumber forwards all Text props, but only character-level typographic props (e.g., `font`, `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `tabularNumbers`, `color`) are meaningful for its per-digit rendering. Layout/container props may have no effect—use them judiciously. ```tsx live function Example() { const [price, setPrice] = React.useState(9876.54); const onNext = () => setPrice((p) => Math.max(0, Math.round((p + (Math.random() - 0.5) * 100) * 100) / 100)); return ( Font sizes, weights, and line heights Responsive font (phone, tablet, desktop) Tabular numbers vs non-tabular ); } ``` ::::tip Alignment Keep `tabularNumbers` enabled (default) to avoid horizontal width shifting as digits change. :::: ## Color and Transition Customize color and motion. Configure `y` to control the digit roll, and `color` for the pulse. #### `transition` prop - Type: `{ y?: Transition; color?: Transition }` (framer-motion `Transition`) - Optional `type`: `'tween' | 'spring' | 'inertia'`; defaults to `'tween'` if not provided - Default: `{ y: { duration: durations.moderate3 / 1000, ease: curves.global }, color: { duration: durations.slow4 / 1000, ease: curves.global } }` ```tsx live function Example() { const [price, setPrice] = React.useState(555.55); const onNext = () => setPrice((p) => Math.max(0, Math.round((p + (Math.random() - 0.5) * 50) * 100) / 100)); return ( Color pulse and custom transition Customize positive and negative change colors Fast digits, slow color Springy digits Custom easings ); } ``` ## Digit Transition Variants RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop: - **`'every'`** (default): Rolls through every intermediate digit (e.g., 1→2→3→...→9). - **`'single'`**: Rolls directly to the new digit without showing intermediates. Direction (up/down) is based on the total value change. ```tsx live function Example() { const [price, setPrice] = React.useState(12345.67); const [variant, setVariant] = React.useState<'every' | 'single'>('single'); const onIncrease = () => setPrice((p) => Math.round((p + Math.random() * 500 + 100) * 100) / 100); const onDecrease = () => setPrice((p) => Math.max(0, Math.round((p - Math.random() * 500 - 100) * 100) / 100)); const onRandom = () => setPrice((p) => { const delta = (Math.random() - 0.5) * 1000; return Math.max(0, Math.round((p + delta) * 100) / 100); }); return ( Digit transition variant: {variant} ); } ``` ### Variant comparison ```tsx live function Example() { const [price, setPrice] = React.useState(98765.43); const onNext = () => setPrice((p) => { const delta = (Math.random() - 0.5) * 2000; return Math.max(0, Math.round((p + delta) * 100) / 100); }); return ( Every variant (default) Single variant ); } ``` ::::tip Direction-aware animation The single variant determines scroll direction based on the **total value change**, not individual digit changes. When the value increases, digits roll up (new digits enter from below). When the value decreases, digits roll down (new digits enter from above). This matches the behavior of the color pulse feature. :::: ## Prefix and Suffix Attach text or React nodes before/after the number to create rich compositions. If the prefix/suffix is a string, it will pulse color together with the main number. ```tsx live function Example() { const values = [98345.67, 91345.67, 123450.123, 1234512.88]; const textPrefixes = ['+', '-', '']; const textSuffixes = [' BTC', ' ETH', '']; const iconPrefixes = [ , , null, ]; const iconSuffixes = [ , , null, ]; const [idx, setIdx] = React.useState(0); const onNext = () => setIdx((i) => (i + 1) % values.length); const value = values[idx]; const format = { style: 'currency' as const, currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 5, }; return ( Simple text prefix and suffix ReactNode prefix and suffix ); } ``` ```tsx live function SubscriptionPriceExample() { const [yearly, setYearly] = React.useState(false); const price = yearly ? 199 : 19; const suffix = yearly ? '/yr' : '/mo'; return ( ); } ``` ::::tip Accessibility When using React nodes for `prefix`/`suffix`, provide an `accessibilityLabel` or use `accessibilityLabelPrefix`/`accessibilityLabelSuffix` so screen readers announce a descriptive string. :::: ## Style Overrides Customize the look of each logical section (`i18nPrefix`, `integer`, `fraction`, `i18nSuffix`, `prefix`, `suffix`). ```tsx live function Example() { const [price, setPrice] = React.useState(12345.67); const onNext = () => { setPrice((p) => Math.max(0, Math.round((p + (Math.random() - 0.5) * 200) * 100) / 100)); }; return ( Customize per-section styles ); } ``` ## Subscript Notation for Tiny Decimals Enable `enableSubscriptNotation` to compactly represent leading zeros in the fractional part. ```tsx live function Example() { const values = [0.0000000001, 0.00009, 0.000012, 0.0000001, 0.000000000000000000000011]; const [idx, setIdx] = React.useState(0); const value = values[idx]; const format = { minimumFractionDigits: 2, maximumFractionDigits: 25 }; return ( Subscript examples Default: With subscript: {(['display1', 'title3', 'body'] as const).map((fontKey) => ( ))} ); } ``` ## User-Provided Formatted Value You can also provide `formattedValue`, and the component will render `formattedValue` directly instead of using the internal formatter. The numeric `value` is still required to drive animations and color pulse. ```tsx live function Example() { const btcPrices = [ { value: 98765.43, formattedValue: '¥98,765.43 BTC' }, { value: 931.42, formattedValue: '$931.42 BTC' }, { value: 100890.56, formattedValue: '¥100,890.56 BTC' }, { value: 149432.12, formattedValue: '¥149,432.12 BTC' }, { value: 150321.23, formattedValue: '¥150,321.23 BTC' }, ]; const subscripts = [ { value: 0.0000000001, formattedValue: '€0,0₉1', accessibilityLabel: '€0.0000000001' }, { value: 0.00009, formattedValue: '€0,0₄9', accessibilityLabel: '€0.00009' }, { value: 0.000012, formattedValue: '€0,0₄12', accessibilityLabel: '€0.000012' }, { value: 0.0000001, formattedValue: '€0,0₆1', accessibilityLabel: '€0.0000001' }, { value: 0.000000000000000000000011, formattedValue: '€0,0₂₂11', accessibilityLabel: '€0.000000000000000000000011', }, ]; const [idx, setIdx] = React.useState(0); const onNext = () => setIdx((i) => (i + 1) % 5); return ( User-provided formatted value BTC prices } value={btcPrices[idx].value} /> Subscripts with a comma as the decimal separator ); } ``` ::::tip Accessibility and formattedValue When you provide `formattedValue`, the `accessibilityLabel` will default to your `formattedValue`. However, what’s rendered on screen is not always ideal for accessibility. For example, the subscript notation '0₉' may be announced as '09'. Provide your own `accessibilityLabel` as needed. :::: ## Patterns & Recipes Practical demos combining formatting, animation, and interactivity. ### Counter ```tsx live function CounterExample() { const [count, setCount] = React.useState(0); return ( setCount((c) => Math.max(0, c - 1))} /> setCount((c) => c + 1)} /> ); } ``` ### Countdown ```tsx live function CountDownExample() { const pad = (n: number) => String(n).padStart(2, '0'); const totalSeconds = 5 * 60; const [seconds, setSeconds] = React.useState(totalSeconds); const [running, setRunning] = React.useState(false); React.useEffect(() => { if (!running) return; const id = setInterval(() => { setSeconds((prev) => { if (prev <= 1) { clearInterval(id); return 0; } return prev - 1; }); }, 1000); return () => clearInterval(id); }, [running]); const minutes = Math.floor(seconds / 60); const secs = seconds % 60; const formatted = `${pad(minutes)}:${pad(secs)}`; const onReset = () => setSeconds(totalSeconds); const progress = Math.max(0, Math.min(1, (totalSeconds - seconds) / totalSeconds)); return ( Countdown with percent ); } ``` ### Live Auction ```tsx live function LiveBiddingExample() { const [currentBid, setCurrentBid] = useState(45000); const [bidCount, setBidCount] = useState(23); const [timeLeft, setTimeLeft] = useState(180); React.useEffect(() => { const timer = setInterval(() => { setTimeLeft((t) => Math.max(0, t - 1)); }, 1000); return () => clearInterval(timer); }, []); const placeBid = (increment: number) => { setCurrentBid((b) => b + increment); setBidCount((c) => c + 1); }; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; return ( Current Bid bids placed • remaining ); } ``` ### Social Media Statistics ```tsx live function StatisticsExample() { const [views, setViews] = useState(1234567); const [likes, setLikes] = useState(89432); const [shares, setShares] = useState(12789); const [downloads, setDownloads] = useState(567890); const simulateActivity = () => { setViews((v) => v + Math.floor(Math.random() * 1000)); setLikes((l) => l + Math.floor(Math.random() * 200)); setShares((s) => s + Math.floor(Math.random() * 100)); setDownloads((d) => d + Math.floor(Math.random() * 500)); }; return ( Views } styles={{ prefix: { paddingRight: 'var(--space-0_5)' } }} value={likes} /> Likes Shares Downloads ); } ``` ## Anatomy & Customization RollingNumber is composed of small, swappable subcomponents and exposes granular className/style hooks for each section of the number. Use these to customize structure and styling or to plug in your own components. ### Subcomponents - **RollingNumberMaskComponent**: Component used to mask the animated digit content. - **RollingNumberAffixSectionComponent**: Component used to render ReactNode `prefix` / `suffix` props. - **RollingNumberValueSectionComponent**: Component used to render the four `Intl.NumberFormat` sections (`i18nPrefix`, `integer`, `fraction`, `i18nSuffix`). - **RollingNumberDigitComponent**: Component used to render the per-digit roll animation. - **RollingNumberSymbolComponent**: Component used to render non-digit symbols (group separators, decimal, literals, etc.). You can replace any of these with your own components via props: ```tsx ``` ### Class name overrides Use `classNames` to target specific parts for CSS styling (Linaria or your own classes): - **root**: Outer container (`Text` root) - **visibleContent**: Motion-wrapped span containing the visible number (color animation lives here) - **formattedValueSection**: Container around the four i18n sections - **i18nPrefix**: Section generated by `Intl.NumberFormat` before the number - **integer**: Integer part of the number - **fraction**: Fractional part of the number - **i18nSuffix**: Section generated by `Intl.NumberFormat` after the number - **prefix**: Wrapper around your `prefix` prop - **suffix**: Wrapper around your `suffix` prop - **text**: `Text` element used for digits, separators, prefix, and suffix ### Style overrides Use `styles` to inline style specific parts: - **root**, **visibleContent**, **formattedValueSection**, **i18nPrefix**, **integer**, **fraction**, **i18nSuffix**, **prefix**, **suffix**, **text** `styles.text` applies to the shared `Text` component that renders digits, symbols, prefix, and suffix. ### Structure diagrams High-level anatomy of RollingNumber and its sections: ```text RollingNumber (root: Text) ├── screenReaderOnly (hidden a11y text) └── (visibleContent) ├── AffixSection (prefix) ← your ReactNode prefix ├── HStack (formattedValueSection) │ ├── ValueSection (i18nPrefix) │ ├── ValueSection (integer) │ ├── ValueSection (fraction) │ └── ValueSection (i18nSuffix) └── AffixSection (suffix) ← your ReactNode suffix ``` Per-digit rendering inside a ValueSection: ```text ValueSection ├── Symbol(s) (e.g., currency, group, decimal) └── Digit(s) └── Mask └── DigitContainer (animated) ├── non-active digits above (positioned) ├── active digit (centered) └── non-active digits below (positioned) ``` ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/numbers/RollingNumber/RollingNumber/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { RollingNumber } from '@coinbase/cds-web/numbers/RollingNumber'; import webStylesData from ':docgen/web/numbers/RollingNumber/RollingNumber/styles-data'; ## Explorer {(classNames) => ( )} ## Selectors ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/index.mdx ================================================ --- id: rollingNumber title: RollingNumber platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import MobilePropsTable, { toc as mobilePropsToc } from './_mobilePropsTable.mdx'; import WebPropsTable, { toc as webPropsToc } from './_webPropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobilePropsTable={} webExamples={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} webStyles={} webStylesToc={webStylesToc} mobileStyles={} mobileStylesToc={mobileStylesToc} /> ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/mobileMetadata.json ================================================ { "import": "import { RollingNumber } from '@coinbase/cds-mobile/numbers/RollingNumber'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/numbers/RollingNumber/RollingNumber.tsx", "description": "A numeric display that animates value changes with rolling digits.", "figma": "", "relatedComponents": [], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/numbers/RollingNumber/webMetadata.json ================================================ { "import": "import { RollingNumber } from '@coinbase/cds-web/numbers/RollingNumber'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/numbers/RollingNumber/RollingNumber.tsx", "description": "A numeric display that animates value changes with rolling digits.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-rollingnumber--examples", "figma": "", "relatedComponents": [], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/other/Calendar/_mobileExamples.mdx ================================================ Calendar is a date grid for selecting dates and powers the picker in [DatePicker](/components/other/DatePicker). It can be used standalone or inside a [Tray](/components/overlay/Tray) with a confirm action. ### Basic usage A basic Calendar with date selection functionality. The Calendar component is used within the DatePicker and can also be used independently. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); return ; } ``` ### No selection A Calendar without an initially selected date. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(null); return ; } ``` ### Seeding the calendar The `seedDate` prop controls which month the Calendar opens to when there is no selected date value. Defaults to today when undefined. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const seedDate = new Date(today.getFullYear(), today.getMonth() + 1, 15); return ; } ``` ### Minimum and maximum dates Use `minDate` and `maxDate` to restrict the selectable date range. Navigation to dates before the `minDate` and after the `maxDate` is disabled. Make sure to provide the `disabledDateError` prop. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); const today = new Date(new Date().setHours(0, 0, 0, 0)); const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15); const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15); return ( ); } ``` ### Future dates only Restrict selection to future dates by setting `minDate` to today. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); return ( ); } ``` ### Highlighted dates Use `highlightedDates` to visually emphasize specific dates or date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); const today = new Date(new Date().setHours(0, 0, 0, 0)); const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1); const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); return ( ); } ``` ### Disabled dates Use `disabledDates` to prevent selection of specific dates or date ranges. Make sure to provide the `disabledDateError` prop. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); // Disable weekends for demonstration const getNextWeekendDates = (centerDate) => { const weekends = []; const currentDate = new Date(centerDate); // Find next 4 weekends for (let i = 0; i < 4; i++) { // Find next Saturday const daysUntilSaturday = (6 - currentDate.getDay() + 7) % 7 || 7; currentDate.setDate(currentDate.getDate() + daysUntilSaturday); const saturday = new Date(currentDate); const sunday = new Date(currentDate); sunday.setDate(sunday.getDate() + 1); weekends.push([saturday, sunday]); // Move to next week currentDate.setDate(currentDate.getDate() + 7); } return weekends; }; return ( ); } ``` ### Date ranges Highlight a date range using a tuple `[startDate, endDate]`. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); const today = new Date(new Date().setHours(0, 0, 0, 0)); const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1); const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); return ( ); } ``` ### Hidden controls Hide the navigation arrows with `hideControls`. This is typically used when `minDate` and `maxDate` are set to the first and last days of the same month. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); const today = new Date(new Date().setHours(0, 0, 0, 0)); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); return ( ); } ``` ### Disabled Disable the entire Calendar with the `disabled` prop. ```jsx function Example() { const selectedDate = new Date(); return ; } ``` ### Slot styling Use the `styles` prop to target: **`root`** (outer container), **`header`** (month row), **`title`** (month/year text), **`navigation`** (both arrow buttons’ container), **`content`** (weekday row + date grid), and **`day`** (each date cell pressable — single `ViewStyle`). ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); return ( ); } ``` ### Accessibility Always provide accessibility labels for the navigation controls and error messages for disabled dates. ```jsx function Example() { const [selectedDate, setSelectedDate] = useState(new Date()); const today = new Date(new Date().setHours(0, 0, 0, 0)); const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()); return ( ); } ``` ### Date selection with Chip trigger When you need a compact trigger instead of the full [DateInput](/components/other/DateInput/) used in [DatePicker](/components/other/DatePicker/), you can use a [Chip](/components/inputs/Chip) (or similar control) to open a Tray with a Calendar and a confirm button. ```jsx function Example() { const { locale } = useLocale(); const [date, setDate] = useState(null); const [showPicker, setShowPicker] = useState(false); const [calendarSelectedDate, setCalendarSelectedDate] = useState(null); const calendarRef = useRef(null); const formatDateLabel = useCallback( (date, locale) => date ? date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }) : 'Select date', [], ); const handleOpenPicker = useCallback(() => { setCalendarSelectedDate(date); setShowPicker(true); }, [date]); const handleClosePicker = useCallback(() => setShowPicker(false), []); const handleCancelPicker = useCallback(() => { setCalendarSelectedDate(null); handleClosePicker(); }, [handleClosePicker]); const handleCalendarDatePress = useCallback((selectedDate) => { setCalendarSelectedDate(selectedDate); }, []); const handleModalShow = useCallback(() => { calendarRef.current?.focusInitialDate(); }, []); const handleConfirmCalendar = useCallback(() => { if (calendarSelectedDate) { setDate(calendarSelectedDate); handleClosePicker(); } }, [calendarSelectedDate, handleClosePicker]); const formattedLabel = formatDateLabel(date, locale); const trayFooter = useMemo( () => ( ), [calendarSelectedDate, handleConfirmCalendar], ); return ( <> } onPress={handleOpenPicker} > {formattedLabel} {showPicker && ( )} ); } ``` ================================================ FILE: apps/docs/docs/components/other/Calendar/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dates/Calendar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/Calendar/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/dates/Calendar/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/other/Calendar/_webExamples.mdx ================================================ Calendar is a date grid for selecting dates and powers the picker in [DatePicker](/components/other/DatePicker). Control the visible month with `selectedDate` or `seedDate`, and use `onPressDate` to handle selection. It supports keyboard navigation, disabled and highlighted dates, and custom styling via `classNames` and `styles`. ## Basics ### Basic usage ```tsx live () => { const [selectedDate, setSelectedDate] = useState(new Date()); return ; }; ``` ## Disabled dates ```tsx live () => { const [selectedDate, setSelectedDate] = useState(new Date()); // Disable today and tomorrow const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); return ( ); }; ``` ## Highlighted dates ```tsx live () => { const [selectedDate, setSelectedDate] = useState(new Date()); // Highlight the 10th, 15th, and 20th of the current month const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); const highlightedDates = [ new Date(year, month, 10), new Date(year, month, 15), new Date(year, month, 20), ]; return ( ); }; ``` ## Styling ### Slot styling Use the `classNames` and `styles` props to target specific elements: `root`, `header`, `monthLabel`, `navArrows` (container), `navArrow` (each button), `dayHeader`, `content` (day header + date grid), `calendarGrid` (date cells container), and `dayCell`. ```tsx live () => { const [selectedDate, setSelectedDate] = useState(new Date()); const highlightedDates = useMemo(() => { const d = new Date(); d.setDate(d.getDate() - 1); return [d]; }, []); const disabledDates = useMemo(() => { const d = new Date(); d.setDate(d.getDate() - 2); return [d]; }, []); return ( <> ); }; ``` ## Accessibility Use `nextArrowAccessibilityLabel` and `previousArrowAccessibilityLabel` so screen reader users can navigate months. When using `disabledDates`, `minDate`, or `maxDate`, provide `disabledDateError` so users understand why a date cannot be selected. ```tsx live () => { const [selectedDate, setSelectedDate] = useState(new Date()); const nextMonth = useMemo(() => { const d = new Date(); d.setMonth(d.getMonth() + 1); return d; }, []); return ( ); }; ``` ================================================ FILE: apps/docs/docs/components/other/Calendar/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dates/Calendar/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/Calendar/_webStyles.mdx ================================================ import { useState } from 'react'; import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { Calendar } from '@coinbase/cds-web/dates/Calendar'; import webStylesData from ':docgen/web/dates/Calendar/styles-data'; export const CalendarStylesExample = ({ classNames }) => { const [selectedDate, setSelectedDate] = useState(new Date()); return ( ); }; ## Explorer {(classNames) => } ## Selectors ================================================ FILE: apps/docs/docs/components/other/Calendar/index.mdx ================================================ --- id: calendar title: Calendar platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dates/Calendar/toc-props'; import mobilePropsToc from ':docgen/mobile/dates/Calendar/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobilePropsTable={} mobileStyles={} webExamples={} webPropsTable={} webStyles={} mobileExamplesToc={mobileExamplesToc} mobilePropsToc={mobilePropsToc} mobileStylesToc={mobileStylesToc} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/other/Calendar/mobileMetadata.json ================================================ { "import": "import { Calendar } from '@coinbase/cds-mobile/dates/Calendar'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dates/Calendar.tsx", "description": "Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.", "relatedComponents": [ { "label": "DatePicker", "url": "/components/other/DatePicker" } ] } ================================================ FILE: apps/docs/docs/components/other/Calendar/webMetadata.json ================================================ { "import": "import { Calendar } from '@coinbase/cds-web/dates/Calendar'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dates/Calendar.tsx", "description": "Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dates-calendar--examples", "relatedComponents": [ { "label": "DatePicker", "url": "/components/other/DatePicker" } ], "dependencies": [ { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/other/DateInput/_mobileExamples.mdx ================================================ DateInput uses [TextInput](/components/inputs/TextInput/) for entering dates by typing. Check out [DatePicker](/components/other/DatePicker/) if you would like [Calendar](/components/other/Calendar/) to be shown in a popup as well. ## Basics DateInput requires controlled state for both the date value and error state. The component automatically formats dates based on the user's locale and validates input on blur. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Validation #### Minimum and maximum dates Use `minDate` and `maxDate` props to restrict the date range. Provide the `disabledDateError` prop to show an error when users enter a date outside the allowed range. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate()); return ( ); } ``` #### Disabled dates The `disabledDates` prop accepts an array of `Date` objects or `[Date, Date]` tuples to disable specific dates or ranges. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2); const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const disabledDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater]; return ( ); } ``` #### Custom validation Use the `DateInputValidationError` class to create custom error states for application-specific validation rules. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const handleChangeDate = (newDate) => { setDate(newDate); if (newDate && newDate <= new Date()) { setError(new DateInputValidationError('custom', 'Date must be in the future')); } else { setError(null); } }; return ( ); } ``` ## Accessibility DateInput inherits accessibility props from TextInput. If no `accessibilityLabel` is passed, it will use the `label` as the `accessibilityLabel`. If you want an `accessibilityLabel` that differs from the label, you can set this prop. Here, since no `accessibilityLabel` is passed, the `accessibilityLabel` will be "Birthdate". ```jsx ``` Example of passing an `accessibilityLabel`: ```jsx ``` :::tip Accessibility tip Like any component system, much of the responsibility for building accessible UIs is in your hands as the consumer to properly implement the component composition. We'll do our best to provide sane fallbacks, but here are the biggest gotchas for `DateInput`s you can watch out for.
#### Error message format It's advised you always format error messages with `Error: ${errorMessage}`. We'd do that for you, but _i18n_ isn't baked into CDS. DateInput automatically switches to `variant="negative"` when an error is present. ::: ## Localization The date format automatically adjusts based on the `LocaleContext` provided by `LocaleProvider`. ```jsx function Example() { const [usDate, setUsDate] = useState(null); const [usError, setUsError] = useState(null); const [esDate, setEsDate] = useState(null); const [esError, setEsError] = useState(null); return ( English (US) - MM/DD/YYYY Spanish - DD/MM/YYYY ); } ``` ## Styling ### Compact Use the `compact` prop for a smaller input size. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Disabled ```jsx function Example() { const [date, setDate] = useState(new Date()); const [error, setError] = useState(null); return ( ); } ``` ### Borderless For borderless DateInput usage, prefer adding a focus border with `focusedBorderWidth`. If you need a fully borderless input (including focus), use that pattern with a TypeAhead composition. ```jsx function Example() { const [defaultBorderlessDate, setDefaultBorderlessDate] = useState(null); const [defaultBorderlessError, setDefaultBorderlessError] = useState(null); const [focusBorderDate, setFocusBorderDate] = useState(null); const [focusBorderError, setFocusBorderError] = useState(null); return ( ); } ``` ### Helper text ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Label You can pass a ReactNode to `labelNode` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Birthdate {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */} } onChangeDate={setDate} onErrorDate={setError} /> ); } ``` ### Required Use the `required` prop to indicate that the field is mandatory. Provide `requiredError` to display a message if the user blurs the input without a date after typing. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Variants Use the `variant` prop to change the visual style of the input. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Separator Customize the date format separator using the `separator` prop. Defaults to `/`. ```jsx function Example() { const [date1, setDate1] = useState(null); const [error1, setError1] = useState(null); const [date2, setDate2] = useState(null); const [error2, setError2] = useState(null); return ( ); } ``` ### Start and end adornments Use the `start` and `end` props to add icons or other elements to the input. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( } invalidDateError="Please enter a valid date" /> ); } ``` ## Event lifecycle The DateInput fires events in a specific order: - Typing a date in a blank DateInput: `onChange -> onChange -> ... -> onChangeDate -> onErrorDate` - Typing a date in a DateInput that already had a date: `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate` ================================================ FILE: apps/docs/docs/components/other/DateInput/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dates/DateInput/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DateInput/_webExamples.mdx ================================================ DateInput uses [TextInput](/components/inputs/TextInput/) for entering dates by typing. Check out [DatePicker](/components/other/DatePicker/) if you would like [Calendar](/components/other/Calendar/) to be shown in a popup as well. ## Basics DateInput requires controlled state for both the date value and error state. The component automatically formats dates based on the user's locale and validates input on blur. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Validation #### Minimum and maximum dates Use `minDate` and `maxDate` props to restrict the date range. Provide the `disabledDateError` prop to show an error when users enter a date outside the allowed range. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate()); return ( ); } ``` #### Disabled dates The `disabledDates` prop accepts an array of `Date` objects or `[Date, Date]` tuples to disable specific dates or ranges. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2); const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const disabledDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater]; return ( ); } ``` #### Custom validation Use the `DateInputValidationError` class to create custom error states for application-specific validation rules. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const handleChangeDate = (newDate) => { setDate(newDate); if (newDate && newDate <= new Date()) { setError(new DateInputValidationError('custom', 'Date must be in the future')); } else { setError(null); } }; return ( ); } ``` ## Accessibility DateInput inherits accessibility props from TextInput. If no `accessibilityLabel` is passed, it will use the `label` as the `accessibilityLabel`. If you want an `accessibilityLabel` that differs from the label, you can set this prop. Here, since no `accessibilityLabel` is passed, the `accessibilityLabel` will be "Birthdate". ```jsx ``` Example of passing an `accessibilityLabel`. For web, this will set `aria-label="Enter your date of birth"` under the hood. ```jsx ``` :::tip Accessibility tip Like any component system, much of the responsibility for building accessible UIs is in your hands as the consumer to properly implement the component composition. We'll do our best to provide sane fallbacks, but here are the biggest gotchas for `DateInput`s you can watch out for.
#### Error message format It's advised you always format error messages with `Error: ${errorMessage}`. We'd do that for you, but _i18n_ isn't baked into CDS. DateInput automatically switches to `variant="negative"` when an error is present. ::: ## Localization The date format automatically adjusts based on the `LocaleContext` provided by `LocaleProvider`. ```jsx live function Example() { const [usDate, setUsDate] = useState(null); const [usError, setUsError] = useState(null); const [esDate, setEsDate] = useState(null); const [esError, setEsError] = useState(null); return ( English (US) - MM/DD/YYYY Spanish - DD/MM/YYYY ); } ``` ## Styling DateInput supports the same styling functionality as [TextInput](/components/inputs/TextInput/). ### Compact Use the `compact` prop for a smaller input size. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Disabled ```jsx live function Example() { const [date, setDate] = useState(new Date()); const [error, setError] = useState(null); return ( ); } ``` ### Borderless For borderless DateInput usage, prefer adding a focus border with `focusedBorderWidth`. If you need a fully borderless input (including focus), use that pattern with a TypeAhead composition. ```jsx live function Example() { const [defaultBorderlessDate, setDefaultBorderlessDate] = useState(null); const [defaultBorderlessError, setDefaultBorderlessError] = useState(null); const [focusBorderDate, setFocusBorderDate] = useState(null); const [focusBorderError, setFocusBorderError] = useState(null); return ( ); } ``` ### Helper text ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Label You can pass a ReactNode to `labelNode` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Birthdate {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */} } onChangeDate={setDate} onErrorDate={setError} /> ); } ``` ### Required Use the `required` prop to indicate that the field is mandatory. Provide `requiredError` to display a message if the user blurs the input without a date after typing. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Variants Use the `variant` prop to change the visual style of the input. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Separator Customize the date format separator using the `separator` prop. Defaults to `/`. ```jsx live function Example() { const [date1, setDate1] = useState(null); const [error1, setError1] = useState(null); const [date2, setDate2] = useState(null); const [error2, setError2] = useState(null); return ( ); } ``` ## Event Lifecycle The DateInput fires events in a specific order: - Typing a date in a blank DateInput: `onChange -> onChange -> ... -> onChangeDate -> onErrorDate` - Typing a date in a DateInput that already had a date: `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate` ================================================ FILE: apps/docs/docs/components/other/DateInput/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dates/DateInput/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DateInput/index.mdx ================================================ --- id: date-input title: DateInput platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dates/DateInput/toc-props'; import mobilePropsToc from ':docgen/mobile/dates/DateInput/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/other/DateInput/mobileMetadata.json ================================================ { "import": "import { DateInput } from '@coinbase/cds-mobile/dates/DateInput'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dates/DateInput.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14743-52589", "description": "DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.", "relatedComponents": [ { "label": "DatePicker", "url": "/components/other/DatePicker/" }, { "label": "TextInput", "url": "/components/inputs/TextInput/" }, { "label": "Calendar", "url": "/components/other/Calendar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/DateInput/webMetadata.json ================================================ { "import": "import { DateInput } from '@coinbase/cds-web/dates/DateInput'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dates/DateInput.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dates-dateinput--examples", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14743-52589", "description": "DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.", "relatedComponents": [ { "label": "DatePicker", "url": "/components/other/DatePicker/" }, { "label": "TextInput", "url": "/components/inputs/TextInput/" }, { "label": "Calendar", "url": "/components/other/Calendar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/DatePicker/_mobileExamples.mdx ================================================ DatePicker combines [DateInput](/components/other/DateInput/) with [Calendar](/components/other/Calendar/) for date selection. ## Basics A basic DatePicker with the minimum props necessary for correct UX. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Validation #### Invalid dates Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` #### Minimum and maximum dates Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. Navigation to dates before the `minDate` and after the `maxDate` is disabled. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15); const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15); return ( ); } ``` #### Required field Make sure to provide the `requiredError` prop when setting the `required` prop to true. The `requiredError` will be displayed if a user blurs the input, without a date selected, after having typed into it. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` #### Custom validation The DatePicker handles common error states internally, and calls `onErrorDate` when the validity / error state changes. You can use the `DateInputValidationError` class to create custom error states. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); useEffect(() => { setError(new DateInputValidationError('custom', 'Hello world!')); }, []); return ( ); } ``` ## Accessibility Always provide the accessibility label props and all necessary error props. See the Accessibility section under the Guidelines tab at the top of the page for more info. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ## Localization The date format is automatically adjusted to the `LocaleContext`. Check `LocaleProvider` usage below. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ## Styling DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/) and [Calendar](/components/other/Calendar/). ### Compact Use the `compact` prop for a smaller input size. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Disabled ```jsx function Example() { const [date, setDate] = useState(new Date()); const [error, setError] = useState(null); return ( ); } ``` ### Helper text Use the `helperText` prop to provide additional context below the input. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Label You can pass a ReactNode to `labelNode` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Birthdate {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */} } nextArrowAccessibilityLabel="Next month" onChangeDate={setDate} onErrorDate={setError} previousArrowAccessibilityLabel="Previous month" /> Event date * } onChangeDate={setDate} onErrorDate={setError} requiredError="This field is required" /> ); } ``` #### Label Variant Use the `labelVariant` prop to position the label inside the input. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Event date (optional) } onChangeDate={setDate} onErrorDate={setError} /> ); } ``` ### Seeding the date Defaults to today when undefined. The `seedDate` prop is used to generate the Calendar month when there is no selected date value. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const seedDate = new Date('11/16/1991'); return ( ); } ``` ## Composed Examples Make sure to provide the `requiredError` prop when setting the `required` prop to true. The `requiredError` will be displayed if a user blurs the input, without a date selected, after having typed into it. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Highlighted dates The `highlightedDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2); const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const highlightedDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater]; return ( ); } ``` ### Minimum and maximum dates Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. Navigation to dates before the `minDate` and after the `maxDate` is disabled. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15); const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15); return ( ); } ``` ### Disabled dates The `disabledDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); const startOfNextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const endOfNextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 13); return ( ); } ``` ### Date range selector This is a complex example using many different props. We use multiple DatePickers together to allow a user to select a date range. We enforce that the time between the start date and end date must be at least 5 days but less than 14 days long, that the end date comes after the start date, and that all days are within the current month. We use the `onChange` prop to automatically suggest an end date of 1 week after the start date, or the last of the month - whichever is sooner. We also explicitly disable 1 week at the beginning of the month. ```jsx function Example() { const [startDate, setStartDate] = useState(null); const [startError, setStartError] = useState(null); const [endDate, setEndDate] = useState(null); const [endError, setEndError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const firstDayThisMonth = new Date(today.getFullYear(), today.getMonth(), 1); const lastDayThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); const updateEndDate = (endDate, startDate) => { setEndDate(endDate); setEndError(null); if (!endDate) return; // The time from startDate to endDate must be at least 5 days and less than 14 days const endDateMin = new Date( startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 4, ); const endDateMax = new Date( startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 13, ); let errorMessage; if (endDate < startDate) errorMessage = 'Must come after start date'; else if (endDate < endDateMin) errorMessage = 'Must select at least 5 days'; else if (endDate > endDateMax) errorMessage = 'Cannot select more than 14 days'; if (errorMessage) setEndError(new DateInputValidationError('custom', errorMessage)); }; const handleChangeDateStart = (date) => { setStartDate(date); if (!date) return; // Suggest an end date based on the new start date const suggestedEndDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7); const newEndDate = new Date(Math.min(suggestedEndDate.getTime(), lastDayThisMonth.getTime())); updateEndDate(newEndDate, date); }; const handleChangeDateEnd = (date) => { if (startDate) updateEndDate(date, startDate); }; return ( ); } ``` ## Event Lifecycle - Selecting a date with the Calendar: `onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose` - Closing the Calendar without selecting a date: `onOpen -> onCancel -> onClose` - Typing a date in a blank DateInput: `onChange -> onChange -> ... -> onChangeDate -> onErrorDate` - Typing a date in a DateInput that already had a date: `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate` :::note The Calendar picker requires pressing the confirm button to select a date. ::: ```jsx function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const handleChangeDate = (date) => { console.log('onChangeDate', date); setDate(date); }; const handleErrorDate = (error) => { console.log('onErrorDate', error); setError(error); }; return ( console.log('onChange', event)} onChangeDate={handleChangeDate} onConfirm={() => console.log('onConfirm')} onCancel={() => console.log('onCancel')} onErrorDate={handleErrorDate} onOpen={() => console.log('onOpen')} onClose={() => console.log('onClose')} /> ); } ``` ================================================ FILE: apps/docs/docs/components/other/DatePicker/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dates/DatePicker/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DatePicker/_webExamples.mdx ================================================ DatePicker combines [DateInput](/components/other/DateInput/) with [Calendar](/components/other/Calendar/) for date selection. ## Basics A basic DatePicker with the minimum props necessary for correct UX. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Validation #### Invalid dates Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` #### Minimum and maximum dates Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. Navigation to dates before the `minDate` and after the `maxDate` is disabled. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15); const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15); return ( ); } ``` #### Disabled dates The `disabledDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2); const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const disabledDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater]; return ( ); } ``` #### Required field Make sure to provide the `requiredError` prop when setting the `required` prop to true. The `requiredError` will be displayed if a user blurs the input, without a date selected, after having typed into it. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` #### Custom validation The DatePicker handles common error states internally, and calls `onErrorDate` when the validity / error state changes. You can use the `DateInputValidationError` class to create custom error states. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); useEffect(() => { setError(new DateInputValidationError('custom', 'Hello world!')); }, []); return ( ); } ``` ## Accessibility Always provide the accessibility label props and all necessary error props. See the Accessibility section under the Guidelines tab at the top of the page for more info. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ## Localization The date format is automatically adjusted to the `LocaleContext`. Check `LocaleProvider` usage below. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ## Styling DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/) and [Calendar](/components/other/Calendar/). ### Compact Use the `compact` prop for a smaller input size. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Disabled ```jsx live function Example() { const [date, setDate] = useState(new Date()); const [error, setError] = useState(null); return ( ); } ``` ### Helper text Use the `helperText` prop to provide additional context below the input. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( ); } ``` ### Label You can pass a ReactNode to `labelNode` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Birthdate {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */} } nextArrowAccessibilityLabel="Next month" onChangeDate={setDate} onErrorDate={setError} previousArrowAccessibilityLabel="Previous month" /> Event date * } onChangeDate={setDate} onErrorDate={setError} requiredError="This field is required" /> ); } ``` #### Label Variant Use the `labelVariant` prop to position the label inside the input. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); return ( Event date (optional) } onChangeDate={setDate} onErrorDate={setError} /> ); } ``` ### Seeding the date Defaults to today when undefined. The `seedDate` prop is used to generate the Calendar month when there is no selected date value. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const seedDate = new Date('11/16/1991'); return ( ); } ``` ### Highlighted dates The `highlightedDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2); const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); const highlightedDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater]; return ( ); } ``` ## Composed Examples ### Date range selector This is a complex example using many different props. We use multiple DatePickers together to allow a user to select a date range. We enforce that the time between the start date and end date must be at least 5 days but less than 14 days long, that the end date comes after the start date, and that all days are within the current month. We use the `onChange` prop to automatically suggest an end date of 1 week after the start date, or the last of the month - whichever is sooner. We also explicitly disable 1 week at the beginning of the month. ```jsx live function Example() { const [startDate, setStartDate] = useState(null); const [startError, setStartError] = useState(null); const [endDate, setEndDate] = useState(null); const [endError, setEndError] = useState(null); const today = new Date(new Date().setHours(0, 0, 0, 0)); const firstDayThisMonth = new Date(today.getFullYear(), today.getMonth(), 1); const seventhDayThisMonth = new Date(today.getFullYear(), today.getMonth(), 7); const lastDayThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); const disabledDates = [[firstDayThisMonth, seventhDayThisMonth]]; const updateEndDate = (endDate, startDate) => { setEndDate(endDate); setEndError(null); if (!endDate) return; // The time from startDate to endDate must be at least 5 days and less than 14 days const endDateMin = new Date( startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 4, ); const endDateMax = new Date( startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 13, ); let errorMessage; if (endDate < startDate) errorMessage = 'Must come after start date'; else if (endDate < endDateMin) errorMessage = 'Must select at least 5 days'; else if (endDate > endDateMax) errorMessage = 'Cannot select more than 14 days'; if (errorMessage) setEndError(new DateInputValidationError('custom', errorMessage)); }; const handleChangeDateStart = (date) => { setStartDate(date); if (!date) return; // Suggest an end date based on the new start date const suggestedEndDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7); const newEndDate = new Date(Math.min(suggestedEndDate.getTime(), lastDayThisMonth.getTime())); updateEndDate(newEndDate, date); }; const handleChangeDateEnd = (date) => { if (startDate) updateEndDate(date, startDate); }; return ( ); } ``` ## Event Lifecycle - Selecting a date with the Calendar: `onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose` - Closing the Calendar without selecting a date: `onOpen -> onCancel -> onClose` - Typing a date in a blank DateInput: `onChange -> onChange -> ... -> onChangeDate -> onErrorDate` - Typing a date in a DateInput that already had a date: `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate` ```jsx live function Example() { const [date, setDate] = useState(null); const [error, setError] = useState(null); const handleChangeDate = (date) => { console.log('onChangeDate', date); setDate(date); }; const handleErrorDate = (error) => { console.log('onErrorDate', error); setError(error); }; return ( console.log('onChange', event)} onChangeDate={handleChangeDate} onConfirm={() => console.log('onConfirm')} onCancel={() => console.log('onCancel')} onErrorDate={handleErrorDate} onOpen={() => console.log('onOpen')} onClose={() => console.log('onClose')} /> ); } ``` ================================================ FILE: apps/docs/docs/components/other/DatePicker/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dates/DatePicker/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DatePicker/index.mdx ================================================ --- id: date-picker title: DatePicker platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dates/DatePicker/toc-props'; import mobilePropsToc from ':docgen/mobile/dates/DatePicker/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/other/DatePicker/mobileMetadata.json ================================================ { "import": "import { DatePicker } from '@coinbase/cds-mobile/dates/DatePicker'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dates/DatePicker.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14743-52589", "description": "Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs.", "relatedComponents": [ { "label": "DateInput", "url": "/components/other/DateInput/" }, { "label": "Calendar", "url": "/components/other/Calendar/" }, { "label": "TextInput", "url": "/components/inputs/TextInput/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [ { "name": "react-native-safe-area-context", "version": "^4.10.5" } ] } ================================================ FILE: apps/docs/docs/components/other/DatePicker/webMetadata.json ================================================ { "import": "import { DatePicker } from '@coinbase/cds-web/dates/DatePicker'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dates/DatePicker.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dates-datepicker--examples", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=14743-52589", "description": "Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs while being adaptable across screen platforms.", "relatedComponents": [ { "label": "DateInput", "url": "/components/other/DateInput/" }, { "label": "Calendar", "url": "/components/other/Calendar/" }, { "label": "TextInput", "url": "/components/inputs/TextInput/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" }, { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/other/DotCount/_mobileExamples.mdx ================================================ ### Basic DotCount ```jsx function DotCountBasic() { const counts = [1, 100, 30, 2, 0, 99]; return ( {counts.map((count) => ( ))} With max prop ); } ``` ### Variants ```jsx function Variants() { return ; } ``` ### Placements ```jsx function Placements() { return ( Child ); } ``` ### Dotting Relative to Shape of Child You can use the overlap prop to place the dot relative to the corner of the wrapped element. ```jsx function DottingRelativeToShapeOfChild() { return ( Child Child Child Child ); } ``` ### Customize Style You can use the styles prop to customize appearance. ```jsx function CustomizeStyle() { const theme = useTheme(); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotCount/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dots/DotCount/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotCount/_mobileStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import mobileStylesData from ':docgen/mobile/dots/DotCount/styles-data'; ## Selectors ================================================ FILE: apps/docs/docs/components/other/DotCount/_webExamples.mdx ================================================ ### Basic DotCount ```jsx live function DotCountBasic() { const counts = [1, 100, 30, 2, 0, 99]; return ( {counts.map((count) => ( ))} With max prop ); } ``` ### Variants ```jsx live function Variants() { return ; } ``` ### Placements ```jsx live function Placements() { return ( Child ); } ``` ### Dotting Relative to Shape of Child You can use the overlap prop to place the dot relative to the corner of the wrapped element. ```jsx live function DottingRelativeToShapeOfChild() { return ( Child Child Child Child ); } ``` ### Customize Style You can use the styles or classNames prop to customize appearance. ```jsx live function CustomizeStyle() { const theme = useTheme(); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotCount/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dots/DotCount/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotCount/_webStyles.mdx ================================================ import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable'; import { StylesExplorer } from '@site/src/components/page/StylesExplorer'; import { DotCount } from '@coinbase/cds-web/dots'; import { IconButton } from '@coinbase/cds-web/buttons'; import webStylesData from ':docgen/web/dots/DotCount/styles-data'; ## Explorer {(classNames) => ( )} ## Selectors ================================================ FILE: apps/docs/docs/components/other/DotCount/index.mdx ================================================ --- id: dot-count title: DotCount platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dots/DotCount/toc-props'; import mobilePropsToc from ':docgen/mobile/dots/DotCount/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebStyles, { toc as webStylesToc } from './_webStyles.mdx'; import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } mobileExamplesToc={mobileExamplesToc} mobilePropsTable={} mobilePropsToc={mobilePropsToc} mobileStyles={} mobileStylesToc={mobileStylesToc} webExamples={} webExamplesToc={webExamplesToc} webPropsTable={} webPropsToc={webPropsToc} webStyles={} webStylesToc={webStylesToc} /> ================================================ FILE: apps/docs/docs/components/other/DotCount/mobileMetadata.json ================================================ { "import": "import { DotCount } from '@coinbase/cds-mobile/dots/DotCount'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dots/DotCount.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "TabLabel", "url": "/components/navigation/TabLabel/" }, { "label": "DotStatusColor", "url": "/components/other/DotStatusColor/" }, { "label": "DotSymbol", "url": "/components/other/DotSymbol/" } ], "dependencies": [ { "name": "react-native-reanimated", "version": "^3.14.0" } ] } ================================================ FILE: apps/docs/docs/components/other/DotCount/webMetadata.json ================================================ { "import": "import { DotCount } from '@coinbase/cds-web/dots/DotCount'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dots/DotCount.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dots-dotcount--all-dot-count", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "TabLabel", "url": "/components/navigation/TabLabel/" }, { "label": "DotStatusColor", "url": "/components/other/DotStatusColor/" }, { "label": "DotSymbol", "url": "/components/other/DotSymbol/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" } ] } ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/_mobileExamples.mdx ================================================ ### Sizes ```jsx function Sizes() { const SIZES = ['xs', 's', 'm', 'l']; return ( {SIZES.map((size) => ( ))} ); } ``` ### Variants ```jsx function Variants() { const VARIANTS = ['positive', 'negative', 'primary', 'fgMuted', 'warning']; return ( {VARIANTS.map((variant) => ( ))} ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dots/DotStatusColor/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/_webExamples.mdx ================================================ ### Sizes ```jsx live function Sizes() { const SIZES = ['xs', 's', 'm', 'l']; return ( {SIZES.map((size) => ( ))} ); } ``` ### Variants ```jsx live function Variants() { const VARIANTS = ['positive', 'negative', 'primary', 'fgMuted', 'warning']; return ( {VARIANTS.map((variant) => ( ))} ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dots/DotStatusColor/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/index.mdx ================================================ --- id: dot-status-color title: DotStatusColor platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dots/DotCount/toc-props'; import mobilePropsToc from ':docgen/mobile/dots/DotCount/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/mobileMetadata.json ================================================ { "import": "import { DotStatusColor } from '@coinbase/cds-mobile/dots/DotStatusColor'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dots/DotStatusColor.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "DotCount", "url": "/components/other/DotCount/" }, { "label": "DotSymbol", "url": "/components/other/DotSymbol/" }, { "label": "Avatar", "url": "/components/media/Avatar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/DotStatusColor/webMetadata.json ================================================ { "import": "import { DotStatusColor } from '@coinbase/cds-web/dots/DotStatusColor'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dots/DotStatusColor.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dots-dotstatuscolor--all-dot-status-color", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "DotCount", "url": "/components/other/DotCount/" }, { "label": "DotSymbol", "url": "/components/other/DotSymbol/" }, { "label": "Avatar", "url": "/components/media/Avatar/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/DotSymbol/_mobileExamples.mdx ================================================ ### Placements ```jsx function Placements() { const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end']; return ( {PIN_DIRECTIONS.map((pinDirection) => ( Child ))} ); } ``` ### Sizes ```jsx function Sizes() { const SIZES = ['xs', 's', 'm', 'l']; return ( {SIZES.map((size) => ( ))} ); } ``` ### Dotting relative to shape of child You can use the overlap prop to place the dot relative to the corner of the wrapped element. ```jsx function DottingRelativeToShapeOfChild() { return ( ); } ``` ### Use DotSymbol paired with Icon ```jsx function UseDotSymbolPairedWithIcon() { return ( ); } ``` ### Use DotSymbol paired with another Asset ```jsx function UseDotSymbolPairedWithAnotherAsset() { return ( ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotSymbol/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/dots/DotSymbol/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotSymbol/_webExamples.mdx ================================================ ### Placements ```jsx live function Placements() { const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end']; return ( {PIN_DIRECTIONS.map((pinDirection) => ( Child ))} ); } ``` ### Sizes ```jsx live function Sizes() { const SIZES = ['xs', 's', 'm', 'l']; return ( {SIZES.map((size) => ( ))} ); } ``` ### Dotting relative to shape of child You can use the overlap prop to place the dot relative to the corner of the wrapped element. ```jsx live function DottingRelativeToShapeOfChild() { return ( ); } ``` ### Use DotSymbol paired with Icon ```jsx live function UseDotSymbolPairedWithIcon() { return ( ); } ``` ### Use DotSymbol paired with another Asset ```jsx live function UseDotSymbolPairedWithAnotherAsset() { return ( ); } ``` ================================================ FILE: apps/docs/docs/components/other/DotSymbol/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/dots/DotSymbol/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/DotSymbol/index.mdx ================================================ --- id: dot-symbol title: DotSymbol platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/dots/DotSymbol/toc-props'; import mobilePropsToc from ':docgen/mobile/dots/DotSymbol/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/other/DotSymbol/mobileMetadata.json ================================================ { "import": "import { DotSymbol } from '@coinbase/cds-mobile/dots/DotSymbol'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dots/DotSymbol.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "DotCount", "url": "/components/other/DotCount/" }, { "label": "DotStatusColor", "url": "/components/other/DotStatusColor/" }, { "label": "Avatar", "url": "/components/media/Avatar/" }, { "label": "Icon", "url": "/components/media/Icon/" } ], "dependencies": [ { "name": "react-native-svg", "version": "^14.1.0" } ] } ================================================ FILE: apps/docs/docs/components/other/DotSymbol/webMetadata.json ================================================ { "import": "import { DotSymbol } from '@coinbase/cds-web/dots/DotSymbol'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/dots/DotSymbol.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dots-dotsymbol--all-dot-symbol", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-10245", "description": "Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.", "relatedComponents": [ { "label": "DotCount", "url": "/components/other/DotCount/" }, { "label": "DotStatusColor", "url": "/components/other/DotStatusColor/" }, { "label": "Avatar", "url": "/components/media/Avatar/" }, { "label": "Icon", "url": "/components/media/Icon/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/MediaQueryProvider/_webExamples.mdx ================================================ ## MediaQueryProvider component The MediaQueryProvider manages `window.matchMedia` subscriptions with SSR support. Provides a single state shared by all subscriptions to ensure Suspense works correctly. Use the `defaultValues` prop to configure SSR defaults, and the `useMediaQuery` hook to subscribe to `window.matchMedia` changes. [See the `useMediaQuery` docs here →](/hooks/useMediaQuery) ## Basic usage Use the `useMediaQuery` hook to call `window.matchMedia` with SSR support. It must be used within a MediaQueryProvider component. This hook is ideal for conditional rendering based on viewport size, user preferences, or other media features. It subscribes to a single state shared by all media queries to ensure Suspense works correctly. [See the `useMediaQuery` docs here →](/hooks/useMediaQuery) :::warning Do not use `useMediaQuery` for responsive styles. Use CSS media queries or [the `StyleProps` API](/getting-started/styling#responsive-styles) for responsive styles. ::: ```tsx live () => { const Page = () => { const isMobile = useMediaQuery('(max-width: 767px)'); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); return ( 
        {JSON.stringify({ isMobile, prefersDarkMode }, null, 2)}
); }; const App = () => ( ); return ; }; ``` ## SSR support The MediaQueryProvider `defaultValues` are used to provide consistent behavior between server and client rendering. On the client the native `window.matchMedia` API is used. On the server the component solves the `window.matchMedia` queries by comparing to the `defaultValues`. The comparison against `defaultValues` during SSR is limited: it cannot solve highly complex media queries. If a complex query cannot be solved during SSR the hook will simply return `false`, and the query can still be solved by `window.matchMedia` on the client. :::tip You can populate the `defaultValues` prop with user preferences, cookies, etc. to ensure the correct styles are applied on the server. ::: ### Simple queries that can be solved during SSR - Simple media queries - `width`, `min-width`, `max-width`, `height`, `min-height`, and `max-height` with pixel or em units - `prefers-contrast` and `prefers-color-scheme` - Logical `and` operator ### Complex queries that cannot be solved during SSR - Multiple comma-delimited values - Logical `not` and `or` operators - Mathematical `<=` and `>=` operators - Complex or nested queries - Other media types or features ## Complex queries on the client Complex queries cannot be solved during SSR. They are solved on the client by calling `window.matchMedia`. ```tsx live () => { const isPortrait = useMediaQuery('(orientation: portrait)'); const isHighDPI = useMediaQuery('(min-resolution: 2dppx)'); const isTouch = useMediaQuery('(pointer: coarse)'); const isMediumHeight = useMediaQuery('(min-height: 600px) and (max-height: 900px)'); const complexQuery = useMediaQuery( `((width >= 1200px) and (orientation: landscape)), (width < 560px) or ((width > 768px) and (width < 900px))`, ); return ( 
      {JSON.stringify({ isPortrait, isHighDPI, isTouch, isMediumHeight, complexQuery }, null, 2)}
); }; ``` ================================================ FILE: apps/docs/docs/components/other/MediaQueryProvider/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/system/MediaQueryProvider/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/MediaQueryProvider/index.mdx ================================================ --- id: mediaQueryProvider title: MediaQueryProvider platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/system/MediaQueryProvider/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/other/MediaQueryProvider/webMetadata.json ================================================ { "import": "import { MediaQueryProvider } from '@coinbase/cds-web/system/MediaQueryProvider'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/system/MediaQueryProvider.tsx", "description": "Manages window.matchMedia subscriptions with SSR support.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-themeprovider--theme-provider-test", "relatedComponents": [ { "label": "useMediaQuery", "url": "/hooks/useMediaQuery/" }, { "label": "useBreakpoints", "url": "/hooks/useBreakpoints/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/_mobileExamples.mdx ================================================ ## ThemeProvider component The ThemeProvider provides the theme context to all child components. You must pass the `theme` prop to configure the theme, and the `activeColorScheme` prop to set light or dark mode. ```tsx import { ThemeProvider } from '@coinbase/cds-mobile/system/ThemeProvider'; import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme'; const App = () => ( {/* Your app components */} ); ``` :::tip Changing the `activeColorScheme` automatically updates the values returned from the `useTheme` hook. ::: ## `useTheme` hook The `useTheme` hook provides access to the current `theme` and `activeColorScheme`. The `color` and `spectrum` objects automatically change based on the `activeColorScheme`. [See the `useTheme` docs here →](/hooks/useTheme) ```jsx const theme = useTheme(); theme.activeColorScheme; // "light" or "dark" theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme theme.space[2]; // 16 theme.borderRadius[200]; // 8 theme.fontSize.display3; // 40 ``` ## Nested themes ThemeProviders can be nested to create theme overrides for specific sections. ```jsx {/* Default theme in light color scheme */} {/* Custom theme in dark color scheme */} ``` When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined. ```jsx // Override parts of the parent theme const theme = useTheme(); const customTheme = { ...theme, ...(theme.lightColor && theme.lightSpectrum && { lightColor: { ...theme.lightColor, bg: `rgb(${theme.lightSpectrum.orange50})`, bgPrimary: `rgb(${theme.lightSpectrum.red20})`, bgSecondary: `rgb(${theme.lightSpectrum.blue50})`, }, }), ...(theme.darkColor && theme.darkSpectrum && { darkColor: { ...theme.darkColor, bg: `rgb(${theme.darkSpectrum.orange50})`, bgPrimary: `rgb(${theme.darkSpectrum.red20})`, bgSecondary: `rgb(${theme.darkSpectrum.blue50})`, }, }), } as const satisfies Theme; ``` ## Theme inheritence Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the `useTheme` hook. ```jsx const Example = () => { // Pass the parent theme down to another ThemeProvider const theme = useTheme(); return ( {children} ); }; ``` ## InvertedThemeProvider component The InvertedThemeProvider automatically inherits from its parent theme and flips the `activeColorScheme` to the opposite value. ```jsx {/* Default theme in light color scheme */} {/* Default theme in inverse (dark) color scheme */} ``` ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/system/ThemeProvider/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/_webExamples.mdx ================================================ import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme'; import { createThemeCssVars } from '@coinbase/cds-web/core/createThemeCssVars'; import { JSONCodeBlock } from '@site/src/components/page/JSONCodeBlock'; ## ThemeProvider component The ThemeProvider provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming. You must pass the `theme` prop to configure the theme, and the `activeColorScheme` prop to set light or dark mode. ```tsx import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider'; import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme'; const App = () => ( {/* Your app components */} ); ``` :::tip Changing the `activeColorScheme` automatically updates the values returned from the `useTheme` hook and from CSS Variables. ::: ## `useTheme` hook The `useTheme` hook provides access to the current `theme` and `activeColorScheme`. The `color` and `spectrum` objects automatically change based on the `activeColorScheme`. [See the `useTheme` docs here →](/hooks/useTheme) ```jsx const theme = useTheme(); theme.activeColorScheme; // "light" or "dark" theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme theme.space[2]; // 16 theme.borderRadius[200]; // 8 theme.fontSize.display3; // "2.5rem" ``` :::tip For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible. ::: ## ThemeProvider CSS Variables CSS Variables are created for every value in the theme. For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible. ```jsx const theme = useTheme(); theme.color.bgPrimary; // --color-bgPrimary theme.lightColor.bgPrimary; // --lightColor-bgPrimary theme.darkColor.bgPrimary; // --darkColor-bgPrimary theme.spectrum.blue10; // --blue10 theme.lightSpectrum.blue10; // --light-blue10 theme.darkSpectrum.blue10; // --dark-blue10 theme.space[2]; // --space-2 theme.space[0.25]; // --space-0_25 theme.borderRadius[400]; // --borderRadius-400 theme.fontSize.body; // --fontSize-body ``` You can see all the CSS Variables for the `defaultTheme` below. ## ThemeProvider classnames The ThemeProvider renders with CSS classnames based on the `activeColorScheme` and the theme's `id`. This allows you to style components based on the `activeColorScheme` or the theme's `id`. ```jsx // Renders with a .cds-default class and a .light class ``` ## Nested themes ThemeProviders can be nested to create theme overrides for specific sections. ```jsx {/* Default theme in light color scheme */} {/* Custom theme in dark color scheme */} ``` When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined. ```jsx // Override parts of the parent theme const theme = useTheme(); const customTheme = { ...theme, ...(theme.lightColor && theme.lightSpectrum && { lightColor: { ...theme.lightColor, bg: `rgb(${theme.lightSpectrum.orange50})`, bgPrimary: `rgb(${theme.lightSpectrum.red20})`, bgSecondary: `rgb(${theme.lightSpectrum.blue50})`, }, }), ...(theme.darkColor && theme.darkSpectrum && { darkColor: { ...theme.darkColor, bg: `rgb(${theme.darkSpectrum.orange50})`, bgPrimary: `rgb(${theme.darkSpectrum.red20})`, bgSecondary: `rgb(${theme.darkSpectrum.blue50})`, }, }), } as const satisfies Theme; ``` ## Theme inheritence Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the `useTheme` hook. ```jsx const Example = () => { // Pass the parent theme down to another ThemeProvider const theme = useTheme(); return ( {children} ); }; ``` ## InvertedThemeProvider component The InvertedThemeProvider automatically inherits from its parent theme and flips the `activeColorScheme` to the opposite value. ```jsx live {/* Default theme in light color scheme */} {/* Default theme in inverse (dark) color scheme */} ``` ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/system/ThemeProvider/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/index.mdx ================================================ --- id: theme-provider title: ThemeProvider platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/system/ThemeProvider/toc-props'; import mobilePropsToc from ':docgen/mobile/system/ThemeProvider/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import MobilePropsTable from './_mobilePropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/mobileMetadata.json ================================================ { "import": "import { ThemeProvider } from '@coinbase/cds-mobile'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/system/ThemeProvider.tsx", "description": "Provides the theme context to all child components.", "relatedComponents": [ { "label": "useTheme", "url": "/hooks/useTheme/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/other/ThemeProvider/webMetadata.json ================================================ { "import": "import { ThemeProvider } from '@coinbase/cds-web'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/system/ThemeProvider.tsx", "description": "Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-themeprovider--theme-provider-test", "relatedComponents": [ { "label": "useTheme", "url": "/hooks/useTheme/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/overlay/Alert/_mobileExamples.mdx ================================================ ### Default Alert Controlled using `visible` and `onRequestClose`. ```jsx function DefaultAlertExample() { const [visible, setVisible] = useState(false); const toggleOn = () => setVisible(true); const toggleOff = () => setVisible(false); return ( console.log('preferred pressed')} dismissActionLabel="Cancel" onDismissActionPress={() => console.log('dismiss pressed')} /> ); } ``` ### Portal Alert Controlled programmatically using the `useAlert` hook. :::warning **Deprecated**: Inserting JSX into the DOM using a function in an event handler is an anti-pattern. This hook will be removed in future version. Use the `visible` and `onRequestClose` props instead ::: ```jsx function PortalAlertExample() { function PortalAlert() { const alert = useAlert(); const showAlert = () => alert.open( console.log('Save pressed')} />, ); return ; } return ( ); } ``` ### Alert over Modal Alert displays on top of a `Modal`. You must pass stacked as a prop to `Alert` when it is used inside of a `Modal`. ```jsx function AlertOnModalExample() { function AlertOnModal() { const { openModal, closeModal } = useModal(); const alert = useAlert(); const showAlert = () => alert.open( , ); const handlePress = () => { openModal( {loremIpsum} Save} secondaryAction={} /> , ); }; return ; } return ( ); } ``` ================================================ FILE: apps/docs/docs/components/overlay/Alert/_mobilePropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import mobilePropsData from ':docgen/mobile/overlays/Alert/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/overlay/Alert/_webExamples.mdx ================================================ :::tip Accessibility tip (Web only) Alerts require an accessibility label, which we set to `title` by default. However, if there's other text that gives the user better context to the alert, then you can pass an element id to `accessibilityLabelledBy`. Alternatively, you may directly provide a contextual label to `accessibilityLabel`. ::: ### Default Alert Controlled using `visible` and `onRequestClose`. ```jsx live function DefaultAlertExample() { const [visible, setVisible] = useState(false); const toggleOn = () => setVisible(true); const toggleOff = () => setVisible(false); return ( console.log('preferred pressed')} dismissActionLabel="Cancel" onDismissActionPress={() => console.log('dismiss pressed')} /> ); } ``` ### Portal Alert Controlled programmatically using the `useAlert` hook. :::warning **Deprecated**: Inserting JSX into the DOM using a function in an event handler is an anti-pattern. This hook will be removed in future version. Use the `visible` and `onRequestClose` props instead ::: ```jsx live function PortalAlertExample() { function PortalAlert() { const alert = useAlert(); const showAlert = () => alert.open( console.log('Save pressed')} />, ); return ; } return ( ); } ``` ### Alert over Modal Alert displays on top of a `Modal`. You must pass stacked as a prop to `Alert` when it is used inside of a `Modal`. ```jsx live function AlertOnModalExample() { function AlertOnModal() { const { openModal, closeModal } = useModal(); const alert = useAlert(); const showAlert = () => alert.open( , ); const handlePress = () => { openModal( {loremIpsum} Save} secondaryAction={} /> , ); }; return ; } return ( ); } ``` ================================================ FILE: apps/docs/docs/components/overlay/Alert/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/overlays/Alert/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/overlay/Alert/index.mdx ================================================ --- id: alert title: Alert platform_switcher_options: { web: true, mobile: true } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import MobilePropsTable from './_mobilePropsTable.mdx'; import mobilePropsToc from ':docgen/mobile/overlays/Alert/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/overlays/Alert/toc-props'; import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; import mobileMetadata from './mobileMetadata.json'; } webExamples={} mobilePropsTable={} mobileExamples={} webExamplesToc={webExamplesToc} mobileExamplesToc={mobileExamplesToc} webPropsToc={webPropsToc} mobilePropsToc={mobilePropsToc} /> ================================================ FILE: apps/docs/docs/components/overlay/Alert/mobileMetadata.json ================================================ { "import": "import { Alert } from '@coinbase/cds-mobile/overlays/Alert'", "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/overlays/Alert.tsx", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=7-6", "description": "A dialog that communicates critical information and blocks user interaction.", "relatedComponents": [ { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/overlay/Alert/webMetadata.json ================================================ { "import": "import { Alert } from '@coinbase/cds-web/overlays/Alert'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/overlays/Alert.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-alert--basic-alert", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=7-6", "description": "A dialog that communicates critical information and blocks user interaction.", "relatedComponents": [ { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" }, { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/overlay/FocusTrap/_webExamples.mdx ================================================ :::note Before using FocusTrap `` is intended to prevent keyboard users from interacting with elements on the page that a mouse user cannot interact with either. An example of this is `` where the user cannot click the items behind the modal. If you want to shift focus based on UI events, consider using the [.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method instead. ::: :::warning Accessibility It is **required** that when using a `` there is logic using only key presses to escape the focus trap. Otherwise, keyboard users will be blocked after they enter a ``. ::: ## Basic example :::note All the examples have controls to enable / disable the focus trap so that page keyboard navigation isn't blocked. ::: When enabled, only the children of the `` will be able to receive focus. Otherwise, standard DOM focus order follows. Please ensure there is at least one child element that can be focused in the ``. ```jsx live function Example() { const [focusTrapEnabled, setFocusTrapEnabled] = useState(false); return ( setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> {focusTrapEnabled && ( Inside FocusTrap setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> )} ); } ``` ## Include trigger in FocusTrap The `includeTriggerInFocusTrap` prop includes the triggering element causing the `` to render as part of the focus order. ```jsx live function Example() { const [focusTrapEnabled, setFocusTrapEnabled] = useState(false); return ( setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> {focusTrapEnabled && ( Inside FocusTrap setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> )} ); } ``` ## Restore focus on unmount The `restoreFocusOnUnmount` prop returns focus to the triggering element when the `` is unmounted. ```jsx live function Example() { const [focusTrapEnabled, setFocusTrapEnabled] = useState(false); return ( setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> {focusTrapEnabled && ( Inside FocusTrap setFocusTrapEnabled((prev) => !prev)} label="Focus trap enabled" /> )} ); } ``` ================================================ FILE: apps/docs/docs/components/overlay/FocusTrap/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/overlays/FocusTrap/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/overlay/FocusTrap/index.mdx ================================================ --- id: focusTrap title: FocusTrap platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { VStack } from '@coinbase/cds-web/layout'; import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import webPropsToc from ':docgen/web/overlays/FocusTrap/toc-props'; import WebPropsTable from './_webPropsTable.mdx'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/overlay/FocusTrap/webMetadata.json ================================================ { "import": "import { FocusTrap } from '@coinbase/cds-web/overlays/FocusTrap'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/overlays/FocusTrap.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-focustrap--playground", "description": "FocusTrap is a component that traps focus within its children.", "relatedComponents": [ { "label": "Modal", "url": "/components/overlay/Modal/" }, { "label": "Tray", "url": "/components/overlay/Tray/" } ], "dependencies": [] } ================================================ FILE: apps/docs/docs/components/overlay/FullscreenAlert/_webExamples.mdx ================================================ `FullscreenAlert` is built on top of `FullscreenModal` with an API that is similar to `Alert`. :::tip Accessibility tip (Web only) Alerts require an accessibility label, which we set to `title` by default. However, if there's other text that gives the user better context to the alert, then you can pass an element id to `accessibilityLabelledBy`. Alternatively, you may directly provide a contextual label to `accessibilityLabel`. ::: ### Basic example ```jsx live function DefaultAlert() { const [visible, setVisible] = useState(false); const handleOpen = () => setVisible(true); const handleClose = () => setVisible(false); return ( ); } ``` ================================================ FILE: apps/docs/docs/components/overlay/FullscreenAlert/_webPropsTable.mdx ================================================ import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable'; import webPropsData from ':docgen/web/overlays/FullscreenAlert/data'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; ================================================ FILE: apps/docs/docs/components/overlay/FullscreenAlert/index.mdx ================================================ --- id: fullscreenAlert title: FullscreenAlert platform_switcher_options: { web: true, mobile: false } hide_title: true --- import { ComponentHeader } from '@site/src/components/page/ComponentHeader'; import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer'; import WebPropsTable from './_webPropsTable.mdx'; import webPropsToc from ':docgen/web/overlays/FullscreenAlert/toc-props'; import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx'; import { sharedParentTypes } from ':docgen/_types/sharedParentTypes'; import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases'; import { VStack } from '@coinbase/cds-web/layout'; import webMetadata from './webMetadata.json'; } webExamples={} webExamplesToc={webExamplesToc} webPropsToc={webPropsToc} /> ================================================ FILE: apps/docs/docs/components/overlay/FullscreenAlert/webMetadata.json ================================================ { "import": "import { FullscreenAlert } from '@coinbase/cds-web/overlays/alert/FullscreenAlert'", "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/overlays/FullscreenAlert.tsx", "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-fullscreenalert--basic", "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=68-1053", "description": "A fullscreen alert component for displaying important messages that require user attention.", "relatedComponents": [ { "label": "Alert", "url": "/components/overlay/Alert/" }, { "label": "Modal", "url": "/components/overlay/Modal/" } ], "dependencies": [ { "name": "framer-motion", "version": "^10.18.0" }, { "name": "react-dom", "version": "^18.3.1" } ] } ================================================ FILE: apps/docs/docs/components/overlay/FullscreenModal/_webExamples.mdx ================================================ Please refer to the [Modal](/components/overlay/Modal) docs for more info on setup and usage. :::tip Accessibility tip **Trigger Focus** A `ref` to the trigger that opens the modal, along with an `onDidClose` method to reset focus on the trigger when the modal closes, needs to be wired up for accessibility (see code example below).
**Labels** Modals also require an accessibility label, which we set to `title` by default. However, if you don't want to provide a `title` or there's other text that gives the user better context to the modal, then you can pass an element id to `accessibilityLabelledBy`. Alternatively, you may directly provide a contextual label to `accessibilityLabel`. ::: ### Basic example ```jsx live function DefaultModal() { const [visible, setVisible] = useState(false); const triggerRef = useRef(null); const toggleOn = useCallback(() => setVisible(true), []); const toggleOff = useCallback(() => setVisible(false), []); const handleClose = useCallback(() => { console.log('modal closing'); toggleOff(); }, [toggleOff]); const handleDidClose = useCallback(() => { if (triggerRef.current) { triggerRef.current.focus(); } }, []); const onClickConsole = () => void console.log; const SelectComponent = () => { const [value, setValue] = useState('1'); const options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' }, { value: '5', label: 'Option 5' }, { value: '6', label: 'Option 6' }, ]; return ( } accept={accept} multiple={multiple} onChange={onFileInputChange} style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer', width: '100%', height: '100%', }} type="file" /> {children} ); }); export { useFileUpload } from './useFileUpload'; ================================================ FILE: apps/docs/src/components/page/FileDropZone/useFileUpload.ts ================================================ import { type ChangeEvent, type DragEvent, useCallback, useRef } from 'react'; type UseFileUploadOptions = { onFiles: (files: File[]) => void; onDragEnter?: (itemCount: number) => void; onDragLeave?: () => void; }; export function useFileUpload({ onFiles, onDragEnter, onDragLeave }: UseFileUploadOptions) { const fileInputRef = useRef(null); const handleChange = useCallback( (e: ChangeEvent) => { if (!e.target.files?.length) return; const files = Array.from(e.target.files); e.target.value = ''; setTimeout(() => onFiles(files), 0); }, [onFiles], ); const handleDrop = useCallback( (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (!e.dataTransfer.files.length) return; const files = Array.from(e.dataTransfer.files); setTimeout(() => onFiles(files), 0); }, [onFiles], ); const handleDragOver = useCallback( (e: DragEvent) => { e.preventDefault(); const items = Array.from(e.dataTransfer.items).filter((i) => i.kind === 'file'); onDragEnter?.(items.length); }, [onDragEnter], ); const handleDragLeave = useCallback( (e: DragEvent) => { const zone = e.currentTarget; if (!zone.contains(e.relatedTarget as Node)) { onDragLeave?.(); } }, [onDragLeave], ); const dropZoneProps = { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, }; return { dropZoneProps, fileInputRef, handleFileInputChange: handleChange, }; } ================================================ FILE: apps/docs/src/components/page/HookTabsContainer/index.tsx ================================================ import React, { useCallback, useMemo } from 'react'; import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext'; import type { TabValue } from '@coinbase/cds-common/tabs/useTabs'; import { Box, Divider, VStack } from '@coinbase/cds-web/layout'; import { Pressable } from '@coinbase/cds-web/system'; import { Tabs, TabsActiveIndicator, type TabsActiveIndicatorProps } from '@coinbase/cds-web/tabs'; import type { TOCItem } from '@docusaurus/mdx-loader'; import { useHistory, useLocation } from '@docusaurus/router'; import { usePlatformContext } from '@site/src/utils/PlatformContext'; import { TOCUpdater } from '../../../utils/toc/TOCManager'; const tabs = [ { id: 'examples', label: 'Examples' }, { id: 'api', label: 'API' }, ]; type HookTabsContainerProps = { webApi?: React.ReactNode; mobileApi?: React.ReactNode; webExamples?: React.ReactNode; mobileExamples?: React.ReactNode; webApiToc?: TOCItem[]; mobileApiToc?: TOCItem[]; webExamplesToc?: TOCItem[]; mobileExamplesToc?: TOCItem[]; }; const CustomTab = ({ id, label }: TabValue) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; return ( updateActiveTab(id)} paddingBottom={0.75} paddingTop={0.5} > {label} ); }; const CustomTabsActiveIndicator = (props: TabsActiveIndicatorProps) => { return ; }; export const HookTabsContainer: React.FC = ({ webExamples, mobileExamples, webApi, mobileApi, webExamplesToc, mobileExamplesToc, webApiToc, mobileApiToc, }) => { const { platform } = usePlatformContext(); const isWeb = platform === 'web'; const isMobile = platform === 'mobile'; const { search } = useLocation(); const history = useHistory(); const activeTab = useMemo(() => { const tabId = new URLSearchParams(search).get('tab'); return tabs.find((tab) => tab.id === tabId) ?? tabs[0]; }, [search]); const setActiveTab = useCallback( (tab: TabValue | null) => { const searchParams = new URLSearchParams(search); searchParams.set('tab', tab?.id ?? tabs[0].id); history.replace({ search: searchParams.toString() }); }, [history, search], ); const shouldRenderExamples = activeTab?.id === tabs[0].id; const shouldRenderApi = activeTab?.id === tabs[1].id; return ( ); }; ================================================ FILE: apps/docs/src/components/page/IconSheet/index.tsx ================================================ import React, { useCallback, useState } from 'react'; import type { TabValue } from '@coinbase/cds-common/tabs/useTabs'; import type { IconSize } from '@coinbase/cds-common/types'; import type { IconName } from '@coinbase/cds-common/types/IconName'; import { descriptionMap } from '@coinbase/cds-icons/descriptionMap'; import { names } from '@coinbase/cds-icons/names'; import { TileButton } from '@coinbase/cds-web/buttons/TileButton'; import { SearchInput, Switch } from '@coinbase/cds-web/controls'; import { Icon } from '@coinbase/cds-web/icons/Icon'; import { Box, Grid } from '@coinbase/cds-web/layout'; import { useToast } from '@coinbase/cds-web/overlays/useToast'; import { Text } from '@coinbase/cds-web/typography'; import { sortByAlphabet } from '@site/src/utils/sortByAlphabet'; import { throttle } from 'lodash'; import { SheetTabs } from '../SheetTabs'; // use a set to dedupe the icons that existed in both the navigation icons set and the ui icons set const alphabeticallySortedNames = [...names].sort(sortByAlphabet); const queryMatchesName = (query: string, name: string) => { const queryRe = new RegExp(query.trim().toLowerCase(), 'gi'); const nameRe = new RegExp(name.toLowerCase(), 'gi'); const matchedIconNames: string[] = []; if (query in descriptionMap) { matchedIconNames.push(...descriptionMap[query]); } return name.match(queryRe) !== null || matchedIconNames.join(' ').match(nameRe) !== null; }; const iconSizes: IconSize[] = ['xs', 's', 'm', 'l']; const IconTile = ({ name, size, active }: { name: IconName; size: IconSize; active: boolean }) => { const toast = useToast(); const handleIconPress = useCallback(() => { if (navigator) { void navigator.clipboard.writeText(name).then(() => { toast.show('Copied to clipboard'); }); } }, [name, toast]); return ( ); }; export const IconSheet = ({ title }: { title?: React.ReactNode }) => { const [query, setQuery] = useState(''); const [showIconActive, setShowIconActive] = useState(false); const [activeTab, setActiveTab] = useState({ id: 'm', label: 'm' }); const handleActiveCheck = useCallback(() => { setShowIconActive((active) => !active); }, []); const searchOnChange = throttle((text: string) => { setQuery(text); }, 1000); const tabs = iconSizes.map((size) => ({ id: size, label: size })); const handleTabChange = useCallback((tab: TabValue | null) => { setActiveTab(tab); }, []); return ( active prop: size prop: {iconSizes.map((size) => { const filteredNames = alphabeticallySortedNames.filter((name) => queryMatchesName(query, name), ); const hasResults = filteredNames.length > 0; return ( {hasResults ? ( {filteredNames.map((name) => ( ))} ) : ( No results found )} ); })} ); }; ================================================ FILE: apps/docs/src/components/page/IllustrationSheet/index.tsx ================================================ import React, { useCallback, useState } from 'react'; import type { HeroSquareDimension, IllustrationVariant, PictogramDimension, SpotIconDimension, } from '@coinbase/cds-common'; import type { TabValue } from '@coinbase/cds-common/tabs/useTabs'; import { illustrationDimensionDefaults, illustrationDimensions, } from '@coinbase/cds-common/tokens/illustrations'; import heroSquareDescriptionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/descriptionMap'; import heroSquareNames from '@coinbase/cds-illustrations/__generated__/heroSquare/data/names'; import pictogramDescriptionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/descriptionMap'; import pictogramNames from '@coinbase/cds-illustrations/__generated__/pictogram/data/names'; import spotIconDescriptionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/descriptionMap'; import spotIconNames from '@coinbase/cds-illustrations/__generated__/spotIcon/data/names'; import spotRectangleDescriptionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/descriptionMap'; import spotRectangleNames from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/names'; import spotSquareDescriptionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/descriptionMap'; import spotSquareNames from '@coinbase/cds-illustrations/__generated__/spotSquare/data/names'; import { SearchInput } from '@coinbase/cds-web/controls/SearchInput'; import { Select } from '@coinbase/cds-web/controls/Select'; import { SelectOption } from '@coinbase/cds-web/controls/SelectOption'; import type { HeroSquareName, PictogramName, SpotIconName, SpotRectangleName, SpotSquareName, } from '@coinbase/cds-web/illustrations'; import { HeroSquare, Pictogram, SpotIcon, SpotRectangle, SpotSquare, } from '@coinbase/cds-web/illustrations'; import { Box, Grid, VStack } from '@coinbase/cds-web/layout'; import { useToast } from '@coinbase/cds-web/overlays/useToast'; import { Pressable } from '@coinbase/cds-web/system'; import { Text } from '@coinbase/cds-web/typography'; import throttle from 'lodash/throttle'; import { SheetTabs } from '../SheetTabs'; import styles from './styles.module.css'; const variantToNamesMap = { heroSquare: heroSquareNames, spotRectangle: spotRectangleNames, spotSquare: spotSquareNames, pictogram: pictogramNames, spotIcon: spotIconNames, }; const descriptionMap = { heroSquare: heroSquareDescriptionMap, spotRectangle: spotRectangleDescriptionMap, spotSquare: spotSquareDescriptionMap, pictogram: pictogramDescriptionMap, spotIcon: spotIconDescriptionMap, }; /** * If the query is the description of an illustration, we need * to find the name of the illustration that has the description * of the query. * @param query - the user search term * @param name - the name of the illustration that is being matched with * @returns returns true if query is a description of this illustration */ const queryHasMatchingDescription = (type: IllustrationVariant, query: string, name: string) => { const descriptionMapForType = descriptionMap[type]; if (query === '') return true; if (query in descriptionMapForType) { return descriptionMapForType[query].includes(name); } return false; }; /** * Determines whether the query is a subset of the name. * i.e If the name is contract, and query is con, this would return * true. * @param query - the user search term * @param name - the name of the illustration that is being matched with * @returns true if query is a subset of name of this illustration */ const queryIsSubsetOfName = (query: string, name: string) => { if (query === '') return true; const queryRe = new RegExp(query.trim().toLowerCase(), 'gi'); return queryRe.test(name); }; export const getOverflowTextStyles = (expanded: boolean) => expanded ? styles.overflow : styles.truncated; const IllustrationTile = ({ name, variant, width, dimension, idx, }: { name: string; variant: IllustrationVariant; width: number; dimension: string; idx: number; }) => { const [shouldOverflow, setShouldOverflow] = useState(false); const overflowStyles = getOverflowTextStyles(shouldOverflow); const widthString = `${width}px`; const heightString = `${width + 20}px`; const zIndex = variantToNamesMap[variant].length - idx + 2; const toast = useToast(); const handleCopyToClipboard = useCallback(() => { if (navigator) { void navigator.clipboard.writeText(name).then(() => { toast.show('Copied to clipboard'); }); } }, [name, toast]); return ( setShouldOverflow(true)} onMouseLeave={() => setShouldOverflow(false)} position="absolute" top={0} width={widthString} zIndex={zIndex} > {variant === 'heroSquare' && ( )} {variant === 'spotSquare' && } {variant === 'spotRectangle' && } {variant === 'pictogram' && ( )} {variant === 'spotIcon' && ( )} {name} ); }; export const IllustrationSheet = ({ variant }: { variant: IllustrationVariant }) => { const [query, setQuery] = useState(''); const names = variantToNamesMap[variant]; const dimensions = illustrationDimensions[variant]; const defaultValue = illustrationDimensionDefaults[variant]; const [activeTab, setActiveTab] = useState({ id: defaultValue, label: defaultValue, }); const searchOnChange = throttle((text: string) => { setQuery(text); }, 1000); const tabs = dimensions.map((dimension) => ({ id: dimension, label: dimension, })); const handleTabChange = useCallback((tab: TabValue | null) => { setActiveTab(tab); }, []); return ( dimension prop: {dimensions.map((dimension) => { const width = parseInt(dimension.split('x')[0]); const filteredNames = names.filter( (name) => queryHasMatchingDescription(variant, query, name) || queryIsSubsetOfName(query, name), ); return ( {filteredNames.length > 0 ? ( {filteredNames.map((filteredName, idx) => ( ))} ) : ( No results found )} ); })} ); }; ================================================ FILE: apps/docs/src/components/page/IllustrationSheet/styles.module.css ================================================ .tile { cursor: pointer; position: relative; } .truncated { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow { overflow: visible; white-space: normal; hyphens: auto; } ================================================ FILE: apps/docs/src/components/page/JSONCodeBlock/index.tsx ================================================ import CodeBlock from '@theme/CodeBlock'; import type { Serializable } from 'node:child_process'; import styles from './styles.module.css'; export const JSONCodeBlock = ({ json }: { json: Serializable }) => { return ( {JSON.stringify(json, null, 2)} ); }; ================================================ FILE: apps/docs/src/components/page/JSONCodeBlock/styles.module.css ================================================ .jsonCodeBlock { max-height: 340px; border-radius: var(--borderRadius-400); background: var(--color-bg); /* Override CodeBlock component styles */ margin-bottom: 0 !important; overflow: scroll !important; @media (min-width: 997px) { max-height: 460px; } } ================================================ FILE: apps/docs/src/components/page/LinkChip/index.tsx ================================================ import React, { memo } from 'react'; import type { IconName } from '@coinbase/cds-common'; import { Icon } from '@coinbase/cds-web/icons'; import { HStack } from '@coinbase/cds-web/layout/HStack'; import { Pressable, type PressableProps } from '@coinbase/cds-web/system'; import { Text } from '@coinbase/cds-web/typography/Text'; import DocusaurusLink from '@docusaurus/Link'; type LinkChipProps = Omit, 'as' | 'children'> & { children: React.ReactNode; startIcon?: IconName; endIcon?: IconName; }; /** * A Chip-styled link that uses Pressable for hover/active states with DocusaurusLink for routing. */ export const LinkChip = memo( ({ children, startIcon = 'externalLink', endIcon, background = 'bgSecondary', borderRadius = 700, target = '_blank', ...props }: LinkChipProps) => ( {startIcon && } {children} {endIcon && } ), ); ================================================ FILE: apps/docs/src/components/page/LottieSheet/index.tsx ================================================ import { useCallback, useState } from 'react'; import * as lottieAnimations from '@coinbase/cds-lottie-files'; import { Lottie } from '@coinbase/cds-web/animation'; import { SearchInput } from '@coinbase/cds-web/controls'; import { Box, Grid, VStack } from '@coinbase/cds-web/layout'; import { useToast } from '@coinbase/cds-web/overlays/useToast'; import { Pressable } from '@coinbase/cds-web/system'; import { Text } from '@coinbase/cds-web/typography'; import { sortByAlphabet } from '@site/src/utils/sortByAlphabet'; import { throttle } from 'lodash'; // Get all lottie animation names and sort them alphabetically const animationEntries = Object.entries(lottieAnimations).filter( ([, value]) => typeof value === 'object' && value !== null && 'nm' in value, ); const animationNames = animationEntries.map(([name]) => name).sort(sortByAlphabet); const queryMatchesName = (query: string, name: string) => { const queryRe = new RegExp(query.trim().toLowerCase(), 'gi'); return name.match(queryRe) !== null; }; const LottieTile = ({ name }: { name: string }) => { const toast = useToast(); const animationSource = lottieAnimations[name as keyof typeof lottieAnimations]; const handleLottiePress = useCallback(() => { if (navigator) { void navigator.clipboard.writeText(name).then(() => { toast.show('Copied to clipboard'); }); } }, [name, toast]); return ( {name} ); }; export const LottieSheet = () => { const [query, setQuery] = useState(''); const searchOnChange = throttle((text: string) => { setQuery(text); }, 1000); const filteredNames = animationNames.filter((name) => queryMatchesName(query, name)); const hasResults = filteredNames.length > 0; return ( {hasResults ? ( {filteredNames.map((name) => ( ))} ) : ( No results found )} ); }; ================================================ FILE: apps/docs/src/components/page/MDXArticle/index.tsx ================================================ import React from 'react'; import { Box, Divider } from '@coinbase/cds-web/layout'; import styles from './style.module.css'; export function MDXArticle({ children, hideDivider, }: { children: React.ReactNode; hideDivider: boolean; }) { return ( <> {children} {!hideDivider && } ); } ================================================ FILE: apps/docs/src/components/page/MDXArticle/style.module.css ================================================ .articleContainer { & h2 { font-family: var(--fontFamily-title2); font-size: var(--fontSize-title2); font-weight: var(--fontWeight-title2); line-height: var(--lineHeight-title2); margin-bottom: var(--space-2); } & h3 { font-family: var(--fontFamily-title3); font-size: var(--fontSize-title3); font-weight: var(--fontWeight-title3); line-height: var(--lineHeight-title3); margin-bottom: var(--space-1_5); } & h4 { font-family: var(--fontFamily-title4); font-size: var(--fontSize-title4); font-weight: var(--fontWeight-title4); line-height: var(--lineHeight-title4); margin-bottom: var(--space-1_5); } & h5 { font-family: var(--fontFamily-headline); font-size: var(--fontSize-headline); font-weight: var(--fontWeight-headline); line-height: var(--lineHeight-headline); margin-bottom: var(--space-1_5); } & h6 { font-family: var(--fontFamily-headline); font-size: var(--fontSize-headline); font-weight: var(--fontWeight-headline); line-height: var(--lineHeight-headline); margin-bottom: var(--space-1_5); } & p { font-family: var(--fontFamily-body); font-size: var(--fontSize-body); font-weight: var(--fontWeight-body); line-height: var(--lineHeight-body); margin-bottom: var(--space-3); } & ul { font-family: var(--fontFamily-body); font-size: var(--fontSize-body); font-weight: var(--fontWeight-body); line-height: var(--lineHeight-body); margin-bottom: var(--space-3); & p { margin-bottom: var(--space-1); } } & ol { font-family: var(--fontFamily-body); font-size: var(--fontSize-body); font-weight: var(--fontWeight-body); line-height: var(--lineHeight-body); margin-bottom: var(--space-3); & p { margin-bottom: var(--space-1); } } & blockquote { font-family: var(--fontFamily-body); font-size: var(--fontSize-body); font-weight: var(--fontWeight-body); line-height: var(--lineHeight-body); margin-bottom: var(--space-3); } & h2:last-child, & h3:last-child, & h4:last-child, & h5:last-child, & h6:last-child, & p:last-child, & ul:last-child, & ol:last-child, & blockquote:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { & h2 { margin-bottom: var(--space-1_5); } & h3 { margin-bottom: var(--space-1_5); } & h4 { margin-bottom: var(--space-1_5); } & h5 { margin-bottom: var(--space-1_5); } & h6 { margin-bottom: var(--space-1_5); } & p { margin-bottom: var(--space-2); } & ul { margin-bottom: var(--space-2); } & ol { margin-bottom: var(--space-2); } & blockquote { margin-bottom: var(--space-2); } } } .divider:last-child { display: none; } ================================================ FILE: apps/docs/src/components/page/MDXSection/index.tsx ================================================ import React from 'react'; import { VStack } from '@coinbase/cds-web/layout'; export function MDXSection({ children }: { children: React.ReactNode }) { return ( {children} ); } ================================================ FILE: apps/docs/src/components/page/Metadata/MetadataDependencies.tsx ================================================ import React, { memo } from 'react'; import { HStack } from '@coinbase/cds-web/layout/HStack'; import { VStack } from '@coinbase/cds-web/layout/VStack'; import { Link } from '@coinbase/cds-web/typography/Link'; import { Text } from '@coinbase/cds-web/typography/Text'; import DocusaurusLink from '@docusaurus/Link'; import type { Dependency } from '.'; type MetadataDependenciesProps = { /** List of dependencies to display */ dependencies: Dependency[]; }; /** * Displays a list of peer dependencies with optional version info and links. */ export const MetadataDependencies = memo(({ dependencies }: MetadataDependenciesProps) => { if (dependencies.length === 0) { return null; } return ( Peer dependencies {dependencies.map((dependency, index) => (
  • {dependency.url ? ( {dependency.name} ) : ( dependency.name )} {dependency.version && {`: ${dependency.version}`}} {index < dependencies.length - 1 && ', '}
    • ))}     ); }); ================================================ FILE: apps/docs/src/components/page/Metadata/MetadataLinks.tsx ================================================ import React, { memo, useCallback, useMemo } from 'react'; import { Chip } from '@coinbase/cds-web/chips/Chip'; import { Icon } from '@coinbase/cds-web/icons'; import { HStack } from '@coinbase/cds-web/layout/HStack'; import { Tooltip } from '@coinbase/cds-web/overlays'; import { useToast } from '@coinbase/cds-web/overlays/useToast'; import { useLocation } from '@docusaurus/router'; import { LinkChip } from '@site/src/components/page/LinkChip'; import { usePlatformContext } from '@site/src/utils/PlatformContext'; type MetadataLinksProps = { /** URL to source code */ source?: string; /** URL to Storybook */ storybook?: string; /** URL to changelog */ changelog?: string; /** URL to Figma */ figma?: string; /** Hide the "View as Markdown" and "Copy for LLM" links */ hideLlmLinks?: boolean; }; /** * Displays metadata links (Source, Storybook, Changelog, Figma) and View as Markdown. */ export const MetadataLinks = memo( ({ source, storybook, changelog, figma, hideLlmLinks }: MetadataLinksProps) => { const { platform } = usePlatformContext(); const toast = useToast(); const location = useLocation(); const llmDocUrl = useMemo(() => { const pathname = location.pathname; const parts = pathname.split('/').filter(Boolean); const docType = parts.length >= 2 ? parts[0] : 'components'; const title = parts.length >= 2 ? parts[parts.length - 1] : 'unknown'; return `/llms/${platform}/${docType}/${title}.txt`; }, [location.pathname, platform]); const handleCopyLLMDoc = useCallback(async () => { try { const response = await fetch(llmDocUrl); if (!response.ok) { throw new Error('Failed to fetch LLM doc'); } const text = await response.text(); await navigator.clipboard.writeText(text); toast.show('Copied to clipboard'); } catch (error) { console.error('Failed to copy LLM doc:', error); toast.show('Failed to copy to clipboard'); } }, [llmDocUrl, toast]); return ( {source && ( Source )} {storybook && Storybook} {changelog && Changelog} {figma && ( Figma )} {!hideLlmLinks && ( } > Copy for LLM )} {!hideLlmLinks && View as Markdown} ); }, ); ================================================ FILE: apps/docs/src/components/page/Metadata/MetadataRelatedComponents.tsx ================================================ import React, { memo } from 'react'; import { HStack } from '@coinbase/cds-web/layout/HStack'; import { VStack } from '@coinbase/cds-web/layout/VStack'; import { Link } from '@coinbase/cds-web/typography/Link'; import { Text } from '@coinbase/cds-web/typography/Text'; import DocusaurusLink from '@docusaurus/Link'; import type { RelatedComponent } from '.'; type MetadataRelatedComponentsProps = { /** List of related components to display */ relatedComponents: RelatedComponent[]; }; /** * Displays a list of related components as links. */ export const MetadataRelatedComponents = memo( ({ relatedComponents }: MetadataRelatedComponentsProps) => { if (relatedComponents.length === 0) { return null; } return ( Related components {relatedComponents.map((component, index) => (
  • {component.label} {index < relatedComponents.length - 1 && ', '}
    • ))}     ); }, ); ================================================ FILE: apps/docs/src/components/page/Metadata/index.ts ================================================ export type Dependency = { /** The name of the dependency package */ name: string; /** Optional version requirement */ version?: string; /** Optional URL to the package */ url?: string; }; export type RelatedComponent = { /** The URL that the related component links to */ url: string; /** The display label for the related component */ label: string; }; export type Metadata = { import: string; source: string; changelog?: string; storybook?: string; figma?: string; description?: string; relatedComponents?: RelatedComponent[]; /** Dependencies required by this component */ dependencies?: Dependency[]; }; export * from './MetadataDependencies'; export * from './MetadataLinks'; export * from './MetadataRelatedComponents'; ================================================ FILE: apps/docs/src/components/page/PlatformSwitcher/index.tsx ================================================ import { createContext, type ReactNode, useCallback, useContext, useMemo, useRef, useState, } from 'react'; import type { TabValue } from '@coinbase/cds-common/tabs/useTabs'; import { SegmentedTabs } from '@coinbase/cds-web/tabs/SegmentedTabs'; import { type Platform, usePlatformContext } from '@site/src/utils/PlatformContext'; type PlatformSegmentedTabsProps = { accessibilityLabel?: string; onPlatformChange: (platform: Platform) => void; platform: Platform; supportsMobile?: boolean; supportsWeb?: boolean; }; export const PlatformSegmentedTabs = ({ accessibilityLabel = 'Select platform', onPlatformChange, platform, supportsMobile = true, supportsWeb = true, }: PlatformSegmentedTabsProps) => { const segmentedTabsRef = useRef(null); const tabs = useMemo( () => [ ...(supportsWeb ? [{ id: 'web', label: supportsMobile ? 'Web' : 'Web Only' }] : []), ...(supportsMobile ? [ { id: 'mobile', label: supportsWeb ? 'Mobile' : 'Mobile Only', }, ] : []), ], [supportsMobile, supportsWeb], ); const activeTab = tabs.find(({ id }) => id === platform) ?? null; const handlePlatformChange = useCallback( (tab: TabValue | null) => { if (!tab) return; const platform = tab.id as Platform; onPlatformChange(platform); setTimeout( () => segmentedTabsRef.current?.querySelector(`#${platform}`)?.focus(), 1, ); }, [onPlatformChange], ); return ( ); }; type StandalonePlatformSwitcherProps = { children: ReactNode; defaultPlatform?: Platform; }; type StandalonePlatformSwitcherContextValue = { platform: Platform; setPlatform: (platform: Platform) => void; }; const StandalonePlatformSwitcherContext = createContext(null); function useStandalonePlatformSwitcherContext() { const context = useContext(StandalonePlatformSwitcherContext); if (!context) { throw new Error( 'StandalonePlatformSwitcher compound components must be rendered inside StandalonePlatformSwitcher.Root', ); } return context; } function StandalonePlatformSwitcherRoot({ children, defaultPlatform = 'web', }: StandalonePlatformSwitcherProps) { const [platform, setPlatform] = useState(defaultPlatform); const value = useMemo(() => ({ platform, setPlatform }), [platform]); return ( {children} ); } type StandalonePlatformSwitcherToggleProps = { accessibilityLabel?: string; }; function StandalonePlatformSwitcherToggle({ accessibilityLabel, }: StandalonePlatformSwitcherToggleProps) { const { platform, setPlatform } = useStandalonePlatformSwitcherContext(); return ( ); } type StandalonePlatformSwitcherContentProps = { children: ReactNode; platform: Platform; }; function StandalonePlatformSwitcherContent({ children, platform, }: StandalonePlatformSwitcherContentProps) { const { platform: activePlatform } = useStandalonePlatformSwitcherContext(); if (activePlatform !== platform) { return null; } return <>{children}; } export const StandalonePlatformSwitcher = { Content: StandalonePlatformSwitcherContent, Root: StandalonePlatformSwitcherRoot, Toggle: StandalonePlatformSwitcherToggle, }; export const PlatformSwitcher = () => { const { supportsWeb, supportsMobile, platform, setPlatform } = usePlatformContext(); return ( ); }; ================================================ FILE: apps/docs/src/components/page/ShareablePlayground/index.tsx ================================================ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'; import { Collapsible } from '@coinbase/cds-web/collapsible/Collapsible'; import { Icon } from '@coinbase/cds-web/icons/Icon'; import { Box } from '@coinbase/cds-web/layout'; import { HStack } from '@coinbase/cds-web/layout/HStack'; import { VStack } from '@coinbase/cds-web/layout/VStack'; import { useToast } from '@coinbase/cds-web/overlays/useToast'; import { Pressable } from '@coinbase/cds-web/system'; import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider'; import { Text } from '@coinbase/cds-web/typography/Text'; import BrowserOnly from '@docusaurus/BrowserOnly'; import ErrorBoundary from '@docusaurus/ErrorBoundary'; import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common'; import debounce from 'lodash/debounce'; import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'; import * as estreePlugin from 'prettier/plugins/estree.js'; import * as typescriptPlugin from 'prettier/plugins/typescript.js'; import { format } from 'prettier/standalone'; import { usePlaygroundTheme } from '../../../theme/Layout/Provider/UnifiedThemeContext'; import ReactLiveScope from '../../../theme/ReactLiveScope'; import styles from './styles.module.css'; const PlaygroundEditorHeader = memo(() => { return ( Live Code ); }); const renderErrorFallback = (params: any) => ; const previewComponent = () => ( <> ); const getSharedCode = () => { if (typeof window === 'undefined') return; const urlParams = new URLSearchParams(window.location.search); const sharedCode = urlParams.get('code'); if (sharedCode) return decompressFromEncodedURIComponent(sharedCode); }; const defaultCodeExample = `// Create your own example components and hooks, then call render() to render them const Example = () => { return ( Place your example code here ); }; // You must call render() to render your code render(); `; const prettierOptions = { parser: 'typescript', plugins: [estreePlugin, typescriptPlugin] as any, arrowParens: 'always', bracketSameLine: false, jsxSingleQuote: false, printWidth: 100, semi: true, singleQuote: true, tabWidth: 2, trailingComma: 'all', useTabs: false, } as const; type PlaygroundControlsProps = { onClickCopy: () => void; onClickShare: () => void; }; const PlaygroundControls = memo(({ onClickCopy, onClickShare }: PlaygroundControlsProps) => { return ( Copy code Share code ); }); type LiveProviderProps = React.ComponentProps; type ShareablePlaygroundProps = Omit & { /** The default initial code to display in the playground if no code was provided via the URL. */ defaultInitialCode: string; }; export const ShareablePlayground = memo(function Playground({ defaultInitialCode: defaultInitialCodeProp = defaultCodeExample, ...props }: ShareablePlaygroundProps): JSX.Element { const defaultInitialCode = useMemo( () => defaultInitialCodeProp.replace(/\n$/, ''), [defaultInitialCodeProp], ); const [code, setCode] = useState(() => getSharedCode() ?? defaultInitialCode); const codeRef = useRef(code); const toast = useToast(); const { colorScheme, theme, prismTheme } = usePlaygroundTheme(); const handleUrlUpdate = useMemo( () => debounce((code: string) => { const compressedCode = compressToEncodedURIComponent(code); const url = new URL(window.location.href); url.searchParams.set('code', compressedCode); window.history.replaceState({}, '', url.toString()); }, 500), [], ); const handleCodeChange = useCallback( (code: string) => { codeRef.current = code; handleUrlUpdate(code); setCode(code); }, [handleUrlUpdate], ); const handleCopyToClipboard = useCallback(() => { navigator.clipboard .writeText(codeRef.current) .then(() => toast.show('Copied to clipboard')) .catch(() => toast.show('Failed to copy to clipboard')); }, [toast]); const handleShareCode = useCallback(() => { try { const compressedCode = compressToEncodedURIComponent(codeRef.current); const url = new URL(window.location.href); // If the code has changed from the default value we include it in the URL if (codeRef.current !== defaultInitialCode) url.searchParams.set('code', compressedCode); navigator.clipboard .writeText(url.toString()) .then(() => toast.show('Share link copied to clipboard')); } catch (error) { toast.show('Failed to copy share link'); } }, [defaultInitialCode, toast]); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.code === 'KeyS' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); format(codeRef.current, prettierOptions).then(handleCodeChange); } }; document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, [handleCodeChange]); return ( Loading...}>{previewComponent} ); }); ================================================ FILE: apps/docs/src/components/page/ShareablePlayground/styles.module.css ================================================ /* If you update these styles make sure to also change apps/docs/src/theme/CodeBlock/Content/styles.module.css */ .playgroundEditor pre { white-space: pre !important; padding: var(--space-2) !important; scrollbar-width: thin; background-color: transparent !important; border-radius: 0 !important; color: var(--color-fg) !important; font-family: var(--fontFamilyMono-label2) !important; font-size: var(--fontSize-label2) !important; font-weight: var(--fontWeight-label2) !important; } ================================================ FILE: apps/docs/src/components/page/SheetTabs/index.tsx ================================================ import React, { useCallback } from 'react'; import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext'; import type { TabValue } from '@coinbase/cds-common/tabs/useTabs'; import { Box } from '@coinbase/cds-web/layout'; import type { TabsActiveIndicatorProps } from '@coinbase/cds-web/tabs'; import { TabsActiveIndicator } from '@coinbase/cds-web/tabs'; import type { TabsProps as CDSTabsProps } from '@coinbase/cds-web/tabs/Tabs'; import { Tabs as CDSTabs } from '@coinbase/cds-web/tabs/Tabs'; import { Text } from '@coinbase/cds-web/typography'; const CustomTab = ({ id, label }: TabValue) => { const { activeTab, updateActiveTab } = useTabsContext(); const isActive = activeTab?.id === id; const handleClick = useCallback(() => updateActiveTab(id), [id, updateActiveTab]); return ( {label} ); }; const CustomTabsActiveIndicator = (props: TabsActiveIndicatorProps) => ( ); export const SheetTabs = ( props: Omit, ) => ( ); ================================================ FILE: apps/docs/src/components/page/StylesExplorer/index.tsx ================================================ import { memo, type ReactNode, useCallback, useMemo, useState } from 'react'; import { ListCell } from '@coinbase/cds-web/cells/ListCell'; import { Box } from '@coinbase/cds-web/layout/Box'; import { Divider } from '@coinbase/cds-web/layout/Divider'; import { VStack } from '@coinbase/cds-web/layout/VStack'; import { Text } from '@coinbase/cds-web/typography/Text'; import type { StyleSelector } from '@coinbase/docusaurus-plugin-docgen/types'; import styles from './styles.module.css'; export type StylesExplorerProps = { selectors: StyleSelector[]; children: (classNames: Record) => ReactNode; }; export const StylesExplorer = memo(({ selectors, children }: StylesExplorerProps) => { const [activeSelector, setActiveSelector] = useState(null); const [hoveredSelector, setHoveredSelector] = useState(null); const handleSelectorClick = useCallback((selector: string) => { setActiveSelector((prev) => (prev === selector ? null : selector)); }, []); const handleSelectorHover = useCallback((selector: string | null) => { setHoveredSelector(selector); }, []); const displayedSelector = hoveredSelector ?? activeSelector; const appliedClassNames = useMemo(() => { if (!displayedSelector) return {}; return { [displayedSelector]: styles.highlight }; }, [displayedSelector]); return ( {children(appliedClassNames)} Component Styles Choose a selector to highlight the corresponding element {selectors.map((selector) => ( handleSelectorClick(selector.selector)} onMouseEnter={() => handleSelectorHover(selector.selector)} onMouseLeave={() => handleSelectorHover(null)} selected={activeSelector === selector.selector} spacingVariant="condensed" title={selector.selector} /> ))} ); }); ================================================ FILE: apps/docs/src/components/page/StylesExplorer/styles.module.css ================================================ .highlight { box-shadow: inset 0 0 0 2px rgb(var(--red40)); background-color: rgba(var(--red40), 0.1); } /* SVG elements: use stroke since box-shadow doesn't work */ :global(svg) .highlight { stroke: rgb(var(--red40)) !important; stroke-width: 2; } ================================================ FILE: apps/docs/src/components/page/TemplateCard/index.tsx ================================================ import React from 'react'; import { Icon } from '@coinbase/cds-web/icons'; import { HStack, VStack } from '@coinbase/cds-web/layout'; import { Text } from '@coinbase/cds-web/typography'; import Link from '@docusaurus/Link'; import styles from './styles.module.css'; export type TemplateCardProps = { /** Name of the template/framework (optional if logo includes text) */ name?: string; /** Description of the template */ description: string; /** GitHub URL for the template */ href: string; /** Icon or logo React node */ icon: React.ReactNode; }; export const TemplateCard = ({ name, description, href, icon }: TemplateCardProps) => { return ( {icon} {name && ( {name} )} {description} ); }; ================================================ FILE: apps/docs/src/components/page/TemplateCard/styles.module.css ================================================ .cardWrapper { transition: background-color ease-out 200ms; } .cardWrapper:hover, .cardWrapper:active, .cardWrapper:focus { background-color: rgb(var(--gray0)); } ================================================ FILE: apps/docs/src/components/page/VersionLabel/index.tsx ================================================ import { Box, type BoxDefaultElement, type BoxProps } from '@coinbase/cds-web/layout/Box'; import { Text } from '@coinbase/cds-web/typography/Text'; import { useCDSVersions } from '@site/src/hooks/useCDSVersions'; export type VersionLabelProps = Omit, 'children'> & { packageName: string; }; export const VersionLabel = ({ packageName, position = 'relative', background = 'bgSecondary', borderRadius = 700, font = 'label1', ...props }: VersionLabelProps) => { const versions = useCDSVersions(); let version = null; switch (packageName) { case '@coinbase/cds-common': case '@coinbase/cds-web': case '@coinbase/cds-mobile': version = versions.cdsCommonVersion; break; case '@coinbase/cds-icons': version = versions.cdsIconsVersion; break; case '@coinbase/cds-illustrations': version = versions.cdsIllustrationsVersion; break; case '@coinbase/cds-web-visualization': version = versions.cdsWebVisualizationVersion; break; case '@coinbase/cds-mobile-visualization': version = versions.cdsMobileVisualizationVersion; break; default: throw new Error(`VersionLabel received invalid "packageName" prop: ${packageName}`); } return ( {packageName}@{version} ); }; ================================================ FILE: apps/docs/src/components/page/VersionLabel/styles.module.css ================================================ ================================================ FILE: apps/docs/src/constants/index.ts ================================================ import type { ThemeConfig } from '@coinbase/cds-web/core/theme'; import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme'; export const DESKTOP_BREAKPOINT = 1280; export const docsTheme = { ...defaultTheme, lightColor: { ...defaultTheme.lightColor, bgAlternate: `rgb(${defaultTheme.lightSpectrum.gray5})`, // instead of gray10 }, darkColor: { ...defaultTheme.darkColor, bg: `rgb(${defaultTheme.darkSpectrum.gray10})`, // instead of gray0 bgSecondary: `rgb(${defaultTheme.darkSpectrum.gray20})`, // instead of gray15 }, } as const satisfies ThemeConfig; ================================================ FILE: apps/docs/src/css/custom.css ================================================ /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #3578e5; --ifm-color-primary-dark: #2f6cd1; --ifm-color-primary-darker: #295fbd; --ifm-color-primary-darkest: #234aa9; --ifm-color-primary-light: #3d84f0; --ifm-color-primary-lighter: #468ffb; --ifm-color-primary-lightest: #509aff; --ifm-code-font-size: 95%; --ifm-hr-height: unset; --ifm-navbar-sidebar-width: 240px; --ifm-link-hover-decoration: none; --ifm-list-item-margin: unset; --docusaurus-highlighted-code-line-bg: #fff; --default-text-color: rgb(10, 11, 13); /* left sidebar */ --zIndex-portal: 100001; --table-of-content-width: 230px; } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { --ifm-color-primary: #3578e5; --ifm-color-primary-dark: #2f6cd1; --ifm-color-primary-darker: #295fbd; --ifm-color-primary-darkest: #234aa9; --ifm-color-primary-light: #3d84f0; --ifm-color-primary-lighter: #468ffb; --ifm-color-primary-lightest: #509aff; --docusaurus-highlighted-code-line-bg: #32353d; --default-text-color: rgb(255, 255, 255); } /* Docusaurus-specific utility class */ .docusaurus-mt-lg { margin-top: 3rem; } #__docusaurus { min-height: 100%; display: flex; flex-direction: column; } html { color: var(--default-text-color); } body { font-style: normal; font-weight: 400; } code { font-size: 90%; color: var(--color-fg); background-color: var(--color-bgSecondary); } .navbar { padding: 0; height: auto; background-color: var(--color-bg); box-shadow: none; } .navbar-sidebar { background-color: var(--color-bg); } .navbar__logo { width: var(--space-5); height: var(--space-5); } /** * Hide breadcrumbs navigation */ /* stylelint-disable-next-line a11y/no-display-none -- this one is okay */ .theme-doc-breadcrumbs { display: none; } /** * Hide pagination navigation */ /* stylelint-disable-next-line a11y/no-display-none -- this one is okay */ .pagination-nav { display: none; } .menu__link { padding: var(--space-1) var(--space-2); } .menu__link:hover { background: none; transition: none; } .menu__link--active:not(.menu__link--sublist) { background: none; } .menu__list-item:not(:first-child) { margin-top: 0; } a, a:hover, a:active, a:focus-visible { color: var(--color-fgPrimary); text-decoration: none; } table { width: 100%; display: table; color: var(--color-fg); min-width: auto; word-break: break-word; border-collapse: separate; border-spacing: 0; } table tr { border-bottom: none; color: var(--color-fg); } table thead tr { border-bottom: none; color: var(--color-fg); } table th, table td { padding: var(--space-2); border-left: none; border-right: 1px solid var(--color-bgLine); border-bottom: 1px solid var(--color-bgLine); text-align: left; } table td { vertical-align: top; border-top: none; } table th { border-top: 1px solid var(--color-bgLine); } table thead th { background-color: rgb(var(--gray10)); } table th:first-child, table td:first-child { border-left: 1px solid var(--color-bgLine); } table thead tr th:first-child { border-top-left-radius: var(--borderRadius-400); } table thead tr th:last-child { border-top-right-radius: var(--borderRadius-400); } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--borderRadius-400); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--borderRadius-400); } /* Remove background color from table rows */ table tr:nth-child(even), table tr:nth-child(odd) { background-color: transparent; } p, h1, h2, h3, h4, h5, h6, li { color: var(--color-fg); } .table-of-contents, .table-of-contents ul { display: flex; flex-direction: column; padding: 0 var(--space-0_5); gap: var(--space-1_5); } .table-of-contents ul { padding-left: var(--space-1); padding-right: 0; border-left: var(--borderWidth-100) solid var(--color-bgLine); } .table-of-contents li { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .table-of-contents__left-border { border-left: none; } .jsonCodeBlock { height: 340px; overflow: scroll !important; border-radius: var(--borderRadius-400); background: var(--color-bg); @media (min-width: 997px) { height: 460px; } } /* override the weird margin-bottom on the first h1 applied by docusaurus */ .markdown h1:first-child { margin-bottom: 0; } ================================================ FILE: apps/docs/src/data/v9Deprecations.tsx ================================================ import type { DeprecationTableRow } from '@site/src/components/page/DeprecationTable'; export const componentDeprecations: DeprecationTableRow[] = [ { packages: ['web', 'mobile'], deprecated: <>AvatarButton border props, notes: <>Border-related props have no effect; remove them., }, { packages: ['web', 'mobile'], deprecated: <>IconCounterButton.dangerouslySetColor, notes: ( <> Use styles.icon, classNames.icon, or color on web. Use styles.icon or color on mobile. ), }, { packages: ['web', 'mobile'], deprecated: <>Spinner, notes: ( <> Prefer indeterminate ProgressCircle and ActivityIndicator on mobile where documented. ), }, { packages: ['web', 'mobile'], deprecated: <>Stepper.progressSpringConfig / Stepper.defaultProgressSpringConfig, notes: ( <> Use progressTimingConfig / defaultProgressTimingConfig. ), }, { packages: ['web', 'mobile'], deprecated: <>Text.dangerouslySetColor, notes: ( <> Use style, className, or color on web. Use{' '} style or the color style prop on mobile. ), }, { packages: ['web', 'mobile'], deprecated: ( <> TextBody, TextCaption, TextDisplay*, TextHeadline, TextInherited, TextLabel*, TextLegal, TextTitle* ), notes: ( <> Use Text with the matching font. ), }, { packages: ['mobile'], deprecated: <>DefaultSlideButtonHandle.animationConfig, notes: ( <> Use slideButtonSpringConfig with Reanimated withSpring. ), }, ]; export const hookFunctionDeprecations: DeprecationTableRow[] = [ { packages: ['common'], deprecated: <>getButtonSpacingProps, notes: ( <> Going away without a built-in replacement. Handle button spacing locally or with your own helper. ), }, { packages: ['common'], deprecated: <>getDotSize, notes: <>Fixed pixel sizing for dots is no longer provided as a shared helper., }, { packages: ['common'], deprecated: <>useMergeRefs, notes: ( <> Use mergeRefs from @coinbase/cds-common/utils/mergeRefs. Automated by migrate-use-merge-refs-import. ), }, { packages: ['web'], deprecated: <>usePopper, notes: ( <> Temporary compatibility shim. Use Floating UI directly in your app if you still need popper-like positioning. ), }, { packages: ['mobile'], deprecated: <>useStatusBarHeight, notes: ( <> Use useSafeAreaInsets().top from react-native-safe-area-context. ), }, { packages: ['mobile'], deprecated: <>useHasNotch, notes: ( <> Replace with useSafeAreaInsets().top > 20 from{' '} react-native-safe-area-context if you need an equivalent. ), }, ]; export const tokenConstantDeprecations: DeprecationTableRow[] = [ { packages: ['common'], deprecated: ( <> [tokens/cell] compactListHeight, listHeight, selectOptionHeight ), notes: <>Define your own values or rely on layout-driven sizing., }, { packages: ['common'], deprecated: ( <> [tokens/dot] dotSizeTokens ), notes: <>Define your own values or rely on layout-driven sizing., }, ]; export const typeDeprecations: DeprecationTableRow[] = [ { packages: ['mobile'], deprecated: <>MobileBannerProps, notes: ( <> Use BannerProps. ), }, { packages: ['common'], deprecated: ( <> [types/BoxBaseProps] PositionStyles ), notes: ( <> Prefer PositionStyles from mobile styleProps or web{' '} styleProps where the guidance applies. ), }, { packages: ['common'], deprecated: <>CardHeaderProps, notes: ( <> Use ContentCardHeaderProps for content cards. ), }, { packages: ['common'], deprecated: <>CardMediaProps, notes: ( <> Use SpotSquare, Pictogram, or RemoteImage by type, per JSDoc. ), }, { packages: ['common'], deprecated: <>DimensionStyles value types, notes: ( <> Prefer dimension props with 'auto' | number | string. ), }, { packages: ['common'], deprecated: ( <> [types/Position] Position ), notes: ( <> Use CSSProperties['position'] on web or{' '} ViewStyle['position'] on React Native. ), }, ]; ================================================ FILE: apps/docs/src/hooks/useCDSVersions.ts ================================================ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; /** Returns the CDS package versions which are defined in the docusaurus.config.ts file. */ export const useCDSVersions = () => { const { siteConfig } = useDocusaurusContext(); const { cdsCommonVersion, cdsIconsVersion, cdsIllustrationsVersion, cdsMobileVisualizationVersion, cdsWebVisualizationVersion, } = siteConfig.customFields ?? {}; if (typeof cdsCommonVersion !== 'string') throw Error( 'The "cdsCommonVersion" string is not defined in docusaurus.config.ts "customFields"', ); if (typeof cdsIconsVersion !== 'string') throw Error( 'The "cdsIconsVersion" string is not defined in docusaurus.config.ts "customFields"', ); if (typeof cdsIllustrationsVersion !== 'string') throw Error( 'The "cdsIllustrationsVersion" string is not defined in docusaurus.config.ts "customFields"', ); if (typeof cdsMobileVisualizationVersion !== 'string') throw Error( 'The "cdsMobileVisualizationVersion" string is not defined in docusaurus.config.ts "customFields"', ); if (typeof cdsWebVisualizationVersion !== 'string') throw Error( 'The "cdsWebVisualizationVersion" string is not defined in docusaurus.config.ts "customFields"', ); return { cdsCommonVersion, cdsIconsVersion, cdsIllustrationsVersion, cdsMobileVisualizationVersion, cdsWebVisualizationVersion, }; }; ================================================ FILE: apps/docs/src/hooks/useInternalCDSTheme.ts ================================================ import { useEffect } from 'react'; const postMessageType = 'GET_INTERNAL_CDS_THEME_FROM_EXTENSION'; export const useInternalCDSTheme = () => { useEffect(() => { // request the theme from the extension upon mount window.postMessage({ type: postMessageType }, '*'); }, []); }; ================================================ FILE: apps/docs/src/theme/Admonition/index.tsx ================================================ import React, { useMemo } from 'react'; import type { BannerProps } from '@coinbase/cds-web/banner/Banner'; import { Banner } from '@coinbase/cds-web/banner/Banner'; import { processAdmonitionProps } from '@docusaurus/theme-common'; import type { Props } from '@theme/Admonition'; import styles from './styles.module.css'; export default function Admonition(unprocessedProps: Props): React.ReactNode { const props = processAdmonitionProps(unprocessedProps); const { title, children, type } = props; const bannerProps: Pick = useMemo(() => { switch (type) { case 'warning': return { variant: 'warning', title: title ?? 'Warning', children, startIcon: 'warning', borderWidth: 100, borderColor: 'bgWarning', }; case 'danger': return { variant: 'error', title: title ?? 'Danger', children, startIcon: 'error', borderWidth: 100, borderColor: 'bgNegative', }; case 'tip': return { variant: 'promotional', title: title ?? 'Tip', children, startIcon: 'info', borderWidth: 100, borderColor: 'bgPrimary', }; case 'note': default: return { variant: 'informational', title: title ?? 'Note', children, startIcon: 'info', borderWidth: 100, borderColor: 'bgLine', }; } }, [title, children, type]); return ; } ================================================ FILE: apps/docs/src/theme/Admonition/styles.module.css ================================================ .docsAdmonition { margin-bottom: var(--space-2); p:last-child { margin-bottom: 0; } } ================================================ FILE: apps/docs/src/theme/AnnouncementBar/CloseButton/index.tsx ================================================ import { type ReactNode } from 'react'; import { IconButton } from '@coinbase/cds-web/buttons'; import { translate } from '@docusaurus/Translate'; import type { Props } from '@theme/AnnouncementBar/CloseButton'; export default function AnnouncementBarCloseButton({ onClick }: Props): ReactNode { return ( ); } ================================================ FILE: apps/docs/src/theme/AnnouncementBar/Content/index.tsx ================================================ import { type ReactNode } from 'react'; import { Text } from '@coinbase/cds-web/typography'; import { useThemeConfig } from '@docusaurus/theme-common'; import styles from './styles.module.css'; export default function AnnouncementBarContent(): ReactNode { const { announcementBar } = useThemeConfig(); const { content } = announcementBar!; return ( ); } ================================================ FILE: apps/docs/src/theme/AnnouncementBar/Content/styles.module.css ================================================ .content a { color: var(--color-fgPrimary); } ================================================ FILE: apps/docs/src/theme/AnnouncementBar/index.tsx ================================================ import React, { type ReactNode } from 'react'; import { HStack } from '@coinbase/cds-web/layout'; import { useThemeConfig } from '@docusaurus/theme-common'; import { useAnnouncementBar } from '@docusaurus/theme-common/internal'; import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton'; import AnnouncementBarContent from '@theme/AnnouncementBar/Content'; export default function AnnouncementBar(): ReactNode { const { announcementBar } = useThemeConfig(); const { isActive, close } = useAnnouncementBar(); if (!isActive) { return null; } const { backgroundColor = 'rgb(var(--purple20))', textColor, isCloseable } = announcementBar!; return ( {isCloseable && } ); } ================================================ FILE: apps/docs/src/theme/CodeBlock/Content/Element.tsx ================================================ import React, { type ReactNode } from 'react'; import { cx } from '@coinbase/cds-web'; import { Box } from '@coinbase/cds-web/layout'; import { Text } from '@coinbase/cds-web/typography'; import type { Props } from '@theme/CodeBlock/Content/Element'; // 
     tags in markdown map to CodeBlocks. They may contain JSX children. When
// the children is not a simple string, we just return a styled block without
// actually highlighting.
export default function CodeBlockJSX({ children, className }: Props): ReactNode {
  return (
    
      
        {children}
      
    
  );
}


================================================
FILE: apps/docs/src/theme/CodeBlock/Content/String.tsx
================================================
import React, { type ReactNode } from 'react';
import { cx } from '@coinbase/cds-web';
import { Box, Divider, HStack, VStack } from '@coinbase/cds-web/layout';
import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
import { Text } from '@coinbase/cds-web/typography';
import { useThemeConfig } from '@docusaurus/theme-common';
import {
  containsLineNumbers,
  parseCodeBlockTitle,
  parseLanguage,
  parseLines,
} from '@docusaurus/theme-common/internal';
import type { Props } from '@theme/CodeBlock/Content/String';
import CopyButton from '@theme/CodeBlock/CopyButton';
import Line from '@theme/CodeBlock/Line';
import { Highlight } from 'prism-react-renderer';

import { usePlaygroundTheme } from '../../Layout/Provider/UnifiedThemeContext';

import styles from './styles.module.css';

// Prism languages are always lowercase
// We want to fail-safe and allow both "php" and "PHP"
// See https://github.com/facebook/docusaurus/issues/9012
function normalizeLanguage(language: string | undefined): string | undefined {
  return language?.toLowerCase();
}

export default function CodeBlockString({
  children,
  className: blockClassName = '',
  metastring,
  title: titleProp,
  showLineNumbers: showLineNumbersProp,
  language: languageProp,
}: Props): ReactNode {
  const {
    prism: { defaultLanguage, magicComments },
  } = useThemeConfig();
  const language = normalizeLanguage(
    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage,
  );

  const { colorScheme, theme, prismTheme } = usePlaygroundTheme();

  // We still parse the metastring in case we want to support more syntax in the
  // future. Note that MDX doesn't strip quotes when parsing metastring:
  // "title=\"xyz\"" => title: "\"xyz\""
  const title = parseCodeBlockTitle(metastring) || titleProp;

  const { lineClassNames, code } = parseLines(children, {
    metastring,
    language,
    magicComments,
  });
  const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring);

  return (
    
      
        {title && (
          
            {title}
            
              
            
          
        )}
        {title && }
        
          
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
              
                
                  {tokens.map((line, index) => (
                    
                  ))}
                
              
            )}
          
          {!title && (
            
              
            
          )}
        
      
    
  );
}


================================================
FILE: apps/docs/src/theme/CodeBlock/Content/styles.module.css
================================================
.codeBlock {
  margin-bottom: var(--space-3);
}

.codeBlockContent {
  /* rtl:ignore */
  direction: ltr;
  overflow: hidden;
}

/* If you update these styles make sure to also change apps/docs/src/theme/Playground/styles.module.css */
.codeBlockContent pre {
  width: 100%;
  white-space: pre !important;
  scrollbar-width: thin;
  background-color: transparent !important;
  color: var(--color-fg) !important;
  font-family: var(--fontFamilyMono-label2) !important;
  font-size: var(--fontSize-label2) !important;
  font-weight: var(--fontWeight-label2) !important;
}

.codeBlockLines {
  float: left;
}

@media print {
  .codeBlockLines {
    white-space: pre-wrap;
  }
}

.buttonGroup button {
  transition: opacity var(--ifm-transition-fast) ease-in-out;
  opacity: 0;
}

.codeBlock:hover .buttonGroup button {
  opacity: 0.4;
}

.codeBlock:hover .buttonGroup button:hover,
.codeBlock:focus-within .buttonGroup button:focus-visible {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .codeBlock {
    margin-bottom: var(--space-2);
  }

  .buttonGroup button {
    opacity: 1;
  }
}


================================================
FILE: apps/docs/src/theme/CodeBlock/CopyButton/index.tsx
================================================
import React, { type ReactNode, useCallback } from 'react';
import { IconButton } from '@coinbase/cds-web/buttons/IconButton';
import { Tooltip } from '@coinbase/cds-web/overlays/tooltip/Tooltip';
import { useToast } from '@coinbase/cds-web/overlays/useToast';
import { translate } from '@docusaurus/Translate';
import type { Props } from '@theme/CodeBlock/CopyButton';

async function copyTextToClipboard(text: string): Promise {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (error) {
      console.error(error);
      return false;
    }
  }
  return false;
}

export default function CopyButton({ code }: Props): ReactNode {
  const toast = useToast();
  const handleCopyCode = useCallback(async () => {
    const success = await copyTextToClipboard(code);
    if (success) {
      toast.show(
        translate({
          id: 'theme.CodeBlock.copied',
          message: 'Copied',
          description: 'The copied button label on code blocks',
        }),
      );
    }
  }, [code, toast]);

  return (
    
      
    
  );
}


================================================
FILE: apps/docs/src/theme/DocItem/Layout/index.tsx
================================================
import { useMemo } from 'react';
import { VStack } from '@coinbase/cds-web/layout';
import type { DocFrontMatter } from '@docusaurus/plugin-content-docs';
import { useDoc } from '@docusaurus/plugin-content-docs/client';
import { useWindowSize } from '@docusaurus/theme-common';
import { FeedbackWidget } from '@site/src/components/FeedbackWidget';
import { PlatformSwitcher } from '@site/src/components/page/PlatformSwitcher';
import { PlatformContextProvider } from '@site/src/utils/PlatformContext';
import { usePropsTOC } from '@site/src/utils/toc/PropsTOCManager';
import { useTOC } from '@site/src/utils/toc/TOCManager';
import ContentVisibility from '@theme/ContentVisibility';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import DocItemContent from '@theme/DocItem/Content';
import DocItemFooter from '@theme/DocItem/Footer';
import type { Props } from '@theme/DocItem/Layout';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocVersionBadge from '@theme/DocVersionBadge';
import DocVersionBanner from '@theme/DocVersionBanner';
import Footer from '@theme/Footer';

type DocFrontMatterExtended = DocFrontMatter & {
  platform_switcher_options?: { web: boolean; mobile: boolean };
};

export default function DocItemLayout({ children }: Props): JSX.Element {
  const { frontMatter, toc, metadata } = useDoc();
  const { items: propsTocItems = [] } = usePropsTOC();
  const { items: tocItems = [] } = useTOC();
  const updatedTocItems = useMemo(
    () => [...toc, ...tocItems, ...propsTocItems],
    [toc, tocItems, propsTocItems],
  );
  const typedFrontMatter = frontMatter as DocFrontMatterExtended;

  const windowSize = useWindowSize({ desktopBreakpoint: 1280 });
  const isDesktop = windowSize === 'desktop' || windowSize === 'ssr';
  const isMobile = windowSize === 'mobile';

  const shouldRenderToc = !frontMatter.hide_table_of_contents && updatedTocItems.length > 0;
  const shouldRenderPlatformSwitcher =
    typedFrontMatter.platform_switcher_options?.mobile ||
    typedFrontMatter.platform_switcher_options?.web ||
    false;

  const contentMaxWidth = useMemo(
    () => ({
      desktop:
        (shouldRenderPlatformSwitcher || shouldRenderToc) && isDesktop
          ? `calc(100% - var(--table-of-content-width) - 2.5rem)`
          : '100%',
      base: '100%',
    }),
    [isDesktop, shouldRenderPlatformSwitcher, shouldRenderToc],
  );
  return (
    
      
        
        
        
          
            
              
              
              {isMobile && shouldRenderPlatformSwitcher && }
              {children}