fix(Menu): Adding dark & contrast themes for Menu toolbar

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix doc layout for Menu component @codepretty ([#695] https://github.com/stardust-ui/react/pull/695)
 - Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689)
 - Fix handling changes of `renderer` prop in `Provider` @layershifter ([#702](https://github.com/stardust-ui/react/pull/702))
+- Fix Menu themeing styles @codepretty ([#708](https://github.com/stardust-ui/react/pull/708))
 - Prevent infinite rendering loop start on `Popup` open @kuzhelov ([#705](https://github.com/stardust-ui/react/pull/705))
 
 <!--------------------------------[ v0.16.1 ]------------------------------- -->

docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx

@@ -3,31 +3,64 @@ import { Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react
 
 const items = [
   {
-    key: 'cloud',
+    key: 'format',
     icon: {
-      name: 'cloud',
-      circular: true,
-      size: 'small',
+      name: 'format',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
-    'aria-label': 'Cloud Tool',
+    'aria-label': 'Format Tool',
   },
   {
-    key: 'clock',
+    key: 'paperclip',
     icon: {
-      name: 'clock',
-      circular: true,
-      size: 'small',
+      name: 'paperclip',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
-    'aria-label': 'Clock Tool',
+    'aria-label': 'Paperclip Tool',
+  },
+  {
+    key: 'emoji',
+    icon: {
+      name: 'emoji',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Emoji Tool',
+  },
+  {
+    key: 'giphy',
+    icon: {
+      name: 'giphy',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Giphy tool',
+  },
+  {
+    key: 'sticker',
+    icon: {
+      name: 'sticker',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Sticker Tool',
+  },
+  {
+    key: 'meetup',
+    icon: {
+      name: 'video-camera-emphasis',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Meetup Tool',
   },
   {
     key: 'book',
     icon: {
       name: 'book',
-      circular: true,
-      size: 'small',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Book Tool',

src/themes/teams-dark/components/Menu/menuVariables.ts

@@ -0,0 +1,9 @@
+export interface MenuVariables {
+  color: string
+}
+
+export default (siteVars: any): MenuVariables => {
+  return {
+    color: siteVars.white,
+  }
+}

src/themes/teams-high-contrast/componentStyles.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './components/Menu/menuItemStyles'

src/themes/teams-high-contrast/componentVariables.ts

@@ -4,8 +4,7 @@ export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
-
 export { default as Input } from './components/Input/inputVariables'
-
+export { default as Menu } from './components/Menu/menuVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'

src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts

@@ -0,0 +1,41 @@
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { MenuVariables } from './menuVariables'
+import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
+
+type MenuItemPropsAndState = MenuItemProps & MenuItemState
+
+const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
+  wrapper: ({ props, variables }): ICSSInJSStyle => {
+    const { iconOnly, isFromKeyboard } = props
+
+    return {
+      ...(iconOnly && {
+        // focus styles
+        ...(isFromKeyboard && {
+          color: variables.activeColor,
+          background: variables.activeBackgroundColor,
+        }),
+
+        // hover styles
+        ':hover': {
+          color: variables.activeColor,
+          background: variables.activeBackgroundColor,
+        },
+      }),
+    }
+  },
+
+  root: ({ props }): ICSSInJSStyle => {
+    const { iconOnly, isFromKeyboard } = props
+
+    return {
+      // focus styles
+      ...(isFromKeyboard &&
+        iconOnly && {
+          borderColor: 'transparent',
+        }),
+    }
+  },
+}
+
+export default menuItemStyles

src/themes/teams-high-contrast/components/Menu/menuVariables.ts

@@ -0,0 +1,13 @@
+export interface MenuVariables {
+  color: string
+  activeColor: string
+  activeBackgroundColor: string
+}
+
+export default (siteVars: any): MenuVariables => {
+  return {
+    color: siteVars.white,
+    activeColor: siteVars.black,
+    activeBackgroundColor: siteVars.accessibleYellow,
+  }
+}

src/themes/teams-high-contrast/index.ts

@@ -1,6 +1,7 @@
 import mergeThemes from '../../lib/mergeThemes'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
+import * as componentStyles from './componentStyles'
 import teams from '../teams'
 
-export default mergeThemes(teams, { siteVariables, componentVariables })
+export default mergeThemes(teams, { siteVariables, componentVariables, componentStyles })

src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx

@@ -15,4 +15,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'paperclip',
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-line.tsx

@@ -17,4 +17,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'video-camera-emphasis',
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts

@@ -260,7 +260,6 @@ import processedIcons_callmissed from './icons-call-missed'
 import processedIcons_callmicrophoneunmuting from './icons-call-microphone-unmuting'
 import processedIcons_callmicrophoneofffilled from './icons-call-microphone-off-filled'
 import processedIcons_callmeetupline from './icons-call-meetup-line'
-import processedIcons_callmeetupfilled from './icons-call-meetup-filled'
 import processedIcons_callincomingvideo from './icons-call-incoming-video'
 import processedIcons_callhold from './icons-call-hold'
 import processedIcons_callend from './icons-call-end'
@@ -564,7 +563,6 @@ export default {
   processedIcons_callmicrophoneunmuting,
   processedIcons_callmicrophoneofffilled,
   processedIcons_callmeetupline,
-  processedIcons_callmeetupfilled,
   processedIcons_callincomingvideo,
   processedIcons_callhold,
   processedIcons_callend,

src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts

@@ -261,7 +261,6 @@ import processedIcons_callmissed from './icons-call-missed'
 import processedIcons_callmicrophoneunmuting from './icons-call-microphone-unmuting'
 import processedIcons_callmicrophoneofffilled from './icons-call-microphone-off-filled'
 import processedIcons_callmeetupline from './icons-call-meetup-line'
-import processedIcons_callmeetupfilled from './icons-call-meetup-filled'
 import processedIcons_callincomingvideo from './icons-call-incoming-video'
 import processedIcons_callhold from './icons-call-hold'
 import processedIcons_callend from './icons-call-end'
@@ -565,7 +564,6 @@ export default {
   processedIcons_callmicrophoneunmuting,
   processedIcons_callmicrophoneofffilled,
   processedIcons_callmeetupline,
-  processedIcons_callmeetupfilled,
   processedIcons_callincomingvideo,
   processedIcons_callhold,
   processedIcons_callend,

src/themes/teams/components/Icon/svg/icons/emoji.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { TeamsProcessedSvgIconSpec } from '../types'
 
 export default {
   icon: ({ classes }) => (
     <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
       <g>
-        <g className={classes.outlinePart}>
+        <g className={cx('ui-icon__outline', classes.outlinePart)}>
           <path d="M16 24c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-15c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 11.5c-1.4 0-2.8-.5-3.9-1.6l.7-.7c1.8 1.8 4.6 1.8 6.4 0l.7.7c-1 1-2.5 1.6-3.9 1.6z" />
           <circle cx="13" cy="15" r="1" />
           <circle cx="19" cy="15" r="1" />
         </g>
         <path
-          className={classes.filledPart}
+          className={cx('ui-icon__filled', classes.filledPart)}
           d="M24 16.734a7.069 7.069 0 0 1-.262 1.926A7.464 7.464 0 0 1 23 20.395 7.285 7.285 0 0 1 20.395 23a7.381 7.381 0 0 1-1.734.734 7.036 7.036 0 0 1-1.927.266h-.468a7.031 7.031 0 0 1-1.926-.262A7.381 7.381 0 0 1 12.605 23 7.285 7.285 0 0 1 10 20.395a7.4 7.4 0 0 1-.734-1.734A7.031 7.031 0 0 1 9 16.734v-.468a7.033 7.033 0 0 1 .262-1.926A7.4 7.4 0 0 1 10 12.605 7.285 7.285 0 0 1 12.605 10a7.443 7.443 0 0 1 1.734-.734A7.05 7.05 0 0 1 16.266 9h.469a7.055 7.055 0 0 1 1.926.262 7.443 7.443 0 0 1 1.734.738A7.285 7.285 0 0 1 23 12.605a7.464 7.464 0 0 1 .734 1.734A7.071 7.071 0 0 1 24 16.266v.469zm-3.867 2.438l-.7-.7a4.154 4.154 0 0 1-5.859 0l-.7.7a5.1 5.1 0 0 0 1.664 1.113 5.109 5.109 0 0 0 3.938 0 5.114 5.114 0 0 0 1.657-1.113zM15 15a.984.984 0 0 0-.078-.387 1 1 0 0 0-.535-.535 1 1 0 0 0-.773 0 1 1 0 0 0-.535.535 1 1 0 0 0 0 .773 1 1 0 0 0 .535.535 1 1 0 0 0 .773 0 1 1 0 0 0 .535-.535A.981.981 0 0 0 15 15zm5 0a.984.984 0 0 0-.078-.387 1 1 0 0 0-.535-.535 1 1 0 0 0-.773 0 1 1 0 0 0-.535.535 1 1 0 0 0 0 .773 1 1 0 0 0 .535.535 1 1 0 0 0 .773 0 1 1 0 0 0 .535-.535A.981.981 0 0 0 20 15z"
         />
       </g>

src/themes/teams/components/Icon/svg/icons/format.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { TeamsSvgIconSpec } from '../types'
 
 export default {
   icon: ({ classes }) => (
     <svg viewBox="8 8 16 16" role="presentation" focusable="false" className={classes.svg}>
       <path
-        className={classes.outlinePart}
+        className={cx('ui-icon__outline', classes.outlinePart)}
         d="M15.702 19.727l.785-.785-3.515-10.106a.5.5 0 0 0-.944 0l-4 11.5a.5.5 0 1 0 .944.328L10.247 17h4.506l.95 2.727zM10.595 16l1.905-5.478L14.406 16h-3.811zm12.945-.54a1.578 1.578 0 0 0-2.23 0l-4.565 4.566A1.996 1.996 0 0 0 15 22c0 .551-.448 1-1 1h-2.5a.5.5 0 1 0 0 1H17a1.996 1.996 0 0 0 1.974-1.745l4.566-4.566c.297-.297.46-.692.46-1.114 0-.422-.163-.818-.46-1.115zM17 23h-1.278c.172-.295.278-.634.278-1 0-.551.449-1 1-1s1 .449 1 1-.448 1-1 1zm5.833-6.018l-4.078 4.078a2 2 0 0 0-.815-.815l4.078-4.078a.577.577 0 0 1 .815 0 .571.571 0 0 1 .167.408c0 .154-.06.3-.167.407z"
       />
       <path
-        className={classes.filledPart}
+        className={cx('ui-icon__filled', classes.filledPart)}
         d="M15.702 19.727l.785-.785-3.515-10.106a.5.5 0 0 0-.944 0l-4 11.5a.5.5 0 1 0 .944.328L10.247 17h4.506l.949 2.727zM10.595 16l1.905-5.478L14.406 16h-3.811zm12.945-.54a1.578 1.578 0 0 0-2.23 0l-3.576 3.577a3.061 3.061 0 0 1 2.229 2.229l3.577-3.577c.296-.297.46-.692.46-1.114 0-.422-.164-.818-.46-1.115zM17 20c-1.103 0-2 .897-2 2 0 .551-.448 1-1 1h-2.5a.5.5 0 1 0 0 1H17c1.103 0 2-.897 2-2s-.897-2-2-2z"
       />
     </svg>

src/themes/teams/components/Icon/svg/icons/giphy.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { TeamsSvgIconSpec } from '../types'
 
 export default {
   icon: ({ classes }) => (
     <svg viewBox="8 8 16 16" role="presentation" focusable="false" className={classes.svg}>
-      <g className={classes.outlinePart}>
+      <g className={cx('ui-icon__outline', classes.outlinePart)}>
         <path d="M14.5 19h-1.74a1.967 1.967 0 0 1-1.966-1.967v-1.858c0-1.201.974-2.175 2.175-2.175H14.5v1h-1.527c-.651 0-1.18.528-1.18 1.179v1.854c0 .535.434.967.969.967h.738v-1.5H13v-1h1.5V19zM16.003 13H17v6h-.997zM21.347 14v-1H18.5v6h1.003v-2.518H21v-1h-1.497V14z" />
         <path d="M16 24c-2.09 0-4.123-.21-6.043-.628A2.511 2.511 0 0 1 8 20.926v-9.852c0-1.171.823-2.2 1.957-2.447 3.842-.833 8.244-.833 12.086 0A2.51 2.51 0 0 1 24 11.074v9.852c0 1.17-.823 2.199-1.957 2.446C20.123 23.79 18.09 24 16 24zm0-15c-2.018 0-3.98.204-5.83.606A1.503 1.503 0 0 0 9 11.074v9.852c0 .703.492 1.32 1.17 1.468 3.7.804 7.96.804 11.66 0A1.504 1.504 0 0 0 23 20.926v-9.852c0-.704-.492-1.321-1.17-1.468A27.541 27.541 0 0 0 16 9z" />
       </g>
-      <g className={classes.filledPart}>
+      <g className={cx('ui-icon__filled', classes.filledPart)}>
         <path d="M22.043 8.627c-3.842-.833-8.244-.833-12.086 0A2.51 2.51 0 0 0 8 11.074v9.852c0 1.17.823 2.199 1.957 2.446C11.877 23.79 13.91 24 16 24s4.123-.21 6.043-.628A2.511 2.511 0 0 0 24 20.926v-9.852c0-1.171-.823-2.2-1.957-2.447zM14.5 14h-1.527c-.651 0-1.179.528-1.179 1.179v1.854c0 .535.433.967.968.967h.738v-1.5H13v-1h1.5V19h-1.74a1.967 1.967 0 0 1-1.966-1.967v-1.858c0-1.201.974-2.175 2.175-2.175H14.5v1zm2.5 5h-.997v-6H17v6zm4.347-5h-1.844v1.482H21v1h-1.497V19H18.5v-6h2.847v1z" />
       </g>
     </svg>

src/themes/teams/components/Icon/svg/icons/index.ts

@@ -39,6 +39,7 @@ import micOff from './micOff'
 import more from './more'
 import numberList from './numberList'
 import outdent from './outdent'
+import paperclip from './paperclip'
 import participantRemove from './participantRemove'
 import quote from './quote'
 import redbang from './redbang'
@@ -58,6 +59,7 @@ import translation from './translation'
 import trashCan from './trashCan'
 import underline from './underline'
 import undo from './undo'
+import videoCameraEmphasis from './videoCameraEmphasis'
 
 export default {
   add,
@@ -98,6 +100,7 @@ export default {
   more,
   'number-list': numberList,
   outdent,
+  paperclip,
   'participant-add': addParticipant,
   'participant-remove': participantRemove,
   quote,
@@ -118,4 +121,5 @@ export default {
   'team-create': teamCreate,
   underline,
   undo,
+  'video-camera-emphasis': videoCameraEmphasis,
 } as { [iconName: string]: TeamsSvgIconSpec }

src/themes/teams/components/Icon/svg/icons/paperclip.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path
+        className={cx('ui-icon__outline', classes.outlinePart)}
+        d="M20.793 16.836l-4.772 4.718c-.61.61-1.422.946-2.288.946s-1.677-.336-2.287-.946a3.242 3.242 0 0 1 .01-4.585l6.702-6.96c.656-.656 1.806-.657 2.462 0a1.749 1.749 0 0 1-.015 2.478l-5.773 6.03a.5.5 0 0 0 .7.715l5.795-6.054a2.744 2.744 0 0 0 0-3.876c-.517-.517-1.205-.802-1.938-.802s-1.421.285-1.938.802l-6.712 6.97a4.24 4.24 0 0 0 0 5.99 4.223 4.223 0 0 0 2.995 1.238 4.218 4.218 0 0 0 2.992-1.237l4.77-4.716a.5.5 0 1 0-.703-.71z"
+      />
+      <path
+        className={cx('ui-icon__filled', classes.filledPart)}
+        d="M20.441 16.48l-4.774 4.72c-1.066 1.067-2.801 1.067-3.868 0s-1.066-2.801.02-3.888l6.692-6.95c.468-.468 1.288-.468 1.755 0 .484.484.484 1.271-.03 1.787l-5.753 6.01a1 1 0 1 0 1.398 1.43l2.445-2.392 3.354-3.665a3.245 3.245 0 0 0 0-4.584C21.07 8.337 20.256 8 19.39 8s-1.68.337-2.292.948l-6.712 6.97a4.74 4.74 0 0 0 0 6.697A4.722 4.722 0 0 0 13.735 24c1.211 0 2.422-.46 3.343-1.381l4.77-4.716a1 1 0 0 0-1.407-1.422z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/icons/sticker.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { TeamsProcessedSvgIconSpec } from '../types'
 
 export default {
   icon: ({ classes }) => (
     <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
       <g>
-        <g className={classes.outlinePart}>
+        <g className={cx('ui-icon__outline', classes.outlinePart)}>
           <path d="M14.793 14.011a.717.717 0 0 1-.066.3.87.87 0 0 1-.43.43.714.714 0 0 1-.602 0 .852.852 0 0 1-.43-.43.702.702 0 0 1 0-.6.912.912 0 0 1 .176-.259.83.83 0 0 1 .254-.18.715.715 0 0 1 .602 0c.096.045.18.105.254.18.072.076.13.162.176.258a.72.72 0 0 1 .066.301zM18.793 14.011a.717.717 0 0 1-.066.3.847.847 0 0 1-.43.43.71.71 0 0 1-.602 0 .854.854 0 0 1-.43-.43.717.717 0 0 1 0-.6.912.912 0 0 1 .176-.259.84.84 0 0 1 .254-.18.718.718 0 0 1 .602 0 .84.84 0 0 1 .254.18.916.916 0 0 1 .176.258.72.72 0 0 1 .066.301z" />
           <path d="M21.5 9h-11C9.673 9 9 9.673 9 10.5v11c0 .827.673 1.5 1.5 1.5h6.586c.394 0 .781-.16 1.06-.44l4.414-4.414c.28-.279.44-.666.44-1.06V10.5c0-.827-.673-1.5-1.5-1.5zM10 21.5v-11a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V17h-5v1.35a3.42 3.42 0 0 1-1.004.143c-.38 0-.726-.05-1.035-.149a3.958 3.958 0 0 1-.844-.375 4.699 4.699 0 0 1-.68-.488c-.2-.175-.378-.337-.535-.488s-.293-.277-.41-.375-.22-.149-.309-.149a.533.533 0 0 0-.226.051c-.073.034-.137.078-.192.133a.6.6 0 0 0-.175.418c0 .063.01.121.03.176.021.055.045.108.071.16.192.36.451.68.777.96.326.282.685.521 1.079.72.392.198.801.348 1.226.453.424.104.832.156 1.223.156A5.03 5.03 0 0 0 17 19.581V22h-6.5a.5.5 0 0 1-.5-.5zm8-.207V18h3.293L18 21.293z" />
         </g>
-        <g className={classes.filledPart}>
+        <g className={cx('ui-icon__filled', classes.filledPart)}>
           <path d="M17 19.58a5.03 5.03 0 0 1-1.004.116c-.39 0-.799-.052-1.223-.156a5.773 5.773 0 0 1-1.226-.453 5.246 5.246 0 0 1-1.078-.72 3.351 3.351 0 0 1-.778-.96 1.555 1.555 0 0 1-.07-.16.476.476 0 0 1-.031-.176.589.589 0 0 1 .176-.418.666.666 0 0 1 .191-.133.532.532 0 0 1 .227-.05c.088 0 .191.049.308.148s.254.223.41.375.335.313.536.488c.2.175.427.337.68.488.251.152.533.277.843.375.31.099.655.149 1.035.149A3.42 3.42 0 0 0 17 18.35V17h6v-6.5c0-.827-.673-1.5-1.5-1.5h-11C9.673 9 9 9.673 9 10.5v11c0 .827.673 1.5 1.5 1.5H17v-3.42zm.266-5.87a.912.912 0 0 1 .175-.258.84.84 0 0 1 .254-.18.718.718 0 0 1 .602 0 .84.84 0 0 1 .254.18.916.916 0 0 1 .176.258.72.72 0 0 1 0 .602.847.847 0 0 1-.43.43.71.71 0 0 1-.602 0 .854.854 0 0 1-.43-.43.717.717 0 0 1 0-.602zm-4 0a.912.912 0 0 1 .175-.258.83.83 0 0 1 .254-.18.715.715 0 0 1 .602 0c.096.045.18.105.254.18.072.076.13.162.176.258a.72.72 0 0 1 0 .602.87.87 0 0 1-.43.43.714.714 0 0 1-.602 0 .852.852 0 0 1-.43-.43.702.702 0 0 1 0-.602z" />
           <path d="M18 18v4.68c.05-.038.102-.075.146-.12l4.415-4.414c.044-.044.08-.096.12-.146H18z" />
         </g>

src/themes/teams/components/Icon/svg/icons/videoCameraEmphasis.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <g>
+        <path
+          className={cx('ui-icon__outline', classes.outlinePart)}
+          d="M23.7 12.041a.5.5 0 0 0-.542.1l-2.532 2.417a1.989 1.989 0 0 0 0 2.89l2.532 2.417A.5.5 0 0 0 23.5 20a.491.491 0 0 0 .2-.041.5.5 0 0 0 .3-.459v-7a.5.5 0 0 0-.3-.459zm-.7 6.291l-1.687-1.61a.986.986 0 0 1 0-1.442L23 13.668zm-4 .168v-5a1.5 1.5 0 0 0-1.5-1.5H9.756a1.508 1.508 0 0 0-1.471 1.188 14.01 14.01 0 0 0 0 5.625A1.508 1.508 0 0 0 9.756 20H17.5a1.5 1.5 0 0 0 1.5-1.5zm-9.736.106a13.007 13.007 0 0 1 0-5.211.5.5 0 0 1 .492-.395H17.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H9.756a.5.5 0 0 1-.492-.394zM19.482 22.066a7.076 7.076 0 0 1-6.965 0 .5.5 0 0 0-.5.867 7.962 7.962 0 0 0 7.961 0 .5.5 0 0 0-.5-.867zM12.518 9.934a7.076 7.076 0 0 1 6.965 0 .5.5 0 0 0 .5-.867 7.962 7.962 0 0 0-7.961 0 .5.5 0 0 0 .5.867z"
+        />
+        <path
+          className={cx('ui-icon__filled', classes.filledPart)}
+          d="M19.482 22.066a7.076 7.076 0 0 1-6.965 0 .5.5 0 0 0-.5.867 7.962 7.962 0 0 0 7.961 0 .5.5 0 0 0-.5-.867zM12.518 9.934a7.076 7.076 0 0 1 6.965 0 .5.5 0 0 0 .5-.867 7.962 7.962 0 0 0-7.961 0 .5.5 0 0 0 .5.867zM23.7 12.041a.5.5 0 0 0-.542.1l-2.532 2.417a1.989 1.989 0 0 0 0 2.89l2.532 2.417A.5.5 0 0 0 23.5 20a.491.491 0 0 0 .2-.041.5.5 0 0 0 .3-.459v-7a.5.5 0 0 0-.3-.459zM19 18.5v-5a1.5 1.5 0 0 0-1.5-1.5H9.756a1.508 1.508 0 0 0-1.471 1.188 14.01 14.01 0 0 0 0 5.625A1.508 1.508 0 0 0 9.756 20H17.5a1.5 1.5 0 0 0 1.5-1.5z"
+        />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec