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

package/src/generated/Settings.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8dd130a799c0e750237f9d7e9bf1973b
+* @checksum 34b559a3c2f751afd2269bd8ba585287
 */
 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 SettingsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Settings = ({
   role = 'img',
   ...props
 }: SettingsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Settings = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Settings', {
     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.2068 1.06716C9.88875 0.935661 9.52203 1.03749 9.31733 1.31414L8.94293 1.82012C8.30664 1.72253 7.66857 1.72598 7.04948 1.8218L6.67408 1.31582C6.46902 1.03944 6.10217 0.938077 5.7843 1.06998L4.65819 1.53728C4.34032 1.66918 4.15301 2.0005 4.20388 2.34087L4.29701 2.96397C3.79197 3.33462 3.33892 3.78396 2.95865 4.30338L2.33602 4.21114C1.99558 4.1607 1.66451 4.34843 1.53301 4.66647L1.06716 5.79319C0.935661 6.11122 1.03749 6.47794 1.31414 6.68265L1.82012 7.05705C1.72253 7.69334 1.72598 8.33142 1.8218 8.9505L1.31583 9.32589C1.03945 9.53096 0.938089 9.89781 1.06999 10.2157L1.53729 11.3418C1.6692 11.6597 2.00051 11.847 2.34088 11.7961L2.96398 11.703C3.33462 12.208 3.78396 12.6611 4.30338 13.0413L4.21114 13.664C4.1607 14.0044 4.34843 14.3355 4.66647 14.467L5.79319 14.9328C6.11122 15.0643 6.47794 14.9625 6.68265 14.6858L7.05705 14.1799C7.69335 14.2774 8.33142 14.274 8.95051 14.1782L9.3259 14.6841C9.53096 14.9605 9.89781 15.0619 10.2157 14.93L11.3418 14.4627C11.6597 14.3308 11.847 13.9995 11.7961 13.6591L11.703 13.036C12.208 12.6654 12.6611 12.216 13.0413 11.6966L13.664 11.7888C14.0044 11.8393 14.3355 11.6515 14.467 11.3335L14.9328 10.2068C15.0643 9.88875 14.9625 9.52203 14.6858 9.31733L14.1799 8.94293C14.2774 8.30663 14.274 7.66856 14.1782 7.04947L14.6841 6.67408C14.9605 6.46902 15.0619 6.10217 14.93 5.7843L14.4627 4.65819C14.3308 4.34032 13.9995 4.15301 13.6591 4.20388L13.036 4.29701C12.6654 3.79197 12.216 3.33892 11.6966 2.95865L11.7888 2.33602C11.8393 1.99558 11.6515 1.66451 11.3335 1.53301L10.2068 1.06716ZM10.5413 9.05074C9.96102 10.4543 8.35278 11.1216 6.94924 10.5413C5.54569 9.96102 4.87833 8.35278 5.45865 6.94924C6.03896 5.54569 7.6472 4.87833 9.05074 5.45865C10.4543 6.03896 11.1216 7.6472 10.5413 9.05074Z" 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.2068 1.06716C9.88875 0.935661 9.52203 1.03749 9.31733 1.31414L8.94293 1.82012C8.30664 1.72253 7.66857 1.72598 7.04948 1.8218L6.67408 1.31582C6.46902 1.03944 6.10217 0.938077 5.7843 1.06998L4.65819 1.53728C4.34032 1.66918 4.15301 2.0005 4.20388 2.34087L4.29701 2.96397C3.79197 3.33462 3.33892 3.78396 2.95865 4.30338L2.33602 4.21114C1.99558 4.1607 1.66451 4.34843 1.53301 4.66647L1.06716 5.79319C0.935661 6.11122 1.03749 6.47794 1.31414 6.68265L1.82012 7.05705C1.72253 7.69334 1.72598 8.33142 1.8218 8.9505L1.31583 9.32589C1.03945 9.53096 0.938089 9.89781 1.06999 10.2157L1.53729 11.3418C1.6692 11.6597 2.00051 11.847 2.34088 11.7961L2.96398 11.703C3.33462 12.208 3.78396 12.6611 4.30338 13.0413L4.21114 13.664C4.1607 14.0044 4.34843 14.3355 4.66647 14.467L5.79319 14.9328C6.11122 15.0643 6.47794 14.9625 6.68265 14.6858L7.05705 14.1799C7.69335 14.2774 8.33142 14.274 8.95051 14.1782L9.3259 14.6841C9.53096 14.9605 9.89781 15.0619 10.2157 14.93L11.3418 14.4627C11.6597 14.3308 11.847 13.9995 11.7961 13.6591L11.703 13.036C12.208 12.6654 12.6611 12.216 13.0413 11.6966L13.664 11.7888C14.0044 11.8393 14.3355 11.6515 14.467 11.3335L14.9328 10.2068C15.0643 9.88875 14.9625 9.52203 14.6858 9.31733L14.1799 8.94293C14.2774 8.30663 14.274 7.66856 14.1782 7.04947L14.6841 6.67408C14.9605 6.46902 15.0619 6.10217 14.93 5.7843L14.4627 4.65819C14.3308 4.34032 13.9995 4.15301 13.6591 4.20388L13.036 4.29701C12.6654 3.79197 12.216 3.33892 11.6966 2.95865L11.7888 2.33602C11.8393 1.99558 11.6515 1.66451 11.3335 1.53301L10.2068 1.06716ZM10.5413 9.05074C9.96102 10.4543 8.35278 11.1216 6.94924 10.5413C5.54569 9.96102 4.87833 8.35278 5.45865 6.94924C6.03896 5.54569 7.6472 4.87833 9.05074 5.45865C10.4543 6.03896 11.1216 7.6472 10.5413 9.05074Z" fill={'currentColor'} /></svg>;
 };
 Settings.displayName = 'Settings';
 Settings.isGlyph = true;

package/src/generated/ShardedCluster.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bce97cf1d21ec506245a6e1311775b42
+* @checksum 24886fe418011a9a47791830f528a4d1
 */
 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 ShardedClusterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ShardedCluster = ({
   role = 'img',
   ...props
 }: ShardedClusterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ShardedCluster = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ShardedCluster', {
     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 2.75C13 3.7165 12.2165 4.5 11.25 4.5C11.1218 4.5 10.9969 4.48622 10.8766 4.46007L10.2582 5.32584C10.8666 5.84015 11.2971 6.55834 11.4444 7.375H12.6149C12.8665 6.71716 13.5037 6.25 14.25 6.25C15.2165 6.25 16 7.0335 16 8C16 8.9665 15.2165 9.75 14.25 9.75C13.5037 9.75 12.8665 9.28284 12.6149 8.625H11.4444C11.2971 9.44165 10.8666 10.1598 10.2582 10.6741L10.8766 11.5399C10.9969 11.5138 11.1219 11.5 11.25 11.5C12.2165 11.5 13 12.2835 13 13.25C13 14.2165 12.2165 15 11.25 15C10.2835 15 9.5 14.2165 9.5 13.25C9.5 12.8677 9.6226 12.514 9.83062 12.2261L9.1691 11.3C8.8035 11.4295 8.40998 11.5 8 11.5C7.59258 11.5 7.20142 11.4304 6.83777 11.3024L6.17369 12.2321C6.3791 12.5189 6.5 12.8703 6.5 13.25C6.5 14.2165 5.7165 15 4.75 15C3.7835 15 3 14.2165 3 13.25C3 12.2835 3.7835 11.5 4.75 11.5C4.88079 11.5 5.00822 11.5143 5.13082 11.5416L5.74716 10.6787C5.13591 10.1641 4.70329 9.44405 4.55564 8.625H3.38509C3.13349 9.28284 2.4963 9.75 1.75 9.75C0.783502 9.75 0 8.9665 0 8C0 7.0335 0.783502 6.25 1.75 6.25C2.4963 6.25 3.13349 6.71716 3.38509 7.375H4.55564C4.70329 6.55595 5.13591 5.83594 5.74716 5.32133L5.13082 4.45845C5.00822 4.48565 4.88079 4.5 4.75 4.5C3.7835 4.5 3 3.7165 3 2.75C3 1.7835 3.7835 1 4.75 1C5.7165 1 6.5 1.7835 6.5 2.75C6.5 3.12967 6.3791 3.48109 6.17369 3.76788L6.83777 4.69759C7.20142 4.56961 7.59258 4.5 8 4.5C8.40998 4.5 8.80349 4.57049 9.16908 4.70001L9.83061 3.77386C9.62259 3.48598 9.5 3.13231 9.5 2.75C9.5 1.7835 10.2835 1 11.25 1C12.2165 1 13 1.7835 13 2.75ZM9.75 8C9.75 8.9665 8.9665 9.75 8 9.75C7.0335 9.75 6.25 8.9665 6.25 8C6.25 7.0335 7.0335 6.25 8 6.25C8.9665 6.25 9.75 7.0335 9.75 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="M13 2.75C13 3.7165 12.2165 4.5 11.25 4.5C11.1218 4.5 10.9969 4.48622 10.8766 4.46007L10.2582 5.32584C10.8666 5.84015 11.2971 6.55834 11.4444 7.375H12.6149C12.8665 6.71716 13.5037 6.25 14.25 6.25C15.2165 6.25 16 7.0335 16 8C16 8.9665 15.2165 9.75 14.25 9.75C13.5037 9.75 12.8665 9.28284 12.6149 8.625H11.4444C11.2971 9.44165 10.8666 10.1598 10.2582 10.6741L10.8766 11.5399C10.9969 11.5138 11.1219 11.5 11.25 11.5C12.2165 11.5 13 12.2835 13 13.25C13 14.2165 12.2165 15 11.25 15C10.2835 15 9.5 14.2165 9.5 13.25C9.5 12.8677 9.6226 12.514 9.83062 12.2261L9.1691 11.3C8.8035 11.4295 8.40998 11.5 8 11.5C7.59258 11.5 7.20142 11.4304 6.83777 11.3024L6.17369 12.2321C6.3791 12.5189 6.5 12.8703 6.5 13.25C6.5 14.2165 5.7165 15 4.75 15C3.7835 15 3 14.2165 3 13.25C3 12.2835 3.7835 11.5 4.75 11.5C4.88079 11.5 5.00822 11.5143 5.13082 11.5416L5.74716 10.6787C5.13591 10.1641 4.70329 9.44405 4.55564 8.625H3.38509C3.13349 9.28284 2.4963 9.75 1.75 9.75C0.783502 9.75 0 8.9665 0 8C0 7.0335 0.783502 6.25 1.75 6.25C2.4963 6.25 3.13349 6.71716 3.38509 7.375H4.55564C4.70329 6.55595 5.13591 5.83594 5.74716 5.32133L5.13082 4.45845C5.00822 4.48565 4.88079 4.5 4.75 4.5C3.7835 4.5 3 3.7165 3 2.75C3 1.7835 3.7835 1 4.75 1C5.7165 1 6.5 1.7835 6.5 2.75C6.5 3.12967 6.3791 3.48109 6.17369 3.76788L6.83777 4.69759C7.20142 4.56961 7.59258 4.5 8 4.5C8.40998 4.5 8.80349 4.57049 9.16908 4.70001L9.83061 3.77386C9.62259 3.48598 9.5 3.13231 9.5 2.75C9.5 1.7835 10.2835 1 11.25 1C12.2165 1 13 1.7835 13 2.75ZM9.75 8C9.75 8.9665 8.9665 9.75 8 9.75C7.0335 9.75 6.25 8.9665 6.25 8C6.25 7.0335 7.0335 6.25 8 6.25C8.9665 6.25 9.75 7.0335 9.75 8Z" fill={'currentColor'} /></svg>;
 };
 ShardedCluster.displayName = 'ShardedCluster';
 ShardedCluster.isGlyph = true;

package/src/generated/Shell.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4b16b5ec09706e8eff27700d81d1b23b
+* @checksum f9a5da06d04b48e2d9ae5d23741a1130
 */
 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 ShellProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shell = ({
   role = 'img',
   ...props
 }: ShellProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shell = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shell', {
     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.8 5.2L5.2 7.4L1.41036 9.92642C1.18282 10.0781 1.11937 10.3845 1.26793 10.6141L1.82463 11.4744C1.9761 11.7085 2.28977 11.7735 2.52176 11.6188L7.5 8.3C7.8 8.1 8 7.8 8 7.5C8 7.2 7.8 6.9 7.6 6.7L2.52235 3.28412C2.29032 3.12804 1.97539 3.19258 1.82347 3.42736L1.27593 4.27357C1.12424 4.50799 1.19394 4.82121 1.43071 4.96919L1.8 5.2ZM6.7 13C6.7 13.2761 6.92386 13.5 7.2 13.5H14.9C15.1761 13.5 15.4 13.2761 15.4 13V12C15.4 11.7239 15.1761 11.5 14.9 11.5H7.2C6.92386 11.5 6.7 11.7239 6.7 12V13Z" 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.8 5.2L5.2 7.4L1.41036 9.92642C1.18282 10.0781 1.11937 10.3845 1.26793 10.6141L1.82463 11.4744C1.9761 11.7085 2.28977 11.7735 2.52176 11.6188L7.5 8.3C7.8 8.1 8 7.8 8 7.5C8 7.2 7.8 6.9 7.6 6.7L2.52235 3.28412C2.29032 3.12804 1.97539 3.19258 1.82347 3.42736L1.27593 4.27357C1.12424 4.50799 1.19394 4.82121 1.43071 4.96919L1.8 5.2ZM6.7 13C6.7 13.2761 6.92386 13.5 7.2 13.5H14.9C15.1761 13.5 15.4 13.2761 15.4 13V12C15.4 11.7239 15.1761 11.5 14.9 11.5H7.2C6.92386 11.5 6.7 11.7239 6.7 12V13Z" fill={'currentColor'} /></svg>;
 };
 Shell.displayName = 'Shell';
 Shell.isGlyph = true;

package/src/generated/Shield.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 70cc6170af301b7a5ccc2e39f2ae8d34
+* @checksum abb8c5f609486e99e73950f9028c134c
 */
 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 ShieldProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shield = ({
   role = 'img',
   ...props
 }: ShieldProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shield = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shield', {
     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.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" 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.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" fill={'currentColor'} /></svg>;
 };
 Shield.displayName = 'Shield';
 Shield.isGlyph = true;

package/src/generated/Shirt.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 98b2f66e19898c84f1dce726e066deb6
+* @checksum f1a02e2a9e336b8a9b7c520208704edd
 */
 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 ShirtProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shirt = ({
   role = 'img',
   ...props
 }: ShirtProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shirt = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shirt', {
     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.08868 4.24432C2.03629 4.02602 2.13581 3.79957 2.33205 3.69055L5.37504 2C8.00004 4.5 10.625 2 10.625 2L13.668 3.69055C13.8643 3.79957 13.9638 4.02602 13.9114 4.24432L13.388 6.42503C13.3071 6.76224 13.0055 7 12.6587 7H11V12.4271C11 12.7782 10.8017 13.0992 10.4876 13.2562C8.92164 14.0392 7.07844 14.0392 5.5125 13.2562C5.19843 13.0992 5.00004 12.7782 5.00004 12.4271V7H3.34134C2.99455 7 2.69298 6.76224 2.61205 6.42503L2.08868 4.24432Z" 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.08868 4.24432C2.03629 4.02602 2.13581 3.79957 2.33205 3.69055L5.37504 2C8.00004 4.5 10.625 2 10.625 2L13.668 3.69055C13.8643 3.79957 13.9638 4.02602 13.9114 4.24432L13.388 6.42503C13.3071 6.76224 13.0055 7 12.6587 7H11V12.4271C11 12.7782 10.8017 13.0992 10.4876 13.2562C8.92164 14.0392 7.07844 14.0392 5.5125 13.2562C5.19843 13.0992 5.00004 12.7782 5.00004 12.4271V7H3.34134C2.99455 7 2.69298 6.76224 2.61205 6.42503L2.08868 4.24432Z" fill={'currentColor'} /></svg>;
 };
 Shirt.displayName = 'Shirt';
 Shirt.isGlyph = true;

package/src/generated/Shortcut.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54866582b4ce0e776960df3186a39b95
+* @checksum e798fbed73ad163471fcfaa4b76d57d5
 */
 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 ShortcutProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shortcut = ({
   role = 'img',
   ...props
 }: ShortcutProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shortcut = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shortcut', {
     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="M14.1332 8.64356L13.0543 7.99961L14.1332 7.35623C14.6761 7.03257 15 6.47109 15 5.85406C15 5.23704 14.6755 4.67555 14.1332 4.3519L8.95605 1.26399C8.36504 0.911724 7.63381 0.912285 7.04395 1.26399L1.86682 4.3519C1.3239 4.67555 1 5.23704 1 5.85406C1 6.47109 1.32448 7.03257 1.86682 7.35623L2.9457 7.99961L1.86682 8.64356C1.3239 8.96722 1 9.5287 1 10.1457C1 10.7627 1.32448 11.3242 1.86682 11.6479L7.04395 14.7358C7.33946 14.9119 7.66973 15 8 15C8.33027 15 8.66112 14.9119 8.95547 14.7364L14.1332 11.6485C14.6761 11.3248 15 10.7633 15 10.1463C15 9.52927 14.6755 8.96722 14.1332 8.64356ZM2.15884 5.85406C2.15884 5.62577 2.27415 5.42664 2.47463 5.30716L7.65235 2.21869C7.75954 2.15474 7.87948 2.12277 8 2.12277C8.12052 2.12277 8.24046 2.1553 8.34823 2.21925L13.526 5.30716C13.7264 5.42664 13.8417 5.62577 13.8417 5.85406C13.8417 6.08236 13.7264 6.28149 13.526 6.40097L11.9499 7.34108L8.95605 5.55509C8.3662 5.20339 7.63439 5.20339 7.04453 5.55509L5.76185 6.32023C5.48796 6.48361 5.40311 6.84093 5.57431 7.11C5.73868 7.36832 6.0787 7.44906 6.34165 7.29221L7.65235 6.51035C7.86731 6.3819 8.13327 6.3819 8.34823 6.51035L10.845 7.99961L8.34765 9.48888C8.13443 9.61677 7.86789 9.61733 7.65235 9.48888L2.47463 6.40041C2.27415 6.28093 2.15884 6.08236 2.15884 5.85406ZM13.5254 10.6921L8.34708 13.7805C8.13385 13.9084 7.86731 13.909 7.65177 13.7805L2.47405 10.6926C2.27357 10.5732 2.15827 10.374 2.15827 10.1457C2.15827 9.91743 2.27357 9.7183 2.47405 9.59882L4.05008 8.65871L7.04338 10.4441C7.33888 10.6203 7.66915 10.7083 7.99942 10.7083C8.32969 10.7083 8.66054 10.6203 8.95489 10.4447L11.9488 8.65927L13.5248 9.59938C13.7253 9.71886 13.8406 9.91799 13.8406 10.1463C13.8406 10.3746 13.7253 10.5737 13.5248 10.6932L13.5254 10.6921Z" 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="M14.1332 8.64356L13.0543 7.99961L14.1332 7.35623C14.6761 7.03257 15 6.47109 15 5.85406C15 5.23704 14.6755 4.67555 14.1332 4.3519L8.95605 1.26399C8.36504 0.911724 7.63381 0.912285 7.04395 1.26399L1.86682 4.3519C1.3239 4.67555 1 5.23704 1 5.85406C1 6.47109 1.32448 7.03257 1.86682 7.35623L2.9457 7.99961L1.86682 8.64356C1.3239 8.96722 1 9.5287 1 10.1457C1 10.7627 1.32448 11.3242 1.86682 11.6479L7.04395 14.7358C7.33946 14.9119 7.66973 15 8 15C8.33027 15 8.66112 14.9119 8.95547 14.7364L14.1332 11.6485C14.6761 11.3248 15 10.7633 15 10.1463C15 9.52927 14.6755 8.96722 14.1332 8.64356ZM2.15884 5.85406C2.15884 5.62577 2.27415 5.42664 2.47463 5.30716L7.65235 2.21869C7.75954 2.15474 7.87948 2.12277 8 2.12277C8.12052 2.12277 8.24046 2.1553 8.34823 2.21925L13.526 5.30716C13.7264 5.42664 13.8417 5.62577 13.8417 5.85406C13.8417 6.08236 13.7264 6.28149 13.526 6.40097L11.9499 7.34108L8.95605 5.55509C8.3662 5.20339 7.63439 5.20339 7.04453 5.55509L5.76185 6.32023C5.48796 6.48361 5.40311 6.84093 5.57431 7.11C5.73868 7.36832 6.0787 7.44906 6.34165 7.29221L7.65235 6.51035C7.86731 6.3819 8.13327 6.3819 8.34823 6.51035L10.845 7.99961L8.34765 9.48888C8.13443 9.61677 7.86789 9.61733 7.65235 9.48888L2.47463 6.40041C2.27415 6.28093 2.15884 6.08236 2.15884 5.85406ZM13.5254 10.6921L8.34708 13.7805C8.13385 13.9084 7.86731 13.909 7.65177 13.7805L2.47405 10.6926C2.27357 10.5732 2.15827 10.374 2.15827 10.1457C2.15827 9.91743 2.27357 9.7183 2.47405 9.59882L4.05008 8.65871L7.04338 10.4441C7.33888 10.6203 7.66915 10.7083 7.99942 10.7083C8.32969 10.7083 8.66054 10.6203 8.95489 10.4447L11.9488 8.65927L13.5248 9.59938C13.7253 9.71886 13.8406 9.91799 13.8406 10.1463C13.8406 10.3746 13.7253 10.5737 13.5248 10.6932L13.5254 10.6921Z" fill={'currentColor'} /></svg>;
 };
 Shortcut.displayName = 'Shortcut';
 Shortcut.isGlyph = true;

package/src/generated/SortAscending.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d467fb89729cd88f35c539371faf8b14
+* @checksum 62f0dd9b51d6c713617e489b2a83c227
 */
 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 SortAscendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SortAscending = ({
   role = 'img',
   ...props
 }: SortAscendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SortAscending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SortAscending', {
     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.44991 1.14265C4.23029 0.95245 3.90429 0.952449 3.68466 1.14265L1.20302 3.29182C0.793944 3.64609 1.04449 4.31811 1.58564 4.31811H2.89835V13.6696C2.89835 14.3152 3.4217 14.8386 4.06729 14.8386C4.71287 14.8386 5.23623 14.3152 5.23623 13.6696V4.31811H6.54893C7.09009 4.31811 7.34063 3.64609 6.93156 3.29182L4.44991 1.14265Z" fill={'currentColor'} /><path d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H14C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5H8Z" fill={'currentColor'} /><path d="M7 9C7 8.44772 7.44772 8 8 8H12C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10H8C7.44772 10 7 9.55229 7 9Z" fill={'currentColor'} /><path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H8Z" 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.44991 1.14265C4.23029 0.95245 3.90429 0.952449 3.68466 1.14265L1.20302 3.29182C0.793944 3.64609 1.04449 4.31811 1.58564 4.31811H2.89835V13.6696C2.89835 14.3152 3.4217 14.8386 4.06729 14.8386C4.71287 14.8386 5.23623 14.3152 5.23623 13.6696V4.31811H6.54893C7.09009 4.31811 7.34063 3.64609 6.93156 3.29182L4.44991 1.14265Z" fill={'currentColor'} /><path d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H14C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5H8Z" fill={'currentColor'} /><path d="M7 9C7 8.44772 7.44772 8 8 8H12C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10H8C7.44772 10 7 9.55229 7 9Z" fill={'currentColor'} /><path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H8Z" fill={'currentColor'} /></svg>;
 };
 SortAscending.displayName = 'SortAscending';
 SortAscending.isGlyph = true;

package/src/generated/SortDescending.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 77ca38381a8dfb3d248f686f85aae34c
+* @checksum 4e69ec9ddc0c6d6ed69247ae247032ca
 */
 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 SortDescendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SortDescending = ({
   role = 'img',
   ...props
 }: SortDescendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SortDescending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SortDescending', {
     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.44991 14.6959C4.23029 14.8861 3.90429 14.8861 3.68466 14.6959L1.20302 12.5467C0.793944 12.1925 1.04449 11.5205 1.58564 11.5205H2.89835V2.16894C2.89835 1.52335 3.4217 1 4.06729 1C4.71287 1 5.23623 1.52335 5.23623 2.16894V11.5205H6.54893C7.09009 11.5205 7.34063 12.1925 6.93156 12.5467L4.44991 14.6959Z" fill={'currentColor'} /><path d="M8 3C7.44772 3 7 3.44772 7 4C7 4.55229 7.44772 5 8 5H14C14.5523 5 15 4.55229 15 4C15 3.44772 14.5523 3 14 3H8Z" fill={'currentColor'} /><path d="M7 7C7 6.44772 7.44772 6 8 6H12C12.5523 6 13 6.44772 13 7C13 7.55229 12.5523 8 12 8H8C7.44772 8 7 7.55229 7 7Z" fill={'currentColor'} /><path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H8Z" 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.44991 14.6959C4.23029 14.8861 3.90429 14.8861 3.68466 14.6959L1.20302 12.5467C0.793944 12.1925 1.04449 11.5205 1.58564 11.5205H2.89835V2.16894C2.89835 1.52335 3.4217 1 4.06729 1C4.71287 1 5.23623 1.52335 5.23623 2.16894V11.5205H6.54893C7.09009 11.5205 7.34063 12.1925 6.93156 12.5467L4.44991 14.6959Z" fill={'currentColor'} /><path d="M8 3C7.44772 3 7 3.44772 7 4C7 4.55229 7.44772 5 8 5H14C14.5523 5 15 4.55229 15 4C15 3.44772 14.5523 3 14 3H8Z" fill={'currentColor'} /><path d="M7 7C7 6.44772 7.44772 6 8 6H12C12.5523 6 13 6.44772 13 7C13 7.55229 12.5523 8 12 8H8C7.44772 8 7 7.55229 7 7Z" fill={'currentColor'} /><path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H8Z" fill={'currentColor'} /></svg>;
 };
 SortDescending.displayName = 'SortDescending';
 SortDescending.isGlyph = true;

package/src/generated/Sparkle.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum dcb075c6ece22142352c3c8ccae791a9
+* @checksum 75b9f89083a70770e5a05835b62e9be9
 */
 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 SparkleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Sparkle = ({
   role = 'img',
   ...props
 }: SparkleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Sparkle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Sparkle', {
     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="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z" fill={'currentColor'} /><path d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill={'currentColor'} /><path d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" 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="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z" fill={'currentColor'} /><path d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill={'currentColor'} /><path d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill={'currentColor'} /></svg>;
 };
 Sparkle.displayName = 'Sparkle';
 Sparkle.isGlyph = true;

package/src/generated/SplitHorizontal.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 79804e11ff1c22567752e7be4c9d5f7b
+* @checksum e15e4da45251df6b440e7bb5f7f4878f
 */
 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 SplitHorizontalProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SplitHorizontal = ({
   role = 'img',
   ...props
 }: SplitHorizontalProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SplitHorizontal = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SplitHorizontal', {
     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="M15 11C15 12.1046 14.1046 13 13 13L3 13C1.89543 13 1 12.1046 1 11L1 3C1 1.89543 1.89543 1 3 1L13 1C14.1046 1 15 1.89543 15 3L15 11ZM13 6.5L13 3L3 3L3 6.5L13 6.5ZM3 7.5L3 11L13 11L13 7.5L3 7.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="M15 11C15 12.1046 14.1046 13 13 13L3 13C1.89543 13 1 12.1046 1 11L1 3C1 1.89543 1.89543 1 3 1L13 1C14.1046 1 15 1.89543 15 3L15 11ZM13 6.5L13 3L3 3L3 6.5L13 6.5ZM3 7.5L3 11L13 11L13 7.5L3 7.5Z" fill={'currentColor'} /></svg>;
 };
 SplitHorizontal.displayName = 'SplitHorizontal';
 SplitHorizontal.isGlyph = true;

package/src/generated/SplitVertical.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23a43817b3ef9eeb03f289536ea833c4
+* @checksum dec658baa8100a5e2d4c11fc8c1aff2b
 */
 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 SplitVerticalProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SplitVertical = ({
   role = 'img',
   ...props
 }: SplitVerticalProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SplitVertical = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SplitVertical', {
     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 1C14.1046 1 15 1.89543 15 3V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V3C1 1.89543 1.89543 1 3 1H13ZM7.5 3H3V11H7.5V3ZM8.5 11H13V3H8.5V11Z" 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 1C14.1046 1 15 1.89543 15 3V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V3C1 1.89543 1.89543 1 3 1H13ZM7.5 3H3V11H7.5V3ZM8.5 11H13V3H8.5V11Z" fill={'currentColor'} /></svg>;
 };
 SplitVertical.displayName = 'SplitVertical';
 SplitVertical.isGlyph = true;

package/src/generated/Stitch.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4f795369a06c595141210f603e63a331
+* @checksum d493a0d435d280bf2e91e7d81c824d53
 */
 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 StitchProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Stitch = ({
   role = 'img',
   ...props
 }: StitchProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Stitch = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Stitch', {
     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"><g id="Stitch-Copy" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4 L14,2 L2,2 L2,4 L14,4 Z M14,14 L14,5 L2,5 L2,14 L14,14 Z M8,6 L8,13 L6,13 L6,6 L8,6 Z M13,6 L13,10 L9,10 L9,6 L13,6 Z M5,8 L5,13 L3,13 L3,8 L5,8 Z M13,11 L13,13 L9,13 L9,11 L13,11 Z" id="\uE311" fill={'currentColor'} /></g></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>}<g id="Stitch-Copy" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4 L14,2 L2,2 L2,4 L14,4 Z M14,14 L14,5 L2,5 L2,14 L14,14 Z M8,6 L8,13 L6,13 L6,6 L8,6 Z M13,6 L13,10 L9,10 L9,6 L13,6 Z M5,8 L5,13 L3,13 L3,8 L5,8 Z M13,11 L13,13 L9,13 L9,11 L13,11 Z" id="\uE311" fill={'currentColor'} /></g></svg>;
 };
 Stitch.displayName = 'Stitch';
 Stitch.isGlyph = true;

package/src/generated/Stop.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 02824b2c1413b47ba291fb039342b16e
+* @checksum fc58d0b6198352ae94326cf8565e5aa1
 */
 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 StopProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Stop = ({
   role = 'img',
   ...props
 }: StopProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Stop = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Stop', {
     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"><rect x={3} y={3} width={10} height={10} rx={1} 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>}<rect x={3} y={3} width={10} height={10} rx={1} fill={'currentColor'} /></svg>;
 };
 Stop.displayName = 'Stop';
 Stop.isGlyph = true;

package/src/generated/Streaming.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cecb0b1fef059ae78d0925fc0d134682
+* @checksum 98fc2e99b703a2989b258cc1aa497d53
 */
 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 StreamingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Streaming = ({
   role = 'img',
   ...props
 }: StreamingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Streaming = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Streaming', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 10.4141C2.8922 10.7317 3.38069 10.9884 3.90527 11.1934C4.42946 11.3981 5.01023 11.5551 5.60449 11.6719L6.6709 13.0303L6.74902 13.1211C7.10522 13.5042 7.61387 13.6279 8.06934 13.5117C8.17594 13.8813 8.40111 14.188 8.69043 14.4111C8.46086 14.4244 8.23023 14.4336 8 14.4336C5.28789 14.4336 2.5 13.5162 2.5 11.5811C2.5 11.4924 2.50071 11.4047 2.50195 11.3184C2.50071 11.2874 2.5 11.2559 2.5 11.2246V10.4141Z" fill={'currentColor'} /><path d="M2.5 6.74707C2.8922 7.0647 3.38069 7.3224 3.90527 7.52734C4.65821 7.82143 5.5268 8.02238 6.38672 8.13574L5.30371 9.5166L5.23242 9.61621C5.04168 9.90844 4.96849 10.2571 5.0127 10.5928C4.743 10.5179 4.48251 10.4353 4.23828 10.3398C3.68283 10.1228 3.23472 9.86299 2.93262 9.5752C2.636 9.29254 2.5 9.00426 2.5 8.7041V6.74707Z" fill={'currentColor'} /><path d="M13.5 8.7041C13.5 9.00426 13.364 9.29254 13.0674 9.5752C13.011 9.6289 12.9481 9.67979 12.8818 9.73145C12.6172 9.02397 11.9307 8.52864 11.1406 8.52832H9.10352C9.09331 8.41419 9.06716 8.30489 9.03223 8.2002C10.0743 8.11047 11.1714 7.888 12.0947 7.52734C12.6193 7.3224 13.1078 7.0647 13.5 6.74707V8.7041Z" fill={'currentColor'} /><path d="M8 1.59961C10.7121 1.59961 13.5 2.51696 13.5 4.45215C13.5 4.54147 13.4993 4.6287 13.498 4.71387C13.4993 4.74514 13.5 4.77701 13.5 4.80859V5.03711C13.5 5.33734 13.3642 5.62645 13.0674 5.90918C12.7653 6.19692 12.3171 6.45587 11.7617 6.67285C10.7051 7.08564 9.35706 7.30393 8.17676 7.32422C7.91253 7.23284 7.62448 7.22642 7.35449 7.30664C6.29674 7.24352 5.15722 7.03186 4.23828 6.67285C3.68294 6.45587 3.2347 6.19692 2.93262 5.90918C2.63584 5.62645 2.5 5.33734 2.5 5.03711V4.80859C2.5 4.77334 2.50038 4.73799 2.50195 4.70312C2.50037 4.6216 2.5 4.53771 2.5 4.45215C2.5 2.51696 5.28789 1.59961 8 1.59961Z" fill={'currentColor'} /><path d="M9.85893 12.2378H12.8902V11.3819C12.8902 11.029 13.3175 10.8656 13.5427 11.1324L14.9093 12.7505C15.0302 12.8937 15.0302 13.1063 14.9093 13.2495L13.5427 14.8676C13.3175 15.1344 12.8902 14.971 12.8902 14.6181V13.8125H9.85893C9.38455 13.8125 9 13.46 9 13.0252C9 12.5903 9.38455 12.2378 9.85893 12.2378Z" fill={'currentColor'} /><path d="M11.1411 11.2229H8.10982V12.1442C8.10982 12.524 7.68252 12.6998 7.45726 12.4127L6.09071 10.6711C5.96976 10.517 5.96976 10.2882 6.09071 10.1341L7.45726 8.39247C7.68252 8.10539 8.10982 8.28122 8.10982 8.661V9.5281H11.1411C11.6154 9.5281 12 9.90751 12 10.3755C12 10.8435 11.6154 11.2229 11.1411 11.2229Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M2.5 10.4141C2.8922 10.7317 3.38069 10.9884 3.90527 11.1934C4.42946 11.3981 5.01023 11.5551 5.60449 11.6719L6.6709 13.0303L6.74902 13.1211C7.10522 13.5042 7.61387 13.6279 8.06934 13.5117C8.17594 13.8813 8.40111 14.188 8.69043 14.4111C8.46086 14.4244 8.23023 14.4336 8 14.4336C5.28789 14.4336 2.5 13.5162 2.5 11.5811C2.5 11.4924 2.50071 11.4047 2.50195 11.3184C2.50071 11.2874 2.5 11.2559 2.5 11.2246V10.4141Z" fill={'currentColor'} /><path d="M2.5 6.74707C2.8922 7.0647 3.38069 7.3224 3.90527 7.52734C4.65821 7.82143 5.5268 8.02238 6.38672 8.13574L5.30371 9.5166L5.23242 9.61621C5.04168 9.90844 4.96849 10.2571 5.0127 10.5928C4.743 10.5179 4.48251 10.4353 4.23828 10.3398C3.68283 10.1228 3.23472 9.86299 2.93262 9.5752C2.636 9.29254 2.5 9.00426 2.5 8.7041V6.74707Z" fill={'currentColor'} /><path d="M13.5 8.7041C13.5 9.00426 13.364 9.29254 13.0674 9.5752C13.011 9.6289 12.9481 9.67979 12.8818 9.73145C12.6172 9.02397 11.9307 8.52864 11.1406 8.52832H9.10352C9.09331 8.41419 9.06716 8.30489 9.03223 8.2002C10.0743 8.11047 11.1714 7.888 12.0947 7.52734C12.6193 7.3224 13.1078 7.0647 13.5 6.74707V8.7041Z" fill={'currentColor'} /><path d="M8 1.59961C10.7121 1.59961 13.5 2.51696 13.5 4.45215C13.5 4.54147 13.4993 4.6287 13.498 4.71387C13.4993 4.74514 13.5 4.77701 13.5 4.80859V5.03711C13.5 5.33734 13.3642 5.62645 13.0674 5.90918C12.7653 6.19692 12.3171 6.45587 11.7617 6.67285C10.7051 7.08564 9.35706 7.30393 8.17676 7.32422C7.91253 7.23284 7.62448 7.22642 7.35449 7.30664C6.29674 7.24352 5.15722 7.03186 4.23828 6.67285C3.68294 6.45587 3.2347 6.19692 2.93262 5.90918C2.63584 5.62645 2.5 5.33734 2.5 5.03711V4.80859C2.5 4.77334 2.50038 4.73799 2.50195 4.70312C2.50037 4.6216 2.5 4.53771 2.5 4.45215C2.5 2.51696 5.28789 1.59961 8 1.59961Z" fill={'currentColor'} /><path d="M9.85893 12.2378H12.8902V11.3819C12.8902 11.029 13.3175 10.8656 13.5427 11.1324L14.9093 12.7505C15.0302 12.8937 15.0302 13.1063 14.9093 13.2495L13.5427 14.8676C13.3175 15.1344 12.8902 14.971 12.8902 14.6181V13.8125H9.85893C9.38455 13.8125 9 13.46 9 13.0252C9 12.5903 9.38455 12.2378 9.85893 12.2378Z" fill={'currentColor'} /><path d="M11.1411 11.2229H8.10982V12.1442C8.10982 12.524 7.68252 12.6998 7.45726 12.4127L6.09071 10.6711C5.96976 10.517 5.96976 10.2882 6.09071 10.1341L7.45726 8.39247C7.68252 8.10539 8.10982 8.28122 8.10982 8.661V9.5281H11.1411C11.6154 9.5281 12 9.90751 12 10.3755C12 10.8435 11.6154 11.2229 11.1411 11.2229Z" fill={'currentColor'} /></svg>;
 };
 Streaming.displayName = 'Streaming';
 Streaming.isGlyph = true;

package/src/generated/String.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3c8da6506796ce168a23d28f387d8764
+* @checksum 5b5f5b87ce7dff980f6138dd597651c6
 */
 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 StringProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const String = ({
   role = 'img',
   ...props
 }: StringProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const String = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'String', {
     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.6897 14H5.31034L5.15987 13.8629V13.1086L5.31034 12.9714H5.91223C6.2884 12.9714 6.66458 12.6286 6.66458 12.2857V3.5H5.76176C3.7116 3.5 3.22257 4.22857 3.09091 5.32571L2.94044 5.46286H2.11285L2 5.32571L2.28213 2.13714L2.4326 2H13.5674L13.7179 2.13714L14 5.32571L13.8871 5.46286H13.0596L12.9091 5.32571C12.7774 4.22857 12.2884 3.5 10.2382 3.5H9.33542V12.2857C9.33542 12.6286 9.7116 12.9714 10.0878 12.9714H10.6897L10.8401 13.1086V13.8629L10.6897 14Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M10.6897 14H5.31034L5.15987 13.8629V13.1086L5.31034 12.9714H5.91223C6.2884 12.9714 6.66458 12.6286 6.66458 12.2857V3.5H5.76176C3.7116 3.5 3.22257 4.22857 3.09091 5.32571L2.94044 5.46286H2.11285L2 5.32571L2.28213 2.13714L2.4326 2H13.5674L13.7179 2.13714L14 5.32571L13.8871 5.46286H13.0596L12.9091 5.32571C12.7774 4.22857 12.2884 3.5 10.2382 3.5H9.33542V12.2857C9.33542 12.6286 9.7116 12.9714 10.0878 12.9714H10.6897L10.8401 13.1086V13.8629L10.6897 14Z" fill={'currentColor'} /></svg>;
 };
 String.displayName = 'String';
 String.isGlyph = true;