@helsenorge/designsystem-react 13.0.0-workspaces-beta.5 → 13.0.0-workspaces-beta.7

package/lib/components/FavoriteButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["mergedResources: HNDesignsystemFavoriteButton"],"sources":["../../../src/resources/HN.Designsystem.FavoriteButton.nb-NO.json","../../../src/components/FavoriteButton/resourceHelper.ts","../../../src/components/FavoriteButton/StarIcon.tsx","../../../src/components/FavoriteButton/FavoriteButton.tsx","../../../src/components/FavoriteButton/index.ts"],"sourcesContent":["{\n  \"ariaLabel\": \"Favorittmarkering\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FavoriteButton.nb-NO.json';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFavoriteButton => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import styles from './styles.module.scss';\n\nconst normalStroke = 'var(--color-action-graphics-onlight)';\nconst normalFill = 'transparent';\nconst hoverFill = '#126F8721'; // kan ikke bruke transparent token på svg\nconst hoverStroke = 'var(--color-action-graphics-onlight-hover)';\nconst activeStroke = 'var(--core-color-blueberry-800)';\n\nconst fillColor = (isChecked: boolean, isActive: boolean, isHovered: boolean): string => {\n  if (isChecked) {\n    if (isActive) {\n      return activeStroke;\n    } else {\n      if (isHovered) {\n        return hoverStroke;\n      } else {\n        return normalStroke;\n      }\n    }\n  } else {\n    if (isHovered) {\n      return hoverFill;\n    } else {\n      return normalFill;\n    }\n  }\n};\n\nconst strokeColor = (isActive: boolean, isHovered: boolean): string => {\n  if (isActive) {\n    return activeStroke;\n  } else {\n    if (isHovered) {\n      return hoverStroke;\n    } else {\n      return normalStroke;\n    }\n  }\n};\n\nexport const starIconNormalMobile = (isChecked: boolean, isActive: boolean): React.JSX.Element => {\n  return (\n    <>\n      <path\n        d=\"M20.1026 31.1787L13.4007 34.7023C10.833 36.0523 7.83185 33.8719 8.32233 31.0126L9.60261 23.5492L4.17653 18.2675C2.09656 16.2428 3.24317 12.712 6.11581 12.2956L13.5982 11.2112L16.9493 4.42107C18.2332 1.81969 21.9426 1.81969 23.2265 4.42107L26.5776 11.2112L34.06 12.2956C36.9326 12.712 38.0792 16.2428 35.9993 18.2675L30.5732 23.5492L31.852 31.0044C32.3428 33.8651 29.3386 36.0456 26.7708 34.6925L20.1026 31.1787Z\"\n        stroke=\"black\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        className={styles['favoritebutton__star-icon--focus']}\n        display=\"block\"\n      />\n      <path\n        d=\"M20.0961 26.5515L12.6372 30.4731L14.0621 22.1671L8.01953 16.2853L16.3582 15.0768L20.0877 7.52002L23.8171 15.0768L32.1558 16.2853L26.1133 22.1671L27.5381 30.4731L20.0961 26.5515Z\"\n        stroke={strokeColor(isActive, false)}\n        fill={fillColor(isChecked, isActive, false)}\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </>\n  );\n};\n\nexport const starIconHoverMobile = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M22.2128 31.4832L16.2246 36.117C13.9303 37.8924 10.5961 36.2662 10.5826 33.3653L10.5475 25.7929L4.28665 21.5336C1.88672 19.9009 2.40278 16.2246 5.15948 15.3158L12.3399 12.9486L14.461 5.67964C15.2736 2.89484 18.9267 2.2507 20.6428 4.58962L25.1221 10.6947L32.6791 10.4633C35.5804 10.3745 37.3227 13.6526 35.6259 16.0077L31.1994 22.1514L33.7534 29.2712C34.7335 32.0033 32.1536 34.6724 29.3898 33.7857L22.2128 31.4832Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M21.4079 26.8365L14.7433 31.9937L14.7041 23.5664L7.73204 18.8233L15.7342 16.1851L18.0947 8.09555L23.0798 14.8899L31.5016 14.6321L26.5722 21.4738L29.4178 29.4062L21.4079 26.8365Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\nexport const starIconNormalDesktop = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M30.1061 44.1854L20.3139 49.3338C17.7461 50.6838 14.745 48.5034 15.2355 45.6441L17.1061 34.7394L9.17653 27.0207C7.09656 24.9961 8.24318 21.4653 11.1158 21.0489L22.053 19.4638L26.9493 9.54278C28.2331 6.9414 31.9426 6.94139 33.2265 9.54278L38.1227 19.4638L49.06 21.0489C51.9326 21.4653 53.0792 24.9961 50.9993 27.0207L43.0697 34.7394L44.9389 45.6359C45.4296 48.4966 42.4254 50.6772 39.8576 49.324L30.1061 44.1854Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M30.0998 39.4723L19.5927 44.9966L21.5998 33.2961L13.0879 25.0106L24.8343 23.3082L30.0879 12.6632L35.3414 23.3082L47.0879 25.0106L38.576 33.2961L40.5831 44.9966L30.0998 39.4723Z\"\n      stroke={strokeColor(isActive, false)}\n      fill={fillColor(isChecked, isActive, false)}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n\nexport const starIconHoverDesktop = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M33.1609 44.7458L24.4114 51.5164C22.1171 53.2918 18.783 51.6656 18.7695 48.7646L18.7181 37.7007L9.56864 31.4763C7.1687 29.8436 7.68476 26.1672 10.4415 25.2584L20.9373 21.7982L24.0364 11.1776C24.849 8.39281 28.5021 7.74867 30.2182 10.0876L36.7629 19.0077L47.8092 18.6695C50.7105 18.5807 52.4528 21.8588 50.756 24.2138L44.2872 33.1922L48.0201 43.5985C49.0002 46.3306 46.4203 48.9997 43.6565 48.113L33.1609 44.7458Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M32.3991 40.1029L23.0108 47.3678L22.9557 35.4965L13.1343 28.815L24.4067 25.0987L27.732 13.7031L34.7542 23.2741L46.6178 22.9109L39.674 32.5486L43.6823 43.7228L32.3991 40.1029Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n","import React, { AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { starIconHoverDesktop, starIconHoverMobile, starIconNormalDesktop, starIconNormalMobile } from './StarIcon';\nimport { AnalyticsId, HTMLButtonProps, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { isMutableRefObject } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface FavoriteButtonProps extends HTMLButtonProps, AriaAttributes {\n  /**  Determines if the FavoriteButton is checked */\n  checked: boolean;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Function that is called when clicked */\n  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemFavoriteButton>;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const FavoriteButton = React.forwardRef(function FavoriteButtonForwardedRef(\n  props: FavoriteButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement>\n) {\n  const { checked, id, onClick, resources, tabIndex, testId, ...other } = props;\n\n  const buttonWrapperClasses = classNames(styles.favoritebutton);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const breakpoint = useBreakpoint();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFavoriteButton = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: other['aria-label'] || resources?.ariaLabel || defaultResources.ariaLabel,\n  };\n\n  const isMobile = breakpoint <= Breakpoint.sm;\n\n  const starIcon = ((): React.JSX.Element => {\n    if (isMobile) {\n      if (isHovered) {\n        return starIconHoverMobile(checked, isActive);\n      } else {\n        return starIconNormalMobile(checked, isActive);\n      }\n    } else {\n      if (isHovered) {\n        return starIconHoverDesktop(checked, isActive);\n      } else {\n        return starIconNormalDesktop(checked, isActive);\n      }\n    }\n  })();\n\n  return (\n    <button\n      id={id}\n      onClick={onClick}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FavoriteButton}\n      className={buttonWrapperClasses}\n      ref={refObject}\n      tabIndex={tabIndex}\n      role=\"switch\"\n      aria-checked={checked}\n      type=\"button\"\n      aria-label={mergedResources.ariaLabel}\n      {...other}\n    >\n      <svg focusable={false} overflow=\"visible\" role=\"presentation\" viewBox={isMobile ? '0 0 41 41' : '0 0 61 61'} {...other}>\n        {starIcon}\n      </svg>\n    </button>\n  );\n});\n\nFavoriteButton.displayName = 'FavoriteButton';\n\nexport default FavoriteButton;\n","export * from './FavoriteButton';\n\nimport { FavoriteButton } from './FavoriteButton';\nexport default FavoriteButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["mergedResources: HNDesignsystemFavoriteButton"],"sources":["../../../src/resources/HN.Designsystem.FavoriteButton.nb-NO.json","../../../src/components/FavoriteButton/resourceHelper.ts","../../../src/components/FavoriteButton/StarIcon.tsx","../../../src/components/FavoriteButton/FavoriteButton.tsx","../../../src/components/FavoriteButton/index.ts"],"sourcesContent":["{\n  \"ariaLabel\": \"Favorittmarkering\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FavoriteButton.nb-NO.json';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFavoriteButton => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import styles from './styles.module.scss';\n\nconst normalStroke = 'var(--color-action-graphics-onlight)';\nconst normalFill = 'transparent';\nconst hoverFill = '#126F8721'; // kan ikke bruke transparent token på svg\nconst hoverStroke = 'var(--color-action-graphics-onlight-hover)';\nconst activeStroke = 'var(--core-color-blueberry-800)';\n\nconst fillColor = (isChecked: boolean, isActive: boolean, isHovered: boolean): string => {\n  if (isChecked) {\n    if (isActive) {\n      return activeStroke;\n    } else {\n      if (isHovered) {\n        return hoverStroke;\n      } else {\n        return normalStroke;\n      }\n    }\n  } else {\n    if (isHovered) {\n      return hoverFill;\n    } else {\n      return normalFill;\n    }\n  }\n};\n\nconst strokeColor = (isActive: boolean, isHovered: boolean): string => {\n  if (isActive) {\n    return activeStroke;\n  } else {\n    if (isHovered) {\n      return hoverStroke;\n    } else {\n      return normalStroke;\n    }\n  }\n};\n\nexport const starIconNormalMobile = (isChecked: boolean, isActive: boolean): React.JSX.Element => {\n  return (\n    <>\n      <path\n        d=\"M20.1026 31.1787L13.4007 34.7023C10.833 36.0523 7.83185 33.8719 8.32233 31.0126L9.60261 23.5492L4.17653 18.2675C2.09656 16.2428 3.24317 12.712 6.11581 12.2956L13.5982 11.2112L16.9493 4.42107C18.2332 1.81969 21.9426 1.81969 23.2265 4.42107L26.5776 11.2112L34.06 12.2956C36.9326 12.712 38.0792 16.2428 35.9993 18.2675L30.5732 23.5492L31.852 31.0044C32.3428 33.8651 29.3386 36.0456 26.7708 34.6925L20.1026 31.1787Z\"\n        stroke=\"black\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        className={styles['favoritebutton__star-icon--focus']}\n        display=\"block\"\n      />\n      <path\n        d=\"M20.0961 26.5515L12.6372 30.4731L14.0621 22.1671L8.01953 16.2853L16.3582 15.0768L20.0877 7.52002L23.8171 15.0768L32.1558 16.2853L26.1133 22.1671L27.5381 30.4731L20.0961 26.5515Z\"\n        stroke={strokeColor(isActive, false)}\n        fill={fillColor(isChecked, isActive, false)}\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </>\n  );\n};\n\nexport const starIconHoverMobile = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M22.2128 31.4832L16.2246 36.117C13.9303 37.8924 10.5961 36.2662 10.5826 33.3653L10.5475 25.7929L4.28665 21.5336C1.88672 19.9009 2.40278 16.2246 5.15948 15.3158L12.3399 12.9486L14.461 5.67964C15.2736 2.89484 18.9267 2.2507 20.6428 4.58962L25.1221 10.6947L32.6791 10.4633C35.5804 10.3745 37.3227 13.6526 35.6259 16.0077L31.1994 22.1514L33.7534 29.2712C34.7335 32.0033 32.1536 34.6724 29.3898 33.7857L22.2128 31.4832Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M21.4079 26.8365L14.7433 31.9937L14.7041 23.5664L7.73204 18.8233L15.7342 16.1851L18.0947 8.09555L23.0798 14.8899L31.5016 14.6321L26.5722 21.4738L29.4178 29.4062L21.4079 26.8365Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\nexport const starIconNormalDesktop = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M30.1061 44.1854L20.3139 49.3338C17.7461 50.6838 14.745 48.5034 15.2355 45.6441L17.1061 34.7394L9.17653 27.0207C7.09656 24.9961 8.24318 21.4653 11.1158 21.0489L22.053 19.4638L26.9493 9.54278C28.2331 6.9414 31.9426 6.94139 33.2265 9.54278L38.1227 19.4638L49.06 21.0489C51.9326 21.4653 53.0792 24.9961 50.9993 27.0207L43.0697 34.7394L44.9389 45.6359C45.4296 48.4966 42.4254 50.6772 39.8576 49.324L30.1061 44.1854Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M30.0998 39.4723L19.5927 44.9966L21.5998 33.2961L13.0879 25.0106L24.8343 23.3082L30.0879 12.6632L35.3414 23.3082L47.0879 25.0106L38.576 33.2961L40.5831 44.9966L30.0998 39.4723Z\"\n      stroke={strokeColor(isActive, false)}\n      fill={fillColor(isChecked, isActive, false)}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n\nexport const starIconHoverDesktop = (isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    <path\n      d=\"M33.1609 44.7458L24.4114 51.5164C22.1171 53.2918 18.783 51.6656 18.7695 48.7646L18.7181 37.7007L9.56864 31.4763C7.1687 29.8436 7.68476 26.1672 10.4415 25.2584L20.9373 21.7982L24.0364 11.1776C24.849 8.39281 28.5021 7.74867 30.2182 10.0876L36.7629 19.0077L47.8092 18.6695C50.7105 18.5807 52.4528 21.8588 50.756 24.2138L44.2872 33.1922L48.0201 43.5985C49.0002 46.3306 46.4203 48.9997 43.6565 48.113L33.1609 44.7458Z\"\n      stroke=\"black\"\n      fill=\"transparent\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      className={styles['favoritebutton__star-icon--focus']}\n    />\n    <path\n      d=\"M32.3991 40.1029L23.0108 47.3678L22.9557 35.4965L13.1343 28.815L24.4067 25.0987L27.732 13.7031L34.7542 23.2741L46.6178 22.9109L39.674 32.5486L43.6823 43.7228L32.3991 40.1029Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n","import React, { AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { starIconHoverDesktop, starIconHoverMobile, starIconNormalDesktop, starIconNormalMobile } from './StarIcon';\nimport { AnalyticsId, HTMLButtonProps, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { isMutableRefObject } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface FavoriteButtonProps extends HTMLButtonProps, AriaAttributes {\n  /**  Determines if the FavoriteButton is checked */\n  checked: boolean;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Function that is called when clicked */\n  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemFavoriteButton>;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const FavoriteButton = React.forwardRef(function FavoriteButtonForwardedRef(\n  props: FavoriteButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement>\n) {\n  const { checked, id, onClick, resources, tabIndex, testId, ...other } = props;\n\n  const buttonWrapperClasses = classNames(styles.favoritebutton);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const breakpoint = useBreakpoint();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFavoriteButton = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: other['aria-label'] || resources?.ariaLabel || defaultResources.ariaLabel,\n  };\n\n  const isMobile = breakpoint <= Breakpoint.sm;\n\n  const starIcon = ((): React.JSX.Element => {\n    if (isMobile) {\n      if (isHovered) {\n        return starIconHoverMobile(checked, isActive);\n      } else {\n        return starIconNormalMobile(checked, isActive);\n      }\n    } else {\n      if (isHovered) {\n        return starIconHoverDesktop(checked, isActive);\n      } else {\n        return starIconNormalDesktop(checked, isActive);\n      }\n    }\n  })();\n\n  return (\n    <button\n      id={id}\n      onClick={onClick}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FavoriteButton}\n      className={buttonWrapperClasses}\n      ref={refObject}\n      tabIndex={tabIndex}\n      role=\"switch\"\n      aria-checked={checked}\n      type=\"button\"\n      aria-label={mergedResources.ariaLabel}\n      {...other}\n    >\n      <svg focusable={false} overflow=\"visible\" role=\"presentation\" viewBox={isMobile ? '0 0 41 41' : '0 0 61 61'} {...other}>\n        {starIcon}\n      </svg>\n    </button>\n  );\n});\n\nFavoriteButton.displayName = 'FavoriteButton';\n\nexport default FavoriteButton;\n","export * from './FavoriteButton';\n\nimport { FavoriteButton } from './FavoriteButton';\nexport default FavoriteButton;\n"],"mappings":"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"}

package/lib/components/HelpBubble/index.js

@@ -20,7 +20,7 @@ import { t as Close_default } from "../../Close.js";
 import "../../floating-ui.react.js";
 import { n as PopOverVariant, t as PopOver_default } from "../../PopOver.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var HN_Designsystem_HelpBubble_nb_NO_default = { ariaLabel: "Hjelpetekst" };
@@ -41,8 +41,8 @@ var HelpBubble = React.forwardRef((props, ref) => {
 		...resources,
 		ariaLabel: props.ariaLabel ?? resources?.ariaLabel ?? defaultResources.ariaLabel
 	};
-	const helpBubbleClasses = classNames(styles.helpbubble, className);
-	const contentClasses = classNames(styles.helpbubble__content);
+	const helpBubbleClasses = cn(styles.helpbubble, className);
+	const contentClasses = cn(styles.helpbubble__content);
 	const renderLink = () => {
 		if (onLinkClick && linkText) return /* @__PURE__ */ jsx("button", {
 			className: styles.helpbubble__link,

package/lib/components/HelpBubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["mergedResources: HNDesignsystemHelpBubble"],"sources":["../../../src/resources/HN.Designsystem.HelpBubble.nb-NO.json","../../../src/components/HelpBubble/resourceHelper.ts","../../../src/components/HelpBubble/HelpBubble.tsx","../../../src/components/HelpBubble/index.ts"],"sourcesContent":["{\n  \"ariaLabel\": \"Hjelpetekst\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.HelpBubble.nb-NO.json';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemHelpBubble => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Sets aria-label of the bubble. */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. */\n  ariaLabelledById?: string;\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. */\n  noCloseButton?: boolean;\n  /** Visible text on the link. */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemHelpBubble>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    ariaLabelledById,\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    resources,\n    testId,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemHelpBubble = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: props.ariaLabel ?? resources?.ariaLabel ?? defaultResources.ariaLabel,\n  };\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n  const contentClasses = classNames(styles.helpbubble__content);\n\n  const renderLink = (): JSX.Element | undefined => {\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton) {\n      return;\n    }\n    return <Close small color=\"plum\" onClick={onClose} ariaLabel={closeAriaLabel} className={styles.helpbubble__close} />;\n  };\n\n  return (\n    <PopOver\n      ariaLabel={mergedResources.ariaLabel}\n      ariaLabelledById={ariaLabelledById}\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role=\"dialog\"\n      ref={ref}\n      show={showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n","import HelpBubble from './HelpBubble';\nexport * from './HelpBubble';\nexport default HelpBubble;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;ACIA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACMb,MAAa,oBAAoB;AAuCjC,IAAM,aAAa,MAAM,YAA6D,OAAO,QAAQ;CACnG,MAAM,EACJ,kBACA,UACA,YAAY,IACZ,eACA,WAAW,aACX,SACA,YACA,aACA,SACA,gBAEA,YACA,cACA,SACA,eACA,WACA,WACE;CAEJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;AAE5E,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAMA,kBAA4C;EAChD,GAAG;EACH,GAAG;EACH,WAAW,MAAM,aAAa,WAAW,aAAa,iBAAiB;EACxE;CAED,MAAM,oBAAoB,WAAW,OAAO,YAAY,UAAU;CAClE,MAAM,iBAAiB,WAAW,OAAO,oBAAoB;CAE7D,MAAM,mBAA4C;AAChD,MAAI,eAAe,SACjB,QACE,oBAAC,UAAA;GAAO,WAAW,OAAO;GAAkB,SAAS;GAAa,MAAK;aACpE;IACM;WAEF,WAAW,SACpB,QACE,oBAAC,oBAAA;GAAW,MAAM;GAAS,QAAQ;aAChC;IACU;;CAKnB,MAAM,0BAAmD;AACvD,MAAI,cACF;AAEF,SAAO,oBAAC,eAAA;GAAM,OAAA;GAAM,OAAM;GAAO,SAAS;GAAS,WAAW;GAAgB,WAAW,OAAO;IAAqB;;AAGvH,QACE,oBAAC,iBAAA;EACC,WAAW,gBAAgB;EACT;EAClB,IAAI;EACK;EACM;EACf,MAAK;EACA;EACL,MAAM;EACE;YAER,qBAAC,OAAA;GAAI,WAAW;GAAmB,oBAAkB,YAAY;cAC9D,mBAAmB,EACpB,qBAAC,OAAA;IAAI,WAAW;eACb,UACA,YAAY,CAAA;KACT,CAAA;IACF;GACE;EAEZ;AAEF,WAAW,cAAc;ACtIzB,IAAA,qBDwIe"}
+{"version":3,"file":"index.js","names":["mergedResources: HNDesignsystemHelpBubble"],"sources":["../../../src/resources/HN.Designsystem.HelpBubble.nb-NO.json","../../../src/components/HelpBubble/resourceHelper.ts","../../../src/components/HelpBubble/HelpBubble.tsx","../../../src/components/HelpBubble/index.ts"],"sourcesContent":["{\n  \"ariaLabel\": \"Hjelpetekst\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.HelpBubble.nb-NO.json';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemHelpBubble => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Sets aria-label of the bubble. */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. */\n  ariaLabelledById?: string;\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. */\n  noCloseButton?: boolean;\n  /** Visible text on the link. */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemHelpBubble>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    ariaLabelledById,\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    resources,\n    testId,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemHelpBubble = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: props.ariaLabel ?? resources?.ariaLabel ?? defaultResources.ariaLabel,\n  };\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n  const contentClasses = classNames(styles.helpbubble__content);\n\n  const renderLink = (): JSX.Element | undefined => {\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton) {\n      return;\n    }\n    return <Close small color=\"plum\" onClick={onClose} ariaLabel={closeAriaLabel} className={styles.helpbubble__close} />;\n  };\n\n  return (\n    <PopOver\n      ariaLabel={mergedResources.ariaLabel}\n      ariaLabelledById={ariaLabelledById}\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role=\"dialog\"\n      ref={ref}\n      show={showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n","import HelpBubble from './HelpBubble';\nexport * from './HelpBubble';\nexport default HelpBubble;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;ACIA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACMb,MAAa,oBAAoB;AAuCjC,IAAM,aAAa,MAAM,YAA6D,OAAO,QAAQ;CACnG,MAAM,EACJ,kBACA,UACA,YAAY,IACZ,eACA,WAAW,aACX,SACA,YACA,aACA,SACA,gBAEA,YACA,cACA,SACA,eACA,WACA,WACE;CAEJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;AAE5E,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAMA,kBAA4C;EAChD,GAAG;EACH,GAAG;EACH,WAAW,MAAM,aAAa,WAAW,aAAa,iBAAiB;EACxE;CAED,MAAM,oBAAoB,GAAW,OAAO,YAAY,UAAU;CAClE,MAAM,iBAAiB,GAAW,OAAO,oBAAoB;CAE7D,MAAM,mBAA4C;AAChD,MAAI,eAAe,SACjB,QACE,oBAAC,UAAA;GAAO,WAAW,OAAO;GAAkB,SAAS;GAAa,MAAK;aACpE;IACM;WAEF,WAAW,SACpB,QACE,oBAAC,oBAAA;GAAW,MAAM;GAAS,QAAQ;aAChC;IACU;;CAKnB,MAAM,0BAAmD;AACvD,MAAI,cACF;AAEF,SAAO,oBAAC,eAAA;GAAM,OAAA;GAAM,OAAM;GAAO,SAAS;GAAS,WAAW;GAAgB,WAAW,OAAO;IAAqB;;AAGvH,QACE,oBAAC,iBAAA;EACC,WAAW,gBAAgB;EACT;EAClB,IAAI;EACK;EACM;EACf,MAAK;EACA;EACL,MAAM;EACE;YAER,qBAAC,OAAA;GAAI,WAAW;GAAmB,oBAAkB,YAAY;cAC9D,mBAAmB,EACpB,qBAAC,OAAA;IAAI,WAAW;eACb,UACA,YAAY,CAAA;KACT,CAAA;IACF;GACE;EAEZ;AAEF,WAAW,cAAc;ACtIzB,IAAA,qBDwIe"}

package/lib/components/HelpPanel/index.js

@@ -33,12 +33,12 @@ import "../../Title2.js";
 import { t as HighlightPanel_default } from "../../HighlightPanel.js";
 import { t as HandWaving_default } from "../../HandWaving.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var HelpPanel = ({ className, variant = "normal", testId, children, title }) => {
 	return /* @__PURE__ */ jsx(HighlightPanel_default, {
-		className: classNames([styles["help-panel"]], className),
+		className: cn([styles["help-panel"]], className),
 		testId,
 		svgIcon: HandWaving_default,
 		title,

package/lib/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HelpPanel: React.FC<HelpPanelProps>"],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames([styles['help-panel']], className)}\n      testId={testId}\n      svgIcon={HandWaving}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAMA,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;AAC1G,QACE,oBAAC,wBAAA;EACC,WAAW,WAAW,CAAC,OAAO,cAAc,EAAE,UAAU;EAChD;EACR,SAAS;EACF;EACE;EAER;GACc;;AChCrB,IAAA,oBDoCe"}
+{"version":3,"file":"index.js","names":["HelpPanel: React.FC<HelpPanelProps>"],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames([styles['help-panel']], className)}\n      testId={testId}\n      svgIcon={HandWaving}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAMA,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;AAC1G,QACE,oBAAC,wBAAA;EACC,WAAW,GAAW,CAAC,OAAO,cAAc,EAAE,UAAU;EAChD;EACR,SAAS;EACF;EACE;EAER;GACc;;AChCrB,IAAA,oBDoCe"}

package/lib/components/HelpTriggerInline/index.js

@@ -4,15 +4,15 @@ import { n as mergeRefs } from "../../refs.js";
 import { n as getAriaLabelAttributes } from "../../accessibility.js";
 import { n as HelpTriggerIconInternal } from "../../HelpTriggerIcon.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-var HelpTriggerInline = React.forwardRef(({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal",...rest }, ref) => {
+var HelpTriggerInline = React.forwardRef(({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ...rest }, ref) => {
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledById
 	});
-	const helpTriggerInlineStyles = classNames(styles["help-trigger-inline"], className);
+	const helpTriggerInlineStyles = cn(styles["help-trigger-inline"], className);
 	const { refObject, isHovered } = usePseudoClasses(ref, false);
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": ariaLabel,

package/lib/components/HelpTriggerInline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx","../../../src/components/HelpTriggerInline/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerInline = React.forwardRef<HTMLButtonElement, HelpTriggerInlineProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerInline}\n        className={helpTriggerInlineStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-inline__text']}>{children}</span>\n        <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} isHovered={isHovered} />\n      </button>\n    );\n  }\n);\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n","import HelpTriggerInline from './HelpTriggerInline';\nexport * from './HelpTriggerInline';\nexport default HelpTriggerInline;\n"],"mappings":";;;;;;;;;AAsCA,IAAM,oBAAoB,MAAM,YAC7B,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,SAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,0BAA0B,WAAW,OAAO,wBAAwB,UAAU;CACpF,MAAM,EAAE,WAAW,cAAc,iBAAoC,KAA2C,MAAM;AAEtH,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,QAAA;GAAK,WAAW,OAAO;GAA+B;IAAgB,EACvE,oBAAC,yBAAA;GAAgC;GAAQ,MAAM;GAAW,YAAY;GAAmB;IAAa,CAAA;GAC/F;EAGd;AAED,kBAAkB,cAAc;AC5DhC,IAAA,4BD8De"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx","../../../src/components/HelpTriggerInline/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerInline = React.forwardRef<HTMLButtonElement, HelpTriggerInlineProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerInline}\n        className={helpTriggerInlineStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-inline__text']}>{children}</span>\n        <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} isHovered={isHovered} />\n      </button>\n    );\n  }\n);\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n","import HelpTriggerInline from './HelpTriggerInline';\nexport * from './HelpTriggerInline';\nexport default HelpTriggerInline;\n"],"mappings":";;;;;;;;;AAsCA,IAAM,oBAAoB,MAAM,YAC7B,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,0BAA0B,GAAW,OAAO,wBAAwB,UAAU;CACpF,MAAM,EAAE,WAAW,cAAc,iBAAoC,KAA2C,MAAM;AAEtH,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,QAAA;GAAK,WAAW,OAAO;GAA+B;IAAgB,EACvE,oBAAC,yBAAA;GAAgC;GAAQ,MAAM;GAAW,YAAY;GAAmB;IAAa,CAAA;GAC/F;EAGd;AAED,kBAAkB,cAAc;AC5DhC,IAAA,4BD8De"}

package/lib/components/Illustrations/BabyMobile.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as BabyMobileMedium_default } from "../../BabyMobileMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var BabyMobile = ({ size = 512, color,...rest }) => {
+var BabyMobile = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(BabyMobileMedium_default, {

package/lib/components/Illustrations/BabyMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"BabyMobile.js","names":["BabyMobile: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/BabyMobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport BabyMobileMedium from './BabyMobileMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  details1: string;\n  details2: string;\n}\n\nconst BabyMobile: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <BabyMobileMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default BabyMobile;\n"],"mappings":";;;;;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}
+{"version":3,"file":"BabyMobile.js","names":["BabyMobile: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/BabyMobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport BabyMobileMedium from './BabyMobileMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  details1: string;\n  details2: string;\n}\n\nconst BabyMobile: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <BabyMobileMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default BabyMobile;\n"],"mappings":";;;;;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}

package/lib/components/Illustrations/Child.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as ChildMedium_default } from "../../ChildMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var Child = ({ size = 512, color,...rest }) => {
+var Child = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(ChildMedium_default, {

package/lib/components/Illustrations/Child.js.map

@@ -1 +1 @@
-{"version":3,"file":"Child.js","names":["Child: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Child.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport ChildMedium from './ChildMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  body: string;\n  block1: string;\n  block2: string;\n  block3: string;\n  block4: string;\n}\n\nconst Child: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <ChildMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Child;\n"],"mappings":";;;;;;AAeA,IAAMA,SAAyC,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGhF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,qBAAA;GAAmB;GAAO,GAAI;IAAQ;EAEf,CAAC;;AAG1C,IAAA,gBAAe"}
+{"version":3,"file":"Child.js","names":["Child: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Child.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport ChildMedium from './ChildMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  body: string;\n  block1: string;\n  block2: string;\n  block3: string;\n  block4: string;\n}\n\nconst Child: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <ChildMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Child;\n"],"mappings":";;;;;;AAeA,IAAMA,SAAyC,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGhF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,qBAAA;GAAmB;GAAO,GAAI;IAAQ;EAEf,CAAC;;AAG1C,IAAA,gBAAe"}

package/lib/components/Illustrations/Doctor.js

@@ -3,7 +3,7 @@ import { t as DoctorMedium_default } from "../../DoctorMedium.js";
 import { t as DoctorSmall_default } from "../../DoctorSmall.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var Doctor = ({ size = 512, color,...rest }) => {
+var Doctor = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(DoctorMedium_default, {

package/lib/components/Illustrations/Doctor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Doctor.js","names":["Doctor: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Doctor.tsx"],"sourcesContent":["import React from 'react';\n\nimport DoctorMedium from './DoctorMedium';\nimport DoctorSmall from './DoctorSmall';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  shirt: string;\n}\n\nconst Doctor: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <DoctorMedium color={color} {...rest} />;\n  const small = <DoctorSmall color={color} {...rest} />;\n\n  return getIllustration({ size, medium, small });\n};\n\nexport default Doctor;\n"],"mappings":";;;;;AAYA,IAAMA,UAA0C,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAIjF,QAAO,gBAAgB;EAAE;EAAM,QAHhB,oBAAC,sBAAA;GAAoB;GAAO,GAAI;IAAQ;EAGhB,OAFzB,oBAAC,qBAAA;GAAmB;GAAO,GAAI;IAAQ;EAEP,CAAC;;AAGjD,IAAA,iBAAe"}
+{"version":3,"file":"Doctor.js","names":["Doctor: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Doctor.tsx"],"sourcesContent":["import React from 'react';\n\nimport DoctorMedium from './DoctorMedium';\nimport DoctorSmall from './DoctorSmall';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  shirt: string;\n}\n\nconst Doctor: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <DoctorMedium color={color} {...rest} />;\n  const small = <DoctorSmall color={color} {...rest} />;\n\n  return getIllustration({ size, medium, small });\n};\n\nexport default Doctor;\n"],"mappings":";;;;;AAYA,IAAMA,UAA0C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAIjF,QAAO,gBAAgB;EAAE;EAAM,QAHhB,oBAAC,sBAAA;GAAoB;GAAO,GAAI;IAAQ;EAGhB,OAFzB,oBAAC,qBAAA;GAAmB;GAAO,GAAI;IAAQ;EAEP,CAAC;;AAGjD,IAAA,iBAAe"}

package/lib/components/Illustrations/FacialRecognitionFingerprint.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as FacialRecognitionFingerprintMedium_default } from "../../FacialRecognitionFingerprintMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var FacialRecognitionFingerprint = ({ size = 512, color,...rest }) => {
+var FacialRecognitionFingerprint = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(FacialRecognitionFingerprintMedium_default, {

package/lib/components/Illustrations/FacialRecognitionFingerprint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacialRecognitionFingerprint.js","names":["FacialRecognitionFingerprint: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/FacialRecognitionFingerprint.tsx"],"sourcesContent":["import React from 'react';\n\nimport FacialRecognitionFingerprintMedium from './FacialRecognitionFingerprintMedium';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  shirt: string;\n}\n\nconst FacialRecognitionFingerprint: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <FacialRecognitionFingerprintMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default FacialRecognitionFingerprint;\n"],"mappings":";;;;;;AAWA,IAAMA,gCAAgE,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGvG,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,4CAAA;GAA0C;GAAO,GAAI;IAAQ;EAEtC,CAAC;;AAG1C,IAAA,uCAAe"}
+{"version":3,"file":"FacialRecognitionFingerprint.js","names":["FacialRecognitionFingerprint: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/FacialRecognitionFingerprint.tsx"],"sourcesContent":["import React from 'react';\n\nimport FacialRecognitionFingerprintMedium from './FacialRecognitionFingerprintMedium';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  shirt: string;\n}\n\nconst FacialRecognitionFingerprint: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <FacialRecognitionFingerprintMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default FacialRecognitionFingerprint;\n"],"mappings":";;;;;;AAWA,IAAMA,gCAAgE,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGvG,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,4CAAA;GAA0C;GAAO,GAAI;IAAQ;EAEtC,CAAC;;AAG1C,IAAA,uCAAe"}

package/lib/components/Illustrations/GiveBabyFood.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as GiveBabyFoodMedium_default } from "../../GiveBabyFoodMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var GiveBabyFood = ({ size = 512, color,...rest }) => {
+var GiveBabyFood = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(GiveBabyFoodMedium_default, {

package/lib/components/Illustrations/GiveBabyFood.js.map

@@ -1 +1 @@
-{"version":3,"file":"GiveBabyFood.js","names":["GiveBabyFood: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/GiveBabyFood.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport GiveBabyFoodMedium from './GiveBabyFoodMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  skin: string;\n  details: string;\n  chair: string;\n  lines: string;\n}\n\nconst GiveBabyFood: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <GiveBabyFoodMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default GiveBabyFood;\n"],"mappings":";;;;;;AAcA,IAAMA,gBAAgD,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGvF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,4BAAA;GAA0B;GAAO,GAAI;IAAQ;EAEtB,CAAC;;AAG1C,IAAA,uBAAe"}
+{"version":3,"file":"GiveBabyFood.js","names":["GiveBabyFood: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/GiveBabyFood.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport GiveBabyFoodMedium from './GiveBabyFoodMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  skin: string;\n  details: string;\n  chair: string;\n  lines: string;\n}\n\nconst GiveBabyFood: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <GiveBabyFoodMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default GiveBabyFood;\n"],"mappings":";;;;;;AAcA,IAAMA,gBAAgD,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGvF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,4BAAA;GAA0B;GAAO,GAAI;IAAQ;EAEtB,CAAC;;AAG1C,IAAA,uBAAe"}

package/lib/components/Illustrations/HealthcarePersonnel.js

@@ -3,7 +3,7 @@ import { t as HealthcarePersonnelMedium_default } from "../../HealthcarePersonne
 import { t as HealthcarePersonnelSmall_default } from "../../HealthcarePersonnelSmall.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var HealthcarePersonnel = ({ size = 512, color,...rest }) => {
+var HealthcarePersonnel = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(HealthcarePersonnelMedium_default, {

package/lib/components/Illustrations/HealthcarePersonnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HealthcarePersonnel.js","names":["HealthcarePersonnel: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/HealthcarePersonnel.tsx"],"sourcesContent":["import React from 'react';\n\nimport HealthcarePersonnelMedium from './HealthcarePersonnelMedium';\nimport HealthcarePersonnelSmall from './HealthcarePersonnelSmall';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nconst HealthcarePersonnel: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <HealthcarePersonnelMedium color={color} {...rest} />;\n  const small = <HealthcarePersonnelSmall color={color} {...rest} />;\n\n  return getIllustration({ size, medium, small });\n};\n\nexport default HealthcarePersonnel;\n"],"mappings":";;;;;AAOA,IAAMA,uBAAuD,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAI9F,QAAO,gBAAgB;EAAE;EAAM,QAHhB,oBAAC,mCAAA;GAAiC;GAAO,GAAI;IAAQ;EAG7B,OAFzB,oBAAC,kCAAA;GAAgC;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAGjD,IAAA,8BAAe"}
+{"version":3,"file":"HealthcarePersonnel.js","names":["HealthcarePersonnel: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/HealthcarePersonnel.tsx"],"sourcesContent":["import React from 'react';\n\nimport HealthcarePersonnelMedium from './HealthcarePersonnelMedium';\nimport HealthcarePersonnelSmall from './HealthcarePersonnelSmall';\nimport { SvgIllustrationProps } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\n\nconst HealthcarePersonnel: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <HealthcarePersonnelMedium color={color} {...rest} />;\n  const small = <HealthcarePersonnelSmall color={color} {...rest} />;\n\n  return getIllustration({ size, medium, small });\n};\n\nexport default HealthcarePersonnel;\n"],"mappings":";;;;;AAOA,IAAMA,uBAAuD,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAI9F,QAAO,gBAAgB;EAAE;EAAM,QAHhB,oBAAC,mCAAA;GAAiC;GAAO,GAAI;IAAQ;EAG7B,OAFzB,oBAAC,kCAAA;GAAgC;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAGjD,IAAA,8BAAe"}

package/lib/components/Illustrations/ReadLetters.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as ReadLettersMedium_default } from "../../ReadLettersMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var ReadLetters = ({ size = 512, color,...rest }) => {
+var ReadLetters = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(ReadLettersMedium_default, {

package/lib/components/Illustrations/ReadLetters.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadLetters.js","names":["ReadLetters: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/ReadLetters.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport ReadLettersMedium from './ReadLettersMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  letter: string;\n  sweater: string;\n  lines: string;\n}\n\nconst ReadLetters: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <ReadLettersMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default ReadLetters;\n"],"mappings":";;;;;;AAYA,IAAMA,eAA+C,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGtF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,2BAAA;GAAyB;GAAO,GAAI;IAAQ;EAErB,CAAC;;AAG1C,IAAA,sBAAe"}
+{"version":3,"file":"ReadLetters.js","names":["ReadLetters: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/ReadLetters.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport ReadLettersMedium from './ReadLettersMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  letter: string;\n  sweater: string;\n  lines: string;\n}\n\nconst ReadLetters: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <ReadLettersMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default ReadLetters;\n"],"mappings":";;;;;;AAYA,IAAMA,eAA+C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGtF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,2BAAA;GAAyB;GAAO,GAAI;IAAQ;EAErB,CAAC;;AAG1C,IAAA,sBAAe"}

package/lib/components/Illustrations/Stroller.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as StrollerMedium_default } from "../../StrollerMedium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var Stroller = ({ size = 512, color,...rest }) => {
+var Stroller = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(StrollerMedium_default, {

package/lib/components/Illustrations/Stroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stroller.js","names":["Stroller: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Stroller.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport StrollerMedium from './StrollerMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  feet: string;\n  handle: string;\n  stroller1: string;\n  stroller2: string;\n  stroller3: string;\n  wheels: string;\n}\n\nconst Stroller: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <StrollerMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Stroller;\n"],"mappings":";;;;;;AAeA,IAAMA,YAA4C,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGnF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,wBAAA;GAAsB;GAAO,GAAI;IAAQ;EAElB,CAAC;;AAG1C,IAAA,mBAAe"}
+{"version":3,"file":"Stroller.js","names":["Stroller: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Stroller.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport StrollerMedium from './StrollerMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  feet: string;\n  handle: string;\n  stroller1: string;\n  stroller2: string;\n  stroller3: string;\n  wheels: string;\n}\n\nconst Stroller: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <StrollerMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Stroller;\n"],"mappings":";;;;;;AAeA,IAAMA,YAA4C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGnF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,wBAAA;GAAsB;GAAO,GAAI;IAAQ;EAElB,CAAC;;AAG1C,IAAA,mBAAe"}

package/lib/components/Illustrations/Support2.js

@@ -4,7 +4,7 @@ import "../../Illustration.js";
 import { t as Support2Medium_default } from "../../Support2Medium.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var Support2 = ({ size = 512, color,...rest }) => {
+var Support2 = ({ size = 512, color, ...rest }) => {
 	return getIllustration({
 		size,
 		medium: /* @__PURE__ */ jsx(Support2Medium_default, {

package/lib/components/Illustrations/Support2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Support2.js","names":["Support2: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Support2.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport Support2Medium from './Support2Medium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  details1: string;\n  details2: string;\n  lines: string;\n}\n\nconst Support2: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <Support2Medium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Support2;\n"],"mappings":";;;;;;AAYA,IAAMA,YAA4C,EAAE,OAAO,KAAK,MAAO,GAAG,WAAW;AAGnF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,wBAAA;GAAsB;GAAO,GAAI;IAAQ;EAElB,CAAC;;AAG1C,IAAA,mBAAe"}
+{"version":3,"file":"Support2.js","names":["Support2: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Support2.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIllustrationProps } from '../Illustration';\nimport Support2Medium from './Support2Medium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  details1: string;\n  details2: string;\n  lines: string;\n}\n\nconst Support2: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <Support2Medium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default Support2;\n"],"mappings":";;;;;;AAYA,IAAMA,YAA4C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGnF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,wBAAA;GAAsB;GAAO,GAAI;IAAQ;EAElB,CAAC;;AAG1C,IAAA,mBAAe"}

package/lib/components/Loader/index.js

@@ -2,7 +2,7 @@ import { t as uuid } from "../../uuid.js";
 import "../../environment.js";
 import { c as ZIndex, n as AnalyticsId } from "../../constants2.js";
 import React, { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import loaderStyles from "./styles.module.scss";
 let Overlay = /* @__PURE__ */ function(Overlay$1) {
@@ -21,19 +21,19 @@ var Loader = (props) => {
 	const isSmall = size === "small";
 	const isMedium = size === "medium";
 	const isLarge = size === "large";
-	const loaderWrapperClasses = classNames({
+	const loaderWrapperClasses = cn({
 		[loaderStyles["loader-wrapper--center"]]: center,
 		[loaderStyles["loader-wrapper--overlay"]]: overlay,
 		[loaderStyles["loader-wrapper--overlay-screen"]]: overlay === Overlay.screen,
 		[loaderStyles["loader-wrapper--overlay-parent"]]: overlay === Overlay.parent && display,
 		[loaderStyles["loader-wrapper--inline"]]: inline && display
 	});
-	const loaderClasses = classNames(loaderStyles.loader, {
+	const loaderClasses = cn(loaderStyles.loader, {
 		[loaderStyles["loader--small"]]: isSmall,
 		[loaderStyles["loader--medium"]]: isMedium,
 		[loaderStyles["loader--large"]]: isLarge
 	}, className);
-	const loaderDotClasses = classNames(loaderStyles.loader__dot, {
+	const loaderDotClasses = cn(loaderStyles.loader__dot, {
 		[loaderStyles["loader__dot--small"]]: isSmall,
 		[loaderStyles["loader__dot--medium"]]: isMedium,
 		[loaderStyles["loader__dot--large"]]: isLarge,

package/lib/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Loader: React.FC<LoaderProps>"],"sources":["../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAYA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,YAAA;;;AA0BF,IAAMA,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,SACP,YAAY,IACZ,UAAU,MAAM,EAChB,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;AAChC,MAAI,YAAY,QAAQ,UAAU,OAChC,QAAO;AAGT,SAAO;;CAGT,MAAM,CAAC,SAAS,cAAc,SAAS,YAAY,CAAC;CAEpD,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,WAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;EACrD,CAAC;CACF,MAAM,gBAAgB,WACpB,aAAa,QACb;GACG,aAAa,mBAAmB;GAChC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;EAClC,EACD,UACD;CACD,MAAM,mBAAmB,WAAW,aAAa,aAAa;GAC3D,aAAa,wBAAwB;GACrC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;EACjD,CAAC;CAEF,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;AACd,MAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OAAO;AAC1E,cAAW,QAAQ,cAAc,MAAM,WAAW;AAClD,cAAW,KAAK;;AAGlB,MAAI,UAAU,WAAW,SAAS,eAAe,OAAO;AACtD,cAAW,QAAQ,cAAc,MAAM,UAAU;AACjD,cAAW,KAAK;;IAEjB,EAAE,CAAC;AAEN,QACE,oBAAC,OAAA;EAAI,WAAW;EAAsB,KAAK;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,eAAe,GAAG,EAAE;YAC7H,WACC,qBAAC,OAAA;GACC,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;;IAEX,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACnC,CAAC,oBACA,oBAAC,QAAA;KAAK,IAAI;KAAS,WAAW,aAAa;eACxC;MACI;;IAEL;GAEJ;;AClIV,IAAA,iBDsIe"}
+{"version":3,"file":"index.js","names":["Loader: React.FC<LoaderProps>"],"sources":["../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAYA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,YAAA;;;AA0BF,IAAMA,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,SACP,YAAY,IACZ,UAAU,MAAM,EAChB,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;AAChC,MAAI,YAAY,QAAQ,UAAU,OAChC,QAAO;AAGT,SAAO;;CAGT,MAAM,CAAC,SAAS,cAAc,SAAS,YAAY,CAAC;CAEpD,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,GAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;EACrD,CAAC;CACF,MAAM,gBAAgB,GACpB,aAAa,QACb;GACG,aAAa,mBAAmB;GAChC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;EAClC,EACD,UACD;CACD,MAAM,mBAAmB,GAAW,aAAa,aAAa;GAC3D,aAAa,wBAAwB;GACrC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;EACjD,CAAC;CAEF,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;AACd,MAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OAAO;AAC1E,cAAW,QAAQ,cAAc,MAAM,WAAW;AAClD,cAAW,KAAK;;AAGlB,MAAI,UAAU,WAAW,SAAS,eAAe,OAAO;AACtD,cAAW,QAAQ,cAAc,MAAM,UAAU;AACjD,cAAW,KAAK;;IAEjB,EAAE,CAAC;AAEN,QACE,oBAAC,OAAA;EAAI,WAAW;EAAsB,KAAK;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,eAAe,GAAG,EAAE;YAC7H,WACC,qBAAC,OAAA;GACC,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;;IAEX,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACpC,oBAAC,OAAA,EAAI,WAAW,kBAAA,CAAoB;IACnC,CAAC,oBACA,oBAAC,QAAA;KAAK,IAAI;KAAS,WAAW,aAAa;eACxC;MACI;;IAEL;GAEJ;;AClIV,IAAA,iBDsIe"}

package/lib/components/Modal/index.js

@@ -36,7 +36,7 @@ import { t as AlertSignStroke_default } from "../../AlertSignStroke.js";
 import { t as CheckOutline_default } from "../../CheckOutline.js";
 import { t as Portal } from "../../Portal.js";
 import React, { useEffect } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let ModalVariants = /* @__PURE__ */ function(ModalVariants$1) {
@@ -129,8 +129,8 @@ var Modal = (props) => {
 	useEffect(() => {
 		dialogRef.current?.focus();
 	}, []);
-	const dialogClasses = classNames(className, styles.modal, variant && styles[`modal--${variant}`], size && styles[`modal--${size}`], contentIsScrollable && !showActions && styles["modal--no-actions"]);
-	const titleClasses = classNames({
+	const dialogClasses = cn(className, styles.modal, variant && styles[`modal--${variant}`], size && styles[`modal--${size}`], contentIsScrollable && !showActions && styles["modal--no-actions"]);
+	const titleClasses = cn({
 		[styles["modal__title--error"]]: variant === ModalVariants.error,
 		[styles["modal__title--success"]]: variant === ModalVariants.success
 	});
@@ -152,9 +152,9 @@ var Modal = (props) => {
 					...ariaLabelAttributes,
 					ref: dialogRef,
 					children: [
-						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], { [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable }) }),
+						/* @__PURE__ */ jsx("div", { className: cn(styles["modal__shadow"], styles["modal__shadow--top"], { [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable }) }),
 						/* @__PURE__ */ jsxs("div", {
-							className: classNames(styles.modal__contentWrapper),
+							className: cn(styles.modal__contentWrapper),
 							tabIndex: contentIsScrollable ? 0 : void 0,
 							role: contentIsScrollable ? "region" : void 0,
 							...contentIsScrollable ? ariaLabelAttributes : {},
@@ -162,14 +162,14 @@ var Modal = (props) => {
 							children: [!props.noCloseButton && /* @__PURE__ */ jsx("div", {
 								className: styles.modal__closeWrapper,
 								children: /* @__PURE__ */ jsx("div", {
-									className: classNames(styles.modal__closeWrapper__close),
+									className: cn(styles.modal__closeWrapper__close),
 									children: /* @__PURE__ */ jsx(Close_default, {
 										onClick: props.onClose,
 										ariaLabel: props.ariaLabelCloseBtn
 									})
 								})
 							}), /* @__PURE__ */ jsxs("div", {
-								className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`]),
+								className: cn(size && styles[`modal__contentWrapper__scroll--${size}`]),
 								children: [
 									/* @__PURE__ */ jsx("div", { ref: topContent }),
 									/* @__PURE__ */ jsxs("div", {
@@ -198,9 +198,9 @@ var Modal = (props) => {
 								]
 							})]
 						}),
-						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], { [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable }) }),
+						/* @__PURE__ */ jsx("div", { className: cn(styles["modal__shadow"], styles["modal__shadow--bottom"], { [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable }) }),
 						showActions && /* @__PURE__ */ jsxs("div", {
-							className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]),
+							className: cn(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]),
 							children: [
 								props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button_default, {
 									onClick: props.onSuccess,

package/lib/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal: React.FC<ModalProps>"],"sources":["../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Modal: React.FC<ModalProps>"],"sources":["../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}