@helsenorge/designsystem-react 1.0.0-beta105 → 1.0.0-beta109

package/components/FormGroup/FormGroup.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import { FormMode, FormVariant } from '../../constants';
-export interface FormGroupProps {
-    /** title for the the fieldset */
-    title?: string;
-    /** text placed in the legend tag of the fieldset */
-    legend?: string;
-    /** Items in the FormGroup component */
-    children?: React.ReactNode;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Changes the visuals of the formgroup */
-    mode?: keyof typeof FormMode;
-    /** Changes the visuals of the formgroup */
-    variant?: keyof typeof FormVariant;
-    /** Error message */
-    error?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /** Unique identifyer for the child input tags */
-    name?: string;
-}
-export declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLElement>>;
-export default FormGroup;
+import React from 'react';
+import { FormMode, FormVariant } from '../../constants';
+export interface FormGroupProps {
+    /** title for the the fieldset */
+    title?: string;
+    /** text placed in the legend tag of the fieldset */
+    legend?: string;
+    /** Items in the FormGroup component */
+    children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the formgroup */
+    mode?: keyof typeof FormMode;
+    /** Changes the visuals of the formgroup */
+    variant?: keyof typeof FormVariant;
+    /** Error message */
+    error?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Unique identifyer for the child input tags */
+    name?: string;
+}
+export declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLElement>>;
+export default FormGroup;
 //# sourceMappingURL=FormGroup.d.ts.map

package/components/FormGroup/index.d.ts

@@ -1,4 +1,4 @@
-import FormGroup from './FormGroup';
-export * from './FormGroup';
-export default FormGroup;
+import FormGroup from './FormGroup';
+export * from './FormGroup';
+export default FormGroup;
 //# sourceMappingURL=index.d.ts.map

package/components/FormGroup/index.js

@@ -1,2 +1,2 @@
-import{F as s}from"../../FormGroup-0577b07f.js";export{F as FormGroup,F as default}from"../../FormGroup-0577b07f.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../Checkbox-798282e4.js";import"../../uuid-fe7442b7.js";import"../../Check-6291ad09.js";import"../../Icon-89da8de4.js";import"../../_tslib-51c8a283.js";import"../../constants-ad6c82db.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-fe4bbd36.js";import"../RadioButton/styles.module.scss";import"../../Input-19650c24.js";import"../../useBreakpoint-552af2b9.js";import"../Input/styles.module.scss";import"../../Title-af53f589.js";import"../Title/styles.module.scss";
+import{F as s}from"../../FormGroup-fbf475ed.js";export{F as FormGroup,F as default}from"../../FormGroup-fbf475ed.js";import"../../_rollupPluginBabelHelpers-6b3099b0.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../Checkbox-8e590de0.js";import"../../uuid-fe7442b7.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../_tslib-51c8a283.js";import"../../constants-075356e2.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-b0da1997.js";import"../RadioButton/styles.module.scss";import"../../Input-cd0319e0.js";import"../../useBreakpoint-3186b97e.js";import"../Input/styles.module.scss";import"../../Title-1d8708ea.js";import"../Title/styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/FormGroup/styles.module.scss

@@ -1,67 +1,67 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
-
-.form-group-wrapper {
-  &__title {
-    &--on-dark {
-      color: $white;
-    }
-  }
-
-  &__errors {
-    font-size: $font-size-sm;
-    font-weight: 600;
-    color: $cherry500;
-    margin-top: 0;
-  }
-}
-
-.form-group-wrapper:first-of-type {
-  padding-top: getSpacer(xl);
-}
-
-.form-group-wrapper:last-of-type {
-  padding-bottom: getSpacer(xl);
-}
-
-.form-group {
-  padding: getSpacer(s) 0 getSpacer(m);
-
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    padding: getSpacer(s) 0 getSpacer(l);
-  }
-
-  &--invalid {
-    margin-left: getSpacer(xs) * -1;
-    margin-right: getSpacer(xs) * -1;
-    padding-left: getSpacer(2xs);
-    padding-right: getSpacer(xs);
-    background-color: $cherry100;
-    border-left: getSpacer(3xs) solid $cherry500;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      margin-left: (getSpacer(m) + 0.25rem) * -1;
-      margin-right: (getSpacer(m) + 0.25rem) * -1;
-      padding-left: getSpacer(m);
-      padding-right: getSpacer(m);
-    }
-  }
-}
-
-.field-set {
-  border: none;
-  padding: 0;
-  margin: 0;
-
-  &__legend {
-    font-size: $font-size-md;
-    font-weight: 600;
-    margin-bottom: getSpacer(m);
-
-    &--on-dark {
-      color: $white;
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.form-group-wrapper {
+  &__title {
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__errors {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin-top: 0;
+  }
+}
+
+.form-group-wrapper:first-of-type {
+  padding-top: getSpacer(xl);
+}
+
+.form-group-wrapper:last-of-type {
+  padding-bottom: getSpacer(xl);
+}
+
+.form-group {
+  padding: getSpacer(s) 0 getSpacer(m);
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding: getSpacer(s) 0 getSpacer(l);
+  }
+
+  &--invalid {
+    margin-left: getSpacer(xs) * -1;
+    margin-right: getSpacer(xs) * -1;
+    padding-left: getSpacer(2xs);
+    padding-right: getSpacer(xs);
+    background-color: $cherry100;
+    border-left: getSpacer(3xs) solid $cherry500;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-left: (getSpacer(m) + 0.25rem) * -1;
+      margin-right: (getSpacer(m) + 0.25rem) * -1;
+      padding-left: getSpacer(m);
+      padding-right: getSpacer(m);
+    }
+  }
+}
+
+.field-set {
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  &__legend {
+    font-size: $font-size-md;
+    font-weight: 600;
+    margin-bottom: getSpacer(m);
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+}

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

@@ -1,16 +1,16 @@
-export type Styles = {
-  'field-set': string;
-  'field-set__legend': string;
-  'field-set__legend--on-dark': string;
-  'form-group': string;
-  'form-group--invalid': string;
-  'form-group-wrapper': string;
-  'form-group-wrapper__errors': string;
-  'form-group-wrapper__title--on-dark': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'field-set': string;
+  'field-set__legend': string;
+  'field-set__legend--on-dark': string;
+  'form-group': string;
+  'form-group--invalid': string;
+  'form-group-wrapper': string;
+  'form-group-wrapper__errors': string;
+  'form-group-wrapper__title--on-dark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HighlightBox/HighlightBox.d.ts

@@ -1,24 +1,27 @@
-import React from 'react';
-import { PaletteNames } from '../../theme/palette';
-export declare type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;
-export declare enum HighlightBoxSize {
-    medium = "medium",
-    large = "large",
-    fluid = "fluid"
-}
-export declare type HighlightBoxTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'>;
-interface HighlightBoxProps {
-    /** What's in the box? */
-    children: React.ReactNode;
-    /** Changes the background color. Default: white */
-    color?: HighlightBoxColors;
-    /** Changes the size. Default: medium */
-    size?: keyof typeof HighlightBoxSize;
-    /** Changes the underlying element. Default: div */
-    htmlMarkup?: HighlightBoxTags;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare const HighlightBox: React.FC<HighlightBoxProps>;
-export default HighlightBox;
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icons';
+export declare type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;
+export declare enum HighlightBoxSize {
+    medium = "medium",
+    large = "large",
+    fluid = "fluid"
+}
+export declare type HighlightBoxTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'>;
+interface HighlightBoxProps {
+    /** What's in the box? */
+    children: React.ReactNode;
+    /** Changes the background color. Default: white */
+    color?: HighlightBoxColors;
+    /** Changes the size. Default: medium */
+    size?: keyof typeof HighlightBoxSize;
+    /** Adds an icon to the highlightbox. */
+    svgIcon?: SvgIcon;
+    /** Changes the underlying element. Default: div */
+    htmlMarkup?: HighlightBoxTags;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const HighlightBox: React.FC<HighlightBoxProps>;
+export default HighlightBox;
 //# sourceMappingURL=HighlightBox.d.ts.map

package/components/HighlightBox/HighlightBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,oBAAY,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwB7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAGnD,oBAAY,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/HighlightBox/componentdata.json

@@ -100,6 +100,25 @@
         ]
       }
     },
+    "svgIcon": {
+      "defaultValue": null,
+      "description": "Adds an icon to the highlightbox.",
+      "name": "svgIcon",
+      "parent": {
+        "fileName": "src/components/HighlightBox/HighlightBox.tsx",
+        "name": "HighlightBoxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HighlightBox/HighlightBox.tsx",
+          "name": "HighlightBoxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "FC<SvgPathProps>"
+      }
+    },
     "htmlMarkup": {
       "defaultValue": null,
       "description": "Changes the underlying element. Default: div",

package/components/HighlightBox/index.d.ts

@@ -1,4 +1,4 @@
-import HighlightBox from './HighlightBox';
-export * from './HighlightBox';
-export default HighlightBox;
+import HighlightBox from './HighlightBox';
+export * from './HighlightBox';
+export default HighlightBox;
 //# sourceMappingURL=index.d.ts.map

package/components/HighlightBox/index.js

@@ -1,2 +1,2 @@
-import t from"react";import{c as e}from"../../index-9b84fabc.js";import i from"./styles.module.scss";import{A as a}from"../../constants-ad6c82db.js";var o;!function(t){t.medium="medium",t.large="large",t.fluid="fluid"}(o||(o={}));export default function(l){var d=l.children,r=l.color,s=void 0===r?"white":r,c=l.size,m=void 0===c?o.medium:c,h=l.testId,n=l.htmlMarkup,g=void 0===n?"div":n,u=e(i.highlightbox,i["highlightbox--".concat(s)],i["highlightbox--".concat(m)]),f=g;return l.size===o.fluid?t.createElement(f,{className:u,"data-testid":h},d):t.createElement("div",{className:u},t.createElement("div",{className:i.highlightbox__row},t.createElement(f,{className:i.highlightbox__col,"data-testid":h,"data-analyticsid":a.HighlightBox},d)))}export{o as HighlightBoxSize};
+import e from"react";import{c as t}from"../../index-9b84fabc.js";import i from"./styles.module.scss";import{A as a,I as l}from"../../constants-075356e2.js";import{Icon as r}from"../Icons/Icon.js";import{u as c,B as o}from"../../useBreakpoint-3186b97e.js";import"../../_tslib-51c8a283.js";import"../../_rollupPluginBabelHelpers-6b3099b0.js";import"../../grid-c105cad1.js";var s;!function(e){e.medium="medium",e.large="large",e.fluid="fluid"}(s||(s={}));var m=function(a){var l=a.className,r=a.size,c=a.children;return e.createElement("div",{className:l},e.createElement("div",{className:i.highlightbox__row},e.createElement("div",{className:t(i.highlightbox__col,r===s.medium&&i["highlightbox__col--offset"])},c)))},n=function(a){var l=a.children;return e.createElement("div",{className:i["highlightbox__content-wrapper"]},e.createElement("div",{className:t(i.highlightbox__row)},l))};export default function(h){var g=h.children,d=h.color,u=void 0===d?"white":d,_=h.size,b=void 0===_?s.medium:_,x=h.testId,f=h.svgIcon,p=h.htmlMarkup,v=void 0===p?"div":p,E=c(),N=t(i.highlightbox,i["highlightbox--".concat(u)],i["highlightbox--".concat(b)],f&&i["highlightbox--has-icon"]),j=function(){if(f){var t=b===s.large&&E&&E>=o.md?l.Medium:l.Small;return e.createElement(e.Fragment,null,e.createElement("div",{className:i.highlightbox__icon},e.createElement(r,{svgIcon:f,size:t})),e.createElement("div",{className:i.highlightbox__content},g))}return g},w=v;return b===s.medium?e.createElement(m,{className:N,size:b},e.createElement(w,{className:i["highlightbox__content-wrapper"],"data-testid":x,"data-analyticsid":a.HighlightBox},j())):b===s.large&&f?e.createElement(m,{className:N,size:b},e.createElement(n,null,e.createElement(w,{className:t(i.highlightbox__col,i["highlightbox__col--large-with-icon"]),"data-testid":x,"data-analyticsid":a.HighlightBox},j()))):b===s.large?e.createElement(m,{className:N,size:b},e.createElement(n,null,e.createElement(w,{className:t(i.highlightbox__col,i["highlightbox__col--offset"]),"data-testid":x,"data-analyticsid":a.HighlightBox},j()))):b===s.fluid?e.createElement(w,{className:N,"data-testid":x},j()):null}export{s as HighlightBoxSize};
 //# sourceMappingURL=index.js.map

package/components/HighlightBox/styles.module.scss

@@ -1,89 +1,174 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_grid.scss';
-
-.highlightbox {
-  $box: &;
-  $colors: 'blueberry', 'cherry', 'neutral', 'kiwi', 'plum';
-
-  &--medium,
-  &--large {
-    @include make-container;
-  }
-
-  // large og fluid skal ha bakgrunnsfarge på den ytre containeren
-  &--large,
-  &--fluid {
-    @each $color in $colors {
-      &#{$box}--#{$color} {
-        background-color: map-get($palette-map, #{$color}50);
-      }
-    }
-    // Hvit har sin egen regel siden den ikke har valører
-    &#{$box}--white {
-      background-color: $white;
-    }
-  }
-
-  // medium skal ha bakgrunnsfarge på den indre kolonnen
-  @each $color in $colors {
-    &--medium#{&}--#{$color} {
-      #{$box}__col {
-        background-color: map-get($palette-map, #{$color}50);
-      }
-    }
-  }
-  &--medium#{&}--white {
-    #{$box}__col {
-      background-color: $white;
-    }
-  }
-
-  &--fluid {
-    padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
-
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
-    }
-  }
-
-  &--medium {
-    #{$box}__col {
-      padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
-      }
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        padding: getSpacer(l);
-      }
-    }
-  }
-
-  &--large {
-    #{$box}__col {
-      padding-top: getSpacer(m);
-      padding-bottom: getSpacer(l);
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
-      }
-    }
-  }
-
-  &__row {
-    @include make-row;
-  }
-  &__col {
-    display: block;
-    @include make-col(12);
-    @media (min-width: map-get($grid-breakpoints, sm)) {
-      @include make-col(10);
-      @include make-col-offset(1);
-    }
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      @include make-col(8);
-      @include make-col-offset(2);
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_grid.scss';
+
+.highlightbox {
+  $box: &;
+  $colors: 'blueberry', 'cherry', 'neutral', 'kiwi', 'plum';
+
+  // Medium og large har bakgrunnsfarge på den indre wrapperen
+  // slik at bakgrunnsfargen ikke går helt ut i kantene
+  &--medium,
+  &--large {
+    @include make-container();
+    @each $color in $colors {
+      &#{$box}--#{$color} {
+        #{$box}__content-wrapper {
+          background-color: map-get($palette-map, #{$color}50);
+        }
+      }
+    }
+
+    // Hvit har sin egen regel siden den ikke har valører
+    &#{$box}--white {
+      #{$box}__content-wrapper {
+        background-color: $white;
+      }
+    }
+  }
+
+  // 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 {
+      &#{$box}--#{$color} {
+        @include media-breakpoint-down(xs) {
+          background-color: map-get($palette-map, #{$color}50);
+        }
+      }
+    }
+
+    &#{$box}--white {
+      @include media-breakpoint-down(xs) {
+        background-color: $white;
+      }
+    }
+  }
+
+  &--medium {
+    #{$box}__content-wrapper {
+      padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+      }
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding: getSpacer(l);
+      }
+    }
+  }
+
+  &--large {
+    #{$box}__content-wrapper {
+      padding-top: getSpacer(m);
+      padding-bottom: getSpacer(l);
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-top: getSpacer(l);
+        padding-bottom: getSpacer(xl);
+      }
+    }
+  }
+
+  // fluid skal ha bakgrunnsfarge på den ytre containeren
+  &--fluid {
+    padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+    }
+
+    @each $color in $colors {
+      &#{$box}--#{$color} {
+        background-color: map-get($palette-map, #{$color}50);
+      }
+    }
+    &#{$box}--white {
+      background-color: $white;
+    }
+  }
+
+  &--has-icon#{&}--medium {
+    #{$box}__content-wrapper {
+      display: flex;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-left: getSpacer(m);
+      }
+    }
+  }
+
+  &--has-icon#{&}--large {
+    #{$box}__col {
+      display: flex;
+    }
+    #{$box}__content-wrapper {
+      @media (min-width: map-get($grid-breakpoints, sm)) {
+        padding-left: getSpacer(s);
+      }
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding-left: getSpacer(m);
+      }
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-left: 0;
+        padding-top: getSpacer(l);
+        padding-bottom: getSpacer(xl);
+      }
+    }
+
+    #{$box}__icon {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        @include make-col-ready();
+        @include make-col(2);
+        display: flex;
+        justify-content: end;
+        margin-right: 0;
+        padding-right: getSpacer(s);
+      }
+    }
+
+    #{$box}__content {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        @include make-col-ready();
+        @include make-col(8);
+      }
+    }
+  }
+
+  &--has-icon#{&}--fluid {
+    display: flex;
+  }
+
+  &__icon {
+    margin-right: getSpacer(s);
+  }
+
+  &__row {
+    @include make-row();
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include make-col(12);
+
+    &--offset {
+      @media (min-width: map-get($grid-breakpoints, sm)) {
+        @include make-col(10);
+        @include make-col-offset(1);
+      }
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        @include make-col(8);
+        @include make-col-offset(2);
+      }
+    }
+
+    &--large-with-icon {
+      @media (min-width: map-get($grid-breakpoints, sm)) {
+        @include make-col(11);
+        @include make-col-offset(0);
+      }
+
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        @include make-col(12);
+      }
+    }
+  }
+}

package/components/Icons/ActiveMonitoring.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SvgPathProps } from './Icon';
-declare const ActiveMonitoring: React.FC<SvgPathProps>;
-export default ActiveMonitoring;
+import React from 'react';
+import { SvgPathProps } from './Icon';
+declare const ActiveMonitoring: React.FC<SvgPathProps>;
+export default ActiveMonitoring;
 //# sourceMappingURL=ActiveMonitoring.d.ts.map

package/components/Icons/ActiveMonitoring.js

@@ -1,2 +1,2 @@
-import h from"react";export default function(v){v.isExtraSmall;var a=v.isHovered,c=h.createElement("path",{fillRule:"evenodd",d:"M30.3 36.201h1v-3.288h3.288v-1H31.3v-3.288h-1v3.288h-3.288v1H30.3v3.288zm9.84 3.896l-3.31-3.31a7.472 7.472 0 01-1.432 1.486l3.282 3.283a1.033 1.033 0 001.46-1.459zm-10.11 1.761v-2.026a7.394 7.394 0 01-3.224-1.13v3.156h3.224zm-21.272 0h3.224v-6.947h.9v6.947h13.024v-3.83a7.438 7.438 0 01-2.564-5.615 7.45 7.45 0 013.141-6.07 8.865 8.865 0 00-2.564-1.334c-2.797 1.392-6.253 1.392-9.05 0-3.61 1.163-6.11 4.576-6.11 8.388v8.461zM30.8 26.255a6.164 6.164 0 00-6.158 6.158 6.165 6.165 0 006.158 6.158 6.165 6.165 0 006.158-6.158 6.164 6.164 0 00-6.158-6.158zm10.26 16.22a2.323 2.323 0 01-1.65.682 2.327 2.327 0 01-1.649-.68l-3.474-3.475a7.441 7.441 0 01-2.957.844v3.313H7.458v-9.762c0-4.472 3-8.467 7.293-9.712l.253-.074.233.125c2.544 1.356 5.77 1.356 8.313 0l.234-.125.253.074a10.164 10.164 0 013.651 1.958c.948-.438 2-.689 3.112-.689 4.113 0 7.458 3.347 7.458 7.46a7.395 7.395 0 01-.742 3.221l3.543 3.543c.908.91.908 2.388 0 3.297zm-30.304-28.17c0 .437.356.794.795.794h.262v-1.59h-.262a.796.796 0 00-.795.795zm2.357-2.082v.285h.728c1.67 0 3.03-1.36 3.03-3.03V9.21h1v.213c0 1.7 1.384 3.084 3.084 3.084h4.72v-.285a6.09 6.09 0 00-6.082-6.082h-.398a6.09 6.09 0 00-6.082 6.082zm13.862 1.285V15.1h.262a.797.797 0 00.796-.795.797.797 0 00-.796-.796h-.262zm-1.3 2.02v-2.02h-4.72a4.087 4.087 0 01-3.573-2.108 4.033 4.033 0 01-3.54 2.108h-.729v2.02a6.09 6.09 0 006.082 6.081h.398a6.088 6.088 0 006.082-6.082zM9.756 14.303c0-.99.805-1.796 1.795-1.796h.262v-.285c0-4.07 3.311-7.382 7.382-7.382h.398c4.071 0 7.382 3.312 7.382 7.382v.285h.262c.99 0 1.796.805 1.796 1.796 0 .99-.806 1.795-1.796 1.795h-.29c-.294 3.803-3.477 6.811-7.354 6.811h-.398c-3.877 0-7.06-3.008-7.353-6.81h-.29c-.99 0-1.796-.806-1.796-1.796zm12.32 1.024a.503.503 0 10.001 1.007.503.503 0 000-1.007zm-4.79.503a.502.502 0 11-1.005 0 .502.502 0 011.004 0z"});return a?h.createElement("path",{fillRule:"evenodd",d:"M22.579 15.831a.502.502 0 11-1.005 0 .502.502 0 011.005 0zm-5.293 0a.503.503 0 11-1.007-.002.503.503 0 011.007.002zM30.3 32.913h-4.416v-1H30.3v-4.416h1v4.416h4.415v1H31.3v4.416h-1v-4.416zm9.84 8.644a1.034 1.034 0 01-1.46 0l-2.416-2.416a8.765 8.765 0 001.43-1.489l2.445 2.445c.402.403.402 1.057 0 1.46zm-13.334.301v-1.755a8.58 8.58 0 003.224.944v.811h-3.224zm-18.05-8.46c0-3.813 2.5-7.226 6.113-8.389 2.796 1.392 6.252 1.392 9.049 0 .509.164.993.39 1.463.643a8.655 8.655 0 00-3.254 6.761 8.666 8.666 0 003.778 7.153v2.292H12.883v-6.947h-.901v6.947H8.758v-8.46zm29.416-.985c0 4.065-3.307 7.372-7.372 7.372-4.066 0-7.373-3.307-7.373-7.372 0-4.065 3.307-7.372 7.373-7.372 4.065 0 7.372 3.307 7.372 7.372zm2.886 6.765l-2.634-2.635a8.623 8.623 0 001.048-4.13c0-4.782-3.891-8.673-8.672-8.673a8.6 8.6 0 00-4.221 1.104 10.086 10.086 0 00-2.542-1.159l-.254-.074-.233.125c-2.544 1.356-5.77 1.356-8.313 0l-.233-.125-.254.074c-4.294 1.246-7.293 5.24-7.293 9.712v9.762H31.33v-2.1a8.61 8.61 0 003.844-1.169l2.587 2.587c.455.454 1.05.68 1.649.68a2.32 2.32 0 001.648-.68 2.335 2.335 0 000-3.299zm-29.507-25.67h.26V15.1h-.26a.797.797 0 010-1.592zm7.644-7.366h.397a6.09 6.09 0 016.083 6.082v.284h-4.721a3.088 3.088 0 01-3.084-3.084v-.213h-1v.266a3.034 3.034 0 01-3.03 3.031h-.728v-.284a6.09 6.09 0 016.083-6.082zm8.04 7.366a.797.797 0 010 1.592h-.261v-1.592h.262zm-7.643 8.101h-.397a6.09 6.09 0 01-6.083-6.082v-2.019h.728a4.033 4.033 0 003.54-2.108 4.088 4.088 0 003.574 2.108h4.72v2.02a6.09 6.09 0 01-6.082 6.081zM11.552 16.1h.29c.294 3.802 3.476 6.81 7.354 6.81h.397c3.878 0 7.06-3.008 7.354-6.81h.29c.99 0 1.796-.806 1.796-1.796s-.806-1.796-1.796-1.796h-.262v-.284c0-4.07-3.311-7.383-7.382-7.383h-.397c-4.071 0-7.383 3.312-7.383 7.383v.284h-.261a1.797 1.797 0 000 3.592z"}):c}
+import h from"react";export default function(v){v.size;var a=v.isHovered,c=h.createElement("path",{fillRule:"evenodd",d:"M30.3 36.201h1v-3.288h3.288v-1H31.3v-3.288h-1v3.288h-3.288v1H30.3v3.288zm9.84 3.896l-3.31-3.31a7.472 7.472 0 01-1.432 1.486l3.282 3.283a1.033 1.033 0 001.46-1.459zm-10.11 1.761v-2.026a7.394 7.394 0 01-3.224-1.13v3.156h3.224zm-21.272 0h3.224v-6.947h.9v6.947h13.024v-3.83a7.438 7.438 0 01-2.564-5.615 7.45 7.45 0 013.141-6.07 8.865 8.865 0 00-2.564-1.334c-2.797 1.392-6.253 1.392-9.05 0-3.61 1.163-6.11 4.576-6.11 8.388v8.461zM30.8 26.255a6.164 6.164 0 00-6.158 6.158 6.165 6.165 0 006.158 6.158 6.165 6.165 0 006.158-6.158 6.164 6.164 0 00-6.158-6.158zm10.26 16.22a2.323 2.323 0 01-1.65.682 2.327 2.327 0 01-1.649-.68l-3.474-3.475a7.441 7.441 0 01-2.957.844v3.313H7.458v-9.762c0-4.472 3-8.467 7.293-9.712l.253-.074.233.125c2.544 1.356 5.77 1.356 8.313 0l.234-.125.253.074a10.164 10.164 0 013.651 1.958c.948-.438 2-.689 3.112-.689 4.113 0 7.458 3.347 7.458 7.46a7.395 7.395 0 01-.742 3.221l3.543 3.543c.908.91.908 2.388 0 3.297zm-30.304-28.17c0 .437.356.794.795.794h.262v-1.59h-.262a.796.796 0 00-.795.795zm2.357-2.082v.285h.728c1.67 0 3.03-1.36 3.03-3.03V9.21h1v.213c0 1.7 1.384 3.084 3.084 3.084h4.72v-.285a6.09 6.09 0 00-6.082-6.082h-.398a6.09 6.09 0 00-6.082 6.082zm13.862 1.285V15.1h.262a.797.797 0 00.796-.795.797.797 0 00-.796-.796h-.262zm-1.3 2.02v-2.02h-4.72a4.087 4.087 0 01-3.573-2.108 4.033 4.033 0 01-3.54 2.108h-.729v2.02a6.09 6.09 0 006.082 6.081h.398a6.088 6.088 0 006.082-6.082zM9.756 14.303c0-.99.805-1.796 1.795-1.796h.262v-.285c0-4.07 3.311-7.382 7.382-7.382h.398c4.071 0 7.382 3.312 7.382 7.382v.285h.262c.99 0 1.796.805 1.796 1.796 0 .99-.806 1.795-1.796 1.795h-.29c-.294 3.803-3.477 6.811-7.354 6.811h-.398c-3.877 0-7.06-3.008-7.353-6.81h-.29c-.99 0-1.796-.806-1.796-1.796zm12.32 1.024a.503.503 0 10.001 1.007.503.503 0 000-1.007zm-4.79.503a.502.502 0 11-1.005 0 .502.502 0 011.004 0z"});return a?h.createElement("path",{fillRule:"evenodd",d:"M22.579 15.831a.502.502 0 11-1.005 0 .502.502 0 011.005 0zm-5.293 0a.503.503 0 11-1.007-.002.503.503 0 011.007.002zM30.3 32.913h-4.416v-1H30.3v-4.416h1v4.416h4.415v1H31.3v4.416h-1v-4.416zm9.84 8.644a1.034 1.034 0 01-1.46 0l-2.416-2.416a8.765 8.765 0 001.43-1.489l2.445 2.445c.402.403.402 1.057 0 1.46zm-13.334.301v-1.755a8.58 8.58 0 003.224.944v.811h-3.224zm-18.05-8.46c0-3.813 2.5-7.226 6.113-8.389 2.796 1.392 6.252 1.392 9.049 0 .509.164.993.39 1.463.643a8.655 8.655 0 00-3.254 6.761 8.666 8.666 0 003.778 7.153v2.292H12.883v-6.947h-.901v6.947H8.758v-8.46zm29.416-.985c0 4.065-3.307 7.372-7.372 7.372-4.066 0-7.373-3.307-7.373-7.372 0-4.065 3.307-7.372 7.373-7.372 4.065 0 7.372 3.307 7.372 7.372zm2.886 6.765l-2.634-2.635a8.623 8.623 0 001.048-4.13c0-4.782-3.891-8.673-8.672-8.673a8.6 8.6 0 00-4.221 1.104 10.086 10.086 0 00-2.542-1.159l-.254-.074-.233.125c-2.544 1.356-5.77 1.356-8.313 0l-.233-.125-.254.074c-4.294 1.246-7.293 5.24-7.293 9.712v9.762H31.33v-2.1a8.61 8.61 0 003.844-1.169l2.587 2.587c.455.454 1.05.68 1.649.68a2.32 2.32 0 001.648-.68 2.335 2.335 0 000-3.299zm-29.507-25.67h.26V15.1h-.26a.797.797 0 010-1.592zm7.644-7.366h.397a6.09 6.09 0 016.083 6.082v.284h-4.721a3.088 3.088 0 01-3.084-3.084v-.213h-1v.266a3.034 3.034 0 01-3.03 3.031h-.728v-.284a6.09 6.09 0 016.083-6.082zm8.04 7.366a.797.797 0 010 1.592h-.261v-1.592h.262zm-7.643 8.101h-.397a6.09 6.09 0 01-6.083-6.082v-2.019h.728a4.033 4.033 0 003.54-2.108 4.088 4.088 0 003.574 2.108h4.72v2.02a6.09 6.09 0 01-6.082 6.081zM11.552 16.1h.29c.294 3.802 3.476 6.81 7.354 6.81h.397c3.878 0 7.06-3.008 7.354-6.81h.29c.99 0 1.796-.806 1.796-1.796s-.806-1.796-1.796-1.796h-.262v-.284c0-4.07-3.311-7.383-7.382-7.383h-.397c-4.071 0-7.383 3.312-7.383 7.383v.284h-.261a1.797 1.797 0 000 3.592z"}):c}
 //# sourceMappingURL=ActiveMonitoring.js.map

package/components/Icons/AcupunctureBack.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SvgPathProps } from './Icon';
-declare const AcupunctureBack: React.FC<SvgPathProps>;
-export default AcupunctureBack;
+import React from 'react';
+import { SvgPathProps } from './Icon';
+declare const AcupunctureBack: React.FC<SvgPathProps>;
+export default AcupunctureBack;
 //# sourceMappingURL=AcupunctureBack.d.ts.map