@helsenorge/designsystem-react 13.3.0 → 13.5.0

package/lib/components/HelpBubble/index.js

@@ -21,7 +21,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" };
@@ -42,8 +42,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,
@@ -73,17 +73,17 @@ var HelpBubble = React.forwardRef((props, ref) => {
 		id: helpBubbleId,
 		variant,
 		controllerRef,
-		role: "dialog",
+		role: "group",
 		ref,
 		show: showBubble,
 		testId,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: helpBubbleClasses,
 			"data-analyticsid": AnalyticsId.HelpBubble,
-			children: [renderCloseButton(), /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
 				className: contentClasses,
 				children: [children, renderLink()]
-			})]
+			}), renderCloseButton()]
 		})
 	});
 });

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=\"group\"\n      ref={ref}\n      show={showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n        {renderCloseButton()}\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;cAC/D,qBAAC,OAAA;IAAI,WAAW;eACb,UACA,YAAY,CAAA;KACT,EACL,mBAAmB,CAAA;IAChB;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,7 +4,7 @@ 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) => {
@@ -12,7 +12,7 @@ var HelpTriggerInline = React.forwardRef(({ ariaLabel, ariaLabelledById, childre
 		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);
 	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>);\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,WAAW,OAAO,wBAAwB,UAAU;CACpF,MAAM,EAAE,WAAW,cAAc,iBAAoC,IAA0C;AAE/G,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>);\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,IAA0C;AAE/G,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/Input/Input.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { FormOnColor, FormSize } from '../../constants';
+import { HNDesignsystemInput } from '../../resources/Resources';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
@@ -44,8 +45,10 @@ export interface InputProps extends ErrorWrapperClassNameProps, Pick<React.Input
     rightOfInput?: React.ReactNode;
     /** max character limit in input  */
     maxCharacters?: number;
-    /** The text is displayed in the end of the text-counter */
+    /** @deprecated use resources instead. The text is displayed in the end of the text-counter */
     maxText?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemInput>;
 }
 export declare enum InputTypes {
     text = "text",

package/lib/components/Input/index.js

@@ -41,7 +41,7 @@ import "../../useOutsideEvent.js";
 import "../../mobile.js";
 import "../../src.js";
 import "../../StatusDot.js";
-import "../../MaxCharacters.js";
 import { t as InputTypes } from "../../Input.js";
+import "../../MaxCharacters.js";
 import { t as Input_default } from "../../Input2.js";
 export { InputTypes, Input_default as default };

package/lib/components/Input/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemInput } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemInput;

package/lib/components/Label/Label.d.ts

@@ -5,7 +5,7 @@ export type LabelText = {
     text: string;
     type?: 'normal' | 'subdued';
 };
-export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';
+export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';
 export interface LabelProps {
     /** Component shown after label - discourage use of this */
     afterLabelChildren?: React.ReactNode;

package/lib/components/LinkList/LinkList.d.ts

@@ -43,6 +43,7 @@ export interface LinkListProps {
 type Modify<T, R> = Omit<T, keyof R> & R;
 export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, {
     children: React.ReactNode;
+    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */
     chevron?: boolean;
     className?: string;
     icon?: React.ReactElement;
@@ -54,10 +55,8 @@ export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButt
     target?: LinkAnchorTargets;
     /** HTML markup for link. Default: a */
     htmlMarkup?: LinkTags;
-    /**
-     * Ref for lenke/knapp
-     */
-    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    /** Ref for lenke/knapp */
+    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement> | null;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Highlights text. Override if different from list */
@@ -66,6 +65,8 @@ export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButt
     resources?: Partial<HNDesignsystemLinkList>;
     /** @experimental id for content (only used in edit mode for aria-describedby) */
     contentId?: string;
+    /** Replaces the chevron with an arrow up right which is used for indicating external links */
+    external?: boolean;
 }> & Pick<LinkListProps, 'color' | 'size' | 'variant'> & ListEditModeItemProps;
 export declare const Link: LinkType;
 export declare const LinkList: CompoundComponent;

package/lib/components/LinkList/index.js

@@ -10,6 +10,7 @@ import "../../color.js";
 import "../../spacing.js";
 import "../../currys.js";
 import "../../Icon.js";
+import "../../ArrowUpRight.js";
 import "../../language.js";
 import "../../Check.js";
 import "../../Avatar.js";

package/lib/components/LinkList/styles.module.scss

@@ -299,6 +299,7 @@
 
   &__status-marker {
     width: 6px;
+    margin-right: 2px;
     height: auto;
     background-color: transparent;
 

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/MaxCharacters/MaxCharacters.d.ts

@@ -6,7 +6,7 @@ interface MaxCharactersProps {
     /** max character limit in textarea  */
     maxCharacters: number;
     /** The text is displayed in the end of the text-counter */
-    maxText?: string;
+    maxText: string;
     /** Changes the visuals of the textarea */
     onColor?: keyof typeof FormOnColor;
     /** Max width of the component */

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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"}

package/lib/components/NotificationPanel/index.js

@@ -34,12 +34,12 @@ import "../../ChevronUp.js";
 import "../../useExpand.js";
 import { t as Expander_default } from "../../Expander.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 FluidWrapper = ({ fluid, children }) => {
 	if (fluid) return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["fluid-wrapper"]),
+		className: cn(styles["fluid-wrapper"]),
 		children
 	});
 	return children;
@@ -51,13 +51,13 @@ var NotificationPanel_default = React.forwardRef((props, ref) => {
 	const isMobile = useIsMobileBreakpoint();
 	const renderContent = () => {
 		const outlineVariant = compactVariant === "outline";
-		const contentClasses = classNames(styles["notification-panel__content"]);
-		const labelClasses = classNames(styles["notification-panel__label"], {
+		const contentClasses = cn(styles["notification-panel__content"]);
+		const labelClasses = cn(styles["notification-panel__label"], {
 			[styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
 			[styles["notification-panel__label--compact"]]: !!compactVariant,
 			[styles["notification-panel__label--outline"]]: outlineVariant
 		});
-		const childrenClasses = classNames(styles["notification-panel__children"], {
+		const childrenClasses = cn(styles["notification-panel__children"], {
 			[styles["notification-panel__children--with-label"]]: label,
 			[styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
 			[styles["notification-panel__children--outline"]]: outlineVariant
@@ -85,7 +85,7 @@ var NotificationPanel_default = React.forwardRef((props, ref) => {
 			]
 		});
 	};
-	const notificationPanelClasses = classNames(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
+	const notificationPanelClasses = cn(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
 		[styles["notification-panel--compact"]]: !!compactVariant,
 		[styles["notification-panel--compact--basic"]]: compactVariant === "basic",
 		[styles["notification-panel--compact--outline"]]: compactVariant === "outline",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,WAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}
+{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,GAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,GAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,GAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,GAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,GAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}

package/lib/components/Panel/PanelTitle/styles.module.scss

@@ -4,7 +4,6 @@
 
 .paneltitle {
   display: grid;
-  width: 100%;
   gap: spacers.getSpacer(2xs);
   grid-template-areas: 'title';
 

package/lib/components/PanelList/index.js

@@ -31,7 +31,7 @@ import "../../ChevronRight.js";
 import "../../PanelTitle.js";
 import { c as PanelVariant, l as Panel_default } from "../../Panel.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 isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel_default;
@@ -39,14 +39,14 @@ var PanelList_default = React.forwardRef(function BadgeForwardedRef(props, ref)
 	const { testId, children, variant = PanelVariant.fill, highlightText } = props;
 	const renderPanel = (panel) => React.cloneElement(panel, {
 		variant,
-		className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),
+		className: cn(panel.props.className, styles[`panel-list__panel--${variant}`]),
 		highlightText: panel.props.highlightText || highlightText
 	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.PanelList,
-		className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+		className: cn({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
 		children: React.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,GAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}