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

package/es/components/toggle-button/ToggleButton.d.ts

@@ -1,21 +1,16 @@
 import * as React from 'react';
+import type { ButtonIconPosition } from '../button';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { IconPrimaryIcon, IconPrimarySize } from '../IconPrimary';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 import ToggleButtonGroup from './ToggleButtonGroup';
-export type ToggleButtonLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonLabelDirection = 'horizontal' | 'vertical';
-export type ToggleButtonLabelSrOnly = string | boolean;
-export type ToggleButtonChecked = string | boolean;
 export type ToggleButtonVariant = 'default' | 'checkbox' | 'radio';
-export type ToggleButtonDisabled = string | boolean;
-export type ToggleButtonSkeleton = string | boolean;
-export type ToggleButtonStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonStatusNoAnimation = string | boolean;
 export type ToggleButtonSuffix =
   | string
   | ((...args: any[]) => any)
@@ -25,48 +20,11 @@ export type ToggleButtonValue =
   | number
   | Record<string, unknown>
   | any[];
-export type ToggleButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type ToggleButtonIconPosition = 'left' | 'right';
 export type ToggleButtonAttributes = string | Record<string, unknown>;
-export type ToggleButtonReadOnly = string | boolean;
-export type ToggleButtonSpace =
-  | 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 ToggleButtonTop = string | number | boolean;
-export type ToggleButtonRight = string | number | boolean;
-export type ToggleButtonBottom = string | number | boolean;
-export type ToggleButtonLeft = string | number | boolean;
 export type ToggleButtonChildren = 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 ToggleButtonProps extends React.HTMLProps<HTMLElement> {
+export interface ToggleButtonProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> the text shown in the ToggleButton.
    */
@@ -75,9 +33,9 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: ToggleButtonLabel;
-  label_direction?: ToggleButtonLabelDirection;
-  label_sr_only?: ToggleButtonLabelSrOnly;
+  label?: FormLabelText;
+  label_direction?: FormLabelLabelDirection;
+  label_sr_only?: boolean;
 
   /**
    * The `title` of the input - describing it a bit further for accessibility reasons.
@@ -87,32 +45,32 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Determine whether the ToggleButton is checked or not. The default will be `false`.
    */
-  checked?: ToggleButtonChecked;
+  checked?: boolean;
   variant?: ToggleButtonVariant;
   left_component?: React.ReactNode;
-  disabled?: ToggleButtonDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: ToggleButtonSkeleton;
+  skeleton?: SkeletonShow;
   id?: string;
 
   /**
    * 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?: ToggleButtonStatus;
+  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.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: ToggleButtonStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -132,44 +90,19 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Icon to be included in the toggle button.
    */
-  icon?: ToggleButtonIcon;
+  icon?: IconPrimaryIcon;
 
   /**
    * Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
    */
-  icon_position?: ToggleButtonIconPosition;
+  icon_position?: ButtonIconPosition;
 
   /**
    * Define icon width and height. Defaults to 16px
    */
-  icon_size?: string;
+  icon_size?: IconPrimarySize;
   attributes?: ToggleButtonAttributes;
-  readOnly?: ToggleButtonReadOnly;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: ToggleButtonSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: ToggleButtonTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: ToggleButtonRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: ToggleButtonBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: ToggleButtonLeft;
+  readOnly?: boolean;
   class?: string;
   className?: string;
   children?: ToggleButtonChildren;

package/es/components/toggle-button/ToggleButtonGroup.d.ts

@@ -1,26 +1,17 @@
 import * as React from 'react';
-export type ToggleButtonGroupLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonGroupLabelDirection = 'horizontal' | 'vertical';
-export type ToggleButtonGroupLabelSrOnly = string | boolean;
-export type ToggleButtonGroupMultiselect = string | boolean;
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
-export type ToggleButtonGroupNoFieldset = string | boolean;
-export type ToggleButtonGroupDisabled = string | boolean;
-export type ToggleButtonGroupSkeleton = string | boolean;
-export type ToggleButtonGroupStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonGroupStatusNoAnimation = string | boolean;
 export type ToggleButtonGroupSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type ToggleButtonGroupVertical = string | boolean;
 export type ToggleButtonGroupLayoutDirection = 'column' | 'row';
 export type ToggleButtonGroupValue =
   | string
@@ -29,84 +20,52 @@ export type ToggleButtonGroupValue =
   | any[];
 export type ToggleButtonGroupValues = string | any[];
 export type ToggleButtonGroupAttributes = string | Record<string, unknown>;
-export type ToggleButtonGroupSpace =
-  | 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 ToggleButtonGroupTop = string | number | boolean;
-export type ToggleButtonGroupRight = string | number | boolean;
-export type ToggleButtonGroupBottom = string | number | boolean;
-export type ToggleButtonGroupLeft = string | number | boolean;
 export type ToggleButtonGroupChildren =
   | 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 ToggleButtonGroupProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: ToggleButtonGroupLabel;
-  label_direction?: ToggleButtonGroupLabelDirection;
-  label_sr_only?: ToggleButtonGroupLabelSrOnly;
+  label?: FormLabelText;
+  label_direction?: FormLabelLabelDirection;
+  label_sr_only?: boolean;
 
   /**
    * The `title` of the input - describing it a bit further for accessibility reasons.
    */
   title?: string;
-  multiselect?: ToggleButtonGroupMultiselect;
+  multiselect?: boolean;
   variant?: ToggleButtonGroupVariant;
   left_component?: React.ReactNode;
-  no_fieldset?: ToggleButtonGroupNoFieldset;
-  disabled?: ToggleButtonGroupDisabled;
+  no_fieldset?: boolean;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: ToggleButtonGroupSkeleton;
+  skeleton?: SkeletonShow;
   id?: string;
   name?: string;
 
   /**
    * 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?: ToggleButtonGroupStatus;
+  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.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: ToggleButtonGroupStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -117,7 +76,7 @@ export interface ToggleButtonGroupProps
    * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.
    */
   suffix?: ToggleButtonGroupSuffix;
-  vertical?: ToggleButtonGroupVertical;
+  vertical?: boolean;
   layout_direction?: ToggleButtonGroupLayoutDirection;
 
   /**
@@ -130,31 +89,6 @@ export interface ToggleButtonGroupProps
    */
   values?: ToggleButtonGroupValues;
   attributes?: ToggleButtonGroupAttributes;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: ToggleButtonGroupSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: ToggleButtonGroupTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: ToggleButtonGroupRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: ToggleButtonGroupBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: ToggleButtonGroupLeft;
   class?: string;
   className?: string;
   children?: ToggleButtonGroupChildren;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
 export declare type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export declare type TooltipArrow = null | 'center' | 'top' | 'right' | 'bottom' | 'left';
 export declare type TooltipAlign = null | 'center' | 'right' | 'left';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { LocaleProps, SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { LocaleProps, SpacingProps } from '../../shared/types';
 export declare type UploadAcceptedFileTypes = string[];
 export declare type UploadProps = {
     /**

package/es/elements/Anchor.d.ts

@@ -4,7 +4,8 @@
  */
 import React from 'react';
 import { ElementIsType } from './Element';
-import { SpacingProps } from '../shared/types';
+import type { SkeletonShow } from '../components/skeleton/Skeleton';
+import type { SpacingProps } from '../shared/types';
 export declare type AnchorProps = {
     element?: ElementIsType;
     href?: string;
@@ -12,7 +13,7 @@ export declare type AnchorProps = {
     targetBlankTitle?: string;
     target?: string;
     tooltip?: React.ReactNode;
-    skeleton?: boolean;
+    skeleton?: SkeletonShow;
     omitClass?: boolean;
     innerRef?: React.RefObject<HTMLAnchorElement>;
     /** @deprecated use innerRef instead */
@@ -22,5 +23,5 @@ export declare type AnchorAllProps = AnchorProps & React.HTMLProps<HTMLAnchorEle
 export declare function AnchorInstance(localProps: AnchorAllProps): JSX.Element;
 declare const Anchor: React.ForwardRefExoticComponent<Pick<AnchorProps & React.HTMLProps<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
-}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "space" | "width" | "height" | "className" | "children" | "skeleton" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "shape" | "list" | "tooltip" | "step" | "disabled" | "innerRef" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & React.RefAttributes<HTMLAnchorElement>>;
+}, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "width" | "height" | "shape" | "skeleton" | "innerRef" | "children" | "list" | "tooltip" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/es/elements/Anchor.js

@@ -37,10 +37,11 @@ export function AnchorInstance(localProps) {
 
   const attributes = rest;
   const internalId = id || 'id' + makeUniqueId();
-  const showTooltip = allProps.target === '_blank' && !allProps.title;
+  const showTooltip = tooltip || allProps.target === '_blank' && !allProps.title;
   const as = element || 'a';
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
+    id: id,
     className: classnames(className, omitClass !== true && 'dnb-anchor', allProps.target === '_blank' && typeof children !== 'string' && 'dnb-anchor--no-icon')
   }, attributes, {
     innerRef: innerRef

package/es/elements/Blockquote.d.ts

@@ -1,28 +1,8 @@
 import * as React from 'react';
-export type BlockquoteSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type BlockquoteTop = string | number | boolean;
-export type BlockquoteRight = string | number | boolean;
-export type BlockquoteBottom = string | number | boolean;
-export type BlockquoteLeft = string | number | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface BlockquoteProps extends React.HTMLProps<HTMLElement> {
-  space?: BlockquoteSpace;
-  top?: BlockquoteTop;
-  right?: BlockquoteRight;
-  bottom?: BlockquoteBottom;
-  left?: BlockquoteLeft;
+import type { SpacingProps } from '../shared/types';
+export interface BlockquoteProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   children?: React.ReactNode;
 }
 declare const Blockquote: React.FC<BlockquoteProps>;

package/es/elements/Code.d.ts

@@ -1,28 +1,8 @@
 import * as React from 'react';
-export type CodeSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type CodeTop = string | number | boolean;
-export type CodeRight = string | number | boolean;
-export type CodeBottom = string | number | boolean;
-export type CodeLeft = string | number | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface CodeProps extends React.HTMLProps<HTMLElement> {
-  space?: CodeSpace;
-  top?: CodeTop;
-  right?: CodeRight;
-  bottom?: CodeBottom;
-  left?: CodeLeft;
+import type { SpacingProps } from '../shared/types';
+export interface CodeProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   children?: React.ReactNode;
 }
 declare const Code: React.FC<CodeProps>;

package/es/elements/Div.d.ts

@@ -1,28 +1,8 @@
 import * as React from 'react';
-export type DivSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type DivTop = string | number | boolean;
-export type DivRight = string | number | boolean;
-export type DivBottom = string | number | boolean;
-export type DivLeft = string | number | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface DivProps extends React.HTMLProps<HTMLElement> {
-  space?: DivSpace;
-  top?: DivTop;
-  right?: DivRight;
-  bottom?: DivBottom;
-  left?: DivLeft;
+import type { SpacingProps } from '../shared/types';
+export interface DivProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   children?: React.ReactNode;
 }
 declare const Div: React.FC<DivProps>;

package/es/elements/Dl.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { ElementProps } from './Element';
-import { SpacingProps } from '../shared/types';
+import type { SpacingProps } from '../shared/types';
 export declare type DlProps = {
     /**
      * Use "true" to horizontallly align both the term and the description