@helsenorge/designsystem-react 1.0.0-beta106 → 1.0.0-beta107

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-b2b6efe0.js";export{F as FormGroup,F as default}from"../../FormGroup-b2b6efe0.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../Checkbox-acd12b0c.js";import"../../uuid-fe7442b7.js";import"../../Check-6291ad09.js";import"../../Icon-537c6b21.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-59ca2467.js";import"../../useBreakpoint-552af2b9.js";import"../Input/styles.module.scss";import"../../Title-9df559dd.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,27 +1,27 @@
-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;
+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/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 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{I as r}from"../../Icon-537c6b21.js";import"../../palette-f206f488.js";import{u as s,B as o}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,s=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"])},s)))},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=s(),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>=o.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};
+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,174 +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 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);
-      }
-    }
-  }
-}
+@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);
+      }
+    }
+  }
+}