@coinbase/ui-mobile-playground 4.8.0 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/__generated__/iconSvgMap.d.ts.map +1 -1
  3. package/dts/routes.d.ts.map +1 -1
  4. package/esm/__generated__/iconSvgMap.js +1 -1
  5. package/esm/routes.js +8 -2
  6. package/package.json +4 -4
  7. package/src/__generated__/iconSvgMap.ts +18 -0
  8. package/src/routes.ts +13 -2
package/esm/routes.js CHANGED
@@ -87,8 +87,8 @@ export const routes = [{
87
87
  key: 'CartesianChart',
88
88
  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories').default
89
89
  }, {
90
- key: 'Chart',
91
- getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default
90
+ key: 'ChartTransitions',
91
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartTransitions.stories').default
92
92
  }, {
93
93
  key: 'Checkbox',
94
94
  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default
@@ -152,6 +152,9 @@ export const routes = [{
152
152
  }, {
153
153
  key: 'DrawerMisc',
154
154
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/DrawerMisc.stories').default
155
+ }, {
156
+ key: 'DrawerReduceMotion',
157
+ getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/DrawerReduceMotion.stories').default
155
158
  }, {
156
159
  key: 'DrawerRight',
157
160
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/DrawerRight.stories').default
@@ -515,6 +518,9 @@ export const routes = [{
515
518
  }, {
516
519
  key: 'TrayRedesign',
517
520
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/TrayRedesign.stories').default
521
+ }, {
522
+ key: 'TrayReduceMotion',
523
+ getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/TrayReduceMotion.stories').default
518
524
  }, {
519
525
  key: 'TrayScrollable',
520
526
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/TrayScrollable.stories').default
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/ui-mobile-playground",
3
- "version": "4.8.0",
3
+ "version": "4.10.0",
4
4
  "description": "Mobile UI Components in a Playground",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,9 +34,9 @@
34
34
  "CHANGELOG"
35
35
  ],
36
36
  "peerDependencies": {
37
- "@coinbase/cds-common": "^8.44.0",
38
- "@coinbase/cds-mobile": "^8.44.0",
39
- "@coinbase/cds-mobile-visualization": "^3.4.0-beta.18",
37
+ "@coinbase/cds-common": "^8.51.0",
38
+ "@coinbase/cds-mobile": "^8.51.0",
39
+ "@coinbase/cds-mobile-visualization": "^3.4.0-beta.22",
40
40
  "@react-navigation/elements": "^1.3.17",
41
41
  "@react-navigation/native": "^6.1.6",
42
42
  "@react-navigation/stack": "^6.3.16",
package/src/__generated__/iconSvgMap.ts CHANGED
@@ -1405,6 +1405,12 @@ export const svgMap: Record<string, SvgMapEntry> = {
1405
1405
  'filter-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M4.654 1.997H3.321v1.2H.99v1.6h2.33v1.199h1.333v-1.2H14.99v-1.6H4.654zm-3.665 6.8H9.32v1.198h1.333V8.797h4.336v-1.6h-4.336V5.995H9.32v1.202H.99zm4.332 4H.989v-1.6H5.32V9.995h1.333v1.202h8.335v1.6H6.654v1.197H5.321z\"/></svg>" },
1406
1406
  'filter-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M7.989 2.995h-3v1.8h-3v2.4h3v1.8h3v-1.8h14v-2.4h-14zm-6 7.8v2.4h12v1.8h3v-1.8h5v-2.4h-5v-1.8h-3v1.8zm6 10.2v-1.8h-6v-2.4h6v-1.8h3v1.8h11v2.4h-11v1.8z\"/></svg>" },
1407
1407
  'filter-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M6.989 2.995h-2v2h-3v2h3v2h2v-2h15v-2h-15zm-5 10h12v2h2v-2h6v-2h-6v-2h-2v2h-12zm6 4h-6v2h6v2h2v-2h12v-2h-12v-2h-2z\"/></svg>" },
1408
+ 'filterLineStack-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M4.5 7.9v1.6h3V7.9zm-2-.9h7V5.4h-7zm-1-2.5h9V2.9h-9z\"/></svg>" },
1409
+ 'filterLineStack-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M4.5 8v1.2h3V8zm-2-1.3h7V5.5h-7zm-1-2.5h9V3h-9z\"/></svg>" },
1410
+ 'filterLineStack-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M6 10.667v2h4v-2zM3.333 9.333h9.333v-2H3.333zM2 6h12V4H2z\"/></svg>" },
1411
+ 'filterLineStack-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M6 10.666v1.6h4v-1.6zM3.333 7.333v1.6h9.334v-1.6zM2 4v1.6h12V4z\"/></svg>" },
1412
+ 'filterLineStack-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M9 16v3h6v-3zm-4-2h14v-3H5zM3 9h18V6H3z\"/></svg>" },
1413
+ 'filterLineStack-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M9 16v2h6v-2zm-4-3h14v-2H5zM3 8h18V6H3z\"/></svg>" },
1408
1414
  'fingerprint-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M6.026 2.259c-1.862 0-3.37 1.528-3.37 3.416a.75.75 0 0 1-.746.757.75.75 0 0 1-.747-.757c0-2.724 2.176-4.93 4.863-4.93.838 0 1.628.215 2.319.598.362.2.494.66.297 1.027a.74.74 0 0 1-1.014.3 3.3 3.3 0 0 0-1.602-.411m4.141.833a.74.74 0 0 0-1.035-.213.763.763 0 0 0-.21 1.05c.49.747.706 1.721.49 2.73a.757.757 0 0 0 .571.9c.403.09.8-.17.888-.578.304-1.42 0-2.81-.704-3.89\"/><path fill=\"#0A0B0D\" d=\"M7.469 5.912c0-1.334-1.532-1.993-2.42-1.176a.74.74 0 0 1-1.054-.05.764.764 0 0 1 .05-1.07c1.946-1.793 4.917-.214 4.917 2.296a7.36 7.36 0 0 1-2.05 5.106.74.74 0 0 1-1.055.011.764.764 0 0 1-.011-1.07 5.84 5.84 0 0 0 1.623-4.047\"/><path fill=\"#0A0B0D\" d=\"M6.026 5.06a.75.75 0 0 1 .746.756c0 2.603-1.66 4.27-3.512 5.23a.74.74 0 0 1-1.005-.33.76.76 0 0 1 .326-1.018c1.576-.816 2.698-2.063 2.698-3.882 0-.418.335-.757.747-.757\"/><path fill=\"#0A0B0D\" d=\"M4.581 5.867c.018-.422-.311-.808-.745-.808a.75.75 0 0 0-.747.745c0 .01-.003.06-.018.137a1.8 1.8 0 0 1-.162.463c-.182.359-.57.854-1.448 1.206a.76.76 0 0 0-.42.982c.152.389.586.58.97.425 1.221-.49 1.883-1.244 2.226-1.923a3.3 3.3 0 0 0 .298-.86 3 3 0 0 0 .046-.367\"/></svg>" },
1409
1415
  'fingerprint-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M6.025 2.183c-1.904 0-3.446 1.565-3.446 3.498a.59.59 0 0 1-.585.594.59.59 0 0 1-.584-.594c0-2.59 2.065-4.686 4.615-4.686.796 0 1.546.204 2.2.568a.6.6 0 0 1 .233.806.58.58 0 0 1-.794.236 3.36 3.36 0 0 0-1.64-.422M9.958 3.23a.58.58 0 0 0-.81-.167.6.6 0 0 0-.165.823c.5.766.721 1.762.5 2.792a.594.594 0 0 0 .448.706.585.585 0 0 0 .696-.454c.29-1.352 0-2.675-.669-3.7\"/><path fill=\"#0A0B0D\" d=\"M7.584 5.913c0-1.423-1.64-2.16-2.613-1.262a.58.58 0 0 1-.826-.04.6.6 0 0 1 .039-.839c1.802-1.663 4.57-.204 4.57 2.141a7.08 7.08 0 0 1-1.965 4.904.58.58 0 0 1-.827.009.6.6 0 0 1-.01-.84 5.88 5.88 0 0 0 1.632-4.073\"/><path fill=\"#0A0B0D\" d=\"M6.025 5.226a.59.59 0 0 1 .584.594c0 2.475-1.572 4.07-3.36 4.996a.58.58 0 0 1-.786-.258.6.6 0 0 1 .254-.8C4.288 8.945 5.44 7.68 5.44 5.82a.59.59 0 0 1 .585-.594m-1.566.717.005-.08c.014-.332-.24-.637-.584-.637a.59.59 0 0 0-.584.587c0 .01-.004.068-.021.158-.024.12-.072.295-.172.492-.194.384-.6.895-1.494 1.254a.597.597 0 0 0-.33.77.58.58 0 0 0 .76.334c1.163-.467 1.784-1.181 2.105-1.816a3 3 0 0 0 .278-.804q.029-.159.037-.258\"/></svg>" },
1410
1416
  'fingerprint-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M8.039 3.015a4.55 4.55 0 0 0-4.547 4.553 1.01 1.01 0 1 1-2.018 0A6.566 6.566 0 0 1 8.04.995c1.132 0 2.199.286 3.13.797a1.01 1.01 0 0 1-.967 1.772 4.5 4.5 0 0 0-2.163-.549m5.589 1.109a1.008 1.008 0 1 0-1.682 1.116c.66.997.953 2.295.662 3.64a1.01 1.01 0 0 0 1.97.43 6.77 6.77 0 0 0-.95-5.186\"/><path fill=\"#0A0B0D\" d=\"M9.986 7.884c0-1.777-2.068-2.656-3.264-1.566a1.01 1.01 0 0 1-1.425-.068 1.01 1.01 0 0 1 .068-1.427c2.627-2.392 6.638-.285 6.638 3.061a9.75 9.75 0 0 1-2.767 6.808 1.01 1.01 0 0 1-1.426.015 1.01 1.01 0 0 1-.015-1.428 7.73 7.73 0 0 0 2.19-5.395\"/><path fill=\"#0A0B0D\" d=\"M8.039 6.746a1.01 1.01 0 0 1 1.008 1.01c0 3.47-2.24 5.694-4.741 6.974a1.01 1.01 0 0 1-.918-1.799c2.128-1.088 3.642-2.75 3.642-5.175 0-.557.452-1.01 1.009-1.01\"/><path fill=\"#0A0B0D\" d=\"M6.028 8.315a4 4 0 0 0 .054-.372c.064-.73-.402-1.197-1-1.197-.597 0-.907.536-1.033 1.177-.03.148-.09.367-.218.616-.245.479-.77 1.138-1.954 1.608a1.01 1.01 0 0 0 .742 1.878c1.65-.654 2.543-1.659 3.007-2.564.227-.443.342-.846.402-1.146\"/></svg>" },
@@ -2221,6 +2227,12 @@ export const svgMap: Record<string, SvgMapEntry> = {
2221
2227
  'pieChartData-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" fill-rule=\"evenodd\" d=\"M7.478 2Q7.74 2 8 2.021V8.5h6c0 3.495-2.743 6.345-6.183 6.493l-.003-.004a6 6 0 0 1-.336.012C3.9 15 1 12.09 1 8.5S3.9 2 7.478 2M6.4 3.72a4.895 4.895 0 0 0-3.794 4.527L2.6 8.5c0 2.711 2.19 4.9 4.878 4.9.066 0 .142-.004.244-.01l.298-.017a4.88 4.88 0 0 0 4.114-3.274H6.4z\" clip-rule=\"evenodd\"/><path fill=\"#0A0B0D\" fill-rule=\"evenodd\" d=\"M9 1.5c3.369.302 6 2.873 6 6H9zm1.6 4.4h2.454c-.45-1.007-1.313-1.865-2.454-2.365z\" clip-rule=\"evenodd\"/></svg>" },
2222
2228
  'pieChartData-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M11.09 4q.462 0 .91.045V13h8c0 4.648-3.504 8.468-8 8.945v.01q-.449.044-.91.045C6.07 22 2 17.97 2 13s4.07-9 9.09-9\"/><path fill=\"#0A0B0D\" d=\"M14 2c4.492.454 8 4.31 8 9h-8z\"/></svg>" },
2223
2229
  'pieChartData-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" fill-rule=\"evenodd\" d=\"M11.09 4q.462 0 .91.045V13h8c0 4.648-3.504 8.468-8 8.945v.01q-.449.044-.91.045C6.07 22 2 17.97 2 13s4.07-9 9.09-9M10 6.082C6.588 6.601 4 9.516 4 13c0 3.847 3.156 7 7.09 7l.355-.01.073-.006.271-.028c2.813-.299 5.134-2.292 5.922-4.956H10z\" clip-rule=\"evenodd\"/><path fill=\"#0A0B0D\" fill-rule=\"evenodd\" d=\"M14 2c4.492.454 8 4.31 8 9h-8zm2 7h3.719A7.02 7.02 0 0 0 16 4.604z\" clip-rule=\"evenodd\"/></svg>" },
2230
+ 'pieChartWithArrow-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M5.546 2q.23 0 .454.022V6.5h4a4.49 4.49 0 0 1-4 4.473v.004Q5.776 11 5.546 11l-.234-.006-.09-.008V9.581a3 3 0 0 0 .493.014l.138-.015A3.08 3.08 0 0 0 8.269 7.9h-3.67V3.542a3.11 3.11 0 0 0-2.19 2.754H1.005C1.113 3.906 3.105 2 5.545 2\"/><path fill=\"#0A0B0D\" d=\"m4.59 8.185.494.495-2.038 2.04-.99-.988.351-.352H1v-1.4h1.407l-.351-.353.99-.99zM7 1c2.246.227 4 2.155 4 4.5H7z\"/></svg>" },
2231
+ 'pieChartWithArrow-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M5.546 2q.23 0 .454.022V6.5h4a4.49 4.49 0 0 1-4 4.473v.004Q5.776 11 5.546 11l-.234-.006-.09-.008V9.782a3.4 3.4 0 0 0 .505.012l.146-.015A3.28 3.28 0 0 0 8.576 7.7H4.8V3.282a3.314 3.314 0 0 0-2.591 3.014H1.005C1.113 3.906 3.105 2 5.545 2\"/><path fill=\"#0A0B0D\" d=\"m4.942 8.68-1.966 1.97-.85-.847.522-.524H1V8.08h1.648l-.522-.523.85-.848zM7 1c2.246.227 4 2.155 4 4.5H7zm1.2 3.3h1.381a3.3 3.3 0 0 0-1.38-1.661z\"/></svg>" },
2232
+ 'pieChartWithArrow-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M7.394 2.666q.307 0 .606.03v5.97h5.333c0 3.098-2.336 5.646-5.333 5.964v.006a6 6 0 0 1-1.036.014v-1.806q.211.021.43.022l.212-.006.03-.003.174-.017a4.17 4.17 0 0 0 3.32-2.373H6.2V4.634c-1.695.486-2.939 1.98-3.055 3.76H1.34c.144-3.187 2.8-5.728 6.054-5.728\"/><path fill=\"#0A0B0D\" d=\"m6.731 11.573-2.693 2.698L2.765 13l.526-.527h-1.99v-1.801h1.988l-.524-.526 1.273-1.272zm2.602-10.24c2.994.303 5.333 2.874 5.333 6H9.333z\"/></svg>" },
2233
+ 'pieChartWithArrow-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M7.394 2.666q.307 0 .606.03v5.97h5.333c0 3.098-2.336 5.646-5.333 5.964v.006a6 6 0 0 1-1.036.013v-1.603q.211.02.43.02l.222-.006.043-.003.172-.018a4.38 4.38 0 0 0 3.604-2.772H6.399v-5.89c-1.905.427-3.334 2.056-3.457 4.017H1.34c.144-3.187 2.8-5.728 6.054-5.728\"/><path fill=\"#0A0B0D\" d=\"m6.59 11.573-.564.565L3.968 14.2l-1.133-1.13.697-.699H1.301v-1.6h2.23l-.696-.697 1.133-1.13zm2.743-10.24c2.994.303 5.333 2.874 5.333 6H9.333zm1.6 4.4h1.842a4.42 4.42 0 0 0-1.842-2.218z\"/></svg>" },
2234
+ 'pieChartWithArrow-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M11.09 4q.462 0 .91.045V13h8c0 4.648-3.504 8.468-8 8.945v.01a9.3 9.3 0 0 1-1.555.022v-2.71q.32.032.646.033l.318-.008.04-.004.266-.027c2.2-.234 4.066-1.623 4.981-3.56H9.3V6.95c-2.542.73-4.41 2.97-4.585 5.64H2.01C2.227 7.81 6.209 4 11.09 4\"/><path fill=\"#0A0B0D\" d=\"m10.098 17.36-4.041 4.047-1.91-1.908.789-.79H1.95v-2.7h2.985l-.79-.79 1.91-1.907zM14 2c4.492.454 8 4.31 8 9h-8z\"/></svg>" },
2235
+ 'pieChartWithArrow-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M11.09 4q.462 0 .91.045V13h8c0 4.648-3.504 8.468-8 8.945v.01q-.449.044-.91.045a9 9 0 0 1-1.09-.067v-2.016q.534.082 1.09.083l.355-.01.073-.006.271-.028c2.813-.299 5.134-2.292 5.922-4.956H10V6.082c-3.277.498-5.793 3.208-5.986 6.509H2.01C2.227 7.81 6.209 4 11.09 4\"/><path fill=\"#0A0B0D\" d=\"m9.603 16.709-3.793 3.8-1.416-1.412 1.384-1.388H1.752v-2h4.026l-1.384-1.388 1.416-1.413zM14 2c4.492.454 8 4.31 8 9h-8zm2 7h3.719A7.02 7.02 0 0 0 16 4.604z\"/></svg>" },
2224
2236
  'pillBottle-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M9.998 4h-.995v1H6v4h3.003v1.999H3.012V4H2V1h7.998zM8.8 6.2v1.6H7.2V6.2z\"/></svg>" },
2225
2237
  'pillBottle-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M9.998 4.5h-.995v6.499H3.012V4.5H2V1h7.998zm-5.786 0v5.3h3.59V8.78h-2.79V5.21h2.79V4.5zm2 3.08h1.59V6.41h-1.59zM3.2 3.3h5.598V2.2H3.2z\"/></svg>" },
2226
2238
  'pillBottle-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M14 5h-1.994v1H8v7h4.006v2h-8V5H2V1h12zm-1.994 2.6v3.8H9.6V7.6z\"/></svg>" },
@@ -3091,6 +3103,12 @@ export const svgMap: Record<string, SvgMapEntry> = {
3091
3103
  'upload-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"m3.989 7.192 3.36-3.36v8.289h1.34V3.892l3.3 3.3V4.93l-4-4-4 4z\"/><path fill=\"#0A0B0D\" d=\"M3.989 8.76h-3v6.3h14v-6.3h-3v1.6h1.4v3.1h-10.8v-3.1h1.4z\"/></svg>" },
3092
3104
  'upload-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"m1.989 11.685-.096.096.096.096zm5-.758 3.5-3.5v9.879h3V7.427l3.5 3.5V6.685l-5-5-5 5zm15.096.853-.096.097v-.193z\"/><path fill=\"#0A0B0D\" d=\"M6.989 12.306h-5v10h20v-10h-5v3h2v4h-14v-4h2z\"/></svg>" },
3093
3105
  'upload-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"m6.989 9.616 4-4v12.586h2V5.617l4 4V6.788l-5-5-5 5z\"/><path fill=\"#0A0B0D\" d=\"M5.989 12.202h-4v10h20v-10h-4v2h2v6h-16v-6h2z\"/></svg>" },
3106
+ 'usdc-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M4.794 2.677a3.491 3.491 0 0 0 0 6.547v1.568A4.99 4.99 0 0 1 1.02 6.209l-.008-.257A4.99 4.99 0 0 1 4.794 1.11zM7.207 1.11a4.99 4.99 0 0 1 3.781 4.842l-.006.257a4.99 4.99 0 0 1-3.775 4.582V9.224a3.49 3.49 0 0 0 0-6.546z\"/><path fill=\"#0A0B0D\" d=\"M6.226 2.644a.4.4 0 0 1 .393.394v.467c.271.07.508.186.697.36.2.181.341.415.421.693l.03.122.003.008a.4.4 0 0 1-.01.17.376.376 0 0 1-.371.276H6.98a.39.39 0 0 1-.378-.284L6.6 4.847a.48.48 0 0 0-.203-.295c-.095-.06-.236-.098-.448-.098-.228 0-.372.052-.455.117-.076.06-.122.15-.122.28 0 .153.03.218.098.271.091.071.28.141.67.197.54.074.989.192 1.304.434.33.252.484.617.487 1.11l.002.011c0 .759-.526 1.352-1.315 1.54v.45a.4.4 0 0 1-.113.275l-.002.004-.001-.001a.4.4 0 0 1-.277.117h-.39a.396.396 0 0 1-.394-.395V8.42q-.56-.115-.9-.441a1.65 1.65 0 0 1-.472-.93V7.04a.4.4 0 0 1 .087-.302.4.4 0 0 1 .291-.134h.443l.069.006a.4.4 0 0 1 .315.309l.001.003.03.115a.5.5 0 0 0 .166.253c.103.083.28.151.59.151a.78.78 0 0 0 .493-.148.44.44 0 0 0 .167-.35c0-.17-.04-.243-.117-.3-.1-.075-.292-.14-.657-.2l-.391-.066c-.371-.077-.68-.192-.911-.373-.324-.254-.471-.614-.471-1.086 0-.724.508-1.276 1.267-1.445v-.435c0-.105.044-.203.114-.274l.003-.004a.4.4 0 0 1 .278-.116z\"/></svg>" },
3107
+ 'usdc-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M4.794 2.36a3.79 3.79 0 0 0 0 7.182v1.25A4.99 4.99 0 0 1 1.02 6.209l-.008-.257A4.99 4.99 0 0 1 4.794 1.11zm2.413-1.25a4.99 4.99 0 0 1 3.781 4.842l-.006.257a4.99 4.99 0 0 1-3.775 4.582V9.542a3.79 3.79 0 0 0 2.582-3.59A3.79 3.79 0 0 0 7.207 2.36z\"/><path fill=\"#0A0B0D\" d=\"M6.226 2.693a.35.35 0 0 1 .343.345v.506c.28.067.523.183.714.357q.29.266.406.671l.03.118v.006a.32.32 0 0 1-.074.273.33.33 0 0 1-.256.115H6.98a.34.34 0 0 1-.206-.07l-.003-.002a.35.35 0 0 1-.122-.177v-.003a.53.53 0 0 0-.224-.323c-.106-.067-.258-.105-.475-.105-.234 0-.391.053-.486.128a.38.38 0 0 0-.14.32c0 .16.032.244.116.31.103.08.303.15.695.207.537.074.975.19 1.28.424.313.241.464.59.467 1.071l.002.01c0 .744-.523 1.326-1.315 1.5v.49a.346.346 0 0 1-.343.345h-.39a.347.347 0 0 1-.344-.345v-.487c-.385-.071-.69-.219-.916-.435a1.6 1.6 0 0 1-.456-.901l-.002-.007h.001a.34.34 0 0 1 .076-.263.33.33 0 0 1 .253-.117h.443a.346.346 0 0 1 .336.276v.002c.035.171.098.305.212.397.116.093.305.162.624.162a.83.83 0 0 0 .523-.159.49.49 0 0 0 .185-.39c0-.18-.042-.27-.136-.34-.112-.082-.314-.15-.68-.21-.547-.073-.98-.195-1.278-.428-.31-.242-.452-.586-.452-1.046 0-.708.505-1.25 1.267-1.405v-.475a.347.347 0 0 1 .345-.345z\"/></svg>" },
3108
+ 'usdc-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M6.393 3.528a4.752 4.752 0 0 0 0 8.943v1.981A6.65 6.65 0 0 1 1.349 8a6.654 6.654 0 0 1 5.044-6.454zm3.215-1.982a6.652 6.652 0 0 1 0 12.906v-1.981a4.753 4.753 0 0 0 0-8.941z\"/><path fill=\"#0A0B0D\" d=\"M8.302 3.456c.137 0 .262.044.364.112l.095.077.087.102c.074.11.112.24.112.368v.517c.338.1.639.261.887.487a2.1 2.1 0 0 1 .598.985l.043.172.003.016a.66.66 0 0 1-.144.526.64.64 0 0 1-.494.225h-.544a.66.66 0 0 1-.394-.132l-.007-.005h-.002a.67.67 0 0 1-.231-.336l-.002-.007c-.05-.172-.126-.262-.212-.317-.097-.061-.258-.108-.526-.108-.286 0-.446.064-.525.127-.065.052-.111.129-.111.268 0 .184.034.221.079.256.092.072.311.162.831.236.721.1 1.35.26 1.8.605.468.36.686.875.699 1.54q.005.03.005.06c0 1.05-.707 1.865-1.753 2.155v.499c0 .18-.075.347-.193.466l-.002-.002a.65.65 0 0 1-.463.195h-.519a.66.66 0 0 1-.459-.188l-.006-.005a.66.66 0 0 1-.194-.466v-.488q-.707-.166-1.16-.597c-.371-.355-.58-.813-.667-1.31l-.003-.02a.66.66 0 0 1 .147-.505l.052-.054a.7.7 0 0 1 .15-.101l-.001-.002a.6.6 0 0 1 .29-.07h.59c.12 0 .233.034.328.09l.088.06.083.082a.7.7 0 0 1 .114.19l.031.104.001.006c.04.201.11.328.213.412.106.085.307.173.704.173.263 0 .456-.074.573-.168a.45.45 0 0 0 .172-.365c0-.2-.043-.25-.1-.293-.107-.078-.331-.16-.815-.24l-.27-.04c-.62-.105-1.145-.272-1.53-.573-.472-.37-.68-.893-.68-1.553 0-1.005.686-1.766 1.69-2.03v-.477a.66.66 0 0 1 .189-.458l.005-.007a.65.65 0 0 1 .465-.194z\"/></svg>" },
3109
+ 'usdc-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M6.393 3.146a5.05 5.05 0 0 0-3.444 4.789 5.05 5.05 0 0 0 3.444 4.788v1.665a6.65 6.65 0 0 1-5.044-6.453A6.654 6.654 0 0 1 6.393 1.48zM9.61 1.48a6.653 6.653 0 0 1 0 12.907v-1.665a5.05 5.05 0 0 0 3.44-4.787 5.05 5.05 0 0 0-3.44-4.788z\"/><path fill=\"#0A0B0D\" d=\"M8.3 3.491c.117 0 .223.037.31.095l.08.065.074.087a.56.56 0 0 1 .095.312v.594c.356.095.667.254.92.484a2 2 0 0 1 .569.94l.042.163.003.012a.55.55 0 0 1-.123.445.5.5 0 0 1-.194.143.6.6 0 0 1-.224.046h-.544a.56.56 0 0 1-.538-.402l-.001-.004c-.056-.193-.144-.304-.255-.374-.12-.075-.301-.125-.58-.125-.3 0-.485.068-.587.15-.093.072-.149.18-.149.346 0 .2.039.273.117.335.115.089.358.181.88.257.718.098 1.324.256 1.751.584.449.343.66.84.663 1.502l.003.019c0 1.022-.702 1.818-1.753 2.08v.573a.56.56 0 0 1-.16.39v.001a.55.55 0 0 1-.398.169h-.519a.56.56 0 0 1-.39-.161q-.001-.003-.004-.004a.56.56 0 0 1-.164-.395v-.566q-.738-.158-1.19-.59c-.354-.338-.555-.775-.64-1.257l-.001-.014a.55.55 0 0 1 .124-.428l.088-.083a.56.56 0 0 1 .326-.109h.59a.56.56 0 0 1 .52.359l.026.088v.005c.043.215.121.367.25.47.13.105.356.196.766.196.282 0 .497-.08.636-.192a.55.55 0 0 0 .21-.441c0-.22-.05-.305-.142-.373-.128-.095-.377-.181-.868-.26-.73-.1-1.328-.266-1.745-.593-.442-.345-.64-.837-.64-1.473 0-.976.68-1.718 1.69-1.953V4.05a.56.56 0 0 1 .558-.559z\"/></svg>" },
3110
+ 'usdc-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M14.413 2.32c4.343 1.079 7.563 5.003 7.564 9.68l-.014.514c-.226 4.448-3.367 8.128-7.55 9.168v-2.713A7.38 7.38 0 0 0 19.376 12a7.38 7.38 0 0 0-4.963-6.97zM9.588 5.028a7.377 7.377 0 0 0 0 13.941v2.712C5.244 20.6 2.024 16.678 2.023 12c0-4.678 3.22-8.603 7.565-9.682z\"/><path fill=\"#0A0B0D\" d=\"M12.45 5.385c.219 0 .412.093.551.226a.78.78 0 0 1 .238.563v.928c.543.14 1.014.379 1.394.725.4.365.68.832.84 1.387l.062.243.004.016q.03.174-.02.34a.75.75 0 0 1-.426.486.8.8 0 0 1-.315.065h-.817a.78.78 0 0 1-.472-.158l-.006-.004-.003-.002a.8.8 0 0 1-.278-.403L13.2 9.79c-.087-.299-.224-.476-.403-.589-.19-.12-.473-.194-.897-.194-.456 0-.745.103-.91.234-.153.12-.243.297-.243.559 0 .307.06.436.195.542.183.142.557.282 1.338.394 1.078.148 1.979.384 2.61.867.652.5.962 1.221.973 2.193q.004.024.005.05c0 1.517-1.05 2.704-2.629 3.08v.9a.8.8 0 0 1-.227.55v.001a.78.78 0 0 1-.562.238h-.776a.79.79 0 0 1-.79-.789v-.89c-.747-.15-1.347-.45-1.8-.882-.52-.498-.817-1.143-.942-1.857l-.003-.018a.78.78 0 0 1 .174-.604l.061-.063a.78.78 0 0 1 .522-.206h.885c.143 0 .278.04.392.106l.107.074.098.097q.089.106.137.229l.037.125v.005l.06.23c.071.215.177.381.33.505.207.167.56.304 1.182.304.432 0 .767-.121.985-.297a.87.87 0 0 0 .333-.702c0-.339-.078-.485-.231-.6-.203-.15-.588-.28-1.325-.4-1.093-.148-1.98-.396-2.595-.877-.648-.507-.941-1.228-.941-2.171 0-1.448 1.016-2.553 2.535-2.891v-.87a.79.79 0 0 1 .789-.788z\"/></svg>" },
3111
+ 'usdc-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"m12 21.879-.037-.001h.075zm2.413-19.657c4.343 1.08 7.563 5.003 7.564 9.68l-.014.514c-.226 4.449-3.367 8.128-7.55 9.168v-2.08a7.98 7.98 0 0 0 5.564-7.602A7.98 7.98 0 0 0 14.413 4.3zM9.588 4.298a7.98 7.98 0 0 0 0 15.208v2.077c-4.344-1.079-7.564-5.003-7.565-9.68 0-4.678 3.22-8.605 7.565-9.683z\"/><path fill=\"#0A0B0D\" d=\"M12.45 5.387c.19 0 .359.08.482.198a.68.68 0 0 1 .207.49V7.08c.561.134 1.043.373 1.426.722.385.35.657.802.813 1.342l.06.236.002.012q.026.15-.017.295a.65.65 0 0 1-.37.423.7.7 0 0 1-.275.056h-.817a.7.7 0 0 1-.663-.498l-.001-.004c-.093-.318-.243-.518-.447-.646-.212-.133-.516-.21-.95-.21-.469 0-.783.106-.972.255-.18.142-.281.35-.282.638 0 .322.065.489.235.621.205.16.604.302 1.389.415 1.074.147 1.95.382 2.56.848.625.48.926 1.175.933 2.133 0 .01.005.02.005.03 0 1.487-1.045 2.65-2.63 2.998v.982a.7.7 0 0 1-.201.486l-.002-.001a.68.68 0 0 1-.485.203h-.776a.7.7 0 0 1-.482-.2l-.002-.001-.002-.001a.68.68 0 0 1-.203-.486v-.973c-.77-.143-1.379-.44-1.832-.872-.502-.48-.792-1.103-.914-1.801l-.002-.015a.68.68 0 0 1 .153-.526.7.7 0 0 1 .213-.163.6.6 0 0 1 .293-.07h.885a.69.69 0 0 1 .64.441l.033.11.001.004c.068.343.196.608.425.793.23.187.608.326 1.244.326.45 0 .809-.125 1.049-.319a.97.97 0 0 0 .37-.78c0-.358-.085-.54-.272-.68-.225-.166-.632-.298-1.369-.418-1.09-.148-1.956-.393-2.55-.857-.618-.484-.903-1.173-.903-2.093 0-1.416 1.01-2.5 2.536-2.81v-.95a.69.69 0 0 1 .689-.688zm1.447 4.474.064.005a.4.4 0 0 1-.071-.007z\"/></svg>" },
3094
3112
  'venturesProduct-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M1.365 7.73a7.6 7.6 0 0 1 .864-1.748 9.3 9.3 0 0 1-.864-1.721C.292 1.639 1.59.329 4.268 1.333c.567.236 1.149.552 1.72.93a10.5 10.5 0 0 1 1.721-.93c2.677-1.004 3.976.306 2.904 2.928a9.3 9.3 0 0 1-.864 1.721c.377.58.675 1.17.864 1.748 1.072 2.622-.227 3.932-2.904 2.927a7.8 7.8 0 0 1-1.72-.847 7.8 7.8 0 0 1-1.72.847C1.59 11.662.291 10.352 1.364 7.73m1.14.373-.013.041-.016.04c-.228.556-.294.96-.287 1.218a.8.8 0 0 0 .04.246.2.2 0 0 0 .034.06c.002.003.07.073.328.086.27.012.686-.046 1.256-.26l.02-.008.022-.007a6 6 0 0 0 1.05-.477 13.2 13.2 0 0 1-1.955-1.995 6 6 0 0 0-.479 1.056m.497-3.166a14 14 0 0 1 1.946-1.912 9 9 0 0 0-1.12-.576c-.56-.207-.97-.265-1.237-.252-.259.012-.326.083-.328.085a.2.2 0 0 0-.034.06.8.8 0 0 0-.04.246c-.007.26.06.663.287 1.218l.007.02.008.02q.2.537.511 1.091M8.15 2.45a9 9 0 0 0-1.12.576 14 14 0 0 1 1.945 1.912q.312-.554.512-1.092l.007-.02.008-.019c.227-.555.293-.959.286-1.218a.8.8 0 0 0-.04-.246.2.2 0 0 0-.033-.06c-.002-.002-.07-.073-.328-.085-.267-.013-.677.045-1.237.252m1.322 5.654a6 6 0 0 0-.479-1.056 13.2 13.2 0 0 1-1.955 1.995c.361.204.714.365 1.05.477l.022.007.02.008c.57.214.986.272 1.257.26.258-.013.326-.083.328-.086a.2.2 0 0 0 .034-.06.8.8 0 0 0 .04-.246c.006-.259-.06-.662-.287-1.218l-.016-.04zM6.858 6.867c.508-.459.508-1.239 0-1.743-.462-.505-1.247-.505-1.755 0-.462.504-.508 1.284 0 1.743.462.504 1.247.504 1.755 0\"/></svg>" },
3095
3113
  'venturesProduct-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M5.103 6.867c.462.504 1.247.504 1.755 0 .508-.459.508-1.239 0-1.743-.462-.505-1.247-.505-1.755 0-.462.504-.508 1.284 0 1.743\"/><path fill=\"#0A0B0D\" d=\"M2.229 5.982a7.6 7.6 0 0 0-.864 1.748c-1.073 2.622.226 3.932 2.903 2.927a7.8 7.8 0 0 0 1.72-.847 7.8 7.8 0 0 0 1.721.847c2.677 1.005 3.976-.305 2.904-2.927a7.6 7.6 0 0 0-.864-1.748 9.3 9.3 0 0 0 .864-1.721c1.072-2.622-.227-3.932-2.904-2.928-.567.236-1.148.552-1.72.93a10.5 10.5 0 0 0-1.72-.93C1.59.33.291 1.64 1.364 4.261c.212.573.506 1.154.864 1.721m.263 2.162.013-.04q.168-.511.48-1.057a13.2 13.2 0 0 0 1.954 1.995 6 6 0 0 1-1.05.477l-.021.007-.021.008c-.57.214-.986.272-1.256.26-.259-.013-.326-.083-.328-.086a.2.2 0 0 1-.034-.06.8.8 0 0 1-.04-.246c-.007-.259.06-.662.287-1.218zM3.69 5.996c.302-.39.647-.78 1.027-1.156.403-.4.832-.772 1.27-1.106.44.334.869.706 1.272 1.106.38.376.724.765 1.027 1.156a12 12 0 0 1-2.298 2.347A12 12 0 0 1 3.69 5.996m1.257-2.971a14 14 0 0 0-1.946 1.912 7.6 7.6 0 0 1-.511-1.092l-.008-.02-.007-.019c-.228-.555-.294-.959-.287-1.218a.8.8 0 0 1 .04-.246.2.2 0 0 1 .034-.06c.002-.002.07-.073.328-.085.267-.013.676.045 1.236.252.365.153.742.347 1.121.576m2.081 0a9 9 0 0 1 1.121-.576c.56-.207.97-.265 1.237-.252.258.012.326.083.328.085a.2.2 0 0 1 .034.06.8.8 0 0 1 .04.246c.006.26-.06.663-.287 1.218l-.008.02-.007.02a7.6 7.6 0 0 1-.512 1.091A14 14 0 0 0 7.03 3.025m1.964 4.022c.206.363.368.718.48 1.056l.013.041.016.04c.227.556.293.96.286 1.218a.8.8 0 0 1-.04.246.2.2 0 0 1-.033.06c-.002.003-.07.073-.328.086-.27.012-.686-.046-1.256-.26l-.021-.008-.022-.007a6 6 0 0 1-1.05-.477 13.2 13.2 0 0 0 1.955-1.995\"/></svg>" },
3096
3114
  'venturesProduct-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M5.58 14.522c.791-.263 1.606-.67 2.409-1.187.803.516 1.617.924 2.408 1.187 3.748 1.406 5.567-.428 4.065-4.098-.264-.808-.68-1.634-1.21-2.447.501-.794.914-1.607 1.21-2.41 1.502-3.671-.317-5.505-4.065-4.099-.793.33-1.608.773-2.408 1.302-.8-.529-1.615-.972-2.409-1.302C1.832.062.014 1.896 1.515 5.567c.297.803.71 1.616 1.21 2.41-.529.813-.945 1.639-1.21 2.447-1.501 3.67.317 5.504 4.065 4.098m-2.656-3.58.017-.051a8.4 8.4 0 0 1 .722-1.576 18.5 18.5 0 0 0 3.006 3.068 8.7 8.7 0 0 1-1.563.716l-.026.009-.027.01c-1.744.654-2.334.278-2.409.202-.063-.063-.436-.627.26-2.328zm10.113-.051.016.05.02.05c.697 1.702.323 2.266.26 2.33-.075.075-.665.45-2.409-.203l-.026-.01-.027-.01a8.7 8.7 0 0 1-1.563-.715 18.5 18.5 0 0 0 3.007-3.068 8.4 8.4 0 0 1 .722 1.576m.018-5.844c-.195.53-.453 1.073-.762 1.616a19.4 19.4 0 0 0-2.997-2.946c.558-.34 1.115-.628 1.653-.854 1.725-.641 2.31-.268 2.384-.193.063.063.437.628-.26 2.329l-.009.024zM5.029 2.863c.538.226 1.094.514 1.653.854a19.4 19.4 0 0 0-2.997 2.946 11 11 0 0 1-.762-1.616l-.01-.024-.01-.024c-.695-1.701-.322-2.266-.259-2.329.075-.075.66-.448 2.385.193m4.176 6.352c-.71.707-1.81.707-2.457 0-.711-.642-.646-1.734 0-2.44.712-.706 1.81-.706 2.457 0 .712.706.712 1.798 0 2.44\"/></svg>" },
package/src/routes.ts CHANGED
@@ -142,9 +142,10 @@ export const routes = [
142
142
  .default,
143
143
  },
144
144
  {
145
- key: 'Chart',
145
+ key: 'ChartTransitions',
146
146
  getComponent: () =>
147
- require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default,
147
+ require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartTransitions.stories')
148
+ .default,
148
149
  },
149
150
  {
150
151
  key: 'Checkbox',
@@ -246,6 +247,11 @@ export const routes = [
246
247
  getComponent: () =>
247
248
  require('@coinbase/cds-mobile/overlays/__stories__/DrawerMisc.stories').default,
248
249
  },
250
+ {
251
+ key: 'DrawerReduceMotion',
252
+ getComponent: () =>
253
+ require('@coinbase/cds-mobile/overlays/__stories__/DrawerReduceMotion.stories').default,
254
+ },
249
255
  {
250
256
  key: 'DrawerRight',
251
257
  getComponent: () =>
@@ -840,6 +846,11 @@ export const routes = [
840
846
  getComponent: () =>
841
847
  require('@coinbase/cds-mobile/overlays/__stories__/TrayRedesign.stories').default,
842
848
  },
849
+ {
850
+ key: 'TrayReduceMotion',
851
+ getComponent: () =>
852
+ require('@coinbase/cds-mobile/overlays/__stories__/TrayReduceMotion.stories').default,
853
+ },
843
854
  {
844
855
  key: 'TrayScrollable',
845
856
  getComponent: () =>