@laerdal/life-react-components 1.2.2-dev.7 → 1.2.2-dev.8

package/dist/umd/Banners/Banner.js

@@ -321,6 +321,7 @@
   };
 
   Banner.propTypes = {
+    size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
     type: _propTypes2.default.string,
     link: _propTypes2.default.string,
     linkText: _propTypes2.default.string,

package/dist/umd/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","size","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {Size} from '../types';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ type?: string }>`\n  display: contents;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ type?: string }>`\n  display: contents;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/umd/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["homeIcon","homeLabel","homeUrl","items","marginRight","size","Size","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","COLORS","primary_700","primary_800","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","LastBreadcrumbItem","label","Breadcrumb","history","dropdownItems","x","value","displayLabel","navigate","links","chevronSize","url"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["homeIcon","homeLabel","homeUrl","items","marginRight","size","Size","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","COLORS","primary_700","primary_800","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","LastBreadcrumbItem","label","Breadcrumb","history","dropdownItems","x","value","displayLabel","navigate","links","chevronSize","url"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/umd/Button/BackButton.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../types", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../types"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.types, global.SystemIcons, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _types, _SystemIcons, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -148,7 +148,7 @@
   background-color: transparent;
   cursor: pointer;
 
-  ${props => props.size === _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600) : (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)};
+  ${props => props.size === 'XSmall' ? (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600) : (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)};
   font-feature-settings: 'liga' off;
 
   & > .button-content {
@@ -202,7 +202,7 @@
   const BackButton = _ref => {
     let {
       children,
-      size = _types.Size.Small
+      size = 'Small'
     } = _ref,
         props = _objectWithoutProperties(_ref, _excluded);
 
@@ -211,11 +211,12 @@
     }), /*#__PURE__*/React.createElement("div", {
       className: 'button-content'
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
-      size: size === _types.Size.XSmall ? '20' : '24'
+      size: size === 'XSmall' ? '20' : '24'
     })), /*#__PURE__*/React.createElement("label", null, children)));
   };
 
   BackButton.propTypes = {
+    size: _propTypes2.default.oneOf(['Small', 'XSmall']).isRequired,
     disabled: _propTypes2.default.bool
   };
   exports.default = BackButton;

package/dist/umd/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","Size","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","disabled","BackButton","size","Small"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,MAAAA,GAA6BE,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAzEJ,WAA6BE,CAA7BF,GAA+FK,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;AAC/K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AA7DA,CAAA;;AAoEA,QAAME,UAAoD,GAAG,IAAA,IAA+C;AAAA,QAA9C;AAAA,MAAA,QAAA;AAAYC,MAAAA,IAAI,GAAGZ,YAAKa;AAAxB,QAA8C,IAAA;AAAA,QAAZd,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC1G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEa;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAKZ,YAATY,MAAAA,GAAAA,IAAAA,GAA8B;AAAnD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAFEF,IAAAA,Q;;oBAeF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}
+{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","size","disabled","BackButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAA0BC,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAtEH,WAA0BC,CAA1BD,GAA4FI,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;AAC5K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AA7DA,CAAA;;AAoEA,QAAMG,UAAoD,GAAG,IAAA,IAA4C;AAAA,QAA3C;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAG;AAAnB,QAA2C,IAAA;AAAA,QAAZV,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AACvG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEU;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAJA,QAAAA,GAAAA,IAAAA,GAA2B;AAAhD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAHEA,IAAAA,I,6BAAM,O,EAAU,Q;AAChBC,IAAAA,Q;;oBAeF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: 'Small' | 'XSmall';\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = 'Small', ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === 'XSmall' ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}

package/dist/umd/Button/__tests__/BackButton.test.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "../index", "../../types", "jest-styled-components"], factory);
+    define(["react", "@testing-library/react", "../index", "jest-styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../types"), require("jest-styled-components"));
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("jest-styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global.index, global.types, global.jestStyledComponents);
+    factory(global.react, global.react, global.index, global.jestStyledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _index, _types) {
+})(this, function (_react, _react3, _index) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -26,14 +26,14 @@
       const {
         queryByText
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
-        size: _types.Size.Small
+        size: 'Small'
       }, "Back Button"));
       expect(queryByText('Back Button')).toBeDefined();
     });
     it('should call action on click', function () {
       const clickMock = jest.fn(() => {});
       const component = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
-        size: _types.Size.Small,
+        size: 'Small',
         onClick: clickMock
       }, "Back Button"));
       (0, _react3.act)(() => {
@@ -44,7 +44,7 @@
     it('should not call action on click when disabled', function () {
       const clickMock = jest.fn(() => {});
       const component = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
-        size: _types.Size.Small,
+        size: 'Small',
         disabled: true,
         onClick: clickMock
       }, "Back Button"));

package/dist/umd/Button/__tests__/BackButton.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["describe","it","queryByText","render","Size","Small","expect","clickMock","jest","component","act"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,gBAAA,EAAmB,MAAM;AAC/BC,IAAAA,EAAE,CAAA,2BAAA,EAA8B,YAAY;AAC1C,YAAM;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAKC;AAAvB,OAAA,EAA7B,aAA6B,CAAPF,CAAtB;AACAG,MAAAA,MAAM,CAACJ,WAAW,CAAlBI,aAAkB,CAAZ,CAANA,CAAAA,WAAAA;AAFFL,KAAE,CAAFA;AAIAA,IAAAA,EAAE,CAAA,6BAAA,EAAgC,YAAY;AAC5C,YAAMM,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGN,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAlB,KAAA;AAA8B,QAAA,OAAO,EAAEG;AAAvC,OAAA,EAAzB,aAAyB,CAAPJ,CAAlB;AACAO,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,UAAAA;AANFL,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,+CAAA,EAAkD,YAAY;AAC9D,YAAMM,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGN,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAlB,KAAA;AAA8B,QAAA,QAAQ,EAAtC,IAAA;AAA8C,QAAA,OAAO,EAAEG;AAAvD,OAAA,EAAzB,aAAyB,CAAPJ,CAAlB;AACAO,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,eAAAA,CAAAA,CAAAA;AANFL,KAAE,CAAFA;AAbFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport {act, render} from '@testing-library/react';\nimport {BackButton} from '../index';\nimport {Size} from '../../types'\nimport 'jest-styled-components';\n\ndescribe('<BackButton />', () => {\n  it('should render back button', function () {\n    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);\n    expect(queryByText('Back Button')).toBeDefined();\n  });\n  it('should call action on click', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalled();\n  });\n  it('should not call action on click when disabled', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalledTimes(0);\n  });\n\n});\n"],"file":"BackButton.test.js"}
+{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["describe","it","queryByText","render","expect","clickMock","jest","component","act"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKAA,EAAAA,QAAQ,CAAA,gBAAA,EAAmB,MAAM;AAC/BC,IAAAA,EAAE,CAAA,2BAAA,EAA8B,YAAY;AAC1C,YAAM;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAE;AAAlB,OAAA,EAA7B,aAA6B,CAAPA,CAAtB;AACAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,aAAkB,CAAZ,CAANA,CAAAA,WAAAA;AAFFH,KAAE,CAAFA;AAIAA,IAAAA,EAAE,CAAA,6BAAA,EAAgC,YAAY;AAC5C,YAAMI,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGJ,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAhB,OAAA;AAA2B,QAAA,OAAO,EAAEE;AAApC,OAAA,EAAzB,aAAyB,CAAPF,CAAlB;AACAK,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,UAAAA;AANFH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,+CAAA,EAAkD,YAAY;AAC9D,YAAMI,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGJ,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAhB,OAAA;AAA2B,QAAA,QAAQ,EAAnC,IAAA;AAA2C,QAAA,OAAO,EAAEE;AAApD,OAAA,EAAzB,aAAyB,CAAPF,CAAlB;AACAK,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,eAAAA,CAAAA,CAAAA;AANFH,KAAE,CAAFA;AAbFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport {act, render} from '@testing-library/react';\nimport {BackButton} from '../index';\nimport 'jest-styled-components';\n\ndescribe('<BackButton />', () => {\n  it('should render back button', function () {\n    const {queryByText} = render(<BackButton size={'Small'}>Back Button</BackButton>);\n    expect(queryByText('Back Button')).toBeDefined();\n  });\n  it('should call action on click', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={'Small'} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalled();\n  });\n  it('should not call action on click when disabled', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={'Small'} disabled={true} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalledTimes(0);\n  });\n\n});\n"],"file":"BackButton.test.js"}

package/dist/umd/Chips/ActionChip.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/index", "../types", "./ChipStyles"], factory);
+    define(["exports", "react", "../icons/index", "./ChipStyles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/index"), require("../types"), require("./ChipStyles"));
+    factory(exports, require("react"), require("../icons/index"), require("./ChipStyles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.index, global.types, global.ChipStyles);
+    factory(mod.exports, global.react, global.index, global.ChipStyles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _index, _types, _ChipStyles) {
+})(this, function (exports, _react, _index, _ChipStyles) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -99,9 +99,9 @@
     const getIconSize = () => {
       let iconSize; // Calculate correct icon size
 
-      if (size === _types.Size.Small) {
+      if (size === 'small') {
         iconSize = '16px';
-      } else if (size === _types.Size.Medium) {
+      } else if (size === 'medium') {
         iconSize = '20px';
       } else {
         iconSize = '24px';

package/dist/umd/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["ActionChip","onClick","getIconSize","size","Size","iconSize","disabled","variant","icon","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAuCC,IAAAA;AAAvC,GAAD,KAAuE;AAClI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAEF,IAAK,IAAGG,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAAtF,EAAA;AAAqG,MAAA,OAAO,EAAE,MAAMP,OAAO;AAA3H,KAAA,EAEGO,IAAI,IAAI,mBAAA,IAAA,EAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBO,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFX,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}
+{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["ActionChip","onClick","getIconSize","size","iconSize","disabled","variant","icon","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAuCC,IAAAA;AAAvC,GAAD,KAAuE;AAClI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAR,OAAA,EAAsB;AACpBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAID,IAAI,KAAR,QAAA,EAAuB;AAC5BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAED,IAAK,IAAGE,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAAtF,EAAA;AAAqG,MAAA,OAAO,EAAE,MAAMN,OAAO;AAA3H,KAAA,EAEGM,IAAI,IAAI,mBAAA,IAAA,EAAY;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBM,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFX,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === 'small') {\n       iconSize = '16px';\n     } else if (size === 'medium') {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}

package/dist/umd/Chips/ChipInput.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./index", "../types", "../InputFields/styling", "../styles", "../icons/systemicons/SystemIcons", "./ChipStyles"], factory);
+    define(["exports", "react", "./index", "../InputFields/styling", "../styles", "../icons/systemicons/SystemIcons", "./ChipStyles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./index"), require("../types"), require("../InputFields/styling"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("./ChipStyles"));
+    factory(exports, require("react"), require("./index"), require("../InputFields/styling"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("./ChipStyles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.index, global.types, global.styling, global.styles, global.SystemIcons, global.ChipStyles);
+    factory(mod.exports, global.react, global.index, global.styling, global.styles, global.SystemIcons, global.ChipStyles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _index, _types, _styling, _styles, _SystemIcons, _ChipStyles) {
+})(this, function (exports, _react, _index, _styling, _styles, _SystemIcons, _ChipStyles) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -179,7 +179,7 @@
       className: validationType
     }, chips.map((chip, index) => /*#__PURE__*/React.createElement(_index.InputChip, {
       icon: icon,
-      size: _types.Size.Medium,
+      size: "medium",
       variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
       text: chip,
       onRemove: () => onRemoveChip(index),

package/dist/umd/Chips/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","onValueChange","React","setChips","onAddChip","event","chipInput","setValue","onRemoveChip","newChips","onEditChip","required","validationType","Size","variants","index","placeholder","chips","input","validationMessage","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size={Size.Medium}\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}
+{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","onValueChange","React","setChips","onAddChip","event","chipInput","setValue","onRemoveChip","newChips","onEditChip","required","validationType","variants","index","placeholder","chips","input","validationMessage","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size=\"medium\"\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}

package/dist/umd/Chips/FilterChip.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../types", "../icons/index", "./ChipStyles"], factory);
+    define(["exports", "react", "../icons/index", "./ChipStyles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../types"), require("../icons/index"), require("./ChipStyles"));
+    factory(exports, require("react"), require("../icons/index"), require("./ChipStyles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.types, global.index, global.ChipStyles);
+    factory(mod.exports, global.react, global.index, global.ChipStyles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _types, _index, _ChipStyles) {
+})(this, function (exports, _react, _index, _ChipStyles) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -99,9 +99,9 @@
     const getIconSize = () => {
       let iconSize; // Calculate correct icon size
 
-      if (size === _types.Size.Small) {
+      if (size === 'small') {
         iconSize = '16px';
-      } else if (size === _types.Size.Medium) {
+      } else if (size === 'medium') {
         iconSize = '20px';
       } else {
         iconSize = '24px';

package/dist/umd/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","onClick","getIconSize","size","Size","iconSize","disabled","selected","variant","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAIC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAA2CC,IAAAA;AAA3C,GAAD,KAA2E;AACtI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAEF,IAAK,IAAGG,QAAQ,GAAA,UAAA,GAAgBC,QAAQ,GAAA,oBAAA,GAA0BC,OAArG,EAAA;AAAgH,MAAA,OAAO,EAAE,MAAMP,OAAO;AAAtI,KAAA,EAEGM,QAAQ,IAAI,mBAAA,aAAA,CAAoB;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBO,MAAAA,SAAS,EAAE;AAAlC,KAApB,CAFf,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}
+{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","onClick","getIconSize","size","iconSize","disabled","selected","variant","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAA2CC,IAAAA;AAA3C,GAAD,KAA2E;AACtI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAR,OAAA,EAAsB;AACpBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAID,IAAI,KAAR,QAAA,EAAuB;AAC5BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAED,IAAK,IAAGE,QAAQ,GAAA,UAAA,GAAgBC,QAAQ,GAAA,oBAAA,GAA0BC,OAArG,EAAA;AAAgH,MAAA,OAAO,EAAE,MAAMN,OAAO;AAAtI,KAAA,EAEGK,QAAQ,IAAI,mBAAA,aAAA,CAAoB;AAAEH,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBM,MAAAA,SAAS,EAAE;AAAlC,KAApB,CAFf,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === 'small') {\n       iconSize = '16px';\n     } else if (size === 'medium') {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}

package/dist/umd/Chips/InputChip.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/index", "../Button/index", "../types", "./ChipStyles"], factory);
+    define(["exports", "react", "../icons/index", "../Button/index", "./ChipStyles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/index"), require("../Button/index"), require("../types"), require("./ChipStyles"));
+    factory(exports, require("react"), require("../icons/index"), require("../Button/index"), require("./ChipStyles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.index, global.index, global.types, global.ChipStyles);
+    factory(mod.exports, global.react, global.index, global.index, global.ChipStyles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _index, _index2, _types, _ChipStyles) {
+})(this, function (exports, _react, _index, _index2, _ChipStyles) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -100,9 +100,9 @@
     const getIconSize = () => {
       let iconSize; // Calculate correct icon size
 
-      if (size === _types.Size.Small) {
+      if (size === 'small') {
         iconSize = '16px';
-      } else if (size === _types.Size.Medium) {
+      } else if (size === 'medium') {
         iconSize = '20px';
       } else {
         iconSize = '24px';

package/dist/umd/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","onRemove","getIconSize","size","Size","iconSize","onRemoveClick","event","disabled","variant","icon","onClick","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,SAAkD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAgDC,IAAAA;AAAhD,GAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACF;AACA;AACA;;;AACE,UAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,UAAA,KAAA,EAAW;AACTA,QAAAA,KAAK,CAALA,eAAAA;AACD;;AAEDN,MAAAA,QAAQ;AALV,KAAA;AAQA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAe,MAAA,SAAS,EAAG,GAAEE,IAAK,gBAAeK,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAA5F,EAAA;AAA2G,MAAA,OAAO,EAAE,MAAMC,OAAO;AAAjI,KAAA,EAEGF,OAAO,KAAPA,OAAAA,IAAAA,IAAAA,IAA+B,mBAAA,IAAA,EAAY;AAAEN,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBU,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFlC,EAAA,IAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,wBAAwB,EAH1B,IAAA;AAIE,MAAA,MAAM,EAAGL,KAAD,IAA4DD,aAAa,CAJnF,KAImF,CAJnF;AAKE,MAAA,QAAQ,EAAEE;AALZ,KAAA,EAMG,mBAAA,KAAA,CAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBU,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CANH,CARF,CADF,CADF;AAnCF,GAAA;;oBA0DA,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === Size.Small) {\n      iconSize = '16px';\n    } else if (size === Size.Medium) {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","onRemove","getIconSize","size","iconSize","onRemoveClick","event","disabled","variant","icon","onClick","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,SAAkD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAgDC,IAAAA;AAAhD,GAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAR,OAAA,EAAsB;AACpBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAID,IAAI,KAAR,QAAA,EAAuB;AAC5BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACF;AACA;AACA;;;AACE,UAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,UAAA,KAAA,EAAW;AACTA,QAAAA,KAAK,CAALA,eAAAA;AACD;;AAEDL,MAAAA,QAAQ;AALV,KAAA;AAQA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAe,MAAA,SAAS,EAAG,GAAEE,IAAK,gBAAeI,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAA5F,EAAA;AAA2G,MAAA,OAAO,EAAE,MAAMC,OAAO;AAAjI,KAAA,EAEGF,OAAO,KAAPA,OAAAA,IAAAA,IAAAA,IAA+B,mBAAA,IAAA,EAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFlC,EAAA,IAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,wBAAwB,EAH1B,IAAA;AAIE,MAAA,MAAM,EAAGL,KAAD,IAA4DD,aAAa,CAJnF,KAImF,CAJnF;AAKE,MAAA,QAAQ,EAAEE;AALZ,KAAA,EAMG,mBAAA,KAAA,CAAY;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CANH,CARF,CADF,CADF;AAnCF,GAAA;;oBA0DA,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === 'small') {\n      iconSize = '16px';\n    } else if (size === 'medium') {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/umd/Dropdown/BasicDropdown.js

@@ -206,7 +206,7 @@
       tabIndex: disabled || locked ? -1 : 0,
       disabled: disabled || false
     }), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-      size: _types.Size.Small,
+      size: "small",
       color: _styles.COLORS.neutral_600
     }) : null, /*#__PURE__*/React.createElement("div", {
       onClick: () => setIsOpen(!isOpen),
@@ -235,7 +235,7 @@
       },
       focused: focused,
       setFocused: setFocused,
-      size: size ?? _types.Size.Small,
+      size: size == 'medium' ? _types.Size.Medium : _types.Size.Small,
       filter: '',
       hideOnClickOutside: true,
       isOpen: isOpen,
@@ -277,6 +277,7 @@
     isButton: _propTypes2.default.bool,
     activeValidationMessage: _propTypes2.default.string,
     autofilledMessage: _propTypes2.default.string,
+    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string
   };
   exports.default = BasicDropdown;