@laerdal/life-react-components 2.1.0-dev.3 → 2.1.1-dev.2

package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -67,14 +67,14 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
             type = item.type,
             action = item.action,
             rest = (0, _objectWithoutProperties2.default)(item, _excluded);
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+          if (!!profile) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
             onClick: function onClick(e) {
               e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
               item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
             },
             icon: !profile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
             initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
-          }, rest), index);
+          }, rest), index);else return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
         }
       case 'submenu':
         {

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuHeader.cjs","names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentSStyling","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.LARGE} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n      }\n      case 'submenu': {\n        const {placement, type, icon, menu, ...rest} = item;\n\n        return <IconButton key={index}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenuHeader.cjs","names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentSStyling","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.LARGE} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profile)\n          return  <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n        else return <></>\n          \n      }\n      case 'submenu': {\n        const {placement, type, icon, menu, ...rest} = item;\n\n        return <IconButton key={index}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -16,6 +16,7 @@ import { SystemIcons } from '../../icons';
 import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
 import { ProfileButton } from '../../ProfileButton';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
 var MobileMenuHeaderLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
@@ -59,14 +60,14 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
             type = item.type,
             action = item.action,
             rest = _objectWithoutProperties(item, _excluded);
-          return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+          if (!!profile) return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
             onClick: function onClick(e) {
               e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
               item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
             },
             icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
             initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
-          }, rest), index);
+          }, rest), index);else return /*#__PURE__*/_jsx(_Fragment, {});
         }
       case 'submenu':
         {

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuHeader.js","names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.LARGE} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n      }\n      case 'submenu': {\n        const {placement, type, icon, menu, ...rest} = item;\n\n        return <IconButton key={index}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenuHeader.js","names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.LARGE} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profile)\n          return  <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n        else return <></>\n          \n      }\n      case 'submenu': {\n        const {placement, type, icon, menu, ...rest} = item;\n\n        return <IconButton key={index}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/types.d.ts

@@ -59,8 +59,8 @@ export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type'
     placement?: 'left' | 'right';
     action?: (button?: EventTarget) => boolean | void;
 }
-export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
-export declare type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
 export interface MobileNavigationMenuProps {
     label?: string;
     buttons?: MobileMenuButtonTypes[];
@@ -84,7 +84,7 @@ export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSect
     footer?: MenuGroupFooter;
     action?: MenuButton;
 }
-export declare type MenuNavigationItem = {
+export type MenuNavigationItem = {
     icon?: React.ReactNode;
     to: string;
     exact?: boolean;
@@ -101,19 +101,19 @@ export interface MenuNavigationSection<T = MenuNavigationItem> {
     label?: string;
     items: T[];
 }
-export declare type MenuNavigationItemTypeItem = MenuNavigationItem & {
+export type MenuNavigationItemTypeItem = MenuNavigationItem & {
     type?: 'item';
 };
-export declare type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
+export type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
     type: 'group';
     icon?: React.ReactNode;
     pinned?: boolean;
     disabled?: boolean;
 };
-export declare type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
+export type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
     type: 'section';
 };
-export declare type MenuNavigationCustomSubMenu = {
+export type MenuNavigationCustomSubMenu = {
     type: 'custom';
     label?: string;
     buttons?: MobileMenuButtonTypes[];

package/dist/Image/ImageWithFallbacks.d.ts

@@ -5,7 +5,7 @@ export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HT
     alt: string;
     loader: boolean;
 }
-declare type ImageWithFallbacksState = {
+type ImageWithFallbacksState = {
     src: string;
     fallbackIndex: number;
     fallbacks: string[];

package/dist/InputFields/Label.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-declare type LabelProps = {
+type LabelProps = {
     inputId: string;
     text: string;
     size?: Size.Small | Size.Medium;

package/dist/InputFields/QuickSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type QuickSearchProps = {
+type QuickSearchProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-declare type LabelProps = {
+type LabelProps = {
     size?: Size.Small | Size.Medium;
     children?: any;
 };

package/dist/InputFields/SearchBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
-declare type SeachBarProps = {
+type SeachBarProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/components/SearchBarInput.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../../types';
 export declare const Search: import("styled-components").StyledComponent<"input", any, {
     type: "search";
 }, "type">;
-declare type SearchBarInputProps = {
+type SearchBarInputProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/types.d.ts

@@ -1,6 +1,6 @@
 import { Size } from '../types';
 import React from 'react';
-export declare type TextFieldProps = {
+export type TextFieldProps = {
     id: string;
     disabled?: boolean;
     readOnly?: boolean;
@@ -19,7 +19,7 @@ export declare type TextFieldProps = {
     margin?: string;
     note?: TextFieldNote;
 };
-export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
     id: string;
     placeholder: string;
     value?: string;
@@ -33,7 +33,7 @@ export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAr
     note?: TextFieldNote;
     required: boolean;
 };
-export declare type TextFieldNote = {
+export type TextFieldNote = {
     message: string;
     icon: React.ReactNode;
 };

package/dist/List/ListRow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
 import { Size } from '../types';
-declare type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
+type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
     size?: Size;
     variant?: 'normal' | 'overlay';
     icon?: React.ReactNode;

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,5 +1,5 @@
 import { Size } from '../types';
-declare type LoadingIndicatorProps = {
+type LoadingIndicatorProps = {
     id?: string;
     size?: Size.Small | Size.Medium;
     color?: string;

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,5 +1,5 @@
 import { Product } from '../types';
-declare type CardProps = {
+type CardProps = {
     product: Product;
     url?: string;
 };

package/dist/Modals/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const ModalCloseButton: React.FunctionComponent<{
     onClick: () => void;
 }>;
-declare type ModalProps = {
+type ModalProps = {
     children: any;
 };
 declare const Modal: {

package/dist/Modals/ModalContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type ModalContainerProps = {
+type ModalContainerProps = {
     id?: string;
     showModal: boolean;
     closeModal: () => void;
@@ -12,7 +12,7 @@ declare type ModalContainerProps = {
     maxWidth?: string;
     zIndex?: number;
 };
-declare type ModalContainerState = {
+type ModalContainerState = {
     scroll: number;
 };
 declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {

package/dist/Modals/ModalTypes.d.ts

@@ -20,4 +20,4 @@ export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBas
 export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
     text: string;
 }
-export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
+export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/NavItem/NavItem.d.ts

@@ -1,6 +1,6 @@
 import { StyledComponentProps } from 'styled-components';
 import React from 'react';
-export declare type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
+export type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
     as?: AsC | undefined;
     forwardedAs?: FAsC | undefined;
 };

package/dist/Paginator/Paginator.d.ts

@@ -1,4 +1,4 @@
-declare type PaginatorProps = {
+type PaginatorProps = {
     pageCount: number;
     currentPage: number;
     baseUrl: string;

package/dist/Popover/Popover.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Position, Size } from '../types';
-declare type topSectionProps = {
+type topSectionProps = {
     text: string;
     note?: string;
 };
-declare type actionButtonProps = {
+type actionButtonProps = {
     icon: React.ReactNode;
     action: () => void;
     label?: string;
 };
-declare type bottomSectionProps = {
+type bottomSectionProps = {
     iconButtons?: actionButtonProps[];
     textButton?: actionButtonProps;
 };
-declare type PopoverProps = {
+type PopoverProps = {
     size?: Size.Small | Size.Medium | Size.Large;
     topSectionProps?: topSectionProps;
     bottomSectionProps?: bottomSectionProps;

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ProfileButtonProps = {
+export type ProfileButtonProps = {
     portraitSrc?: string;
     icon?: React.ReactNode;
     initials?: string;

package/dist/QuizButton/QuizButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '..';
-declare type QuizButtonProps = {
+type QuizButtonProps = {
     resultType?: 'correct' | 'incorrect' | 'partial';
     text: string;
     onClick?: (arg: any) => void;

package/dist/SideMenu/types.d.ts

@@ -2,13 +2,13 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';
 import { Size } from '../types';
-export declare type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
+export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
     icon: React.ReactNode;
 };
-export declare type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
     label: string;
 };
-export declare type SideMenuItem = Omit<MenuItemProps, 'size'>;
+export type SideMenuItem = Omit<MenuItemProps, 'size'>;
 export interface SideMenuHeader {
     actions?: SideMenuAction[];
     label?: string;

package/dist/SkipToContent/SkipToContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type SkipToContentProps = {
+export type SkipToContentProps = {
     children: React.ReactNode;
 };
 declare const SkipToContent: React.FunctionComponent<SkipToContentProps>;

package/dist/Table/TableTypes.d.ts

@@ -51,10 +51,10 @@ export interface TableColumn {
     customContent?: (row: any, key: string) => any;
     sortable?: boolean;
 }
-export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export declare type TableJustification = 'right' | 'left' | 'center';
-export declare type TableSortingDirection = 'asc' | 'desc';
-export declare type TableLayout = 'auto' | 'fixed';
+export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
+export type TableJustification = 'right' | 'left' | 'center';
+export type TableSortingDirection = 'asc' | 'desc';
+export type TableLayout = 'auto' | 'fixed';
 export interface TablePagination {
     from: number;
     to: number;

package/dist/Tabs/TabLink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
-declare type TabLinkProps = {
+type TabLinkProps = {
     disabled?: boolean;
     requiredLine: string;
     optionalLine?: string;

package/dist/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type TabsProps = {
+type TabsProps = {
     children?: any;
     size: Size;
 };

package/dist/Tag/Tag.cjs

@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
 var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,yoBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,iLAO/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,oOAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACiB,IAAI,8BAA8B;AAAA,GAKxD,IAAAC,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEL,IAAI,QAAJA,IAAI;IAAA,oBAAEM,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3ER,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEM,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEN;IAAI,EACS,EAEjBK,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEN,IAAK;MAAA,UACjDK;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLL,IAAI;EACJM,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFF,GAAG;AAAA"}
+{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,yoBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,iLAO/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,oOAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACiB,IAAI,8BAA8B;AAAA,GAKxD,IAAAC,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEL,IAAI,QAAJA,IAAI;IAAA,oBAAEM,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3ER,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEM,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEN;IAAI,EACS,EAEjBK,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEN,IAAK;MAAA,UACjDK;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLL,IAAI;EACJM,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFF,GAAG;AAAA"}

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
-declare type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
+type TagProps = React.HTMLAttributes<HTMLDivElement> & {
     label?: string;
     icon?: React.ReactNode;
     variant?: TagVariants;

package/dist/Tag/Tag.js

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
 var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));