@yahoo/uds-icons 0.0.2 → 0.0.3

package/dist/generated/icons/WritingAi.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-const o=({size:h,variant:a})=>{if(a==="outline")switch(h){case"sm":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M.65 14.298C.65 6.75 6.366 1.15 14 1.15h.956l-.112.95L14 2l.844.1v.007l-.003.014-.006.045-.024.152a9.6 9.6 0 0 1-.686 2.207c-.583 1.293-1.654 2.863-3.575 3.727l-.167.075H9.31l.442.495a.85.85 0 0 1 .016 1.114l-.02.023c.65.548.02-.023.02-.023l-.001.001-.002.002-.004.005-.013.015a4 4 0 0 1-.193.207 8 8 0 0 1-.546.508 7.5 7.5 0 0 1-1.993 1.222c-.76.307-1.555.34-2.213.34H2.517q-.115.69-.151 1.414H14.85v1.7H.65zm2.28-3.763h1.872c.629 0 1.14-.04 1.575-.216a5.8 5.8 0 0 0 1.565-.97L6.688 7.943l-.048-.215.829-.187-.83.187v-.007l-.003-.008-.003-.02a1 1 0 0 1-.015-.232.87.87 0 0 1 .873-.835h2.52c1.315-.649 2.1-1.77 2.564-2.8.152-.336.266-.655.351-.935-4.845.384-8.607 3.363-9.995 7.643"})});case"md":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M2.971 19.76c0-9.217 7.591-16.67 16.919-16.67h1.115l-.236 1.09-.88-.19.88.19v.004l-.002.005-.003.017a5 5 0 0 1-.063.254 15.7 15.7 0 0 1-1.116 2.925c-.852 1.691-2.298 3.745-4.623 4.792l-.177.079h-1.69a22 22 0 0 0 .625.65l.115.112.028.027.007.006.627.584-.552.655-.688-.58.688.58-.002.002-.001.002-.006.006-.016.019a5 5 0 0 1-.248.266 10 10 0 0 1-.711.652c-.606.503-1.493 1.118-2.588 1.518-.759.278-1.54.316-2.208.316H5.018a15 15 0 0 0-.232 2.038h6.793v1.8H2.971zm2.503-4.489h2.69c.62 0 1.14-.042 1.59-.207.842-.307 1.551-.792 2.058-1.212q.09-.075.172-.148l-.001-.001a23 23 0 0 1-1.469-1.717.96.96 0 0 1-.178-.792.94.94 0 0 1 .917-.738h3.139c1.688-.826 2.839-2.4 3.585-3.88.303-.602.53-1.171.694-1.637-6.226.488-11.38 4.686-13.197 10.332m7.108 3.838h2.601v1.8h-2.6zm2.502-2.304h1.602v4.005l4.004-4.805h-1.6V12z"})});case"lg":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M1.85 28.589C1.85 13.548 13.767 1.85 29 1.85h1.366l-.233 1.346L29 3l1.133.196v.005l-.002.008-.005.025-.016.086q-.021.11-.065.308c-.059.262-.15.634-.28 1.088-.259.905-.68 2.144-1.325 3.486-1.281 2.667-3.51 5.863-7.25 7.546l-.214.096-3.447.07a145 145 0 0 1 1.649 1.705l.134.144.034.036.01.01.003.004-.848.777c.88.741.88.741.879.742l-.002.002-.003.003-.008.01-.027.031-.096.107q-.121.137-.347.365a16 16 0 0 1-1.287 1.156c-1.097.883-2.697 1.934-4.655 2.52-.771.231-1.545.281-2.238.281H4.602a25 25 0 0 0-.441 4.043H15.4v2.3H1.851zm16.66-9.999.849-.777.682.746-.651.773zM5.162 21.507h5.566c.595 0 1.115-.046 1.578-.184 1.58-.473 2.917-1.34 3.873-2.109.284-.228.53-.445.736-.636-.506-.525-1.293-1.33-2.436-2.474l-2.381-2.381 8.357-.169c2.925-1.396 4.777-3.983 5.913-6.348a20 20 0 0 0 1.156-3.016c-10.798.588-19.492 7.594-22.362 17.317m16.99 8.643h-5.3v-2.3h5.3zM21 23.636h2.57V30L30 22.364h-2.572V16z"})})}if(a==="fill")switch(h){case"sm":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M14 1.15C6.366 1.15.65 6.75.65 14.298v1.052h14.2v-1.7H2.366q.037-.723.151-1.415h2.285c.658 0 1.453-.032 2.213-.34a7.5 7.5 0 0 0 1.993-1.221 8 8 0 0 0 .739-.715l.013-.015.004-.005.002-.002v-.001a.85.85 0 0 0-.015-1.114l-.442-.495h1.074l.167-.075c1.921-.864 2.992-2.434 3.575-3.726a9.6 9.6 0 0 0 .686-2.208l.024-.152.006-.045.002-.014v-.006l.113-.951zm-9.198 9.385H2.93q.322-.992.807-1.883l3.04-.608 1.164 1.304-.031.027c-.377.318-.905.69-1.534.944-.434.176-.946.216-1.575.216m7.573-6.299-7.63 2.886c1.886-2.398 4.764-3.959 8.181-4.23a8 8 0 0 1-.551 1.344"})});case"md":return jsxs(Fragment,{children:[jsx("path",{fill:"currentColor",d:"M19.89 3.09c-9.328 0-16.919 7.454-16.919 16.67v1.149h8.608v-1.8H4.786q.046-1.04.232-2.038h3.147c.667 0 1.45-.038 2.208-.316 1.095-.4 1.982-1.015 2.588-1.518a10 10 0 0 0 .905-.858l.054-.06.016-.019.006-.006.002-.002.553-.657-.627-.583-.007-.007-.028-.027-.115-.112a18 18 0 0 1-.625-.65h1.69l.177-.08c2.325-1.046 3.77-3.1 4.622-4.79a15.7 15.7 0 0 0 1.117-2.926 8 8 0 0 0 .063-.254l.003-.017.002-.005v-.002l.236-1.091zM8.165 15.272H5.474q.177-.552.397-1.085l4.969-1.788c.43.529.83.973 1.143 1.305l.001.002-.172.147c-.507.42-1.216.905-2.057 1.213-.45.164-.97.206-1.59.206m9.496-8.108L6.753 12.399a15.14 15.14 0 0 1 11.918-7.46 14 14 0 0 1-.694 1.637q-.147.291-.316.587"}),jsx("path",{fill:"currentColor",d:"M15.183 19.109h-2.6v1.8h2.6zm1.503-2.304h-1.602L19.09 12v4.005h1.601l-4.004 4.805z"})]});case"lg":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M4.206 17.48C2.689 20.842 1.85 24.597 1.85 28.588v1.561h13.551v-2.3H4.161c.039-1.383.189-2.733.44-4.043h6.126c.693 0 1.467-.05 2.238-.28 1.958-.587 3.558-1.638 4.655-2.52a16 16 0 0 0 1.287-1.157 12 12 0 0 0 .443-.472l.027-.031.008-.01.003-.003.001-.002-.878-.742.88.741.65-.772-.682-.745-.848.776.848-.776-.004-.005-.009-.01-.034-.036-.134-.144a145 145 0 0 0-1.649-1.705l3.447-.07.214-.096c3.74-1.683 5.969-4.88 7.25-7.546a22.4 22.4 0 0 0 1.326-3.486 19 19 0 0 0 .344-1.396l.017-.086.004-.025.001-.008v-.003l.001-.001L29 3l1.133.197.233-1.347H29c-10.408 0-19.268 5.46-23.836 13.718l-.178.066zm2.686-.267 6.9-1.796.686.687a192 192 0 0 1 2.436 2.474c-.206.191-.452.408-.736.636-.956.77-2.294 1.636-3.873 2.109-.463.138-.983.184-1.578.184H5.161a24 24 0 0 1 1.731-4.294m19.17-9.4L8.724 14.247c4.195-5.801 10.94-9.63 18.8-10.057a20 20 0 0 1-1.462 3.623M22.15 30.15v-2.3h-5.3v2.3zm1.422-6.514H21L27.43 16v6.364H30L23.572 30z"})})}return jsx(Fragment,{})};
+const o=({size:h,variant:a})=>{if(a==="outline")switch(h){case"sm":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M.65 14.298C.65 6.75 6.366 1.15 14 1.15h.956l-.112.95L14 2l.844.1v.007l-.002.014-.007.045-.024.152a9.6 9.6 0 0 1-.686 2.207c-.583 1.293-1.654 2.863-3.575 3.727l-.167.075H9.31l.442.495a.85.85 0 0 1 .016 1.114l-.02.023c.65.548.02-.023.02-.023l-.001.001-.002.002-.004.005-.013.015a4 4 0 0 1-.192.207 8 8 0 0 1-.547.508 7.5 7.5 0 0 1-1.993 1.222c-.76.307-1.555.34-2.213.34H2.518q-.116.69-.152 1.414H14.85v1.7H.65zm2.28-3.763h1.872c.629 0 1.14-.04 1.575-.216a5.8 5.8 0 0 0 1.565-.97L6.688 7.943l-.048-.215.829-.187-.83.187v-.007l-.002-.008-.004-.02a1 1 0 0 1-.015-.232.87.87 0 0 1 .873-.835h2.52c1.315-.649 2.1-1.77 2.564-2.8.152-.336.266-.655.351-.935-4.845.384-8.607 3.363-9.995 7.643"})});case"md":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M2.972 19.76c0-9.217 7.59-16.67 16.918-16.67h1.115l-.236 1.09-.88-.19.88.19v.004l-.002.005-.003.017a7 7 0 0 1-.063.254 15.7 15.7 0 0 1-1.116 2.925c-.852 1.691-2.298 3.745-4.623 4.792l-.176.079h-1.691a22 22 0 0 0 .625.65l.115.112.028.027.007.006.627.584-.552.655-.688-.58.688.58-.001.002-.002.002-.005.006-.016.019-.055.06q-.068.076-.194.206a9 9 0 0 1-.711.652c-.606.503-1.493 1.118-2.588 1.518-.759.278-1.54.316-2.208.316H5.019a15 15 0 0 0-.233 2.038h6.793v1.8H2.972zm2.502-4.489h2.69c.62 0 1.14-.042 1.59-.207.842-.307 1.551-.792 2.058-1.212q.09-.075.172-.148l-.001-.001a23 23 0 0 1-1.469-1.717.96.96 0 0 1-.178-.792.94.94 0 0 1 .917-.738h3.139c1.688-.826 2.84-2.4 3.585-3.88.303-.602.53-1.171.694-1.637-6.226.488-11.38 4.686-13.197 10.332m7.108 3.838h2.601v1.8h-2.6zm2.502-2.304h1.602v4.005l4.005-4.805h-1.602V12z"})});case"lg":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M1.85 28.589C1.85 13.548 13.766 1.85 29 1.85h1.366l-.233 1.346L29 3l1.133.196v.005l-.002.008-.005.025-.016.086q-.021.11-.065.308c-.059.262-.15.634-.28 1.088-.26.905-.68 2.144-1.325 3.486-1.281 2.667-3.51 5.863-7.25 7.546l-.214.096-3.447.07a145 145 0 0 1 1.649 1.705l.134.144.034.036.01.01.003.004-.848.777c.88.741.879.741.879.742l-.002.002-.003.003-.008.01-.027.031-.096.107q-.121.137-.348.365c-.299.302-.734.712-1.286 1.156-1.097.883-2.697 1.934-4.655 2.52-.771.231-1.545.281-2.238.281H4.602a25 25 0 0 0-.442 4.043H15.4v2.3H1.85zm16.66-9.999.849-.777.682.746-.651.773zM5.16 21.507h5.567c.595 0 1.115-.046 1.578-.184 1.58-.473 2.917-1.34 3.873-2.109.284-.228.53-.445.736-.636-.506-.525-1.293-1.33-2.436-2.474l-2.381-2.381 8.357-.169c2.925-1.396 4.777-3.983 5.913-6.348a20 20 0 0 0 1.156-3.016c-10.798.588-19.492 7.594-22.362 17.317m16.99 8.643h-5.3v-2.3h5.3zM21 23.636h2.571V30L30 22.364h-2.572V16z"})})}if(a==="fill")switch(h){case"sm":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M14 1.15C6.366 1.15.65 6.75.65 14.298v1.052h14.2v-1.7H2.366q.037-.723.151-1.415h2.285c.658 0 1.453-.032 2.213-.34a7.5 7.5 0 0 0 1.993-1.221 8 8 0 0 0 .739-.715l.013-.015.004-.005.002-.002v-.001a.85.85 0 0 0-.015-1.114l-.442-.495h1.074l.167-.075c1.921-.864 2.992-2.434 3.575-3.726a9.6 9.6 0 0 0 .686-2.208l.024-.152.006-.045.002-.014v-.006l.113-.951zm-9.198 9.385H2.93q.322-.992.807-1.883l3.04-.608 1.164 1.304-.031.027c-.377.318-.905.69-1.534.944-.434.176-.946.216-1.575.216m7.573-6.299-7.63 2.886c1.886-2.398 4.764-3.959 8.181-4.23a8 8 0 0 1-.551 1.344"})});case"md":return jsxs(Fragment,{children:[jsx("path",{fill:"currentColor",d:"M19.89 3.09c-9.328 0-16.919 7.454-16.919 16.67v1.149h8.608v-1.8H4.786q.046-1.04.232-2.038h3.147c.667 0 1.45-.038 2.208-.316 1.095-.4 1.982-1.015 2.588-1.518a10 10 0 0 0 .905-.858l.054-.06.016-.019.006-.006.002-.002.553-.657-.627-.583-.007-.007-.028-.027-.115-.112a18 18 0 0 1-.625-.65h1.69l.177-.08c2.325-1.046 3.77-3.1 4.622-4.79a15.7 15.7 0 0 0 1.117-2.926 8 8 0 0 0 .063-.254l.003-.017.002-.005v-.002l.236-1.091zM8.165 15.272H5.474q.177-.552.397-1.085l4.969-1.788c.43.529.83.973 1.143 1.305l.001.002-.172.147c-.507.42-1.216.905-2.057 1.213-.45.164-.97.206-1.59.206m9.496-8.108L6.753 12.399a15.14 15.14 0 0 1 11.918-7.46 14 14 0 0 1-.694 1.637q-.147.291-.316.587"}),jsx("path",{fill:"currentColor",d:"M15.183 19.109h-2.6v1.8h2.6zm1.503-2.304h-1.602L19.09 12v4.005h1.601l-4.004 4.805z"})]});case"lg":return jsx(Fragment,{children:jsx("path",{fill:"currentColor",d:"M4.206 17.48C2.689 20.842 1.85 24.597 1.85 28.588v1.561h13.551v-2.3H4.161c.039-1.383.189-2.733.44-4.043h6.126c.693 0 1.467-.05 2.238-.28 1.958-.587 3.558-1.638 4.655-2.52a16 16 0 0 0 1.287-1.157 12 12 0 0 0 .443-.472l.027-.031.008-.01.003-.003.001-.002-.878-.742.88.741.65-.772-.682-.745-.848.776.848-.776-.004-.005-.009-.01-.034-.036-.134-.144a145 145 0 0 0-1.649-1.705l3.447-.07.214-.096c3.74-1.683 5.969-4.88 7.25-7.546a22.4 22.4 0 0 0 1.326-3.486 19 19 0 0 0 .344-1.396l.017-.086.004-.025.001-.008v-.003l.001-.001L29 3l1.133.197.233-1.347H29c-10.408 0-19.268 5.46-23.836 13.718l-.178.066zm2.686-.267 6.9-1.796.686.687a192 192 0 0 1 2.436 2.474c-.206.191-.452.408-.736.636-.956.77-2.294 1.636-3.873 2.109-.463.138-.983.184-1.578.184H5.161a24 24 0 0 1 1.731-4.294m19.17-9.4L8.724 14.247c4.195-5.801 10.94-9.63 18.8-10.057a20 20 0 0 1-1.462 3.623M22.15 30.15v-2.3h-5.3v2.3zm1.422-6.514H21L27.43 16v6.364H30L23.572 30z"})})}return jsx(Fragment,{})};
 
 export { o as WritingAi };

package/dist/generated/icons/index.cjs

@@ -315,6 +315,7 @@ var Sunrise = require('./Sunrise');
 var Sunset = require('./Sunset');
 var Swimming = require('./Swimming');
 var TechnicalRoute = require('./TechnicalRoute');
+var ThirdQuarter = require('./ThirdQuarter');
 var ThreeLines = require('./ThreeLines');
 var ThreeLinesSpread = require('./ThreeLinesSpread');
 var ThumbsDown = require('./ThumbsDown');
@@ -1626,6 +1627,10 @@ Object.defineProperty(exports, "TechnicalRoute", {
 	enumerable: true,
 	get: function () { return TechnicalRoute.TechnicalRoute; }
 });
+Object.defineProperty(exports, "ThirdQuarter", {
+	enumerable: true,
+	get: function () { return ThirdQuarter.ThirdQuarter; }
+});
 Object.defineProperty(exports, "ThreeLines", {
 	enumerable: true,
 	get: function () { return ThreeLines.ThreeLines; }

package/dist/generated/icons/index.d.cts

@@ -313,6 +313,7 @@ export { Sunrise } from './Sunrise.cjs';
 export { Sunset } from './Sunset.cjs';
 export { Swimming } from './Swimming.cjs';
 export { TechnicalRoute } from './TechnicalRoute.cjs';
+export { ThirdQuarter } from './ThirdQuarter.cjs';
 export { ThreeLines } from './ThreeLines.cjs';
 export { ThreeLinesSpread } from './ThreeLinesSpread.cjs';
 export { ThumbsDown } from './ThumbsDown.cjs';

package/dist/generated/icons/index.d.ts

@@ -313,6 +313,7 @@ export { Sunrise } from './Sunrise.js';
 export { Sunset } from './Sunset.js';
 export { Swimming } from './Swimming.js';
 export { TechnicalRoute } from './TechnicalRoute.js';
+export { ThirdQuarter } from './ThirdQuarter.js';
 export { ThreeLines } from './ThreeLines.js';
 export { ThreeLinesSpread } from './ThreeLinesSpread.js';
 export { ThumbsDown } from './ThumbsDown.js';

package/dist/generated/icons/index.js

@@ -313,6 +313,7 @@ export { Sunrise } from './Sunrise';
 export { Sunset } from './Sunset';
 export { Swimming } from './Swimming';
 export { TechnicalRoute } from './TechnicalRoute';
+export { ThirdQuarter } from './ThirdQuarter';
 export { ThreeLines } from './ThreeLines';
 export { ThreeLinesSpread } from './ThreeLinesSpread';
 export { ThumbsDown } from './ThumbsDown';

package/dist/src/index.d.cts

@@ -313,6 +313,7 @@ export { Sunrise } from '../generated/icons/Sunrise.cjs';
 export { Sunset } from '../generated/icons/Sunset.cjs';
 export { Swimming } from '../generated/icons/Swimming.cjs';
 export { TechnicalRoute } from '../generated/icons/TechnicalRoute.cjs';
+export { ThirdQuarter } from '../generated/icons/ThirdQuarter.cjs';
 export { ThreeLines } from '../generated/icons/ThreeLines.cjs';
 export { ThreeLinesSpread } from '../generated/icons/ThreeLinesSpread.cjs';
 export { ThumbsDown } from '../generated/icons/ThumbsDown.cjs';

package/dist/src/index.d.ts

@@ -313,6 +313,7 @@ export { Sunrise } from '../generated/icons/Sunrise.js';
 export { Sunset } from '../generated/icons/Sunset.js';
 export { Swimming } from '../generated/icons/Swimming.js';
 export { TechnicalRoute } from '../generated/icons/TechnicalRoute.js';
+export { ThirdQuarter } from '../generated/icons/ThirdQuarter.js';
 export { ThreeLines } from '../generated/icons/ThreeLines.js';
 export { ThreeLinesSpread } from '../generated/icons/ThreeLinesSpread.js';
 export { ThumbsDown } from '../generated/icons/ThumbsDown.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-icons",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "files": [
     "dist/**",

package/README.md

@@ -1,463 +0,0 @@
-import { DocImage } from '~/components/DocImage';
-
-# Icon system design
-
-Build a comprehensive Icon component which uses the [new icon library](https://www.figma.com/file/PVSsdT9z4uw7gg0JKMO8Ue/Icon-Library-%5BWIP%5D?type=design&node-id=2970-2&mode=design&t=ttNox6vrtc4q9tTf-0) created by the Design Studio team.
-
-**Goals**
-
-1. Scalable. Addresses all the icon (feature) needs across Yahoo products, today and tomorrow.
-1. Build a source of truth. Reduce code duplication and ensure icons are always consistent and up-to-date.
-1. Fast delivery from Studio team creation -> code -> icons in the hands of product teams.
-1. Best-in-class performance.
-1. Deprecate Fuji icons.
-
-## Requirements
-
-### Styles
-
-The following styling options are available for icons:
-
-| Style   | Possible values                                                              |
-| ------- | ---------------------------------------------------------------------------- |
-| Size    | 16px, 24px, 32px                                                             |
-| Variant | `outline`, `fill`                                                            |
-| Color   | One of the [foreground colors](/docs/core-concepts/color#foreground-palette) |
-
-> In the future, we may support customizing the sizes and colors in the [Configurator](/docs/getting-started/using-configurator). For now, the [Icon component](/docs/components/icon#examples) accepts overrides in code.
-
-### Naming convention
-
-Icons follow a `name-variant-size` naming convention within the [Figma library](https://www.figma.com/file/PVSsdT9z4uw7gg0JKMO8Ue/Icon-Library-%5BWIP%5D?type=design&node-id=2970-2&mode=design&t=ttNox6vrtc4q9tTf-0). This convention maps to the Icon component's API, which contains props for `name`, `size`, and `variant`.
-
-| Figma name       | Variant | Size | Size alias | Example usage                                       |
-| ---------------- | ------- | ---- | ---------- | --------------------------------------------------- |
-| trash-outline-16 | outline | 16px | sm         | `<Icon name={Trash} variant="outline" size="sm" />` |
-| trash-fill-16    | fill    | 16px | sm         | `<Icon name={Trash} variant="fill" size="sm" />`    |
-| trash-outline-24 | outline | 24px | md         | `<Icon name={Trash} variant="outline" size="md" />` |
-| trash-fill-24    | fill    | 24px | md         | `<Icon name={Trash} variant="fill" size="md" />`    |
-| trash-outline-32 | outline | 32px | lg         | `<Icon name={Trash} variant="outline" size="lg" />` |
-| trash-fill-32    | fill    | 32px | lg         | `<Icon name={Trash} variant="fill" size="lg" />`    |
-
-## Implementation details
-
-### Overview
-
-Icons are typically implemented using web fonts or SVGs. UDS Icons are implemented
-using SVG because web fonts come with performance challenges (see [considerations](#considerations)) that we
-want to avoid. SVG also supports [all the features](#requirements) we need today, scales well,
-and keep the door open for for future features (e.g. multi-color, animations, or custom sizes).
-
-Benefits of SVG:
-
-- The performance impact of SVG is minimal.
-- SVG is a vector format that scales well to arbitrary sizes.
-- Easily targeted and styled with CSS features.
-- Built-in accessibility features
-- Works on web and react native.
-- Animations [[future work](#future-work)] - easily manipulated and animated with CSS and/or JS.
-- Multi-colored & Two-tone ([future work](#future-work)) - individual SVG paths can be styled with different colors.
-
-### Package structure
-
-Icon assets are shipped in separate package from core `@yahoo/uds`. This for a few reasons:
-
-- Keeps the size of core `@yahoo/uds` small. There currently 1200+ icons, which will increase over time.
-- Separate packages can be versioned independently.
-- Adding a new icon or updating an existing illustrations doesn't require code changes or a new release of to `@yahoo/uds`.
-
-| Bundle                      | Description                                        |
-| --------------------------- | -------------------------------------------------- |
-| `@yahoo/uds-icons`          | Icons to import and use                            |
-| `@yahoo/uds-icons/fixtures` | An exported `iconNames` containing all icon names. |
-
-### Component design
-
-The component API uses a [familiar approach](#prior-art)) to other popular icon
-libraries, which is is break icons up from the core library package. A user
-consumes icons by importing an icon from the `@yahoo/uds-icons` package
-and passing it to the `Icon` component from the `@yahoo/uds` package.
-The latter is responsible for rendering the icon.
-
-#### Usage
-
-```tsx
-import { Icon } from '@yahoo/uds';
-import { AccountRefresh, VideoCamera } from '@yahoo/uds-icons';
-
-<Icon name={AccountRefresh} variant="fill" size="sm" />
-<Icon name={VideoCamera} variant="fill" size="sm" />
-```
-
-> **Tip**: See the Icon [component API docs](/docs/components/icon#usage) for alternate examples of how to import and use icons.
-
-#### API
-
-`Icon` provides the `<svg>` wrapper for all icons, as well as the props,
-functionality, and API surface. The design provides for flexibility and
-centralized location for making API changes in UDS. Adding features, style
-updates, or a11y hooks can be made across all icons without having to
-update icon assets, regenerate code, or ship a icon packages release.
-
-```tsx title="packages/uds/src/components/Icon.tsx"
-import { getStyles } from '~/styles/styler';
-import { DEFAULT_SCALE_MODE, defaultTokensConfig } from '~/tokens';
-
-type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
-
-interface IconProps extends HtmlSpanProps {
-  // Icon to render from the icons package.
-  name: (props: Pick<IconProps, 'size' | 'variant'>) => JSX.Element;
-  size: 'sm' | 'md' | 'lg';
-  variant: 'fill' | 'outline';
-  color?: ForegroundColor;
-}
-
-export const Icon = ({
-  name: SVGIcon,
-  size,
-  variant,
-  color = 'primary',
-  className,
-  ...props
-}: IconProps) => {
-  const styles = getStyles({ color, className });
-  const scaleMode = defaultTokensConfig.scaleMode[DEFAULT_SCALE_MODE];
-  const sizePx = scaleMode.iconSizes[size];
-  return (
-    <span {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={sizePx}
-        height={sizePx}
-        viewBox={`0 0 ${sizePx} ${sizePx}`}
-        aria-hidden="true"
-        focusable="false"
-        className={styles}
-      >
-        <SVGIcon size={size} variant={variant} />
-      </svg>
-    </span>
-  );
-};
-```
-
-## Consumption pipeline
-
-The majority of the icon system is code-generated. This allows us to keep assets
-up-to-date and ingest quickly should the Studio team create new icons or make changes to existing ones.
-
-> **Tip**: the entire flow below can be run with one command: `bun run icons:pipeline`
-
-The pipeline consists of three steps:
-
-#### 1. Export icons from Figma
-
-Run the following command to export icons from Figma:
-
-```bash
-bun run icons:export
-```
-
-**What it's doing**
-
-Icons are exported as SVG using the Figma REST API. Files are saved in `./assets` with the naming convention from Figma (`name-variant-size.svg`).
-
-<DocImage light={{ src: '/images/icondocs/export_command.png' }} />
-
-The script flags any icons which are missing a variant or size and does not save these files. **This ensures that all icon in the library are complete and work as expected**.
-
-Notes:
-
-- If an icon is missing a variant or size, it will not be saved. Check Figma to ensure
-  the icon is named properly and has all variants and sizes.
-- The script cerates `generated/iconNames.ts` containing the list of
-  all icons that were exported and those which were ignored (e.g. not-saved) from Figma.
-
-#### 2. Optimize the SVG
-
-> **Note**: `bun run icons:export` needs to be run before this step.
-
-To optimize the exported .svg, run:
-
-```bash
-bun run icons:optimize
-```
-
-**What it's doing**
-
-The raw SVG files are optimized using SVGO and re-saved back to `./assets`.
-Unnecessary metadata is removed and path information is clean up.
-This **reduces the total size of all icons by ~682kb**.
-
-#### 3. Generate TSX icons
-
-> **Note**: `bun run icons:export` needs to be run before this step.
-
-TypeScript files are generated for each icon containing the JSX for each size and variant. To regenerate
-these files, run:
-
-```bash
-bun run icons:codegen
-```
-
-This script does the following:
-
-- Creates a `generated/icons/*.tsx` file for each JSX icon.
-- Creates a barrel `generated/icons/index.ts` file that exports all icons.
-
-**What it's doing**
-
-Raw .svg assets in the previous step are read `scripts/codgen.ts` and converted to TypeScript components. This script generates JSX elements which contain all the `<path>` information for
-each size and variant for a given icon. This allows for future variants or sizes to be added to
-the system without needing to change the component API.
-
-```tsx title="Example code generated icon file"
-import { type IconProps } from '@yahoo/uds';
-
-export const Trash = ({ size, variant }: IconProps) => {
-  if (variant === 'outline') {
-    switch (size) {
-      case 'sm':
-        return <path fill="currentColor" d="M5 1h6v.9h3.9v1.8h-.998l-.00..." />;
-      case 'md':
-        return <path fill="currentColor" d="M8.364 2h7.272v1.727h5.546v2..." />;
-      case 'lg':
-        return <path fill="currentColor" d="M11 1H9.85v3H3v2.3h2.11l.007..." />;
-    }
-  }
-
-  if (variant === 'fill') {
-    switch (size) {
-      case 'sm':
-        return <path fill="currentColor" d="M5 1h6v.9h3.9v1...." />;
-      case 'md':
-        return <path fill="currentColor" d="M10.364 2h-2v1.727H2.818v2h18.36..." />;
-      case 'lg':
-        return <path fill="currentColor" d="M11 .85H9.85v3H3v2.3h26v-2.3h5v..." />;
-    }
-  }
-};
-```
-
-## Open questions
-
-1. Do we need a icon color palette? Foreground colors might not be flexible enough for icons?
-1. Do we only allow scaling up the `lg` size icons?
-1. Naming convention for generated files: `Clock` vs. `ClockIcon`.
-
-   ```tsx
-   <Icon name={Clock} />
-   // vs.
-   <Icon name={ClockIcon} />
-   ```
-
-   Benefit of later is further grokability of code and intelliense help when typing just "icon".
-
-1. Do we need a `variant` prop? TSX icons could be further broken down into `Outline` and `Fill` components. This would shed more bytes for perf.
-
-   ```tsx
-   <Icon name={Clock} variant="fill" />
-   // vs.
-   <Icon name={ClockFill} />
-   ```
-
-1. API for button and icon button:
-   ```tsx
-   // 1. Allow no customizations. Components decide everything (sizes, colors).
-   <Button startIcon={Clock} />
-   <IconButton name={Clock} />
-   // 2. Customization through props:
-   <Button startIcon={Clock} iconVariant="fill" iconSize="md" />
-   <Button startIcon={Clock} {...iconProps} />
-   // 3. Or, customization through composition:
-   <Button startIcon={<Icon icon={Clock} variant="fill" size="md" />} />
-   <IconButton name={<Icon icon={Clock} variant="fill" size="md" className="text-blue-900" />} />
-   ```
-
-## Future work
-
-This section covers possible future work and customizations to the icon system.
-Work can be prioritized based on product teams' needs and feedback.
-
-### Scale mode
-
-[Scale modes](/docs/core-concepts/tokens#scale-modes-) is a project coming soon.
-When scale modes are available, icons can be updated to support different scale modes.
-
-### React Native
-
-Explore [react-native-svg](https://github.com/software-mansion/react-native-svg) when
-we prioritize React Native components.
-
-### SVGR
-
-Explore [SVGR CLI](https://react-svgr.com/docs/configuration-files/) for code generation.
-This wasn't used for the implementation beacuse SVGR's React component output
-is too limiting. However, their [custom
-templates](https://react-svgr.com/docs/custom-templates/) might be a viable option.
-
-### Fuji -> new icons tool
-
-Create a tool to help teams migrate from Fuji to the new icon system.
-
-### Custom icon sets
-
-> We would need to consider the use case to support this feature.
-> Teams may have existing icons they wish to use alongside Universal's Icons.
-> Custom icon sets could supported by passing to the `Icon` component if they adhere to
-> the format of the [Generated TSX icon](#3-generate-tsx-icons).
-
-```tsx
-import { Icon, type IconProps } from '@yahoo/uds';
-
-// Extracted from the Fuji icon library
-// https://www.figma.com/file/5NG1HmR7s3LPxEJGL5gsWt/%F0%9F%97%BB-Fuji-Library?node-id=0%3A1951&mode=dev
-const FujiAlarmClock = ({ size, variant }: IconProps) => {
-  if (variant === 'outline') {
-    return (
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.22825 2.7065L2.70725 6.2275C2.51225 6.4225 2.25625 6.5205 2.00025 6.5205C1.74425 6.5205 1.48825 6.4225 1.29325 6.2275C0.90225 5.8375 0.90225 5.2035 1.29325 4.8135L4.81325 1.2925C5.20425 0.9025 5.83725 0.9025 6.22825 1.2925C6.61825 1.6835 6.61825 2.3165 6.22825 2.7065ZM22.7072 4.8135L19.1862 1.2925C18.9912 1.0975 18.7353 1.0005 18.4792 1.0005C18.2242 1.0005 17.9683 1.0975 17.7722 1.2925C17.3822 1.6835 17.3822 2.3165 17.7722 2.7075L21.2932 6.2275C21.6842 6.6185 22.3162 6.6185 22.7072 6.2275C23.0982 5.8375 23.0982 5.2035 22.7072 4.8135ZM11.9998 3C6.47775 3 1.99975 7.477 1.99975 13C1.99975 18.522 6.47775 23 11.9998 23C17.5227 23 21.9998 18.522 21.9998 13C21.9998 7.477 17.5227 3 11.9998 3ZM11.9998 21C7.58875 21 3.99975 17.411 3.99975 13C3.99975 8.589 7.58875 5 11.9998 5C16.4107 5 19.9998 8.589 19.9998 13C19.9998 17.411 16.4107 21 11.9998 21ZM11.4254 14.796L13.3443 16.714C13.7224 17.093 14.3367 17.093 14.7159 16.714C15.095 16.335 15.095 15.722 14.7159 15.343L13.0011 13.629V9C13.0011 8.447 12.5529 8 12.0007 8C11.4484 8 11.0002 8.447 11.0002 9V14C11.0002 14.333 11.1743 14.614 11.4254 14.796Z"
-        fill="currentColor"
-      />
-    );
-  }
-  if (variant === 'fill') {
-    return (
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.229 2.7065L2.708 6.2275C2.512 6.4235 2.257 6.5205 2.001 6.5205C1.745 6.5205 1.489 6.4235 1.294 6.2275C0.902 5.8375 0.902 5.2045 1.294 4.8135L4.814 1.2925C5.204 0.9025 5.838 0.9025 6.229 1.2925C6.618 1.6845 6.618 2.3165 6.229 2.7065ZM22.708 4.8135L19.187 1.2925C18.992 1.0985 18.736 1.0015 18.48 1.0015C18.225 1.0015 17.969 1.0985 17.773 1.2925C17.383 1.6845 17.383 2.3165 17.773 2.7085L21.294 6.2275C21.685 6.6185 22.316 6.6185 22.708 6.2275C23.099 5.8375 23.099 5.2045 22.708 4.8135ZM2 13.0005C2 7.4775 6.478 3.0005 12 3.0005C17.523 3.0005 22 7.4775 22 13.0005C22 18.5225 17.523 23.0005 12 23.0005C6.478 23.0005 2 18.5225 2 13.0005ZM11.426 14.7965L13.345 16.7145C13.723 17.0935 14.337 17.0935 14.716 16.7145C15.095 16.3355 15.095 15.7225 14.716 15.3435L13.001 13.6295V9.0005C13.001 8.4475 12.553 8.0005 12.001 8.0005C11.449 8.0005 11.001 8.4475 11.001 9.0005V14.0005C11.001 14.3335 11.175 14.6145 11.426 14.7965Z"
-        fill="currentColor"
-      />
-    );
-  }
-};
-
-export const CustomIconExample = () => {
-  // @ts-expect-error - FujiAlarmClock is a custom icon name.
-  return <Icon name={FujiAlarmClock} variant="outline" size="md" />;
-};
-```
-
-### Animated icons
-
-Icons could be extended to support motion through formats like [dotLottie](https://dotlottie.io/) or SVG animations. How to systemize motion across all icons is up for debate. There are
-also performance considerations to take into account introducing large amounts
-of JS or CSS to perform animations.
-
-### Colors: Multi-colored, two-tone, linear gradients
-
-Icons could be extended to support more complex color options icons. Multi-color
-and two-two would require underlying changes to the SVG assets designed by
-the Studio team. We would also need systemize an API around what parts of an
-icon can be colored and how to apply things like linear gradients.
-
-### RTL
-
-Right-to-left support could be added for icons. This would require changes to the `Icon` component to flip the icon horizontally when the `dir=rtl` attribute.
-
-RTL would be a larger project for UDS as it would require changes to all components, not just icons.
-
-### Figma plugin
-
-The name validation script `bun icons:validate` can be turned into a Figma plugin. This would allow designers to validate icons while they work on them in Figma. Most of the issues
-with icons are due to naming inconsistencies.
-
-## Development
-
-### Setup
-
-1. Copy the Figma access token from the [Vercel dashboard](https://vercel.com/yahoo-design/~/settings/environment-variables) or use your own by creating one in Figma > Settings.
-1. Create a `.env` file in packages/icons :
-
-   ```
-   FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN>
-   ```
-
-   This token is also added to the Github repo.
-
-### Validating icons
-
-Running `icons:validate` will check that all icons have all variants and sizes defined
-but will not export the icons or generate code.
-
-```bash
-# Do a dry-run
-bun --cwd packages/icons icons:validate
-```
-
-### Updating UDS icons
-
-> For now this is a manual process. In the future, icon export will be automated through CI.
-
-To update `@yahoo/uds-icons` with new icons, run the following command from the root of the monorepo:
-
-```bash
-bun --cwd packages/icons  icons:pipeline
-```
-
-This exports and validates icons from Figma, optimizes the SVGs, and generates the TypeScript files.
-**If there are warnings of missing variants or sizes, check Figma to ensure the icon is named properly.**.
-
-If all goes well, commit the changes and push a PR:
-
-```bash
-git co -b icons-update
-git add .
-git commit -m 'Updating codegen icons from Figma'
-git push origin icons-update
-```
-
-### Releases
-
-New versions of the `@yahoo/uds-icons` package are automatically released
-when the changeset PR is merged.
-
-## Considerations
-
-### Prior art
-
-There are many popular React icon libraries that have inspired the design of the Icon component:
-
-- [@coreui](https://coreui.io/react/docs/components/icon/#usage) react icon library
-- [Material UI icons](https://mui.com/material-ui/icons/)
-- [Lucide React](https://lucide.dev/guide/packages/lucide-react#one-generic-icon-component) icon library
-- [Shopify Polaris icons](https://polaris.shopify.com/components/images-and-icons/icon?example=icon-default)
-
-In the case of Material UI, Carbon, ADS, Uber Base UI, the icon base component is declared directly:
-
-```tsx
-import { CameraIcon } from '@mui/icons-material';
-<CameraIcon color="primary" .../>
-```
-
-Other references:
-
-- [Material UI icons](https://mui.com/material-ui/icons/)
-- [MS Fluent UI icons](https://react.fluentui.dev/?path=/docs/concepts-migration-from-v0-icons--page)
-- [Carbon Design system icons](https://carbondesignsystem.com/elements/icons/code)
-- [Atlassian Design System icons](https://atlassian.design/components/icon/examples)
-- [Material UI guide to reducing bundle size](https://mui.com/material-ui/guides/minimizing-bundle-size/)
-
-### Performance of web fonts
-
-Web font files are easy to but are a common performance bottleneck
-on the web due to their large file sizes. This can range from dozens of
-KB to 1-2MB. For example Material Design's icon font is 129KB.
-
-Fonts causes issues like delaying first render, [FOUT](https://fonts.google.com/knowledge/glossary/fout), and negatively affecting core web vitals like [First Contentful Paint (FCP)](https://web.dev/articles/fcp). These problems grow worse over time as the file size grows
-due to new icons being added.
-
-All icon glyphs are contained in a single binary font file. This essentially means
-using 1-2 icons requires the user to download all icons. The entire font needs to be
-downloaded before any icons can be displayed.
-
-Fonts also pose an issue from workflow perspective. A font needs to be
-regenerated for any small change to the illustration library. While this isn't
-too difficult (there are online tools that exist for generating fonts from SVGs albeit
-not great ones), the downstream effect on users is cache invalidation. Users
-revisiting a page will be hit with re-downloading the font, repeating the
-cycle of poor page load UX.