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

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'> {
     /** 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;
@@ -23,7 +23,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 */
@@ -34,7 +34,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) => React.ReactNode;
-export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, mode: FormMode, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean) => React.ReactNode;
+export declare const renderLabel: (label: React.ReactNode, inputId: string, onColor: FormOnColor) => React.ReactNode;
+export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean) => 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;"}

package/components/SharingStatus/styles.module.scss

@@ -36,14 +36,6 @@ $dot-size: 1.765rem;
     &--neutral {
       background: $neutral700;
     }
-
-    &--blueberry {
-      background: $blueberry500;
-    }
-
-    &--banana {
-      background: $banana700;
-    }
   }
 
   &__label {
@@ -64,13 +56,5 @@ $dot-size: 1.765rem;
     &--neutral {
       color: $neutral700;
     }
-
-    &--blueberry {
-      color: $blueberry500;
-    }
-
-    &--banana {
-      color: $banana700;
-    }
   }
 }

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

@@ -1,14 +1,10 @@
 export type Styles = {
   'sharing-status': string;
   'sharing-status__dot': string;
-  'sharing-status__dot--banana': string;
-  'sharing-status__dot--blueberry': string;
   'sharing-status__dot--cherry': string;
   'sharing-status__dot--kiwi': string;
   'sharing-status__dot--neutral': string;
   'sharing-status__label': string;
-  'sharing-status__label--banana': string;
-  'sharing-status__label--blueberry': string;
   'sharing-status__label--cherry': string;
   'sharing-status__label--kiwi': string;
   'sharing-status__label--neutral': string;

package/components/StatusDot/StatusDot.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare enum StatusDotModes {
+export declare enum StatusDotOnColor {
     onwhite = "onwhite",
     ondark = "ondark"
 }
@@ -17,7 +17,7 @@ export declare enum StatusDotVariant {
 }
 export interface StatusDotIconProps {
     /** Defines the color of the icon */
-    mode?: keyof typeof StatusDotModes;
+    onColor?: keyof typeof StatusDotOnColor;
     /** The variant defines style formatting and what icon to use */
     variant?: keyof typeof StatusDotVariant;
 }
@@ -25,7 +25,7 @@ export interface StatusDotProps {
     /** id that is placed on the wrapper */
     id?: string;
     /** Defines the color mode, onwhite, ondark etc. */
-    mode?: keyof typeof StatusDotModes;
+    onColor?: keyof typeof StatusDotOnColor;
     /** Visual variants for the statusdot */
     variant?: keyof typeof StatusDotVariant;
     /** Text placed to the right of the statusdot */

package/components/StatusDot/index.js

@@ -1,8 +1,8 @@
 import { S as a } from "../../StatusDot.js";
-import { a as r, b as e } from "../../StatusDot.js";
+import { a as s, b as u } from "../../StatusDot.js";
 export {
-  r as StatusDotModes,
-  e as StatusDotVariant,
+  s as StatusDotOnColor,
+  u as StatusDotVariant,
   a as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/TabList/TabList.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TabsColors, TabsType } from '../Tabs';
+import { TabsColors, TabsOnColor } from '../Tabs';
 interface TabListProps {
     children: React.ReactNode;
     onTabListClick: (index: number) => void;
     selectedTab: number;
-    color?: TabsColors;
-    type?: TabsType;
+    color: TabsColors;
+    onColor: TabsOnColor;
 }
 declare const TabList: React.FC<TabListProps>;
 export default TabList;

package/components/Tabs/TabList/styles.module.scss

@@ -6,6 +6,7 @@
   $tab-list: &;
   $colors: 'blueberry', 'neutral', 'white';
 
+  position: relative;
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
@@ -14,13 +15,44 @@
   overflow: hidden;
   height: 3rem;
   margin: 0;
-  margin-bottom: -1px;
   background-color: var(--color-base-background-white);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-bottom: -1px;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding-left: 0;
+    padding-right: 0;
+
+    #{$tab-list}__tab {
+      &--selected {
+        height: 3rem;
+      }
+    }
+  }
+
+  @each $color in $colors {
+    .tab-list__tab--selected#{$tab-list}__tab--#{$color} {
+      background-color: var(--color-base-background-#{$color});
+    }
+  }
+
+  &--onwhite {
+    background-color: var(--color-base-background-white);
+  }
+
+  &--onblueberry {
+    background-color: var(--color-base-background-blueberry);
+  }
+
+  &--onneutral {
+    background-color: var(--color-base-background-neutral);
+  }
 
   &__tab {
     display: flex;
     align-items: start;
-    background-color: transparent;
+    background-color: var(--color-base-background-white);
     height: 3rem;
     text-align: start;
     font-size: 1.25rem;
@@ -33,12 +65,6 @@
     position: relative;
     z-index: 0;
 
-    @each $color in $colors {
-      &--#{$color} {
-        background-color: var(--color-base-background-#{$color});
-      }
-    }
-
     &--selected {
       overflow: visible;
       z-index: 1;
@@ -56,43 +82,14 @@
     }
   }
 
-  &--normal {
-    padding-left: 0.5rem;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-left: 1rem;
-    }
-  }
-
-  &--framed {
-    padding-left: 0.5rem;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-left: 0;
-    }
-
-    #{$tab-list}__tab {
-      background-color: var(--color-base-background-white);
-
-      &--first {
-        // This is in order to look nice when the first tab is not selected
-        height: 3.5rem;
-      }
-
-      &--selected {
-        height: 3rem;
-      }
-    }
-
-    @each $color in $colors {
-      .tab-list__tab--selected#{$tab-list}__tab--#{$color} {
-        background-color: var(--color-base-background-#{$color});
-      }
+  .tab-list__tab {
+    &:focus-visible {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
     }
   }
 
-  // Because the button states should be the same for all types
-  .tab-list__tab {
+  .tab-list__tab--not-selected {
     &:hover {
       background-color: var(--color-action-background-ondark-hover);
 
@@ -103,16 +100,31 @@
 
     &:active {
       background-color: var(--color-action-background-ondark-selected);
-
-      &#{$tab-list}__tab--blueberry {
-        background-color: var(--color-action-background-ondark-hoverselected);
-      }
     }
+  }
 
-    &:focus-visible {
-      background-color: var(--color-base-background-blueberry);
-      outline: 4px solid var(--color-action-border-onlight-focus);
-      outline-offset: -4px;
-    }
+  &__fade-start,
+  &__fade-end {
+    position: absolute;
+    top: 0;
+    width: 15px;
+    height: 47px;
+    z-index: 10;
+  }
+
+  &__fade-start {
+    left: 0;
+    mask-image: linear-gradient(to right, #000f, #0000);
+  }
+
+  &__fade-end {
+    right: 0;
+    mask-image: linear-gradient(to left, #000f, #0000);
+  }
+
+  &__border {
+    position: relative;
+    height: 1px;
+    background-color: var(--color-action-border-onlight-focus);
   }
 }

package/components/Tabs/TabList/styles.module.scss.d.ts

@@ -1,14 +1,18 @@
 export type Styles = {
   'tab-list': string;
+  'tab-list__border': string;
+  'tab-list__fade-end': string;
+  'tab-list__fade-start': string;
   'tab-list__tab': string;
   'tab-list__tab__title-and-icon': string;
   'tab-list__tab--blueberry': string;
-  'tab-list__tab--first': string;
   'tab-list__tab--neutral': string;
+  'tab-list__tab--not-selected': string;
   'tab-list__tab--selected': string;
   'tab-list__tab--white': string;
-  'tab-list--framed': string;
-  'tab-list--normal': string;
+  'tab-list--onblueberry': string;
+  'tab-list--onneutral': string;
+  'tab-list--onwhite': string;
 };
 
 export type ClassNames = keyof Styles;