@helsenorge/designsystem-react 7.13.4 → 8.0.1

package/components/Chip/styles.module.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+
+.chip {
+  $chip: &;
+
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  text-transform: uppercase;
+  border-width: 1px;
+  border-style: solid;
+  background-color: transparent;
+
+  // komponenten bruker ekstra liten font-size og line-height
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: 600;
+  border-radius: 100px;
+  cursor: pointer;
+  font-family: inherit;
+
+  $colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';
+
+  @each $color in $colors {
+    &--#{$color},
+    // Sørg for at fargene overstyrer dersom chip har type=button
+    &--#{$color}[type='button'] {
+      // banana og kiwi har unntak fra hovedregelen
+      @if $color == 'banana' {
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}300);
+      } @else if $color == 'kiwi' {
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}200);
+      } @else {
+        color: map.get($palette-map, #{$color}800);
+        border-color: map.get($palette-map, #{$color}200);
+      }
+
+      &#{$chip}--normal {
+        &:hover {
+          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.2));
+        }
+      }
+
+      &#{$chip}--oncolor {
+        background-color: transparent;
+
+        &:hover {
+          background-color: map.get($palette-map, #{$color}100);
+          border-color: map.get($palette-map, #{$color}100);
+        }
+
+        &:focus {
+          background-color: $white;
+          border-color: $white;
+          box-shadow: 0 0 0 3px $black;
+        }
+      }
+
+      &#{$chip}--emphasised {
+        background-color: map.get($palette-map, #{$color}50);
+
+        &:hover {
+          @if $color == 'banana' {
+            background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}300), 0.5));
+          } @else {
+            background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.5));
+          }
+        }
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $black;
+    box-shadow: inset 0 0 0 2px $black;
+  }
+
+  &#{$chip}--undo {
+    text-decoration: line-through;
+  }
+
+  &--medium {
+    padding: 0 getSpacer(3xs) 0 getSpacer(xs);
+    min-height: 1.875rem;
+  }
+
+  &--large {
+    padding: getSpacer(4xs) getSpacer(3xs) getSpacer(4xs) getSpacer(xs);
+    min-height: 2.125rem;
+  }
+}

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

@@ -0,0 +1,21 @@
+export type Styles = {
+  chip: string;
+  'chip--banana': string;
+  'chip--blueberry': string;
+  'chip--cherry': string;
+  'chip--emphasised': string;
+  'chip--kiwi': string;
+  'chip--large': string;
+  'chip--medium': string;
+  'chip--neutral': string;
+  'chip--normal': string;
+  'chip--oncolor': string;
+  'chip--plum': string;
+  'chip--undo': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ErrorWrapper/ErrorWrapper.js

@@ -1,9 +1,9 @@
-import t from "react";
-import o from "classnames";
-import e from "../ErrorWrapper/styles.module.scss";
+import e from "react";
+import s from "classnames";
+import t from "../ErrorWrapper/styles.module.scss";
 const c = (r) => {
-  const a = o(e["error-wrapper"], r.errorText && e["error-wrapper--with-error"], r.className);
-  return /* @__PURE__ */ t.createElement("div", { className: a, "data-testid": r.testId }, r.errorText && /* @__PURE__ */ t.createElement("p", { className: e["error-wrapper__errors"], id: r.errorTextId }, r.errorText), r.children);
+  const a = s(r.errorText && t["error-wrapper--with-error"], r.className);
+  return /* @__PURE__ */ e.createElement("div", { className: a, "data-testid": r.testId }, r.errorText && /* @__PURE__ */ e.createElement("p", { className: t["error-wrapper__errors"], id: r.errorTextId }, r.errorText), r.children);
 };
 export {
   c as ErrorWrapper,

package/components/ErrorWrapper/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(styles['error-wrapper'], props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorWrapperClasses","cn","styles","React"],"mappings":";;;AAmBO,MAAMA,IAA4C,CAASC,MAAA;AAC1D,QAAAC,IAAsBC,EAAGC,EAAO,eAAe,GAAGH,EAAM,aAAaG,EAAO,2BAA2B,GAAGH,EAAM,SAAS;AAG7H,SAAAI,gBAAAA,EAAA,cAAC,SAAI,WAAWH,GAAqB,eAAaD,EAAM,OAAA,GACrDA,EAAM,aACJI,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWD,EAAO,uBAAuB,GAAG,IAAIH,EAAM,eACtDA,EAAM,SACT,GAEDA,EAAM,QACT;AAEJ;"}
+{"version":3,"file":"ErrorWrapper.js","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorWrapperClasses","cn","styles","React"],"mappings":";;;AAmBO,MAAMA,IAA4C,CAASC,MAAA;AAC1D,QAAAC,IAAsBC,EAAGF,EAAM,aAAaG,EAAO,2BAA2B,GAAGH,EAAM,SAAS;AAGpG,SAAAI,gBAAAA,EAAA,cAAC,SAAI,WAAWH,GAAqB,eAAaD,EAAM,OAAA,GACrDA,EAAM,aACJI,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWD,EAAO,uBAAuB,GAAG,IAAIH,EAAM,eACtDA,EAAM,SACT,GAEDA,EAAM,QACT;AAEJ;"}

package/components/ErrorWrapper/styles.module.scss

@@ -6,11 +6,6 @@
 
 .error-wrapper {
   position: relative;
-  padding-bottom: getSpacer(m);
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    padding-bottom: getSpacer(l);
-  }
 
   &--with-error {
     padding-top: getSpacer(s);

package/components/EyebrowHeader/EyebrowHeader.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import Title from '../Title';
+export interface SubtitleProps {
+    children?: React.ReactNode;
+}
+declare const Subtitle: React.FC<SubtitleProps>;
+export interface EyebrowHeaderProps {
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export interface EyebrowHeaderType extends React.FC<EyebrowHeaderProps> {
+    Subtitle: typeof Subtitle;
+    Title: typeof Title;
+}
+declare const EyebrowHeader: EyebrowHeaderType;
+export default EyebrowHeader;

package/components/EyebrowHeader/EyebrowHeader.js

@@ -0,0 +1,12 @@
+import a from "react";
+import { AnalyticsId as r } from "../../constants.js";
+import { Title as i } from "../Title/Title.js";
+import l from "../EyebrowHeader/styles.module.scss";
+const d = (e) => /* @__PURE__ */ a.createElement("p", { className: l.subtitle }, e.children), t = (e) => /* @__PURE__ */ a.createElement("div", { "data-testid": e.testId, "data-analyticsid": r.EyebrowHeader }, e.children);
+t.Subtitle = d;
+t.Title = i;
+t.displayName = "EyebrowHeader";
+export {
+  t as default
+};
+//# sourceMappingURL=EyebrowHeader.js.map

package/components/EyebrowHeader/EyebrowHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyebrowHeader.js","sources":["../../../src/components/EyebrowHeader/EyebrowHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface SubtitleProps {\n  children?: React.ReactNode;\n}\n\nconst Subtitle: React.FC<SubtitleProps> = props => {\n  return <p className={styles.subtitle}>{props.children}</p>;\n};\n\nexport interface EyebrowHeaderProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface EyebrowHeaderType extends React.FC<EyebrowHeaderProps> {\n  Subtitle: typeof Subtitle;\n  Title: typeof Title;\n}\n\nconst EyebrowHeader = ((props: EyebrowHeaderProps): React.JSX.Element => (\n  <div data-testid={props.testId} data-analyticsid={AnalyticsId.EyebrowHeader}>\n    {props.children}\n  </div>\n)) as EyebrowHeaderType;\n\nEyebrowHeader.Subtitle = Subtitle;\nEyebrowHeader.Title = Title;\nEyebrowHeader.displayName = 'EyebrowHeader';\n\nexport default EyebrowHeader;\n"],"names":["Subtitle","props","styles","EyebrowHeader","React","AnalyticsId","Title"],"mappings":";;;;AAWA,MAAMA,IAAoC,CAASC,sCACzC,KAAE,EAAA,WAAWC,EAAO,SAAA,GAAWD,EAAM,QAAS,GAclDE,IAAiB,CAACF,MACtBG,gBAAAA,EAAA,cAAC,OAAI,EAAA,eAAaH,EAAM,QAAQ,oBAAkBI,EAAY,cAC3D,GAAAJ,EAAM,QACT;AAGFE,EAAc,WAAWH;AACzBG,EAAc,QAAQG;AACtBH,EAAc,cAAc;"}

package/components/EyebrowHeader/index.d.ts

@@ -0,0 +1,3 @@
+import EyebrowHeader from './EyebrowHeader';
+export * from './EyebrowHeader';
+export default EyebrowHeader;

package/components/EyebrowHeader/index.js

@@ -0,0 +1,5 @@
+import r from "./EyebrowHeader.js";
+export {
+  r as default
+};
+//# sourceMappingURL=index.js.map

package/components/EyebrowHeader/styles.module.scss

@@ -0,0 +1,5 @@
+@import '@helsenorge/designsystem-react/scss/spacers';
+
+.subtitle {
+  margin: 0;
+}

package/components/FormGroup/styles.module.scss

@@ -19,6 +19,9 @@
   border: none;
   padding: 0;
   margin: 0;
+  display: flex;
+  flex-flow: column;
+  gap: getSpacer(s);
 
   > div {
     padding-bottom: 0;

package/components/GridExample/GridExample.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type GridLayout = 'helsenorge' | 'padding' | 'none';
 interface GridExampleProps {
     gridLayout: GridLayout;
+    children?: React.ReactNode;
 }
 export declare const GridExample: React.FC<GridExampleProps>;
 export default GridExample;

package/components/GridExample/GridExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSupernova } from '../../docs';\n\ntype GridLayout = 'helsenorge' | 'padding' | 'none';\n\ninterface GridExampleProps {\n  gridLayout: GridLayout;\n}\n\nexport const GridExample: React.FC<GridExampleProps> = ({ gridLayout = isSupernova(), children }) => {\n  if (isSupernova() || gridLayout === 'padding') {\n    return <div style={{ padding: '0.5rem' }}>{children}</div>;\n  }\n\n  if (gridLayout === 'helsenorge') {\n    return (\n      <div className=\"container py-5\">\n        <div className=\"row\">\n          <div className=\"col\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport default GridExample;\n"],"names":["GridExample","gridLayout","isSupernova","children","React"],"mappings":";;AAUO,MAAMA,IAA0C,CAAC,EAAE,YAAAC,IAAaC,EAAY,GAAG,UAAAC,QAChFD,EAAA,KAAiBD,MAAe,4CAC1B,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,KAAaE,CAAS,IAGlDF,MAAe,eAEdG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oDACZ,OAAI,EAAA,WAAU,MACb,GAAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,MAAO,GAAAD,CAAS,CACjC,CACF,sDAIMA,CAAS;"}
+{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSupernova } from '../../docs';\n\ntype GridLayout = 'helsenorge' | 'padding' | 'none';\n\ninterface GridExampleProps {\n  gridLayout: GridLayout;\n  children?: React.ReactNode;\n}\n\nexport const GridExample: React.FC<GridExampleProps> = ({ gridLayout = isSupernova(), children }) => {\n  if (isSupernova() || gridLayout === 'padding') {\n    return <div style={{ padding: '0.5rem' }}>{children}</div>;\n  }\n\n  if (gridLayout === 'helsenorge') {\n    return (\n      <div className=\"container py-5\">\n        <div className=\"row\">\n          <div className=\"col\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport default GridExample;\n"],"names":["GridExample","gridLayout","isSupernova","children","React"],"mappings":";;AAWO,MAAMA,IAA0C,CAAC,EAAE,YAAAC,IAAaC,EAAY,GAAG,UAAAC,QAChFD,EAAA,KAAiBD,MAAe,4CAC1B,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,KAAaE,CAAS,IAGlDF,MAAe,eAEdG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oDACZ,OAAI,EAAA,WAAU,MACb,GAAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,MAAO,GAAAD,CAAS,CACjC,CACF,sDAIMA,CAAS;"}

package/components/HelpPanel/HelpPanel.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { HighlightBoxSize } from '../HighlightBox';
+import { HighlightPanelSize } from '../HighlightPanel';
 export interface HelpPanelProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Changes the size. Default: medium */
-    size?: keyof typeof HighlightBoxSize;
+    size?: keyof typeof HighlightPanelSize;
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the data-testid attribute. */

package/components/HelpPanel/HelpPanel.js

@@ -1,21 +1,21 @@
 import s from "react";
-import p from "classnames";
-import n from "../HighlightBox/HighlightBox.js";
+import n from "classnames";
+import p from "../HighlightPanel/HighlightPanel.js";
 import c from "../Icons/HandWaving.js";
 import e from "../HelpPanel/styles.module.scss";
-const d = ({ className: a, testId: t, size: l, children: o, title: r }) => {
-  const m = p(e["help-panel"], a);
+const d = ({ className: a, testId: l, size: t, children: r, title: m }) => {
+  const o = n(e["help-panel"], a);
   return /* @__PURE__ */ s.createElement(
-    n,
+    p,
     {
-      className: m,
+      className: o,
       contentWrapperClassName: e["help-panel"],
-      testId: t,
-      size: l,
+      testId: l,
+      size: t,
       svgIcon: c,
-      title: r
+      title: m
     },
-    o
+    r
   );
 };
 export {

package/components/HelpPanel/HelpPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\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, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\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, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightPanel\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightPanel","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP;"}

package/components/{HighlightBox/HighlightBox.d.ts → HighlightPanel/HighlightPanel.d.ts}

@@ -3,24 +3,24 @@ import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
 import { TitleTags } from '../Title';
-export type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;
-export declare enum HighlightBoxSize {
+export type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;
+export declare enum HighlightPanelSize {
     medium = "medium",
     large = "large",
     fluid = "fluid"
 }
-export type HighlightBoxTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'>;
-export interface HighlightBoxProps {
+export type HighlightPanelTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'>;
+export interface HighlightPanelProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Changes the background color. Default: white */
-    color?: HighlightBoxColors;
+    color?: HighlightPanelColors;
     /** Changes the size. Default: medium */
-    size?: keyof typeof HighlightBoxSize;
-    /** Adds an icon to the highlightbox. */
+    size?: keyof typeof HighlightPanelSize;
+    /** Adds an icon to the highlightpanel. */
     svgIcon?: SvgIcon | IconName;
     /** Changes the underlying element. Default: div */
-    htmlMarkup?: HighlightBoxTags;
+    htmlMarkup?: HighlightPanelTags;
     /** Adds custom classes to the element. */
     className?: string;
     /** Adds custom classes to the content-wrapper */
@@ -32,5 +32,5 @@ export interface HighlightBoxProps {
     /** Markup props for title */
     titleHtmlMarkup?: TitleTags;
 }
-declare const HighlightBox: React.FC<HighlightBoxProps>;
-export default HighlightBox;
+declare const HighlightPanel: React.FC<HighlightPanelProps>;
+export default HighlightPanel;

package/components/HighlightPanel/HighlightPanel.js

@@ -0,0 +1,61 @@
+import e from "react";
+import i from "classnames";
+import "../../theme/grid.js";
+import { useBreakpoint as C, Breakpoint as W } from "../../hooks/useBreakpoint.js";
+import { AnalyticsId as g, IconSize as N } from "../../constants.js";
+import { Icon as z } from "../Icon/Icon.js";
+import { LazyIcon as M } from "../LazyIcon/LazyIcon.js";
+import { Title as H } from "../Title/Title.js";
+import t from "../HighlightPanel/styles.module.scss";
+var b = /* @__PURE__ */ ((l) => (l.medium = "medium", l.large = "large", l.fluid = "fluid", l))(b || {});
+const u = ({ className: l, size: n, children: s }) => /* @__PURE__ */ e.createElement("div", { className: l, "data-testid": "highlightpanel-wrapper" }, /* @__PURE__ */ e.createElement("div", { className: t.highlightpanel__row }, /* @__PURE__ */ e.createElement("div", { className: i(t.highlightpanel__col, n === "medium" && t["highlightpanel__col--offset"]) }, s))), v = (l) => {
+  const { children: n, className: s } = l, a = i(t["highlightpanel__content-wrapper"], s);
+  return /* @__PURE__ */ e.createElement("div", { className: a }, /* @__PURE__ */ e.createElement("div", { className: i(t.highlightpanel__row) }, n));
+}, S = (l) => {
+  const {
+    children: n,
+    color: s = "white",
+    size: a = "medium",
+    testId: c,
+    svgIcon: r,
+    htmlMarkup: I = "div",
+    className: k,
+    contentWrapperClassName: w,
+    title: p,
+    titleHtmlMarkup: y = "h2"
+  } = l, _ = C(), m = i(
+    t[`highlightpanel--${s}`],
+    t[`highlightpanel--${a}`],
+    r && t["highlightpanel--has-icon"],
+    { container: a === "medium" || a === "large" },
+    k
+  ), o = () => {
+    if (r) {
+      const f = a === "large" && _ && _ >= W.md ? N.Medium : N.Small, E = /* @__PURE__ */ e.createElement(H, { testId: "titleId", htmlMarkup: y, appearance: "title4" }, p);
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.highlightpanel__icon }, typeof r == "string" ? /* @__PURE__ */ e.createElement(M, { iconName: r, size: f }) : /* @__PURE__ */ e.createElement(z, { svgIcon: r, size: f }), p && /* @__PURE__ */ e.createElement("div", { className: t.mobile }, E)), /* @__PURE__ */ e.createElement("div", { className: t.highlightpanel__content }, p && /* @__PURE__ */ e.createElement("div", { className: t.desktop, "aria-hidden": "true" }, E), n));
+    }
+    return n;
+  }, h = I, d = i(t["highlightpanel__content-wrapper"], w);
+  return a === "medium" ? /* @__PURE__ */ e.createElement(u, { className: m, size: a }, /* @__PURE__ */ e.createElement(h, { className: d, "data-testid": c, "data-analyticsid": g.HighlightPanel }, o())) : a === "large" && r ? /* @__PURE__ */ e.createElement(u, { className: m, size: a }, /* @__PURE__ */ e.createElement(v, { className: d }, /* @__PURE__ */ e.createElement(
+    h,
+    {
+      className: i(t.highlightpanel__col, t["highlightpanel__col--large-with-icon"]),
+      "data-testid": c,
+      "data-analyticsid": g.HighlightPanel
+    },
+    o()
+  ))) : a === "large" ? /* @__PURE__ */ e.createElement(u, { className: m, size: a }, /* @__PURE__ */ e.createElement(v, { className: d }, /* @__PURE__ */ e.createElement(
+    h,
+    {
+      className: i(t.highlightpanel__col, t["highlightpanel__col--offset"]),
+      "data-testid": c,
+      "data-analyticsid": g.HighlightPanel
+    },
+    o()
+  ))) : a === "fluid" ? /* @__PURE__ */ e.createElement(h, { className: m, "data-testid": c }, o()) : null;
+};
+export {
+  b as HighlightPanelSize,
+  S as default
+};
+//# sourceMappingURL=HighlightPanel.js.map

package/components/HighlightPanel/HighlightPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightPanel.js","sources":["../../../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}

package/components/HighlightPanel/index.d.ts

@@ -0,0 +1,3 @@
+import HighlightPanel from './HighlightPanel';
+export * from './HighlightPanel';
+export default HighlightPanel;

package/components/HighlightPanel/index.js

@@ -0,0 +1,7 @@
+import i from "./HighlightPanel.js";
+import { HighlightPanelSize as o } from "./HighlightPanel.js";
+export {
+  o as HighlightPanelSize,
+  i as default
+};
+//# sourceMappingURL=index.js.map

package/components/HighlightPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/{HighlightBox → HighlightPanel}/styles.module.scss

@@ -22,8 +22,8 @@
   }
 }
 
-.highlightbox {
-  $box: &;
+.highlightpanel {
+  $panel: &;
   $colors: 'neutral', 'blueberry', 'cherry';
 
   // Medium og large har bakgrunnsfarge på den indre wrapperen
@@ -31,8 +31,8 @@
   &--medium,
   &--large {
     @each $color in $colors {
-      &#{$box}--#{$color} {
-        #{$box}__content-wrapper {
+      &#{$panel}--#{$color} {
+        #{$panel}__content-wrapper {
           background-color: var(--color-base-background-#{$color});
           border: 1px solid var(--color-base-border-#{$color});
         }
@@ -40,8 +40,8 @@
     }
 
     // Hvit har sin egen regel siden den ikke har valører
-    &#{$box}--white {
-      #{$box}__content-wrapper {
+    &#{$panel}--white {
+      #{$panel}__content-wrapper {
         background-color: var(--color-base-background-white);
         border: 1px solid var(--color-base-border-onlight-subtle);
       }
@@ -52,19 +52,19 @@
   // slik at bakgrunnsfargen går helt ut til skjermkanten
   &--large {
     @each $color in $colors {
-      &#{$box}--#{$color} {
+      &#{$panel}--#{$color} {
         @include media-breakpoint-down(xs) {
           background-color: var(--color-base-background-#{$color});
         }
       }
     }
 
-    &#{$box}--white {
+    &#{$panel}--white {
       @include media-breakpoint-down(xs) {
         background-color: var(--color-base-background-white);
       }
     }
-    #{$box}__content-wrapper {
+    #{$panel}__content-wrapper {
       padding-top: getSpacer(m);
       padding-bottom: getSpacer(l);
 
@@ -76,7 +76,7 @@
   }
 
   &--medium {
-    #{$box}__content-wrapper {
+    #{$panel}__content-wrapper {
       padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -98,19 +98,19 @@
     }
 
     @each $color in $colors {
-      &#{$box}--#{$color} {
+      &#{$panel}--#{$color} {
         background-color: var(--color-base-background-#{$color});
         border: 1px solid var(--color-base-border-#{$color});
       }
     }
-    &#{$box}--white {
+    &#{$panel}--white {
       background-color: var(--color-base-background-white);
       border: 1px solid var(--color-base-border-onlight-subtle);
     }
   }
 
   &--has-icon#{&}--medium {
-    #{$box}__content-wrapper {
+    #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-flex;
       @include content-wrapper-with-icon-padding;
 
@@ -121,10 +121,10 @@
   }
 
   &--has-icon#{&}--large {
-    #{$box}__col {
+    #{$panel}__col {
       @include content-wrapper-with-icon-flex;
     }
-    #{$box}__content-wrapper {
+    #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-padding;
 
       @media (min-width: map.get($grid-breakpoints, sm)) {
@@ -142,7 +142,7 @@
       }
     }
 
-    #{$box}__icon {
+    #{$panel}__icon {
       @media (min-width: map.get($grid-breakpoints, lg)) {
         @include make-col-ready;
         @include make-col(2);
@@ -154,7 +154,7 @@
       }
     }
 
-    #{$box}__content {
+    #{$panel}__content {
       @media (min-width: map.get($grid-breakpoints, lg)) {
         @include make-col-ready;
         @include make-col(8);

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

@@ -0,0 +1,25 @@
+export type Styles = {
+  desktop: string;
+  highlightpanel__col: string;
+  'highlightpanel__col--large-with-icon': string;
+  'highlightpanel__col--offset': string;
+  highlightpanel__content: string;
+  'highlightpanel__content-wrapper': string;
+  highlightpanel__icon: string;
+  highlightpanel__row: string;
+  'highlightpanel--blueberry': string;
+  'highlightpanel--cherry': string;
+  'highlightpanel--fluid': string;
+  'highlightpanel--has-icon': string;
+  'highlightpanel--large': string;
+  'highlightpanel--medium': string;
+  'highlightpanel--neutral': string;
+  'highlightpanel--white': string;
+  mobile: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AriaLabelAttributes } from '../../utils/accessibility';
 interface HorizontalScrollProps {
+    children?: React.ReactNode;
     /**
      * Bredden på elementet som potensielt vil scrolle horisontalt i px
      */

package/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React"],"mappings":";;;;;AAWA,MAAMA,IAAqB,OAWdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,yCACG,OAAI,EAAA,WAAWa,EAAO,kBAAkB,eAAad,EAGpD,GAAAgB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJe,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDkB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKX,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ;"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React"],"mappings":";;;;;AAWA,MAAMA,IAAqB,OAYdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,yCACG,OAAI,EAAA,WAAWa,EAAO,kBAAkB,eAAad,EAGpD,GAAAgB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJe,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDkB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKX,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ;"}

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'error' | 'success';
+export type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';
 export type NotificationCompactVariants = 'basic' | 'outline';
 export type NotificationPanelSizes = 'small' | 'medium' | 'large';
 export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';