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

package/es/components/tabs/Tabs.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import type { SectionSpacing, SectionStyleTypes } from '../Section';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 import ContentWrapper from './TabsContentWrapper';
 import CustomContent from './TabsCustomContent';
 export type TabsData =
@@ -14,59 +17,19 @@ export type TabsContent =
   | Record<string, unknown>
   | React.ReactNode
   | ((...args: any[]) => any);
-export type TabsContentSpacing = string | boolean;
 export type TabsTabElement =
   | Record<string, unknown>
   | React.ReactNode
   | ((...args: any[]) => any);
 export type TabsSelectedKey = string | number;
 export type TabsAlign = 'left' | 'center' | 'right';
-export type TabsTabsSpacing = string | boolean;
-export type TabsNoBorder = string | boolean;
-export type TabsNavButtonEdge = string | boolean;
-export type TabsUseHash = string | boolean;
-export type TabsPrerender = string | boolean;
-export type TabsPreventRerender = string | boolean;
-export type TabsScroll = string | boolean;
-export type TabsSkeleton = string | boolean;
-export type TabsSpace =
-  | 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 TabsTop = string | number | boolean;
-export type TabsRight = string | number | boolean;
-export type TabsBottom = string | number | boolean;
-export type TabsLeft = string | number | boolean;
 export type TabsChildren =
   | Record<string, unknown>
   | 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 TabsProps extends React.HTMLProps<HTMLElement> {
+export interface TabsProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key: &#39;...&#39;, hash: &#39;...&#39;}]`
    */
@@ -80,12 +43,12 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   /**
    * To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
-  content_style?: string;
+  content_style?: SectionStyleTypes;
 
   /**
    * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `large`.
    */
-  content_spacing?: TabsContentSpacing;
+  content_spacing?: SectionSpacing;
   label?: string;
 
   /**
@@ -106,69 +69,44 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   /**
    * To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
-  tabs_style?: string;
+  tabs_style?: SectionStyleTypes;
 
   /**
    * To modify the `spacing` inside the tab list. Defaults to `null`.
    */
-  tabs_spacing?: TabsTabsSpacing;
+  tabs_spacing?: boolean;
 
   /**
    * If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.
    */
-  no_border?: TabsNoBorder;
+  no_border?: boolean;
 
   /**
    * If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
    */
-  nav_button_edge?: TabsNavButtonEdge;
-  use_hash?: TabsUseHash;
+  nav_button_edge?: boolean;
+  use_hash?: boolean;
 
   /**
    * If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
    */
-  prerender?: TabsPrerender;
+  prerender?: boolean;
 
   /**
    * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
    */
-  prevent_rerender?: TabsPreventRerender;
+  prevent_rerender?: boolean;
 
   /**
    * If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.
    */
-  scroll?: TabsScroll;
+  scroll?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: TabsSkeleton;
+  skeleton?: SkeletonShow;
   id?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: TabsSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: TabsTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: TabsRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: TabsBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: TabsLeft;
   class?: string;
   className?: string;
 
@@ -204,10 +142,6 @@ export default class Tabs extends React.Component<TabsProps, any> {
   static Content = CustomContent;
   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 DummyProps {
   /**
    * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.

package/es/components/tabs/TabsContentWrapper.d.ts

@@ -1,13 +1,9 @@
 import * as React from 'react';
+import type { SectionSpacing, SectionStyleTypes } from '../Section';
 export type ContentWrapperSelectedKey = string | number;
-export type ContentWrapperContentSpacing = string | boolean;
 export type ContentWrapperChildren =
   | 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 ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   id: string;
 
@@ -19,12 +15,12 @@ export interface ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   /**
    * To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
-  content_style?: string;
+  content_style?: SectionStyleTypes;
 
   /**
    * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `large`.
    */
-  content_spacing?: ContentWrapperContentSpacing;
+  content_spacing?: SectionSpacing;
 
   /**
    * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.

package/es/components/tabs/TabsCustomContent.d.ts

@@ -1,77 +1,20 @@
 import * as React from 'react';
+import type { SpacingProps } from '../space/types';
 export type CustomContentTitle =
   | Record<string, unknown>
   | React.ReactNode
   | ((...args: any[]) => any);
-export type CustomContentSelected = string | boolean;
-export type CustomContentDisabled = string | boolean;
-export type CustomContentSpace =
-  | 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 CustomContentTop = string | number | boolean;
-export type CustomContentRight = string | number | boolean;
-export type CustomContentBottom = string | number | boolean;
-export type CustomContentLeft = string | number | boolean;
 export type CustomContentChildren =
   | 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 CustomContentProps extends React.HTMLProps<HTMLElement> {
+export interface CustomContentProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   displayName?: string;
   title?: CustomContentTitle;
   hash?: string;
-  selected?: CustomContentSelected;
-  disabled?: CustomContentDisabled;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: CustomContentSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: CustomContentTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: CustomContentRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: CustomContentBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: CustomContentLeft;
+  selected?: boolean;
+  disabled?: boolean;
 
   /**
    * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.

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

@@ -23,10 +23,9 @@
   flex: 0 1 auto;
   overflow-x: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
   /* Hide scrollbar for Chrome, Safari */
   /* stylelint-disable-next-line */
   -ms-overflow-style: none; /* IE and Edge */
@@ -45,20 +44,21 @@ html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-tabs__tabs__tablist::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-tabs__tabs__tablist::-webkit-scrollbar {

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

@@ -1 +1 @@
-.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--color-sea-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--color-black-8)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:.5rem}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:.5rem}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--color-sea-green);border-radius:.5rem}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--color-emerald-green)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}
+.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}

package/es/components/tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
-import { SpacingProps } from '../../shared/types';
-import { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
 export interface TagProps {
     /**
      * The content of the tag element, can be a string or a React Element.

package/es/components/tag/TagGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SpacingProps } from '../../shared/types';
-import { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
 export interface TagGroupProps {
     /**
      * Aria label to describe the tag group

package/es/components/textarea/Textarea.d.ts

@@ -1,71 +1,31 @@
 import * as React from 'react';
-export type TextareaLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type TextareaLabelDirection = 'horizontal' | 'vertical';
-export type TextareaLabelSrOnly = string | boolean;
-export type TextareaStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type TextareaStatusNoAnimation = string | boolean;
+import {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 export type TextareaSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type TextareaAlign = 'left' | 'right';
-export type TextareaStretch = string | boolean;
-export type TextareaDisabled = string | boolean;
-export type TextareaSkeleton = string | boolean;
-export type TextareaAutoresize = string | boolean;
 export type TextareaAutoresizeMaxRows = string | number;
 export type TextareaTextareaAttributes = string | Record<string, unknown>;
-export type TextareaReadOnly = string | boolean;
 export type TextareaRows = number | string;
 export type TextareaCols = number | string;
 export type TextareaInnerRef =
   | ((...args: any[]) => any)
   | Record<string, unknown>;
-export type TextareaSpace =
-  | 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 TextareaTop = string | number | boolean;
-export type TextareaRight = string | number | boolean;
-export type TextareaBottom = string | number | boolean;
-export type TextareaLeft = string | number | boolean;
 export type TextareaTextareaElement =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type TextareaChildren = 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 TextareaProps extends React.HTMLProps<HTMLElement> {
+export interface TextareaProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * The content value of the Textarea.
    */
@@ -75,22 +35,22 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   /**
    * Prepends the Form Label component. If no ID is provided, a random ID is created.
    */
-  label?: TextareaLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
    */
-  label_direction?: TextareaLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: TextareaLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * 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?: TextareaStatus;
+  status?: FormStatusText;
 
   /**
    * To control the visual focus state as a prop, like `focus` or `blur`.
@@ -100,13 +60,13 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: TextareaStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -131,18 +91,18 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, then the Textarea field will be 100% in `width`.
    */
-  stretch?: TextareaStretch;
-  disabled?: TextareaDisabled;
+  stretch?: boolean;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: TextareaSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.
    */
-  autoresize?: TextareaAutoresize;
+  autoresize?: boolean;
 
   /**
    * Set a number to define how many rows the Textarea can auto grow.
@@ -159,7 +119,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
    * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
    */
   textarea_attributes?: TextareaTextareaAttributes;
-  readOnly?: TextareaReadOnly;
+  readOnly?: boolean;
   rows?: TextareaRows;
   cols?: TextareaCols;
 
@@ -167,31 +127,6 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
    * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: TextareaInnerRef;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: TextareaSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: TextareaTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: TextareaRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: TextareaBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: TextareaLeft;
   className?: string;
   textarea_element?: TextareaTextareaElement;
   children?: TextareaChildren;

package/es/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -14,10 +14,9 @@
   background-color: var(--color-white);
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
@@ -29,20 +28,21 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-textarea__textarea::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-textarea__placeholder {

package/es/components/textarea/style/themes/dnb-textarea-theme-ui.min.css

@@ -1 +1 @@
-:root{--textarea-rows:2}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;background-color:var(--color-white);color:var(--color-black);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--color-sea-green) transparent;scrollbar-width:thin}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--color-black-8)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:.5rem}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:.5rem}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--color-sea-green);border-radius:.5rem}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--color-emerald-green)}}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);color:var(--color-black-55);display:-webkit-box}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{box-shadow:0 0 0 .125rem var(--color-emerald-green)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55);-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{background-color:var(--color-black-3);box-shadow:0 0 0 .0625rem var(--color-black-55)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}
+:root{--textarea-rows:2}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;background-color:var(--color-white);color:var(--color-black);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);color:var(--color-black-55);display:-webkit-box}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{box-shadow:0 0 0 .125rem var(--color-emerald-green)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55);-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{background-color:var(--color-black-3);box-shadow:0 0 0 .0625rem var(--color-black-55)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}

package/es/components/timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SpacingProps } from '../../shared/types';
-import { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
 import TimelineItem, { TimelineItemProps } from './TimelineItem';
 export declare type TimelineProps = {
     /**

package/es/components/timeline/TimelineItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
-import { SkeletonShow } from '../skeleton/Skeleton';
+import type { SkeletonShow } from '../skeleton/Skeleton';
 export declare type TimelineItemProps = {
     /**
      * Icon displaying on the left side.