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

package/src/generated/Array.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bf0a50a840b53f371336851204c2a5
+* @checksum c6b9e3f17644ba370dbfbed5e69eaf1c
 */
 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 ArrayProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Array = ({
   role = 'img',
   ...props
 }: ArrayProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Array = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Array', {
     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="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.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="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill={'currentColor'} /></svg>;
 };
 Array.displayName = 'Array';
 Array.isGlyph = true;

package/src/generated/ArrowDown.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 80388a72ab7b330b3a6580b0c297fddf
+* @checksum 9437f68d12bf7a9a78296d9c9f946a47
 */
 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 ArrowDownProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowDown = ({
   role = 'img',
   ...props
 }: ArrowDownProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowDown = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowDown', {
     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="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z" 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="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z" fill={'currentColor'} /></svg>;
 };
 ArrowDown.displayName = 'ArrowDown';
 ArrowDown.isGlyph = true;

package/src/generated/ArrowLeft.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b616058bc8611a0f41a0b72ef9007615
+* @checksum b8f0afcac7be2bbf00ce7e4eeb60dd18
 */
 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 ArrowLeftProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowLeft = ({
   role = 'img',
   ...props
 }: ArrowLeftProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowLeft = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowLeft', {
     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="M13 6.83212L6.05559 6.83212L7.59059 5.29711C7.98112 4.90659 7.98112 4.27342 7.59059 3.8829L7.35168 3.64398C6.96115 3.25346 6.32799 3.25345 5.93746 3.64398L2.55483 7.02661C2.5456 7.03518 2.5365 7.04395 2.52752 7.05292L2.2886 7.29184C1.89808 7.68237 1.89808 8.31553 2.2886 8.70605L5.93975 12.3572C6.33028 12.7477 6.96344 12.7477 7.35397 12.3572L7.59288 12.1183C7.98341 11.7278 7.98341 11.0946 7.59288 10.7041L6.0588 9.17L13 9.17C13.5523 9.17 14 8.72228 14 8.17V7.83212C14 7.27983 13.5523 6.83212 13 6.83212Z" 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="M13 6.83212L6.05559 6.83212L7.59059 5.29711C7.98112 4.90659 7.98112 4.27342 7.59059 3.8829L7.35168 3.64398C6.96115 3.25346 6.32799 3.25345 5.93746 3.64398L2.55483 7.02661C2.5456 7.03518 2.5365 7.04395 2.52752 7.05292L2.2886 7.29184C1.89808 7.68237 1.89808 8.31553 2.2886 8.70605L5.93975 12.3572C6.33028 12.7477 6.96344 12.7477 7.35397 12.3572L7.59288 12.1183C7.98341 11.7278 7.98341 11.0946 7.59288 10.7041L6.0588 9.17L13 9.17C13.5523 9.17 14 8.72228 14 8.17V7.83212C14 7.27983 13.5523 6.83212 13 6.83212Z" fill={'currentColor'} /></svg>;
 };
 ArrowLeft.displayName = 'ArrowLeft';
 ArrowLeft.isGlyph = true;

package/src/generated/ArrowRight.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23de185adab4900108b14253a1e923ae
+* @checksum 26a58ea4031a88c43e834c9b18d201f9
 */
 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 ArrowRightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowRight = ({
   role = 'img',
   ...props
 }: ArrowRightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowRight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowRight', {
     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 6.83212L9.94442 6.83212L8.40941 5.29711C8.01888 4.90659 8.01889 4.27342 8.40941 3.8829L8.64833 3.64398C9.03885 3.25346 9.67201 3.25345 10.0625 3.64398L13.4452 7.02661C13.4544 7.03518 13.4635 7.04395 13.4725 7.05292L13.7114 7.29184C14.1019 7.68237 14.1019 8.31553 13.7114 8.70605L10.0602 12.3572C9.66972 12.7477 9.03656 12.7477 8.64603 12.3572L8.40712 12.1183C8.01659 11.7278 8.01659 11.0946 8.40712 10.7041L9.9412 9.17L3 9.17C2.44771 9.17 2 8.72228 2 8.17L2 7.83212C2 7.27983 2.44772 6.83212 3 6.83212Z" 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 6.83212L9.94442 6.83212L8.40941 5.29711C8.01888 4.90659 8.01889 4.27342 8.40941 3.8829L8.64833 3.64398C9.03885 3.25346 9.67201 3.25345 10.0625 3.64398L13.4452 7.02661C13.4544 7.03518 13.4635 7.04395 13.4725 7.05292L13.7114 7.29184C14.1019 7.68237 14.1019 8.31553 13.7114 8.70605L10.0602 12.3572C9.66972 12.7477 9.03656 12.7477 8.64603 12.3572L8.40712 12.1183C8.01659 11.7278 8.01659 11.0946 8.40712 10.7041L9.9412 9.17L3 9.17C2.44771 9.17 2 8.72228 2 8.17L2 7.83212C2 7.27983 2.44772 6.83212 3 6.83212Z" fill={'currentColor'} /></svg>;
 };
 ArrowRight.displayName = 'ArrowRight';
 ArrowRight.isGlyph = true;

package/src/generated/ArrowUp.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 49ee0cf73d7b62b81389b9ff02da9762
+* @checksum 4d9da39771da1e36ac5d8227b2cc44c1
 */
 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 ArrowUpProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowUp = ({
   role = 'img',
   ...props
 }: ArrowUpProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowUp = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowUp', {
     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="M9.16788 13L9.16788 6.05558L10.7029 7.59059C11.0934 7.98112 11.7266 7.98112 12.1171 7.59059L12.356 7.35168C12.7465 6.96115 12.7465 6.32799 12.356 5.93746L8.97339 2.55483C8.96482 2.5456 8.95605 2.5365 8.94707 2.52752L8.70816 2.2886C8.31763 1.89808 7.68447 1.89808 7.29394 2.2886L3.64279 5.93975C3.25227 6.33028 3.25227 6.96344 3.64279 7.35397L3.88171 7.59288C4.27223 7.98341 4.9054 7.98341 5.29592 7.59288L6.83 6.0588L6.83 13C6.83 13.5523 7.27772 14 7.83 14H8.16788C8.72017 14 9.16788 13.5523 9.16788 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 d="M9.16788 13L9.16788 6.05558L10.7029 7.59059C11.0934 7.98112 11.7266 7.98112 12.1171 7.59059L12.356 7.35168C12.7465 6.96115 12.7465 6.32799 12.356 5.93746L8.97339 2.55483C8.96482 2.5456 8.95605 2.5365 8.94707 2.52752L8.70816 2.2886C8.31763 1.89808 7.68447 1.89808 7.29394 2.2886L3.64279 5.93975C3.25227 6.33028 3.25227 6.96344 3.64279 7.35397L3.88171 7.59288C4.27223 7.98341 4.9054 7.98341 5.29592 7.59288L6.83 6.0588L6.83 13C6.83 13.5523 7.27772 14 7.83 14H8.16788C8.72017 14 9.16788 13.5523 9.16788 13Z" fill={'currentColor'} /></svg>;
 };
 ArrowUp.displayName = 'ArrowUp';
 ArrowUp.isGlyph = true;

package/src/generated/Award.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3b9e32a25f51f7150b52bafd3268e9e7
+* @checksum f31d0f9bba287d5bf4a46e0c1bae3dcb
 */
 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 AwardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Award = ({
   role = 'img',
   ...props
 }: AwardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Award = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Award', {
     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="M7.86523 4.50095C7.91495 4.37545 8.08505 4.37545 8.13477 4.50095L8.58203 5.63056C8.60293 5.68332 8.64988 5.71981 8.7041 5.72453L9.86621 5.82242C9.99499 5.83357 10.0474 6.00227 9.94922 6.09063L9.06445 6.88644C9.023 6.92372 9.00492 6.98243 9.01758 7.03817L9.28711 8.22749C9.31712 8.35959 9.18073 8.46438 9.07031 8.3939L8.07617 7.75568C8.0296 7.72581 7.9704 7.72581 7.92383 7.75568L6.92969 8.3939C6.81926 8.46437 6.68288 8.35959 6.71289 8.22749L6.98242 7.03817C6.99508 6.98243 6.977 6.92372 6.93555 6.88644L6.05078 6.09063C5.95261 6.00227 6.00503 5.83356 6.13379 5.82242L7.2959 5.72453C7.35011 5.7198 7.39706 5.68331 7.41797 5.63056L7.86523 4.50095Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 1.3999C10.7614 1.3999 13 3.64376 13 6.41169C13 7.54003 12.6278 8.58111 12 9.41877V13.5975C12 14.1511 11.5523 14.5999 11 14.5999H10.9727C10.8025 14.5999 10.635 14.5565 10.4863 14.4736L8 13.0856L5.51367 14.4736C5.36498 14.5565 5.1975 14.5999 5.02734 14.5999H5C4.44772 14.5999 4 14.1511 4 13.5975V9.41877C3.37223 8.58111 3 7.54003 3 6.41169C3 3.64376 5.23858 1.3999 8 1.3999ZM11 10.4201C10.1642 11.0496 9.1259 11.4235 8 11.4235C6.8741 11.4235 5.83577 11.0496 5 10.4201V13.5975H5.02734L7.51367 12.2095C7.81599 12.0409 8.18401 12.0409 8.48633 12.2095L10.9727 13.5975H11V10.4201ZM8 2.40226C5.79086 2.40226 4 4.19734 4 6.41169C4 8.62604 5.79086 10.4211 8 10.4211C10.2091 10.4211 12 8.62604 12 6.41169C12 4.19734 10.2091 2.40226 8 2.40226Z" 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="M7.86523 4.50095C7.91495 4.37545 8.08505 4.37545 8.13477 4.50095L8.58203 5.63056C8.60293 5.68332 8.64988 5.71981 8.7041 5.72453L9.86621 5.82242C9.99499 5.83357 10.0474 6.00227 9.94922 6.09063L9.06445 6.88644C9.023 6.92372 9.00492 6.98243 9.01758 7.03817L9.28711 8.22749C9.31712 8.35959 9.18073 8.46438 9.07031 8.3939L8.07617 7.75568C8.0296 7.72581 7.9704 7.72581 7.92383 7.75568L6.92969 8.3939C6.81926 8.46437 6.68288 8.35959 6.71289 8.22749L6.98242 7.03817C6.99508 6.98243 6.977 6.92372 6.93555 6.88644L6.05078 6.09063C5.95261 6.00227 6.00503 5.83356 6.13379 5.82242L7.2959 5.72453C7.35011 5.7198 7.39706 5.68331 7.41797 5.63056L7.86523 4.50095Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 1.3999C10.7614 1.3999 13 3.64376 13 6.41169C13 7.54003 12.6278 8.58111 12 9.41877V13.5975C12 14.1511 11.5523 14.5999 11 14.5999H10.9727C10.8025 14.5999 10.635 14.5565 10.4863 14.4736L8 13.0856L5.51367 14.4736C5.36498 14.5565 5.1975 14.5999 5.02734 14.5999H5C4.44772 14.5999 4 14.1511 4 13.5975V9.41877C3.37223 8.58111 3 7.54003 3 6.41169C3 3.64376 5.23858 1.3999 8 1.3999ZM11 10.4201C10.1642 11.0496 9.1259 11.4235 8 11.4235C6.8741 11.4235 5.83577 11.0496 5 10.4201V13.5975H5.02734L7.51367 12.2095C7.81599 12.0409 8.18401 12.0409 8.48633 12.2095L10.9727 13.5975H11V10.4201ZM8 2.40226C5.79086 2.40226 4 4.19734 4 6.41169C4 8.62604 5.79086 10.4211 8 10.4211C10.2091 10.4211 12 8.62604 12 6.41169C12 4.19734 10.2091 2.40226 8 2.40226Z" fill={'currentColor'} /></svg>;
 };
 Award.displayName = 'Award';
 Award.isGlyph = true;

package/src/generated/Beaker.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 672dda640a4f6847536982968cfb0a72
+* @checksum 50f0566b44be1897710a3b16b07575dc
 */
 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 BeakerProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Beaker = ({
   role = 'img',
   ...props
 }: BeakerProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Beaker = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Beaker', {
     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="M5.95288 1.8C5.95288 1.51997 5.95288 1.37996 6.00738 1.273C6.05532 1.17892 6.13181 1.10243 6.22589 1.0545C6.33284 1 6.47286 1 6.75288 1H9.15288C9.43291 1 9.57292 1 9.67988 1.0545C9.77396 1.10243 9.85045 1.17892 9.89839 1.273C9.95288 1.37996 9.95288 1.51997 9.95288 1.8V2.2C9.95288 2.48003 9.95288 2.62004 9.89839 2.727C9.85045 2.82108 9.77396 2.89757 9.67988 2.9455C9.57292 3 9.43291 3 9.15288 3H6.75288C6.47286 3 6.33284 3 6.22589 2.9455C6.13181 2.89757 6.05532 2.82108 6.00738 2.727C5.95288 2.62004 5.95288 2.48003 5.95288 2.2V1.8ZM6.00919 4.26951C5.95289 4.37788 5.95289 4.52025 5.95289 4.805V6H5.95288L2.94611 11.4122C2.28339 12.6051 1.95203 13.2015 2.01416 13.6895C2.06606 14.097 2.28284 14.4654 2.61388 14.7087C3.01025 15 3.69257 15 5.0572 15H10.8485C12.2132 15 12.8955 15 13.2919 14.7087C13.6229 14.4654 13.8397 14.097 13.8916 13.6895C13.9537 13.2015 13.6224 12.6051 12.9596 11.4122L12.9596 11.4122L9.95289 6.00003V4.805C9.95289 4.52025 9.95289 4.37788 9.8966 4.26951C9.84916 4.17819 9.7747 4.10373 9.68338 4.05629C9.57501 4 9.43264 4 9.14789 4H6.75789C6.47315 4 6.33077 4 6.2224 4.05629C6.13108 4.10373 6.05662 4.17819 6.00919 4.26951ZM9.33288 9L6.30288 9.5L5.01554 11.8106C4.79758 12.2019 4.6886 12.3975 4.70716 12.5576C4.72336 12.6973 4.79764 12.8237 4.9118 12.9059C5.04264 13 5.26656 13 5.71439 13H10.1939C10.641 13 10.8646 13 10.9954 12.906C11.1095 12.824 11.1838 12.6977 11.2001 12.5582C11.2189 12.3982 11.1104 12.2027 10.8934 11.8118L9.33288 9Z" 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="M5.95288 1.8C5.95288 1.51997 5.95288 1.37996 6.00738 1.273C6.05532 1.17892 6.13181 1.10243 6.22589 1.0545C6.33284 1 6.47286 1 6.75288 1H9.15288C9.43291 1 9.57292 1 9.67988 1.0545C9.77396 1.10243 9.85045 1.17892 9.89839 1.273C9.95288 1.37996 9.95288 1.51997 9.95288 1.8V2.2C9.95288 2.48003 9.95288 2.62004 9.89839 2.727C9.85045 2.82108 9.77396 2.89757 9.67988 2.9455C9.57292 3 9.43291 3 9.15288 3H6.75288C6.47286 3 6.33284 3 6.22589 2.9455C6.13181 2.89757 6.05532 2.82108 6.00738 2.727C5.95288 2.62004 5.95288 2.48003 5.95288 2.2V1.8ZM6.00919 4.26951C5.95289 4.37788 5.95289 4.52025 5.95289 4.805V6H5.95288L2.94611 11.4122C2.28339 12.6051 1.95203 13.2015 2.01416 13.6895C2.06606 14.097 2.28284 14.4654 2.61388 14.7087C3.01025 15 3.69257 15 5.0572 15H10.8485C12.2132 15 12.8955 15 13.2919 14.7087C13.6229 14.4654 13.8397 14.097 13.8916 13.6895C13.9537 13.2015 13.6224 12.6051 12.9596 11.4122L12.9596 11.4122L9.95289 6.00003V4.805C9.95289 4.52025 9.95289 4.37788 9.8966 4.26951C9.84916 4.17819 9.7747 4.10373 9.68338 4.05629C9.57501 4 9.43264 4 9.14789 4H6.75789C6.47315 4 6.33077 4 6.2224 4.05629C6.13108 4.10373 6.05662 4.17819 6.00919 4.26951ZM9.33288 9L6.30288 9.5L5.01554 11.8106C4.79758 12.2019 4.6886 12.3975 4.70716 12.5576C4.72336 12.6973 4.79764 12.8237 4.9118 12.9059C5.04264 13 5.26656 13 5.71439 13H10.1939C10.641 13 10.8646 13 10.9954 12.906C11.1095 12.824 11.1838 12.6977 11.2001 12.5582C11.2189 12.3982 11.1104 12.2027 10.8934 11.8118L9.33288 9Z" fill={'currentColor'} /></svg>;
 };
 Beaker.displayName = 'Beaker';
 Beaker.isGlyph = true;

package/src/generated/Bell.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c63a1d36f26f487d4e09ec57d2e07e96
+* @checksum 74750d7efa8657bf2279254580dad0e8
 */
 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 BellProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Bell = ({
   role = 'img',
   ...props
 }: BellProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Bell = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Bell', {
     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="M12.6248 6.1383C12.4098 4.25462 11.09 2.74034 9.35673 2.21251C9.2281 1.52063 8.66955 1 8 1C7.33044 1 6.77189 1.52063 6.64326 2.21251C4.91 2.74034 3.59017 4.25462 3.37524 6.1383L2.92307 10.1011H2.94943C2.42507 10.1011 2 10.5262 2 11.0506C2 11.5749 2.42507 12 2.94943 12H13.0506C13.5749 12 14 11.5749 14 11.0506C14 10.5262 13.5749 10.1011 13.0506 10.1011H13.0769L12.6248 6.1383ZM8 15C6.89543 15 6 14.1046 6 13H10C10 14.1046 9.10457 15 8 15Z" 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="M12.6248 6.1383C12.4098 4.25462 11.09 2.74034 9.35673 2.21251C9.2281 1.52063 8.66955 1 8 1C7.33044 1 6.77189 1.52063 6.64326 2.21251C4.91 2.74034 3.59017 4.25462 3.37524 6.1383L2.92307 10.1011H2.94943C2.42507 10.1011 2 10.5262 2 11.0506C2 11.5749 2.42507 12 2.94943 12H13.0506C13.5749 12 14 11.5749 14 11.0506C14 10.5262 13.5749 10.1011 13.0506 10.1011H13.0769L12.6248 6.1383ZM8 15C6.89543 15 6 14.1046 6 13H10C10 14.1046 9.10457 15 8 15Z" fill={'currentColor'} /></svg>;
 };
 Bell.displayName = 'Bell';
 Bell.isGlyph = true;

package/src/generated/Biometric.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b38fe171af2489e14639cf28ce6f82a9
+* @checksum cdc56ff7da42d8345c636fffba370395
 */
 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 BiometricProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Biometric = ({
   role = 'img',
   ...props
 }: BiometricProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Biometric = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Biometric', {
     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 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z" 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 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z" fill={'currentColor'} /></svg>;
 };
 Biometric.displayName = 'Biometric';
 Biometric.isGlyph = true;

package/src/generated/Boolean.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 224d52aa04474618343045cb91eb024b
+* @checksum 307fea66f968bdaa9d730c72c09867c6
 */
 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 BooleanProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Boolean = ({
   role = 'img',
   ...props
 }: BooleanProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Boolean = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Boolean', {
     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 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM12 8C12 10.2091 10.2091 12 8 12V4C10.2091 4 12 5.79086 12 8Z" 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 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM12 8C12 10.2091 10.2091 12 8 12V4C10.2091 4 12 5.79086 12 8Z" fill={'currentColor'} /></svg>;
 };
 Boolean.displayName = 'Boolean';
 Boolean.isGlyph = true;

package/src/generated/Building.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cd0cc93f287eb3cfa85f6b4f23f219ea
+* @checksum c34ec414130942b0a18e0047619a8110
 */
 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 BuildingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Building = ({
   role = 'img',
   ...props
 }: BuildingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Building = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Building', {
     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="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7.5V10.5V15H6V13H4V15H1V11H5.5C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10H1V8H5.5C5.77614 8 6 7.77614 6 7.5C6 7.22386 5.77614 7 5.5 7H1V5H5.5C5.77614 5 6 4.77614 6 4.5C6 4.22386 5.77614 4 5.5 4H1V2ZM9 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H9V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H9V5C9 4.44772 9.44772 4 10 4H15C15.5523 4 16 4.44772 16 5V15H14V13H12V15H9V11Z" 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="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7.5V10.5V15H6V13H4V15H1V11H5.5C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10H1V8H5.5C5.77614 8 6 7.77614 6 7.5C6 7.22386 5.77614 7 5.5 7H1V5H5.5C5.77614 5 6 4.77614 6 4.5C6 4.22386 5.77614 4 5.5 4H1V2ZM9 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H9V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H9V5C9 4.44772 9.44772 4 10 4H15C15.5523 4 16 4.44772 16 5V15H14V13H12V15H9V11Z" fill={'currentColor'} /></svg>;
 };
 Building.displayName = 'Building';
 Building.isGlyph = true;

package/src/generated/Bulb.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a01c0e6b2545e3d46df479877be7691a
+* @checksum 8c69a6795e940dcfd317faad38eb0801
 */
 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 BulbProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Bulb = ({
   role = 'img',
   ...props
 }: BulbProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Bulb = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Bulb', {
     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="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill={'currentColor'} /><path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill={'currentColor'} /><path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" 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="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill={'currentColor'} /><path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill={'currentColor'} /><path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" fill={'currentColor'} /></svg>;
 };
 Bulb.displayName = 'Bulb';
 Bulb.isGlyph = true;

package/src/generated/Calendar.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7112ff5b67ee7b683204ef6c2ef8f4bc
+* @checksum 3f4399743b8d60fb6c36de3b8256456c
 */
 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 CalendarProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Calendar = ({
   role = 'img',
   ...props
 }: CalendarProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Calendar = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Calendar', {
     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 2C4 1.44772 4.44772 1 5 1C5.55228 1 6 1.44772 6 2V3C6 3.55228 5.55228 4 5 4C4.44772 4 4 3.55228 4 3V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9 3H7C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C1.89543 3 1 3.89543 1 5V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V5C15 3.89543 14.1046 3 13 3C13 4.10457 12.1046 5 11 5C9.89543 5 9 4.10457 9 3ZM12 7H9V10H12V7Z" fill={'currentColor'} /><path d="M10 3C10 3.55228 10.4477 4 11 4C11.5523 4 12 3.55228 12 3V2C12 1.44772 11.5523 1 11 1C10.4477 1 10 1.44772 10 2V3Z" 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 2C4 1.44772 4.44772 1 5 1C5.55228 1 6 1.44772 6 2V3C6 3.55228 5.55228 4 5 4C4.44772 4 4 3.55228 4 3V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9 3H7C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C1.89543 3 1 3.89543 1 5V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V5C15 3.89543 14.1046 3 13 3C13 4.10457 12.1046 5 11 5C9.89543 5 9 4.10457 9 3ZM12 7H9V10H12V7Z" fill={'currentColor'} /><path d="M10 3C10 3.55228 10.4477 4 11 4C11.5523 4 12 3.55228 12 3V2C12 1.44772 11.5523 1 11 1C10.4477 1 10 1.44772 10 2V3Z" fill={'currentColor'} /></svg>;
 };
 Calendar.displayName = 'Calendar';
 Calendar.isGlyph = true;

package/src/generated/Camera.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 47b24752cf1f046d783a987dcb3c42dd
+* @checksum 8aff628acbfb7f2ca52670475c85bf3e
 */
 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 CameraProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Camera = ({
   role = 'img',
   ...props
 }: CameraProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Camera = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Camera', {
     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.25 8.5C10.25 9.74264 9.24264 10.75 8 10.75C6.75736 10.75 5.75 9.74264 5.75 8.5C5.75 7.25736 6.75736 6.25 8 6.25C9.24264 6.25 10.25 7.25736 10.25 8.5Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.58541 3.32918C4.8395 2.821 5.35889 2.5 5.92705 2.5H10.0729C10.6411 2.5 11.1605 2.821 11.4146 3.32918L11.7236 3.94721C11.893 4.286 12.2393 4.5 12.618 4.5H13.5C14.3284 4.5 15 5.17157 15 6V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V6C1 5.17157 1.67157 4.5 2.5 4.5H3.38197C3.76074 4.5 4.107 4.286 4.27639 3.94721L4.58541 3.32918ZM11.5 8.5C11.5 10.433 9.933 12 8 12C6.067 12 4.5 10.433 4.5 8.5C4.5 6.567 6.067 5 8 5C9.933 5 11.5 6.567 11.5 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.25 8.5C10.25 9.74264 9.24264 10.75 8 10.75C6.75736 10.75 5.75 9.74264 5.75 8.5C5.75 7.25736 6.75736 6.25 8 6.25C9.24264 6.25 10.25 7.25736 10.25 8.5Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.58541 3.32918C4.8395 2.821 5.35889 2.5 5.92705 2.5H10.0729C10.6411 2.5 11.1605 2.821 11.4146 3.32918L11.7236 3.94721C11.893 4.286 12.2393 4.5 12.618 4.5H13.5C14.3284 4.5 15 5.17157 15 6V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V6C1 5.17157 1.67157 4.5 2.5 4.5H3.38197C3.76074 4.5 4.107 4.286 4.27639 3.94721L4.58541 3.32918ZM11.5 8.5C11.5 10.433 9.933 12 8 12C6.067 12 4.5 10.433 4.5 8.5C4.5 6.567 6.067 5 8 5C9.933 5 11.5 6.567 11.5 8.5Z" fill={'currentColor'} /></svg>;
 };
 Camera.displayName = 'Camera';
 Camera.isGlyph = true;

package/src/generated/Cap.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4e96db1fcbbe1eaff9f36dcc67cde9f2
+* @checksum e34fc73647e110da1848d92ab1f69a7f
 */
 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 CapProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Cap = ({
   role = 'img',
   ...props
 }: CapProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Cap = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Cap', {
     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="M2.96929 8.00791V10.3071C2.96929 10.3383 2.96986 10.3693 2.97099 10.4002C2.96986 10.4862 2.96929 10.5734 2.96929 10.6618C2.96929 12.5877 5.50373 13.5 7.96929 13.5C10.4348 13.5 12.9693 12.5877 12.9693 10.6618C12.9693 10.5773 12.9686 10.4938 12.9672 10.4113C12.9686 10.3767 12.9693 10.342 12.9693 10.3071V8.00118L8.70622 9.78705C8.20883 9.99541 7.64838 9.99409 7.15198 9.78338L2.96929 8.00791Z" fill={'currentColor'} /><path d="M7.56463 2.58331C7.81791 2.4729 8.10559 2.47221 8.3594 2.5814L14.7092 5.31304C15.1145 5.4874 15.1118 6.06303 14.7048 6.23351L8.35054 8.89542C8.10185 8.9996 7.82162 8.99894 7.57343 8.89358L1.30463 6.23261C0.90058 6.0611 0.897823 5.48941 1.3002 5.31401L7.56463 2.58331Z" fill={'currentColor'} /><path d="M13.9693 7.62582V9.10335C13.6704 9.27626 13.4693 9.59943 13.4693 9.96957C13.4693 10.5219 13.917 10.9696 14.4693 10.9696C15.0216 10.9696 15.4693 10.5219 15.4693 9.96957C15.4693 9.59943 15.2682 9.27626 14.9693 9.10336V7.20691L13.9693 7.62582Z" 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="M2.96929 8.00791V10.3071C2.96929 10.3383 2.96986 10.3693 2.97099 10.4002C2.96986 10.4862 2.96929 10.5734 2.96929 10.6618C2.96929 12.5877 5.50373 13.5 7.96929 13.5C10.4348 13.5 12.9693 12.5877 12.9693 10.6618C12.9693 10.5773 12.9686 10.4938 12.9672 10.4113C12.9686 10.3767 12.9693 10.342 12.9693 10.3071V8.00118L8.70622 9.78705C8.20883 9.99541 7.64838 9.99409 7.15198 9.78338L2.96929 8.00791Z" fill={'currentColor'} /><path d="M7.56463 2.58331C7.81791 2.4729 8.10559 2.47221 8.3594 2.5814L14.7092 5.31304C15.1145 5.4874 15.1118 6.06303 14.7048 6.23351L8.35054 8.89542C8.10185 8.9996 7.82162 8.99894 7.57343 8.89358L1.30463 6.23261C0.90058 6.0611 0.897823 5.48941 1.3002 5.31401L7.56463 2.58331Z" fill={'currentColor'} /><path d="M13.9693 7.62582V9.10335C13.6704 9.27626 13.4693 9.59943 13.4693 9.96957C13.4693 10.5219 13.917 10.9696 14.4693 10.9696C15.0216 10.9696 15.4693 10.5219 15.4693 9.96957C15.4693 9.59943 15.2682 9.27626 14.9693 9.10336V7.20691L13.9693 7.62582Z" fill={'currentColor'} /></svg>;
 };
 Cap.displayName = 'Cap';
 Cap.isGlyph = true;