@helsenorge/designsystem-react 8.6.0 → 9.0.0-beta.1

package/components/ExpanderList/styles.module.scss

@@ -2,7 +2,7 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/font-settings';
-@import '../../scss/palette';
+@import '../../scss/supernova/styles/colors.css';
 
 .expander-list {
   list-style: none;
@@ -15,21 +15,101 @@
     position: relative;
 
     &--line {
-      border-bottom: 1px solid $neutral500;
+      border-bottom: 1px solid var(--color-base-border-onlight);
 
       &:first-of-type {
-        border-top: 1px solid $neutral500;
+        border-top: 1px solid var(--color-base-border-onlight);
+      }
+
+      &--blueberry,
+      .expander-list-link--line--blueberry {
+        background-color: var(--core-color-blueberry-50);
+      }
+
+      &--cherry,
+      .expander-list-link--line--cherry {
+        background-color: var(--core-color-cherry-50);
+      }
+
+      &--neutral,
+      .expander-list-link--line--neutral {
+        background-color: var(--core-color-neutral-50);
+      }
+
+      &--white,
+      .expander-list-link--line--white {
+        background-color: var(--color-base-background-white);
       }
     }
 
     &--outline {
-      border-top: getSpacer(2xs) $neutral100 solid;
-      border-left: getSpacer(2xs) $neutral100 solid;
-      border-right: getSpacer(2xs) $neutral100 solid;
+      background-color: var(--color-base-background-white);
+
+      &--white {
+        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
 
-      &:last-of-type {
-        border-bottom: getSpacer(2xs) $neutral50 solid;
+        &:last-of-type {
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        }
       }
+
+      &--blueberry {
+        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+
+        &:last-of-type {
+          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        }
+      }
+
+      &--cherry {
+        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
+
+        &:last-of-type {
+          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        }
+      }
+
+      &--neutral {
+        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+
+        &:last-of-type {
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        }
+      }
+    }
+
+    &--fill {
+      &--blueberry,
+      .expander-list-link--fill--blueberry {
+        background-color: var(--core-color-blueberry-50);
+      }
+
+      &--cherry,
+      .expander-list-link--fill--cherry {
+        background-color: var(--core-color-cherry-50);
+      }
+
+      &--neutral,
+      .expander-list-link--fill--neutral {
+        background-color: var(--core-color-neutral-50);
+      }
+
+      &--white,
+      .expander-list-link--fill--white {
+        background-color: var(--color-base-background-white);
+      }
+    }
+
+    &--fill-negative {
+      background-color: var(--color-base-background-white);
     }
   }
 }
@@ -41,13 +121,12 @@
   line-height: $lineheight-size-sm;
   display: flex;
   cursor: pointer;
-  font-weight: 600;
   font-family: inherit;
   text-decoration: none;
   justify-content: space-between;
   align-items: center;
   letter-spacing: unset;
-  color: $black;
+  color: var(--color-base-text-onlight);
   border: 0;
   width: 100%;
   outline: none;
@@ -57,57 +136,104 @@
     line-height: $lineheight-size-md;
   }
 
-  &--banana {
-    background-color: $banana100;
+  &--open {
+    font-weight: 600;
   }
 
-  &--blueberry {
-    background-color: $blueberry100;
+  &--fill,
+  &--fill-negative {
+    margin-top: getSpacer(s);
   }
 
-  &--cherry {
-    background-color: $cherry100;
+  &--fill-negative {
+    background-color: var(--color-base-background-white);
   }
 
-  &--kiwi {
-    background-color: $kiwi100;
+  &--closed#{&}--fill {
+    margin-bottom: getSpacer(s);
   }
 
-  &--neutral {
-    background-color: $neutral100;
+  &:focus-visible:not(.expander-list-link--outline) {
+    outline: 0.25rem solid var(--color-action-border-onlight-focus);
   }
 
-  &--plum {
-    background-color: $plum100;
-  }
+  &--white:not(.expander-list-link--outline) {
+    &:hover {
+      background-color: var(--core-color-blueberry-50);
+    }
 
-  &--white {
-    background-color: $neutral50;
+    &:active {
+      background-color: var(--core-color-blueberry-100);
+    }
   }
 
-  &--closed:not(:hover, .expander-list-link--fill) {
-    background-color: transparent;
-  }
+  &--blueberry:not(.expander-list-link--outline) {
+    &:hover {
+      background-color: var(--core-color-blueberry-100);
+    }
 
-  &--fill {
-    margin-top: getSpacer(s);
+    &:active {
+      background-color: var(--color-action-background-ondark-hoverselected);
+    }
   }
 
-  &--closed#{&}--fill {
-    margin-bottom: getSpacer(s);
+  &--cherry:not(.expander-list-link--outline) {
+    &:hover {
+      background-color: var(--core-color-cherry-100);
+    }
 
-    &:not(:hover) {
-      background-color: $neutral50;
+    &:active {
+      background-color: var(--core-color-cherry-200);
     }
   }
 
-  &:hover {
-    color: $blueberry700;
+  &--neutral:not(.expander-list-link--outline) {
+    &:hover {
+      background-color: var(--core-color-neutral-100);
+    }
+
+    &:active {
+      background-color: var(--core-color-neutral-200);
+    }
   }
 
-  &:focus,
-  &:focus-visible {
-    outline: getSpacer(4xs) solid $black;
+  &--outline {
+    background-color: var(--color-base-background-white);
+
+    &:focus-visible {
+      outline: 0.5rem solid var(--color-action-border-onlight-focus);
+    }
+
+    &--blueberry {
+      &:hover {
+        background-color: var(--core-color-blueberry-50);
+      }
+
+      &:active {
+        background-color: var(--core-color-blueberry-100);
+      }
+    }
+
+    &--cherry {
+      &:hover {
+        background-color: var(--core-color-cherry-50);
+      }
+
+      &:active {
+        background-color: var(--core-color-cherry-100);
+      }
+    }
+
+    &--neutral,
+    &--white {
+      &:hover {
+        background-color: var(--core-color-neutral-50);
+      }
+
+      &:active {
+        background-color: var(--core-color-neutral-100);
+      }
+    }
   }
 
   &--large {
@@ -115,16 +241,6 @@
     line-height: $lineheight-size-lg;
   }
 
-  &--sticky {
-    position: fixed;
-    top: 0;
-  }
-
-  &--absolute {
-    position: absolute;
-    bottom: 0;
-  }
-
   &__icon {
     display: flex;
     align-items: center;

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

@@ -1,25 +1,49 @@
 export type Styles = {
   'expander-list': string;
   'expander-list__item': string;
+  'expander-list__item--fill': string;
+  'expander-list__item--fill--blueberry': string;
+  'expander-list__item--fill--cherry': string;
+  'expander-list__item--fill--neutral': string;
+  'expander-list__item--fill--white': string;
+  'expander-list__item--fill-negative': string;
   'expander-list__item--line': string;
+  'expander-list__item--line--blueberry': string;
+  'expander-list__item--line--cherry': string;
+  'expander-list__item--line--neutral': string;
+  'expander-list__item--line--white': string;
   'expander-list__item--outline': string;
+  'expander-list__item--outline--blueberry': string;
+  'expander-list__item--outline--cherry': string;
+  'expander-list__item--outline--neutral': string;
+  'expander-list__item--outline--white': string;
   'expander-list-link': string;
   'expander-list-link__chevron': string;
   'expander-list-link__icon': string;
   'expander-list-link__main-content': string;
   'expander-list-link__main-content--expanded': string;
   'expander-list-link__main-content--padding': string;
-  'expander-list-link--absolute': string;
-  'expander-list-link--banana': string;
   'expander-list-link--blueberry': string;
   'expander-list-link--cherry': string;
   'expander-list-link--closed': string;
   'expander-list-link--fill': string;
-  'expander-list-link--kiwi': string;
+  'expander-list-link--fill--blueberry': string;
+  'expander-list-link--fill--cherry': string;
+  'expander-list-link--fill--neutral': string;
+  'expander-list-link--fill--white': string;
+  'expander-list-link--fill-negative': string;
   'expander-list-link--large': string;
+  'expander-list-link--line--blueberry': string;
+  'expander-list-link--line--cherry': string;
+  'expander-list-link--line--neutral': string;
+  'expander-list-link--line--white': string;
   'expander-list-link--neutral': string;
-  'expander-list-link--plum': string;
-  'expander-list-link--sticky': string;
+  'expander-list-link--open': string;
+  'expander-list-link--outline': string;
+  'expander-list-link--outline--blueberry': string;
+  'expander-list-link--outline--cherry': string;
+  'expander-list-link--outline--neutral': string;
+  'expander-list-link--outline--white': string;
   'expander-list-link--white': string;
 };
 

package/components/FormGroup/FormGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormMode, FormSize } from '../../constants';
+import { FormOnColor, FormSize } from '../../constants';
 export type FormGroupTags = 'fieldset' | 'div';
 export interface FormGroupProps {
     /** title for the the fieldset */
@@ -15,7 +15,7 @@ export interface FormGroupProps {
     /** Adds custom classes to the fieldset element. */
     fieldsetClassName?: string;
     /** Changes the visuals of the formgroup */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Changes the visuals of the formgroup */
     size?: keyof typeof FormSize;
     /** Error message */

package/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormMode, IconSize } from '../../constants';
-import { StatusDotModes } from '../StatusDot';
+import { FormOnColor, IconSize } from '../../constants';
+import { StatusDotOnColor } from '../StatusDot';
 export type SvgIcon = React.FC<SvgPathProps>;
 export interface BaseIconProps {
     ariaLabel?: string;
@@ -10,7 +10,7 @@ export interface BaseIconProps {
     className?: string;
     isHovered?: boolean;
     /** Defines the color of the icon */
-    mode?: keyof typeof FormMode | StatusDotModes;
+    onColor?: keyof typeof FormOnColor | StatusDotOnColor;
     /** Sets the data-testid attribute. */
     testId?: string;
 }
@@ -20,7 +20,7 @@ export interface IconProps extends BaseIconProps {
 export interface SvgPathProps {
     size: IconSize;
     isHovered: boolean;
-    mode?: keyof typeof FormMode | StatusDotModes;
+    onColor?: keyof typeof FormOnColor | StatusDotOnColor;
 }
 interface IconConfig {
     size: IconSize;

package/components/Icons/NoAccess.js

@@ -1,14 +1,14 @@
 import { jsxs as a, Fragment as m, jsx as l } from "react/jsx-runtime";
-import { FormMode as s } from "../../constants.js";
+import { FormOnColor as s } from "../../constants.js";
 import { g as h } from "../../Icon.js";
-const x = ({ size: o, isHovered: r, mode: t }) => {
-  const d = /* @__PURE__ */ l(
+const M = ({ size: e, isHovered: r, onColor: t }) => {
+  const n = /* @__PURE__ */ l(
     "path",
     {
       fillRule: "evenodd",
       d: "M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z"
     }
-  ), n = /* @__PURE__ */ l(
+  ), d = /* @__PURE__ */ l(
     "path",
     {
       fillRule: "evenodd",
@@ -26,7 +26,7 @@ const x = ({ size: o, isHovered: r, mode: t }) => {
       fillRule: "evenodd",
       d: "M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z"
     }
-  ), e = /* @__PURE__ */ a(m, { children: [
+  ), o = /* @__PURE__ */ a(m, { children: [
     t === s.ondark && /* @__PURE__ */ l("circle", { cx: "24", cy: "24", r: "17", fill: "white" }),
     /* @__PURE__ */ l(
       "path",
@@ -36,9 +36,9 @@ const x = ({ size: o, isHovered: r, mode: t }) => {
       }
     )
   ] });
-  return h({ size: o, isHovered: r, normal: d, normalHover: n, xSmall: v, xSmallHover: c, xxSmall: e, xxSmallHover: e });
+  return h({ size: e, isHovered: r, normal: n, normalHover: d, xSmall: v, xSmallHover: c, xxSmall: o, xxSmallHover: o });
 };
 export {
-  x as default
+  M as default
 };
 //# sourceMappingURL=NoAccess.js.map

package/components/Icons/NoAccess.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoAccess.js","sources":["../../../src/components/Icons/NoAccess.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FormMode } from '../../constants';\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst NoAccess: React.FC<SvgPathProps> = ({ size, isHovered, mode }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n    />\n  );\n\n  const normalHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M9.95 25.3h28.1v-2.6H9.95v2.6ZM24 8.231C15.305 8.231 8.231 15.305 8.231 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n    />\n  );\n\n  const xSmall = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M12.253 25.642h23.495v-3.284H12.253v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n    />\n  );\n\n  const xxSmall = (\n    <>\n      {mode === FormMode.ondark && <circle cx=\"24\" cy=\"24\" r=\"17\" fill=\"white\" />}\n      <path\n        fillRule={'evenodd'}\n        d=\"M13.4 26.1h21.2v-4.2H13.4v4.2ZM24 9C15.728 9 9 15.728 9 24s6.728 15 15 15c8.27 0 15-6.728 15-15S32.27 9 24 9Z\"\n      />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover: xxSmall });\n};\n\nexport default NoAccess;\n"],"names":["NoAccess","size","isHovered","mode","normal","jsx","normalHover","xSmall","xSmallHover","xxSmall","jsxs","Fragment","FormMode","getIcon"],"mappings":";;;AAKA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,MAAAC,QAA6C;AACxG,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAC,IACJ,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAE,IACJ,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAG,IACJ,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAI,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAASR,MAAAS,EAAS,UAAU,gBAAAP,EAAC,UAAO,EAAA,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,QAAQ,CAAA;AAAA,IACzE,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IACJ;AAAA,EACF,EAAA,CAAA;AAGK,SAAAQ,EAAQ,EAAE,MAAAZ,GAAM,WAAAC,GAAW,QAAAE,GAAQ,aAAAE,GAAa,QAAAC,GAAQ,aAAAC,GAAa,SAAAC,GAAS,cAAcA,EAAS,CAAA;AAC9G;"}
+{"version":3,"file":"NoAccess.js","sources":["../../../src/components/Icons/NoAccess.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FormOnColor } from '../../constants';\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst NoAccess: React.FC<SvgPathProps> = ({ size, isHovered, onColor }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n    />\n  );\n\n  const normalHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M9.95 25.3h28.1v-2.6H9.95v2.6ZM24 8.231C15.305 8.231 8.231 15.305 8.231 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n    />\n  );\n\n  const xSmall = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M12.253 25.642h23.495v-3.284H12.253v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n    />\n  );\n\n  const xxSmall = (\n    <>\n      {onColor === FormOnColor.ondark && <circle cx=\"24\" cy=\"24\" r=\"17\" fill=\"white\" />}\n      <path\n        fillRule={'evenodd'}\n        d=\"M13.4 26.1h21.2v-4.2H13.4v4.2ZM24 9C15.728 9 9 15.728 9 24s6.728 15 15 15c8.27 0 15-6.728 15-15S32.27 9 24 9Z\"\n      />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover: xxSmall });\n};\n\nexport default NoAccess;\n"],"names":["NoAccess","size","isHovered","onColor","normal","jsx","normalHover","xSmall","xSmallHover","xxSmall","jsxs","Fragment","FormOnColor","getIcon"],"mappings":";;;AAKA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,SAAAC,QAAgD;AAC3G,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAC,IACJ,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAE,IACJ,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAG,IACJ,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAI,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAYR,MAAAS,EAAY,UAAU,gBAAAP,EAAC,UAAO,EAAA,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,QAAQ,CAAA;AAAA,IAC/E,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IACJ;AAAA,EACF,EAAA,CAAA;AAGK,SAAAQ,EAAQ,EAAE,MAAAZ,GAAM,WAAAC,GAAW,QAAAE,GAAQ,aAAAE,GAAa,QAAAC,GAAQ,aAAAC,GAAa,SAAAC,GAAS,cAAcA,EAAS,CAAA;AAC9G;"}

package/components/Input/Input.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { FormMode, FormSize } from '../../constants';
+import { FormOnColor, FormSize } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
-export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onClick' | 'onChange' | 'onFocus' | 'onKeyDown' | 'autoFocus'> {
+export interface InputProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onClick' | 'onChange' | 'onFocus' | 'onKeyDown' | 'autoFocus' | 'inputMode'> {
     /** The number at which the input field starts when you increment or decrement it */
     baseIncrementValue?: number;
     /** Adds custom classes to the element. */
@@ -24,7 +25,7 @@ export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElem
     /** Ref that is placed on the inputWrapper */
     inputWrapperRef?: React.RefObject<HTMLDivElement>;
     /** Changes the color profile of the input */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Changes the visuals of the input */
     size?: keyof typeof FormSize;
     /** Label of the input */

package/components/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { FormMode } from '../../constants';
+import { FormOnColor } from '../../constants';
 export type LabelText = {
     hideFromScreenReader?: boolean;
     text: string;
@@ -26,7 +26,7 @@ export interface LabelProps {
     /** Array of main label strings. Can be of type semibold or normal */
     labelTexts: LabelText[];
     /** Array of sublabel strings. Can be of type semibold or normal */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** StatusDot placed underneath the last sublabel */
     statusDot?: React.ReactNode;
     /** Sublabel component */
@@ -37,7 +37,7 @@ export interface LabelProps {
     testId?: string;
 }
 export declare const getLabelText: (label: React.ReactNode) => string;
-export declare const renderLabel: (label: React.ReactNode, inputId: string, mode: FormMode, markup?: LabelTags) => React.ReactNode;
-export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, mode: FormMode, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean, markup?: LabelTags) => React.ReactNode;
+export declare const renderLabel: (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags) => React.ReactNode;
+export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean, markup?: LabelTags) => React.ReactNode;
 declare const Label: FunctionComponent<LabelProps>;
 export default Label;

package/components/Label/SubLabel.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { LabelText } from './Label';
-import { FormMode } from '../../constants';
+import { FormOnColor } from '../../constants';
 export interface SublabelProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** id that is placed on the wrapper */
     id: string;
     /** Array of sublabel strings. Can be of type semibold or normal */
-    mode?: FormMode;
+    onColor?: FormOnColor;
     /** Array of sublabel strings. Can be of type semibold or normal */
     sublabelTexts?: LabelText[];
     /** Sets the data-testid attribute. */

package/components/MaxCharacters/MaxCharacters.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormMode } from '../../constants';
+import { FormOnColor } from '../../constants';
 interface MaxCharactersProps {
     /** Current input length */
     length: number;
@@ -8,7 +8,7 @@ interface MaxCharactersProps {
     /** The text is displayed in the end of the text-counter */
     maxText?: string;
     /** Changes the visuals of the textarea */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Max width of the component */
     maxWidth?: string;
 }

package/components/RadioButton/RadioButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { FormMode, FormSize } from '../../constants';
-export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
+import { FormOnColor, FormSize } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+export interface RadioButtonProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
     /** Adds custom classes to the element. */
     className?: string;
     /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
@@ -10,7 +11,7 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
     /** input id of the radioButton */
     inputId?: string;
     /** Changes the visuals of the radioButton */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */
     size?: keyof typeof FormSize;
     /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
@@ -22,6 +23,6 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-export declare const getRadioLabelClasses: (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string) => string | undefined;
+export declare const getRadioLabelClasses: (radioId: string, onColor: FormOnColor, large: boolean, checkedRadioId?: string) => string | undefined;
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/components/RadioButton/styles.module.scss

@@ -25,21 +25,6 @@
 .radio-button-wrapper {
   cursor: pointer;
 
-  &--with-error {
-    padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
-    background-color: $cherry100;
-    margin-left: -0.75rem;
-    border-left: 0.25rem solid $cherry600;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(s) getSpacer(m) getSpacer(l);
-    }
-  }
-
-  &--with-error#{&}__large {
-    padding: getSpacer(m);
-  }
-
   &__large {
     margin: getSpacer(2xs) 0;
 

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

@@ -24,7 +24,6 @@ export type Styles = {
   'radio-button-wrapper__large--invalid': string;
   'radio-button-wrapper__large--on-blueberry': string;
   'radio-button-wrapper__large--selected': string;
-  'radio-button-wrapper--with-error': string;
   'radiobutton-sublabel-wrapper': string;
 };
 

package/components/Select/Select.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { FormMode } from '../../constants';
+import { FormOnColor } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 type SelectConcept = 'normal' | 'transparent';
-export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'> {
+export interface SelectProps extends ErrorWrapperClassNameProps, Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'> {
     /** Sets the content of the select element. */
     children: React.ReactNode;
     /** Adds custom classes to the element. */
@@ -11,7 +12,7 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
     /** The label text above the select */
     label?: React.ReactNode;
     /** Changes the visuals of the component */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */
     error?: boolean;
     /** Error text to show above the component */

package/components/SharingStatus/SharingStatus.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icon';
-export type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;
+export type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;
 export interface SharingStatusProps {
     /** Color choices represent variants of sharingstatus */
     color?: SharingStatusColor;

package/components/SharingStatus/index.js

@@ -4,16 +4,16 @@ import { AnalyticsId as u, IconSize as g } from "../../constants.js";
 import { palette as _ } from "../../theme/palette.js";
 import { I as f } from "../../Icon.js";
 import s from "./styles.module.scss";
-const w = (e) => {
-  const { color: r = "blueberry", icon: l, children: o, className: n, testId: i, wrapText: c } = e, m = t(s["sharing-status"], n), d = t(s["sharing-status__dot"], s[`sharing-status__dot--${r}`]), h = t(s["sharing-status__label"], s[`sharing-status__label--${r}`], {
+const y = (l) => {
+  const { color: r = "neutral", icon: o, children: e, className: n, testId: i, wrapText: c } = l, m = t(s["sharing-status"], n), d = t(s["sharing-status__dot"], s[`sharing-status__dot--${r}`]), h = t(s["sharing-status__label"], s[`sharing-status__label--${r}`], {
     [s["sharing-status__label--wrap"]]: c
   });
   return /* @__PURE__ */ p("span", { className: m, "data-testid": i, "data-analyticsid": u.SharingStatus, children: [
-    /* @__PURE__ */ a("span", { className: d, children: /* @__PURE__ */ a(f, { color: _.white, svgIcon: l, size: g.XXSmall }) }),
-    /* @__PURE__ */ a("span", { className: h, children: o })
+    /* @__PURE__ */ a("span", { className: d, children: /* @__PURE__ */ a(f, { color: _.white, svgIcon: o, size: g.XXSmall }) }),
+    /* @__PURE__ */ a("span", { className: h, children: e })
   ] });
 };
 export {
-  w as default
+  y as default
 };
 //# sourceMappingURL=index.js.map

package/components/SharingStatus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'blueberry', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId","jsx","Icon","palette","IconSize"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,aAAa,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAEvEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAGC,SAAA,gBAAAM,EAAC,UAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,eACxF,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWJ,GACf,UAAA,gBAAAI,EAACC,GAAK,EAAA,OAAOC,EAAQ,OAAO,SAASd,GAAM,MAAMe,EAAS,QAAS,CAAA,GACrE;AAAA,IACC,gBAAAH,EAAA,QAAA,EAAK,WAAWH,GAAe,UAAAR,EAAS,CAAA;AAAA,EAC3C,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId","jsx","Icon","palette","IconSize"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,WAAW,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAErEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAGC,SAAA,gBAAAM,EAAC,UAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,eACxF,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWJ,GACf,UAAA,gBAAAI,EAACC,GAAK,EAAA,OAAOC,EAAQ,OAAO,SAASd,GAAM,MAAMe,EAAS,QAAS,CAAA,GACrE;AAAA,IACC,gBAAAH,EAAA,QAAA,EAAK,WAAWH,GAAe,UAAAR,EAAS,CAAA;AAAA,EAC3C,EAAA,CAAA;AAEJ;"}