@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map(badgeChild => {\n          const id = uuid();\n          return (\n            <span key={id} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChildren","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","jsxs","jsx","Breakpoint","IconSize","AvatarSize","badgeChild","id","uuid","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map(badgeChild => {\n          const id = uuid();\n          return (\n            <span key={id} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["cn"],"mappings":";;;;;;;;;;;;AAuBO,MAAM,mBAAmB,CAC9B,SACA,iBACA,WACA,MACA,aACA,SAC4B;AACxB,MAAA,YAA6B,SAAS,UAAU,GAAG;AAC9C,WAAA,MAAM,aAAa,SAAS;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,MAAI,SAAS;AACX,+BACG,YAAW,EAAA,iBAAkC,aAA0B,MAAY,WAAsB,MACvG,UACH,SAAA;AAAA,EAAA;AAGN;AAgCO,MAAM,cAA8B,CAAC,UAAU,aAAa,UAAU;;AACvE,MAAA;AACJ,QAAM,gBAAkD,CAAC;AACzD,QAAM,yBAAoE,CAAC;AAC3E,QAAM,iBAA2B,CAAC;AAClC,QAAM,oBAAuC,CAAC;AAExC,QAAA,SAAS,QAAQ,UAAU,CAAS,UAAA;AACxC,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;AAChD,QAAA,YAAyB,OAAO,MAAM,GAAG;AAC7B,oBAAA;AAAA,IACL,WAAA,YAAiC,OAAO,cAAc,GAAG;AAClE,6BAAuB,KAAK,KAAK;AAAA,IACxB,WAAA,YAAwB,OAAO,KAAK,GAAG;AAChD,oBAAc,KAAK,KAAK;AAAA,IAAA,WACf,OAAO,UAAU,UAAU;AACpC,qBAAe,KAAK,KAAK;AAAA,IAAA,OACpB;AACL,wBAAkB,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9B,CACD;AAIK,QAAA,qBACJ,gBAAgB,UAAa,uBAAuB,SAAS,KAAM,kBAAkB,UAAa,eAAe,SAAS;AAC5H,QAAM,+BACJ,kBAAkB,WAAW,KAC5B,wBAAwB,kBAAkB,CAAC,CAAC,KAAK,SAAO,6BAAkB,CAAC,MAAnB,mBAAsB,UAAtB,mBAA6B,cAAa;AAEjG,MAAA,cAAc,sBAAsB,8BAA8B;AACpE,WAAO,EAAE,aAAa,wBAAwB,eAAe,gBAAgB,kBAAkB;AAAA,EAAA;AAGjG,MAAI,wBAAwB,kBAAkB,CAAC,CAAC,GAAG;AACjD,WAAO,aAAY,6BAAkB,CAAC,MAAnB,mBAAsB,UAAtB,mBAA6B,UAAU,IAAI;AAAA,EAAA;AAElE;AAEO,MAAM,aAA6B,CAAS,UAAA;AAC3C,QAAA,EAAE,YAAY,IAAI,kBAAkB,MAAM,aAAa,UAAU,MAAM,WAAW,MAAM,OAAW,IAAA;AACzG,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,SAAS,WAAW,CAAC,EAAE,eAAe;AAC3D,QAAA,kBAAkB,OAAO,aAAa;AACtC,QAAA,iBAAiB,YAAY,QAAQ;AAC3C,QAAM,mBACJ,iDAAgB,iBACf,iDAAgB,2BAA0B,eAAe,uBAAuB,SAAS,MACzF,iDAAgB,uBAAqB,iDAAgB,kBAAkB,UAAS;AAEnF,QAAM,mBAAmBA;AAAAA,IACvB,OAAO,aAAa;AAAA,IACpB;AAAA,MACE,CAAC,OAAO,kCAAkC,CAAC,GAAG,CAAC;AAAA,MAC/C,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,IAC9C;AAAA,IACA;AAAA,EACF;AACA,QAAM,eAAeA;AAAAA,IACnB,OAAO,oBAAoB;AAAA,IAC3B;AAAA,MACE,CAAC,OAAO,wCAAwC,CAAC,GAAG;AAAA,IACtD;AAAA,IACA,CAAC,mBAAmB,QAAQ,OAAO,uBAAuB,IAAI,EAAE;AAAA,EAClE;AACA,QAAM,iBAAiBA,WAAG,OAAO,sBAAsB,GAAG,CAAC,mBAAmB,QAAQ,OAAO,yBAAyB,IAAI,EAAE,GAAG;AAAA,IAC7H,CAAC,OAAO,0CAA0C,CAAC,GAAG;AAAA,EAAA,CACvD;AACD,QAAM,iBAAiBA,WAAG,OAAO,sBAAsB,GAAG;AAAA,IACxD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,IAC1C,CAAC,OAAO,+BAA+B,CAAC,GAAG,CAAC;AAAA,IAC5C,CAAC,OAAO,+BAA+B,CAAC,GAAG,EAAC,iDAAgB,gBAAe,CAAC;AAAA,EAAA,CAC7E;AACD,QAAM,cAAcA;AAAAA,IAClB,OAAO,mBAAmB;AAAA,IAC1B,CAAC,mBAAmB,SAAS,SAAS,YAAY,SAAS,YAAY,OAAO,2CAA2C,IAAI,EAAE;AAAA,IAC/H;AAAA,MACE,CAAC,OAAO,uCAAuC,CAAC,GAAG;AAAA,MACnD,CAAC,OAAO,wCAAwC,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EAEzD;AACA,QAAM,gBAAgBA;AAAAA,IACpB,OAAO,qBAAqB;AAAA,IAC5B,CAAC,mBAAmB,SAAS,SAAS,YAAY,SAAS,YAAY,OAAO,6CAA6C,IAAI,EAAE;AAAA,IACjI;AAAA,MACE,CAAC,OAAO,yCAAyC,CAAC,GAAG;AAAA,MACrD,CAAC,OAAO,0CAA0C,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EAE3D;AACA,QAAM,YAAY;AAClB,SACG,qBAAA,QAAA,EAAK,eAAa,QAAQ,WAAW,kBACnC,UAAA;AAAA,IAAA,sBAAsB,QACpB,oBAAA,QAAA,EAAK,WAAW,aACd,UAAA,MAAM,aAAa,MAAM;AAAA,MACxB,MAAM,eAAe,WAAW,KAAK,SAAS,SAAS,SAAS;AAAA,MAChE;AAAA,IACD,CAAA,GACH;AAAA,IAED,SAAS,YAAW,iDAAgB,gBACnC,oBAAC,UAAK,WAAW,eAAgB,UAAM,MAAA,aAAa,eAAe,aAAa,EAAE,MAAM,WAAW,OAAQ,CAAA,GAAE;AAAA,IAE/G,qBAAC,QAAK,EAAA,WAAW,gBACd,UAAA;AAAA,MAAgB,iDAAA;AAAA,MAChB,CAAC,EAAC,iDAAgB,eAAe,WAChC,oBAAC,WAAU,EAAA,WAAW,OAAO,oBAAoB,GAAI,UAAA,eAAe,eAAe,CAAA;AAAA,MAEpF,iDAAgB;AAAA,IAAA,GACnB;AAAA,KAEC,iDAAgB,kBACf,eAAe,cAAc,IAAI,CAAc,eAAA;AAC7C,YAAM,KAAK,KAAK;AAChB,aACG,oBAAA,QAAA,EAAc,WAAW,cACvB,wBADQ,EAEX;AAAA,IAAA,CAEH;AAAA,IACF,sBAAsB,eACpB,oBAAA,QAAA,EAAK,WAAW,gBACf,UAAA,oBAAC,MAAK,EAAA,SAAS,aAAa,WAAsB,MAAM,SAAS,QAAQ,EAC3E,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,WAAW,cAAc;"}

package/ListHeaderText.js

@@ -1,35 +1,39 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import t from "classnames";
-import { S as u } from "./StatusDot.js";
-import e from "./components/ListHeader/styles.module.scss";
-const N = (p) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { S as StatusDot } from "./StatusDot.js";
+import styles from "./components/ListHeader/styles.module.scss";
+const ListHeaderText = (props) => {
   const {
-    firstText: l,
-    firstTextEmphasised: d = !1,
-    secondText: a = void 0,
-    secondTextEmphasised: m = !1,
-    subText: n = !1,
-    statusDotVariant: r,
-    className: o = "",
-    testId: c,
-    titleHtmlMarkup: x = "span"
-  } = p, T = t(o, e["text-wrapper"], {
-    [e["text-wrapper--sub-level"]]: n
-  }), h = t({
-    [e["text-wrapper__text--emphasised"]]: d
-  }), f = t({
-    [e["text-wrapper__text--emphasised"]]: m
+    firstText,
+    firstTextEmphasised = false,
+    secondText = void 0,
+    secondTextEmphasised = false,
+    subText = false,
+    statusDotVariant,
+    className = "",
+    testId,
+    titleHtmlMarkup = "span"
+  } = props;
+  const headerTextWrapperClasses = classNames(className, styles["text-wrapper"], {
+    [styles["text-wrapper--sub-level"]]: subText
   });
-  return /* @__PURE__ */ i("span", { "data-testid": c, className: T, children: [
-    r !== void 0 && /* @__PURE__ */ s("span", { children: /* @__PURE__ */ s(u, { text: "", variant: r }) }),
-    /* @__PURE__ */ i(x, { className: e["list-header__title"], children: [
-      /* @__PURE__ */ s("span", { className: h, children: l }),
-      a && /* @__PURE__ */ s("span", { className: f, children: a })
+  const firstHeaderTextSegmentClasses = classNames({
+    [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised
+  });
+  const secondHeaderTextSegmentClasses = classNames({
+    [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised
+  });
+  const CustomTag = titleHtmlMarkup;
+  return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: headerTextWrapperClasses, children: [
+    statusDotVariant !== void 0 && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(StatusDot, { text: "", variant: statusDotVariant }) }),
+    /* @__PURE__ */ jsxs(CustomTag, { className: styles["list-header__title"], children: [
+      /* @__PURE__ */ jsx("span", { className: firstHeaderTextSegmentClasses, children: firstText }),
+      secondText && /* @__PURE__ */ jsx("span", { className: secondHeaderTextSegmentClasses, children: secondText })
     ] })
   ] });
 };
-N.displayName = "ListHeaderText";
+ListHeaderText.displayName = "ListHeaderText";
 export {
-  N as L
+  ListHeaderText as L
 };
 //# sourceMappingURL=ListHeaderText.js.map

package/ListHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.FC<ListHeaderTextProps>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </span>\n  );\n};\n\nListHeaderText.displayName = 'ListHeaderText';\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","props","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","jsxs","jsx","StatusDot"],"mappings":";;;;AA+BO,MAAMA,IAAqC,CAASC,MAAA;AACnD,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,sBAAAC,IAAuB;AAAA,IACvB,SAAAC,IAAU;AAAA,IACV,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,EAChB,IAAAT,GAEEU,IAA2BC,EAAGJ,GAAWK,EAAO,cAAc,GAAG;AAAA,IACrE,CAACA,EAAO,yBAAyB,CAAC,GAAGP;AAAA,EAAA,CACtC,GACKQ,IAAgCF,EAAG;AAAA,IACvC,CAACC,EAAO,gCAAgC,CAAC,GAAGV;AAAA,EAAA,CAC7C,GACKY,IAAiCH,EAAG;AAAA,IACxC,CAACC,EAAO,gCAAgC,CAAC,GAAGR;AAAA,EAAA,CAC7C;AAGD,SACG,gBAAAW,EAAA,QAAA,EAAK,eAAaP,GAAQ,WAAWE,GACnC,UAAA;AAAA,IAAqBJ,MAAA,4BACnB,QACC,EAAA,UAAA,gBAAAU,EAACC,KAAU,MAAM,IAAI,SAASX,EAAA,CAAkB,EAClD,CAAA;AAAA,IAED,gBAAAS,EATaN,GASb,EAAU,WAAWG,EAAO,oBAAoB,GAC/C,UAAA;AAAA,MAAC,gBAAAI,EAAA,QAAA,EAAK,WAAWH,GAAgC,UAAUZ,GAAA;AAAA,MAC1DE,KAAc,gBAAAa,EAAC,QAAK,EAAA,WAAWF,GAAiC,UAAWX,GAAA;AAAA,IAAA,GAC9E;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAJ,EAAe,cAAc;"}
+{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.FC<ListHeaderTextProps>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </span>\n  );\n};\n\nListHeaderText.displayName = 'ListHeaderText';\n\nexport default ListHeaderText;\n"],"names":["cn"],"mappings":";;;;AA+BO,MAAM,iBAAqC,CAAS,UAAA;AACnD,QAAA;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,UAAU;AAAA,IACV;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,EAAA,IAChB;AAEJ,QAAM,2BAA2BA,WAAG,WAAW,OAAO,cAAc,GAAG;AAAA,IACrE,CAAC,OAAO,yBAAyB,CAAC,GAAG;AAAA,EAAA,CACtC;AACD,QAAM,gCAAgCA,WAAG;AAAA,IACvC,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,EAAA,CAC7C;AACD,QAAM,iCAAiCA,WAAG;AAAA,IACxC,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,EAAA,CAC7C;AACD,QAAM,YAAY;AAElB,SACG,qBAAA,QAAA,EAAK,eAAa,QAAQ,WAAW,0BACnC,UAAA;AAAA,IAAqB,qBAAA,8BACnB,QACC,EAAA,UAAA,oBAAC,aAAU,MAAM,IAAI,SAAS,iBAAA,CAAkB,EAClD,CAAA;AAAA,IAED,qBAAA,WAAA,EAAU,WAAW,OAAO,oBAAoB,GAC/C,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAK,WAAW,+BAAgC,UAAU,WAAA;AAAA,MAC1D,cAAc,oBAAC,QAAK,EAAA,WAAW,gCAAiC,UAAW,WAAA,CAAA;AAAA,IAAA,EAC9E,CAAA;AAAA,EAAA,GACF;AAEJ;AAEA,eAAe,cAAc;"}

package/MaxCharacters.js

@@ -1,15 +1,17 @@
-import { jsx as n } from "react/jsx-runtime";
-import l from "classnames";
-import { FormOnColor as p } from "./constants.js";
-import r from "./components/MaxCharacters/styles.module.scss";
-const h = ({ maxCharacters: a, maxText: o, length: s, onColor: e, maxWidth: c }) => {
-  const t = s / a, i = l(r["max-characters"], {
-    [r["max-characters--on-dark"]]: e === p.ondark,
-    [r["max-characters--invalid"]]: t > 1
-  }), m = t > 0.95 ? "polite" : "off";
-  return /* @__PURE__ */ n("div", { "aria-live": m, "aria-atomic": "true", className: i, style: { maxWidth: c }, children: `${s}/${a} ${o || "tegn"}` });
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { FormOnColor } from "./constants.js";
+import styles from "./components/MaxCharacters/styles.module.scss";
+const MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
+  const progress = length / maxCharacters;
+  const counterTextClass = classNames(styles["max-characters"], {
+    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
+    [styles[`max-characters--invalid`]]: progress > 1
+  });
+  const ariaLevel = progress > 0.95 ? "polite" : "off";
+  return /* @__PURE__ */ jsx("div", { "aria-live": ariaLevel, "aria-atomic": "true", className: counterTextClass, style: { maxWidth }, children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}` });
 };
 export {
-  h as M
+  MaxCharacters as M
 };
 //# sourceMappingURL=MaxCharacters.js.map

package/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","onColor","maxWidth","progress","counterTextClass","classNames","styles","FormOnColor","ariaLevel","jsx"],"mappings":";;;;AAqBM,MAAAA,IAA8C,CAAC,EAAE,eAAAC,GAAe,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,UAAAC,QAAe;AAC7G,QAAMC,IAAWH,IAASF,GAEpBM,IAAmBC,EAAWC,EAAO,gBAAgB,GAAG;AAAA,IAC5D,CAACA,EAAO,yBAAyB,CAAC,GAAGL,MAAYM,EAAY;AAAA,IAC7D,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAW;AAAA,EAAA,CACjD,GAEKK,IAAYL,IAAW,OAAO,WAAW;AAG7C,SAAA,gBAAAM,EAAC,SAAI,aAAWD,GAAW,eAAa,QAAQ,WAAWJ,GAAkB,OAAO,EAAE,UAAAF,KACnF,UAAA,GAAGF,CAAM,IAAIF,CAAa,IAAIC,KAAoB,MAAM,GAC3D,CAAA;AAEJ;"}
+{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":[],"mappings":";;;;AAqBM,MAAA,gBAA8C,CAAC,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;AAC7G,QAAM,WAAW,SAAS;AAE1B,QAAM,mBAAmB,WAAW,OAAO,gBAAgB,GAAG;AAAA,IAC5D,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,YAAY;AAAA,IAC7D,CAAC,OAAO,yBAAyB,CAAC,GAAG,WAAW;AAAA,EAAA,CACjD;AAEK,QAAA,YAAY,WAAW,OAAO,WAAW;AAG7C,SAAA,oBAAC,SAAI,aAAW,WAAW,eAAa,QAAQ,WAAW,kBAAkB,OAAO,EAAE,YACnF,UAAA,GAAG,MAAM,IAAI,aAAa,IAAI,UAAU,UAAU,MAAM,IAC3D;AAEJ;"}

package/NotificationBadge.js

@@ -1,68 +1,68 @@
-import { jsx as n } from "react/jsx-runtime";
-import { palette as r } from "./theme/palette.js";
-import { I as s } from "./Icon.js";
-import l from "./components/Icons/CheckFill.js";
-import m from "./components/Icons/ErrorSignFill.js";
-import f from "./components/Icons/InfoSignFill.js";
-import v from "./components/Icons/TriangleX.js";
-const w = (a) => {
-  const { variant: t, size: o, className: e = "", testId: i, isHovered: c = !1 } = a;
-  switch (t) {
+import { jsx } from "react/jsx-runtime";
+import { palette } from "./theme/palette.js";
+import { I as Icon } from "./Icon.js";
+import CheckFill from "./components/Icons/CheckFill.js";
+import ErrorSignFill from "./components/Icons/ErrorSignFill.js";
+import InfoSignFill from "./components/Icons/InfoSignFill.js";
+import TriangleX from "./components/Icons/TriangleX.js";
+const NotificationBadge = (props) => {
+  const { variant, size, className = "", testId, isHovered = false } = props;
+  switch (variant) {
     case "info":
-      return /* @__PURE__ */ n(
-        s,
+      return /* @__PURE__ */ jsx(
+        Icon,
         {
-          svgIcon: f,
-          color: r.blueberry700,
-          hoverColor: r.blueberry700,
-          size: o,
-          className: e,
-          testId: i,
-          isHovered: c
+          svgIcon: InfoSignFill,
+          color: palette.blueberry700,
+          hoverColor: palette.blueberry700,
+          size,
+          className,
+          testId,
+          isHovered
         }
       );
     case "warn":
-      return /* @__PURE__ */ n(
-        s,
+      return /* @__PURE__ */ jsx(
+        Icon,
         {
-          svgIcon: m,
-          color: r.banana700,
-          hoverColor: r.banana700,
-          size: o,
-          className: e,
-          testId: i,
-          isHovered: c
+          svgIcon: ErrorSignFill,
+          color: palette.banana700,
+          hoverColor: palette.banana700,
+          size,
+          className,
+          testId,
+          isHovered
         }
       );
     case "error":
-      return /* @__PURE__ */ n(
-        s,
+      return /* @__PURE__ */ jsx(
+        Icon,
         {
-          svgIcon: v,
-          color: r.cherry700,
-          hoverColor: r.cherry700,
-          size: o,
-          className: e,
-          testId: i,
-          isHovered: c
+          svgIcon: TriangleX,
+          color: palette.cherry700,
+          hoverColor: palette.cherry700,
+          size,
+          className,
+          testId,
+          isHovered
         }
       );
     case "success":
-      return /* @__PURE__ */ n(
-        s,
+      return /* @__PURE__ */ jsx(
+        Icon,
         {
-          svgIcon: l,
-          color: r.kiwi900,
-          hoverColor: r.kiwi900,
-          size: o,
-          className: e,
-          testId: i,
-          isHovered: c
+          svgIcon: CheckFill,
+          color: palette.kiwi900,
+          hoverColor: palette.kiwi900,
+          size,
+          className,
+          testId,
+          isHovered
         }
       );
   }
 };
 export {
-  w as N
+  NotificationBadge as N
 };
 //# sourceMappingURL=NotificationBadge.js.map

package/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana700}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":["NotificationBadge","props","variant","size","className","testId","isHovered","jsx","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill"],"mappings":";;;;;;;AAyBM,MAAAA,IAAoB,CAACC,MAAqD;AACxE,QAAA,EAAE,SAAAC,GAAS,MAAAC,GAAM,WAAAC,IAAY,IAAI,QAAAC,GAAQ,WAAAC,IAAY,GAAU,IAAAL;AACrE,UAAQC,GAAS;AAAA,IACf,KAAK;AAED,aAAA,gBAAAK;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASC;AAAA,UACT,OAAOC,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASG;AAAA,UACT,OAAOD,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASI;AAAA,UACT,OAAOF,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASK;AAAA,UACT,OAAOH,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,EAGR;AACF;"}
+{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana700}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":[],"mappings":";;;;;;;AAyBM,MAAA,oBAAoB,CAAC,UAAqD;AACxE,QAAA,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;AACrE,UAAQ,SAAS;AAAA,IACf,KAAK;AAED,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,KAAK;AAED,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,KAAK;AAED,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,KAAK;AAED,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,EAAA;AAGR;"}