@dnb/eufemia 9.44.0 → 9.45.1

package/elements/lib.d.ts

@@ -1,21 +1,21 @@
 export function getElements(): {
-    Anchor: import("react").ForwardRefExoticComponent<import("./Anchor").AnchorProps & import("react").HTMLAttributes<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
-        space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
-    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    Anchor: import("react").ForwardRefExoticComponent<Pick<import("./Anchor").AnchorProps & import("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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "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" | "children" | "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" | "innerRef" | "list" | "tooltip" | "step" | "size" | "skeleton" | "alt" | "src" | "shape" | "content" | "element" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "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" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "to" | "targetBlankTitle" | "omitClass" | "target_blank_title"> & import("react").RefAttributes<HTMLAnchorElement>>;
     Blockquote: import("react").FC<import("./Blockquote").BlockquoteProps>;
     Code: import("react").FC<import("./Code").CodeProps>;
     Dd: import("react").ForwardRefExoticComponent<import("./Dd").DdProps & import("../shared/types").SpacingElementProps & {
-        space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+        space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
     } & import("react").RefAttributes<unknown>>;
     Div: import("react").FC<import("./Div").DivProps>;
     Dl: {
         ({ direction, ...props }: import("./Dl").DlAllProps): JSX.Element;
         Item({ className, children, ...props }: import("react").AllHTMLAttributes<HTMLSpanElement> & import("../shared/types").SpacingElementProps & {
-            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+            space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
     };
     Dt: import("react").ForwardRefExoticComponent<import("./Dt").DtProps & import("../shared/types").SpacingElementProps & {
-        space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+        space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
     } & import("react").RefAttributes<unknown>>;
     H: typeof H;
     H1: import("react").FC<import("./H1").H1Props>;
@@ -35,9 +35,9 @@ export function getElements(): {
         tagName: string;
     };
     Li: ({ className, ...p }?: import("./Li").LiAllProps) => JSX.Element;
-    Link: import("react").ForwardRefExoticComponent<import("./Anchor").AnchorProps & import("react").HTMLAttributes<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
-        space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
-    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    Link: import("react").ForwardRefExoticComponent<Pick<import("./Anchor").AnchorProps & import("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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "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" | "children" | "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" | "innerRef" | "list" | "tooltip" | "step" | "size" | "skeleton" | "alt" | "src" | "shape" | "content" | "element" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "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" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "to" | "targetBlankTitle" | "omitClass" | "target_blank_title"> & import("react").RefAttributes<HTMLAnchorElement>>;
     Ol: ({ nested, inside, outside, ...p }?: import("./Ol").OlAllProps) => JSX.Element;
     P: import("react").FC<import("./P").PProps>;
     Paragraph: {

package/es/components/avatar/Avatar.d.ts

@@ -61,7 +61,7 @@ export declare const defaultProps: {
 declare const Avatar: {
     (localProps: AvatarProps & SpacingProps): JSX.Element;
     Group: (localProps: import("./AvatarGroup").AvatarGroupProps & import("../space/types").SpacingElementProps & {
-        space?: import("../space/types").SpaceTypes | import("../space/types").SpacingElementProps;
+        space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
     }) => JSX.Element;
 };
 export { AvatarGroup };

package/es/components/lib.d.ts

@@ -3,16 +3,16 @@ export function getComponents(): {
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }): JSX.Element;
         Group: (localProps: import("./avatar/AvatarGroup").AvatarGroupProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }) => JSX.Element;
     };
     Badge: typeof Badge;
     Breadcrumb: {
         (localProps: import("./breadcrumb/Breadcrumb").BreadcrumbProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }): JSX.Element;
         Item: (localProps: import("./breadcrumb/BreadcrumbItem").BreadcrumbItemProps) => JSX.Element;
     };
@@ -34,7 +34,7 @@ export function getComponents(): {
     Icon: typeof Icon;
     IconPrimary: typeof IconPrimary;
     InfoCard: (localProps: import("./info-card/InfoCard").InfoCardProps & import("./space/types").SpacingElementProps & {
-        space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+        space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
     }) => JSX.Element;
     Input: typeof Input;
     InputMasked: import("react").FC<import("./input-masked/InputMasked").InputMaskedProps>;
@@ -58,16 +58,16 @@ export function getComponents(): {
     Tabs: typeof Tabs;
     Tag: {
         (localProps: import("./tag/Tag").TagProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }): JSX.Element;
         Group: (localProps: import("./tag/TagGroup").TagGroupProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }) => JSX.Element;
     };
     Textarea: typeof Textarea;
     Timeline: {
         (localProps: import("./timeline/Timeline").TimelineProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
         }): JSX.Element;
         Item: (localProps: import("./timeline/TimelineItem").TimelineItemProps) => JSX.Element;
     };

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

@@ -104,11 +104,7 @@
 .dnb-section--emerald-green .dnb-anchor,
 .dnb-section--sea-green .dnb-anchor {
   color: #fff;
-  color: var(--color-white);
-  -webkit-box-shadow: 0 0.09375rem 0 0 #fff;
-          box-shadow: 0 0.09375rem 0 0 #fff;
-  -webkit-box-shadow: 0 0.09375rem 0 0 var(--color-white);
-          box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+  color: var(--color-white); }
   .dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active,
   .dnb-section--emerald-green .dnb-anchor:hover,
   .dnb-section--emerald-green .dnb-anchor:active,
@@ -118,8 +114,7 @@
     color: var(--color-emerald-green);
     background-color: #fff;
     background-color: var(--color-white);
-    -webkit-box-shadow: none;
-            box-shadow: none; }
+    text-decoration: none; }
   .dnb-section--fire-red .dnb-anchor:active,
   .dnb-section--emerald-green .dnb-anchor:active,
   .dnb-section--sea-green .dnb-anchor:active {

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

@@ -1 +1 @@
-.dnb-section--divider{color:#333;color:var(--color-black-80)}.dnb-section--divider:after{-webkit-box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 #d2f0e9,99vw .0625rem 0 0 #d2f0e9,0 -.0625rem 0 0 #d2f0e9,99vw -.0625rem 0 0 #d2f0e9,198vw .0625rem 0 0 #d2f0e9,198vw -.0625rem 0 0 #d2f0e9;box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 #d2f0e9,99vw .0625rem 0 0 #d2f0e9,0 -.0625rem 0 0 #d2f0e9,99vw -.0625rem 0 0 #d2f0e9,198vw .0625rem 0 0 #d2f0e9,198vw -.0625rem 0 0 #d2f0e9;-webkit-box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:#fff;color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--mint-green-12{color:#333;color:var(--color-black-80)}.dnb-section--mint-green-12:after{color:#f4fbf9;color:var(--color-mint-green-12)}.dnb-section--white{color:#333;color:var(--color-black-80)}.dnb-section--white:after{color:#fff;color:var(--color-white)}.dnb-section--mint-green{color:#333;color:var(--color-black-80)}.dnb-section--mint-green:after{color:#a5e1d2;color:var(--color-mint-green)}.dnb-section--lavender{color:#333;color:var(--color-black-80)}.dnb-section--lavender:after{color:#f2f2f5;color:var(--color-lavender)}.dnb-section--sand-yellow{color:#333;color:var(--color-black-80)}.dnb-section--sand-yellow:after{color:#fbf6ec;color:var(--color-sand-yellow)}.dnb-section--pistachio{color:#333;color:var(--color-black-80)}.dnb-section--pistachio:after{color:#f2f4ec;color:var(--color-pistachio)}.dnb-section--black-3{color:#333;color:var(--color-black-80)}.dnb-section--black-3:after{color:#f8f8f8;color:var(--color-black-3)}.dnb-section--emerald-green{color:#a5e1d2;color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:#14555a;color:var(--color-emerald-green)}.dnb-section--sea-green{color:#fff;color:var(--color-white)}.dnb-section--sea-green:after{color:#007272;color:var(--color-sea-green)}.dnb-section--fire-red{color:#fff;color:var(--color-white)}.dnb-section--fire-red:after{color:#dc2a2a;color:var(--color-fire-red)}.dnb-section--fire-red-8{color:#333;color:var(--color-black-80)}.dnb-section--fire-red-8:after{color:#fdeeee;color:var(--color-fire-red-8)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor{-webkit-box-shadow:0 .09375rem 0 0 #fff;box-shadow:0 .09375rem 0 0 #fff;-webkit-box-shadow:0 .09375rem 0 0 var(--color-white);box-shadow:0 .09375rem 0 0 var(--color-white);color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:hover{background-color:#fff;background-color:var(--color-white);-webkit-box-shadow:none;box-shadow:none;color:#14555a;color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active{background-color:#fff;background-color:var(--color-white);color:#14555a;color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,.dnb-section--fire-red .dnb-anchor:not(:disabled):focus,.dnb-section--sea-green .dnb-anchor:not(:disabled):focus{background-color:transparent;color:#fff;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus{--border-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus{-webkit-box-shadow:0 0 0 .125rem #fff;box-shadow:0 0 0 .125rem #fff;-webkit-box-shadow:0 0 0 .125rem var(--color-white);box-shadow:0 0 0 .125rem var(--color-white)}}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:#fff!important;color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{-webkit-box-shadow:0 0 0 .125rem #fff;box-shadow:0 0 0 .125rem #fff;-webkit-box-shadow:0 0 0 .125rem var(--color-white);box-shadow:0 0 0 .125rem var(--color-white)}}.dnb-section--signal-orange{color:#00343e;color:var(--color-ocean-green)}.dnb-section--signal-orange:after{color:#ff5400;color:var(--color-signal-orange)}.dnb-section--fire-red ::-moz-selection,.dnb-section--mint-green ::-moz-selection,.dnb-section--signal-orange ::-moz-selection{background-color:#fff;background-color:var(--color-white)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection,.dnb-section--signal-orange ::selection{background-color:#fff;background-color:var(--color-white)}
+.dnb-section--divider{color:#333;color:var(--color-black-80)}.dnb-section--divider:after{-webkit-box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 #d2f0e9,99vw .0625rem 0 0 #d2f0e9,0 -.0625rem 0 0 #d2f0e9,99vw -.0625rem 0 0 #d2f0e9,198vw .0625rem 0 0 #d2f0e9,198vw -.0625rem 0 0 #d2f0e9;box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 #d2f0e9,99vw .0625rem 0 0 #d2f0e9,0 -.0625rem 0 0 #d2f0e9,99vw -.0625rem 0 0 #d2f0e9,198vw .0625rem 0 0 #d2f0e9,198vw -.0625rem 0 0 #d2f0e9;-webkit-box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);box-shadow:99vw 0 0 0 currentColor,198vw 0 0 0 currentColor,297vw 0 0 0 currentColor,396vw 0 0 0 currentColor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:#fff;color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--mint-green-12{color:#333;color:var(--color-black-80)}.dnb-section--mint-green-12:after{color:#f4fbf9;color:var(--color-mint-green-12)}.dnb-section--white{color:#333;color:var(--color-black-80)}.dnb-section--white:after{color:#fff;color:var(--color-white)}.dnb-section--mint-green{color:#333;color:var(--color-black-80)}.dnb-section--mint-green:after{color:#a5e1d2;color:var(--color-mint-green)}.dnb-section--lavender{color:#333;color:var(--color-black-80)}.dnb-section--lavender:after{color:#f2f2f5;color:var(--color-lavender)}.dnb-section--sand-yellow{color:#333;color:var(--color-black-80)}.dnb-section--sand-yellow:after{color:#fbf6ec;color:var(--color-sand-yellow)}.dnb-section--pistachio{color:#333;color:var(--color-black-80)}.dnb-section--pistachio:after{color:#f2f4ec;color:var(--color-pistachio)}.dnb-section--black-3{color:#333;color:var(--color-black-80)}.dnb-section--black-3:after{color:#f8f8f8;color:var(--color-black-3)}.dnb-section--emerald-green{color:#a5e1d2;color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:#14555a;color:var(--color-emerald-green)}.dnb-section--sea-green{color:#fff;color:var(--color-white)}.dnb-section--sea-green:after{color:#007272;color:var(--color-sea-green)}.dnb-section--fire-red{color:#fff;color:var(--color-white)}.dnb-section--fire-red:after{color:#dc2a2a;color:var(--color-fire-red)}.dnb-section--fire-red-8{color:#333;color:var(--color-black-80)}.dnb-section--fire-red-8:after{color:#fdeeee;color:var(--color-fire-red-8)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor{color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:hover{background-color:#fff;background-color:var(--color-white);color:#14555a;color:var(--color-emerald-green);text-decoration:none}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active{background-color:#fff;background-color:var(--color-white);color:#14555a;color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,.dnb-section--fire-red .dnb-anchor:not(:disabled):focus,.dnb-section--sea-green .dnb-anchor:not(:disabled):focus{background-color:transparent;color:#fff;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus{--border-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus{-webkit-box-shadow:0 0 0 .125rem #fff;box-shadow:0 0 0 .125rem #fff;-webkit-box-shadow:0 0 0 .125rem var(--color-white);box-shadow:0 0 0 .125rem var(--color-white)}}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:#fff!important;color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:#fff;color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{-webkit-box-shadow:0 0 0 .125rem #fff;box-shadow:0 0 0 .125rem #fff;-webkit-box-shadow:0 0 0 .125rem var(--color-white);box-shadow:0 0 0 .125rem var(--color-white)}}.dnb-section--signal-orange{color:#00343e;color:var(--color-ocean-green)}.dnb-section--signal-orange:after{color:#ff5400;color:var(--color-signal-orange)}.dnb-section--fire-red ::-moz-selection,.dnb-section--mint-green ::-moz-selection,.dnb-section--signal-orange ::-moz-selection{background-color:#fff;background-color:var(--color-white)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection,.dnb-section--signal-orange ::selection{background-color:#fff;background-color:var(--color-white)}

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

@@ -12,6 +12,5 @@ export namespace spacingPropTypes {
 }
 import { createSpacingClasses } from "./SpacingUtils";
 import { removeSpaceProps } from "./SpacingUtils";
-import { createStyleObject } from "./SpacingUtils";
 import PropTypes from "prop-types";
-export { createSpacingClasses, removeSpaceProps, createStyleObject };
+export { createSpacingClasses, removeSpaceProps };

package/es/components/space/SpacingHelper.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { createSpacingClasses, removeSpaceProps, createStyleObject } from './SpacingUtils';
-export { createSpacingClasses, removeSpaceProps, createStyleObject };
+import { createSpacingClasses, removeSpaceProps } from './SpacingUtils';
+export { createSpacingClasses, removeSpaceProps };
 export const spacingPropTypes = {
   space: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),

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

@@ -2,14 +2,8 @@
  * Space helper
  *
  */
-import type { SpacingProps } from './types';
-declare type Props = SpacingProps | Record<string, unknown>;
-declare type StyleObjectProps = {
-    maxWidth?: string;
-    maxHeight?: string;
-    width?: string;
-    height?: string;
-};
+import type { StyleObjectProps, SpaceType, SpacingUnknownProps, SpacingProps } from './types';
+declare type SpaceNumber = number;
 export declare const spacingDefaultProps: {
     space: any;
     top: any;
@@ -27,17 +21,34 @@ export declare const spacePatterns: {
     'xx-large': number;
     'xx-large-x2': number;
 };
-export declare const translateSpace: (type: any) => any;
-export declare const splitTypes: (types: any) => any;
-export declare const sumTypes: (types: any) => any;
-export declare const createTypeModifiers: (types: any) => any;
-export declare const findType: (num: any, { returnObject }?: {
-    returnObject?: boolean;
-}) => string | [string, number];
-export declare const findNearestTypes: (num: any) => any[];
+/**
+ * Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))
+ *
+ * @param types 'small', '16px', '1rem'
+ * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))
+ */
+export declare const calc: (...types: Array<SpaceType>) => string;
+/**
+ * Creates a valid space CSS class out from given space types
+ *
+ * @param props
+ * @param Element to check if it should be handled as inline
+ * @returns "dnb-space__large dnb-space__small"
+ */
+export declare const createSpacingClasses: (props: SpacingProps
+/**
+ * To support typical not defined props form components
+ */
+ | SpacingUnknownProps, Element?: any) => any[];
+export declare const translateSpace: (type: SpaceType) => any;
+export declare const splitTypes: (types: SpaceType | Array<SpaceType>) => SpaceType[];
+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 findNearestTypes: (num: SpaceNumber, multiply?: boolean) => any[];
 export declare const isValidSpaceProp: (propName: string) => boolean;
-export declare const removeSpaceProps: (props: Props) => Props;
-export declare const createSpacingClasses: (props: Props, Element?: any) => any[];
-export declare const createStyleObject: (props: Props & StyleObjectProps) => {};
+export declare const removeSpaceProps: (props: StyleObjectProps) => StyleObjectProps;
+export declare const createStyleObject: (props: StyleObjectProps) => {};
 export declare const isInline: (elementName: string) => boolean;
 export {};

package/es/components/space/SpacingUtils.js

@@ -22,23 +22,81 @@ export const spacePatterns = {
   'xx-large': 3.5,
   'xx-large-x2': 7
 };
+export const calc = (...types) => {
+  const result = [];
+  types.forEach(rawTypes => {
+    createTypeModifiers(rawTypes).forEach(type => {
+      result.push(`var(--spacing-${type})`);
+    });
+  });
+  return result.length ? `calc(${result.join(' + ')})` : null;
+};
+export const createSpacingClasses = (props, Element = null) => {
+  const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
+
+  if (typeof p.space !== 'undefined') {
+    if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
+      p.top = p.right = p.bottom = p.left = p.space;
+    }
+
+    if (typeof p.space === 'object') {
+      for (const i in p.space) {
+        if (!p[i] && isValidSpaceProp(i)) {
+          p[i] = p.space[i];
+        }
+      }
+    }
+
+    delete p.space;
+  }
+
+  return Object.entries(p).reduce((acc, [direction, cur]) => {
+    if (isValidSpaceProp(direction)) {
+      if (String(cur) === '0' || String(cur) === 'false') {
+        acc.push(`dnb-space__${direction}--zero`);
+      } else if (cur) {
+        const typeModifiers = createTypeModifiers(cur);
+        const sum = sumTypes(typeModifiers);
+
+        if (sum > 10) {
+          warn(`Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(',')})`);
+        } else {
+          const nearestTypes = findNearestTypes(sum, true);
+          acc = [...acc, ...nearestTypes.map(type => `dnb-space__${direction}--${type}`)];
+        }
+      }
+    } else if (direction === 'no_collapse') {
+      acc.push('dnb-space--no-collapse');
+
+      if (Element && isInline(Element)) {
+        acc.push('dnb-space--inline');
+      }
+    }
+
+    return acc;
+  }, []);
+};
 export const translateSpace = type => {
-  if (/-x2$/.test(type)) {
-    return spacePatterns[type.replace(/-x2$/, '')] * 2;
+  if (/-x2$/.test(String(type))) {
+    return spacePatterns[String(type).replace(/-x2$/, '')] * 2;
   }
 
-  return spacePatterns[type] || 0;
+  return spacePatterns[String(type)] || 0;
 };
 export const splitTypes = types => {
   if (typeof types === 'string') {
-    types = types.split(/ /g);
+    return clean(types.split(/ /g));
   } else if (typeof types === 'boolean') {
     return ['small'];
   } else if (typeof types === 'number') {
     return [types];
   }
 
-  return types ? types.filter(r => r && r.length > 0) : null;
+  return clean(types) || null;
+
+  function clean(t) {
+    return t === null || t === void 0 ? void 0 : t.filter(r => r && String(r).length > 0);
+  }
 };
 export const sumTypes = types => splitTypes(types).map(type => translateSpace(type)).reduce((acc, cur) => {
   if (cur > 0) {
@@ -50,18 +108,14 @@ export const sumTypes = types => splitTypes(types).map(type => translateSpace(ty
   return acc;
 }, 0);
 export const createTypeModifiers = types => {
-  if (typeof types === 'number') {
-    types = String(types);
-  }
-
   return (splitTypes(types) || []).reduce((acc, type) => {
     if (type) {
-      const firstLetter = type[0];
+      const firstLetter = String(type)[0];
 
       if (parseFloat(firstLetter) > -1) {
-        let num = parseFloat(type);
+        let num = parseFloat(String(type));
 
-        if (num >= 8 && /[0-9]px/.test(type)) {
+        if (num >= 8 && /[0-9]px/.test(String(type))) {
           num = num / 16;
         }
 
@@ -78,7 +132,7 @@ export const createTypeModifiers = types => {
         }
       }
 
-      if (!(parseFloat(type) > 0)) {
+      if (!(parseFloat(String(type)) > 0)) {
         acc.push(type);
       }
     }
@@ -86,39 +140,35 @@ export const createTypeModifiers = types => {
     return acc;
   }, []);
 };
-export const findType = (num, {
-  returnObject = false
-} = {}) => {
-  const found = Object.entries(spacePatterns).find(([k, v]) => k && v === num) || null;
-
-  if (returnObject) {
-    return found;
-  }
+export const findType = num => {
+  const found = findTypeAll(num);
 
   if (found) {
     return found[0];
   }
 
+  return null;
+};
+export const findTypeAll = num => {
+  const found = Object.entries(spacePatterns).find(([k, v]) => k && v === num) || null;
   return found;
 };
-export const findNearestTypes = num => {
+export const findNearestTypes = (num, multiply = false) => {
   let res = [];
-  const near = Object.entries(spacePatterns).reverse().find(([k, v]) => k && num >= v);
+  const near = Object.entries(spacePatterns).reverse().filter(k => multiply ? true : !k[0].includes('-x')).find(([k, v]) => k && num >= v);
   const nearNum = near && near[1] || num;
-  const typeObject = findType(nearNum, {
-    returnObject: true
-  });
+  const types = findTypeAll(nearNum);
 
-  if (typeObject) {
-    const nearType = typeObject[0];
+  if (types) {
+    const nearType = types[0];
     res.push(nearType);
-    const leftOver = num - parseFloat(String(typeObject[1]));
-    const foundMoreTypes = findNearestTypes(leftOver);
+    const leftOver = num - parseFloat(String(types[1]));
+    const foundMoreTypes = findNearestTypes(leftOver, multiply);
     foundMoreTypes.forEach(type => {
       const index = res.indexOf(type);
 
       if (index !== -1) {
-        res[index] = `${type}-x2`;
+        res[index] = multiply ? `${type}-x2` : type;
       }
     });
     res = [...res, ...foundMoreTypes];
@@ -138,51 +188,6 @@ export const removeSpaceProps = props => {
 
   return p;
 };
-export const createSpacingClasses = (props, Element = null) => {
-  const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
-
-  if (typeof p.space !== 'undefined') {
-    if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
-      p.top = p.right = p.bottom = p.left = p.space;
-    }
-
-    if (typeof p.space === 'object') {
-      for (const i in p.space) {
-        if (!p[i] && isValidSpaceProp(i)) {
-          p[i] = p.space[i];
-        }
-      }
-    }
-
-    delete p.space;
-  }
-
-  return Object.entries(p).reduce((acc, [direction, cur]) => {
-    if (isValidSpaceProp(direction)) {
-      if (String(cur) === '0' || String(cur) === 'false') {
-        acc.push(`dnb-space__${direction}--zero`);
-      } else if (cur) {
-        const typeModifiers = createTypeModifiers(cur);
-        const sum = sumTypes(typeModifiers);
-
-        if (sum > 10) {
-          warn(`Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(',')})`);
-        } else {
-          const nearestTypes = findNearestTypes(sum);
-          acc = [...acc, ...nearestTypes.map(type => `dnb-space__${direction}--${type}`)];
-        }
-      }
-    } else if (direction === 'no_collapse') {
-      acc.push('dnb-space--no-collapse');
-
-      if (Element && isInline(Element)) {
-        acc.push('dnb-space--inline');
-      }
-    }
-
-    return acc;
-  }, []);
-};
 export const createStyleObject = props => {
   const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
 

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

@@ -3,26 +3,33 @@ export declare type SpacingElementProps = {
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
      *
      */
-    top?: SpaceTypes;
+    top?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
      *
      */
-    right?: SpaceTypes;
+    right?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
      *
      */
-    bottom?: SpaceTypes;
+    bottom?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
      *
      */
-    left?: SpaceTypes;
+    left?: SpaceType;
 };
-export declare type SpaceTypes = string | boolean | number;
+export declare type SpaceType = string | boolean | number;
 export declare type SpacingProps = SpacingElementProps & {
-    space?: SpaceTypes | SpacingElementProps;
+    space?: SpaceType | SpacingElementProps;
+};
+export declare type SpacingUnknownProps = Record<string, unknown>;
+export declare type StyleObjectProps = SpacingProps & {
+    maxWidth?: string;
+    maxHeight?: string;
+    width?: string;
+    height?: string;
 };
 /**
  * @deprecated Use SpacingElementProps instead

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

@@ -68,7 +68,7 @@ export type TabsChildren =
  */
 export interface TabsProps extends React.HTMLProps<HTMLElement> {
   /**
-   * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key
+   * <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;}]`
    */
   data?: TabsData;
 

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

@@ -61,7 +61,7 @@ export declare const defaultProps: {
 declare const Tag: {
     (localProps: TagProps & SpacingProps): JSX.Element;
     Group: (localProps: import("./TagGroup").TagGroupProps & import("../space/types").SpacingElementProps & {
-        space?: import("../space/types").SpaceTypes | import("../space/types").SpacingElementProps;
+        space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
     }) => JSX.Element;
 };
 export default Tag;

package/es/elements/Anchor.d.ts

@@ -20,9 +20,9 @@ export declare type AnchorProps = {
     /** @deprecated use targetBlankTitle instead */
     target_blank_title?: string;
 };
-export declare type AnchorAllProps = AnchorProps & React.HTMLAttributes<HTMLAnchorElement> & SpacingProps;
+export declare type AnchorAllProps = AnchorProps & React.HTMLProps<HTMLAnchorElement> & SpacingProps;
 export declare function AnchorInstance(localProps: AnchorAllProps): JSX.Element;
-declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.HTMLAttributes<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
-    space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
-} & React.RefAttributes<HTMLAnchorElement>>;
+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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "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" | "children" | "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" | "innerRef" | "list" | "tooltip" | "step" | "size" | "skeleton" | "alt" | "src" | "shape" | "content" | "element" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "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" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "to" | "targetBlankTitle" | "omitClass" | "target_blank_title"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/es/elements/Dd.d.ts

@@ -8,6 +8,6 @@ export declare type DdProps = {
     children: React.ReactNode;
 };
 declare const Dd: React.ForwardRefExoticComponent<DdProps & import("../shared/types").SpacingElementProps & {
-    space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+    space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
 } & React.RefAttributes<unknown>>;
 export default Dd;

package/es/elements/Dt.d.ts

@@ -5,6 +5,6 @@
 import React from 'react';
 export declare type DtProps = React.AllHTMLAttributes<HTMLDListElement>;
 declare const Dt: React.ForwardRefExoticComponent<DtProps & import("../shared/types").SpacingElementProps & {
-    space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+    space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
 } & React.RefAttributes<unknown>>;
 export default Dt;