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

package/src/generated/File.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a638451083c2d992bcceca9c9a011ad5
+* @checksum 2a5b7807c3eac2280501e585d8020a1d
 */
 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 FileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const File = ({
   role = 'img',
   ...props
 }: FileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const File = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'File', {
     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 13V7H7.5C8.32843 7 9 6.32843 9 5.5V1H11C12.1046 1 13 1.89543 13 3V8.98388C13 8.98924 13 9 13 9V13C13 14.1046 12.1046 15 11 15H5C3.89543 15 3 14.1046 3 13Z" fill={'currentColor'} /><path d="M7.83333 1H6.91421C6.649 1 6.39464 1.10536 6.20711 1.29289L3.29289 4.20711C3.10536 4.39464 3 4.649 3 4.91421V5.83333H6.83333C7.38562 5.83333 7.83333 5.38562 7.83333 4.83333V1Z" 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 13V7H7.5C8.32843 7 9 6.32843 9 5.5V1H11C12.1046 1 13 1.89543 13 3V8.98388C13 8.98924 13 9 13 9V13C13 14.1046 12.1046 15 11 15H5C3.89543 15 3 14.1046 3 13Z" fill={'currentColor'} /><path d="M7.83333 1H6.91421C6.649 1 6.39464 1.10536 6.20711 1.29289L3.29289 4.20711C3.10536 4.39464 3 4.649 3 4.91421V5.83333H6.83333C7.38562 5.83333 7.83333 5.38562 7.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
 };
 File.displayName = 'File';
 File.isGlyph = true;

package/src/generated/Filter.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a700d27f7ce1179149146df351bc239f
+* @checksum 7ce08aa7006737f22f4f5cda55faa565
 */
 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 FilterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Filter = ({
   role = 'img',
   ...props
 }: FilterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Filter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Filter', {
     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="M6 6.14834L2.19955 2.20776C1.79746 1.79085 2.04373 1 2.57564 1H13.4244C13.9563 1 14.2025 1.79085 13.8005 2.20776L10 6.14834V11.7731C10 11.9173 9.93776 12.0545 9.82925 12.1494L6.82925 14.7744C6.50596 15.0573 6 14.8277 6 14.3981V6.14834Z" 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="M6 6.14834L2.19955 2.20776C1.79746 1.79085 2.04373 1 2.57564 1H13.4244C13.9563 1 14.2025 1.79085 13.8005 2.20776L10 6.14834V11.7731C10 11.9173 9.93776 12.0545 9.82925 12.1494L6.82925 14.7744C6.50596 15.0573 6 14.8277 6 14.3981V6.14834Z" fill={'currentColor'} /></svg>;
 };
 Filter.displayName = 'Filter';
 Filter.isGlyph = true;

package/src/generated/Folder.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 56c2bfa5ef7bbe055848858525fc9511
+* @checksum 83819ade6db7efb018768b25da779ccc
 */
 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 FolderProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Folder = ({
   role = 'img',
   ...props
 }: FolderProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Folder = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Folder', {
     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 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z" 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 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z" fill={'currentColor'} /></svg>;
 };
 Folder.displayName = 'Folder';
 Folder.isGlyph = true;

package/src/generated/Format.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5449b4343d7881f7455f49c709a7ea95
+* @checksum a97bd266efe1fdbd69c4d4589dd96061
 */
 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 FormatProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Format = ({
   role = 'img',
   ...props
 }: FormatProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Format = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Format', {
     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 4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H5C5.26522 3 5.51957 3.10536 5.70711 3.29289C5.89464 3.48043 6 3.73478 6 4C6 4.26522 5.89464 4.51957 5.70711 4.70711C5.51957 4.89464 5.26522 5 5 5H3C2.73478 5 2.48043 4.89464 2.29289 4.70711C2.10536 4.51957 2 4.26522 2 4ZM2 8C2 7.73478 2.10536 7.48043 2.29289 7.29289C2.48043 7.10536 2.73478 7 3 7H9C9.26522 7 9.51957 7.10536 9.70711 7.29289C9.89464 7.48043 10 7.73478 10 8C10 8.26522 9.89464 8.51957 9.70711 8.70711C9.51957 8.89464 9.26522 9 9 9H3C2.73478 9 2.48043 8.89464 2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8ZM3 11C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H13C13.2652 13 13.5196 12.8946 13.7071 12.7071C13.8946 12.5196 14 12.2652 14 12C14 11.7348 13.8946 11.4804 13.7071 11.2929C13.5196 11.1054 13.2652 11 13 11H3ZM7 4C7 3.73478 7.10536 3.48043 7.29289 3.29289C7.48043 3.10536 7.73478 3 8 3H13C13.2652 3 13.5196 3.10536 13.7071 3.29289C13.8946 3.48043 14 3.73478 14 4C14 4.26522 13.8946 4.51957 13.7071 4.70711C13.5196 4.89464 13.2652 5 13 5H8C7.73478 5 7.48043 4.89464 7.29289 4.70711C7.10536 4.51957 7 4.26522 7 4ZM11 8C11 7.73478 11.1054 7.48043 11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7H13C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8C14 8.26522 13.8946 8.51957 13.7071 8.70711C13.5196 8.89464 13.2652 9 13 9H12C11.7348 9 11.4804 8.89464 11.2929 8.70711C11.1054 8.51957 11 8.26522 11 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 d="M2 4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H5C5.26522 3 5.51957 3.10536 5.70711 3.29289C5.89464 3.48043 6 3.73478 6 4C6 4.26522 5.89464 4.51957 5.70711 4.70711C5.51957 4.89464 5.26522 5 5 5H3C2.73478 5 2.48043 4.89464 2.29289 4.70711C2.10536 4.51957 2 4.26522 2 4ZM2 8C2 7.73478 2.10536 7.48043 2.29289 7.29289C2.48043 7.10536 2.73478 7 3 7H9C9.26522 7 9.51957 7.10536 9.70711 7.29289C9.89464 7.48043 10 7.73478 10 8C10 8.26522 9.89464 8.51957 9.70711 8.70711C9.51957 8.89464 9.26522 9 9 9H3C2.73478 9 2.48043 8.89464 2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8ZM3 11C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H13C13.2652 13 13.5196 12.8946 13.7071 12.7071C13.8946 12.5196 14 12.2652 14 12C14 11.7348 13.8946 11.4804 13.7071 11.2929C13.5196 11.1054 13.2652 11 13 11H3ZM7 4C7 3.73478 7.10536 3.48043 7.29289 3.29289C7.48043 3.10536 7.73478 3 8 3H13C13.2652 3 13.5196 3.10536 13.7071 3.29289C13.8946 3.48043 14 3.73478 14 4C14 4.26522 13.8946 4.51957 13.7071 4.70711C13.5196 4.89464 13.2652 5 13 5H8C7.73478 5 7.48043 4.89464 7.29289 4.70711C7.10536 4.51957 7 4.26522 7 4ZM11 8C11 7.73478 11.1054 7.48043 11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7H13C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8C14 8.26522 13.8946 8.51957 13.7071 8.70711C13.5196 8.89464 13.2652 9 13 9H12C11.7348 9 11.4804 8.89464 11.2929 8.70711C11.1054 8.51957 11 8.26522 11 8Z" fill={'currentColor'} /></svg>;
 };
 Format.displayName = 'Format';
 Format.isGlyph = true;

package/src/generated/FullScreenEnter.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 795d59ef8fca2a4eefe2b1721a9a8a13
+* @checksum 94127249c923c2c8519be62c940f5c49
 */
 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 FullScreenEnterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const FullScreenEnter = ({
   role = 'img',
   ...props
 }: FullScreenEnterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const FullScreenEnter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'FullScreenEnter', {
     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.5 2C1.22386 2 1 2.22386 1 2.5V6.5C1 6.77614 1.22386 7 1.5 7H2.5C2.77614 7 3 6.77614 3 6.5V4.5C3 4.22386 3.22386 4 3.5 4H5.5C5.77614 4 6 3.77614 6 3.5V2.5C6 2.22386 5.77614 2 5.5 2H1.5Z" fill={'currentColor'} /><path d="M15 2.5C15 2.22386 14.7761 2 14.5 2H10.5C10.2239 2 10 2.22386 10 2.5V3.5C10 3.77614 10.2239 4 10.5 4L12.5 4C12.7761 4 13 4.22386 13 4.5V6.5C13 6.77614 13.2239 7 13.5 7H14.5C14.7761 7 15 6.77614 15 6.5V2.5Z" fill={'currentColor'} /><path d="M1.5 14C1.22386 14 1 13.7761 1 13.5V9.5C1 9.22386 1.22386 9 1.5 9H2.5C2.77614 9 3 9.22386 3 9.5L3 11.5C3 11.7761 3.22386 12 3.5 12H5.5C5.77614 12 6 12.2239 6 12.5V13.5C6 13.7761 5.77614 14 5.5 14H1.5Z" fill={'currentColor'} /><path d="M14.5 14C14.7761 14 15 13.7761 15 13.5V9.5C15 9.22386 14.7761 9 14.5 9H13.5C13.2239 9 13 9.22386 13 9.5V11.5C13 11.7761 12.7761 12 12.5 12H10.5C10.2239 12 10 12.2239 10 12.5V13.5C10 13.7761 10.2239 14 10.5 14H14.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="M1.5 2C1.22386 2 1 2.22386 1 2.5V6.5C1 6.77614 1.22386 7 1.5 7H2.5C2.77614 7 3 6.77614 3 6.5V4.5C3 4.22386 3.22386 4 3.5 4H5.5C5.77614 4 6 3.77614 6 3.5V2.5C6 2.22386 5.77614 2 5.5 2H1.5Z" fill={'currentColor'} /><path d="M15 2.5C15 2.22386 14.7761 2 14.5 2H10.5C10.2239 2 10 2.22386 10 2.5V3.5C10 3.77614 10.2239 4 10.5 4L12.5 4C12.7761 4 13 4.22386 13 4.5V6.5C13 6.77614 13.2239 7 13.5 7H14.5C14.7761 7 15 6.77614 15 6.5V2.5Z" fill={'currentColor'} /><path d="M1.5 14C1.22386 14 1 13.7761 1 13.5V9.5C1 9.22386 1.22386 9 1.5 9H2.5C2.77614 9 3 9.22386 3 9.5L3 11.5C3 11.7761 3.22386 12 3.5 12H5.5C5.77614 12 6 12.2239 6 12.5V13.5C6 13.7761 5.77614 14 5.5 14H1.5Z" fill={'currentColor'} /><path d="M14.5 14C14.7761 14 15 13.7761 15 13.5V9.5C15 9.22386 14.7761 9 14.5 9H13.5C13.2239 9 13 9.22386 13 9.5V11.5C13 11.7761 12.7761 12 12.5 12H10.5C10.2239 12 10 12.2239 10 12.5V13.5C10 13.7761 10.2239 14 10.5 14H14.5Z" fill={'currentColor'} /></svg>;
 };
 FullScreenEnter.displayName = 'FullScreenEnter';
 FullScreenEnter.isGlyph = true;

package/src/generated/FullScreenExit.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f484aadc94c0e228875b2f1c8b628a14
+* @checksum 6163e258a084f2b74ae1e9f96b8bdb1d
 */
 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 FullScreenExitProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const FullScreenExit = ({
   role = 'img',
   ...props
 }: FullScreenExitProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const FullScreenExit = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'FullScreenExit', {
     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.5 7C10.2239 7 10 6.77614 10 6.5V2.5C10 2.22386 10.2239 2 10.5 2H11.5C11.7761 2 12 2.22386 12 2.5V4.5C12 4.77614 12.2239 5 12.5 5L14.5 5C14.7761 5 15 5.22386 15 5.5V6.5C15 6.77614 14.7761 7 14.5 7H10.5Z" fill={'currentColor'} /><path d="M6 9.5C6 9.22386 5.77614 9 5.5 9H1.5C1.22386 9 1 9.22386 1 9.5V10.5C1 10.7761 1.22386 11 1.5 11H3.5C3.77614 11 4 11.2239 4 11.5L4 13.5C4 13.7761 4.22386 14 4.5 14H5.5C5.77614 14 6 13.7761 6 13.5V9.5Z" fill={'currentColor'} /><path d="M10.5 9C10.2239 9 10 9.22386 10 9.5V13.5C10 13.7761 10.2239 14 10.5 14H11.5C11.7761 14 12 13.7761 12 13.5V11.5C12 11.2239 12.2239 11 12.5 11H14.5C14.7761 11 15 10.7761 15 10.5V9.5C15 9.22386 14.7761 9 14.5 9H10.5Z" fill={'currentColor'} /><path d="M5.5 7C5.77614 7 6 6.77614 6 6.5L6 2.5C6 2.22386 5.77614 2 5.5 2H4.5C4.22386 2 4 2.22386 4 2.5L4 4.5C4 4.77614 3.77614 5 3.5 5L1.5 5C1.22386 5 1 5.22386 1 5.5V6.5C1 6.77614 1.22386 7 1.5 7L5.5 7Z" 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.5 7C10.2239 7 10 6.77614 10 6.5V2.5C10 2.22386 10.2239 2 10.5 2H11.5C11.7761 2 12 2.22386 12 2.5V4.5C12 4.77614 12.2239 5 12.5 5L14.5 5C14.7761 5 15 5.22386 15 5.5V6.5C15 6.77614 14.7761 7 14.5 7H10.5Z" fill={'currentColor'} /><path d="M6 9.5C6 9.22386 5.77614 9 5.5 9H1.5C1.22386 9 1 9.22386 1 9.5V10.5C1 10.7761 1.22386 11 1.5 11H3.5C3.77614 11 4 11.2239 4 11.5L4 13.5C4 13.7761 4.22386 14 4.5 14H5.5C5.77614 14 6 13.7761 6 13.5V9.5Z" fill={'currentColor'} /><path d="M10.5 9C10.2239 9 10 9.22386 10 9.5V13.5C10 13.7761 10.2239 14 10.5 14H11.5C11.7761 14 12 13.7761 12 13.5V11.5C12 11.2239 12.2239 11 12.5 11H14.5C14.7761 11 15 10.7761 15 10.5V9.5C15 9.22386 14.7761 9 14.5 9H10.5Z" fill={'currentColor'} /><path d="M5.5 7C5.77614 7 6 6.77614 6 6.5L6 2.5C6 2.22386 5.77614 2 5.5 2H4.5C4.22386 2 4 2.22386 4 2.5L4 4.5C4 4.77614 3.77614 5 3.5 5L1.5 5C1.22386 5 1 5.22386 1 5.5V6.5C1 6.77614 1.22386 7 1.5 7L5.5 7Z" fill={'currentColor'} /></svg>;
 };
 FullScreenExit.displayName = 'FullScreenExit';
 FullScreenExit.isGlyph = true;

package/src/generated/Function.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0766fa669545a73f1261d2950d77510d
+* @checksum 8ad02ffaf712d2a311ba6b6b06e18a43
 */
 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 FunctionProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Function = ({
   role = 'img',
   ...props
 }: FunctionProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Function = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Function', {
     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.97109 5.02989C9.32595 5.15463 9.77919 5.42309 10.0605 5.97407C10.1155 6.08185 10.368 6.46167 10.7732 7.03828C11.1598 7.58843 11.6451 8.26217 12.1217 8.91773C12.5979 9.57275 13.0637 10.2073 13.4106 10.6782C13.584 10.9136 13.7276 11.108 13.8278 11.2435L13.984 11.4545L13.9846 11.4553L12.7798 12.3489L12.6218 12.1354C12.5211 11.9992 12.3769 11.8041 12.2029 11.5678C11.8549 11.0954 11.3871 10.4582 10.9085 9.7998C10.4302 9.14196 9.93934 8.46062 9.54588 7.90065C9.17103 7.36716 8.83973 6.88184 8.72449 6.6561C8.66525 6.54006 8.57608 6.48101 8.47365 6.44501C8.42075 6.42641 8.37145 6.41719 8.33713 6.41294C8.32305 6.4112 8.31288 6.41047 8.30776 6.41018L8.30594 6.41008H3.67899V4.91008H8.30604L8.30853 4.91007L8.32622 4.91018C8.33953 4.91036 8.3559 4.91079 8.37501 4.91167C8.41313 4.91344 8.4628 4.91705 8.52139 4.9243C8.63728 4.93865 8.79534 4.96811 8.97109 5.02989Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14.4976 5.97967L8.13926 12.348L7.07778 11.2881L13.4361 4.91984L14.4976 5.97967Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.0554 1.23222C10.0554 1.23222 10.0557 1.23235 9.80834 1.94037C9.56094 2.64839 9.56127 2.64851 9.56127 2.64851L9.56306 2.64913L9.54599 2.64365C9.52931 2.63843 9.50162 2.63009 9.46441 2.61998C9.38967 2.59968 9.27845 2.57277 9.14232 2.54956C8.86448 2.5022 8.51151 2.47522 8.16284 2.53192C7.8992 2.57479 7.67508 2.71385 7.5022 2.89831C7.31854 3.09427 7.24074 3.28955 7.22769 3.36378C7.18558 3.60314 6.80654 5.88451 6.43657 8.11495C6.25191 9.2282 6.06994 10.3262 5.93412 11.1459L5.70857 12.5076L5.70821 12.5097L5.70728 12.5152L5.70444 12.5312C5.70211 12.5441 5.69888 12.5612 5.69468 12.5823C5.6863 12.6242 5.67395 12.6818 5.65698 12.7511C5.62334 12.8883 5.57002 13.0776 5.49071 13.2841C5.34699 13.6583 5.05661 14.2553 4.49397 14.5819C4.02314 14.8552 3.46753 14.9621 2.96614 14.9903C2.45559 15.0189 1.93887 14.9693 1.5 14.8801L1.79887 13.4101C2.12843 13.4772 2.51574 13.5132 2.88211 13.4926C3.25763 13.4716 3.55181 13.3944 3.74092 13.2846C3.83822 13.2282 3.97349 13.0508 4.09044 12.7463C4.14146 12.6135 4.17723 12.4873 4.20009 12.394C4.21137 12.348 4.21912 12.3116 4.22378 12.2882L4.22843 12.264L4.22871 12.2626L4.96874 12.3844C4.22882 12.2619 4.22871 12.2626 4.22871 12.2626L4.22889 12.2615L4.22907 12.2604L4.4543 10.9007C4.59012 10.081 4.77211 8.98286 4.95679 7.8695C5.32549 5.64672 5.70659 3.35282 5.75037 3.10392C5.82319 2.68991 6.06482 2.23845 6.40776 1.87255C6.76148 1.49514 7.27113 1.15722 7.92207 1.05136C8.48799 0.959336 9.01795 1.00672 9.39441 1.0709C9.58542 1.10346 9.74419 1.14162 9.85765 1.17245C9.91454 1.1879 9.96051 1.20164 9.99395 1.2121C10.0107 1.21734 10.0243 1.22177 10.0347 1.22521L10.0477 1.22959L10.0524 1.23118L10.0542 1.23182L10.0554 1.23222Z" 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.97109 5.02989C9.32595 5.15463 9.77919 5.42309 10.0605 5.97407C10.1155 6.08185 10.368 6.46167 10.7732 7.03828C11.1598 7.58843 11.6451 8.26217 12.1217 8.91773C12.5979 9.57275 13.0637 10.2073 13.4106 10.6782C13.584 10.9136 13.7276 11.108 13.8278 11.2435L13.984 11.4545L13.9846 11.4553L12.7798 12.3489L12.6218 12.1354C12.5211 11.9992 12.3769 11.8041 12.2029 11.5678C11.8549 11.0954 11.3871 10.4582 10.9085 9.7998C10.4302 9.14196 9.93934 8.46062 9.54588 7.90065C9.17103 7.36716 8.83973 6.88184 8.72449 6.6561C8.66525 6.54006 8.57608 6.48101 8.47365 6.44501C8.42075 6.42641 8.37145 6.41719 8.33713 6.41294C8.32305 6.4112 8.31288 6.41047 8.30776 6.41018L8.30594 6.41008H3.67899V4.91008H8.30604L8.30853 4.91007L8.32622 4.91018C8.33953 4.91036 8.3559 4.91079 8.37501 4.91167C8.41313 4.91344 8.4628 4.91705 8.52139 4.9243C8.63728 4.93865 8.79534 4.96811 8.97109 5.02989Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14.4976 5.97967L8.13926 12.348L7.07778 11.2881L13.4361 4.91984L14.4976 5.97967Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.0554 1.23222C10.0554 1.23222 10.0557 1.23235 9.80834 1.94037C9.56094 2.64839 9.56127 2.64851 9.56127 2.64851L9.56306 2.64913L9.54599 2.64365C9.52931 2.63843 9.50162 2.63009 9.46441 2.61998C9.38967 2.59968 9.27845 2.57277 9.14232 2.54956C8.86448 2.5022 8.51151 2.47522 8.16284 2.53192C7.8992 2.57479 7.67508 2.71385 7.5022 2.89831C7.31854 3.09427 7.24074 3.28955 7.22769 3.36378C7.18558 3.60314 6.80654 5.88451 6.43657 8.11495C6.25191 9.2282 6.06994 10.3262 5.93412 11.1459L5.70857 12.5076L5.70821 12.5097L5.70728 12.5152L5.70444 12.5312C5.70211 12.5441 5.69888 12.5612 5.69468 12.5823C5.6863 12.6242 5.67395 12.6818 5.65698 12.7511C5.62334 12.8883 5.57002 13.0776 5.49071 13.2841C5.34699 13.6583 5.05661 14.2553 4.49397 14.5819C4.02314 14.8552 3.46753 14.9621 2.96614 14.9903C2.45559 15.0189 1.93887 14.9693 1.5 14.8801L1.79887 13.4101C2.12843 13.4772 2.51574 13.5132 2.88211 13.4926C3.25763 13.4716 3.55181 13.3944 3.74092 13.2846C3.83822 13.2282 3.97349 13.0508 4.09044 12.7463C4.14146 12.6135 4.17723 12.4873 4.20009 12.394C4.21137 12.348 4.21912 12.3116 4.22378 12.2882L4.22843 12.264L4.22871 12.2626L4.96874 12.3844C4.22882 12.2619 4.22871 12.2626 4.22871 12.2626L4.22889 12.2615L4.22907 12.2604L4.4543 10.9007C4.59012 10.081 4.77211 8.98286 4.95679 7.8695C5.32549 5.64672 5.70659 3.35282 5.75037 3.10392C5.82319 2.68991 6.06482 2.23845 6.40776 1.87255C6.76148 1.49514 7.27113 1.15722 7.92207 1.05136C8.48799 0.959336 9.01795 1.00672 9.39441 1.0709C9.58542 1.10346 9.74419 1.14162 9.85765 1.17245C9.91454 1.1879 9.96051 1.20164 9.99395 1.2121C10.0107 1.21734 10.0243 1.22177 10.0347 1.22521L10.0477 1.22959L10.0524 1.23118L10.0542 1.23182L10.0554 1.23222Z" fill={'currentColor'} /></svg>;
 };
 Function.displayName = 'Function';
 Function.isGlyph = true;

package/src/generated/Gauge.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fae4d3bd54d52655f04beb481a121b0d
+* @checksum 5e19d95946c683d99e402894574a71d3
 */
 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 GaugeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Gauge = ({
   role = 'img',
   ...props
 }: GaugeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Gauge = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Gauge', {
     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.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill={'currentColor'} /><path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" 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.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill={'currentColor'} /><path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" fill={'currentColor'} /></svg>;
 };
 Gauge.displayName = 'Gauge';
 Gauge.isGlyph = true;

package/src/generated/GlobeAmericas.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4aa7ede9e76acfe503c91a5cbbcc360e
+* @checksum cf44fec8ebe5cfca13fb9d8a140a4bde
 */
 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 GlobeAmericasProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const GlobeAmericas = ({
   role = 'img',
   ...props
 }: GlobeAmericasProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const GlobeAmericas = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'GlobeAmericas', {
     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="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8.69894 12.6989C8.47083 12.7326 8.23745 12.75 8 12.75C6.86225 12.75 5.81793 12.35 5 11.6829V10L3.25682 8.25682C3.25229 8.17179 3.25 8.08616 3.25 8C3.25 5.37665 5.37665 3.25 8 3.25V4.5L6.5 6V7L6 7.5L5.5 7L4.5 8L5 8.5H7.5L8 9V10L7 11L8.69894 12.6989ZM12.7457 8.20342C12.7486 8.13597 12.75 8.06815 12.75 8C12.75 6.94341 12.405 5.9674 11.8216 5.17845L10.5 6.5V9H11.75L12.7457 8.20342Z" 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="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8.69894 12.6989C8.47083 12.7326 8.23745 12.75 8 12.75C6.86225 12.75 5.81793 12.35 5 11.6829V10L3.25682 8.25682C3.25229 8.17179 3.25 8.08616 3.25 8C3.25 5.37665 5.37665 3.25 8 3.25V4.5L6.5 6V7L6 7.5L5.5 7L4.5 8L5 8.5H7.5L8 9V10L7 11L8.69894 12.6989ZM12.7457 8.20342C12.7486 8.13597 12.75 8.06815 12.75 8C12.75 6.94341 12.405 5.9674 11.8216 5.17845L10.5 6.5V9H11.75L12.7457 8.20342Z" fill={'currentColor'} /></svg>;
 };
 GlobeAmericas.displayName = 'GlobeAmericas';
 GlobeAmericas.isGlyph = true;

package/src/generated/GovernmentBuilding.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 93d857dc5276aea15c4def863d4e770c
+* @checksum 26d79d1c4b746dda7fbdca11f434e964
 */
 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 GovernmentBuildingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const GovernmentBuilding = ({
   role = 'img',
   ...props
 }: GovernmentBuildingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const GovernmentBuilding = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'GovernmentBuilding', {
     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 5V4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4V5H11Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M1.5 6C1.22386 6 1 6.22386 1 6.5C1 6.77614 1.22386 7 1.5 7H2V13H1.5C1.22386 13 1 13.2239 1 13.5C1 13.7761 1.22386 14 1.5 14H14.5C14.7761 14 15 13.7761 15 13.5C15 13.2239 14.7761 13 14.5 13H14V7H14.5C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6H1.5ZM4.5 8.5C4.5 8.22386 4.72386 8 5 8C5.27614 8 5.5 8.22386 5.5 8.5V11.5C5.5 11.7761 5.27614 12 5 12C4.72386 12 4.5 11.7761 4.5 11.5V8.5ZM8 8C7.72386 8 7.5 8.22386 7.5 8.5V11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5C8.5 8.22386 8.27614 8 8 8ZM10.5 8.5C10.5 8.22386 10.7239 8 11 8C11.2761 8 11.5 8.22386 11.5 8.5V11.5C11.5 11.7761 11.2761 12 11 12C10.7239 12 10.5 11.7761 10.5 11.5V8.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="M11 5V4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4V5H11Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M1.5 6C1.22386 6 1 6.22386 1 6.5C1 6.77614 1.22386 7 1.5 7H2V13H1.5C1.22386 13 1 13.2239 1 13.5C1 13.7761 1.22386 14 1.5 14H14.5C14.7761 14 15 13.7761 15 13.5C15 13.2239 14.7761 13 14.5 13H14V7H14.5C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6H1.5ZM4.5 8.5C4.5 8.22386 4.72386 8 5 8C5.27614 8 5.5 8.22386 5.5 8.5V11.5C5.5 11.7761 5.27614 12 5 12C4.72386 12 4.5 11.7761 4.5 11.5V8.5ZM8 8C7.72386 8 7.5 8.22386 7.5 8.5V11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5C8.5 8.22386 8.27614 8 8 8ZM10.5 8.5C10.5 8.22386 10.7239 8 11 8C11.2761 8 11.5 8.22386 11.5 8.5V11.5C11.5 11.7761 11.2761 12 11 12C10.7239 12 10.5 11.7761 10.5 11.5V8.5Z" fill={'currentColor'} /></svg>;
 };
 GovernmentBuilding.displayName = 'GovernmentBuilding';
 GovernmentBuilding.isGlyph = true;

package/src/generated/Guide.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6197d4dc1126bf4eda03370327452548
+* @checksum 8c573105eb9ab4f831127e8033b67ff7
 */
 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 GuideProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Guide = ({
   role = 'img',
   ...props
 }: GuideProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Guide = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Guide', {
     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="M5.37041 4.32956C5.03839 4.32956 4.76923 4.61178 4.76923 4.95993C4.76923 5.30808 5.03839 5.5903 5.37041 5.5903H8.17592C8.50794 5.5903 8.7771 5.30808 8.7771 4.95993C8.7771 4.61178 8.50794 4.32956 8.17592 4.32956H5.37041Z" fill={'currentColor'} /><path d="M5.37041 6.4308C5.03839 6.4308 4.76923 6.71303 4.76923 7.06117C4.76923 7.40932 5.03839 7.69155 5.37041 7.69155H6.97356C7.30558 7.69155 7.57474 7.40932 7.57474 7.06117C7.57474 6.71303 7.30558 6.4308 6.97356 6.4308H5.37041Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M11.4956 2.86667V7.73074C12.952 8.2308 14 9.62499 14 11.2667C14 13.3285 12.3469 15 10.3077 15C8.97652 15 7.80987 14.2877 7.16021 13.2195H3.84615C2.82655 13.2195 2 12.3838 2 11.3529V2.86666C2 1.83573 2.82655 1 3.84615 1H9.64941C10.669 1 11.4956 1.83574 11.4956 2.86667ZM3.84615 2.86666L9.64941 2.86667L9.64941 7.59249C7.92428 7.9064 6.61538 9.43198 6.61538 11.2667C6.61538 11.2955 6.61571 11.3242 6.61635 11.3529H3.84615L3.84615 2.86666ZM10.8352 9.13333C10.8352 9.42789 10.599 9.66667 10.3077 9.66667C10.0164 9.66667 9.78022 9.42789 9.78022 9.13333C9.78022 8.83878 10.0164 8.6 10.3077 8.6C10.599 8.6 10.8352 8.83878 10.8352 9.13333ZM10.3077 10.2C10.599 10.2 10.8352 10.4388 10.8352 10.7333V12.8667H11.0989C11.2446 12.8667 11.3626 12.9861 11.3626 13.1333C11.3626 13.2806 11.2446 13.4 11.0989 13.4H9.51648C9.37083 13.4 9.25275 13.2806 9.25275 13.1333C9.25275 12.9861 9.37083 12.8667 9.51648 12.8667H9.78022V10.7333H9.51648C9.37083 10.7333 9.25275 10.6139 9.25275 10.4667C9.25275 10.3194 9.37083 10.2 9.51648 10.2H10.3077Z" 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="M5.37041 4.32956C5.03839 4.32956 4.76923 4.61178 4.76923 4.95993C4.76923 5.30808 5.03839 5.5903 5.37041 5.5903H8.17592C8.50794 5.5903 8.7771 5.30808 8.7771 4.95993C8.7771 4.61178 8.50794 4.32956 8.17592 4.32956H5.37041Z" fill={'currentColor'} /><path d="M5.37041 6.4308C5.03839 6.4308 4.76923 6.71303 4.76923 7.06117C4.76923 7.40932 5.03839 7.69155 5.37041 7.69155H6.97356C7.30558 7.69155 7.57474 7.40932 7.57474 7.06117C7.57474 6.71303 7.30558 6.4308 6.97356 6.4308H5.37041Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M11.4956 2.86667V7.73074C12.952 8.2308 14 9.62499 14 11.2667C14 13.3285 12.3469 15 10.3077 15C8.97652 15 7.80987 14.2877 7.16021 13.2195H3.84615C2.82655 13.2195 2 12.3838 2 11.3529V2.86666C2 1.83573 2.82655 1 3.84615 1H9.64941C10.669 1 11.4956 1.83574 11.4956 2.86667ZM3.84615 2.86666L9.64941 2.86667L9.64941 7.59249C7.92428 7.9064 6.61538 9.43198 6.61538 11.2667C6.61538 11.2955 6.61571 11.3242 6.61635 11.3529H3.84615L3.84615 2.86666ZM10.8352 9.13333C10.8352 9.42789 10.599 9.66667 10.3077 9.66667C10.0164 9.66667 9.78022 9.42789 9.78022 9.13333C9.78022 8.83878 10.0164 8.6 10.3077 8.6C10.599 8.6 10.8352 8.83878 10.8352 9.13333ZM10.3077 10.2C10.599 10.2 10.8352 10.4388 10.8352 10.7333V12.8667H11.0989C11.2446 12.8667 11.3626 12.9861 11.3626 13.1333C11.3626 13.2806 11.2446 13.4 11.0989 13.4H9.51648C9.37083 13.4 9.25275 13.2806 9.25275 13.1333C9.25275 12.9861 9.37083 12.8667 9.51648 12.8667H9.78022V10.7333H9.51648C9.37083 10.7333 9.25275 10.6139 9.25275 10.4667C9.25275 10.3194 9.37083 10.2 9.51648 10.2H10.3077Z" fill={'currentColor'} /></svg>;
 };
 Guide.displayName = 'Guide';
 Guide.isGlyph = true;

package/src/generated/Hash.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 732cbb137f14f311c82c7f60ee1f9242
+* @checksum 76a3e439b7df5616f7d4257fdc57c953
 */
 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 HashProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Hash = ({
   role = 'img',
   ...props
 }: HashProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Hash = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Hash', {
     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="M10.6161 1.5C10.3734 1.5 10.1658 1.67422 10.1237 1.91318L9.66753 4.5H7.19838L7.62389 2.08683C7.67787 1.78068 7.44236 1.5 7.13149 1.5H6.11606C5.87341 1.5 5.66579 1.67422 5.62366 1.91318L5.16753 4.5H2C1.72386 4.5 1.5 4.72386 1.5 5V6C1.5 6.27614 1.72386 6.5 2 6.5H4.81488L4.28589 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10V11C1.5 11.2761 1.72386 11.5 2 11.5H3.93324L3.50773 13.9132C3.45375 14.2193 3.68926 14.5 4.00014 14.5H5.01556C5.25821 14.5 5.46583 14.3258 5.50797 14.0868L5.96409 11.5H8.43324L8.00773 13.9132C7.95375 14.2193 8.18926 14.5 8.50014 14.5H9.51556C9.75821 14.5 9.96583 14.3258 10.008 14.0868L10.4641 11.5H13.5C13.7761 11.5 14 11.2761 14 11V10C14 9.72386 13.7761 9.5 13.5 9.5H10.8167L11.3457 6.5H13.5C13.7761 6.5 14 6.27614 14 6V5C14 4.72386 13.7761 4.5 13.5 4.5H11.6984L12.1239 2.08683C12.1779 1.78068 11.9424 1.5 11.6315 1.5H10.6161ZM6.31675 9.5H8.78589L9.31488 6.5H6.84573L6.31675 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 fillRule="evenodd" clipRule="evenodd" d="M10.6161 1.5C10.3734 1.5 10.1658 1.67422 10.1237 1.91318L9.66753 4.5H7.19838L7.62389 2.08683C7.67787 1.78068 7.44236 1.5 7.13149 1.5H6.11606C5.87341 1.5 5.66579 1.67422 5.62366 1.91318L5.16753 4.5H2C1.72386 4.5 1.5 4.72386 1.5 5V6C1.5 6.27614 1.72386 6.5 2 6.5H4.81488L4.28589 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10V11C1.5 11.2761 1.72386 11.5 2 11.5H3.93324L3.50773 13.9132C3.45375 14.2193 3.68926 14.5 4.00014 14.5H5.01556C5.25821 14.5 5.46583 14.3258 5.50797 14.0868L5.96409 11.5H8.43324L8.00773 13.9132C7.95375 14.2193 8.18926 14.5 8.50014 14.5H9.51556C9.75821 14.5 9.96583 14.3258 10.008 14.0868L10.4641 11.5H13.5C13.7761 11.5 14 11.2761 14 11V10C14 9.72386 13.7761 9.5 13.5 9.5H10.8167L11.3457 6.5H13.5C13.7761 6.5 14 6.27614 14 6V5C14 4.72386 13.7761 4.5 13.5 4.5H11.6984L12.1239 2.08683C12.1779 1.78068 11.9424 1.5 11.6315 1.5H10.6161ZM6.31675 9.5H8.78589L9.31488 6.5H6.84573L6.31675 9.5Z" fill={'currentColor'} /></svg>;
 };
 Hash.displayName = 'Hash';
 Hash.isGlyph = true;

package/src/generated/HiddenSecondaryNode.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2aff31aae26b5e933ae67e64e2995aaf
+* @checksum 6137eaf937720aabbb68834d9f14380e
 */
 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 HiddenSecondaryNodeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const HiddenSecondaryNode = ({
   role = 'img',
   ...props
 }: HiddenSecondaryNodeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const HiddenSecondaryNode = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'HiddenSecondaryNode', {
     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.51193 1.01678C7.67329 1.00565 7.83604 1 8 1C8.16396 1 8.32671 1.00565 8.48807 1.01678C8.88252 1.04399 9.18022 1.38581 9.15302 1.78025C9.12581 2.1747 8.78399 2.47241 8.38954 2.4452C8.26095 2.43633 8.13106 2.43182 8 2.43182C7.86894 2.43182 7.73905 2.43633 7.61046 2.4452C7.21601 2.47241 6.87419 2.1747 6.84698 1.78025C6.81978 1.38581 7.11748 1.04399 7.51193 1.01678ZM5.88788 2.03629C6.06146 2.39154 5.9142 2.82024 5.55896 2.99382C5.32527 3.10801 5.10067 3.23814 4.88658 3.38282C4.55899 3.60421 4.11395 3.51811 3.89257 3.19052C3.67118 2.86293 3.75727 2.41789 4.08487 2.1965C4.35387 2.0147 4.63629 1.85106 4.93035 1.70737C5.28559 1.53379 5.71429 1.68105 5.88788 2.03629ZM10.1121 2.03629C10.2857 1.68105 10.7144 1.53379 11.0696 1.70737C11.3637 1.85106 11.6461 2.01471 11.9151 2.1965C12.2427 2.41789 12.3288 2.86293 12.1074 3.19052C11.886 3.51811 11.441 3.60421 11.1134 3.38282C10.8993 3.23814 10.6747 3.10801 10.441 2.99382C10.0858 2.82024 9.93853 2.39154 10.1121 2.03629ZM3.19052 3.89257C3.51811 4.11395 3.60421 4.55899 3.38282 4.88658C3.23814 5.10067 3.10801 5.32527 2.99382 5.55896C2.82024 5.9142 2.39154 6.06146 2.03629 5.88788C1.68105 5.71429 1.53379 5.28559 1.70737 4.93035C1.85106 4.63629 2.01471 4.35387 2.1965 4.08487C2.41789 3.75727 2.86293 3.67118 3.19052 3.89257ZM12.8095 3.89257C13.1371 3.67118 13.5821 3.75727 13.8035 4.08487C13.9853 4.35387 14.1489 4.63629 14.2926 4.93035C14.4662 5.28559 14.3189 5.71429 13.9637 5.88788C13.6085 6.06146 13.1798 5.9142 13.0062 5.55896C12.892 5.32527 12.7619 5.10067 12.6172 4.88658C12.3958 4.55899 12.4819 4.11395 12.8095 3.89257ZM1.78025 6.84698C2.1747 6.87419 2.47241 7.21601 2.4452 7.61046C2.43633 7.73905 2.43182 7.86894 2.43182 8C2.43182 8.13106 2.43633 8.26095 2.4452 8.38954C2.47241 8.78399 2.1747 9.12581 1.78025 9.15302C1.38581 9.18022 1.04399 8.88252 1.01678 8.48807C1.00565 8.32671 1 8.16396 1 8C1 7.83604 1.00565 7.67329 1.01678 7.51193C1.04399 7.11748 1.38581 6.81978 1.78025 6.84698ZM14.2197 6.84698C14.6142 6.81978 14.956 7.11748 14.9832 7.51193C14.9943 7.67329 15 7.83604 15 8C15 8.16396 14.9943 8.32671 14.9832 8.48807C14.956 8.88252 14.6142 9.18022 14.2197 9.15302C13.8253 9.12581 13.5276 8.78399 13.5548 8.38954C13.5637 8.26095 13.5682 8.13106 13.5682 8C13.5682 7.86894 13.5637 7.73905 13.5548 7.61046C13.5276 7.21601 13.8253 6.87419 14.2197 6.84698ZM2.03629 10.1121C2.39154 9.93853 2.82024 10.0858 2.99382 10.441C3.10801 10.6747 3.23814 10.8993 3.38282 11.1134C3.60421 11.441 3.51811 11.886 3.19052 12.1074C2.86293 12.3288 2.41789 12.2427 2.1965 11.9151C2.0147 11.6461 1.85106 11.3637 1.70737 11.0696C1.53379 10.7144 1.68105 10.2857 2.03629 10.1121ZM13.9637 10.1121C14.3189 10.2857 14.4662 10.7144 14.2926 11.0696C14.1489 11.3637 13.9853 11.6461 13.8035 11.9151C13.5821 12.2427 13.1371 12.3288 12.8095 12.1074C12.4819 11.886 12.3958 11.441 12.6172 11.1134C12.7619 10.8993 12.892 10.6747 13.0062 10.441C13.1798 10.0858 13.6085 9.93853 13.9637 10.1121ZM3.89257 12.8095C4.11395 12.4819 4.55899 12.3958 4.88658 12.6172C5.10067 12.7619 5.32527 12.892 5.55896 13.0062C5.9142 13.1798 6.06146 13.6085 5.88788 13.9637C5.71429 14.3189 5.28559 14.4662 4.93035 14.2926C4.63629 14.1489 4.35387 13.9853 4.08487 13.8035C3.75727 13.5821 3.67118 13.1371 3.89257 12.8095ZM12.1074 12.8095C12.3288 13.1371 12.2427 13.5821 11.9151 13.8035C11.6461 13.9853 11.3637 14.1489 11.0696 14.2926C10.7144 14.4662 10.2857 14.3189 10.1121 13.9637C9.93853 13.6085 10.0858 13.1798 10.441 13.0062C10.6747 12.892 10.8993 12.7619 11.1134 12.6172C11.441 12.3958 11.886 12.4819 12.1074 12.8095ZM6.84698 14.2197C6.87419 13.8253 7.21601 13.5276 7.61046 13.5548C7.73905 13.5637 7.86894 13.5682 8 13.5682C8.13106 13.5682 8.26095 13.5637 8.38954 13.5548C8.78399 13.5276 9.12581 13.8253 9.15302 14.2197C9.18022 14.6142 8.88252 14.956 8.48807 14.9832C8.32671 14.9943 8.16396 15 8 15C7.83604 15 7.67329 14.9943 7.51193 14.9832C7.11748 14.956 6.81978 14.6142 6.84698 14.2197Z" fill={'currentColor'} /><path d="M10.8637 9.74047C10.8637 11.1729 9.65676 12.0567 7.99728 12.0567C6.22808 12.0567 4.96632 10.9596 4.89775 9.46618H6.85895C6.92753 10.1367 7.44869 10.4567 8.05213 10.4567C8.64187 10.4567 8.94359 10.2129 8.94359 9.84714C8.94359 9.45094 8.68301 9.25284 8.07956 9.08521L6.79038 8.71949C5.5972 8.38424 5.04861 7.46992 5.04861 6.35751C5.04861 5.04699 6.09093 4.10219 7.80527 4.10219C9.31389 4.10219 10.4659 4.98603 10.5756 6.50989H8.68301C8.58701 5.93083 8.18928 5.73272 7.77784 5.73272C7.29782 5.73272 6.96867 5.94606 6.96867 6.31179C6.96867 6.73847 7.33897 6.9061 7.75041 7.01277L8.95731 7.37849C10.3014 7.75946 10.8637 8.55186 10.8637 9.74047Z" 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.51193 1.01678C7.67329 1.00565 7.83604 1 8 1C8.16396 1 8.32671 1.00565 8.48807 1.01678C8.88252 1.04399 9.18022 1.38581 9.15302 1.78025C9.12581 2.1747 8.78399 2.47241 8.38954 2.4452C8.26095 2.43633 8.13106 2.43182 8 2.43182C7.86894 2.43182 7.73905 2.43633 7.61046 2.4452C7.21601 2.47241 6.87419 2.1747 6.84698 1.78025C6.81978 1.38581 7.11748 1.04399 7.51193 1.01678ZM5.88788 2.03629C6.06146 2.39154 5.9142 2.82024 5.55896 2.99382C5.32527 3.10801 5.10067 3.23814 4.88658 3.38282C4.55899 3.60421 4.11395 3.51811 3.89257 3.19052C3.67118 2.86293 3.75727 2.41789 4.08487 2.1965C4.35387 2.0147 4.63629 1.85106 4.93035 1.70737C5.28559 1.53379 5.71429 1.68105 5.88788 2.03629ZM10.1121 2.03629C10.2857 1.68105 10.7144 1.53379 11.0696 1.70737C11.3637 1.85106 11.6461 2.01471 11.9151 2.1965C12.2427 2.41789 12.3288 2.86293 12.1074 3.19052C11.886 3.51811 11.441 3.60421 11.1134 3.38282C10.8993 3.23814 10.6747 3.10801 10.441 2.99382C10.0858 2.82024 9.93853 2.39154 10.1121 2.03629ZM3.19052 3.89257C3.51811 4.11395 3.60421 4.55899 3.38282 4.88658C3.23814 5.10067 3.10801 5.32527 2.99382 5.55896C2.82024 5.9142 2.39154 6.06146 2.03629 5.88788C1.68105 5.71429 1.53379 5.28559 1.70737 4.93035C1.85106 4.63629 2.01471 4.35387 2.1965 4.08487C2.41789 3.75727 2.86293 3.67118 3.19052 3.89257ZM12.8095 3.89257C13.1371 3.67118 13.5821 3.75727 13.8035 4.08487C13.9853 4.35387 14.1489 4.63629 14.2926 4.93035C14.4662 5.28559 14.3189 5.71429 13.9637 5.88788C13.6085 6.06146 13.1798 5.9142 13.0062 5.55896C12.892 5.32527 12.7619 5.10067 12.6172 4.88658C12.3958 4.55899 12.4819 4.11395 12.8095 3.89257ZM1.78025 6.84698C2.1747 6.87419 2.47241 7.21601 2.4452 7.61046C2.43633 7.73905 2.43182 7.86894 2.43182 8C2.43182 8.13106 2.43633 8.26095 2.4452 8.38954C2.47241 8.78399 2.1747 9.12581 1.78025 9.15302C1.38581 9.18022 1.04399 8.88252 1.01678 8.48807C1.00565 8.32671 1 8.16396 1 8C1 7.83604 1.00565 7.67329 1.01678 7.51193C1.04399 7.11748 1.38581 6.81978 1.78025 6.84698ZM14.2197 6.84698C14.6142 6.81978 14.956 7.11748 14.9832 7.51193C14.9943 7.67329 15 7.83604 15 8C15 8.16396 14.9943 8.32671 14.9832 8.48807C14.956 8.88252 14.6142 9.18022 14.2197 9.15302C13.8253 9.12581 13.5276 8.78399 13.5548 8.38954C13.5637 8.26095 13.5682 8.13106 13.5682 8C13.5682 7.86894 13.5637 7.73905 13.5548 7.61046C13.5276 7.21601 13.8253 6.87419 14.2197 6.84698ZM2.03629 10.1121C2.39154 9.93853 2.82024 10.0858 2.99382 10.441C3.10801 10.6747 3.23814 10.8993 3.38282 11.1134C3.60421 11.441 3.51811 11.886 3.19052 12.1074C2.86293 12.3288 2.41789 12.2427 2.1965 11.9151C2.0147 11.6461 1.85106 11.3637 1.70737 11.0696C1.53379 10.7144 1.68105 10.2857 2.03629 10.1121ZM13.9637 10.1121C14.3189 10.2857 14.4662 10.7144 14.2926 11.0696C14.1489 11.3637 13.9853 11.6461 13.8035 11.9151C13.5821 12.2427 13.1371 12.3288 12.8095 12.1074C12.4819 11.886 12.3958 11.441 12.6172 11.1134C12.7619 10.8993 12.892 10.6747 13.0062 10.441C13.1798 10.0858 13.6085 9.93853 13.9637 10.1121ZM3.89257 12.8095C4.11395 12.4819 4.55899 12.3958 4.88658 12.6172C5.10067 12.7619 5.32527 12.892 5.55896 13.0062C5.9142 13.1798 6.06146 13.6085 5.88788 13.9637C5.71429 14.3189 5.28559 14.4662 4.93035 14.2926C4.63629 14.1489 4.35387 13.9853 4.08487 13.8035C3.75727 13.5821 3.67118 13.1371 3.89257 12.8095ZM12.1074 12.8095C12.3288 13.1371 12.2427 13.5821 11.9151 13.8035C11.6461 13.9853 11.3637 14.1489 11.0696 14.2926C10.7144 14.4662 10.2857 14.3189 10.1121 13.9637C9.93853 13.6085 10.0858 13.1798 10.441 13.0062C10.6747 12.892 10.8993 12.7619 11.1134 12.6172C11.441 12.3958 11.886 12.4819 12.1074 12.8095ZM6.84698 14.2197C6.87419 13.8253 7.21601 13.5276 7.61046 13.5548C7.73905 13.5637 7.86894 13.5682 8 13.5682C8.13106 13.5682 8.26095 13.5637 8.38954 13.5548C8.78399 13.5276 9.12581 13.8253 9.15302 14.2197C9.18022 14.6142 8.88252 14.956 8.48807 14.9832C8.32671 14.9943 8.16396 15 8 15C7.83604 15 7.67329 14.9943 7.51193 14.9832C7.11748 14.956 6.81978 14.6142 6.84698 14.2197Z" fill={'currentColor'} /><path d="M10.8637 9.74047C10.8637 11.1729 9.65676 12.0567 7.99728 12.0567C6.22808 12.0567 4.96632 10.9596 4.89775 9.46618H6.85895C6.92753 10.1367 7.44869 10.4567 8.05213 10.4567C8.64187 10.4567 8.94359 10.2129 8.94359 9.84714C8.94359 9.45094 8.68301 9.25284 8.07956 9.08521L6.79038 8.71949C5.5972 8.38424 5.04861 7.46992 5.04861 6.35751C5.04861 5.04699 6.09093 4.10219 7.80527 4.10219C9.31389 4.10219 10.4659 4.98603 10.5756 6.50989H8.68301C8.58701 5.93083 8.18928 5.73272 7.77784 5.73272C7.29782 5.73272 6.96867 5.94606 6.96867 6.31179C6.96867 6.73847 7.33897 6.9061 7.75041 7.01277L8.95731 7.37849C10.3014 7.75946 10.8637 8.55186 10.8637 9.74047Z" fill={'currentColor'} /></svg>;
 };
 HiddenSecondaryNode.displayName = 'HiddenSecondaryNode';
 HiddenSecondaryNode.isGlyph = true;

package/src/generated/Highlight.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b33d967dc6dbcdacb2e862060c0d4f22
+* @checksum b3a9bd31f4b79083d37db104181dda62
 */
 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 HighlightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Highlight = ({
   role = 'img',
   ...props
 }: HighlightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Highlight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Highlight', {
     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.85275 12.0315C8.87165 12.0114 8.89799 12 8.92557 12H14.75C14.8881 12 15 12.1119 15 12.25V13.75C15 13.8881 14.8881 14 14.75 14H7.23145C7.14381 14 7.09857 13.8953 7.15863 13.8315L8.85275 12.0315Z" fill={'currentColor'} /><path d="M4.01887 9.19347L4.39384 8.8185L7.57582 12.0005L7.20114 12.3752C6.99596 12.5803 6.71178 12.6863 6.42236 12.6655L5.84842 12.6242C5.55901 12.6034 5.27482 12.7094 5.06964 12.9146L4.92888 13.0553L3.33789 11.4643L3.47895 11.3233C3.68396 11.1183 3.7899 10.8344 3.76932 10.5452L3.7285 9.97156C3.70792 9.68237 3.81386 9.39848 4.01887 9.19347Z" fill={'currentColor'} /><path d="M11.4334 1.77892C11.8239 1.38839 12.4571 1.38839 12.8476 1.77892L14.6154 3.54668C15.0059 3.93721 15.0059 4.57037 14.6154 4.9609L8.28006 11.2962L5.09808 8.11425L11.4334 1.77892Z" fill={'currentColor'} /><path d="M2.63228 12.1672L4.22462 13.7596L4.05424 13.9317C4.00728 13.9792 3.9433 14.0059 3.87655 14.0059L1.38588 14.0059C1.16267 14.0059 1.05135 13.7356 1.20981 13.5784L2.63228 12.1672Z" 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.85275 12.0315C8.87165 12.0114 8.89799 12 8.92557 12H14.75C14.8881 12 15 12.1119 15 12.25V13.75C15 13.8881 14.8881 14 14.75 14H7.23145C7.14381 14 7.09857 13.8953 7.15863 13.8315L8.85275 12.0315Z" fill={'currentColor'} /><path d="M4.01887 9.19347L4.39384 8.8185L7.57582 12.0005L7.20114 12.3752C6.99596 12.5803 6.71178 12.6863 6.42236 12.6655L5.84842 12.6242C5.55901 12.6034 5.27482 12.7094 5.06964 12.9146L4.92888 13.0553L3.33789 11.4643L3.47895 11.3233C3.68396 11.1183 3.7899 10.8344 3.76932 10.5452L3.7285 9.97156C3.70792 9.68237 3.81386 9.39848 4.01887 9.19347Z" fill={'currentColor'} /><path d="M11.4334 1.77892C11.8239 1.38839 12.4571 1.38839 12.8476 1.77892L14.6154 3.54668C15.0059 3.93721 15.0059 4.57037 14.6154 4.9609L8.28006 11.2962L5.09808 8.11425L11.4334 1.77892Z" fill={'currentColor'} /><path d="M2.63228 12.1672L4.22462 13.7596L4.05424 13.9317C4.00728 13.9792 3.9433 14.0059 3.87655 14.0059L1.38588 14.0059C1.16267 14.0059 1.05135 13.7356 1.20981 13.5784L2.63228 12.1672Z" fill={'currentColor'} /></svg>;
 };
 Highlight.displayName = 'Highlight';
 Highlight.isGlyph = true;