@dnb/eufemia 9.12.3 → 9.12.4

package/esm/components/step-indicator/StepIndicator.d.ts

@@ -1,5 +1,69 @@
 import * as React from 'react';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
+export type StepIndicatorMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
+export type StepIndicatorTitle = string | React.ReactNode;
+export type StepIndicatorStatus = string | React.ReactNode;
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorIsActive = string | boolean;
+export type StepIndicatorCurrentStep = string | number;
+export type StepIndicatorActiveItem = string | number;
+export type StepIndicatorHideNumbers = string | boolean;
+export type StepIndicatorUseNavigation = string | boolean;
+export type StepIndicatorNoAnimation = string | boolean;
+export type StepIndicatorSkeleton = string | boolean;
+export type StepIndicatorSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type StepIndicatorTop = string | number | boolean;
+export type StepIndicatorRight = string | number | boolean;
+export type StepIndicatorBottom = string | number | boolean;
+export type StepIndicatorLeft = string | number | boolean;
+export type StepIndicatorChildren =
+  | React.ReactNode
+  | ((...args: any[]) => any);
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,6 +73,92 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
    * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
+
+  /**
+   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorMode;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data: StepIndicatorData;
+  title: StepIndicatorTitle;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorStatus;
+  status_state?: StepIndicatorStatusState;
+
+  /**
+   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   */
+  on_click?: (...args: any[]) => any;
+  on_render?: (...args: any[]) => any;
+  url?: string;
+  is_active?: StepIndicatorIsActive;
+  url_future?: string;
+  url_passed?: string;
+  overview_title?: string;
+  step_title_extended?: string;
+  step_title?: string;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorCurrentStep;
+  active_item?: StepIndicatorActiveItem;
+  active_url?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorHideNumbers;
+  use_navigation?: StepIndicatorUseNavigation;
+
+  /**
+   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+   */
+  on_item_render?: (...args: any[]) => any;
+
+  /**
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false.
+   */
+  no_animation?: StepIndicatorNoAnimation;
+  skeleton?: StepIndicatorSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: StepIndicatorSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: StepIndicatorTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: StepIndicatorRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: StepIndicatorBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: StepIndicatorLeft;
+  class?: string;
+  className?: string;
+  children?: StepIndicatorChildren;
+
+  /**
+   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   */
+  on_change?: (...args: any[]) => any;
 }
 export default class StepIndicator extends React.Component<
   StepIndicatorProps,

package/esm/components/step-indicator/StepIndicator.js

@@ -39,7 +39,7 @@ import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import StepIndicatorList from './StepIndicatorList';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import { stepIndicatorPropsTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
+import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
 
 var StepIndicator = function (_React$PureComponent) {
   _inherits(StepIndicator, _React$PureComponent);
@@ -208,4 +208,4 @@ _defineProperty(StepIndicator, "defaultProps", _objectSpread({
 export { StepIndicator as default };
 process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
   sidebar_id: PropTypes.string
-}, stepIndicatorPropsTypes) : void 0;
+}, stepIndicatorPropTypes) : void 0;

package/esm/components/step-indicator/StepIndicatorProps.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../space/SpacingHelper';
-export var stepIndicatorPropsTypes = _objectSpread(_objectSpread({
+export var stepIndicatorPropTypes = _objectSpread(_objectSpread({
   mode: PropTypes.oneOf(['static', 'strict', 'loose']),
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

package/esm/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -0,0 +1,186 @@
+/*
+* StepIndicator theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Deprecated v1
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link {
+  color: #007272;
+  color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item {
+  margin-left: 4.5rem; }
+  .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child {
+    margin-left: 0; }
+  @media screen and (max-width: 50em) {
+    .dnb-step-indicator-v1 .dnb-step-indicator__item {
+      margin-left: 2rem; } }
+
+.dnb-step-indicator-v1 .dnb-step-indicator::after {
+  color: #a5e1d2;
+  color: var(--color-mint-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after,
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after {
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator span[hidden],
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover),
+  .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  --border-color: var(--color-sea-green);
+  -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+          box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent; }
+  @supports (-webkit-touch-callout: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+      -webkit-box-shadow: inset 0 0 0 1px #007272;
+              box-shadow: inset 0 0 0 1px #007272;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-sea-green);
+              box-shadow: inset 0 0 0 1px var(--color-sea-green); } }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button {
+  background-color: #f2f4ec;
+  background-color: var(--color-pistachio); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button {
+  cursor: text;
+  pointer-events: initial;
+  -webkit-user-select: initial;
+     -moz-user-select: initial;
+      -ms-user-select: initial;
+          user-select: initial; }
+  .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-20);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: inset 0 0 0 1px #ccc;
+                box-shadow: inset 0 0 0 1px #ccc;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-20);
+                box-shadow: inset 0 0 0 1px var(--color-black-20); } }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+  --border-color: var(--color-black-80);
+  -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+          box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent; }
+  @supports (-webkit-touch-callout: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+      -webkit-box-shadow: inset 0 0 0 1px #333;
+              box-shadow: inset 0 0 0 1px #333;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+              box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+
+html[data-whatinput='keyboard']
+.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus {
+  color: #14555a;
+  color: var(--color-emerald-green);
+  background-color: #a5e1d2;
+  background-color: var(--color-mint-green); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__label, .dnb-step-indicator-v2 .dnb-step-indicator__label.dnb-p {
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  margin-bottom: 0.5rem; }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status.dnb-button--secondary {
+  background-color: #fbf6ec;
+  background-color: var(--color-sand-yellow); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status--error.dnb-button--secondary {
+  background-color: #fdeeee;
+  background-color: var(--color-fire-red-8); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status--info.dnb-button--secondary {
+  background-color: #f2f4ec;
+  background-color: var(--color-pistachio); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-button__icon {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  margin-top: 1rem;
+  margin-right: 0.75rem; }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  font-weight: normal;
+  font-weight: var(--font-weight-basis); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  line-height: 1.125rem;
+  line-height: var(--font-size-basis);
+  color: #333;
+  color: var(--color-black-80); }

package/esm/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -4,7 +4,7 @@
 */
 
 @import '../../../../style/themes/imports.scss';
-@import './dnb-step-indicator-theme-ui-v1.scss';
+@import './dnb-step-indicator-v1-theme-ui.scss';
 
 .dnb-step-indicator-v2 .dnb-step-indicator {
   &__item {

package/esm/components/step-indicator/style/themes/dnb-step-indicator-v1-theme-ui.css

@@ -0,0 +1,45 @@
+/*
+* Deprecated v1
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link {
+  color: #007272;
+  color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item {
+  margin-left: 4.5rem; }
+  .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child {
+    margin-left: 0; }
+  @media screen and (max-width: 50em) {
+    .dnb-step-indicator-v1 .dnb-step-indicator__item {
+      margin-left: 2rem; } }
+
+.dnb-step-indicator-v1 .dnb-step-indicator::after {
+  color: #a5e1d2;
+  color: var(--color-mint-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after,
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after {
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator span[hidden],
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover),
+  .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) {
+    color: #14555a;
+    color: var(--color-emerald-green); }

package/esm/components/step-indicator/style/themes/{dnb-step-indicator-theme-ui-v1.scss → dnb-step-indicator-v1-theme-ui.scss}

@@ -3,6 +3,8 @@
 *
 */
 
+@import '../../../../style/themes/imports.scss';
+
 .dnb-step-indicator-v1 .dnb-step-indicator {
   &__item-content {
     // so we can se the bottom line on anchor hover

package/esm/components/switch/style/themes/dnb-switch-theme-ui.css

@@ -0,0 +1,224 @@
+/*
+* Switch theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-switch {
+  /*
+    * When switched OFF
+    * aka when the checkbox is not :checked
+    */
+  /*
+    * When switched ON
+    * aka when the checkbox is :checked
+    */
+  /*
+    * Draw the circle / line
+    *
+    */
+  /*
+    * On disabled
+    *
+    */
+  /*
+    * On focus
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On hover
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On active
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On error state
+    *
+    */
+  /* stylelint-disable-next-line */ }
+  .dnb-switch__background {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    overflow: hidden;
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+    .dnb-switch__background::after {
+      content: '';
+      position: absolute;
+      -webkit-transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
+      transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
+      transition: transform 0.3s ease-out, position 0.3s ease-out;
+      transition: transform 0.3s ease-out, position 0.3s ease-out, -webkit-transform 0.3s ease-out; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-switch__background::after {
+          top: 0.25rem; } }
+  .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+    background-color: #fff;
+    background-color: var(--color-white);
+    border-color: #007272;
+    border-color: var(--color-sea-green); }
+  .dnb-switch__input:checked ~ .dnb-switch__button {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+    right: 0;
+    -webkit-transform: translateX(-0.3rem);
+    -webkit-transform: translateX(calc(2.5rem - 2.8rem));
+            transform: translateX(-0.3rem);
+            transform: translateX(calc(2.5rem - 2.8rem));
+    -webkit-transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
+            transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 0.0625rem solid #007272;
+    border: 0.0625rem solid var(--color-sea-green); }
+  .dnb-switch__input:checked ~ .dnb-switch__background::after {
+    left: 0;
+    -webkit-transform: translateX(0.63rem);
+    -webkit-transform: translateX(calc(2.5rem - 1.87rem));
+            transform: translateX(0.63rem);
+            transform: translateX(calc(2.5rem - 1.87rem));
+    -webkit-transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
+            transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
+    width: 0.0625rem;
+    height: 0.5rem;
+    border-radius: 0.0625rem;
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+    width: 0.625rem;
+    height: 0.625rem;
+    -webkit-transform: translateX(-0.45rem);
+    -webkit-transform: translateX(calc(3.25rem - 3.7rem));
+            transform: translateX(-0.45rem);
+            transform: translateX(calc(3.25rem - 3.7rem));
+    -webkit-transform: translateX(calc(var(--switch-width--large) - 3.7rem));
+            transform: translateX(calc(var(--switch-width--large) - 3.7rem)); }
+  .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
+    height: 0.625rem;
+    -webkit-transform: translateX(0.75rem);
+    -webkit-transform: translateX(calc(3.25rem - 2.5rem));
+            transform: translateX(0.75rem);
+            transform: translateX(calc(3.25rem - 2.5rem));
+    -webkit-transform: translateX(calc(var(--switch-width--large) - 2.5rem));
+            transform: translateX(calc(var(--switch-width--large) - 2.5rem)); }
+  .dnb-switch__input[disabled] ~ .dnb-switch__background {
+    background-color: #e9f8f4;
+    background-color: var(--color-mint-green-25); }
+  .dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
+    border-color: #b3dada;
+    border-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled] ~ .dnb-switch__button {
+    border-color: #b3dada;
+    border-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+  html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+    border: none; }
+  html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50); }
+  .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background,
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
+    .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
+        .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                  box-shadow: 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus,
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
+    display: block; }
+  .dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button {
+    border-color: #007272;
+    border-color: var(--color-sea-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50); }
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    border-color: transparent; }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button {
+    border-color: #dc2a2a;
+    border-color: var(--color-fire-red);
+    background-color: #fdeeee;
+    background-color: var(--color-fire-red-8); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button {
+    border-color: #fdeeee;
+    border-color: var(--color-fire-red-8); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+    background-color: #fdeeee;
+    background-color: var(--color-fire-red-8);
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+        -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+                box-shadow: 0 0 0 0.125rem #dc2a2a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+                box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+  .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
+    border-color: #dc2a2a;
+    border-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+    display: block;
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+        -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+                box-shadow: 0 0 0 0.125rem #dc2a2a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+                box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .dnb-switch > .dnb-form-status {
+    -webkit-transform: translateY(0.1875rem);
+            transform: translateY(0.1875rem); }