@dnb/eufemia 9.48.0-beta.1 → 10.0.0-beta.2

package/es/components/skeleton/figures/Table.d.ts

@@ -4,10 +4,6 @@ export type SkeletonTableChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SkeletonTableProps extends React.HTMLProps<HTMLElement> {
   rows?: SkeletonTableRows;
   children?: SkeletonTableChildren;

package/es/components/skeleton/style/dnb-skeleton.css

@@ -91,28 +91,28 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
 
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
+  src: url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.ttf") format("truetype");
+  src: url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.ttf") format("truetype");
+  src: url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf") format("truetype");
   font-weight: 600;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBMonoSkeleton;
-  src: url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype");
+  src: url("../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: fallback;

package/es/components/skeleton/style/dnb-skeleton.min.css

@@ -1 +1 @@
-.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font-only,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
+.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font-only,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}

package/es/components/skeleton/style/dnb-skeleton.scss

@@ -120,7 +120,7 @@
   }
 }
 
-$fonts-path: '../../assets/fonts' !default;
+$fonts-path: '../../assets/fonts/dnb' !default;
 
 // Skeleton-Regular
 @font-face {

package/es/components/slider/types.d.ts

@@ -3,7 +3,8 @@ import React from 'react';
 import type { SuffixChildren } from '../../shared/helpers/Suffix';
 import type { formatReturnType, formatOptionParams } from '../number-format/NumberUtils';
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../Skeleton';
 export declare type ValueTypes = number | Array<number>;
 export declare type NumberFormatTypes = formatOptionParams | ((value: number) => unknown);
 export declare type onChangeEventProps = {
@@ -61,7 +62,7 @@ export declare type SliderProps = IncludeSnakeCase<{
     /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */
     multiThumbBehavior?: 'swap' | 'omit' | 'push';
     /** if set to `true`, an overlaying skeleton with animation will be shown. */
-    skeleton?: boolean;
+    skeleton?: SkeletonShow;
     id?: string;
     disabled?: boolean;
     className?: string;

package/es/components/space/Space.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { spacingPropTypes } from './SpacingHelper';
 import type { DynamicElement, SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../Skeleton';
 export { spacingPropTypes };
 export declare type SpaceProps = {
     /**
@@ -19,7 +20,7 @@ export declare type SpaceProps = {
      */
     inline?: boolean;
     /**
-     * If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline="true"` in combination.
+     * If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.
      * Default: false
      */
     no_collapse?: boolean;
@@ -32,7 +33,7 @@ export declare type SpaceProps = {
      * If set to `true`, a loading skeleton will be shown.
      * Default: false
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonShow;
     /**
      * Send along a custom React Ref.
      * Default: null
@@ -68,11 +69,11 @@ export default class Space extends React.PureComponent<SpaceAllProps | React.HTM
         innerRef: any;
         className: any;
         children: any;
-        space: any;
-        top: any;
-        right: any;
-        bottom: any;
-        left: any;
+        top?: import("./types").SpaceType;
+        right?: import("./types").SpaceType;
+        bottom?: import("./types").SpaceType;
+        left?: import("./types").SpaceType;
+        space?: import("./types").SpaceType | import("./types").SpacingElementProps;
         element: string;
         inline: any;
         no_collapse: any;

package/es/components/space/SpacingUtils.d.ts

@@ -2,25 +2,10 @@
  * Space helper
  *
  */
-import type { StyleObjectProps, SpaceType, SpacingUnknownProps, SpacingProps } from './types';
+import type { StyleObjectProps, SpaceType, SpacingUnknownProps, SpacingProps, SpaceTypesPositiveValuesType, SpaceTypesPositiveRemValuesType } from './types';
 declare type SpaceNumber = number;
-export declare const spacingDefaultProps: {
-    space: any;
-    top: any;
-    right: any;
-    bottom: any;
-    left: any;
-};
-export declare const spacePatterns: {
-    'xx-small': number;
-    'x-small': number;
-    small: number;
-    medium: number;
-    large: number;
-    'x-large': number;
-    'xx-large': number;
-    'xx-large-x2': number;
-};
+export declare const spacingDefaultProps: SpacingProps;
+export declare const spacePatterns: Record<SpaceTypesPositiveValuesType, SpaceTypesPositiveRemValuesType>;
 export declare const calc: (...types: Array<SpaceType>) => any;
 /**
  * Creates a valid space CSS class out from given space types
@@ -39,7 +24,7 @@ export declare const splitTypes: (types: SpaceType | Array<SpaceType>) => SpaceT
 export declare const sumTypes: (types: SpaceType | Array<SpaceType>) => any;
 export declare const createTypeModifiers: (types: SpaceType) => Array<SpaceType>;
 export declare const findType: (num: SpaceNumber) => SpaceType;
-export declare const findTypeAll: (num: SpaceNumber) => Array<SpaceType>;
+export declare const findTypeAll: (num: SpaceNumber) => Array<SpaceTypesPositiveValuesType | SpaceTypesPositiveRemValuesType>;
 export declare const findNearestTypes: (num: SpaceNumber, multiply?: boolean) => any[];
 export declare const isValidSpaceProp: (propName: string) => boolean;
 export declare const removeSpaceProps: (props: StyleObjectProps) => StyleObjectProps;

package/es/components/space/SpacingUtils.js

@@ -92,7 +92,8 @@ export const translateSpace = type => {
 };
 export const splitTypes = types => {
   if (typeof types === 'string') {
-    return clean(types.split(/ /g));
+    const test = types.split(/ /g);
+    return clean(test);
   } else if (typeof types === 'boolean') {
     return ['small'];
   } else if (typeof types === 'number') {
@@ -157,7 +158,8 @@ export const findType = num => {
   return null;
 };
 export const findTypeAll = num => {
-  const found = Object.entries(spacePatterns).find(([k, v]) => k && v === num) || null;
+  const listOfSpacePatterns = Object.entries(spacePatterns);
+  const found = listOfSpacePatterns.find(([k, v]) => k && v === num) || null;
   return found;
 };
 export const findNearestTypes = (num, multiply = false) => {

package/es/components/space/types.d.ts

@@ -20,7 +20,19 @@ export declare type SpacingElementProps = {
      */
     left?: SpaceType;
 };
-export declare type SpaceType = string | boolean | number;
+export declare type SpaceTypesPositiveValuesType = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xx-large-x2';
+export declare type SpaceTypesPositiveRemValuesType = 0.25 | 0.5 | 1 | 1.5 | 2 | 3 | 3.5 | 7;
+export declare type SpaceTypesType = 'zero' | SpaceTypesPositiveValuesType;
+declare type SpaceTypesTypeUnion = `${SpaceTypesType} ${SpaceTypesType}`;
+declare type SpaceTypesTypeUnionInfinite = `${SpaceTypesType} ${SpaceTypesType} ${string}`;
+export declare type SpaceRemValuesType = 0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 | 8.5 | 9 | 9.5 | 10;
+declare type SpaceRemStringType = `${SpaceRemValuesType}rem`;
+declare type SpaceRemStringFallback = `${SpaceRemValuesType}`;
+declare type SpaceRemStringFallbackUnionInfinite = `${SpaceRemValuesType} ${string}`;
+declare type SpacePxStringType = `${number}px`;
+declare type SpaceRemNumberType = SpaceRemValuesType;
+export declare type SpaceStringTypes = SpaceRemStringType | SpacePxStringType | SpaceRemStringFallback | SpaceRemStringFallbackUnionInfinite | SpaceTypesType | SpaceTypesTypeUnion | SpaceTypesTypeUnionInfinite;
+export declare type SpaceType = SpaceStringTypes | SpaceRemNumberType | boolean;
 export declare type SpacingProps = SpacingElementProps & {
     space?: SpaceType | SpacingElementProps;
 };
@@ -31,3 +43,4 @@ export declare type StyleObjectProps = SpacingProps & {
     width?: string;
     height?: string;
 };
+export {};

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

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import type { SpacingProps } from '../../shared/types';
+import { FormStatusText } from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 export type StepIndicatorMode = 'static' | 'strict' | 'loose';
 export type StepIndicatorData =
@@ -9,8 +12,8 @@ export type StepIndicatorData =
       is_current?: boolean;
       inactive?: boolean;
       disabled?: boolean;
-      status?: string | React.ReactNode;
-      status_state?: 'warn' | 'info' | 'error';
+      status?: FormStatusText;
+      status_state?: StepIndicatorStatusState;
 
       /**
        * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
@@ -19,49 +22,14 @@ export type StepIndicatorData =
       on_render?: (...args: any[]) => any;
     }[];
 export type StepIndicatorTitle = string | React.ReactNode;
-export type StepIndicatorStatus = string | React.ReactNode;
 export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
 export type StepIndicatorCurrentStep = string | number;
-export type StepIndicatorHideNumbers = 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".
- */
-
-export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
+export interface StepIndicatorProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
@@ -76,11 +44,11 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
    * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorData;
-  title: StepIndicatorTitle;
+  title?: StepIndicatorTitle;
   is_current?: boolean;
   inactive?: boolean;
   disabled?: boolean;
-  status?: StepIndicatorStatus;
+  status?: FormStatusText;
   status_state?: StepIndicatorStatusState;
 
   /**
@@ -100,7 +68,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   /**
    * Define whether to show automatically counted numbers or not. Defaults to `false`.
    */
-  hide_numbers?: StepIndicatorHideNumbers;
+  hide_numbers?: boolean;
 
   /**
    * 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 }`.
@@ -108,35 +76,10 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   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`.
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
    */
-  left?: StepIndicatorLeft;
+  no_animation?: boolean;
+  skeleton?: SkeletonShow;
   class?: string;
   className?: string;
   children?: StepIndicatorChildren;

package/es/components/step-indicator/StepIndicatorContext.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface StepIndicatorProviderProps {
   /**
    * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.

package/es/components/step-indicator/StepIndicatorItem.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
+import { FormStatusText } from '../FormStatus';
+import { StepIndicatorStatusState } from './StepIndicator';
 export type StepIndicatorItemTitle = string | React.ReactNode;
-export type StepIndicatorItemHideNumbers = string | boolean;
-export type StepIndicatorItemStatus = string | React.ReactNode;
-export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface StepIndicatorItemProps
   extends React.HTMLProps<HTMLElement> {
   /**
@@ -19,7 +14,7 @@ export interface StepIndicatorItemProps
   /**
    * Define whether to show automatically counted numbers or not. Defaults to `false`.
    */
-  hide_numbers?: StepIndicatorItemHideNumbers;
+  hide_numbers?: boolean;
 
   /**
    * 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 }`.
@@ -39,8 +34,8 @@ export interface StepIndicatorItemProps
   is_current?: boolean;
   inactive?: boolean;
   disabled?: boolean;
-  status?: StepIndicatorItemStatus;
-  status_state?: StepIndicatorItemStatusState;
+  status?: FormStatusText;
+  status_state?: StepIndicatorStatusState;
   currentItemNum: number;
 }
 export default class StepIndicatorItem extends React.Component<
@@ -50,22 +45,14 @@ export default class StepIndicatorItem extends React.Component<
   static defaultProps: object;
   render(): JSX.Element;
 }
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface StepItemButtonProps {
   children?: React.ReactNode;
   inner_ref?: Record<string, unknown>;
   className?: string;
-  status?: string;
-  status_state?: string;
+  status?: FormStatusText;
+  status_state?: StepIndicatorStatusState;
 }
 export const StepItemButton: React.FC<StepItemButtonProps>;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface StepItemWrapperProps {
   children?: React.ReactNode;
   number?: number;

package/es/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
-export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose';
+import type { SpacingProps } from '../../shared/types';
+import { FormStatusText } from '../FormStatus';
+import {
+  StepIndicatorStatusState,
+  StepIndicatorMode
+} from './StepIndicator';
 export type StepIndicatorSidebarCurrentStep = string | number;
 export type StepIndicatorSidebarData =
   | string
@@ -9,8 +14,8 @@ export type StepIndicatorSidebarData =
       is_current?: boolean;
       inactive?: boolean;
       disabled?: boolean;
-      status?: string | React.ReactNode;
-      status_state?: 'warn' | 'info' | 'error';
+      status?: FormStatusText;
+      status_state?: StepIndicatorStatusState;
 
       /**
        * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
@@ -18,12 +23,9 @@ export type StepIndicatorSidebarData =
       on_click?: (...args: any[]) => any;
       on_render?: (...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".
- */
-
 export interface StepIndicatorSidebarProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
@@ -32,7 +34,7 @@ export interface StepIndicatorSidebarProps
   /**
    * <em>(required)</em> 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?: StepIndicatorSidebarMode;
+  mode?: StepIndicatorMode;
 
   /**
    * Defines the active number marked step starting by 0. Defaults to `0`.

package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface StepIndicatorTriggerButtonProps
   extends React.HTMLProps<HTMLElement> {
   /**

package/es/components/switch/Switch.d.ts

@@ -1,60 +1,22 @@
 import * as React from 'react';
+import { FormStatusState, FormStatusText } from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type SwitchLabel =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type SwitchLabelPosition = 'left' | 'right';
-export type SwitchChecked = string | boolean;
-export type SwitchDisabled = string | boolean;
 export type SwitchSize = 'default' | 'medium' | 'large';
-export type SwitchStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type SwitchStatusNoAnimation = string | boolean;
 export type SwitchSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type SwitchAttributes = string | Record<string, unknown>;
-export type SwitchReadOnly = string | boolean;
-export type SwitchSkeleton = string | boolean;
-export type SwitchSpace =
-  | 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 SwitchTop = string | number | boolean;
-export type SwitchRight = string | number | boolean;
-export type SwitchBottom = string | number | boolean;
-export type SwitchLeft = string | number | boolean;
 export type SwitchChildren = string | ((...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".
- */
-
-export interface SwitchProps extends React.HTMLProps<HTMLElement> {
+export interface SwitchProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.
    */
@@ -78,8 +40,8 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   /**
    * Determine whether the switch is checked or not. The default will be `false`.
    */
-  checked?: SwitchChecked;
-  disabled?: SwitchDisabled;
+  checked?: boolean;
+  disabled?: boolean;
   id?: string;
 
   /**
@@ -90,12 +52,12 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: SwitchStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
@@ -106,7 +68,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
   global_status_id?: string;
-  status_no_animation?: SwitchStatusNoAnimation;
+  status_no_animation?: boolean;
 
   /**
    * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.
@@ -114,37 +76,12 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   suffix?: SwitchSuffix;
   value?: string;
   attributes?: SwitchAttributes;
-  readOnly?: SwitchReadOnly;
+  readOnly?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: SwitchSkeleton;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: SwitchSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: SwitchTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: SwitchRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: SwitchBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: SwitchLeft;
+  skeleton?: SkeletonShow;
   class?: string;
   className?: string;
   children?: SwitchChildren;