@laerdal/life-react-components 1.2.2-dev.8 → 1.3.1-dev.1.full

package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","clickMenuAction","navigationOptions","ExtendedMainMenu","React","e","document","list","n","requiredLine","to","disabled","onClick","exact","setEntries"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,QAAQ,GAAGC,2BAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA;AACA;AACA,uBAAuBN,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,aAAaO,oBAAUC,QAAS;AAChC;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AA1BA,CAAA;AA6BA,QAAMC,WAAW,GAAGT,2BAAOU,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,eAAOS,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGZ,2BAAOC,EAAG;AAClC;AACA;AACA;AAHA,CAAA;;AAWA,QAAMc,gBAAgB,GAAG,CAAC;AAAA,IAAA,eAAA;AAAmBD,IAAAA;AAAnB,GAAD,KAAmD;AAC1E,UAAM,CAAA,OAAA,EAAA,UAAA,IAAwBE,KAAK,CAALA,QAAAA,CAA9B,EAA8BA,CAA9B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,YAAMG,IAAI,GAAG,iBAAiB,EAAjB,GAAA,CAAuBC,CAAC,IAAI;AACvC,eAAO;AAAEC,UAAAA,YAAY,EAAED,CAAC,CAAjB,KAAA;AAAyBE,UAAAA,EAAE,EAAEF,CAAC,CAA9B,EAAA;AAAmCG,UAAAA,QAAQ,EAAEH,CAAC,CAA9C,QAAA;AAAyDI,UAAAA,OAAO,EAAEJ,CAAC,CAAnE,OAAA;AAA6EK,UAAAA,KAAK,EAAEL,CAAC,CAACK;AAAtF,SAAP;AADF,OAAa,CAAb;AAGAC,MAAAA,UAAU,CAAVA,IAAU,CAAVA;AAJFV,KAAAA,EAKG,CALHA,iBAKG,CALHA;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAb,eAAA;AAAgC,MAAA,IAAI,EAApC,MAAA;AAA4C,yBAAgB;AAA5D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAc,MAAA,GAAG,EAAjB,cAAA;AAAiC,MAAA,OAAO,EAAxC,OAAA;AAAmD,MAAA,IAAI,EAAC;AAAxD,KAAA,CADF,CADF,CADF,CADF;AAtBF,GAAA;;;AAJEH,IAAAA,e;AACAC,IAAAA,iB;;oBAoCF,gB","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size=\"medium\" />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","clickMenuAction","navigationOptions","ExtendedMainMenu","React","e","document","list","n","requiredLine","to","disabled","onClick","exact","setEntries","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,QAAQ,GAAGC,2BAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA;AACA;AACA,uBAAuBN,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,aAAaO,oBAAUC,QAAS;AAChC;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AA1BA,CAAA;AA6BA,QAAMC,WAAW,GAAGT,2BAAOU,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,eAAOS,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGZ,2BAAOC,EAAG;AAClC;AACA;AACA;AAHA,CAAA;;AAWA,QAAMc,gBAAgB,GAAG,CAAC;AAAA,IAAA,eAAA;AAAmBD,IAAAA;AAAnB,GAAD,KAAmD;AAC1E,UAAM,CAAA,OAAA,EAAA,UAAA,IAAwBE,KAAK,CAALA,QAAAA,CAA9B,EAA8BA,CAA9B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,YAAMG,IAAI,GAAG,iBAAiB,EAAjB,GAAA,CAAuBC,CAAC,IAAI;AACvC,eAAO;AAAEC,UAAAA,YAAY,EAAED,CAAC,CAAjB,KAAA;AAAyBE,UAAAA,EAAE,EAAEF,CAAC,CAA9B,EAAA;AAAmCG,UAAAA,QAAQ,EAAEH,CAAC,CAA9C,QAAA;AAAyDI,UAAAA,OAAO,EAAEJ,CAAC,CAAnE,OAAA;AAA6EK,UAAAA,KAAK,EAAEL,CAAC,CAACK;AAAtF,SAAP;AADF,OAAa,CAAb;AAGAC,MAAAA,UAAU,CAAVA,IAAU,CAAVA;AAJFV,KAAAA,EAKG,CALHA,iBAKG,CALHA;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAb,eAAA;AAAgC,MAAA,IAAI,EAApC,MAAA;AAA4C,yBAAgB;AAA5D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAc,MAAA,GAAG,EAAjB,cAAA;AAAiC,MAAA,OAAO,EAAxC,OAAA;AAAmD,MAAA,IAAI,EAAEW,OAAKC;AAA9D,KAAA,CADF,CADF,CADF,CADF;AAtBF,GAAA;;;AAJEf,IAAAA,e;AACAC,IAAAA,iB;;oBAoCF,gB","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.js"}

package/dist/umd/GlobalNavigationBar/Logo.js

@@ -90,7 +90,7 @@
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${_styles.BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -118,18 +118,18 @@
   const Name = _styledComponents2.default.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || _styles.COLORS.black};
+  border-left: 1px solid ${props => props.$color || _styles.COLORS.black};
   letter-spacing: -0.02em;
 
-  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
-  
+  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
+
   font-weight: 300 !important;
   line-height: 24px !important;
-  
+
   ${_styles.BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
   }
 `;
   const BetaTag = _styledComponents2.default.span`
@@ -140,7 +140,7 @@
   border-left: none;
   border-radius: 2px;
 
-  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white)}
+  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white)}
 `;
 
   const Logo = ({
@@ -161,13 +161,13 @@
           onClick();
         }
       },
-      color: color
+      $color: color
     }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-      color: color,
+      $color: color,
       noSizeChangeOnMobile: noSizeChangeOnMobile || false
     }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
       backgroundColor: betaTagBackgroundColor,
-      color: betaTagColor
+      $color: betaTagColor
     }, "BETA")));
   };
 

package/dist/umd/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","color","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/umd/HyperLink/HyperLink.js

@@ -79,29 +79,80 @@
     };
   }
 
+  const _excluded = ["children", "target", "variant"];
+
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
   const StyledLink = _styledComponents2.default.a`
   ${props => props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 `;
 
-  const HyperLink = ({
-    id,
-    className,
-    variant,
-    href,
-    margin,
-    children,
-    target
-  }) => {
-    return /*#__PURE__*/React.createElement(StyledLink, {
-      id: id,
-      className: className,
+  const HyperLink = _ref => {
+    let {
+      children,
+      target = '_blank',
+      variant = 'default'
+    } = _ref,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
       variant: variant,
-      href: href,
-      target: target || "_blank",
-      rel: "noopener noreferrer",
-      margin: margin
-    }, children);
+      target: target,
+      rel: "noopener noreferrer"
+    }), children);
   };
 
   HyperLink.propTypes = {

package/dist/umd/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAyC,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAkDC,IAAAA;AAAlD,GAAD,KAAuE;AACvH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAY,MAAA,EAAE,EAAd,EAAA;AAAoB,MAAA,SAAS,EAA7B,SAAA;AAA0C,MAAA,OAAO,EAAjD,OAAA;AAA4D,MAAA,IAAI,EAAhE,IAAA;AAAwE,MAAA,MAAM,EAAEA,MAAM,IAAtF,QAAA;AAAoG,MAAA,GAAG,EAAvG,qBAAA;AAA8H,MAAA,MAAM,EAAER;AAAtI,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEC,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,IAAoF;AAAA,QAAnF;AAAA,MAAA,QAAA;AAAYC,MAAAA,MAAM,GAAlB,QAAA;AAA+BN,MAAAA,OAAO,GAAG;AAAzC,QAAmF,IAAA;AAAA,QAA5BJ,KAA4B,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAuB,MAAA,OAAO,EAA9B,OAAA;AAAyC,MAAA,MAAM,EAA/C,MAAA;AAAyD,MAAA,GAAG,EAAC;AAA7D,KAAA,CAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEG,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/umd/InputFields/Checkbox.js

@@ -81,11 +81,9 @@
 
   const StyledCheckBox = _styledComponents2.default.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -96,14 +94,14 @@
     pointer-events: none;
   }
 
-  .icon {
+  .checkbox-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -111,27 +109,36 @@
     }
   }
 
-  .label {
+  .checkbox-label {
     user-select: none;
     cursor: inherit;
   }
 
   &.small {
     ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .checkbox-icon {
       background-color: ${_styles.COLORS.white};
       box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -142,7 +149,7 @@
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .checkbox-icon {
       background-color: ${_styles.COLORS.primary_20};
 
       svg {
@@ -152,7 +159,7 @@
   }
 
   &:not(.disabled):active {
-    .icon {
+    .checkbox-icon {
       background: ${_styles.COLORS.primary_100};
       box-shadow: none;
 
@@ -168,16 +175,16 @@
 
     color: ${_styles.COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .checkbox-icon,
+    .checkbox-label {
       pointer-events: none;
     }
 
-    .icon{
+    .checkbox-icon{
       background-color: ${_styles.COLORS.white};
     }
 
-    .icon svg {
+    .checkbox-icon svg {
       color: ${_styles.COLORS.neutral_300};
     }
   }
@@ -192,7 +199,8 @@
     disabled,
     margin,
     size,
-    semiSelected
+    semiSelected,
+    children
   }, ref) => {
     const onKeyPress = e => {
       if (e.keyCode === 13 && !disabled) {
@@ -223,7 +231,7 @@
       onMouseDown: e => e.preventDefault()
     }, /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: 'icon'
+      className: 'checkbox-icon'
     }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
       size: "24px"
@@ -234,9 +242,12 @@
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
       size: "24px"
     })), label && /*#__PURE__*/React.createElement("label", {
-      className: 'label',
+      className: 'checkbox-label',
+      htmlFor: id
+    }, label), !label && /*#__PURE__*/React.createElement("label", {
+      className: 'checkbox-label',
       htmlFor: id
-    }, label));
+    }, children));
   });
   Checkbox.propTypes = {
     id: _propTypes2.default.string.isRequired,

package/dist/umd/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","children","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/umd/InputFields/Label.js

@@ -151,7 +151,6 @@
   InputLabel.propTypes = {
     inputId: _propTypes2.default.string.isRequired,
     text: _propTypes2.default.string.isRequired,
-    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string
   };
   exports.default = InputLabel;

package/dist/umd/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","size","InputLabel","React","document","setRequired","onTriggerClick","id","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AAZA,CAAA;AAeA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMK,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBJ,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BK,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEN;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMQ,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEL,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGO,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AACAC,IAAAA,I,6BAAO,O,EAAU,Q;AACjBH,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
+{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AAZA,CAAA;AAeA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMI,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBH,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEL;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMO,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AAEAF,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}

package/dist/umd/InputFields/PasswordField.js

@@ -221,7 +221,6 @@
     placeholder: _propTypes2.default.string,
     required: _propTypes2.default.bool,
     readOnly: _propTypes2.default.bool,
-    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string
   };
   exports.default = PasswordField;

package/dist/umd/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden","size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/umd/InputFields/QuickSearch.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Button/Iconbutton", "./styling", "..", "../icons/systemicons/SystemIcons", "./components/SearchBarInput", "./components/SearchField"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../Button/Iconbutton", "./styling", "../types", "..", "../icons/systemicons/SystemIcons", "./components/SearchBarInput", "./components/SearchField"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button/Iconbutton"), require("./styling"), require(".."), require("../icons/systemicons/SystemIcons"), require("./components/SearchBarInput"), require("./components/SearchField"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button/Iconbutton"), require("./styling"), require("../types"), require(".."), require("../icons/systemicons/SystemIcons"), require("./components/SearchBarInput"), require("./components/SearchField"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Iconbutton, global.styling, global._, global.SystemIcons, global.SearchBarInput, global.SearchField);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Iconbutton, global.styling, global.types, global._, global.SystemIcons, global.SearchBarInput, global.SearchField);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Iconbutton, _styling, _, _SystemIcons, _SearchBarInput, _SearchField) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _Iconbutton, _styling, _types, _, _SystemIcons, _SearchBarInput, _SearchField) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -231,7 +231,7 @@
       className: size ? size : '',
       tabIndex: -1
     }, /*#__PURE__*/React.createElement(_.LoadingIndicator, {
-      size: "small",
+      size: _types.Size.Small,
       color: _.COLORS.neutral_600
     })));
   };
@@ -246,7 +246,6 @@
     performSearchLabel: _propTypes2.default.string,
     disabled: _propTypes2.default.bool,
     onKeyDown: _propTypes2.default.func,
-    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string,
     loading: _propTypes2.default.bool
   };

package/dist/umd/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","styled","props","margin","COLORS","white","neutral_600","primary_800","primary_700","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","QuickSearch","searchFieldRef","React","searchFieldInputRef","handleClickOutside","e","searchFieldVisible","setSearchFieldVisible","document","handleKeyDown","event","term"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size=\"small\" color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","styled","props","margin","COLORS","white","neutral_600","primary_800","primary_700","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","loading","QuickSearch","searchFieldRef","React","searchFieldInputRef","handleClickOutside","e","searchFieldVisible","setSearchFieldVisible","document","handleKeyDown","event","size","term","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}