@leafygreen-ui/icon 11.11.1 → 11.12.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createIconComponent.tsx","../src/createGlyphComponent.tsx","../src/glyphs/index.ts","../src/Icon.tsx","../src/isComponentGlyph.ts"],"sourcesContent":["export const Size = {\n  Small: 'small',\n  Default: 'default',\n  Large: 'large',\n  XLarge: 'xlarge',\n} as const;\n\nexport type Size = typeof Size[keyof typeof Size];\n\nexport const sizeMap: Record<Size, number> = {\n  small: 14,\n  default: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\ninterface AccessibleFunctionParams {\n  'aria-labelledby'?: string;\n  'aria-label'?: string;\n  title?: string | null;\n}\n\ntype AccessibleFunctionReturnType =\n  | AccessibleFunctionParams\n  | { 'aria-hidden': true; alt: '' };\n\nexport function generateAccessibleProps(\n  role: 'img' | 'presentation',\n  glyphName: string,\n  {\n    ['aria-label']: ariaLabel,\n    ['aria-labelledby']: ariaLabelledby,\n    title,\n  }: AccessibleFunctionParams,\n): AccessibleFunctionReturnType {\n  switch (role) {\n    case 'img':\n      if (!ariaLabel && !ariaLabelledby && !title) {\n        return { 'aria-label': getGlyphLabel(glyphName) };\n      }\n\n      return {\n        ['aria-labelledby']: ariaLabelledby,\n        ['aria-label']: ariaLabel,\n        title,\n      };\n\n    case 'presentation':\n      return { 'aria-hidden': true, alt: '' };\n  }\n}\n\nexport function getGlyphLabel(name: string) {\n  return `${name.replace(/([a-z])([A-Z])/g, '$1 $2')} Icon`;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LGGlyph } from './types';\nimport { Size } from './glyphCommon';\n\n// We omit size here because we map string values for size to numbers in this component.\nexport interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {\n  /**\n   * The name of the icon glyph\n   */\n  glyph: string;\n\n  /**\n   * Size of the icon\n   */\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\n/**\n * Returns a single component with a `glyph` prop to select the glyph\n * @param glyphs The set of glyphs\n * @returns Icon component\n */\nexport function createIconComponent<G extends GlyphObject = GlyphObject>(\n  glyphs: G,\n) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n    SVGComponent.isGlyph = true;\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\n\n  Icon.isGlyph = true;\n\n  Icon.propTypes = {\n    glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n  } as any;\n\n  return Icon;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SVGR, LGGlyph } from './types';\nimport { css, cx } from '@leafygreen-ui/emotion';\nimport { generateAccessibleProps, sizeMap, Size } from './glyphCommon';\n\n/**\n * Returns a single glyph component.\n * Process custom glyphs to ensure consistent behavior between custom and built-in icons\n * @param glyphName: string - the display name of the icon\n * @param Glyph: SVGR.Component - the SVG icon component\n * @returns LGGlyph.Component\n */\nexport function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  const GlyphComponent: LGGlyph.Component = ({\n    className,\n    size = Size.Default,\n    fill,\n    title,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    role = 'img',\n    ...rest\n  }: LGGlyph.ComponentProps) => {\n    const fillStyle = css`\n      color: ${fill};\n    `;\n\n    const renderedSize = typeof size === 'number' ? size : sizeMap[size];\n\n    if (!(role === 'img' || role === 'presentation')) {\n      console.warn(\n        \"Please provide a valid role to this component. Valid options are 'img' and 'presentation'. If you'd like the Icon to be accessible to screen readers please use 'img', otherwise set the role to 'presentation'.\",\n      );\n    }\n\n    return (\n      <Glyph\n        className={cx(\n          {\n            [fillStyle]: fill != null,\n          },\n          className,\n        )}\n        height={renderedSize}\n        width={renderedSize}\n        role={role}\n        {...generateAccessibleProps(role, glyphName, {\n          title,\n          ['aria-label']: ariaLabel,\n          ['aria-labelledby']: ariaLabelledby,\n        })}\n        {...rest}\n      />\n    );\n  };\n\n  GlyphComponent.displayName = glyphName;\n\n  GlyphComponent.isGlyph = true;\n\n  GlyphComponent.propTypes = {\n    fill: PropTypes.string,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n    className: PropTypes.string,\n  };\n\n  return GlyphComponent;\n}\n","import { createGlyphComponent } from '../createGlyphComponent';\nimport { LGGlyph } from '../types';\n\n// Glyphs\nimport ActivityFeed from './ActivityFeed.svg';\nimport AddFile from './AddFile.svg';\nimport Apps from './Apps.svg';\nimport Array from './Array.svg';\nimport ArrowDown from './ArrowDown.svg';\nimport ArrowLeft from './ArrowLeft.svg';\nimport ArrowRight from './ArrowRight.svg';\nimport ArrowUp from './ArrowUp.svg';\nimport Beaker from './Beaker.svg';\nimport Bell from './Bell.svg';\nimport Building from './Building.svg';\nimport Bulb from './Bulb.svg';\nimport Calendar from './Calendar.svg';\nimport CaretDown from './CaretDown.svg';\nimport CaretLeft from './CaretLeft.svg';\nimport CaretRight from './CaretRight.svg';\nimport CaretUp from './CaretUp.svg';\nimport Charts from './Charts.svg';\nimport Checkmark from './Checkmark.svg';\nimport CheckmarkWithCircle from './CheckmarkWithCircle.svg';\nimport ChevronDown from './ChevronDown.svg';\nimport ChevronLeft from './ChevronLeft.svg';\nimport ChevronRight from './ChevronRight.svg';\nimport ChevronUp from './ChevronUp.svg';\nimport Clock from './Clock.svg';\nimport ClockWithArrow from './ClockWithArrow.svg';\nimport Clone from './Clone.svg';\nimport Cloud from './Cloud.svg';\nimport Code from './Code.svg';\nimport Connect from './Connect.svg';\nimport Copy from './Copy.svg';\nimport CreditCard from './CreditCard.svg';\nimport CurlyBraces from './CurlyBraces.svg';\nimport Cursor from './Cursor.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Diagram2 from './Diagram2.svg';\nimport Diagram3 from './Diagram3.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Folder from './Folder.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Home from './Home.svg';\nimport ImportantWithCircle from './ImportantWithCircle.svg';\nimport InfoWithCircle from './InfoWithCircle.svg';\nimport InviteUser from './InviteUser.svg';\nimport Key from './Key.svg';\nimport Laptop from './Laptop.svg';\nimport Link from './Link.svg';\nimport Lock from './Lock.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NotAllowed from './NotAllowed.svg';\nimport Note from './Note.svg';\nimport OpenNewTab from './OpenNewTab.svg';\nimport Pause from './Pause.svg';\nimport Person from './Person.svg';\nimport PersonGroup from './PersonGroup.svg';\nimport PersonWithLock from './PersonWithLock.svg';\nimport Play from './Play.svg';\nimport Plus from './Plus.svg';\nimport PlusWithCircle from './PlusWithCircle.svg';\nimport QuestionMarkWithCircle from './QuestionMarkWithCircle.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport Relationship from './Relationship.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Settings from './Settings.svg';\nimport Shell from './Shell.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport SplitHorizontal from './SplitHorizontal.svg';\nimport SplitVertical from './SplitVertical.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Sweep from './Sweep.svg';\nimport Table from './Table.svg';\nimport TimeSeries from './TimeSeries.svg';\nimport Trash from './Trash.svg';\nimport Undo from './Undo.svg';\nimport University from './University.svg';\nimport Unlock from './Unlock.svg';\nimport Unsorted from './Unsorted.svg';\nimport UpDownCarets from './UpDownCarets.svg';\nimport Upload from './Upload.svg';\nimport VerticalEllipsis from './VerticalEllipsis.svg';\nimport Visibility from './Visibility.svg';\nimport VisibilityOff from './VisibilityOff.svg';\nimport Warning from './Warning.svg';\nimport X from './X.svg';\nimport XWithCircle from './XWithCircle.svg';\n\nconst _glyphs = {\n  ActivityFeed,\n  AddFile,\n  Apps,\n  Array,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Beaker,\n  Bell,\n  Building,\n  Bulb,\n  Calendar,\n  CaretDown,\n  CaretLeft,\n  CaretRight,\n  CaretUp,\n  Charts,\n  Checkmark,\n  CheckmarkWithCircle,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Clock,\n  ClockWithArrow,\n  Clone,\n  Cloud,\n  Code,\n  Connect,\n  Copy,\n  CreditCard,\n  CurlyBraces,\n  Cursor,\n  Database,\n  Diagram,\n  Diagram2,\n  Diagram3,\n  Disconnect,\n  Download,\n  Edit,\n  Ellipsis,\n  Export,\n  Favorite,\n  File,\n  Filter,\n  FullScreenEnter,\n  FullScreenExit,\n  Folder,\n  GlobeAmericas,\n  GovernmentBuilding,\n  Home,\n  ImportantWithCircle,\n  InfoWithCircle,\n  InviteUser,\n  Key,\n  Laptop,\n  Link,\n  Lock,\n  MagnifyingGlass,\n  Megaphone,\n  Menu,\n  Minus,\n  NotAllowed,\n  Note,\n  OpenNewTab,\n  Pause,\n  Person,\n  PersonGroup,\n  PersonWithLock,\n  Play,\n  Plus,\n  PlusWithCircle,\n  QuestionMarkWithCircle,\n  Redo,\n  Refresh,\n  Relationship,\n  ReplicaSet,\n  Save,\n  Serverless,\n  ShardedCluster,\n  Settings,\n  Shell,\n  SortAscending,\n  SortDescending,\n  SplitHorizontal,\n  SplitVertical,\n  Stitch,\n  Support,\n  Sweep,\n  Table,\n  TimeSeries,\n  Trash,\n  Undo,\n  University,\n  Unlock,\n  Unsorted,\n  UpDownCarets,\n  Upload,\n  VerticalEllipsis,\n  Visibility,\n  VisibilityOff,\n  Warning,\n  X,\n  XWithCircle,\n} as const;\n\nexport type GlyphName = keyof typeof _glyphs;\n\nconst glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;\n\nexport const glyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, _glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n","import { createIconComponent } from './createIconComponent';\nimport { glyphs } from './glyphs';\n\nexport const Icon = createIconComponent(glyphs);\n","import { ComponentType, isValidElement, ReactNode } from 'react';\nimport { LGGlyph } from './types';\n\ntype ExtendedComponentType = ComponentType<any> & {\n  [key: string]: any;\n};\n/**\n * Helper type to check if element is a LeafyGreen UI Glyph\n * @internal\n */\nfunction isComponentGlyph(node: ReactNode): node is LGGlyph.Element;\nfunction isComponentGlyph(\n  component: ExtendedComponentType,\n): component is LGGlyph.Component;\nfunction isComponentGlyph(\n  child: ReactNode | ExtendedComponentType,\n): child is LGGlyph.Element | LGGlyph.Component {\n  // If we're received a rendered component (i.e. ReactNode)\n  if (isValidElement(child)) {\n    return (\n      child != null &&\n      typeof child === 'object' &&\n      'type' in child &&\n      (child.type as any).isGlyph === true\n    );\n  }\n\n  // If we've recieved a component function\n  return (\n    child != null &&\n    typeof child === 'function' &&\n    'isGlyph' in child &&\n    child.isGlyph === true\n  );\n}\n\nexport { isComponentGlyph };\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","isGlyph","React","createElement","displayName","propTypes","PropTypes","oneOf","Object","keys","isRequired","size","oneOfType","values","number","createGlyphComponent","glyphName","Glyph","GlyphComponent","_generateAccessiblePr","className","_ref$size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","fillStyle","css","renderedSize","console","warn","_extends","cx","_defineProperty","height","width","_ref2","name","concat","replace","alt","generateAccessibleProps","string","_glyphs","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Cursor","Database","Diagram","Diagram2","Diagram3","Disconnect","Download","Edit","Ellipsis","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Link","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Redo","Refresh","Relationship","ReplicaSet","Save","Serverless","ShardedCluster","Settings","Shell","SortAscending","SortDescending","SplitHorizontal","SplitVertical","Stitch","Support","Sweep","Table","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","reduce","acc","child","isValidElement","_typeof","type"],"mappings":"+uDACU,IAACA,EAAO,CAChBC,MAAO,QACPC,QAAS,UACTC,MAAO,QACPC,OAAQ,UAECC,EAAU,CACnBC,MAAO,GACPC,QAAS,GACTC,MAAO,GACPC,OAAQ,ICVV,ICIIC,EDJAC,EAAY,CAAC,SAUV,SAASC,EAAoBC,GAClC,IAAIC,EAAO,SAAcC,GACvB,IAAIC,EAAQD,EAAKC,MACbC,EAAOC,EAAyBH,EAAMJ,GAEtCQ,EAAeN,EAAOG,GAE1B,OADAG,EAAaC,SAAU,EACHC,UAAMC,cAAcH,EAAcF,IASxD,OANAH,EAAKS,YAAc,OACnBT,EAAKM,SAAU,EACfN,EAAKU,UAAY,CACfR,MAAOS,EAAS,QAACC,MAAMC,OAAOC,KAAKf,IAASgB,WAC5CC,KAAML,EAAS,QAACM,UAAU,CAACN,EAAS,QAACC,MAAMC,OAAOK,OAAOhC,IAAQyB,EAAS,QAACQ,UAEtEnB,ECpBT,kVAAIH,GAAY,CAAC,YAAa,OAAQ,OAAQ,QAAS,kBAAmB,aAAc,QAajF,SAASuB,GAAqBC,EAAWC,GAC9C,IAAIC,EAAiB,SAAwBtB,GAC3C,IAAIuB,MAEAC,EAAYxB,EAAKwB,UACjBC,EAAYzB,EAAKe,KACjBA,OAAqB,IAAdU,EAAuBxC,EAAKE,QAAUsC,EAC7CC,EAAO1B,EAAK0B,KACZC,EAAQ3B,EAAK2B,MACbC,EAAiB5B,EAAK,mBACtB6B,EAAY7B,EAAK,cACjB8B,EAAY9B,EAAK+B,KACjBA,OAAqB,IAAdD,EAAuB,MAAQA,EACtC5B,EAAOC,EAAyBH,EAAMJ,IAEtCoC,EAAYC,EAAAA,IAAItC,MAA6D,CAAC,kBAAmB,6BAA7DA,4EAA2E+B,GAC/GQ,EAA+B,iBAATnB,EAAoBA,EAAOzB,EAAQyB,GAM7D,MAJe,QAATgB,GAA2B,iBAATA,GACtBI,QAAQC,KAAK,oNAGK9B,UAAMC,cAAcc,EAAOgB,EAAS,CACtDb,UAAWc,EAAAA,GAAGC,EAAgB,GAAIP,EAAmB,MAARN,GAAeF,GAC5DgB,OAAQN,EACRO,MAAOP,EACPH,KAAMA,GFjCL,SAAiCA,EAAMX,EAAWpB,GACvD,IAAI0C,EAuBwBC,EArBxBd,EAAY7B,EAAK,cACjB4B,EAAiB5B,EAAK,mBACtB2B,EAAQ3B,EAAK2B,MAEjB,OAAQI,GACN,IAAK,MACH,OAAKF,GAAcD,GAAmBD,GAMnBY,EAAZG,EAAQ,GAA2B,kBAAmBd,GAAiBW,EAAgBG,EAAO,aAAcb,GAAYU,EAAgBG,EAAO,QAASf,GAAQe,GAL9J,CACL,cAaoBC,EAbQvB,EAc7B,GAAGwB,OAAOD,EAAKE,QAAQ,kBAAmB,SAAU,WARzD,IAAK,eACH,MAAO,CACL,eAAe,EACfC,IAAK,KEcNC,CAAwBhB,EAAMX,GAE9BmB,EAF0ChB,EAAwB,CACnEI,MAAOA,GACiC,aAAcE,GAAYU,EAAgBhB,EAAuB,kBAAmBK,GAAiBL,IAAyBrB,KAU1K,OAPAoB,EAAed,YAAcY,EAC7BE,EAAejB,SAAU,EACzBiB,EAAeb,UAAY,CACzBiB,KAAMhB,EAAS,QAACsC,OAChBjC,KAAML,EAAS,QAACM,UAAU,CAACN,EAAS,QAACC,MAAMC,OAAOK,OAAOhC,IAAQyB,EAAS,QAACQ,SAC3EM,UAAWd,EAAS,QAACsC,QAEhB1B,6orBCgDT,IAAI2B,GAAU,CACZC,kqBACAC,uhBACAC,kSACAC,2bACAC,kbACAC,sbACAC,kbACAC,ibACAC,qiCACAC,ydACAC,6bACAC,+bACAC,8ZACAC,+TACAC,8TACAC,iUACAC,4TACAC,qZACAC,8ZACAC,qZACAC,maACAC,oaACAC,qaACAC,maACAC,gZACAC,gmBACAC,gZACAC,kbACAC,2sBACAC,myBACAC,uxBACAC,yRACAC,s3BACAC,kcACAC,gqCACAC,8oBACAC,wtBACAC,usBACAC,gwBACAC,sfACAC,qmBACAC,qYACAC,wnBACAC,6fACAC,qYACAC,mYACAC,gnBACAC,6mBACAC,ySACAC,2bACAC,siBACAC,ioBACAC,iWACAC,iYACAC,koBACAC,2aACAC,gjBACAC,41BACAC,qaACAC,4bACAC,kaACAC,2UACAC,8QACAC,gZACAC,0hBACAC,mrBACAC,kVACAC,8kBACAC,0wBACAC,otBACAC,wTACAC,+XACAC,+VACAC,8pBACAC,yhBACAC,ywBACAC,ibACAC,6eACAC,ylCACAC,kYACAC,ovBACAC,8lCACAC,8aACAC,2dACAC,+dACAC,mWACAC,2VACAC,qTACAC,8bACAC,yxBACAC,wcACAC,6mBACAC,mXACAC,+gBACAC,i5BACAC,meACAC,0jBACAC,scACAC,yjBACAC,gZACAC,4xBACAC,ooCACAC,oaACAC,+fACAC,ucAGS5J,GADKc,OAAOC,KAAKoC,IACE0G,QAAO,SAAUC,EAAKjH,GAElD,OADAiH,EAAIjH,GAAQxB,GAAqBwB,EAAMM,GAAQN,IACxCiH,IACN,ICxNO,IAAC7J,GAAOF,EAAoBC,uHCCtC,SAA0B+J,GAExB,OAAkBC,EAAAA,eAAeD,GACf,MAATA,GAAoC,WAAnBE,EAAQF,IAAuB,SAAUA,IAAgC,IAAvBA,EAAMG,KAAK3J,QAIvE,MAATwJ,GAAkC,mBAAVA,GAAwB,YAAaA,IAA2B,IAAlBA,EAAMxJ"}
+{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createIconComponent.tsx","../src/createGlyphComponent.tsx","../src/glyphs/index.ts","../src/Icon.tsx","../src/isComponentGlyph.ts"],"sourcesContent":["export const Size = {\n  Small: 'small',\n  Default: 'default',\n  Large: 'large',\n  XLarge: 'xlarge',\n} as const;\n\nexport type Size = typeof Size[keyof typeof Size];\n\nexport const sizeMap: Record<Size, number> = {\n  small: 14,\n  default: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\ninterface AccessibleFunctionParams {\n  'aria-labelledby'?: string;\n  'aria-label'?: string;\n  title?: string | null;\n}\n\ntype AccessibleFunctionReturnType =\n  | AccessibleFunctionParams\n  | { 'aria-hidden': true; alt: '' };\n\nexport function generateAccessibleProps(\n  role: 'img' | 'presentation',\n  glyphName: string,\n  {\n    ['aria-label']: ariaLabel,\n    ['aria-labelledby']: ariaLabelledby,\n    title,\n  }: AccessibleFunctionParams,\n): AccessibleFunctionReturnType {\n  switch (role) {\n    case 'img':\n      if (!ariaLabel && !ariaLabelledby && !title) {\n        return { 'aria-label': getGlyphLabel(glyphName) };\n      }\n\n      return {\n        ['aria-labelledby']: ariaLabelledby,\n        ['aria-label']: ariaLabel,\n        title,\n      };\n\n    case 'presentation':\n      return { 'aria-hidden': true, alt: '' };\n  }\n}\n\nexport function getGlyphLabel(name: string) {\n  return `${name.replace(/([a-z])([A-Z])/g, '$1 $2')} Icon`;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LGGlyph } from './types';\nimport { Size } from './glyphCommon';\n\n// We omit size here because we map string values for size to numbers in this component.\nexport interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {\n  /**\n   * The name of the icon glyph\n   */\n  glyph: string;\n\n  /**\n   * Size of the icon\n   */\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\n/**\n * Returns a single component with a `glyph` prop to select the glyph\n * @param glyphs The set of glyphs\n * @returns Icon component\n */\nexport function createIconComponent<G extends GlyphObject = GlyphObject>(\n  glyphs: G,\n) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n    SVGComponent.isGlyph = true;\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\n\n  Icon.isGlyph = true;\n\n  Icon.propTypes = {\n    glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n  } as any;\n\n  return Icon;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SVGR, LGGlyph } from './types';\nimport { css, cx } from '@leafygreen-ui/emotion';\nimport { generateAccessibleProps, sizeMap, Size } from './glyphCommon';\n\n/**\n * Returns a single glyph component.\n * Process custom glyphs to ensure consistent behavior between custom and built-in icons\n * @param glyphName: string - the display name of the icon\n * @param Glyph: SVGR.Component - the SVG icon component\n * @returns LGGlyph.Component\n */\nexport function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  const GlyphComponent: LGGlyph.Component = ({\n    className,\n    size = Size.Default,\n    fill,\n    title,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    role = 'img',\n    ...rest\n  }: LGGlyph.ComponentProps) => {\n    const fillStyle = css`\n      color: ${fill};\n    `;\n\n    const renderedSize = typeof size === 'number' ? size : sizeMap[size];\n\n    if (!(role === 'img' || role === 'presentation')) {\n      console.warn(\n        \"Please provide a valid role to this component. Valid options are 'img' and 'presentation'. If you'd like the Icon to be accessible to screen readers please use 'img', otherwise set the role to 'presentation'.\",\n      );\n    }\n\n    return (\n      <Glyph\n        className={cx(\n          {\n            [fillStyle]: fill != null,\n          },\n          className,\n        )}\n        height={renderedSize}\n        width={renderedSize}\n        role={role}\n        {...generateAccessibleProps(role, glyphName, {\n          title,\n          ['aria-label']: ariaLabel,\n          ['aria-labelledby']: ariaLabelledby,\n        })}\n        {...rest}\n      />\n    );\n  };\n\n  GlyphComponent.displayName = glyphName;\n\n  GlyphComponent.isGlyph = true;\n\n  GlyphComponent.propTypes = {\n    fill: PropTypes.string,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n    className: PropTypes.string,\n  };\n\n  return GlyphComponent;\n}\n","import { createGlyphComponent } from '../createGlyphComponent';\nimport { LGGlyph } from '../types';\n\n// Glyphs\nimport ActivityFeed from './ActivityFeed.svg';\nimport AddFile from './AddFile.svg';\nimport Apps from './Apps.svg';\nimport Array from './Array.svg';\nimport ArrowDown from './ArrowDown.svg';\nimport ArrowLeft from './ArrowLeft.svg';\nimport ArrowRight from './ArrowRight.svg';\nimport ArrowUp from './ArrowUp.svg';\nimport Beaker from './Beaker.svg';\nimport Bell from './Bell.svg';\nimport Biometric from './Biometric.svg';\nimport Building from './Building.svg';\nimport Bulb from './Bulb.svg';\nimport Calendar from './Calendar.svg';\nimport CaretDown from './CaretDown.svg';\nimport CaretLeft from './CaretLeft.svg';\nimport CaretRight from './CaretRight.svg';\nimport CaretUp from './CaretUp.svg';\nimport Charts from './Charts.svg';\nimport Checkmark from './Checkmark.svg';\nimport CheckmarkWithCircle from './CheckmarkWithCircle.svg';\nimport ChevronDown from './ChevronDown.svg';\nimport ChevronLeft from './ChevronLeft.svg';\nimport ChevronRight from './ChevronRight.svg';\nimport ChevronUp from './ChevronUp.svg';\nimport Clock from './Clock.svg';\nimport ClockWithArrow from './ClockWithArrow.svg';\nimport Clone from './Clone.svg';\nimport Cloud from './Cloud.svg';\nimport Code from './Code.svg';\nimport Connect from './Connect.svg';\nimport Copy from './Copy.svg';\nimport CreditCard from './CreditCard.svg';\nimport CurlyBraces from './CurlyBraces.svg';\nimport Cursor from './Cursor.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Diagram2 from './Diagram2.svg';\nimport Diagram3 from './Diagram3.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Email from './Email.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Folder from './Folder.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Home from './Home.svg';\nimport Import from './Import.svg';\nimport ImportantWithCircle from './ImportantWithCircle.svg';\nimport InfoWithCircle from './InfoWithCircle.svg';\nimport InviteUser from './InviteUser.svg';\nimport Key from './Key.svg';\nimport Laptop from './Laptop.svg';\nimport Link from './Link.svg';\nimport Lock from './Lock.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NotAllowed from './NotAllowed.svg';\nimport Note from './Note.svg';\nimport OpenNewTab from './OpenNewTab.svg';\nimport Pause from './Pause.svg';\nimport Person from './Person.svg';\nimport PersonGroup from './PersonGroup.svg';\nimport PersonWithLock from './PersonWithLock.svg';\nimport Play from './Play.svg';\nimport Plus from './Plus.svg';\nimport PlusWithCircle from './PlusWithCircle.svg';\nimport QuestionMarkWithCircle from './QuestionMarkWithCircle.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport Relationship from './Relationship.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Settings from './Settings.svg';\nimport Shell from './Shell.svg';\nimport SMS from './SMS.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport SplitHorizontal from './SplitHorizontal.svg';\nimport SplitVertical from './SplitVertical.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Sweep from './Sweep.svg';\nimport Table from './Table.svg';\nimport TimeSeries from './TimeSeries.svg';\nimport Trash from './Trash.svg';\nimport Undo from './Undo.svg';\nimport University from './University.svg';\nimport Unlock from './Unlock.svg';\nimport Unsorted from './Unsorted.svg';\nimport UpDownCarets from './UpDownCarets.svg';\nimport Upload from './Upload.svg';\nimport VerticalEllipsis from './VerticalEllipsis.svg';\nimport Visibility from './Visibility.svg';\nimport VisibilityOff from './VisibilityOff.svg';\nimport Warning from './Warning.svg';\nimport X from './X.svg';\nimport XWithCircle from './XWithCircle.svg';\n\nconst _glyphs = {\n  ActivityFeed,\n  AddFile,\n  Apps,\n  Array,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Beaker,\n  Bell,\n  Biometric,\n  Building,\n  Bulb,\n  Calendar,\n  CaretDown,\n  CaretLeft,\n  CaretRight,\n  CaretUp,\n  Charts,\n  Checkmark,\n  CheckmarkWithCircle,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Clock,\n  ClockWithArrow,\n  Clone,\n  Cloud,\n  Code,\n  Connect,\n  Copy,\n  CreditCard,\n  CurlyBraces,\n  Cursor,\n  Database,\n  Diagram,\n  Diagram2,\n  Diagram3,\n  Disconnect,\n  Download,\n  Edit,\n  Ellipsis,\n  Email,\n  Export,\n  Favorite,\n  File,\n  Filter,\n  FullScreenEnter,\n  FullScreenExit,\n  Folder,\n  GlobeAmericas,\n  GovernmentBuilding,\n  Home,\n  Import,\n  ImportantWithCircle,\n  InfoWithCircle,\n  InviteUser,\n  Key,\n  Laptop,\n  Link,\n  Lock,\n  MagnifyingGlass,\n  Megaphone,\n  Menu,\n  Minus,\n  NotAllowed,\n  Note,\n  OpenNewTab,\n  Pause,\n  Person,\n  PersonGroup,\n  PersonWithLock,\n  Play,\n  Plus,\n  PlusWithCircle,\n  QuestionMarkWithCircle,\n  Redo,\n  Refresh,\n  Relationship,\n  ReplicaSet,\n  Save,\n  Serverless,\n  ShardedCluster,\n  Settings,\n  Shell,\n  SMS,\n  SortAscending,\n  SortDescending,\n  SplitHorizontal,\n  SplitVertical,\n  Stitch,\n  Support,\n  Sweep,\n  Table,\n  TimeSeries,\n  Trash,\n  Undo,\n  University,\n  Unlock,\n  Unsorted,\n  UpDownCarets,\n  Upload,\n  VerticalEllipsis,\n  Visibility,\n  VisibilityOff,\n  Warning,\n  X,\n  XWithCircle,\n} as const;\n\nexport type GlyphName = keyof typeof _glyphs;\n\nconst glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;\n\nexport const glyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, _glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n","import { createIconComponent } from './createIconComponent';\nimport { glyphs } from './glyphs';\n\nexport const Icon = createIconComponent(glyphs);\n","import { ComponentType, isValidElement, ReactNode } from 'react';\nimport { LGGlyph } from './types';\n\ntype ExtendedComponentType = ComponentType<any> & {\n  [key: string]: any;\n};\n/**\n * Helper type to check if element is a LeafyGreen UI Glyph\n * @internal\n */\nfunction isComponentGlyph(node: ReactNode): node is LGGlyph.Element;\nfunction isComponentGlyph(\n  component: ExtendedComponentType,\n): component is LGGlyph.Component;\nfunction isComponentGlyph(\n  child: ReactNode | ExtendedComponentType,\n): child is LGGlyph.Element | LGGlyph.Component {\n  // If we're received a rendered component (i.e. ReactNode)\n  if (isValidElement(child)) {\n    return (\n      child != null &&\n      typeof child === 'object' &&\n      'type' in child &&\n      (child.type as any).isGlyph === true\n    );\n  }\n\n  // If we've recieved a component function\n  return (\n    child != null &&\n    typeof child === 'function' &&\n    'isGlyph' in child &&\n    child.isGlyph === true\n  );\n}\n\nexport { isComponentGlyph };\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","isGlyph","React","createElement","displayName","propTypes","PropTypes","oneOf","Object","keys","isRequired","size","oneOfType","values","number","createGlyphComponent","glyphName","Glyph","GlyphComponent","_generateAccessiblePr","className","_ref$size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","fillStyle","css","renderedSize","console","warn","_extends","cx","_defineProperty","height","width","_ref2","name","concat","replace","alt","generateAccessibleProps","string","_glyphs","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Biometric","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Cursor","Database","Diagram","Diagram2","Diagram3","Disconnect","Download","Edit","Ellipsis","Email","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","Import","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Link","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Redo","Refresh","Relationship","ReplicaSet","Save","Serverless","ShardedCluster","Settings","Shell","SMS","SortAscending","SortDescending","SplitHorizontal","SplitVertical","Stitch","Support","Sweep","Table","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","reduce","acc","child","isValidElement","_typeof","type"],"mappings":"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"}

package/dist/types/LGGlyph.d.ts

@@ -2,6 +2,7 @@ import { ComponentType, ReactComponentElement } from 'react';
 import * as SVGR from './SVGR';
 export interface ComponentProps extends SVGR.ComponentProps {
     size?: number | 'small' | 'default' | 'large' | 'xlarge';
+    ['data-testid']?: string;
 }
 export declare type Component = ComponentType<ComponentProps> & {
     isGlyph?: boolean;

package/dist/types/LGGlyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LGGlyph.d.ts","sourceRoot":"","sources":["../../src/types/LGGlyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc;IACzD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1D;AAED,oBAAY,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9E,oBAAY,OAAO,GAAG,qBAAqB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"LGGlyph.d.ts","sourceRoot":"","sources":["../../src/types/LGGlyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc;IACzD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,oBAAY,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9E,oBAAY,OAAO,GAAG,qBAAqB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.11.1",
+  "version": "11.12.1",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

package/src/Icon.story.tsx

@@ -56,7 +56,13 @@ Single.argTypes = {
 export const AllIcons: ComponentStory<typeof Icon> = (
   args: Omit<IconProps, 'glyph'>,
 ) => (
-  <>
+  <div
+    className={css`
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+    `}
+  >
     {Object.keys(glyphs).map(glyph => {
       return (
         <div key={glyph} className={containerStyle}>
@@ -65,5 +71,5 @@ export const AllIcons: ComponentStory<typeof Icon> = (
         </div>
       );
     })}
-  </>
+  </div>
 );

package/src/generated/Biometric.tsx

@@ -0,0 +1,68 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum b222acbf47aa3d822ae6d4b8d3dc1dac
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface BiometricProps extends LGGlyph.ComponentProps {}
+
+const Biometric = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: BiometricProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Biometric', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby,
+  });
+  return (
+    <svg
+      className={cx(
+        {
+          [fillStyle]: fill != null,
+        },
+        noFlexShrink,
+        className,
+      )}
+      height={typeof size === 'number' ? size : sizeMap[size]}
+      width={typeof size === 'number' ? size : sizeMap[size]}
+      role={role}
+      {...accessibleProps}
+      {...props}
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Biometric.displayName = 'Biometric';
+Biometric.isGlyph = true;
+Biometric.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Biometric;

package/src/generated/Email.tsx

@@ -0,0 +1,78 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum c8db52cf543ed016cb953855a20a499a
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface EmailProps extends LGGlyph.ComponentProps {}
+
+const Email = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: EmailProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Email', {
+    title,
+    ['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.49388 4L7.20766 9.05051C7.64505 9.51914 8.35419 9.51914 8.79158 9.05051L13.5054 4H2.49388Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M1.13324 4.25647C1.04729 4.48631 1 4.73721 1 4.99995V11C1 11.369 1.09326 11.7146 1.25591 12.0114L4.8135 8.19963L1.13324 4.25647Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M2.86667 13C2.5187 13 2.19297 12.898 1.91411 12.7204L5.47346 8.90674L6.69282 10.2132C7.42179 10.9943 8.6037 10.9943 9.33268 10.2132L10.6793 8.77044L14.2535 12.6C13.9415 12.8512 13.5536 13 13.1333 13H2.86667Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M14.8392 11.8133C14.9425 11.5648 15 11.2896 15 11V4.99995C15 4.74466 14.9554 4.50054 14.874 4.27606L11.3392 8.06332L14.8392 11.8133Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Email.displayName = 'Email';
+Email.isGlyph = true;
+Email.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Email;

package/src/generated/Import.tsx

@@ -0,0 +1,70 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum c6bb5439d7b1397124eb7cbed13a3288
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface ImportProps extends LGGlyph.ComponentProps {}
+
+const Import = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ImportProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Import', {
+    title,
+    ['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.6225 8.79871C11.7258 8.69129 11.7258 8.52138 11.6225 8.41396L8.81811 5.49829C8.64501 5.31832 8.34095 5.4409 8.34095 5.69066V7.09645C6.48177 7.0133 5 5.47969 5 3.6V3.5C5 2.67157 4.32843 2 3.5 2C2.67157 2 2 2.67157 2 3.5V3.6C2 7.13668 4.82458 10.0136 8.34095 10.0981V11.522C8.34095 11.7718 8.64501 11.8944 8.81811 11.7144L11.6225 8.79871Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M3.95001 11C3.95001 10.5858 4.2858 10.25 4.70001 10.25C5.11423 10.25 5.45001 10.5858 5.45001 11L5.45001 12.75C5.45001 13.0262 5.67387 13.25 5.95001 13.25H12.814C13.0901 13.25 13.314 13.0262 13.314 12.75V5.88602C13.314 5.60988 13.0901 5.38602 12.814 5.38602L10.8711 5.38602C10.4569 5.38602 10.1211 5.05024 10.1211 4.63602C10.1211 4.22181 10.4569 3.88602 10.8711 3.88602H12.814C13.9186 3.88602 14.814 4.78145 14.814 5.88602V12.75C14.814 13.8546 13.9186 14.75 12.814 14.75H5.95001C4.84544 14.75 3.95001 13.8546 3.95001 12.75V11Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Import.displayName = 'Import';
+Import.isGlyph = true;
+Import.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Import;

package/src/generated/SMS.tsx

@@ -0,0 +1,68 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 89efdc6d5d72946e099e210644a09e79
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface SMSProps extends LGGlyph.ComponentProps {}
+
+const SMS = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: SMSProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'SMS', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby,
+  });
+  return (
+    <svg
+      className={cx(
+        {
+          [fillStyle]: fill != null,
+        },
+        noFlexShrink,
+        className,
+      )}
+      height={typeof size === 'number' ? size : sizeMap[size]}
+      width={typeof size === 'number' ? size : sizeMap[size]}
+      role={role}
+      {...accessibleProps}
+      {...props}
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10C15 11.1046 14.1046 12 13 12H7.75495L4.23014 14.8311C3.74164 15.2234 3 14.8886 3 14.2758L3 12C1.89543 12 1 11.1046 1 10V4ZM3.00001 4.75C3.00001 4.33579 3.3358 4 3.75001 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H3.75001C3.3358 5.5 3.00001 5.16421 3.00001 4.75ZM3.00001 7.75C3.00001 7.33579 3.3358 7 3.75001 7H9.25001C9.66423 7 10 7.33579 10 7.75C10 8.16421 9.66423 8.5 9.25001 8.5H3.75001C3.3358 8.5 3.00001 8.16421 3.00001 7.75Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+SMS.displayName = 'SMS';
+SMS.isGlyph = true;
+SMS.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default SMS;

package/src/glyphs/Biometric.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z" fill="#000"/>
+</svg>

package/src/glyphs/Email.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.49388 4L7.20766 9.05051C7.64505 9.51914 8.35419 9.51914 8.79158 9.05051L13.5054 4H2.49388Z" fill="#000000"/>
+<path d="M1.13324 4.25647C1.04729 4.48631 1 4.73721 1 4.99995V11C1 11.369 1.09326 11.7146 1.25591 12.0114L4.8135 8.19963L1.13324 4.25647Z" fill="#000000"/>
+<path d="M2.86667 13C2.5187 13 2.19297 12.898 1.91411 12.7204L5.47346 8.90674L6.69282 10.2132C7.42179 10.9943 8.6037 10.9943 9.33268 10.2132L10.6793 8.77044L14.2535 12.6C13.9415 12.8512 13.5536 13 13.1333 13H2.86667Z" fill="#000000"/>
+<path d="M14.8392 11.8133C14.9425 11.5648 15 11.2896 15 11V4.99995C15 4.74466 14.9554 4.50054 14.874 4.27606L11.3392 8.06332L14.8392 11.8133Z" fill="#000000"/>
+</svg>

package/src/glyphs/Import.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6225 8.79871C11.7258 8.69129 11.7258 8.52138 11.6225 8.41396L8.81811 5.49829C8.64501 5.31832 8.34095 5.4409 8.34095 5.69066V7.09645C6.48177 7.0133 5 5.47969 5 3.6V3.5C5 2.67157 4.32843 2 3.5 2C2.67157 2 2 2.67157 2 3.5V3.6C2 7.13668 4.82458 10.0136 8.34095 10.0981V11.522C8.34095 11.7718 8.64501 11.8944 8.81811 11.7144L11.6225 8.79871Z" fill="#000000"/>
+<path d="M3.95001 11C3.95001 10.5858 4.2858 10.25 4.70001 10.25C5.11423 10.25 5.45001 10.5858 5.45001 11L5.45001 12.75C5.45001 13.0262 5.67387 13.25 5.95001 13.25H12.814C13.0901 13.25 13.314 13.0262 13.314 12.75V5.88602C13.314 5.60988 13.0901 5.38602 12.814 5.38602L10.8711 5.38602C10.4569 5.38602 10.1211 5.05024 10.1211 4.63602C10.1211 4.22181 10.4569 3.88602 10.8711 3.88602H12.814C13.9186 3.88602 14.814 4.78145 14.814 5.88602V12.75C14.814 13.8546 13.9186 14.75 12.814 14.75H5.95001C4.84544 14.75 3.95001 13.8546 3.95001 12.75V11Z" fill="#000000"/>
+</svg>

package/src/glyphs/SMS.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10C15 11.1046 14.1046 12 13 12H7.75495L4.23014 14.8311C3.74164 15.2234 3 14.8886 3 14.2758L3 12C1.89543 12 1 11.1046 1 10V4ZM3.00001 4.75C3.00001 4.33579 3.3358 4 3.75001 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H3.75001C3.3358 5.5 3.00001 5.16421 3.00001 4.75ZM3.00001 7.75C3.00001 7.33579 3.3358 7 3.75001 7H9.25001C9.66423 7 10 7.33579 10 7.75C10 8.16421 9.66423 8.5 9.25001 8.5H3.75001C3.3358 8.5 3.00001 8.16421 3.00001 7.75Z" fill="#000000"/>
+</svg>

package/src/glyphs/index.ts

@@ -12,6 +12,7 @@ import ArrowRight from './ArrowRight.svg';
 import ArrowUp from './ArrowUp.svg';
 import Beaker from './Beaker.svg';
 import Bell from './Bell.svg';
+import Biometric from './Biometric.svg';
 import Building from './Building.svg';
 import Bulb from './Bulb.svg';
 import Calendar from './Calendar.svg';
@@ -44,6 +45,7 @@ import Disconnect from './Disconnect.svg';
 import Download from './Download.svg';
 import Edit from './Edit.svg';
 import Ellipsis from './Ellipsis.svg';
+import Email from './Email.svg';
 import Export from './Export.svg';
 import Favorite from './Favorite.svg';
 import File from './File.svg';
@@ -54,6 +56,7 @@ import Folder from './Folder.svg';
 import GlobeAmericas from './GlobeAmericas.svg';
 import GovernmentBuilding from './GovernmentBuilding.svg';
 import Home from './Home.svg';
+import Import from './Import.svg';
 import ImportantWithCircle from './ImportantWithCircle.svg';
 import InfoWithCircle from './InfoWithCircle.svg';
 import InviteUser from './InviteUser.svg';
@@ -85,6 +88,7 @@ import Serverless from './Serverless.svg';
 import ShardedCluster from './ShardedCluster.svg';
 import Settings from './Settings.svg';
 import Shell from './Shell.svg';
+import SMS from './SMS.svg';
 import SortAscending from './SortAscending.svg';
 import SortDescending from './SortDescending.svg';
 import SplitHorizontal from './SplitHorizontal.svg';
@@ -119,6 +123,7 @@ const _glyphs = {
   ArrowUp,
   Beaker,
   Bell,
+  Biometric,
   Building,
   Bulb,
   Calendar,
@@ -151,6 +156,7 @@ const _glyphs = {
   Download,
   Edit,
   Ellipsis,
+  Email,
   Export,
   Favorite,
   File,
@@ -161,6 +167,7 @@ const _glyphs = {
   GlobeAmericas,
   GovernmentBuilding,
   Home,
+  Import,
   ImportantWithCircle,
   InfoWithCircle,
   InviteUser,
@@ -192,6 +199,7 @@ const _glyphs = {
   ShardedCluster,
   Settings,
   Shell,
+  SMS,
   SortAscending,
   SortDescending,
   SplitHorizontal,

package/src/types/LGGlyph.ts

@@ -3,6 +3,7 @@ import * as SVGR from './SVGR';
 
 export interface ComponentProps extends SVGR.ComponentProps {
   size?: number | 'small' | 'default' | 'large' | 'xlarge';
+  ['data-testid']?: string;
 }
 
 export type Component = ComponentType<ComponentProps> & { isGlyph?: boolean };