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

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

@@ -1,26 +1,26 @@
-export type Styles = {
-  'content-wrapper': string;
-  'content-wrapper__input': string;
-  'content-wrapper__input--disabled': string;
-  'content-wrapper--bigform': string;
-  'content-wrapper--disabled': string;
-  'content-wrapper--invalid': string;
-  'content-wrapper--on-blueberry': string;
-  'content-wrapper--on-dark': string;
-  'content-wrapper--transparent': string;
-  textarea: string;
-  'textarea__after-label-children': string;
-  'textarea__counter-wrapper': string;
-  'textarea__counter-wrapper--invalid': string;
-  'textarea__counter-wrapper--on-dark': string;
-  'textarea__error-text': string;
-  'textarea__label-wrapper': string;
-  'textarea__label-wrapper--on-dark': string;
-  'textarea--gutterBottom': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'content-wrapper': string;
+  'content-wrapper__input': string;
+  'content-wrapper__input--disabled': string;
+  'content-wrapper--bigform': string;
+  'content-wrapper--disabled': string;
+  'content-wrapper--invalid': string;
+  'content-wrapper--on-blueberry': string;
+  'content-wrapper--on-dark': string;
+  'content-wrapper--transparent': string;
+  textarea: string;
+  'textarea__after-label-children': string;
+  'textarea__counter-wrapper': string;
+  'textarea__counter-wrapper--invalid': string;
+  'textarea__counter-wrapper--on-dark': string;
+  'textarea__error-text': string;
+  'textarea__label-wrapper': string;
+  'textarea__label-wrapper--on-dark': string;
+  'textarea--gutterBottom': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tile/Tile.d.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import { HTMLAnchorProps } from '../../constants';
-import { TitleTags } from './../Title/Title';
-interface TileProps extends HTMLAnchorProps {
-    /** Adds custom classes to the element. */
-    className?: string;
-    /**	Sets the icon to be displayed inside the tile. */
-    icon: React.ReactElement;
-    /**	Sets the title to be displayed inside the tile. */
-    title: React.ReactElement;
-    /** Toggles the highlighted style of the tile. */
-    highlighted?: boolean;
-    /** Sets the description to be displayed inside the tile. */
-    description?: string;
-    /** Sets a fixed max and min width for the tile. */
-    fixed?: boolean;
-    /** Called when the tile is clicked on. */
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-interface TileTitleProps {
-    children: React.ReactNode;
-    className?: string;
-    htmlMarkup?: TitleTags;
-    highlighted?: boolean;
-    compact?: boolean;
-}
-export interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {
-    Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-}
-export declare const Tile: TileCompound;
-export default Tile;
+import React from 'react';
+import { HTMLAnchorProps } from '../../constants';
+import { TitleTags } from './../Title/Title';
+interface TileProps extends HTMLAnchorProps {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /**	Sets the icon to be displayed inside the tile. */
+    icon: React.ReactElement;
+    /**	Sets the title to be displayed inside the tile. */
+    title: React.ReactElement;
+    /** Toggles the highlighted style of the tile. */
+    highlighted?: boolean;
+    /** Sets the description to be displayed inside the tile. */
+    description?: string;
+    /** Sets a fixed max and min width for the tile. */
+    fixed?: boolean;
+    /** Called when the tile is clicked on. */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+interface TileTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    htmlMarkup?: TitleTags;
+    highlighted?: boolean;
+    compact?: boolean;
+}
+export interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {
+    Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+}
+export declare const Tile: TileCompound;
+export default Tile;
 //# sourceMappingURL=Tile.d.ts.map

package/components/Tile/index.d.ts

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

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import{_ as e,b as t}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import{_ as i}from"../../_tslib-51c8a283.js";import r,{useState as a}from"react";import{c as l}from"../../index-9b84fabc.js";import{A as o,I as n}from"../../constants-ad6c82db.js";import"../../Icon-89da8de4.js";import s from"./styles.module.scss";var c=r.forwardRef((function(e,i){var a,o=e.children,n=e.className,c=e.htmlMarkup,d=void 0===c?"span":c,m=e.highlighted,p=e.compact,f=l(s.tile__title,(t(a={},s["tile__title--highlighted"],m),t(a,s["tile__title--compact"],p),a),n),u=d;return r.createElement(u,{className:f,ref:i},o)})),d=r.forwardRef((function(c,d){var m,p=c.icon,f=c.title,u=c.className,h=void 0===u?"":u,g=c.description,_=c.fixed,b=void 0!==_&&_,v=c.highlighted,E=void 0!==v&&v,N=c.testId,j=i(c,["icon","title","className","description","fixed","highlighted","testId"]),x=a(!1),w=e(x,2),I=w[0],M=w[1],k=!g,y=l(s.tile,(t(m={},s["tile--fixed"],b),t(m,s["tile--compact"],k),t(m,s["tile--highlighted"],E),m),h),B=l(s["title-wrapper"],t({},s["title-wrapper--compact"],k));return r.createElement("a",Object.assign({ref:d,className:y,onMouseEnter:function(){return M(!0)},onMouseLeave:function(){return M(!1)},onFocus:function(){return M(!0)},onBlur:function(){return M(!1)},"data-testid":N,"data-analyticsid":o.Tile,rel:"_blank"===c.target?"noopener noreferrer":c.rel},j),r.createElement("div",{className:B},r.cloneElement(p,{size:n.Medium,isHovered:I,color:E?"white":"black"}),r.cloneElement(f,{highlighted:E,compact:k})),g?r.createElement("p",{className:s.tile__description},g):null)}));d.Title=c;export default d;export{d as Tile};
+import{_ as e,b as t}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import{_ as i}from"../../_tslib-51c8a283.js";import r,{useState as l}from"react";import{c as a}from"../../index-9b84fabc.js";import{A as o,I as n}from"../../constants-eb74321e.js";import s from"./styles.module.scss";var c=r.forwardRef((function(e,i){var l,o=e.children,n=e.className,c=e.htmlMarkup,d=void 0===c?"span":c,m=e.highlighted,p=e.compact,f=a(s.tile__title,(t(l={},s["tile__title--highlighted"],m),t(l,s["tile__title--compact"],p),l),n),u=d;return r.createElement(u,{className:f,ref:i},o)})),d=r.forwardRef((function(c,d){var m,p=c.icon,f=c.title,u=c.className,h=void 0===u?"":u,g=c.description,_=c.fixed,b=void 0!==_&&_,v=c.highlighted,E=void 0!==v&&v,N=c.testId,x=i(c,["icon","title","className","description","fixed","highlighted","testId"]),j=l(!1),w=e(j,2),M=w[0],k=w[1],I=!g,y=a(s.tile,(t(m={},s["tile--fixed"],b),t(m,s["tile--compact"],I),t(m,s["tile--highlighted"],E),m),h),B=a(s["title-wrapper"],t({},s["title-wrapper--compact"],I));return r.createElement("a",Object.assign({ref:d,className:y,onMouseEnter:function(){return k(!0)},onMouseLeave:function(){return k(!1)},onFocus:function(){return k(!0)},onBlur:function(){return k(!1)},"data-testid":N,"data-analyticsid":o.Tile,rel:"_blank"===c.target?"noopener noreferrer":c.rel},x),r.createElement("div",{className:B},r.cloneElement(p,{size:n.Medium,isHovered:M,color:E?"white":"black"}),r.cloneElement(f,{highlighted:E,compact:I})),g?r.createElement("p",{className:s.tile__description},g):null)}));d.Title=c;export default d;export{d as Tile};
 //# sourceMappingURL=index.js.map

package/components/Tile/styles.module.scss

@@ -1,115 +1,115 @@
-@import '../../scss/_palette.scss';
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-
-@mixin tile-title {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  font-size: 1.5rem;
-  text-align: left;
-  line-height: 1.75rem;
-  font-weight: 600;
-  margin: 0;
-  margin-left: 0.5rem;
-
-  @media (min-width: map-get($grid-breakpoints, sm)) {
-    font-size: 1.25rem;
-    margin-top: 1rem;
-  }
-}
-
-.tile {
-  // Referanse for grandparent selection i underklassene lenger nede
-  $tile: &;
-
-  display: flex;
-  width: 'inherit';
-  padding: 1.5rem 2rem 2rem 1rem;
-  flex-direction: column;
-  justify-content: flex-start;
-  background-color: $white;
-  color: $black;
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-
-  &--fixed {
-    min-width: 15rem;
-    max-width: 20rem;
-  }
-
-  &--compact {
-    padding: 1.5rem 1rem 1.5rem 1rem;
-  }
-
-  svg {
-    flex-shrink: 0;
-  }
-  &:hover,
-  &:active,
-  &:focus {
-    background-color: $neutral100;
-  }
-  &:focus {
-    box-shadow: 0 0 0 6px $neutral600;
-  }
-
-  &--highlighted {
-    background-color: $blueberry500;
-    color: $white;
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $blueberry700;
-    }
-    &:focus {
-      box-shadow: 0 0 0 6px $blueberry700;
-    }
-  }
-
-  &__title {
-    @include tile-title;
-
-    &--compact {
-      margin: 0 0 0 1.5rem;
-    }
-  }
-
-  #{$tile}:focus & {
-    &__title {
-      &--highlighted {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__description {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    margin: 0 0 0 0.5rem;
-  }
-}
-
-.title-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-bottom: 0.5rem;
-
-  @media (min-width: map-get($grid-breakpoints, sm)) {
-    flex-direction: column;
-    align-items: start;
-  }
-
-  &--compact {
-    flex-direction: row;
-    align-items: center;
-    padding-right: 1rem;
-    padding-bottom: 0;
-
-    svg {
-      flex-shrink: 0;
-    }
-  }
-}
+@import '../../scss/_palette.scss';
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+
+@mixin tile-title {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  font-size: 1.5rem;
+  text-align: left;
+  line-height: 1.75rem;
+  font-weight: 600;
+  margin: 0;
+  margin-left: 0.5rem;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+  }
+}
+
+.tile {
+  // Referanse for grandparent selection i underklassene lenger nede
+  $tile: &;
+
+  display: flex;
+  width: 'inherit';
+  padding: 1.5rem 2rem 2rem 1rem;
+  flex-direction: column;
+  justify-content: flex-start;
+  background-color: $white;
+  color: $black;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+
+  &--fixed {
+    min-width: 15rem;
+    max-width: 20rem;
+  }
+
+  &--compact {
+    padding: 1.5rem 1rem 1.5rem 1rem;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $neutral100;
+  }
+  &:focus {
+    box-shadow: 0 0 0 6px $neutral600;
+  }
+
+  &--highlighted {
+    background-color: $blueberry500;
+    color: $white;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $blueberry700;
+    }
+    &:focus {
+      box-shadow: 0 0 0 6px $blueberry700;
+    }
+  }
+
+  &__title {
+    @include tile-title;
+
+    &--compact {
+      margin: 0 0 0 1.5rem;
+    }
+  }
+
+  #{$tile}:focus & {
+    &__title {
+      &--highlighted {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__description {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    margin: 0 0 0 0.5rem;
+  }
+}
+
+.title-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: 0.5rem;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  &--compact {
+    flex-direction: row;
+    align-items: center;
+    padding-right: 1rem;
+    padding-bottom: 0;
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+}

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

@@ -1,18 +1,18 @@
-export type Styles = {
-  tile: string;
-  tile__description: string;
-  tile__title: string;
-  'tile__title--compact': string;
-  'tile__title--highlighted': string;
-  'tile--compact': string;
-  'tile--fixed': string;
-  'tile--highlighted': string;
-  'title-wrapper': string;
-  'title-wrapper--compact': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  tile: string;
+  tile__description: string;
+  tile__title: string;
+  'tile__title--compact': string;
+  'tile__title--highlighted': string;
+  'tile--compact': string;
+  'tile--fixed': string;
+  'tile--highlighted': string;
+  'title-wrapper': string;
+  'title-wrapper--compact': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Title/Title.d.ts

@@ -1,26 +1,26 @@
-import React from 'react';
-export declare type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
-export declare type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';
-interface TitleProps {
-    children: React.ReactNode;
-    /** Gives a unique id to the title */
-    id?: string;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Adds top and bottom margin in rem. */
-    margin?: number | TitleMargin;
-    /** Changes the underlying element of the title. */
-    htmlMarkup?: TitleTags;
-    /** Changes the appearance of the title. */
-    appearance?: TitleAppearances;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-export interface TitleMargin {
-    marginTop: number;
-    marginBottom: number;
-}
-export declare const instanceOfTitleMargin: (margin: any) => margin is TitleMargin;
-declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
-export default Title;
+import React from 'react';
+export declare type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
+export declare type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';
+interface TitleProps {
+    children: React.ReactNode;
+    /** Gives a unique id to the title */
+    id?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds top and bottom margin in rem. */
+    margin?: number | TitleMargin;
+    /** Changes the underlying element of the title. */
+    htmlMarkup?: TitleTags;
+    /** Changes the appearance of the title. */
+    appearance?: TitleAppearances;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export interface TitleMargin {
+    marginTop: number;
+    marginBottom: number;
+}
+export declare const instanceOfTitleMargin: (margin: any) => margin is TitleMargin;
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/components/Title/index.d.ts

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

package/components/Title/index.js

@@ -1,2 +1,2 @@
-import{T as s}from"../../Title-af53f589.js";export{T as default,i as instanceOfTitleMargin}from"../../Title-af53f589.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../constants-ad6c82db.js";
+import{T as s}from"../../Title-9df559dd.js";export{T as default,i as instanceOfTitleMargin}from"../../Title-9df559dd.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../constants-eb74321e.js";
 //# sourceMappingURL=index.js.map

package/components/Title/styles.module.scss

@@ -1,27 +1,27 @@
-@import '../../scss/title';
-
-.title {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  margin-left: 0;
-  margin-right: 0;
-
-  &--feature {
-    @include title-feature;
-  }
-  &--title1 {
-    @include title1;
-  }
-  &--title2 {
-    @include title2;
-  }
-  &--title3 {
-    @include title3;
-  }
-  &--title4 {
-    @include title4;
-  }
-  &--title5 {
-    @include title5;
-  }
-}
+@import '../../scss/title';
+
+.title {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  margin-left: 0;
+  margin-right: 0;
+
+  &--feature {
+    @include title-feature;
+  }
+  &--title1 {
+    @include title1;
+  }
+  &--title2 {
+    @include title2;
+  }
+  &--title3 {
+    @include title3;
+  }
+  &--title4 {
+    @include title4;
+  }
+  &--title5 {
+    @include title5;
+  }
+}

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

@@ -1,15 +1,15 @@
-export type Styles = {
-  title: string;
-  'title--feature': string;
-  'title--title1': string;
-  'title--title2': string;
-  'title--title3': string;
-  'title--title4': string;
-  'title--title5': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  title: string;
+  'title--feature': string;
+  'title--title1': string;
+  'title--title2': string;
+  'title--title3': string;
+  'title--title4': string;
+  'title--title5': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Validation/Validation.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import { FormVariant } from '../../constants';
-interface ValidationProps {
-    /** text placed in the legend tag of the fieldset */
-    errorSummary?: string;
-    /** Items in the Validation compontent */
-    children?: React.ReactNode;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Changes the visuals of the formgroup */
-    variant?: keyof typeof FormVariant;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-export declare const Validation: React.ForwardRefExoticComponent<ValidationProps & React.RefAttributes<HTMLElement>>;
-export default Validation;
+import React from 'react';
+import { FormVariant } from '../../constants';
+interface ValidationProps {
+    /** text placed in the legend tag of the fieldset */
+    errorSummary?: string;
+    /** Items in the Validation compontent */
+    children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the formgroup */
+    variant?: keyof typeof FormVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Validation: React.ForwardRefExoticComponent<ValidationProps & React.RefAttributes<HTMLElement>>;
+export default Validation;
 //# sourceMappingURL=Validation.d.ts.map

package/components/Validation/index.d.ts

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

package/components/Validation/index.js

@@ -1,2 +1,2 @@
-import{V as s}from"../../Validation-fd3f7f58.js";export{V as Validation,V as default}from"../../Validation-fd3f7f58.js";import"react";import"../../index-9b84fabc.js";import"../../FormGroup-0577b07f.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"../FormGroup/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"./styles.module.scss";
+import{V as s}from"../../Validation-4041c083.js";export{V as Validation,V as default}from"../../Validation-4041c083.js";import"react";import"../../index-9b84fabc.js";import"../../FormGroup-af33981a.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"../FormGroup/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";import"./styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Validation/styles.module.scss

@@ -1,18 +1,18 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
-
-.validation {
-  &__errors {
-    font-size: $font-size-sm;
-    font-weight: 600;
-    color: $cherry500;
-    margin: getSpacer(l) 0 getSpacer(s);
-  }
-}
-
-.form-group-wrapper {
-  &--error-sibling {
-    padding-bottom: 0 !important;
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.validation {
+  &__errors {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin: getSpacer(l) 0 getSpacer(s);
+  }
+}
+
+.form-group-wrapper {
+  &--error-sibling {
+    padding-bottom: 0 !important;
+  }
+}