@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/ExpanderList/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 .expander-list {
@@ -46,42 +46,42 @@
       background-color: var(--color-base-background-white);
 
       &--white {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -117,8 +117,8 @@
 .expander-list-link {
   padding: 0;
   position: relative;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
   display: flex;
   cursor: pointer;
   font-family: inherit;
@@ -132,8 +132,8 @@
   outline: none;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 
   &--open {
@@ -142,7 +142,7 @@
 
   &--fill,
   &--fill-negative {
-    margin-top: getSpacer(s);
+    margin-top: spacers.getSpacer(s);
   }
 
   &--fill-negative {
@@ -150,7 +150,7 @@
   }
 
   &--closed#{&}--fill {
-    margin-bottom: getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 
   &:focus-visible:not(.expander-list-link--outline) {
@@ -237,21 +237,21 @@
   }
 
   &--large {
-    font-size: $font-size-lg;
-    line-height: $lineheight-size-lg;
+    font-size: font-settings.$font-size-lg;
+    line-height: font-settings.$lineheight-size-lg;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    margin-right: getSpacer(2xs);
+    margin-right: spacers.getSpacer(2xs);
   }
 
   &__chevron {
     display: flex;
     align-items: center;
     margin-left: auto;
-    padding-left: getSpacer(2xs);
+    padding-left: spacers.getSpacer(2xs);
   }
 
   &__main-content {
@@ -267,7 +267,7 @@
     }
 
     &--padding {
-      padding: getSpacer(xs) getSpacer(s) getSpacer(l);
+      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l);
     }
   }
 }

package/components/EyebrowHeader/styles.module.scss

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

package/components/FormGroup/styles.module.scss

@@ -1,12 +1,12 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as *;
 
 .form-group-wrapper {
   &__title {
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }
@@ -21,20 +21,20 @@
   margin: 0;
   display: flex;
   flex-flow: column;
-  gap: getSpacer(s);
+  gap: spacers.getSpacer(s);
 
   > div {
     padding-bottom: 0;
   }
 
   &__legend {
-    margin-bottom: getSpacer(m);
+    margin-bottom: spacers.getSpacer(m);
     margin-top: 0;
 
-    @include legend;
+    @include fonts.legend;
 
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }

package/components/FormLayout/styles.module.scss

@@ -1,16 +1,15 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
+@use '../../scss/spacers' as spacers;
 
 .form-layout-container {
-  // Settes med harde verdier fordi calc() lenger nede ikke støtter getSpacer()
+  // Settes med harde verdier fordi calc() lenger nede ikke støtter spacers.getSpacer()
   --column-gap: 2rem;
 
   display: flex;
   flex-wrap: wrap;
-  gap: getSpacer(s) var(--column-gap);
+  gap: spacers.getSpacer(s) var(--column-gap);
 
   &--large {
-    row-gap: getSpacer(2xs);
+    row-gap: spacers.getSpacer(2xs);
   }
 }
 

package/components/HelpBubble/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../AnchorLink/styles.module';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../AnchorLink/styles.module' as anchorlink;
+@use '../../scss/breakpoints' as *;
 
 .helpbubble {
   $bubble: &;
@@ -12,12 +12,12 @@
   align-items: flex-start !important;
   text-align: start;
   font-family: inherit;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 
   &__content {
@@ -26,8 +26,8 @@
     flex-direction: column;
     align-items: flex-start;
     overflow-wrap: anywhere;
-    row-gap: getSpacer(2xs);
-    padding: getSpacer(s) getSpacer(s) getSpacer(m);
+    row-gap: spacers.getSpacer(2xs);
+    padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(m);
 
     &--close {
       padding-right: 0;
@@ -41,11 +41,11 @@
   &__link {
     all: unset;
 
-    @include anchorlink;
+    @include anchorlink.anchorlink;
   }
 
   &__close {
     order: 2;
-    padding: getSpacer(2xs) getSpacer(2xs) 0 0;
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0 0;
   }
 }

package/components/HelpPanel/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/palette';
+@use '../../scss/palette' as palette;
 
 .help-panel {
-  background-color: $plum50 !important;
+  background-color: palette.$plum50 !important;
 }

package/components/HelpQuestion/index.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { T as Trigger } from "../../Trigger.js";
 import styles from "./styles.module.scss";
-const HelpQuestion = React.forwardRef(
+const HelpQuestion = React__default.forwardRef(
   ({ children, selected = false, className, onClick, testId }, ref) => {
     const { isHovered, refObject } = usePseudoClasses();
     const classes = classNames(styles.helpquestion, selected && styles["helpquestion--selected"], className);

package/components/HelpQuestion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":[],"mappings":";;;;;;;;AA8BA,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,SAAS,OAAO,GAAG,QAAQ;AACnE,UAAM,EAAE,WAAW,UAAU,IAAI,iBAAoC;AAE/D,UAAA,UAAU,WAAW,OAAO,cAAc,YAAY,OAAO,wBAAwB,GAAG,SAAS;AAGrG,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX;AAAA,QACA,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;AAAA,QAC/B,iBAAe;AAAA,QACf,oBAAkB,YAAY;AAAA,QAE9B,UAAA;AAAA,UAAA,oBAAC,WAAQ,SAAQ,QAAO,YAAW,QAAO,UAAoB,WAAsB;AAAA,UACnF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["React"],"mappings":";;;;;;;;AA8BA,MAAM,eAAeA,eAAM;AAAA,EACzB,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,SAAS,OAAO,GAAG,QAAQ;AACnE,UAAM,EAAE,WAAW,UAAU,IAAI,iBAAoC;AAE/D,UAAA,UAAU,WAAW,OAAO,cAAc,YAAY,OAAO,wBAAwB,GAAG,SAAS;AAGrG,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX;AAAA,QACA,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;AAAA,QAC/B,iBAAe;AAAA,QACf,oBAAkB,YAAY;AAAA,QAE9B,UAAA;AAAA,UAAA,oBAAC,WAAQ,SAAQ,QAAO,YAAW,QAAO,UAAoB,WAAsB;AAAA,UACnF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}

package/components/HelpQuestion/styles.module.scss

@@ -1,49 +1,49 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .helpquestion {
   display: inline-flex;
   align-items: center;
   text-align: left;
-  gap: getSpacer(2xs);
-  padding: getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(3xs);
+  gap: spacers.getSpacer(2xs);
+  padding: spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(3xs);
   border: 0;
   outline: none;
   background-color: transparent;
   cursor: pointer;
-  color: $plum600;
+  color: palette.$plum600;
   font-weight: 600;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-xs;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-xs;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    gap: getSpacer(2xs);
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
+    gap: spacers.getSpacer(2xs);
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-sm;
   }
 
   &:hover {
-    color: $plum800;
-    background-color: rgba($plum600, 0.1);
+    color: palette.$plum800;
+    background-color: rgba(palette.$plum600, 0.1);
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 3px $black;
+    box-shadow: inset 0 0 0 3px palette.$black;
   }
 
   &--selected {
-    color: $plum800;
-    background-color: rgba($plum600, 0.1);
+    color: palette.$plum800;
+    background-color: rgba(palette.$plum600, 0.1);
 
     &:hover {
-      background-color: rgba($plum600, 0.2);
+      background-color: rgba(palette.$plum600, 0.2);
     }
 
     &:focus-visible {
-      background-color: rgba($plum600, 0.1);
+      background-color: rgba(palette.$plum600, 0.1);
     }
   }
 }

package/components/HighlightPanel/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/grid';
-@import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
 @mixin content-wrapper-with-icon-flex {
@@ -17,11 +17,7 @@
 }
 
 @mixin content-wrapper-with-icon-padding {
-  padding-top: getSpacer(s);
-
-  @media (min-width: map.get($grid-breakpoints, xl)) {
-    padding-top: getSpacer(m);
-  }
+  padding-top: spacers.getSpacer(m);
 }
 
 .highlightpanel {
@@ -50,53 +46,37 @@
     }
   }
 
-  // large skal også ha bakgrunnsfarge på den ytre containeren på de minste skjermnene
-  // slik at bakgrunnsfargen går helt ut til skjermkanten
   &--large {
-    @each $color in $colors {
-      &#{$panel}--#{$color} {
-        @include media-breakpoint-down(xs) {
-          background-color: var(--color-base-background-#{$color});
-        }
-      }
-    }
-
-    &#{$panel}--white {
-      @include media-breakpoint-down(xs) {
-        background-color: var(--color-base-background-white);
-      }
-    }
     #{$panel}__content-wrapper {
-      padding-top: getSpacer(m);
-      padding-bottom: getSpacer(l);
+      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
+        padding-top: spacers.getSpacer(l);
+        padding-bottom: spacers.getSpacer(xl);
       }
     }
   }
 
   &--medium {
     #{$panel}__content-wrapper {
-      padding: getSpacer(m) getSpacer(s) getSpacer(l);
+      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(m) getSpacer(l);
+        padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: getSpacer(l);
+        padding: spacers.getSpacer(l);
       }
     }
   }
 
   // fluid skal ha bakgrunnsfarge på den ytre containeren
   &--fluid {
-    padding: getSpacer(m) getSpacer(s) getSpacer(l);
+    padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding: getSpacer(m) getSpacer(m) getSpacer(l);
+      padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
     }
 
     @each $color in $colors {
@@ -118,7 +98,7 @@
       @include content-wrapper-with-icon-flex-responsive;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(m);
+        padding-left: spacers.getSpacer(m);
       }
     }
   }
@@ -132,17 +112,17 @@
       @include content-wrapper-with-icon-padding;
 
       @media (min-width: map.get($grid-breakpoints, sm)) {
-        padding-left: getSpacer(s);
+        padding-left: spacers.getSpacer(s);
       }
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: getSpacer(m);
+        padding-left: spacers.getSpacer(m);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: 0;
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
+        padding-top: spacers.getSpacer(l);
+        padding-bottom: spacers.getSpacer(xl);
       }
     }
 
@@ -154,7 +134,7 @@
         display: flex;
         justify-content: flex-end;
         margin-right: 0;
-        padding-right: getSpacer(s);
+        padding-right: spacers.getSpacer(s);
       }
     }
 
@@ -180,8 +160,8 @@
 
   &__icon {
     display: inline-flex;
-    margin-right: getSpacer(s);
-    margin-bottom: getSpacer(2xs);
+    margin-right: spacers.getSpacer(s);
+    margin-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       margin-bottom: 0;
@@ -219,21 +199,9 @@
       }
     }
   }
-}
-
-.mobile {
-  display: flex;
-  align-items: center;
-
-  @media screen and (width >= 768px) {
-    @include sr-only;
-  }
-}
-
-.desktop {
-  display: none;
 
-  @media screen and (width >= 768px) {
+  &__title-wrapper {
     display: flex;
+    align-items: center;
   }
 }

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

@@ -1,5 +1,4 @@
 export type Styles = {
-  desktop: string;
   highlightpanel__col: string;
   'highlightpanel__col--large-with-icon': string;
   'highlightpanel__col--offset': string;
@@ -7,6 +6,7 @@ export type Styles = {
   'highlightpanel__content-wrapper': string;
   highlightpanel__icon: string;
   highlightpanel__row: string;
+  'highlightpanel__title-wrapper': string;
   'highlightpanel--blueberry': string;
   'highlightpanel--cherry': string;
   'highlightpanel--fluid': string;
@@ -15,7 +15,6 @@ export type Styles = {
   'highlightpanel--medium': string;
   'highlightpanel--neutral': string;
   'highlightpanel--white': string;
-  mobile: string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HorizontalScroll/styles.module.scss

@@ -1,5 +1,6 @@
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 // Disables fordi stylelint og prettier er uenige
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
@@ -15,7 +16,7 @@ $gradient:
     display: flex;
 
     &:focus-visible {
-      outline: getSpacer(4xs) solid $black;
+      outline: spacers.getSpacer(4xs) solid palette.$black;
       outline-offset: -1px;
     }
 

package/components/Icons/EuropeanHealthCard.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 const EuropeanHealthCard = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsx("path", { d: "M24.312 28.655l-.437-.886-.437.886-.978.142.708.69-.167.973.874-.46.874.46-.166-.973.707-.69-.978-.142zm-.437-11.365l-.437.886-.978.142.708.689-.167.974.874-.46.874.46-.166-.974.707-.689-.978-.142-.437-.886zm4.147 9.814l-.438-.886-.437.886-.977.142.707.69-.167.973.874-.46.875.46-.167-.973.707-.69-.977-.142zm1.53-3.689l-.437-.885-.438.885-.977.142.707.69-.167.973.875-.459.874.459-.167-.973.707-.69-.977-.142zm12.125 10.472c0 1.081-.88 1.961-1.961 1.961H8.034a1.964 1.964 0 01-1.961-1.961V13.863c0-1.082.88-1.961 1.961-1.961h31.682c1.081 0 1.961.879 1.961 1.961v20.024zm-1.961-23.285H8.034a3.265 3.265 0 00-3.261 3.261v20.024a3.265 3.265 0 003.261 3.261h31.682a3.265 3.265 0 003.261-3.261V13.863a3.265 3.265 0 00-3.261-3.261zM26.71 21.532l.874-.46.875.46-.167-.974.707-.689-.977-.142-.438-.886-.437.886-.977.142.707.689-.167.974zm-6.544-2.691l-.437.886-.978.142.707.689-.167.974.875-.46.874.46-.167-.974.707-.689-.977-.142-.437-.886zm-.823 5.406l.707-.69-.977-.142-.437-.885-.438.885-.977.142.707.69-.167.973.875-.459.874.459-.167-.973zm1.26 2.857l-.437-.886-.437.886-.978.142.707.69-.167.973.875-.46.874.46-.167-.973.707-.69-.977-.142z" });
   const normalHover = /* @__PURE__ */ jsxs("g", { children: [

package/components/Icons/GroupTwins.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { g as getIcon } from "../../Icon.js";
 const GroupTwins = ({ size, isHovered }) => {
   const normal = /* @__PURE__ */ jsxs(Fragment, { children: [

package/components/Icons/Inbox.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 const Inbox = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsx(
     "path",

package/components/Icons/LawBook.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 const LawBook = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsx("path", { d: "M35.946 34.948H16.633V8.731h18.548c.422 0 .765.343.765.765v25.452zm0 2.478H12.471a1.675 1.675 0 011.593-1.177h21.882v1.177zm0 1.411a.765.765 0 01-.765.764H14.064a1.674 1.674 0 01-1.592-1.175h23.474v.411zm-23.559-28.43c0-.925.751-1.676 1.675-1.676h1.271v26.217h-1.269c-.622 0-1.199.193-1.677.521V10.406zM35.181 7.43H14.062a2.98 2.98 0 00-2.975 2.976v27.187h.034c-.013.11-.034.218-.034.333a2.98 2.98 0 002.977 2.976h21.117a2.068 2.068 0 002.065-2.065V9.497a2.068 2.068 0 00-2.065-2.067zm-6.8 15.496a1.133 1.133 0 01-.695.532c-.294.078-.602.04-.866-.114l-1.999-1.154a1.127 1.127 0 01-.385-1.53 1.141 1.141 0 011.56-.418l1.075.621.005-.008.886.512a1.142 1.142 0 01.418 1.559zm.952.55a2.228 2.228 0 00.223-1.7 2.227 2.227 0 00-1.044-1.362l-3.517-2.03a1.145 1.145 0 01-.419-1.56c.315-.547 1.014-.733 1.522-.442l1.474 1.02.626-.904-1.512-1.045a2.246 2.246 0 00-3.062.821 2.242 2.242 0 00.73 2.997 2.213 2.213 0 00-1.094 2.54c.145.544.488.997.96 1.3l-.002.001.017.01c.024.014.044.035.07.05l3.516 2.031c.265.152.454.398.532.693.08.294.04.602-.114.865-.314.545-1.012.735-1.536.433l-2.45-1.583-.597.924 2.474 1.598a2.244 2.244 0 003.063-.821 2.233 2.233 0 00-.728-2.996c.357-.195.66-.478.868-.84z" });
   const normalHover = /* @__PURE__ */ jsxs("g", { children: [

package/components/Icons/PersonCancel.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { g as getIcon } from "../../Icon.js";
 const PersonCancel = ({ size, isHovered }) => {
   const normal = /* @__PURE__ */ jsxs(Fragment, { children: [

package/components/Icons/PersonWithBrain.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 const PersonWithBrain = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsx("path", { d: "M26.604 20.51a1.02 1.02 0 100 2.042 1.02 1.02 0 000-2.041zm7.896 6.297a.826.826 0 01-.707.387h-1.856v2.04c0 2.923-2.377 5.3-5.3 5.3h-.65v5.185H13.846V34.32c0-2.601-.918-4.414-1.888-6.335-1.08-2.133-2.193-4.34-2.193-7.971 0-5.46 4.222-11.351 11.043-11.351 5.396 0 11.129 4.055 11.129 11.572v.144l2.616 5.624a.822.822 0 01-.053.803zm1.232-1.352l-2.495-5.364c-.073-8.268-6.44-12.728-12.43-12.728-6.806 0-12.343 5.676-12.343 12.652 0 3.943 1.24 6.394 2.333 8.557.939 1.856 1.748 3.459 1.748 5.749v6.698h14.743v-5.216c3.335-.328 5.95-3.15 5.95-6.57v-.738h.555c.734 0 1.408-.37 1.802-.99a2.123 2.123 0 00.137-2.05zM24.32 14.568l-.942.942a3.645 3.645 0 00-2.545-.107l-.41-.688a2.091 2.091 0 01.275-2.496l.65-.69c.904.128 1.8.397 2.64.812.389.192.654.553.726.99.075.453-.073.915-.394 1.237zm-6.29 6.29l-.46-.45a1.998 1.998 0 01-.262-2.54l.047-.068c.264.195.577.299.894.299.32 0 .642-.102.915-.311l1.229-.942a2.555 2.555 0 012.099-.45l-4.462 4.462zm-2.371 2.37a1.402 1.402 0 01-1.321.375 1.338 1.338 0 01-.988-.89 10.527 10.527 0 01-.533-2.818l.955.499c.418.215.874.322 1.329.322.398 0 .793-.086 1.162-.247.144.26.318.509.538.725l.45.442-1.592 1.592zm-.333-9.881l1.092 1.078c.15.147.163.382.029.545a1.508 1.508 0 00.075 1.993l.04.043-.168.252a3.083 3.083 0 00-.485 2.15 1.795 1.795 0 01-1.63.01l-1.464-.765c.133-1.946 1.018-3.917 2.51-5.306zm4.579-1.891l-.007.007a3.195 3.195 0 00-.42 3.814l.367.617c-.04.028-.081.05-.12.079l-1.23.942a.406.406 0 01-.54-.042l-.636-.668a.406.406 0 01-.021-.538 1.5 1.5 0 00-.108-2.026l-.994-.98a7.003 7.003 0 013.709-1.205zm5.894 1.697a2.42 2.42 0 00-1.325-1.8 9.704 9.704 0 00-4.271-1.013c-5.258 0-8.512 4.578-8.512 8.819 0 1.42.196 2.66.617 3.907.275.812.94 1.412 1.78 1.609a2.493 2.493 0 002.348-.669l8.66-8.661a2.521 2.521 0 00.703-2.192z" });
   const normalHover = /* @__PURE__ */ jsxs("g", { children: [

package/components/Icons/Puzzle.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 const Puzzle = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsx("path", { d: "M28.075 25.025a4.596 4.596 0 00-.915 3.863c.372 1.771 1.825 3.18 3.616 3.507a4.6 4.6 0 003.234-.598c.394-.242.906-.37 1.479-.37h.19v7.983H12.07v-7.984h.08c.645 0 1.195.134 1.634.398a4.549 4.549 0 002.34.648 4.553 4.553 0 003.55-1.692 4.594 4.594 0 00.916-3.862c-.371-1.77-1.824-3.18-3.614-3.507a4.579 4.579 0 00-3.236.597c-.394.242-.905.371-1.48.371h-.19v-7.543c0-.57.464-1.035 1.035-1.035h8.545v-1.674c0-.816-.195-1.563-.563-2.162a3.242 3.242 0 01-.426-2.318 3.246 3.246 0 012.496-2.578 3.29 3.29 0 012.775.654 3.256 3.256 0 01.748 4.211c-.385.645-.582 1.42-.582 2.303v1.564h8.545c.572 0 1.035.464 1.035 1.035v7.543h-.08c-.644 0-1.194-.134-1.633-.398a4.549 4.549 0 00-2.341-.648 4.554 4.554 0 00-3.55 1.692zm5.222.071c.644.387 1.42.582 2.302.582h1.38v-8.842a2.338 2.338 0 00-2.335-2.335H27.4v-.264c0-.645.133-1.195.396-1.634a4.554 4.554 0 00-1.043-5.89 4.6 4.6 0 00-3.863-.917c-1.771.373-3.18 1.827-3.507 3.618a4.589 4.589 0 00.597 3.233c.242.393.37.905.37 1.48v.374h-7.244a2.338 2.338 0 00-2.336 2.335v8.842h1.49c.816 0 1.564-.195 2.163-.563a3.235 3.235 0 012.32-.425 3.246 3.246 0 012.576 2.495 3.305 3.305 0 01-.653 2.776c-.996 1.228-2.862 1.56-4.212.748-.645-.387-1.42-.582-2.303-.582H10.77V40.71h26.21V30.127h-1.491c-.814 0-1.561.194-2.161.563a3.24 3.24 0 01-2.32.425 3.247 3.247 0 01-2.577-2.495 3.306 3.306 0 01.654-2.776c.996-1.228 2.86-1.559 4.212-.748zM14.61 37.421h18.53v-1.1H14.61v1.1z" });
   const normalHover = /* @__PURE__ */ jsxs("g", { children: [

package/components/Icons/Snapchat.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 const Snapchat = ({ isHovered }) => {
   const normal = /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx("path", { d: "M36.843 34.435l-.464.047-.57 2.476c-.15-.053-.316-.119-.483-.187-1.097-.44-2.755-1.11-4.745-.08-.772.4-1.382.814-1.97 1.214-1.312.89-2.347 1.592-4.508 1.651-2.197-.059-3.232-.762-4.542-1.65-.59-.4-1.199-.815-1.972-1.215a4.605 4.605 0 00-2.155-.545c-1.036 0-1.918.355-2.589.625-.168.068-.333.134-.482.187l-.572-2.476-.463-.047c-1.923-.197-3.859-.74-4.054-1.076.001-.004.13-.374 1.556-1.006 5.921-2.62 5.99-6.667 5.99-6.838l-.047-.242c-.427-1.062-1.446-1.382-2.264-1.638-1.05-.33-1.387-.497-1.363-1.22a.629.629 0 01.226-.472c.625-.566 2.298-.684 3.214-.625l.693.045V16.85c0-8.309 8.446-8.406 8.807-8.406.36 0 8.807.097 8.807 8.406l.001 4.514.691-.045c.907-.059 2.588.06 3.214.625a.63.63 0 01.227.471c.023.724-.315.891-1.364 1.221-.817.256-1.836.576-2.262 1.638l-.047.242c0 .171.068 4.218 5.988 6.838 1.367.605 1.567.948 1.56.946-.221.401-2.146.941-4.058 1.136m3.023-3.27c-4.591-2.033-5.14-4.88-5.204-5.522.216-.375.682-.546 1.39-.768.928-.292 2.33-.732 2.273-2.503a1.927 1.927 0 00-.654-1.393c-.895-.812-2.534-.96-3.476-.973V16.85c0-2.793-.852-5.059-2.531-6.733-2.937-2.93-7.33-2.973-7.572-2.973h-.01c-.245 0-4.636.044-7.573 2.973-1.68 1.674-2.53 3.94-2.53 6.733v3.157c-.943.013-2.581.161-3.478.973-.41.372-.636.853-.653 1.393-.058 1.771 1.345 2.211 2.273 2.503.708.222 1.174.392 1.39.767-.066.652-.62 3.493-5.205 5.522-1.08.478-2.492 1.241-2.315 2.356.217 1.366 2.883 1.93 4.743 2.156l.623 2.701h.517c.463 0 .924-.185 1.457-.4 1.033-.416 2.203-.887 3.66-.132.705.365 1.283.757 1.84 1.135 1.368.93 2.66 1.806 5.273 1.876 2.576-.07 3.869-.947 5.237-1.876.558-.378 1.136-.77 1.839-1.135 1.456-.755 2.627-.284 3.66.132.534.215.995.4 1.458.4h.518l.623-2.7c1.86-.228 4.525-.79 4.742-2.157.178-1.115-1.235-1.878-2.315-2.356" }),

package/components/Illustrations/IllustrationNames.d.ts

@@ -1,5 +1,5 @@
 /** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/
-export declare const IllustrationList: readonly ["Doctor", "FacialRecognitionFingerprint", "HealthcarePersonnel"];
+export declare const IllustrationList: readonly ["Doctor", "FacialRecognitionFingerprint", "HealthcarePersonnel", "ReadLetters", "Support2"];
 export interface IllustrationSize {
     small?: string;
     medium?: string;