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

package/src/generated/MagnifyingGlass.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 60b361f5d943c43ba4d2a55de4f99347
+* @checksum fcadccd495552292e9bfca5d6a1ea246
 */
 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 MagnifyingGlassProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MagnifyingGlass = ({
   role = 'img',
   ...props
 }: MagnifyingGlassProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MagnifyingGlass = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MagnifyingGlass', {
     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="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" 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="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" fill={'currentColor'} /></svg>;
 };
 MagnifyingGlass.displayName = 'MagnifyingGlass';
 MagnifyingGlass.isGlyph = true;

package/src/generated/Megaphone.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 90dad46833764f8613e8b83f3c00a376
+* @checksum b061bbdd34e4523872295de410d3989a
 */
 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 MegaphoneProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Megaphone = ({
   role = 'img',
   ...props
 }: MegaphoneProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Megaphone = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Megaphone', {
     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 3L11.7253 1.3642C12.3641 1.18168 13 1.66135 13 2.32573V4.26756V7.73243V9.67427C13 10.3386 12.3641 10.8183 11.7253 10.6358L6 9H3C1.89543 9 1 8.10457 1 7V5C1 3.89543 1.89543 3 3 3H6ZM5.34325 10H3V15H5.97958C6.69851 15 7.18255 14.2641 6.8978 13.6039L5.34325 10ZM16 6C16 7.10457 15.1046 8 14 8V4C15.1046 4 16 4.89543 16 6Z" 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 3L11.7253 1.3642C12.3641 1.18168 13 1.66135 13 2.32573V4.26756V7.73243V9.67427C13 10.3386 12.3641 10.8183 11.7253 10.6358L6 9H3C1.89543 9 1 8.10457 1 7V5C1 3.89543 1.89543 3 3 3H6ZM5.34325 10H3V15H5.97958C6.69851 15 7.18255 14.2641 6.8978 13.6039L5.34325 10ZM16 6C16 7.10457 15.1046 8 14 8V4C15.1046 4 16 4.89543 16 6Z" fill={'currentColor'} /></svg>;
 };
 Megaphone.displayName = 'Megaphone';
 Megaphone.isGlyph = true;

package/src/generated/Menu.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1302681cd46d65becd40e8e91b091765
+* @checksum 57dace6012b1bb15e0bef37d13618007
 */
 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 MenuProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Menu = ({
   role = 'img',
   ...props
 }: MenuProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Menu = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Menu', {
     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.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4C14 4.55228 13.5523 5 13 5H3C2.44772 5 2 4.55228 2 4Z" fill={'currentColor'} /><path d="M2 8C2 7.44772 2.44772 7 3 7H13C13.5523 7 14 7.44772 14 8C14 8.55228 13.5523 9 13 9H3C2.44772 9 2 8.55228 2 8Z" fill={'currentColor'} /><path d="M3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H3Z" 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.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4C14 4.55228 13.5523 5 13 5H3C2.44772 5 2 4.55228 2 4Z" fill={'currentColor'} /><path d="M2 8C2 7.44772 2.44772 7 3 7H13C13.5523 7 14 7.44772 14 8C14 8.55228 13.5523 9 13 9H3C2.44772 9 2 8.55228 2 8Z" fill={'currentColor'} /><path d="M3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H3Z" fill={'currentColor'} /></svg>;
 };
 Menu.displayName = 'Menu';
 Menu.isGlyph = true;

package/src/generated/Minus.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9c244c1119801dc22acac1be9bc51d04
+* @checksum e1f0b478e23e2eac011f4e6c01c1c588
 */
 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 MinusProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Minus = ({
   role = 'img',
   ...props
 }: MinusProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Minus = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Minus', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3 6.5C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05229 2.44772 9.5 3 9.5C9.04335 9.5 7.79133 9.5 13 9.5C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94772 13.5523 6.5 13 6.5C7.79133 6.5 9.04335 6.5 3 6.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="M3 6.5C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05229 2.44772 9.5 3 9.5C9.04335 9.5 7.79133 9.5 13 9.5C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94772 13.5523 6.5 13 6.5C7.79133 6.5 9.04335 6.5 3 6.5Z" fill={'currentColor'} /></svg>;
 };
 Minus.displayName = 'Minus';
 Minus.isGlyph = true;

package/src/generated/Mobile.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1d9da6a1ce4eeeb3e0c6cac6a588ea9a
+* @checksum 590cde11eb372ef3e1626758d8edd3be
 */
 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 MobileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Mobile = ({
   role = 'img',
   ...props
 }: MobileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Mobile = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Mobile', {
     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 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" 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 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" fill={'currentColor'} /></svg>;
 };
 Mobile.displayName = 'Mobile';
 Mobile.isGlyph = true;

package/src/generated/Moon.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d7a3f24b41ad4f62c488d74dbcbbf9fa
+* @checksum b663f91fa185d7fac22cfa0b0bc83753
 */
 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 MoonProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Moon = ({
   role = 'img',
   ...props
 }: MoonProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Moon = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Moon', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.7868 10.0736C13.5564 9.8432 13.2012 9.7952 12.9228 9.9584C12.798 10.0352 12.6636 10.0928 12.5292 10.1504C10.7628 10.8704 8.6412 9.9392 7.8252 7.9424C7.0956 6.1472 7.7388 4.208 9.1692 3.3248C9.438 3.1616 9.5724 2.8352 9.486 2.5184C9.3996 2.2016 9.1116 2 8.7948 2H8.67C5.358 2 2.67 4.688 2.67 8C2.67 11.312 5.358 14 8.67 14C10.9164 14 12.8748 12.7616 13.902 10.9376C14.0652 10.6592 14.0076 10.304 13.7772 10.0736H13.7868Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M13.7868 10.0736C13.5564 9.8432 13.2012 9.7952 12.9228 9.9584C12.798 10.0352 12.6636 10.0928 12.5292 10.1504C10.7628 10.8704 8.6412 9.9392 7.8252 7.9424C7.0956 6.1472 7.7388 4.208 9.1692 3.3248C9.438 3.1616 9.5724 2.8352 9.486 2.5184C9.3996 2.2016 9.1116 2 8.7948 2H8.67C5.358 2 2.67 4.688 2.67 8C2.67 11.312 5.358 14 8.67 14C10.9164 14 12.8748 12.7616 13.902 10.9376C14.0652 10.6592 14.0076 10.304 13.7772 10.0736H13.7868Z" fill={'currentColor'} /></svg>;
 };
 Moon.displayName = 'Moon';
 Moon.isGlyph = true;

package/src/generated/MultiDirectionArrow.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c7cc7e4f42011f561655f1bd43f40695
+* @checksum 23e8a8859dc4696ef87adaead7594d12
 */
 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 MultiDirectionArrowProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MultiDirectionArrow = ({
   role = 'img',
   ...props
 }: MultiDirectionArrowProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MultiDirectionArrow = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MultiDirectionArrow', {
     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 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill={'currentColor'} /><path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill={'currentColor'} /><path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill={'currentColor'} /><path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.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="M5 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill={'currentColor'} /><path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill={'currentColor'} /><path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill={'currentColor'} /><path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.5Z" fill={'currentColor'} /></svg>;
 };
 MultiDirectionArrow.displayName = 'MultiDirectionArrow';
 MultiDirectionArrow.isGlyph = true;

package/src/generated/MultiLayers.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54a552a4db8de48df83aad856752f1d6
+* @checksum 138c8977690ae049e37a450575468ccb
 */
 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 MultiLayersProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MultiLayers = ({
   role = 'img',
   ...props
 }: MultiLayersProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MultiLayers = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MultiLayers', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.4311 9.74514L12.1717 9.62373L12.4311 9.50233C12.7321 9.3607 13.0019 9.15837 13.1887 8.90545C13.3858 8.65253 13.5 8.32879 13.5 8.00506C13.5 7.68132 13.3858 7.3677 13.1887 7.10467C12.9915 6.85175 12.7321 6.64942 12.4311 6.50778L12.1406 6.36615L12.3585 6.26498C12.6594 6.12335 12.9292 5.92101 13.116 5.66809C13.3132 5.41517 13.4274 5.09144 13.4274 4.7677C13.4274 4.44397 13.3132 4.13035 13.116 3.86732C12.9189 3.6144 12.6594 3.41206 12.3585 3.27043L9.1934 1.76303C8.79906 1.58093 8.38396 1.5 7.96887 1.5C7.55377 1.5 7.1283 1.58093 6.74434 1.76303L3.56887 3.27043C3.26792 3.41206 2.99811 3.6144 2.81132 3.86732C2.61415 4.12023 2.5 4.44397 2.5 4.7677C2.5 5.09144 2.61415 5.40506 2.81132 5.66809C3.00849 5.92101 3.26792 6.12335 3.56887 6.26498L3.85943 6.40661L3.64151 6.50778C3.34057 6.64942 3.07075 6.85175 2.88396 7.10467C2.68679 7.35759 2.57264 7.68132 2.57264 8.00506C2.57264 8.32879 2.68679 8.64241 2.88396 8.90545C3.08113 9.15837 3.34057 9.3607 3.64151 9.50233L3.90094 9.62373L3.64151 9.74514C3.34057 9.88677 3.07075 10.0891 2.88396 10.342C2.68679 10.5949 2.57264 10.9187 2.57264 11.2424C2.57264 11.5661 2.68679 11.8798 2.88396 12.1428C3.08113 12.3957 3.34057 12.5981 3.64151 12.7397L6.8066 14.237C7.19057 14.4191 7.61604 14.5 8.03113 14.5C8.44623 14.5 8.8717 14.4191 9.25566 14.237L12.4208 12.7397C12.7217 12.5981 12.9915 12.3957 13.1783 12.1428C13.3755 11.8899 13.4896 11.5661 13.4896 11.2424C13.4896 10.9187 13.3755 10.6051 13.1783 10.342C12.9811 10.0891 12.7217 9.88677 12.4208 9.74514H12.4311ZM8.04151 12.9926C7.83396 12.9926 7.63679 12.9521 7.50189 12.8813L4.33679 11.384C4.22264 11.3335 4.17075 11.2728 4.15 11.2525L4.17075 11.2323L4.33679 11.121L5.69623 10.4837L6.82736 11.0198C7.21132 11.2019 7.63679 11.2829 8.05189 11.2829C8.46698 11.2829 8.89245 11.2019 9.27642 11.0198L10.4075 10.4837L11.767 11.121C11.8811 11.1716 11.933 11.2323 11.9538 11.2525L11.933 11.2728L11.767 11.384L8.60189 12.8813C8.4566 12.9521 8.25943 12.9926 8.06226 12.9926H8.04151ZM4.13962 8.00506L4.16038 7.98482L4.32642 7.87354L5.64434 7.2463L6.74434 7.76226C7.1283 7.94436 7.55377 8.02529 7.96887 8.02529C8.38396 8.02529 8.80943 7.94436 9.1934 7.76226L10.366 7.20584L11.7566 7.86342C11.8708 7.91401 11.9226 7.97471 11.9434 7.99494L11.9226 8.01517L11.7566 8.12646L8.59151 9.62373C8.44623 9.69455 8.24906 9.73502 8.05189 9.73502C7.84434 9.73502 7.64717 9.69455 7.51226 9.62373L4.34717 8.12646C4.23302 8.07588 4.18113 8.01517 4.16038 7.99494L4.13962 8.00506ZM4.06698 4.7677L4.08774 4.74747L4.25377 4.63619L7.41887 3.13891C7.56415 3.06809 7.76132 3.02763 7.95849 3.02763C8.16604 3.02763 8.36321 3.06809 8.49811 3.13891L11.6632 4.63619C11.7774 4.68677 11.8292 4.74747 11.85 4.7677L11.8292 4.78794L11.6632 4.89922L8.49811 6.3965C8.35283 6.46731 8.15566 6.50778 7.95849 6.50778C7.75094 6.50778 7.55377 6.46731 7.41887 6.3965L4.25377 4.89922C4.13962 4.84864 4.08774 4.78794 4.06698 4.7677Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M12.4311 9.74514L12.1717 9.62373L12.4311 9.50233C12.7321 9.3607 13.0019 9.15837 13.1887 8.90545C13.3858 8.65253 13.5 8.32879 13.5 8.00506C13.5 7.68132 13.3858 7.3677 13.1887 7.10467C12.9915 6.85175 12.7321 6.64942 12.4311 6.50778L12.1406 6.36615L12.3585 6.26498C12.6594 6.12335 12.9292 5.92101 13.116 5.66809C13.3132 5.41517 13.4274 5.09144 13.4274 4.7677C13.4274 4.44397 13.3132 4.13035 13.116 3.86732C12.9189 3.6144 12.6594 3.41206 12.3585 3.27043L9.1934 1.76303C8.79906 1.58093 8.38396 1.5 7.96887 1.5C7.55377 1.5 7.1283 1.58093 6.74434 1.76303L3.56887 3.27043C3.26792 3.41206 2.99811 3.6144 2.81132 3.86732C2.61415 4.12023 2.5 4.44397 2.5 4.7677C2.5 5.09144 2.61415 5.40506 2.81132 5.66809C3.00849 5.92101 3.26792 6.12335 3.56887 6.26498L3.85943 6.40661L3.64151 6.50778C3.34057 6.64942 3.07075 6.85175 2.88396 7.10467C2.68679 7.35759 2.57264 7.68132 2.57264 8.00506C2.57264 8.32879 2.68679 8.64241 2.88396 8.90545C3.08113 9.15837 3.34057 9.3607 3.64151 9.50233L3.90094 9.62373L3.64151 9.74514C3.34057 9.88677 3.07075 10.0891 2.88396 10.342C2.68679 10.5949 2.57264 10.9187 2.57264 11.2424C2.57264 11.5661 2.68679 11.8798 2.88396 12.1428C3.08113 12.3957 3.34057 12.5981 3.64151 12.7397L6.8066 14.237C7.19057 14.4191 7.61604 14.5 8.03113 14.5C8.44623 14.5 8.8717 14.4191 9.25566 14.237L12.4208 12.7397C12.7217 12.5981 12.9915 12.3957 13.1783 12.1428C13.3755 11.8899 13.4896 11.5661 13.4896 11.2424C13.4896 10.9187 13.3755 10.6051 13.1783 10.342C12.9811 10.0891 12.7217 9.88677 12.4208 9.74514H12.4311ZM8.04151 12.9926C7.83396 12.9926 7.63679 12.9521 7.50189 12.8813L4.33679 11.384C4.22264 11.3335 4.17075 11.2728 4.15 11.2525L4.17075 11.2323L4.33679 11.121L5.69623 10.4837L6.82736 11.0198C7.21132 11.2019 7.63679 11.2829 8.05189 11.2829C8.46698 11.2829 8.89245 11.2019 9.27642 11.0198L10.4075 10.4837L11.767 11.121C11.8811 11.1716 11.933 11.2323 11.9538 11.2525L11.933 11.2728L11.767 11.384L8.60189 12.8813C8.4566 12.9521 8.25943 12.9926 8.06226 12.9926H8.04151ZM4.13962 8.00506L4.16038 7.98482L4.32642 7.87354L5.64434 7.2463L6.74434 7.76226C7.1283 7.94436 7.55377 8.02529 7.96887 8.02529C8.38396 8.02529 8.80943 7.94436 9.1934 7.76226L10.366 7.20584L11.7566 7.86342C11.8708 7.91401 11.9226 7.97471 11.9434 7.99494L11.9226 8.01517L11.7566 8.12646L8.59151 9.62373C8.44623 9.69455 8.24906 9.73502 8.05189 9.73502C7.84434 9.73502 7.64717 9.69455 7.51226 9.62373L4.34717 8.12646C4.23302 8.07588 4.18113 8.01517 4.16038 7.99494L4.13962 8.00506ZM4.06698 4.7677L4.08774 4.74747L4.25377 4.63619L7.41887 3.13891C7.56415 3.06809 7.76132 3.02763 7.95849 3.02763C8.16604 3.02763 8.36321 3.06809 8.49811 3.13891L11.6632 4.63619C11.7774 4.68677 11.8292 4.74747 11.85 4.7677L11.8292 4.78794L11.6632 4.89922L8.49811 6.3965C8.35283 6.46731 8.15566 6.50778 7.95849 6.50778C7.75094 6.50778 7.55377 6.46731 7.41887 6.3965L4.25377 4.89922C4.13962 4.84864 4.08774 4.78794 4.06698 4.7677Z" fill={'currentColor'} /></svg>;
 };
 MultiLayers.displayName = 'MultiLayers';
 MultiLayers.isGlyph = true;

package/src/generated/NavCollapse.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1173827864fd0acaf7131938be6c0a
+* @checksum a468e130ebd08f00aed43cd499959b89
 */
 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 NavCollapseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NavCollapse = ({
   role = 'img',
   ...props
 }: NavCollapseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NavCollapse = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NavCollapse', {
     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.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.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.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.5Z" fill={'currentColor'} /></svg>;
 };
 NavCollapse.displayName = 'NavCollapse';
 NavCollapse.isGlyph = true;

package/src/generated/NavExpand.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bfe28d9a31cde7325ff344b05af73ff8
+* @checksum 9839b61bd5a9ead488763f7a2446abe7
 */
 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 NavExpandProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NavExpand = ({
   role = 'img',
   ...props
 }: NavExpandProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NavExpand = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NavExpand', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.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="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.5Z" fill={'currentColor'} /></svg>;
 };
 NavExpand.displayName = 'NavExpand';
 NavExpand.isGlyph = true;

package/src/generated/NoFilter.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e9eab9c247dbec275fe6d580566d61dc
+* @checksum 6454cb046f256c5df44b6666c498a003
 */
 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 NoFilterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NoFilter = ({
   role = 'img',
   ...props
 }: NoFilterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NoFilter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NoFilter', {
     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.60553 1.2041C2.21353 0.905115 1.65113 0.934737 1.29289 1.29297C0.902369 1.68349 0.902369 2.31666 1.29289 2.70718L7 8.41429V14.3981C7 14.8277 7.50596 15.0573 7.82925 14.7744L10.779 12.1933L13.2908 14.7051C13.6813 15.0956 14.3145 15.0956 14.705 14.7051C15.0955 14.3146 15.0955 13.6814 14.705 13.2909L12.8869 11.4728L12.8806 11.4791L2.60553 1.2041Z" fill={'currentColor'} /><path d="M10.5732 7.14947C10.7307 7.30696 11 7.19542 11 6.9727V6.14834L14.8005 2.20776C15.2025 1.79085 14.9563 1 14.4244 1H5.0273C4.80458 1 4.69304 1.26929 4.85053 1.42678L10.5732 7.14947Z" 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.60553 1.2041C2.21353 0.905115 1.65113 0.934737 1.29289 1.29297C0.902369 1.68349 0.902369 2.31666 1.29289 2.70718L7 8.41429V14.3981C7 14.8277 7.50596 15.0573 7.82925 14.7744L10.779 12.1933L13.2908 14.7051C13.6813 15.0956 14.3145 15.0956 14.705 14.7051C15.0955 14.3146 15.0955 13.6814 14.705 13.2909L12.8869 11.4728L12.8806 11.4791L2.60553 1.2041Z" fill={'currentColor'} /><path d="M10.5732 7.14947C10.7307 7.30696 11 7.19542 11 6.9727V6.14834L14.8005 2.20776C15.2025 1.79085 14.9563 1 14.4244 1H5.0273C4.80458 1 4.69304 1.26929 4.85053 1.42678L10.5732 7.14947Z" fill={'currentColor'} /></svg>;
 };
 NoFilter.displayName = 'NoFilter';
 NoFilter.isGlyph = true;

package/src/generated/NotAllowed.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 032177bb1c049b718edfcb232351db03
+* @checksum 04194aa4c07cac1778b7630760754009
 */
 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 NotAllowedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NotAllowed = ({
   role = 'img',
   ...props
 }: NotAllowedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NotAllowed = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NotAllowed', {
     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.75 8C11.75 10.0711 10.0711 11.75 8 11.75C7.37416 11.75 6.78413 11.5967 6.26542 11.3256L11.3256 6.26541C11.5967 6.78413 11.75 7.37416 11.75 8ZM4.67442 9.73459L9.73459 4.67442C9.21587 4.40331 8.62584 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 8.62584 4.40331 9.21587 4.67442 9.73459ZM14 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 8Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M11.75 8C11.75 10.0711 10.0711 11.75 8 11.75C7.37416 11.75 6.78413 11.5967 6.26542 11.3256L11.3256 6.26541C11.5967 6.78413 11.75 7.37416 11.75 8ZM4.67442 9.73459L9.73459 4.67442C9.21587 4.40331 8.62584 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 8.62584 4.40331 9.21587 4.67442 9.73459ZM14 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 8Z" fill={'currentColor'} /></svg>;
 };
 NotAllowed.displayName = 'NotAllowed';
 NotAllowed.isGlyph = true;

package/src/generated/Note.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 92571b38141a3b76af9af70766e8984f
+* @checksum da17fde6b187b1f7f2e05081c64026f8
 */
 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 NoteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Note = ({
   role = 'img',
   ...props
 }: NoteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Note = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Note', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.5 6.25C4.5 5.83579 4.83579 5.5 5.25 5.5H8.75C9.16421 5.5 9.5 5.83579 9.5 6.25C9.5 6.66421 9.16421 7 8.75 7H5.25C4.83579 7 4.5 6.66421 4.5 6.25Z" fill={'currentColor'} /><path d="M4.5 8.75C4.5 8.33579 4.83579 8 5.25 8H6.75C7.16421 8 7.5 8.33579 7.5 8.75C7.5 9.16421 7.16421 9.5 6.75 9.5H5.25C4.83579 9.5 4.5 9.16421 4.5 8.75Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M15 10L11 14H3C1.89543 14 1 13.1046 1 12V4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10ZM13 4H3L3 12H10V10C10 9.44772 10.4477 9 11 9H13V4Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M4.5 6.25C4.5 5.83579 4.83579 5.5 5.25 5.5H8.75C9.16421 5.5 9.5 5.83579 9.5 6.25C9.5 6.66421 9.16421 7 8.75 7H5.25C4.83579 7 4.5 6.66421 4.5 6.25Z" fill={'currentColor'} /><path d="M4.5 8.75C4.5 8.33579 4.83579 8 5.25 8H6.75C7.16421 8 7.5 8.33579 7.5 8.75C7.5 9.16421 7.16421 9.5 6.75 9.5H5.25C4.83579 9.5 4.5 9.16421 4.5 8.75Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M15 10L11 14H3C1.89543 14 1 13.1046 1 12V4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10ZM13 4H3L3 12H10V10C10 9.44772 10.4477 9 11 9H13V4Z" fill={'currentColor'} /></svg>;
 };
 Note.displayName = 'Note';
 Note.isGlyph = true;

package/src/generated/NumberedList.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 78d5ea655c25d7d086fb19cccabdd527
+* @checksum 7eba0ef41afe30759b27cc28c078d9f8
 */
 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 NumberedListProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NumberedList = ({
   role = 'img',
   ...props
 }: NumberedListProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NumberedList = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NumberedList', {
     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.64914 4.29651C2.73717 4.39255 2.86522 4.45658 3.00128 4.45658C3.08131 4.45658 3.15334 4.44057 3.25738 4.41656L3.5615 4.33653V6.48138H3.12933C2.96126 6.48138 2.8012 6.50539 2.67315 6.61743C2.56911 6.71347 2.51308 6.84952 2.51308 6.98558C2.51308 7.12163 2.56911 7.26569 2.67315 7.36173C2.8012 7.47377 2.95326 7.49778 3.12933 7.49778H5.01007C5.18614 7.49778 5.3382 7.46577 5.46625 7.36173C5.57029 7.27369 5.62632 7.12964 5.62632 6.99358C5.62632 6.85753 5.57029 6.71347 5.46625 6.61743C5.3382 6.50539 5.18614 6.48138 5.01007 6.48138H4.5779V3L2.99327 3.40816C2.84121 3.45618 2.72917 3.48819 2.62513 3.59223C2.5451 3.68827 2.51308 3.80832 2.51308 3.92036C2.51308 4.04842 2.5611 4.18447 2.64914 4.28851V4.29651Z" fill={'currentColor'} /><path d="M5.15413 11.9876C5.05809 11.9876 4.97006 12.0276 4.89002 12.0756H4.12172C4.52188 11.7315 4.80199 11.4834 4.97806 11.3153C5.25817 11.0432 5.44224 10.8431 5.53828 10.651C5.62632 10.475 5.66633 10.2829 5.66633 10.0828C5.66633 9.69065 5.51427 9.33851 5.22616 9.07441C4.93804 8.8023 4.55389 8.65824 4.12172 8.66624C3.84161 8.66624 3.5695 8.73027 3.32941 8.85032C3.08931 8.97037 2.88923 9.14644 2.75318 9.36252C2.63313 9.5626 2.5531 9.73867 2.5531 9.92274C2.5531 10.0588 2.60912 10.1868 2.70516 10.2749C2.8012 10.3709 2.92925 10.4269 3.0653 10.4269C3.16934 10.4269 3.28139 10.3949 3.36942 10.3309C3.46546 10.2589 3.52148 10.1628 3.5535 10.0508C3.59351 9.93875 3.64153 9.86672 3.68155 9.8267C3.79359 9.73067 3.92164 9.68265 4.10571 9.68265C4.28979 9.68265 4.41784 9.73067 4.50587 9.8107C4.60191 9.89873 4.63392 9.97076 4.63392 10.0668C4.63392 10.1228 4.60191 10.2109 4.50587 10.3229C4.29779 10.563 3.60952 11.1632 2.49708 12.0916L2.42505 12.1556V13.108H5.66633V12.6118C5.66633 12.4357 5.64232 12.2837 5.53028 12.1556C5.44224 12.0516 5.29018 11.9956 5.15413 11.9956V11.9876Z" fill={'currentColor'} /><path d="M12.5731 11.0912H8.25936C7.70714 11.0912 7.25896 11.5394 7.25896 12.0916C7.25896 12.6438 7.70714 13.092 8.25936 13.092H12.5731C13.1253 13.092 13.5735 12.6438 13.5735 12.0916C13.5735 11.5394 13.1253 11.0912 12.5731 11.0912Z" fill={'currentColor'} /><path d="M8.25936 5.08883H12.5731C13.1253 5.08883 13.5735 4.64065 13.5735 4.08843C13.5735 3.53621 13.1253 3.08803 12.5731 3.08803H8.25936C7.70714 3.08803 7.25896 3.53621 7.25896 4.08843C7.25896 4.64065 7.70714 5.08883 8.25936 5.08883Z" fill={'currentColor'} /><path d="M12.5731 7.15365H8.25936C7.70714 7.15365 7.25896 7.60182 7.25896 8.15404C7.25896 8.70626 7.70714 9.15444 8.25936 9.15444H12.5731C13.1253 9.15444 13.5735 8.70626 13.5735 8.15404C13.5735 7.60182 13.1253 7.15365 12.5731 7.15365Z" 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.64914 4.29651C2.73717 4.39255 2.86522 4.45658 3.00128 4.45658C3.08131 4.45658 3.15334 4.44057 3.25738 4.41656L3.5615 4.33653V6.48138H3.12933C2.96126 6.48138 2.8012 6.50539 2.67315 6.61743C2.56911 6.71347 2.51308 6.84952 2.51308 6.98558C2.51308 7.12163 2.56911 7.26569 2.67315 7.36173C2.8012 7.47377 2.95326 7.49778 3.12933 7.49778H5.01007C5.18614 7.49778 5.3382 7.46577 5.46625 7.36173C5.57029 7.27369 5.62632 7.12964 5.62632 6.99358C5.62632 6.85753 5.57029 6.71347 5.46625 6.61743C5.3382 6.50539 5.18614 6.48138 5.01007 6.48138H4.5779V3L2.99327 3.40816C2.84121 3.45618 2.72917 3.48819 2.62513 3.59223C2.5451 3.68827 2.51308 3.80832 2.51308 3.92036C2.51308 4.04842 2.5611 4.18447 2.64914 4.28851V4.29651Z" fill={'currentColor'} /><path d="M5.15413 11.9876C5.05809 11.9876 4.97006 12.0276 4.89002 12.0756H4.12172C4.52188 11.7315 4.80199 11.4834 4.97806 11.3153C5.25817 11.0432 5.44224 10.8431 5.53828 10.651C5.62632 10.475 5.66633 10.2829 5.66633 10.0828C5.66633 9.69065 5.51427 9.33851 5.22616 9.07441C4.93804 8.8023 4.55389 8.65824 4.12172 8.66624C3.84161 8.66624 3.5695 8.73027 3.32941 8.85032C3.08931 8.97037 2.88923 9.14644 2.75318 9.36252C2.63313 9.5626 2.5531 9.73867 2.5531 9.92274C2.5531 10.0588 2.60912 10.1868 2.70516 10.2749C2.8012 10.3709 2.92925 10.4269 3.0653 10.4269C3.16934 10.4269 3.28139 10.3949 3.36942 10.3309C3.46546 10.2589 3.52148 10.1628 3.5535 10.0508C3.59351 9.93875 3.64153 9.86672 3.68155 9.8267C3.79359 9.73067 3.92164 9.68265 4.10571 9.68265C4.28979 9.68265 4.41784 9.73067 4.50587 9.8107C4.60191 9.89873 4.63392 9.97076 4.63392 10.0668C4.63392 10.1228 4.60191 10.2109 4.50587 10.3229C4.29779 10.563 3.60952 11.1632 2.49708 12.0916L2.42505 12.1556V13.108H5.66633V12.6118C5.66633 12.4357 5.64232 12.2837 5.53028 12.1556C5.44224 12.0516 5.29018 11.9956 5.15413 11.9956V11.9876Z" fill={'currentColor'} /><path d="M12.5731 11.0912H8.25936C7.70714 11.0912 7.25896 11.5394 7.25896 12.0916C7.25896 12.6438 7.70714 13.092 8.25936 13.092H12.5731C13.1253 13.092 13.5735 12.6438 13.5735 12.0916C13.5735 11.5394 13.1253 11.0912 12.5731 11.0912Z" fill={'currentColor'} /><path d="M8.25936 5.08883H12.5731C13.1253 5.08883 13.5735 4.64065 13.5735 4.08843C13.5735 3.53621 13.1253 3.08803 12.5731 3.08803H8.25936C7.70714 3.08803 7.25896 3.53621 7.25896 4.08843C7.25896 4.64065 7.70714 5.08883 8.25936 5.08883Z" fill={'currentColor'} /><path d="M12.5731 7.15365H8.25936C7.70714 7.15365 7.25896 7.60182 7.25896 8.15404C7.25896 8.70626 7.70714 9.15444 8.25936 9.15444H12.5731C13.1253 9.15444 13.5735 8.70626 13.5735 8.15404C13.5735 7.60182 13.1253 7.15365 12.5731 7.15365Z" fill={'currentColor'} /></svg>;
 };
 NumberedList.displayName = 'NumberedList';
 NumberedList.isGlyph = true;

package/src/generated/OpenNewTab.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0550f2c3df7e2061ea801aecc3f4c8bd
+* @checksum d4005c46811f3c637e4b82937003bf3e
 */
 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 OpenNewTabProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const OpenNewTab = ({
   role = 'img',
   ...props
 }: OpenNewTabProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const OpenNewTab = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'OpenNewTab', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.823 2.4491C13.8201 2.30008 13.6999 2.17994 13.5509 2.17704L9.5062 2.09836C9.25654 2.09351 9.12821 2.39519 9.30482 2.5718L10.3856 3.65257L7.93433 6.10383C7.87964 6.15852 7.83047 6.21665 7.78683 6.27752L5.99909 8.06525C5.46457 8.59977 5.46457 9.4664 5.99909 10.0009C6.53361 10.5354 7.40023 10.5354 7.93475 10.0009L9.72249 8.21317C9.78336 8.16953 9.84148 8.12037 9.89618 8.06567L12.3474 5.61441L13.4282 6.69518C13.6048 6.87179 13.9065 6.74347 13.9016 6.4938L13.823 2.4491Z" fill={'currentColor'} /><path d="M7.25 3.12893C7.66421 3.12893 8 3.46472 8 3.87893C8 4.29315 7.66421 4.62893 7.25 4.62893H4C3.72386 4.62893 3.5 4.85279 3.5 5.12893V11.9929C3.5 12.2691 3.72386 12.4929 4 12.4929H10.864C11.1401 12.4929 11.364 12.2691 11.364 11.9929V8.75C11.364 8.33579 11.6998 8 12.114 8C12.5282 8 12.864 8.33579 12.864 8.75V11.9929C12.864 13.0975 11.9686 13.9929 10.864 13.9929H4C2.89543 13.9929 2 13.0975 2 11.9929V5.12893C2 4.02436 2.89543 3.12893 4 3.12893H7.25Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M13.823 2.4491C13.8201 2.30008 13.6999 2.17994 13.5509 2.17704L9.5062 2.09836C9.25654 2.09351 9.12821 2.39519 9.30482 2.5718L10.3856 3.65257L7.93433 6.10383C7.87964 6.15852 7.83047 6.21665 7.78683 6.27752L5.99909 8.06525C5.46457 8.59977 5.46457 9.4664 5.99909 10.0009C6.53361 10.5354 7.40023 10.5354 7.93475 10.0009L9.72249 8.21317C9.78336 8.16953 9.84148 8.12037 9.89618 8.06567L12.3474 5.61441L13.4282 6.69518C13.6048 6.87179 13.9065 6.74347 13.9016 6.4938L13.823 2.4491Z" fill={'currentColor'} /><path d="M7.25 3.12893C7.66421 3.12893 8 3.46472 8 3.87893C8 4.29315 7.66421 4.62893 7.25 4.62893H4C3.72386 4.62893 3.5 4.85279 3.5 5.12893V11.9929C3.5 12.2691 3.72386 12.4929 4 12.4929H10.864C11.1401 12.4929 11.364 12.2691 11.364 11.9929V8.75C11.364 8.33579 11.6998 8 12.114 8C12.5282 8 12.864 8.33579 12.864 8.75V11.9929C12.864 13.0975 11.9686 13.9929 10.864 13.9929H4C2.89543 13.9929 2 13.0975 2 11.9929V5.12893C2 4.02436 2.89543 3.12893 4 3.12893H7.25Z" fill={'currentColor'} /></svg>;
 };
 OpenNewTab.displayName = 'OpenNewTab';
 OpenNewTab.isGlyph = true;