@leafygreen-ui/icon 14.6.1-next.0 → 14.7.0

package/src/generated/OutlineFavorite.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a0947f6a8bc4f0aa42a0db795f6439f6
+* @checksum 083eed322a2beb8496f2c97039c3e6d4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface OutlineFavoriteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const OutlineFavorite = ({
   role = 'img',
   ...props
 }: OutlineFavoriteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const OutlineFavorite = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'OutlineFavorite', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.76906 1.84601C7.76912 1.84614 7.76901 1.84587 7.76906 1.84601ZM7.99989 2.40099L9.30609 5.54144C9.30607 5.54139 9.30611 5.5415 9.30609 5.54144C9.48607 5.97429 9.89318 6.27011 10.3604 6.30757C10.3604 6.30757 10.3604 6.30757 10.3604 6.30757L13.751 6.57939L11.1677 8.79219C10.8115 9.09731 10.6564 9.57588 10.7651 10.0315L11.5542 13.3401L8.65146 11.5672C8.25149 11.3229 7.74839 11.3229 7.34841 11.5671L4.44554 13.3402L5.23476 10.0316C5.3435 9.57566 5.18809 9.09717 4.83207 8.79221C4.83208 8.79222 4.83206 8.7922 4.83207 8.79221L2.24883 6.57938L5.63936 6.30757C5.63936 6.30757 5.63937 6.30757 5.63936 6.30757C6.10663 6.27011 6.51363 5.97437 6.69363 5.54162L7.99989 2.40099ZM14.3501 6.62742C14.3501 6.62742 14.35 6.62741 14.3501 6.62742ZM9.15404 1.26996C8.72705 0.243319 7.27273 0.243376 6.84574 1.26996L5.3673 4.82456L1.52981 5.13221C0.421481 5.22106 -0.0279132 6.60421 0.816504 7.32754C0.816502 7.32754 0.816505 7.32754 0.816504 7.32754L3.74027 9.83206L2.84701 13.5768C2.58901 14.6584 3.76565 15.513 4.71443 14.9336L7.9999 12.9269L11.2854 14.9336C11.2854 14.9336 11.2854 14.9336 11.2854 14.9336C12.2342 15.5131 13.4107 14.6583 13.1527 13.5768C13.1527 13.5768 13.1527 13.5768 13.1527 13.5768L12.2596 9.83201L15.1833 7.32754C16.0275 6.60426 15.5784 5.22107 14.4699 5.13221C14.4699 5.13221 14.4699 5.13221 14.4699 5.13221L10.6325 4.82457L9.15404 1.26996C9.15404 1.26996 9.15404 1.26996 9.15404 1.26996ZM3.85623 9.9314C3.85627 9.93143 3.85619 9.93136 3.85623 9.9314Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M7.76906 1.84601C7.76912 1.84614 7.76901 1.84587 7.76906 1.84601ZM7.99989 2.40099L9.30609 5.54144C9.30607 5.54139 9.30611 5.5415 9.30609 5.54144C9.48607 5.97429 9.89318 6.27011 10.3604 6.30757C10.3604 6.30757 10.3604 6.30757 10.3604 6.30757L13.751 6.57939L11.1677 8.79219C10.8115 9.09731 10.6564 9.57588 10.7651 10.0315L11.5542 13.3401L8.65146 11.5672C8.25149 11.3229 7.74839 11.3229 7.34841 11.5671L4.44554 13.3402L5.23476 10.0316C5.3435 9.57566 5.18809 9.09717 4.83207 8.79221C4.83208 8.79222 4.83206 8.7922 4.83207 8.79221L2.24883 6.57938L5.63936 6.30757C5.63936 6.30757 5.63937 6.30757 5.63936 6.30757C6.10663 6.27011 6.51363 5.97437 6.69363 5.54162L7.99989 2.40099ZM14.3501 6.62742C14.3501 6.62742 14.35 6.62741 14.3501 6.62742ZM9.15404 1.26996C8.72705 0.243319 7.27273 0.243376 6.84574 1.26996L5.3673 4.82456L1.52981 5.13221C0.421481 5.22106 -0.0279132 6.60421 0.816504 7.32754C0.816502 7.32754 0.816505 7.32754 0.816504 7.32754L3.74027 9.83206L2.84701 13.5768C2.58901 14.6584 3.76565 15.513 4.71443 14.9336L7.9999 12.9269L11.2854 14.9336C11.2854 14.9336 11.2854 14.9336 11.2854 14.9336C12.2342 15.5131 13.4107 14.6583 13.1527 13.5768C13.1527 13.5768 13.1527 13.5768 13.1527 13.5768L12.2596 9.83201L15.1833 7.32754C16.0275 6.60426 15.5784 5.22107 14.4699 5.13221C14.4699 5.13221 14.4699 5.13221 14.4699 5.13221L10.6325 4.82457L9.15404 1.26996C9.15404 1.26996 9.15404 1.26996 9.15404 1.26996ZM3.85623 9.9314C3.85627 9.93143 3.85619 9.93136 3.85623 9.9314Z" fill={'currentColor'} /></svg>;
 };
 OutlineFavorite.displayName = 'OutlineFavorite';
 OutlineFavorite.isGlyph = true;

package/src/generated/Package.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6e59261cf982bdfcdfdce185d5ad6a28
+* @checksum 80ef69108a03312295187bd343f0835a
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PackageProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Package = ({
   role = 'img',
   ...props
 }: PackageProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Package = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Package', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.78017 1.21077L13.4652 3.92807C13.947 4.20828 14.2433 4.72229 14.2433 5.27913V10.7209C14.2433 10.9945 14.1715 11.2633 14.0349 11.5005C13.8983 11.7376 13.7019 11.9346 13.4652 12.0719L8.78017 14.7892C8.54213 14.9273 8.27184 15 7.99666 15C7.72148 15 7.45119 14.9273 7.21315 14.7892L2.52816 12.0719C2.29145 11.9346 2.09498 11.7376 1.95841 11.5005C1.82184 11.2633 1.74997 10.9945 1.75 10.7209V5.27913C1.75 4.72229 2.04627 4.20738 2.52816 3.92807L7.21315 1.21077C7.45119 1.07271 7.72148 1 7.99666 1C8.27184 1 8.54213 1.07271 8.78017 1.21077ZM7.88511 2.36908L3.75339 4.76512L7.99666 7.22631L12.2399 4.76512L8.10821 2.36908C8.07435 2.34932 8.03586 2.33891 7.99666 2.33891C7.95746 2.33891 7.91897 2.34932 7.88511 2.36908ZM3.08857 5.927V10.7209C3.08857 10.8012 3.13051 10.8735 3.20012 10.9136L7.32737 13.3079V8.38551L3.08857 5.927ZM8.66594 13.3079L12.7932 10.9136C12.8271 10.8941 12.8552 10.866 12.8747 10.8322C12.8943 10.7983 12.9047 10.76 12.9047 10.7209V5.927L8.66594 8.38551V13.3079Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M8.78017 1.21077L13.4652 3.92807C13.947 4.20828 14.2433 4.72229 14.2433 5.27913V10.7209C14.2433 10.9945 14.1715 11.2633 14.0349 11.5005C13.8983 11.7376 13.7019 11.9346 13.4652 12.0719L8.78017 14.7892C8.54213 14.9273 8.27184 15 7.99666 15C7.72148 15 7.45119 14.9273 7.21315 14.7892L2.52816 12.0719C2.29145 11.9346 2.09498 11.7376 1.95841 11.5005C1.82184 11.2633 1.74997 10.9945 1.75 10.7209V5.27913C1.75 4.72229 2.04627 4.20738 2.52816 3.92807L7.21315 1.21077C7.45119 1.07271 7.72148 1 7.99666 1C8.27184 1 8.54213 1.07271 8.78017 1.21077ZM7.88511 2.36908L3.75339 4.76512L7.99666 7.22631L12.2399 4.76512L8.10821 2.36908C8.07435 2.34932 8.03586 2.33891 7.99666 2.33891C7.95746 2.33891 7.91897 2.34932 7.88511 2.36908ZM3.08857 5.927V10.7209C3.08857 10.8012 3.13051 10.8735 3.20012 10.9136L7.32737 13.3079V8.38551L3.08857 5.927ZM8.66594 13.3079L12.7932 10.9136C12.8271 10.8941 12.8552 10.866 12.8747 10.8322C12.8943 10.7983 12.9047 10.76 12.9047 10.7209V5.927L8.66594 8.38551V13.3079Z" fill={'currentColor'} /></svg>;
 };
 Package.displayName = 'Package';
 Package.isGlyph = true;

package/src/generated/Pause.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ee75535a9d92a7747f49a72adef467a2
+* @checksum 32498b21a72a9ac79ad0f49862796caf
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PauseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pause = ({
   role = 'img',
   ...props
 }: PauseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pause = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pause', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.5 3.83333C3.5 3.3731 3.94771 3 4.5 3H5.5C6.05228 3 6.5 3.3731 6.5 3.83333V12.1667C6.5 12.6269 6.05228 13 5.5 13H4.5C3.94771 13 3.5 12.6269 3.5 12.1667V3.83333Z" fill={'currentColor'} /><path d="M9.5 3.83333C9.5 3.3731 9.94772 3 10.5 3H11.5C12.0523 3 12.5 3.3731 12.5 3.83333V12.1667C12.5 12.6269 12.0523 13 11.5 13H10.5C9.94771 13 9.5 12.6269 9.5 12.1667V3.83333Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M3.5 3.83333C3.5 3.3731 3.94771 3 4.5 3H5.5C6.05228 3 6.5 3.3731 6.5 3.83333V12.1667C6.5 12.6269 6.05228 13 5.5 13H4.5C3.94771 13 3.5 12.6269 3.5 12.1667V3.83333Z" fill={'currentColor'} /><path d="M9.5 3.83333C9.5 3.3731 9.94772 3 10.5 3H11.5C12.0523 3 12.5 3.3731 12.5 3.83333V12.1667C12.5 12.6269 12.0523 13 11.5 13H10.5C9.94771 13 9.5 12.6269 9.5 12.1667V3.83333Z" fill={'currentColor'} /></svg>;
 };
 Pause.displayName = 'Pause';
 Pause.isGlyph = true;

package/src/generated/Pending.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2990101e09c44c0d8cfafeabe85560fa
+* @checksum fe84beb7e01f087e26cb0e1d62e38a96
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pending = ({
   role = 'img',
   ...props
 }: PendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pending', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 11.75C10.0711 11.75 11.75 10.0711 11.75 8C11.75 5.92893 10.0711 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 10.0711 5.92893 11.75 8 11.75ZM8 13.25C10.8995 13.25 13.25 10.8995 13.25 8C13.25 5.10051 10.8995 2.75 8 2.75C5.10051 2.75 2.75 5.10051 2.75 8C2.75 10.8995 5.10051 13.25 8 13.25Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M8 11.75C10.0711 11.75 11.75 10.0711 11.75 8C11.75 5.92893 10.0711 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 10.0711 5.92893 11.75 8 11.75ZM8 13.25C10.8995 13.25 13.25 10.8995 13.25 8C13.25 5.10051 10.8995 2.75 8 2.75C5.10051 2.75 2.75 5.10051 2.75 8C2.75 10.8995 5.10051 13.25 8 13.25Z" fill={'currentColor'} /></svg>;
 };
 Pending.displayName = 'Pending';
 Pending.isGlyph = true;

package/src/generated/Person.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 31cf947007014102c24311d4253dbc79
+* @checksum 5b759e05777425b9385a72c39e349284
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Person = ({
   role = 'img',
   ...props
 }: PersonProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Person = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Person', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.5 4.5C11.5 6.433 9.933 8 8 8C6.067 8 4.5 6.433 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5Z" fill={'currentColor'} /><path d="M8 8C7.29183 8 6.63278 7.78968 6.08191 7.42809C6.66376 7.15352 7.31395 7 8 7C8.68605 7 9.33624 7.15352 9.91809 7.42809C9.36722 7.78968 8.70817 8 8 8Z" fill={'currentColor'} /><path d="M4.591 8.56241C4.89921 8.20507 5.42858 8.22348 5.84253 8.45005C6.48309 8.80067 7.21827 9 8 9C8.78173 9 9.51691 8.80067 10.1575 8.45005C10.5714 8.22348 11.1008 8.20507 11.409 8.56241C12.0889 9.3507 12.5 10.3773 12.5 11.5V14H3.5V11.5C3.5 10.3773 3.91111 9.3507 4.591 8.56241Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M11.5 4.5C11.5 6.433 9.933 8 8 8C6.067 8 4.5 6.433 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5Z" fill={'currentColor'} /><path d="M8 8C7.29183 8 6.63278 7.78968 6.08191 7.42809C6.66376 7.15352 7.31395 7 8 7C8.68605 7 9.33624 7.15352 9.91809 7.42809C9.36722 7.78968 8.70817 8 8 8Z" fill={'currentColor'} /><path d="M4.591 8.56241C4.89921 8.20507 5.42858 8.22348 5.84253 8.45005C6.48309 8.80067 7.21827 9 8 9C8.78173 9 9.51691 8.80067 10.1575 8.45005C10.5714 8.22348 11.1008 8.20507 11.409 8.56241C12.0889 9.3507 12.5 10.3773 12.5 11.5V14H3.5V11.5C3.5 10.3773 3.91111 9.3507 4.591 8.56241Z" fill={'currentColor'} /></svg>;
 };
 Person.displayName = 'Person';
 Person.isGlyph = true;

package/src/generated/PersonGroup.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bba5f39fa2c4a59ec027bce5e35d45
+* @checksum 601e6ecb1c75062c883f6a0b71dcea16
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonGroupProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PersonGroup = ({
   role = 'img',
   ...props
 }: PersonGroupProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PersonGroup = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PersonGroup', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.80769 8.92308C6.44331 8.92308 7.76923 7.59715 7.76923 5.96154C7.76923 4.32593 6.44331 3 4.80769 3C3.17208 3 1.84615 4.32593 1.84615 5.96154C1.84615 7.59715 3.17208 8.92308 4.80769 8.92308Z" fill={'currentColor'} /><path d="M2.98214 9.30389C2.63188 9.11218 2.18394 9.0966 1.92316 9.39897C1.34786 10.066 1 10.9347 1 11.8846V14H8.61539V11.8846C8.61539 10.9347 8.26752 10.066 7.69223 9.39897C7.43144 9.0966 6.98351 9.11218 6.63325 9.30389C6.09123 9.60056 5.46916 9.76923 4.80769 9.76923C4.14623 9.76923 3.52415 9.60056 2.98214 9.30389Z" fill={'currentColor'} /><path d="M9.61539 11.8846V13H15V11.0942C15 10.3601 14.7259 9.68888 14.2727 9.17347C14.0672 8.93982 13.7143 8.95186 13.4383 9.1C13.0113 9.32925 12.5212 9.45958 12 9.45958C11.4789 9.45958 10.9887 9.32925 10.5617 9.1C10.2857 8.95186 9.93282 8.93982 9.72735 9.17347C9.51772 9.41185 9.34641 9.68357 9.22282 9.97942C9.47531 10.5638 9.61539 11.2083 9.61539 11.8846Z" fill={'currentColor'} /><path d="M14.3334 6.28846C14.3334 7.55234 13.2887 8.57692 12 8.57692C10.7114 8.57692 9.66668 7.55234 9.66668 6.28846C9.66668 5.02458 10.7114 4 12 4C13.2887 4 14.3334 5.02458 14.3334 6.28846Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M4.80769 8.92308C6.44331 8.92308 7.76923 7.59715 7.76923 5.96154C7.76923 4.32593 6.44331 3 4.80769 3C3.17208 3 1.84615 4.32593 1.84615 5.96154C1.84615 7.59715 3.17208 8.92308 4.80769 8.92308Z" fill={'currentColor'} /><path d="M2.98214 9.30389C2.63188 9.11218 2.18394 9.0966 1.92316 9.39897C1.34786 10.066 1 10.9347 1 11.8846V14H8.61539V11.8846C8.61539 10.9347 8.26752 10.066 7.69223 9.39897C7.43144 9.0966 6.98351 9.11218 6.63325 9.30389C6.09123 9.60056 5.46916 9.76923 4.80769 9.76923C4.14623 9.76923 3.52415 9.60056 2.98214 9.30389Z" fill={'currentColor'} /><path d="M9.61539 11.8846V13H15V11.0942C15 10.3601 14.7259 9.68888 14.2727 9.17347C14.0672 8.93982 13.7143 8.95186 13.4383 9.1C13.0113 9.32925 12.5212 9.45958 12 9.45958C11.4789 9.45958 10.9887 9.32925 10.5617 9.1C10.2857 8.95186 9.93282 8.93982 9.72735 9.17347C9.51772 9.41185 9.34641 9.68357 9.22282 9.97942C9.47531 10.5638 9.61539 11.2083 9.61539 11.8846Z" fill={'currentColor'} /><path d="M14.3334 6.28846C14.3334 7.55234 13.2887 8.57692 12 8.57692C10.7114 8.57692 9.66668 7.55234 9.66668 6.28846C9.66668 5.02458 10.7114 4 12 4C13.2887 4 14.3334 5.02458 14.3334 6.28846Z" fill={'currentColor'} /></svg>;
 };
 PersonGroup.displayName = 'PersonGroup';
 PersonGroup.isGlyph = true;

package/src/generated/PersonWithLock.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c9ac63659fb3944c090d94f1824ce291
+* @checksum fd61868248373ec9a8906e59814e6799
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonWithLockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PersonWithLock = ({
   role = 'img',
   ...props
 }: PersonWithLockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PersonWithLock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PersonWithLock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10 4.5C10 5.72482 9.37085 6.8027 8.41809 7.42809C7.86722 7.78968 7.20817 8 6.5 8C5.83553 8 5.21431 7.81484 4.68512 7.49329C4.65031 7.47214 4.6159 7.4504 4.58191 7.42809C3.62915 6.8027 3 5.72482 3 4.5C3 2.567 4.567 1 6.5 1C8.433 1 10 2.567 10 4.5Z" fill={'currentColor'} /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H8V11.5C8 11.0546 8.19412 10.6546 8.50236 10.3798C8.53463 9.56068 8.89535 8.82593 9.45648 8.30362C9.19722 8.2528 8.90646 8.31377 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9.5 10.5V11C9.22386 11 9 11.2239 9 11.5V14.5C9 14.7761 9.22386 15 9.5 15H13.5C13.7761 15 14 14.7761 14 14.5V11.5C14 11.2239 13.7761 11 13.5 11V10.5C13.5 9.39543 12.6046 8.5 11.5 8.5C10.3954 8.5 9.5 9.39543 9.5 10.5ZM11.5 9.5C10.9477 9.5 10.5 9.94771 10.5 10.5V11H12.5V10.5C12.5 9.94771 12.0523 9.5 11.5 9.5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M10 4.5C10 5.72482 9.37085 6.8027 8.41809 7.42809C7.86722 7.78968 7.20817 8 6.5 8C5.83553 8 5.21431 7.81484 4.68512 7.49329C4.65031 7.47214 4.6159 7.4504 4.58191 7.42809C3.62915 6.8027 3 5.72482 3 4.5C3 2.567 4.567 1 6.5 1C8.433 1 10 2.567 10 4.5Z" fill={'currentColor'} /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H8V11.5C8 11.0546 8.19412 10.6546 8.50236 10.3798C8.53463 9.56068 8.89535 8.82593 9.45648 8.30362C9.19722 8.2528 8.90646 8.31377 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9.5 10.5V11C9.22386 11 9 11.2239 9 11.5V14.5C9 14.7761 9.22386 15 9.5 15H13.5C13.7761 15 14 14.7761 14 14.5V11.5C14 11.2239 13.7761 11 13.5 11V10.5C13.5 9.39543 12.6046 8.5 11.5 8.5C10.3954 8.5 9.5 9.39543 9.5 10.5ZM11.5 9.5C10.9477 9.5 10.5 9.94771 10.5 10.5V11H12.5V10.5C12.5 9.94771 12.0523 9.5 11.5 9.5Z" fill={'currentColor'} /></svg>;
 };
 PersonWithLock.displayName = 'PersonWithLock';
 PersonWithLock.isGlyph = true;

package/src/generated/Pin.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f84209bef2f8c074241c48b4730e561
+* @checksum 58e7153beda5946ddc4f29eb31ddb2f2
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PinProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pin = ({
   role = 'img',
   ...props
 }: PinProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pin = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pin', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10 8.5V3.3H10.6833C11.0423 3.3 11.3333 3.00898 11.3333 2.65C11.3333 2.29101 11.0423 2 10.6833 2H5.31667C4.95768 2 4.66667 2.29101 4.66667 2.65C4.66667 3.00898 4.95768 3.3 5.31667 3.3H6V8.5L4.38343 9.55077C4.14428 9.70621 4 9.97208 4 10.2573C4 10.7227 4.37728 11.1 4.84269 11.1H7.46667V14.4667C7.46667 14.7612 7.70545 15 8 15C8.29455 15 8.53333 14.7612 8.53333 14.4667V11.1H11.1573C11.6227 11.1 12 10.7227 12 10.2573C12 9.97208 11.8557 9.70622 11.6166 9.55077L10 8.5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M10 8.5V3.3H10.6833C11.0423 3.3 11.3333 3.00898 11.3333 2.65C11.3333 2.29101 11.0423 2 10.6833 2H5.31667C4.95768 2 4.66667 2.29101 4.66667 2.65C4.66667 3.00898 4.95768 3.3 5.31667 3.3H6V8.5L4.38343 9.55077C4.14428 9.70621 4 9.97208 4 10.2573C4 10.7227 4.37728 11.1 4.84269 11.1H7.46667V14.4667C7.46667 14.7612 7.70545 15 8 15C8.29455 15 8.53333 14.7612 8.53333 14.4667V11.1H11.1573C11.6227 11.1 12 10.7227 12 10.2573C12 9.97208 11.8557 9.70622 11.6166 9.55077L10 8.5Z" fill={'currentColor'} /></svg>;
 };
 Pin.displayName = 'Pin';
 Pin.isGlyph = true;

package/src/generated/Play.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eeea36a12d7e0c78bf3aad12c14a8a5d
+* @checksum dd63d3e1a63feb369c7793579dc03cb4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlayProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Play = ({
   role = 'img',
   ...props
 }: PlayProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Play = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Play', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13.7789 6.70433C14.7711 7.28315 14.7711 8.71685 13.7789 9.29567L6.25581 13.6841C5.25582 14.2674 4 13.5461 4 12.3884L4 3.61155C4 2.45387 5.25582 1.73256 6.25581 2.31589L13.7789 6.70433Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M13.7789 6.70433C14.7711 7.28315 14.7711 8.71685 13.7789 9.29567L6.25581 13.6841C5.25582 14.2674 4 13.5461 4 12.3884L4 3.61155C4 2.45387 5.25582 1.73256 6.25581 2.31589L13.7789 6.70433Z" fill={'currentColor'} /></svg>;
 };
 Play.displayName = 'Play';
 Play.isGlyph = true;

package/src/generated/Plus.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0b56c268ab06407a7c924db85ad2a16b
+* @checksum 2985e7c22cafc8aee7499ec3e9e99d3c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlusProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Plus = ({
   role = 'img',
   ...props
 }: PlusProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Plus = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Plus', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.5 2C6.94772 2 6.5 2.44772 6.5 3V6.5H3C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05228 2.44772 9.5 3 9.5H6.5V13C6.5 13.5523 6.94772 14 7.5 14H8.5C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94771 13.5523 6.5 13 6.5H9.5V3C9.5 2.44772 9.05228 2 8.5 2H7.5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M7.5 2C6.94772 2 6.5 2.44772 6.5 3V6.5H3C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05228 2.44772 9.5 3 9.5H6.5V13C6.5 13.5523 6.94772 14 7.5 14H8.5C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94771 13.5523 6.5 13 6.5H9.5V3C9.5 2.44772 9.05228 2 8.5 2H7.5Z" fill={'currentColor'} /></svg>;
 };
 Plus.displayName = 'Plus';
 Plus.isGlyph = true;

package/src/generated/PlusWithCircle.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4a198f81b67f4fff8bfad90b83e5a50e
+* @checksum cb5f557bdb5928b1aabe5ec34bcb72b3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlusWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PlusWithCircle = ({
   role = 'img',
   ...props
 }: PlusWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PlusWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PlusWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44771 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55229 4 8C4 7.44772 4.44772 7 5 7H7V5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44771 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55229 4 8C4 7.44772 4.44772 7 5 7H7V5Z" fill={'currentColor'} /></svg>;
 };
 PlusWithCircle.displayName = 'PlusWithCircle';
 PlusWithCircle.isGlyph = true;

package/src/generated/Primary.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2e1672e47a094394bb69d18d34d07c47
+* @checksum 3c53c2e96af3e55e88847edc1492781c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PrimaryProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Primary = ({
   role = 'img',
   ...props
 }: PrimaryProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Primary = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Primary', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11 6.69296C11 5.17183 9.91753 4 8.43299 4H6V12H7.49485V9.38592H8.43299C9.91753 9.38592 11 8.21408 11 6.69296ZM9.54639 6.69296C9.54639 7.34648 9.09278 7.85352 8.41237 7.85352H7.49485V5.53239H8.41237C9.09278 5.53239 9.54639 6.03944 9.54639 6.69296Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11 6.69296C11 5.17183 9.91753 4 8.43299 4H6V12H7.49485V9.38592H8.43299C9.91753 9.38592 11 8.21408 11 6.69296ZM9.54639 6.69296C9.54639 7.34648 9.09278 7.85352 8.41237 7.85352H7.49485V5.53239H8.41237C9.09278 5.53239 9.54639 6.03944 9.54639 6.69296Z" fill={'currentColor'} /></svg>;
 };
 Primary.displayName = 'Primary';
 Primary.isGlyph = true;

package/src/generated/Project.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d3fcc0dee5e5431858994a79e3d5b9b3
+* @checksum 0b63e5d3545a1caffcf310659518e8e9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ProjectProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Project = ({
   role = 'img',
   ...props
 }: ProjectProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Project = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Project', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M1 2C1 1.72386 1.22386 1.5 1.5 1.5H14.5C14.7761 1.5 15 1.72386 15 2V4C15 4.27614 14.7761 4.5 14.5 4.5H1.5C1.22386 4.5 1 4.27614 1 4V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25V13.75C2 14.1642 2.33579 14.5 2.75 14.5H13.25C13.6642 14.5 14 14.1642 14 13.75V6.25C14 5.83579 13.6642 5.5 13.25 5.5H2.75ZM6.25 7C5.97386 7 5.75 7.22386 5.75 7.5C5.75 7.77614 5.97386 8 6.25 8H9.75C10.0261 8 10.25 7.77614 10.25 7.5C10.25 7.22386 10.0261 7 9.75 7H6.25Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M1 2C1 1.72386 1.22386 1.5 1.5 1.5H14.5C14.7761 1.5 15 1.72386 15 2V4C15 4.27614 14.7761 4.5 14.5 4.5H1.5C1.22386 4.5 1 4.27614 1 4V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25V13.75C2 14.1642 2.33579 14.5 2.75 14.5H13.25C13.6642 14.5 14 14.1642 14 13.75V6.25C14 5.83579 13.6642 5.5 13.25 5.5H2.75ZM6.25 7C5.97386 7 5.75 7.22386 5.75 7.5C5.75 7.77614 5.97386 8 6.25 8H9.75C10.0261 8 10.25 7.77614 10.25 7.5C10.25 7.22386 10.0261 7 9.75 7H6.25Z" fill={'currentColor'} /></svg>;
 };
 Project.displayName = 'Project';
 Project.isGlyph = true;

package/src/generated/QuestionMarkWithCircle.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3c77fdc2bdcc5a2511a78ec3a8058b1
+* @checksum e8d911b6712a20a06b08622aa024bcb8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface QuestionMarkWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const QuestionMarkWithCircle = ({
   role = 'img',
   ...props
 }: QuestionMarkWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const QuestionMarkWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'QuestionMarkWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM6.93227 5.61177C7.0539 5.29832 7.42458 5 7.94143 5C8.61601 5 9 5.4776 9 5.875C9 6.03721 8.94264 6.20509 8.82756 6.35116C8.76453 6.43073 8.68409 6.50399 8.58601 6.56699L8.56965 6.57753C8.53867 6.59652 8.50602 6.61442 8.47169 6.63109C7.88242 6.91723 6.94143 7.59774 6.94143 8.75V9C6.94143 9.55228 7.38915 10 7.94143 10C8.49372 10 8.94143 9.55228 8.94143 9C8.94143 8.96493 8.95319 8.88081 9.0803 8.7302C9.21177 8.57445 9.41415 8.41209 9.66687 8.24976C9.94193 8.07309 10.1889 7.85162 10.3934 7.59438C10.7685 7.12328 11 6.5327 11 5.875C11 4.20133 9.54068 3 7.94143 3C6.66566 3 5.51129 3.74519 5.06773 4.88823C4.86793 5.40311 5.12335 5.98247 5.63823 6.18227C6.15311 6.38207 6.73247 6.12665 6.93227 5.61177ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM6.93227 5.61177C7.0539 5.29832 7.42458 5 7.94143 5C8.61601 5 9 5.4776 9 5.875C9 6.03721 8.94264 6.20509 8.82756 6.35116C8.76453 6.43073 8.68409 6.50399 8.58601 6.56699L8.56965 6.57753C8.53867 6.59652 8.50602 6.61442 8.47169 6.63109C7.88242 6.91723 6.94143 7.59774 6.94143 8.75V9C6.94143 9.55228 7.38915 10 7.94143 10C8.49372 10 8.94143 9.55228 8.94143 9C8.94143 8.96493 8.95319 8.88081 9.0803 8.7302C9.21177 8.57445 9.41415 8.41209 9.66687 8.24976C9.94193 8.07309 10.1889 7.85162 10.3934 7.59438C10.7685 7.12328 11 6.5327 11 5.875C11 4.20133 9.54068 3 7.94143 3C6.66566 3 5.51129 3.74519 5.06773 4.88823C4.86793 5.40311 5.12335 5.98247 5.63823 6.18227C6.15311 6.38207 6.73247 6.12665 6.93227 5.61177ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13Z" fill={'currentColor'} /></svg>;
 };
 QuestionMarkWithCircle.displayName = 'QuestionMarkWithCircle';
 QuestionMarkWithCircle.isGlyph = true;

package/src/generated/Read.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2048eecd64e1b11d7b3e08314290329a
+* @checksum c8ba5b394dffb71ce28c3e47de497f15
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ReadProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Read = ({
   role = 'img',
   ...props
 }: ReadProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Read = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Read', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.0114 8.76202L10.0114 4.18542H8.62052C8.04714 4.18542 7.78167 3.54027 8.21511 3.20017L10.8446 1.13695C11.0773 0.95435 11.4227 0.954351 11.6554 1.13695L14.2849 3.20017C14.7183 3.54027 14.4529 4.18542 13.8795 4.18542H12.5703L12.5703 8.76202C12.5703 9.47823 11.9975 10.0588 11.2909 10.0588C10.5843 10.0588 10.0114 9.47823 10.0114 8.76202Z" fill={'currentColor'} /><path d="M8.82311 9.15837C8.00915 9.34791 7.14575 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22932 2.74517 8.7953C2.2802 8.61118 1.84763 8.38034 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.90824 11.2435 10.0917 11.1584 10.2574 11.068C9.50707 10.722 8.9553 10.0108 8.82311 9.15837Z" fill={'currentColor'} /><path d="M6.7872 3.47867C6.64989 3.47328 6.51234 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83327 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C7.14312 8.61764 8.00522 8.5169 8.79268 8.3191L8.79268 5.42072H8.62052C7.8543 5.42072 7.19331 4.97118 6.91542 4.29584C6.80845 4.03589 6.76513 3.75542 6.7872 3.47867Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M10.0114 8.76202L10.0114 4.18542H8.62052C8.04714 4.18542 7.78167 3.54027 8.21511 3.20017L10.8446 1.13695C11.0773 0.95435 11.4227 0.954351 11.6554 1.13695L14.2849 3.20017C14.7183 3.54027 14.4529 4.18542 13.8795 4.18542H12.5703L12.5703 8.76202C12.5703 9.47823 11.9975 10.0588 11.2909 10.0588C10.5843 10.0588 10.0114 9.47823 10.0114 8.76202Z" fill={'currentColor'} /><path d="M8.82311 9.15837C8.00915 9.34791 7.14575 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22932 2.74517 8.7953C2.2802 8.61118 1.84763 8.38034 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.90824 11.2435 10.0917 11.1584 10.2574 11.068C9.50707 10.722 8.9553 10.0108 8.82311 9.15837Z" fill={'currentColor'} /><path d="M6.7872 3.47867C6.64989 3.47328 6.51234 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83327 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C7.14312 8.61764 8.00522 8.5169 8.79268 8.3191L8.79268 5.42072H8.62052C7.8543 5.42072 7.19331 4.97118 6.91542 4.29584C6.80845 4.03589 6.76513 3.75542 6.7872 3.47867Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /></svg>;
 };
 Read.displayName = 'Read';
 Read.isGlyph = true;