@dnb/eufemia 9.44.0 → 9.45.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.45.0](https://github.com/dnbexperience/eufemia/compare/v9.44.0...v9.45.0) (2022-12-21)
+
+
+### Bug Fixes
+
+* **Anchor:** use text-decoration instead of box-shadow for chromium breaking underline support ([#1841](https://github.com/dnbexperience/eufemia/issues/1841)) ([eba73da](https://github.com/dnbexperience/eufemia/commit/eba73daf984cb811439a3c0d12748c38dc81efc8))
+
+
+### Features
+
+* **Spacing:** add calc helper ([#1845](https://github.com/dnbexperience/eufemia/issues/1845)) ([0e7f99e](https://github.com/dnbexperience/eufemia/commit/0e7f99ea4580a51e77d168954825cc6fde8139e7))
+
 # [9.44.0](https://github.com/dnbexperience/eufemia/compare/v9.43.0...v9.44.0) (2022-12-20)
 
 

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/space/SpacingHelper.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "createSpacingClasses", {
     return _SpacingUtils.createSpacingClasses;
   }
 });
-Object.defineProperty(exports, "createStyleObject", {
-  enumerable: true,
-  get: function get() {
-    return _SpacingUtils.createStyleObject;
-  }
-});
 Object.defineProperty(exports, "removeSpaceProps", {
   enumerable: true,
   get: function get() {

package/cjs/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/cjs/components/space/SpacingUtils.js

@@ -1,7 +1,13 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
 require("core-js/modules/es.symbol.js");
 
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
@@ -18,61 +24,49 @@ require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.translateSpace = exports.sumTypes = exports.splitTypes = exports.spacingDefaultProps = exports.spacePatterns = exports.removeSpaceProps = exports.isValidSpaceProp = exports.isInline = exports.findType = exports.findNearestTypes = exports.createTypeModifiers = exports.createStyleObject = exports.createSpacingClasses = void 0;
+exports.translateSpace = exports.sumTypes = exports.splitTypes = exports.spacingDefaultProps = exports.spacePatterns = exports.removeSpaceProps = exports.isValidSpaceProp = exports.isInline = exports.findTypeAll = exports.findType = exports.findNearestTypes = exports.createTypeModifiers = exports.createStyleObject = exports.createSpacingClasses = exports.calc = void 0;
 
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.object.to-string.js");
 
-require("core-js/modules/es.string.split.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 
-require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.join.js");
 
-require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.is-frozen.js");
 
 require("core-js/modules/es.array.reduce.js");
 
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.array.concat.js");
+
 require("core-js/modules/es.array.map.js");
 
-require("core-js/modules/es.parse-float.js");
+require("core-js/modules/es.regexp.exec.js");
 
-require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.string.replace.js");
 
-require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.string.split.js");
 
-require("core-js/modules/es.object.entries.js");
+require("core-js/modules/es.array.filter.js");
 
-require("core-js/modules/es.array.reverse.js");
+require("core-js/modules/es.parse-float.js");
 
-require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.find.js");
 
-require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.reverse.js");
 
 require("core-js/modules/es.array.includes.js");
 
-require("core-js/modules/es.object.is-frozen.js");
+require("core-js/modules/es.string.includes.js");
 
-require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.array.index-of.js");
 
 var _componentHelper = require("../../shared/component-helper");
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -93,6 +87,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var spacingDefaultProps = {
   space: null,
   top: null,
@@ -113,28 +115,104 @@ var spacePatterns = {
 };
 exports.spacePatterns = spacePatterns;
 
+var calc = function calc() {
+  var result = [];
+
+  for (var _len = arguments.length, types = new Array(_len), _key = 0; _key < _len; _key++) {
+    types[_key] = arguments[_key];
+  }
+
+  types.forEach(function (rawTypes) {
+    createTypeModifiers(rawTypes).forEach(function (type) {
+      result.push("var(--spacing-".concat(type, ")"));
+    });
+  });
+  return result.length ? "calc(".concat(result.join(' + '), ")") : null;
+};
+
+exports.calc = calc;
+
+var createSpacingClasses = function createSpacingClasses(props) {
+  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var 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 (var i in p.space) {
+        if (!p[i] && isValidSpaceProp(i)) {
+          p[i] = p.space[i];
+        }
+      }
+    }
+
+    delete p.space;
+  }
+
+  return Object.entries(p).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        direction = _ref2[0],
+        cur = _ref2[1];
+
+    if (isValidSpaceProp(direction)) {
+      if (String(cur) === '0' || String(cur) === 'false') {
+        acc.push("dnb-space__".concat(direction, "--zero"));
+      } else if (cur) {
+        var typeModifiers = createTypeModifiers(cur);
+        var sum = sumTypes(typeModifiers);
+
+        if (sum > 10) {
+          (0, _componentHelper.warn)("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
+        } else {
+          var nearestTypes = findNearestTypes(sum, true);
+          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
+            return "dnb-space__".concat(direction, "--").concat(type);
+          })));
+        }
+      }
+    } else if (direction === 'no_collapse') {
+      acc.push('dnb-space--no-collapse');
+
+      if (Element && isInline(Element)) {
+        acc.push('dnb-space--inline');
+      }
+    }
+
+    return acc;
+  }, []);
+};
+
+exports.createSpacingClasses = createSpacingClasses;
+
 var translateSpace = function 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;
 };
 
 exports.translateSpace = translateSpace;
 
 var splitTypes = function 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(function (r) {
-    return r && r.length > 0;
-  }) : null;
+  return clean(types) || null;
+
+  function clean(t) {
+    return t === null || t === void 0 ? void 0 : t.filter(function (r) {
+      return r && String(r).length > 0;
+    });
+  }
 };
 
 exports.splitTypes = splitTypes;
@@ -156,18 +234,14 @@ var sumTypes = function sumTypes(types) {
 exports.sumTypes = sumTypes;
 
 var createTypeModifiers = function createTypeModifiers(types) {
-  if (typeof types === 'number') {
-    types = String(types);
-  }
-
   return (splitTypes(types) || []).reduce(function (acc, type) {
     if (type) {
-      var firstLetter = type[0];
+      var firstLetter = String(type)[0];
 
       if (parseFloat(firstLetter) > -1) {
-        var num = parseFloat(type);
+        var num = parseFloat(String(type));
 
-        if (num >= 8 && /[0-9]px/.test(type)) {
+        if (num >= 8 && /[0-9]px/.test(String(type))) {
           num = num / 16;
         }
 
@@ -184,7 +258,7 @@ var createTypeModifiers = function createTypeModifiers(types) {
         }
       }
 
-      if (!(parseFloat(type) > 0)) {
+      if (!(parseFloat(String(type)) > 0)) {
         acc.push(type);
       }
     }
@@ -196,55 +270,55 @@ var createTypeModifiers = function createTypeModifiers(types) {
 exports.createTypeModifiers = createTypeModifiers;
 
 var findType = function findType(num) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$returnObject = _ref.returnObject,
-      returnObject = _ref$returnObject === void 0 ? false : _ref$returnObject;
-
-  var found = Object.entries(spacePatterns).find(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        k = _ref3[0],
-        v = _ref3[1];
-
-    return k && v === num;
-  }) || null;
-
-  if (returnObject) {
-    return found;
-  }
+  var found = findTypeAll(num);
 
   if (found) {
     return found[0];
   }
 
-  return found;
+  return null;
 };
 
 exports.findType = findType;
 
+var findTypeAll = function findTypeAll(num) {
+  var found = Object.entries(spacePatterns).find(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        k = _ref4[0],
+        v = _ref4[1];
+
+    return k && v === num;
+  }) || null;
+  return found;
+};
+
+exports.findTypeAll = findTypeAll;
+
 var findNearestTypes = function findNearestTypes(num) {
+  var multiply = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var res = [];
-  var near = Object.entries(spacePatterns).reverse().find(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        k = _ref5[0],
-        v = _ref5[1];
+  var near = Object.entries(spacePatterns).reverse().filter(function (k) {
+    return multiply ? true : !k[0].includes('-x');
+  }).find(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        k = _ref6[0],
+        v = _ref6[1];
 
     return k && num >= v;
   });
   var nearNum = near && near[1] || num;
-  var typeObject = findType(nearNum, {
-    returnObject: true
-  });
+  var types = findTypeAll(nearNum);
 
-  if (typeObject) {
-    var nearType = typeObject[0];
+  if (types) {
+    var nearType = types[0];
     res.push(nearType);
-    var leftOver = num - parseFloat(String(typeObject[1]));
-    var foundMoreTypes = findNearestTypes(leftOver);
+    var leftOver = num - parseFloat(String(types[1]));
+    var foundMoreTypes = findNearestTypes(leftOver, multiply);
     foundMoreTypes.forEach(function (type) {
       var index = res.indexOf(type);
 
       if (index !== -1) {
-        res[index] = "".concat(type, "-x2");
+        res[index] = multiply ? "".concat(type, "-x2") : type;
       }
     });
     res = [].concat(_toConsumableArray(res), _toConsumableArray(foundMoreTypes));
@@ -275,61 +349,6 @@ var removeSpaceProps = function removeSpaceProps(props) {
 
 exports.removeSpaceProps = removeSpaceProps;
 
-var createSpacingClasses = function createSpacingClasses(props) {
-  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var 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 (var i in p.space) {
-        if (!p[i] && isValidSpaceProp(i)) {
-          p[i] = p.space[i];
-        }
-      }
-    }
-
-    delete p.space;
-  }
-
-  return Object.entries(p).reduce(function (acc, _ref6) {
-    var _ref7 = _slicedToArray(_ref6, 2),
-        direction = _ref7[0],
-        cur = _ref7[1];
-
-    if (isValidSpaceProp(direction)) {
-      if (String(cur) === '0' || String(cur) === 'false') {
-        acc.push("dnb-space__".concat(direction, "--zero"));
-      } else if (cur) {
-        var typeModifiers = createTypeModifiers(cur);
-        var sum = sumTypes(typeModifiers);
-
-        if (sum > 10) {
-          (0, _componentHelper.warn)("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
-        } else {
-          var nearestTypes = findNearestTypes(sum);
-          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
-            return "dnb-space__".concat(direction, "--").concat(type);
-          })));
-        }
-      }
-    } else if (direction === 'no_collapse') {
-      acc.push('dnb-space--no-collapse');
-
-      if (Element && isInline(Element)) {
-        acc.push('dnb-space--inline');
-      }
-    }
-
-    return acc;
-  }, []);
-};
-
-exports.createSpacingClasses = createSpacingClasses;
-
 var createStyleObject = function createStyleObject(props) {
   var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
 
@@ -356,10 +375,10 @@ var createStyleObject = function createStyleObject(props) {
     maxHeight: p.maxHeight && "".concat(p.maxHeight, "rem"),
     width: p.width && "".concat(p.width, "rem"),
     height: p.height && "".concat(p.height, "rem")
-  }).reduce(function (acc, _ref8) {
-    var _ref9 = _slicedToArray(_ref8, 2),
-        key = _ref9[0],
-        val = _ref9[1];
+  }).reduce(function (acc, _ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        val = _ref8[1];
 
     if (typeof val !== 'undefined') {
       acc[key] = val;