@leafygreen-ui/icon 14.6.1 → 14.7.0

package/src/generated/Upload.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5a585242d556b5b40d7dc32e59be15aa
+* @checksum b45b46954ead2faa612a6b42fba434d9
 */
 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 UploadProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Upload = ({
   role = 'img',
   ...props
 }: UploadProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Upload = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Upload', {
     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="M11.2967 11V11.9384C11.525 11.9789 11.7601 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C11.482 4 10.9869 4.09848 10.5326 4.27774C9.67881 2.34714 7.74673 1 5.5 1C2.46243 1 0 3.46243 0 6.5C0 9.53757 2.46243 12 5.5 12C5.59955 12 5.69847 11.9974 5.79672 11.9921V11H5.39404C3.99871 11 3.31387 9.30059 4.31931 8.33311L7.47199 5.29944C8.07212 4.72196 9.02132 4.72196 9.62145 5.29944L12.7741 8.33311C13.7796 9.30059 13.0947 11 11.6994 11H11.2967ZM8.33871 6.20016C8.45486 6.08839 8.63858 6.08839 8.75473 6.20016L11.9074 9.23383C12.102 9.42108 11.9695 9.75 11.6994 9.75H10.0467V13.5C10.0467 14.3284 9.37514 15 8.54672 15C7.71829 15 7.04672 14.3284 7.04672 13.5V9.75H5.39404C5.12398 9.75 4.99143 9.42108 5.18603 9.23383L8.33871 6.20016Z" 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="M11.2967 11V11.9384C11.525 11.9789 11.7601 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C11.482 4 10.9869 4.09848 10.5326 4.27774C9.67881 2.34714 7.74673 1 5.5 1C2.46243 1 0 3.46243 0 6.5C0 9.53757 2.46243 12 5.5 12C5.59955 12 5.69847 11.9974 5.79672 11.9921V11H5.39404C3.99871 11 3.31387 9.30059 4.31931 8.33311L7.47199 5.29944C8.07212 4.72196 9.02132 4.72196 9.62145 5.29944L12.7741 8.33311C13.7796 9.30059 13.0947 11 11.6994 11H11.2967ZM8.33871 6.20016C8.45486 6.08839 8.63858 6.08839 8.75473 6.20016L11.9074 9.23383C12.102 9.42108 11.9695 9.75 11.6994 9.75H10.0467V13.5C10.0467 14.3284 9.37514 15 8.54672 15C7.71829 15 7.04672 14.3284 7.04672 13.5V9.75H5.39404C5.12398 9.75 4.99143 9.42108 5.18603 9.23383L8.33871 6.20016Z" fill={'currentColor'} /></svg>;
 };
 Upload.displayName = 'Upload';
 Upload.isGlyph = true;

package/src/generated/VerticalEllipsis.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fccdd3758844d746064dd4942777cacd
+* @checksum 97606a0994feab2e88f69f108d1a5f3e
 */
 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 VerticalEllipsisProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const VerticalEllipsis = ({
   role = 'img',
   ...props
 }: VerticalEllipsisProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const VerticalEllipsis = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'VerticalEllipsis', {
     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="M9.5 2.75C9.5 3.7165 8.7165 4.5 7.75 4.5C6.7835 4.5 6 3.7165 6 2.75C6 1.7835 6.7835 1 7.75 1C8.7165 1 9.5 1.7835 9.5 2.75ZM9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6C8.7165 6 9.5 6.7835 9.5 7.75ZM7.75 14.5C8.7165 14.5 9.5 13.7165 9.5 12.75C9.5 11.7835 8.7165 11 7.75 11C6.7835 11 6 11.7835 6 12.75C6 13.7165 6.7835 14.5 7.75 14.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="M9.5 2.75C9.5 3.7165 8.7165 4.5 7.75 4.5C6.7835 4.5 6 3.7165 6 2.75C6 1.7835 6.7835 1 7.75 1C8.7165 1 9.5 1.7835 9.5 2.75ZM9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6C8.7165 6 9.5 6.7835 9.5 7.75ZM7.75 14.5C8.7165 14.5 9.5 13.7165 9.5 12.75C9.5 11.7835 8.7165 11 7.75 11C6.7835 11 6 11.7835 6 12.75C6 13.7165 6.7835 14.5 7.75 14.5Z" fill={'currentColor'} /></svg>;
 };
 VerticalEllipsis.displayName = 'VerticalEllipsis';
 VerticalEllipsis.isGlyph = true;

package/src/generated/View.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30dc1f6a39c2d65b6fcb241025159b77
+* @checksum cbd721211421954cd313dfb469531874
 */
 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 ViewProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const View = ({
   role = 'img',
   ...props
 }: ViewProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const View = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'View', {
     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="M3 4H4.05V2H2.5C1.67157 2 1 2.67157 1 3.5V4.95H3V4ZM6.45 2H9.55V4H6.45V2ZM11.95 2H13.5C14.3284 2 15 2.67157 15 3.5V4.95H13V4H11.95V2ZM15 6.55V9.45H13V6.55H15ZM3 6.55V9.45H1V6.55H3ZM15 11.05V12.5C15 13.3284 14.3284 14 13.5 14H11.95V12H13V11.05H15ZM3 12V11.05H1V12.5C1 13.3284 1.67157 14 2.5 14H4.05V12H3ZM6.45 12H9.55V14H6.45V12Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.5 8C4.5 7.72386 4.72386 7.5 5 7.5H11C11.2761 7.5 11.5 7.72386 11.5 8C11.5 8.27614 11.2761 8.5 11 8.5H5C4.72386 8.5 4.5 8.27614 4.5 8Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 5.5C8.27614 5.5 8.5 5.72386 8.5 6L8.5 10C8.5 10.2761 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.2761 7.5 10L7.5 6C7.5 5.72386 7.72386 5.5 8 5.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="M3 4H4.05V2H2.5C1.67157 2 1 2.67157 1 3.5V4.95H3V4ZM6.45 2H9.55V4H6.45V2ZM11.95 2H13.5C14.3284 2 15 2.67157 15 3.5V4.95H13V4H11.95V2ZM15 6.55V9.45H13V6.55H15ZM3 6.55V9.45H1V6.55H3ZM15 11.05V12.5C15 13.3284 14.3284 14 13.5 14H11.95V12H13V11.05H15ZM3 12V11.05H1V12.5C1 13.3284 1.67157 14 2.5 14H4.05V12H3ZM6.45 12H9.55V14H6.45V12Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.5 8C4.5 7.72386 4.72386 7.5 5 7.5H11C11.2761 7.5 11.5 7.72386 11.5 8C11.5 8.27614 11.2761 8.5 11 8.5H5C4.72386 8.5 4.5 8.27614 4.5 8Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 5.5C8.27614 5.5 8.5 5.72386 8.5 6L8.5 10C8.5 10.2761 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.2761 7.5 10L7.5 6C7.5 5.72386 7.72386 5.5 8 5.5Z" fill={'currentColor'} /></svg>;
 };
 View.displayName = 'View';
 View.isGlyph = true;

package/src/generated/Visibility.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3ee5e82a13af887c9ab15bda1c229fa
+* @checksum f0e6dd74aee5ad2ce83e44f083e87714
 */
 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 VisibilityProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Visibility = ({
   role = 'img',
   ...props
 }: VisibilityProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Visibility = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Visibility', {
     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 2.00781C11.9337 2.00781 14.4728 5.13665 15.4548 6.59114L15.4984 6.65528C15.7132 6.97033 16 7.39096 16 8C16 8.60904 15.7132 9.02967 15.4984 9.34472L15.4548 9.40886C14.4728 10.8633 11.9337 13.9922 8 13.9922C4.06626 13.9922 1.52716 10.8633 0.545173 9.40886L0.501583 9.34472C0.286783 9.02967 0 8.60904 0 8C0 7.39096 0.286785 6.97033 0.501583 6.65529L0.545173 6.59114C1.52716 5.13665 4.06626 2.00781 8 2.00781ZM9.13023 4.13098C8.76962 4.05004 8.39264 4.00521 8.00001 4.00521C5.75051 4.00521 3.92692 5.79374 3.92692 8C3.92692 10.2063 5.75051 11.9948 8.00001 11.9948C7.62198 11.9948 7.24379 11.9497 6.86975 11.869C7.23037 11.95 7.60736 11.9948 8.00001 11.9948C10.2495 11.9948 12.0731 10.2063 12.0731 8C12.0731 5.79374 10.2495 4.00521 8.00001 4.00521C8.37803 4.00521 8.75619 4.05033 9.13023 4.13098ZM8 10.9961C9.68713 10.9961 11.0548 9.6547 11.0548 8C11.0548 6.3453 9.68713 5.00391 8 5.00391C6.31287 5.00391 4.94519 6.3453 4.94519 8C4.94519 9.6547 6.31287 10.9961 8 10.9961Z" 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 2.00781C11.9337 2.00781 14.4728 5.13665 15.4548 6.59114L15.4984 6.65528C15.7132 6.97033 16 7.39096 16 8C16 8.60904 15.7132 9.02967 15.4984 9.34472L15.4548 9.40886C14.4728 10.8633 11.9337 13.9922 8 13.9922C4.06626 13.9922 1.52716 10.8633 0.545173 9.40886L0.501583 9.34472C0.286783 9.02967 0 8.60904 0 8C0 7.39096 0.286785 6.97033 0.501583 6.65529L0.545173 6.59114C1.52716 5.13665 4.06626 2.00781 8 2.00781ZM9.13023 4.13098C8.76962 4.05004 8.39264 4.00521 8.00001 4.00521C5.75051 4.00521 3.92692 5.79374 3.92692 8C3.92692 10.2063 5.75051 11.9948 8.00001 11.9948C7.62198 11.9948 7.24379 11.9497 6.86975 11.869C7.23037 11.95 7.60736 11.9948 8.00001 11.9948C10.2495 11.9948 12.0731 10.2063 12.0731 8C12.0731 5.79374 10.2495 4.00521 8.00001 4.00521C8.37803 4.00521 8.75619 4.05033 9.13023 4.13098ZM8 10.9961C9.68713 10.9961 11.0548 9.6547 11.0548 8C11.0548 6.3453 9.68713 5.00391 8 5.00391C6.31287 5.00391 4.94519 6.3453 4.94519 8C4.94519 9.6547 6.31287 10.9961 8 10.9961Z" fill={'currentColor'} /></svg>;
 };
 Visibility.displayName = 'Visibility';
 Visibility.isGlyph = true;

package/src/generated/VisibilityOff.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e01caf6dcdfaae2f04cfcc60f165ea12
+* @checksum 129319f889503fc65f3a32a3f599950e
 */
 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 VisibilityOffProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const VisibilityOff = ({
   role = 'img',
   ...props
 }: VisibilityOffProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const VisibilityOff = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'VisibilityOff', {
     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.6012 1.26611C14.1924 0.894763 13.5467 0.912984 13.1681 1.31501L1.70391 13.4864C1.32524 13.8884 1.35699 14.522 1.76579 14.8934C2.17459 15.2647 2.82027 15.2465 3.19894 14.8445L4.99238 12.9404C5.88019 13.3349 6.88397 13.5871 8 13.5871C11.9337 13.5871 14.4728 10.4542 15.4548 8.99777L15.4984 8.93355C15.7132 8.61809 16 8.19691 16 7.58708C16 6.97724 15.7132 6.55606 15.4984 6.24061L15.4548 6.17639C15.0571 5.58653 14.404 4.72168 13.5062 3.90133L14.6631 2.67309C15.0418 2.27106 15.01 1.63747 14.6012 1.26611ZM11.6703 5.85054L10.9066 6.66133C11.0028 6.9529 11.0548 7.26402 11.0548 7.58708C11.0548 9.24393 9.68713 10.5871 8 10.5871C7.7543 10.5871 7.51537 10.5586 7.28646 10.5048L6.52258 11.3158C6.98061 11.491 7.47888 11.5871 8.00001 11.5871C7.62198 11.5871 7.24379 11.5419 6.86974 11.4611C7.23037 11.5422 7.60736 11.5871 8.00001 11.5871C10.2495 11.5871 12.0731 9.79622 12.0731 7.58708C12.0731 6.96482 11.9284 6.37575 11.6703 5.85054ZM8 1.58708C8.9189 1.58708 9.7617 1.75803 10.5263 2.03863L8.97905 3.68136C8.66462 3.62036 8.33812 3.58708 8.00001 3.58708C5.75051 3.58708 3.92692 5.37794 3.92692 7.58708C3.92692 8.02163 3.99748 8.43999 4.12796 8.83172L2.14338 10.9387C1.42423 10.2238 0.889162 9.50794 0.545171 8.99777L0.501581 8.93355C0.286781 8.61809 0 8.19691 0 7.58708C0 6.97725 0.286783 6.55607 0.501581 6.24061L0.545171 6.17639C1.52716 4.72 4.06625 1.58708 8 1.58708ZM8.00001 3.58708C8.32689 3.58708 8.6539 3.62086 8.97824 3.68222L8.96213 3.69932C8.65365 3.62596 8.33146 3.58708 8.00001 3.58708ZM8 4.58708C8.04143 4.58708 8.08266 4.58789 8.12369 4.58949L4.9663 7.94166C4.95236 7.82537 4.94519 7.70705 4.94519 7.58708C4.94519 5.93022 6.31287 4.58708 8 4.58708Z" 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.6012 1.26611C14.1924 0.894763 13.5467 0.912984 13.1681 1.31501L1.70391 13.4864C1.32524 13.8884 1.35699 14.522 1.76579 14.8934C2.17459 15.2647 2.82027 15.2465 3.19894 14.8445L4.99238 12.9404C5.88019 13.3349 6.88397 13.5871 8 13.5871C11.9337 13.5871 14.4728 10.4542 15.4548 8.99777L15.4984 8.93355C15.7132 8.61809 16 8.19691 16 7.58708C16 6.97724 15.7132 6.55606 15.4984 6.24061L15.4548 6.17639C15.0571 5.58653 14.404 4.72168 13.5062 3.90133L14.6631 2.67309C15.0418 2.27106 15.01 1.63747 14.6012 1.26611ZM11.6703 5.85054L10.9066 6.66133C11.0028 6.9529 11.0548 7.26402 11.0548 7.58708C11.0548 9.24393 9.68713 10.5871 8 10.5871C7.7543 10.5871 7.51537 10.5586 7.28646 10.5048L6.52258 11.3158C6.98061 11.491 7.47888 11.5871 8.00001 11.5871C7.62198 11.5871 7.24379 11.5419 6.86974 11.4611C7.23037 11.5422 7.60736 11.5871 8.00001 11.5871C10.2495 11.5871 12.0731 9.79622 12.0731 7.58708C12.0731 6.96482 11.9284 6.37575 11.6703 5.85054ZM8 1.58708C8.9189 1.58708 9.7617 1.75803 10.5263 2.03863L8.97905 3.68136C8.66462 3.62036 8.33812 3.58708 8.00001 3.58708C5.75051 3.58708 3.92692 5.37794 3.92692 7.58708C3.92692 8.02163 3.99748 8.43999 4.12796 8.83172L2.14338 10.9387C1.42423 10.2238 0.889162 9.50794 0.545171 8.99777L0.501581 8.93355C0.286781 8.61809 0 8.19691 0 7.58708C0 6.97725 0.286783 6.55607 0.501581 6.24061L0.545171 6.17639C1.52716 4.72 4.06625 1.58708 8 1.58708ZM8.00001 3.58708C8.32689 3.58708 8.6539 3.62086 8.97824 3.68222L8.96213 3.69932C8.65365 3.62596 8.33146 3.58708 8.00001 3.58708ZM8 4.58708C8.04143 4.58708 8.08266 4.58789 8.12369 4.58949L4.9663 7.94166C4.95236 7.82537 4.94519 7.70705 4.94519 7.58708C4.94519 5.93022 6.31287 4.58708 8 4.58708Z" fill={'currentColor'} /></svg>;
 };
 VisibilityOff.displayName = 'VisibilityOff';
 VisibilityOff.isGlyph = true;

package/src/generated/Warning.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 035040f166e113ed89f47afdcd0e6ba9
+* @checksum 0c70b15126c8ec6b8db47542e99ca8a1
 */
 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 WarningProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Warning = ({
   role = 'img',
   ...props
 }: WarningProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Warning = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Warning', {
     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.8639 1.51357C8.49039 0.828811 7.50961 0.828811 7.1361 1.51357L1.12218 12.5388C0.763263 13.1968 1.23814 14 1.98608 14H14.0139C14.7619 14 15.2367 13.1968 14.8778 12.5388L8.8639 1.51357ZM7 5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9V5ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" 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.8639 1.51357C8.49039 0.828811 7.50961 0.828811 7.1361 1.51357L1.12218 12.5388C0.763263 13.1968 1.23814 14 1.98608 14H14.0139C14.7619 14 15.2367 13.1968 14.8778 12.5388L8.8639 1.51357ZM7 5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9V5ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" fill={'currentColor'} /></svg>;
 };
 Warning.displayName = 'Warning';
 Warning.isGlyph = true;

package/src/generated/Wizard.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1a58301da72bb805197080c3015df426
+* @checksum fa20d3b6fe28c0c5813895bcb2f89f34
 */
 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 WizardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Wizard = ({
   role = 'img',
   ...props
 }: WizardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Wizard = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Wizard', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13.3273 3.27672C13.5149 2.89768 13.0912 2.47755 12.709 2.66362L10.1963 3.88661C10.0254 3.96982 9.81429 3.93162 9.67346 3.79198L7.60363 1.73961C7.28873 1.42736 6.7744 1.67771 6.85304 2.10495L7.36999 4.91317C7.40516 5.10424 7.31323 5.28994 7.14227 5.37315L4.62965 6.59614C4.24739 6.78221 4.35321 7.35705 4.78408 7.43504L7.61618 7.94762C7.80888 7.9825 7.96315 8.13547 7.99832 8.32654L8.51527 11.1348C8.59391 11.562 9.17365 11.6669 9.3613 11.2879L10.5947 8.79645C10.6786 8.62694 10.8659 8.53579 11.0586 8.57066L13.8907 9.08324C14.3216 9.16123 14.574 8.65123 14.2591 8.33898L12.1893 6.28661C12.0485 6.14697 12.01 5.93766 12.0939 5.76815L13.3273 3.27672ZM7 10.5C7.35311 10.1498 7.31222 9.54163 6.90867 9.14149C6.50512 8.74134 5.89174 8.7008 5.53863 9.05092L1.84025 12.7127C1.48714 13.0628 1.52803 13.6711 1.93158 14.0712C2.33513 14.4713 2.94851 14.5119 3.30162 14.1618L7 10.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="M13.3273 3.27672C13.5149 2.89768 13.0912 2.47755 12.709 2.66362L10.1963 3.88661C10.0254 3.96982 9.81429 3.93162 9.67346 3.79198L7.60363 1.73961C7.28873 1.42736 6.7744 1.67771 6.85304 2.10495L7.36999 4.91317C7.40516 5.10424 7.31323 5.28994 7.14227 5.37315L4.62965 6.59614C4.24739 6.78221 4.35321 7.35705 4.78408 7.43504L7.61618 7.94762C7.80888 7.9825 7.96315 8.13547 7.99832 8.32654L8.51527 11.1348C8.59391 11.562 9.17365 11.6669 9.3613 11.2879L10.5947 8.79645C10.6786 8.62694 10.8659 8.53579 11.0586 8.57066L13.8907 9.08324C14.3216 9.16123 14.574 8.65123 14.2591 8.33898L12.1893 6.28661C12.0485 6.14697 12.01 5.93766 12.0939 5.76815L13.3273 3.27672ZM7 10.5C7.35311 10.1498 7.31222 9.54163 6.90867 9.14149C6.50512 8.74134 5.89174 8.7008 5.53863 9.05092L1.84025 12.7127C1.48714 13.0628 1.52803 13.6711 1.93158 14.0712C2.33513 14.4713 2.94851 14.5119 3.30162 14.1618L7 10.5Z" fill={'currentColor'} /></svg>;
 };
 Wizard.displayName = 'Wizard';
 Wizard.isGlyph = true;

package/src/generated/Wrench.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1030317445aa257afea5afd5508d8a
+* @checksum 38055181bb9a97d91f3fddf9c72ec6a6
 */
 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 WrenchProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Wrench = ({
   role = 'img',
   ...props
 }: WrenchProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Wrench = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Wrench', {
     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.625 9.75C13.0422 9.75 15 7.79219 15 5.375C15 4.95664 14.9398 4.55195 14.8305 4.16641C14.7457 3.87109 14.382 3.80547 14.166 4.02148L12.066 6.12148C12.0144 6.17315 11.9508 6.21071 11.8821 6.23144C11.8043 6.25491 11.7248 6.21773 11.6673 6.1603L9.8397 4.33267C9.78227 4.27523 9.74509 4.19569 9.76856 4.11794C9.78929 4.04924 9.82685 3.98565 9.87852 3.93398L11.9785 1.83398C12.1945 1.61797 12.1262 1.2543 11.8336 1.16953C11.448 1.06016 11.0434 1 10.625 1C8.20781 1 6.25 2.95781 6.25 5.375C6.25 5.82904 6.32027 6.26861 6.44822 6.68115C6.48333 6.79434 6.4563 6.9187 6.3725 7.0025L1.54414 11.8309C1.19687 12.1781 1 12.6512 1 13.1434C1 14.1688 1.83125 15 2.85664 15C3.34883 15 3.82188 14.8031 4.16914 14.4559L8.99671 9.62829C9.08092 9.54408 9.20602 9.51727 9.31967 9.55285C9.73197 9.68189 10.1713 9.75 10.625 9.75ZM2.75 14.125C3.23325 14.125 3.625 13.7332 3.625 13.25C3.625 12.7668 3.23325 12.375 2.75 12.375C2.26675 12.375 1.875 12.7668 1.875 13.25C1.875 13.7332 2.26675 14.125 2.75 14.125Z" 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.625 9.75C13.0422 9.75 15 7.79219 15 5.375C15 4.95664 14.9398 4.55195 14.8305 4.16641C14.7457 3.87109 14.382 3.80547 14.166 4.02148L12.066 6.12148C12.0144 6.17315 11.9508 6.21071 11.8821 6.23144C11.8043 6.25491 11.7248 6.21773 11.6673 6.1603L9.8397 4.33267C9.78227 4.27523 9.74509 4.19569 9.76856 4.11794C9.78929 4.04924 9.82685 3.98565 9.87852 3.93398L11.9785 1.83398C12.1945 1.61797 12.1262 1.2543 11.8336 1.16953C11.448 1.06016 11.0434 1 10.625 1C8.20781 1 6.25 2.95781 6.25 5.375C6.25 5.82904 6.32027 6.26861 6.44822 6.68115C6.48333 6.79434 6.4563 6.9187 6.3725 7.0025L1.54414 11.8309C1.19687 12.1781 1 12.6512 1 13.1434C1 14.1688 1.83125 15 2.85664 15C3.34883 15 3.82188 14.8031 4.16914 14.4559L8.99671 9.62829C9.08092 9.54408 9.20602 9.51727 9.31967 9.55285C9.73197 9.68189 10.1713 9.75 10.625 9.75ZM2.75 14.125C3.23325 14.125 3.625 13.7332 3.625 13.25C3.625 12.7668 3.23325 12.375 2.75 12.375C2.26675 12.375 1.875 12.7668 1.875 13.25C1.875 13.7332 2.26675 14.125 2.75 14.125Z" fill={'currentColor'} /></svg>;
 };
 Wrench.displayName = 'Wrench';
 Wrench.isGlyph = true;

package/src/generated/Write.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 88f5725fa3ea564f5ae7a38c459c4202
+* @checksum e5274ac8e945b7065abfc6e2469a8f56
 */
 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 WriteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Write = ({
   role = 'img',
   ...props
 }: WriteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Write = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Write', {
     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.71094 3.74943C7.98779 3.5624 7.17765 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83326 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C6.64212 8.61764 6.9206 8.60546 7.20335 8.58125C6.75934 8.06173 6.67036 7.35853 6.91542 6.76298C7.19331 6.08765 7.8543 5.63811 8.62053 5.63811H8.71094V3.74943Z" fill={'currentColor'} /><path d="M8.06766 9.30516C7.49049 9.39617 6.91039 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22931 2.74517 8.7953C2.2802 8.61117 1.84763 8.38033 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.92835 11.2356 10.1286 11.1412 10.3071 11.0404C10.2351 10.9984 10.1654 10.9511 10.0985 10.8987L8.06766 9.30516Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /><path d="M12.4886 2.29681V6.87341H13.8795C14.4529 6.87341 14.7183 7.51856 14.2849 7.85866L11.6554 9.92188C11.4227 10.1045 11.0773 10.1045 10.8446 9.92188L8.21511 7.85866C7.78167 7.51856 8.04714 6.87341 8.62053 6.87341H9.92969V2.29681C9.92969 1.5806 10.5025 1 11.2091 1C11.9157 1 12.4886 1.5806 12.4886 2.29681Z" 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.71094 3.74943C7.98779 3.5624 7.17765 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83326 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C6.64212 8.61764 6.9206 8.60546 7.20335 8.58125C6.75934 8.06173 6.67036 7.35853 6.91542 6.76298C7.19331 6.08765 7.8543 5.63811 8.62053 5.63811H8.71094V3.74943Z" fill={'currentColor'} /><path d="M8.06766 9.30516C7.49049 9.39617 6.91039 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22931 2.74517 8.7953C2.2802 8.61117 1.84763 8.38033 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.92835 11.2356 10.1286 11.1412 10.3071 11.0404C10.2351 10.9984 10.1654 10.9511 10.0985 10.8987L8.06766 9.30516Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /><path d="M12.4886 2.29681V6.87341H13.8795C14.4529 6.87341 14.7183 7.51856 14.2849 7.85866L11.6554 9.92188C11.4227 10.1045 11.0773 10.1045 10.8446 9.92188L8.21511 7.85866C7.78167 7.51856 8.04714 6.87341 8.62053 6.87341H9.92969V2.29681C9.92969 1.5806 10.5025 1 11.2091 1C11.9157 1 12.4886 1.5806 12.4886 2.29681Z" fill={'currentColor'} /></svg>;
 };
 Write.displayName = 'Write';
 Write.isGlyph = true;

package/src/generated/X.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c4c4dba0474e43edea5bc9c3132850bb
+* @checksum 40801001b61f74e5e9538d77c29e4ded
 */
 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 XProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const X = ({
   role = 'img',
   ...props
 }: XProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const X = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'X', {
     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.2028 3.40381C11.8123 3.01329 11.1791 3.01329 10.7886 3.40381L8.3137 5.87869L5.83883 3.40381C5.44831 3.01329 4.81514 3.01329 4.42462 3.40381L3.71751 4.11092C3.32699 4.50144 3.32699 5.13461 3.71751 5.52513L6.19238 8.00001L3.71751 10.4749C3.32699 10.8654 3.32699 11.4986 3.71751 11.8891L4.42462 12.5962C4.81514 12.9867 5.44831 12.9867 5.83883 12.5962L8.3137 10.1213L10.7886 12.5962C11.1791 12.9867 11.8123 12.9867 12.2028 12.5962L12.9099 11.8891C13.3004 11.4986 13.3004 10.8654 12.9099 10.4749L10.435 8.00001L12.9099 5.52513C13.3004 5.13461 13.3004 4.50144 12.9099 4.11092L12.2028 3.40381Z" 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.2028 3.40381C11.8123 3.01329 11.1791 3.01329 10.7886 3.40381L8.3137 5.87869L5.83883 3.40381C5.44831 3.01329 4.81514 3.01329 4.42462 3.40381L3.71751 4.11092C3.32699 4.50144 3.32699 5.13461 3.71751 5.52513L6.19238 8.00001L3.71751 10.4749C3.32699 10.8654 3.32699 11.4986 3.71751 11.8891L4.42462 12.5962C4.81514 12.9867 5.44831 12.9867 5.83883 12.5962L8.3137 10.1213L10.7886 12.5962C11.1791 12.9867 11.8123 12.9867 12.2028 12.5962L12.9099 11.8891C13.3004 11.4986 13.3004 10.8654 12.9099 10.4749L10.435 8.00001L12.9099 5.52513C13.3004 5.13461 13.3004 4.50144 12.9099 4.11092L12.2028 3.40381Z" fill={'currentColor'} /></svg>;
 };
 X.displayName = 'X';
 X.isGlyph = true;

package/src/generated/XWithCircle.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum be4d5840abf953589ffc2965feeb2bba
+* @checksum f2808706ac66b2c1d7d2582bc38986ff
 */
 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 XWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const XWithCircle = ({
   role = 'img',
   ...props
 }: XWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const XWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'XWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9.41421 5.17157C9.80474 4.78105 10.4379 4.78105 10.8284 5.17157C11.219 5.5621 11.219 6.19526 10.8284 6.58579L9.41421 8L10.8284 9.41421C11.219 9.80474 11.219 10.4379 10.8284 10.8284C10.4379 11.219 9.80474 11.219 9.41421 10.8284L8 9.41421L6.58579 10.8284C6.19526 11.219 5.5621 11.219 5.17157 10.8284C4.78105 10.4379 4.78105 9.80474 5.17157 9.41421L6.58579 8L5.17157 6.58579C4.78105 6.19526 4.78105 5.5621 5.17157 5.17157C5.5621 4.78105 6.19526 4.78105 6.58579 5.17157L8 6.58579L9.41421 5.17157Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9.41421 5.17157C9.80474 4.78105 10.4379 4.78105 10.8284 5.17157C11.219 5.5621 11.219 6.19526 10.8284 6.58579L9.41421 8L10.8284 9.41421C11.219 9.80474 11.219 10.4379 10.8284 10.8284C10.4379 11.219 9.80474 11.219 9.41421 10.8284L8 9.41421L6.58579 10.8284C6.19526 11.219 5.5621 11.219 5.17157 10.8284C4.78105 10.4379 4.78105 9.80474 5.17157 9.41421L6.58579 8L5.17157 6.58579C4.78105 6.19526 4.78105 5.5621 5.17157 5.17157C5.5621 4.78105 6.19526 4.78105 6.58579 5.17157L8 6.58579L9.41421 5.17157Z" fill={'currentColor'} /></svg>;
 };
 XWithCircle.displayName = 'XWithCircle';
 XWithCircle.isGlyph = true;