@leafygreen-ui/icon 11.6.1 → 11.7.0

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/index.ts","../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  glyph: string;\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\nexport default function createIconComponent<\n  G extends GlyphObject = GlyphObject\n>(glyphs: G) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\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\nexport default function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  function GlyphComponent({\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 ChevronUp from './ChevronUp.svg';\nimport ChevronDown from './ChevronDown.svg';\nimport ChevronRight from './ChevronRight.svg';\nimport ChevronLeft from './ChevronLeft.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 Database from './Database.svg';\nimport Diagram from './Diagram.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 Laptop from './Laptop.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 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 Refresh from './Refresh.svg';\nimport Save from './Save.svg';\nimport Settings from './Settings.svg';\nimport Shell from './Shell.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Table from './Table.svg';\nimport TimeSeries from './TimeSeries.svg';\nimport Trash from './Trash.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  Clone,\n  Cloud,\n  Code,\n  Connect,\n  Copy,\n  CreditCard,\n  CurlyBraces,\n  Database,\n  Diagram,\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  Laptop,\n  Lock,\n  MagnifyingGlass,\n  Megaphone,\n  Menu,\n  Minus,\n  NotAllowed,\n  OpenNewTab,\n  Pause,\n  Person,\n  PersonGroup,\n  PersonWithLock,\n  Play,\n  Plus,\n  PlusWithCircle,\n  QuestionMarkWithCircle,\n  Refresh,\n  Save,\n  Settings,\n  Shell,\n  SortAscending,\n  SortDescending,\n  Stitch,\n  Support,\n  Table,\n  TimeSeries,\n  Trash,\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\ntype GlyphName = keyof typeof glyphs;\n\nconst glyphKeys = Object.keys(glyphs) as Array<GlyphName>;\n\nconst processedGlyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n\nexport default processedGlyphs;\n","import createIconComponent from './createIconComponent';\nimport glyphs from './glyphs';\n\nexport { default as createIconComponent } from './createIconComponent';\nexport { default as glyphs } from './glyphs';\nexport { Size } from './glyphCommon';\nexport { isComponentGlyph } from './isComponentGlyph';\nexport default createIconComponent(glyphs);\n","import { LGGlyph } from './types';\n\n/** Helper type to check if element is a LeafyGreen UI Glyph  */\nexport function isComponentGlyph(\n  child: React.ReactNode,\n): child is React.ReactElement<LGGlyph.ComponentProps> {\n  return (\n    child != null &&\n    typeof child === 'object' &&\n    'type' in child &&\n    (child.type as any).isGlyph === true\n  );\n}\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","___EmotionJSX","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","aria-label","concat","replace","aria-hidden","alt","generateAccessibleProps","isGlyph","string","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Database","Diagram","Disconnect","Download","Edit","Ellipsis","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","ImportantWithCircle","InfoWithCircle","InviteUser","Laptop","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Refresh","Save","Settings","Shell","SortAscending","SortDescending","Stitch","Support","Table","TimeSeries","Trash","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","processedGlyphs","reduce","acc","child","_typeof","type"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createIconComponent.tsx","../src/createGlyphComponent.tsx","../src/glyphs/index.ts","../src/index.ts","../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  glyph: string;\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\nexport default function createIconComponent<\n  G extends GlyphObject = GlyphObject\n>(glyphs: G) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\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\nexport default function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  function GlyphComponent({\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 Database from './Database.svg';\nimport Diagram from './Diagram.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 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 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 Stitch from './Stitch.svg';\nimport Support from './Support.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  Database,\n  Diagram,\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  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  ReplicaSet,\n  Save,\n  Serverless,\n  ShardedCluster,\n  Settings,\n  Shell,\n  SortAscending,\n  SortDescending,\n  Stitch,\n  Support,\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\ntype GlyphName = keyof typeof glyphs;\n\nconst glyphKeys = Object.keys(glyphs) as Array<GlyphName>;\n\nconst processedGlyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n\nexport default processedGlyphs;\n","import createIconComponent from './createIconComponent';\nimport glyphs from './glyphs';\n\nexport { default as createIconComponent } from './createIconComponent';\nexport { default as glyphs } from './glyphs';\nexport { Size } from './glyphCommon';\nexport { isComponentGlyph } from './isComponentGlyph';\nexport default createIconComponent(glyphs);\n","import { LGGlyph } from './types';\n\n/** Helper type to check if element is a LeafyGreen UI Glyph  */\nexport function isComponentGlyph(\n  child: React.ReactNode,\n): child is React.ReactElement<LGGlyph.ComponentProps> {\n  return (\n    child != null &&\n    typeof child === 'object' &&\n    'type' in child &&\n    (child.type as any).isGlyph === true\n  );\n}\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","___EmotionJSX","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","aria-label","concat","replace","aria-hidden","alt","generateAccessibleProps","isGlyph","string","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","Database","Diagram","Disconnect","Download","Edit","Ellipsis","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Redo","Refresh","ReplicaSet","Save","Serverless","ShardedCluster","Settings","Shell","SortAscending","SortDescending","Stitch","Support","Table","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","processedGlyphs","reduce","acc","child","_typeof","type"],"mappings":"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"}

package/package.json

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

package/src/Icon.story.tsx

@@ -3,6 +3,7 @@ import Icon, { glyphs, Size } from '.';
 import { css } from '@leafygreen-ui/emotion';
 import { storiesOf } from '@storybook/react';
 import { color, select } from '@storybook/addon-knobs';
+import { uiColors } from '@leafygreen-ui/palette';
 
 const containerStyle = css`
   width: 150px;
@@ -20,7 +21,7 @@ const containerStyle = css`
 
 const textStyle = css`
   font-size: 12px;
-  color: #babdbe;
+  color: ${uiColors.gray.base};
   margin-top: 0.5rem;
 `;
 

package/src/generated/Clock.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 867509eef46d330604af7224e7ceb53b
+ */
+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 ClockProps extends LGGlyph.ComponentProps {}
+
+const Clock = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ClockProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Clock', {
+    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="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 4.75C7.25 4.33579 7.58579 4 8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.90966L10.4939 9.43556C10.8056 9.70832 10.8372 10.1821 10.5644 10.4939C10.2917 10.8056 9.81786 10.8372 9.50613 10.5644L7.51059 8.81833C7.5014 8.8104 7.4924 8.80226 7.48361 8.79391C7.41388 8.7278 7.35953 8.65117 7.32087 8.56867C7.27541 8.47195 7.25 8.36394 7.25 8.25V4.75Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Clock.displayName = 'Clock';
+Clock.isGlyph = true;
+Clock.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Clock;

package/src/generated/ClockWithArrow.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 5cebdb544bb818697100aa36feb9bd15
+ */
+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 ClockWithArrowProps extends LGGlyph.ComponentProps {}
+
+const ClockWithArrow = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ClockWithArrowProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'ClockWithArrow', {
+    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="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M7.25 5.25C7.25 4.83579 7.58579 4.5 8 4.5C8.41421 4.5 8.75 4.83579 8.75 5.25V7.91793L10.4294 9.44169C10.7412 9.71445 10.7728 10.1883 10.5 10.5C10.2272 10.8117 9.75342 10.8433 9.44169 10.5706L7.50697 8.81519C7.49904 8.80826 7.49125 8.80117 7.48361 8.79391C7.41388 8.72781 7.35954 8.65118 7.32088 8.56868C7.27541 8.47196 7.25 8.36395 7.25 8.25V5.25Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+ClockWithArrow.displayName = 'ClockWithArrow';
+ClockWithArrow.isGlyph = true;
+ClockWithArrow.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default ClockWithArrow;

package/src/generated/Key.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 472b9840b2d10f0876a3c95cb82ae7c1
+ */
+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 KeyProps extends LGGlyph.ComponentProps {}
+
+const Key = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: KeyProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Key', {
+    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="M6 10C6.55427 10 7.08222 9.88726 7.56215 9.68347L8.87868 11L8.43934 11.4393C7.85355 12.0251 7.85355 12.9749 8.43934 13.5607C9.02513 14.1464 9.97487 14.1464 10.5607 13.5607L11 13.1213L11.4393 13.5607C12.0251 14.1464 12.9749 14.1464 13.5607 13.5607C14.1464 12.9749 14.1464 12.0251 13.5607 11.4393L9.68347 7.56215C9.88726 7.08222 10 6.55427 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10ZM5.25 6.5C5.94036 6.5 6.5 5.94036 6.5 5.25C6.5 4.55964 5.94036 4 5.25 4C4.55964 4 4 4.55964 4 5.25C4 5.94036 4.55964 6.5 5.25 6.5Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Key.displayName = 'Key';
+Key.isGlyph = true;
+Key.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Key;

package/src/generated/Note.tsx

@@ -0,0 +1,76 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 8138c0459c5346416e419e5fc40eab64
+ */
+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 NoteProps extends LGGlyph.ComponentProps {}
+
+const Note = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: NoteProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Note', {
+    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="M4.5 6.25C4.5 5.83579 4.83579 5.5 5.25 5.5H8.75C9.16421 5.5 9.5 5.83579 9.5 6.25C9.5 6.66421 9.16421 7 8.75 7H5.25C4.83579 7 4.5 6.66421 4.5 6.25Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M4.5 8.75C4.5 8.33579 4.83579 8 5.25 8H6.75C7.16421 8 7.5 8.33579 7.5 8.75C7.5 9.16421 7.16421 9.5 6.75 9.5H5.25C4.83579 9.5 4.5 9.16421 4.5 8.75Z"
+        fill={'currentColor'}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 10L11 14H3C1.89543 14 1 13.1046 1 12V4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10ZM13 4H3L3 12H10V10C10 9.44772 10.4477 9 11 9H13V4Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Note.displayName = 'Note';
+Note.isGlyph = true;
+Note.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Note;

package/src/generated/Redo.tsx

@@ -0,0 +1,66 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum f80ff0b262acf6338700f6665f4116f3
+ */
+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 RedoProps extends LGGlyph.ComponentProps {}
+
+const Redo = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: RedoProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Redo', {
+    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="M4.01756 9.40216C3.96845 9.72987 3.70455 10 3.37318 10H2.57318C2.24181 10 1.97003 9.73064 2.00272 9.40089C2.18023 7.6104 3.14483 6.05139 4.54567 5.07473C5.02468 4.73549 5.56726 4.46519 6.15478 4.28051C6.72834 4.09832 7.33928 4.00002 7.97318 4.00002C7.98266 3.99998 7.99215 4.00002 8.00164 4.00002C10.7006 4.00002 12.9519 5.71778 13.4688 8.00002H14.8831C15.4243 8.00002 15.6748 8.67204 15.2657 9.02631L12.7841 11.1755C12.5645 11.3657 12.2385 11.3657 12.0188 11.1755L9.53719 9.02631C9.12812 8.67204 9.37866 8.00002 9.91982 8.00002H11.3664C10.8977 6.91458 9.68595 6.00002 8.00164 6.00002C7.81503 6.00002 7.63422 6.01124 7.45958 6.03269C6.75401 6.12312 6.10595 6.39739 5.56496 6.80592C5.54654 6.8206 5.52833 6.83543 5.51032 6.85041C5.4936 6.86432 5.47625 6.87728 5.45838 6.88926C4.69892 7.50399 4.16907 8.39119 4.01756 9.40216Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Redo.displayName = 'Redo';
+Redo.isGlyph = true;
+Redo.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Redo;

package/src/generated/ReplicaSet.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 c42351dd3176e4dd2d13c13d01e2dcb9
+ */
+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 ReplicaSetProps extends LGGlyph.ComponentProps {}
+
+const ReplicaSet = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ReplicaSetProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'ReplicaSet', {
+    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="M9.39072 7.71281C8.96444 7.89758 8.49418 8 8 8C7.50582 8 7.03556 7.89758 6.60928 7.71281L5.26491 9.72938C5.719 10.182 6 10.8082 6 11.5C6 12.8807 4.88071 14 3.5 14C2.11929 14 1 12.8807 1 11.5C1 10.1193 2.11929 9 3.5 9C3.73768 9 3.96761 9.03317 4.18543 9.09513L5.56972 7.01868C4.91019 6.38216 4.5 5.48898 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5C11.5 5.48898 11.0898 6.38216 10.4303 7.01868L11.8146 9.09513C12.0324 9.03317 12.2623 9 12.5 9C13.8807 9 15 10.1193 15 11.5C15 12.8807 13.8807 14 12.5 14C11.1193 14 10 12.8807 10 11.5C10 10.8082 10.281 10.182 10.7351 9.72938L9.39072 7.71281ZM9.75 4.5C9.75 5.4665 8.9665 6.25 8 6.25C7.0335 6.25 6.25 5.4665 6.25 4.5C6.25 3.5335 7.0335 2.75 8 2.75C8.9665 2.75 9.75 3.5335 9.75 4.5Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+ReplicaSet.displayName = 'ReplicaSet';
+ReplicaSet.isGlyph = true;
+ReplicaSet.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default ReplicaSet;

package/src/generated/Serverless.tsx

@@ -0,0 +1,66 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 4e5142f4b799e8b6bd4879f0b65c1f1a
+ */
+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 ServerlessProps extends LGGlyph.ComponentProps {}
+
+const Serverless = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ServerlessProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Serverless', {
+    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.13223 10.8487C0.834955 9.84256 0 8.26878 0 6.5C0 3.46243 2.46243 1 5.5 1C7.74673 1 9.67881 2.34714 10.5326 4.27774C10.9869 4.09848 11.482 4 12 4C14.2091 4 16 5.79086 16 8C16 9.05152 15.5943 10.0083 14.9308 10.7222C14.8896 10.7907 14.8395 10.8552 14.7805 10.9142L13.0092 12.8124C12.6426 13.2337 12.1024 13.5 11.5 13.5L7.79198 13.5C7.4062 14.383 6.52516 15 5.5 15C4.11929 15 3 13.8807 3 12.5C3 12.1448 3.07407 11.8069 3.2076 11.501C3.59316 10.6175 4.47447 10 5.5 10C6.52515 10 7.40619 10.617 7.79197 11.5L11.5 11.5L12.6664 10.25L8.49996 10.25C7.81664 9.34027 6.72814 8.75 5.5 8.75C4.02153 8.75 2.7429 9.6056 2.13223 10.8487Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Serverless.displayName = 'Serverless';
+Serverless.isGlyph = true;
+Serverless.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Serverless;

package/src/generated/ShardedCluster.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 74ede6f0e61bd4be3479218ee09e9446
+ */
+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 ShardedClusterProps extends LGGlyph.ComponentProps {}
+
+const ShardedCluster = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ShardedClusterProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'ShardedCluster', {
+    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="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;
+ShardedCluster.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default ShardedCluster;