@helsenorge/designsystem-react 12.0.0-beta.1 → 12.0.0-beta.2

package/Panel.js

@@ -6,6 +6,7 @@ import { B as Button } from "./Button.js";
 import { I as Icon } from "./Icon.js";
 import { P as PanelTitle } from "./PanelTitle.js";
 import { useLanguage } from "./utils/language.js";
+import { H as Highlighter } from "./Highlighter.js";
 import ChevronDown from "./components/Icons/ChevronDown.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
 import ChevronUp from "./components/Icons/ChevronUp.js";
@@ -77,7 +78,7 @@ const ExpandButton = ({
     }
   );
 };
-const Panel = ({
+const PanelRoot = React__default.forwardRef(function PanelForwardedRef({
   layout = "vertical",
   variant = "fill",
   color = "neutral",
@@ -85,18 +86,22 @@ const Panel = ({
   testId,
   children,
   status = "none",
+  buttonBottomAriaLabel,
   buttonBottomOnClick,
   buttonBottomText,
   className,
-  resources
-}) => {
+  resources,
+  onExpand,
+  highlightText
+}, ref) {
   const [preContainer, setPreContainer] = React__default.useState([]);
   const [title, setTitle] = React__default.useState([]);
   const [content, setContent] = React__default.useState([]);
   const [expandableContent, setExpandableContent] = React__default.useState([]);
   const [hasIcon, setHasIcon] = React__default.useState(false);
   const [isExpanded, setIsExpanded] = React__default.useState(false);
-  const panelRef = React__default.useRef(null);
+  const localRef = React__default.useRef(null);
+  const panelRef = ref ?? localRef;
   const expandedContentRef = React__default.useRef(null);
   const defaultScroll = 100;
   const { language } = useLanguage(LanguageLocales.NORWEGIAN);
@@ -116,7 +121,9 @@ const Panel = ({
         if (child.type === PreContainer) {
           newPreContainer.push(child);
         } else if (child.type === PanelTitle) {
-          newTitle.push(child);
+          newTitle.push(
+            React__default.cloneElement(child, { highlightText: child.props.highlightText || highlightText })
+          );
           if (child.props.icon) {
             localHasIcon = true;
           }
@@ -135,7 +142,7 @@ const Panel = ({
   }, [children]);
   React__default.useEffect(() => {
     if (isExpanded) {
-      if (panelRef.current && expandedContentRef.current) {
+      if ("current" in panelRef && panelRef.current && expandedContentRef.current) {
         const panelRect = panelRef.current.getBoundingClientRect();
         const expandedContentRect = expandedContentRef.current.getBoundingClientRect();
         const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);
@@ -156,7 +163,10 @@ const Panel = ({
   const outerClassnames = classNames(className, {
     [styles["panel__border--outline--outer"]]: variant === "outline",
     [styles["panel__border--line"]]: variant === "line",
-    [styles["panel__border--fill--neutral"]]: variant === "fill" && colorScheme === "neutral"
+    [styles["panel__border--fill--neutral"]]: variant === "fill" && colorScheme === "neutral",
+    [styles["panel__border--fill--new"]]: variant === "fill" && status === "new",
+    [styles["panel__border--fill--status"]]: variant === "fill" && status !== "none"
+    /* none */
   });
   const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
     [styles["panel--line"]]: variant === "line",
@@ -175,31 +185,39 @@ const Panel = ({
     [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === "none" && variant === "line"
     /* line */
   });
+  const handleExpandClick = () => {
+    setIsExpanded(!isExpanded);
+    onExpand && onExpand();
+  };
   return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
     [styles["panel__border--outline--inner"]]: variant === "outline"
     /* outline */
   }), children: /* @__PURE__ */ jsx("div", { className: expanderBorderLayout, children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
-    preContainer,
-    title,
-    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
-    /* @__PURE__ */ jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), isExpanded, resources: mergedResources }),
-    isExpanded && /* @__PURE__ */ jsxs("div", { ref: expandedContentRef, children: [
+    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
+      preContainer,
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: content }) }),
+    /* @__PURE__ */ jsx(ExpandButton, { onClick: handleExpandClick, isExpanded, resources: mergedResources }),
+    isExpanded && /* @__PURE__ */ jsxs("div", { ref: expandedContentRef, "data-testid": testId + "-details", children: [
       /* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }),
-      expandableContent
+      /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: expandableContent })
     ] })
   ] }) }) }) }) : /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
     [styles["panel__border--outline--inner"]]: variant === "outline"
     /* outline */
   }), children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
-    preContainer,
-    title,
-    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
-    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, children: [
+    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
+      preContainer,
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: content }) }),
+    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, "aria-label": buttonBottomAriaLabel, children: [
       buttonBottomText,
       /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronRight, size: IconSize.XSmall })
     ] }) })
   ] }) }) });
-};
+});
 const PreContainer = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: styles["panel__pre-container"], children });
 };
@@ -219,6 +237,8 @@ const ExpandedContent = ({ children }) => {
   const styling = classNames(styles["panel__expander__content"]);
   return /* @__PURE__ */ jsx("div", { className: styling, children });
 };
+PanelRoot.displayName = "Panel";
+const Panel = PanelRoot;
 Panel.PreContainer = PreContainer;
 Panel.Title = PanelTitle;
 Panel.A = A;

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { LanguageLocales } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\n\nconst Panel: React.FC<PanelProps> & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n} = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  status = PanelStatus.none,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n  resources,\n}: PanelProps) => {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(child);\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    // Scroller oppover når expanded content åpnes\n    if (isExpanded) {\n      if (panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n            {preContainer}\n            {title}\n            <div className={contentContainerLayout}>{content}</div>\n            <ExpandButton onClick={() => setIsExpanded(!isExpanded)} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef}>\n                <div className={styles['panel__expander__separator']} />\n                {expandableContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n          {preContainer}\n          {title}\n          <div className={contentContainerLayout}>{content}</div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"names":["PanelLayout","PanelVariant","PanelStacking","PanelStatus","React"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { LanguageLocales } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: () => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot = React.forwardRef(function PanelForwardedRef(\n  {\n    layout = PanelLayout.vertical,\n    variant = PanelVariant.fill,\n    color = 'neutral',\n    stacking = PanelStacking.default,\n    testId,\n    children,\n    status = PanelStatus.none,\n    buttonBottomAriaLabel,\n    buttonBottomOnClick,\n    buttonBottomText,\n    className,\n    resources,\n    onExpand,\n    highlightText,\n  }: PanelProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, { highlightText: child.props.highlightText || highlightText })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    // Scroller oppover når expanded content åpnes\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: variant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: variant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n    onExpand && onExpand();\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n            <Highlighter searchText={highlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={highlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={highlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n          <Highlighter searchText={highlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={highlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"names":["PanelLayout","PanelVariant","PanelStacking","PanelStatus","React"],"mappings":"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"}

package/PanelTitle.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { H as Highlighter } from "./Highlighter.js";
 import { T as Title } from "./Title.js";
 import styles from "./components/Panel/PanelTitle/styles.module.scss";
 const PanelTitle = (props) => {
-  const { testId, icon, badge, title, titleMarkup = "h3" } = props;
+  const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
   return /* @__PURE__ */ jsxs("div", { className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }), "data-testid": testId, children: [
     icon && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__icon"], children: icon }),
     title && /* @__PURE__ */ jsxs("div", { className: styles["paneltitle__title"], children: [
-      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleMarkup, children: title }),
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleMarkup, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: title }) }),
       badge && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__badge"], children: badge })
     ] })
   ] });

package/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3' } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            {title}\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n"],"names":[],"mappings":";;;;AAqBM,MAAA,aAAwC,CAAC,UAA2B;AACxE,QAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,SAAS;AAC3D,8BACG,OAAI,EAAA,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAI,EAAA,WAAW,OAAO,kBAAkB,GAAI,UAAK,MAAA;AAAA,IAC1D,SACE,qBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,oBAAC,OAAM,EAAA,YAAW,UAAS,YAAY,aACpC,UACH,OAAA;AAAA,MACC,SAAU,oBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAM,MAAA,CAAA;AAAA,IAAA,EAChE,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n"],"names":[],"mappings":";;;;;AAwBM,MAAA,aAAwC,CAAC,UAA2B;AAClE,QAAA,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,8BACG,OAAI,EAAA,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAI,EAAA,WAAW,OAAO,kBAAkB,GAAI,UAAK,MAAA;AAAA,IAC1D,SACE,qBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAM,YAAW,UAAS,YAAY,aACrC,8BAAC,aAAY,EAAA,YAAY,eAAgB,UAAA,MAAM,CAAA,GACjD;AAAA,MACC,SAAU,oBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAM,MAAA,CAAA;AAAA,IAAA,EAChE,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/PopOver.js

@@ -3,6 +3,7 @@ import React__default, { useRef } from "react";
 import { u as useFloating, a as useClick, b as useDismiss, c as useInteractions, d as useMergeRefs, F as FloatingFocusManager, e as FloatingArrow, f as autoUpdate, o as offset, g as flip, s as shift, h as hide, i as arrow } from "./floating-ui.react.js";
 import classNames from "classnames";
 import { ZIndex, AnalyticsId } from "./constants.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
 import styles from "./components/PopOver/styles.module.scss";
 var PopOverVariant = /* @__PURE__ */ ((PopOverVariant2) => {
   PopOverVariant2["positionautomatic"] = "positionautomatic";
@@ -13,6 +14,8 @@ var PopOverVariant = /* @__PURE__ */ ((PopOverVariant2) => {
 const PopOver = React__default.forwardRef((props, ref) => {
   var _a;
   const {
+    ariaLabel,
+    ariaLabelledById,
     id,
     children,
     controllerRef,
@@ -24,6 +27,7 @@ const PopOver = React__default.forwardRef((props, ref) => {
     zIndex = ZIndex.PopOver,
     placement
   } = props;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
   const placementProp = placement ?? (variant === "positionabove" ? "top" : "bottom");
   const arrowRef = useRef(null);
   const { refs, floatingStyles, context, middlewareData } = useFloating({
@@ -50,12 +54,14 @@ const PopOver = React__default.forwardRef((props, ref) => {
       role,
       "data-testid": testId,
       "data-analyticsid": AnalyticsId.PopOver,
+      ...ariaLabelAttributes,
       children: [
         children,
         /* @__PURE__ */ jsx(
           FloatingArrow,
           {
             ref: arrowRef,
+            className: styles["popover__arrow"],
             context,
             fill: "var(--core-color-white)",
             stroke: "var(--color-base-border-onlight)",

package/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n  } = props;\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","React"],"mappings":";;;;;;AAuBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,eAAgB,IAAA;AAChBA,kBAAA,eAAgB,IAAA;AAHNA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAmCZ,MAAM,UAAUC,eAAM,WAAuE,CAAC,OAAO,QAAQ;;AACrG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,gBAAgB,cAAc,YAAY,kBAA+B,QAAQ;AAEjF,QAAA,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,gBAAgB,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpE,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,MAAM,EAAE,SAAS,EAAG,CAAA,GAAG,QAAQ,MAAM,EAAE,SAAS,SAAA,CAAU,CAAC;AAAA,IAC5F,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,cAAc;AAAA,IAAA;AAAA,EAC3B,CACD;AAEK,QAAA,QAAQ,SAAS,OAAO;AACxB,QAAA,UAAU,WAAW,OAAO;AAElC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,OAAO,CAAC;AAE7D,QAAM,YAAY,QAAQ,GAAC,oBAAe,SAAf,mBAAqB;AAEhD,QAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;AAEnF,SACG,oBAAA,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,gBAAgB,YAAY,YAAY,YAAY,UAAU,OAAe;AAAA,MACzF,WAAW,WAAW,OAAO,SAAS,SAAS;AAAA,MAC9C,GAAG,iBAAiB;AAAA,MACrB;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,QAAQ,cAAc;"}
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","React"],"mappings":";;;;;;;AAwBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,eAAgB,IAAA;AAChBA,kBAAA,eAAgB,IAAA;AAHNA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAuCZ,MAAM,UAAUC,eAAM,WAAuE,CAAC,OAAO,QAAQ;;AACrG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAE7F,QAAM,gBAAgB,cAAc,YAAY,kBAA+B,QAAQ;AAEjF,QAAA,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,gBAAgB,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpE,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,MAAM,EAAE,SAAS,EAAG,CAAA,GAAG,QAAQ,MAAM,EAAE,SAAS,SAAA,CAAU,CAAC;AAAA,IAC5F,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,cAAc;AAAA,IAAA;AAAA,EAC3B,CACD;AAEK,QAAA,QAAQ,SAAS,OAAO;AACxB,QAAA,UAAU,WAAW,OAAO;AAElC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,OAAO,CAAC;AAE7D,QAAM,YAAY,QAAQ,GAAC,oBAAe,SAAf,mBAAqB;AAEhD,QAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;AAEnF,SACG,oBAAA,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,gBAAgB,YAAY,YAAY,YAAY,UAAU,OAAe;AAAA,MACzF,WAAW,WAAW,OAAO,SAAS,SAAS;AAAA,MAC9C,GAAG,iBAAiB;AAAA,MACrB;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC7B,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,OAAO,gBAAgB;AAAA,YAClC;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,QAAQ,cAAc;"}

package/StatusDot.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
 import classNames from "classnames";
 import "./theme/grid.js";
 import "./hooks/useBreakpoint.js";
-import "react";
 import { AnalyticsId, FormOnColor, IconSize } from "./constants.js";
 import { getColor } from "./theme/currys/color.js";
 import { L as LazyIcon } from "./LazyIcon.js";
@@ -29,6 +29,9 @@ var StatusDotVariant = /* @__PURE__ */ ((StatusDotVariant2) => {
   StatusDotVariant2["hidden"] = "hidden";
   StatusDotVariant2["login"] = "login";
   StatusDotVariant2["attachment"] = "attachment";
+  StatusDotVariant2["active"] = "active";
+  StatusDotVariant2["pending"] = "pending";
+  StatusDotVariant2["inactive"] = "inactive";
   return StatusDotVariant2;
 })(StatusDotVariant || {});
 const StatusDotIcon = ({ onColor, variant = "info" }) => {
@@ -75,23 +78,29 @@ const StatusDotIcon = ({ onColor, variant = "info" }) => {
       return /* @__PURE__ */ jsx(LazyIcon, { ...iconProps, iconName: "Login" });
     case "attachment":
       return /* @__PURE__ */ jsx(LazyIcon, { ...iconProps, iconName: "Attachment" });
+    case "active":
+      return /* @__PURE__ */ jsx(LazyIcon, { ...iconProps, iconName: "DotActive" });
+    case "pending":
+      return /* @__PURE__ */ jsx(LazyIcon, { ...iconProps, iconName: "DotPending" });
+    case "inactive":
+      return /* @__PURE__ */ jsx(LazyIcon, { ...iconProps, iconName: "DotInactive" });
   }
   return null;
 };
-const StatusDot = (props) => {
+const StatusDot = React__default.forwardRef(function StatusDotForwardedRef(props, ref) {
   const { id, onColor = StatusDotOnColor.onwhite, variant = "info", text, className, testId } = props;
   const statusDotClasses = classNames(styles["statusdot"], className);
   const labelClasses = classNames(styles["statusdot__label"], {
     [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark
   });
-  return /* @__PURE__ */ jsxs("span", { id, className: statusDotClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StatusDot, children: [
+  return /* @__PURE__ */ jsxs("span", { id, ref, className: statusDotClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StatusDot, children: [
     /* @__PURE__ */ jsx("span", { className: styles["statusdot__dot"], "data-testid": testId + "-dot", children: /* @__PURE__ */ jsx(StatusDotIcon, { onColor, variant }) }),
     /* @__PURE__ */ jsx("span", { className: labelClasses, children: text })
   ] });
-};
+});
 export {
   StatusDot as S,
-  StatusDotOnColor as a,
-  StatusDotVariant as b
+  StatusDotVariant as a,
+  StatusDotOnColor as b
 };
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport type StatusDotType = React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLElement>>;\nconst StatusDot: StatusDotType = React.forwardRef(function StatusDotForwardedRef(\n  props: StatusDotProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n});\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant","React"],"mappings":"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"}

package/StatusDotMultiComposition.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { S as StatusDot, a as StatusDotVariant } from "./StatusDot.js";
+import styles from "./components/ElementHeader/StatusDotMultiComposition/styles.module.scss";
+const StatusDotMultiComposition = (props) => {
+  const {
+    additionalText,
+    children,
+    className = "",
+    testId,
+    stacking = "horizontal",
+    hiddenForChild = false,
+    topStatusDot,
+    bottomStatusDot
+  } = props;
+  return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: classNames(styles["statusdotmulticomposition"], className), children: [
+    topStatusDot,
+    hiddenForChild && /* @__PURE__ */ jsx(StatusDot, { variant: StatusDotVariant.hidden, text: "Skjult for barnet" }),
+    /* @__PURE__ */ jsx("span", { "data-stacking": stacking, className: styles["statusdotmulticomposition__children"], children }),
+    bottomStatusDot,
+    additionalText && /* @__PURE__ */ jsx("span", { className: styles["statusdotmulticomposition__additional-text"], children: additionalText })
+  ] });
+};
+export {
+  StatusDotMultiComposition as S
+};
+//# sourceMappingURL=StatusDotMultiComposition.js.map

package/StatusDotMultiComposition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDotMultiComposition.js","sources":["../src/components/ElementHeader/StatusDotMultiComposition/StatusDotMultiComposition.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotProps, StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotMultiCompositionType = React.FC<StatusDotMultiCompositionProps>;\n\nexport interface StatusDotMultiCompositionProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotMultiComposition: StatusDotMultiCompositionType = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotmulticomposition'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotmulticomposition__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotmulticomposition__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotMultiComposition;\n"],"names":["cn"],"mappings":";;;;AA6BO,MAAM,4BAA2D,CAAS,UAAA;AACzE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EAAA,IACE;AAGF,SAAA,qBAAC,QAAK,EAAA,eAAa,QAAQ,WAAWA,WAAG,OAAO,2BAA2B,GAAG,SAAS,GACpF,UAAA;AAAA,IAAA;AAAA,IAEA,kBAAmB,oBAAA,WAAA,EAAU,SAAS,iBAAiB,QAAQ,MAAK,qBAAoB;AAAA,IACzF,oBAAC,UAAK,iBAAe,UAAU,WAAW,OAAO,qCAAqC,GACnF,UACH;AAAA,IACC;AAAA,IACA,kBAAmB,oBAAA,QAAA,EAAK,WAAW,OAAO,4CAA4C,GAAI,UAAe,eAAA,CAAA;AAAA,EAAA,GAC5G;AAEJ;"}

package/components/AnchorLink/styles.module.scss

@@ -1,19 +1,19 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
+@import '../../scss/supernova/styles/colors.css';
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;
 
 @mixin anchorlink-hover {
   cursor: pointer;
-  color: palette.$blueberry700;
-  background-color: palette.$blueberry60010;
-  text-decoration-color: palette.$blueberry600;
+  color: var(--color-action-text-onlight-hover);
+  background-color: var(--color-action-background-transparent-onlight-hover);
+  text-decoration-color: var(--color-action-border-hover);
 }
 
 @mixin anchorlink-focus {
   outline: none;
-  border: $focus-width solid palette.$black;
+  border: $focus-width solid var(--color-action-border-onlight-focus);
 }
 
 @mixin anchorlink {
@@ -22,11 +22,11 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: break-word;
   text-align: left;
-  color: palette.$blueberry600;
+  color: var(--color-action-text-onlight);
   border: $focus-width solid transparent;
   text-decoration: underline;
   text-underline-offset: 0.16rem;
-  text-decoration-color: palette.$blueberry400;
+  text-decoration-color: var(--core-color-neutral-700);
   text-decoration-thickness: $underline-width;
   padding: 0.1rem;
 

package/components/ArticleTeaser/styles.module.scss

@@ -8,8 +8,12 @@
   border-bottom: 1px solid var(--color-base-border-onlight);
 
   &__content {
-    margin-bottom: var(--core-space-l);
     overflow: hidden;
+    padding-bottom: 1rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-bottom: 2.65rem;
+    }
 
     &--collapsed {
       max-height: 10rem;
@@ -18,9 +22,9 @@
         content: '';
         position: absolute;
         height: var(--core-space-3xl);
-        background: linear-gradient(180deg, #ffffff40 0%, #fff 80%);
+        background: linear-gradient(180deg, #fff0 0%, #fff 60%);
         width: 100%;
-        bottom: 1px;
+        bottom: 0;
       }
     }
   }

package/components/Checkbox/styles.module.scss

@@ -86,6 +86,8 @@
 }
 
 $checkbox-icon-size: 1.625rem;
+$padding-clickable-area-top-bottom: 7px;
+$padding-clickable-area-left: 8px;
 
 .checkbox-errors {
   font-size: font-settings.$font-size-sm;
@@ -95,6 +97,8 @@ $checkbox-icon-size: 1.625rem;
 }
 
 .checkbox-wrapper {
+  margin-left: -$padding-clickable-area-left;
+
   &--large {
     margin: spacers.getSpacer(2xs) 0;
   }
@@ -104,6 +108,7 @@ $checkbox-icon-size: 1.625rem;
   display: flex;
   align-items: flex-start;
   cursor: pointer;
+  padding: $padding-clickable-area-top-bottom 0 $padding-clickable-area-top-bottom $padding-clickable-area-left;
 
   &__text {
     color: palette.$black;
@@ -439,5 +444,6 @@ $checkbox-icon-size: 1.625rem;
 }
 
 .checkbox-sublabel-wrapper {
-  padding-left: 2.8rem;
+  margin-top: -$padding-clickable-area-top-bottom;
+  padding-left: calc(2.8rem + $padding-clickable-area-left);
 }

package/components/Checkbox/styles.module.scss.d.ts

@@ -37,6 +37,7 @@ export type Styles = {
   'checkbox-label--large': string;
   'checkbox-label--on-dark': string;
   'checkbox-sublabel-wrapper': string;
+  'checkbox-wrapper': string;
   'checkbox-wrapper--large': string;
 };
 

package/components/Close/styles.module.scss

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
 
@@ -47,11 +45,14 @@ $mobile-outer-size: 2.75rem;
       height: $mobile-inner-size;
     }
 
-    :hover > &,
-    :active > & {
+    :hover > & {
       background-color: var(--color-action-background-transparent-onlight-hover);
     }
 
+    :active > & {
+      background-color: var(--color-action-background-transparent-onlight-active);
+    }
+
     :focus-visible > & {
       outline: 3px solid var(--color-action-border-onlight-focus);
       border-radius: 0;
@@ -59,11 +60,14 @@ $mobile-outer-size: 2.75rem;
     }
 
     &--plum {
-      :hover > &,
-      :active > & {
+      :hover > & {
         background-color: var(--color-help-background-transparent-onlight-hover, #6c36b31a);
       }
 
+      :active > & {
+        background-color: var(--color-help-background-transparent-onlight-active, #6c36b31a);
+      }
+
       :focus-visible > & {
         outline: 3px solid var(--color-action-border-onlight-focus);
         border-radius: 0;