@helsenorge/designsystem-react 1.0.0-beta104 → 1.0.0-beta108

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-af33981a.js";export{F as FormGroup,F as default}from"../../FormGroup-af33981a.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../Checkbox-f2418dc5.js";import"../../uuid-fe7442b7.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-c173d440.js";import"../RadioButton/styles.module.scss";import"../../Input-31d7accc.js";import"../../useBreakpoint-552af2b9.js";import"../Input/styles.module.scss";import"../../Title-9df559dd.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 a from"./styles.module.scss";import{A as i,I as l}from"../../constants-eb74321e.js";import{Icon as r}from"../Icons/Icon.js";import{u as o,B as s}from"../../useBreakpoint-552af2b9.js";import"../../_tslib-51c8a283.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"../../grid-11a70eb7.js";var c;!function(e){e.medium="medium",e.large="large",e.fluid="fluid"}(c||(c={}));var m=function(i){var l=i.className,r=i.size,o=i.children;return e.createElement("div",{className:l},e.createElement("div",{className:a.highlightbox__row},e.createElement("div",{className:t(a.highlightbox__col,r===c.medium&&a["highlightbox__col--offset"])},o)))},n=function(i){var l=i.children;return e.createElement("div",{className:a["highlightbox__content-wrapper"]},e.createElement("div",{className:t(a.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===_?c.medium:_,f=h.testId,x=h.svgIcon,p=h.htmlMarkup,v=void 0===p?"div":p,E=o(),N=t(a.highlightbox,a["highlightbox--".concat(u)],a["highlightbox--".concat(b)],x&&a["highlightbox--has-icon"]),j=function(){if(x){var t=b===c.large&&E&&E>=s.md?l.Medium:l.Small;return e.createElement(e.Fragment,null,e.createElement("div",{className:a.highlightbox__icon},e.createElement(r,{svgIcon:x,size:t})),e.createElement("div",{className:a.highlightbox__content},g))}return g},w=v;return b===c.medium?e.createElement(m,{className:N,size:b},e.createElement(w,{className:a["highlightbox__content-wrapper"],"data-testid":f,"data-analyticsid":i.HighlightBox},j())):b===c.large&&x?e.createElement(m,{className:N,size:b},e.createElement(n,null,e.createElement(w,{className:t(a.highlightbox__col,a["highlightbox__col--large-with-icon"]),"data-testid":f,"data-analyticsid":i.HighlightBox},j()))):b===c.large?e.createElement(m,{className:N,size:b},e.createElement(n,null,e.createElement(w,{className:t(a.highlightbox__col,a["highlightbox__col--offset"]),"data-testid":f,"data-analyticsid":i.HighlightBox},j()))):b===c.fluid?e.createElement(w,{className:N,"data-testid":f},j()):null}export{c 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/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