@dnb/eufemia 10.10.0 → 10.12.0

package/components/section/style/themes/dnb-section-theme-ui.scss

@@ -6,136 +6,104 @@
 @import '../../../../components/anchor/style/anchor-mixins.scss';
 
 .dnb-section {
+  --background-color: var(--color-white);
+  --outline-color--value: var(--color-black-8);
+
   &--divider {
-    color: var(--color-black-80);
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-white);
+
+    // will else cover parts of the divider lines
+    z-index: 0;
+
+    // Separator color
+    --sc: var(--color-mint-green-50);
 
     &::after {
-      color: var(--color-white);
-      box-shadow:
-        99vw 0 0 0 currentcolor,
-        198vw 0 0 0 currentcolor,
-        297vw 0 0 0 currentcolor,
-        396vw 0 0 0 currentcolor,
-        0 0.0625rem 0 0 var(--color-mint-green-50),
-        99vw 0.0625rem 0 0 var(--color-mint-green-50),
-        0 -0.0625rem 0 0 var(--color-mint-green-50),
-        99vw -0.0625rem 0 0 var(--color-mint-green-50),
-        198vw 0.0625rem 0 0 var(--color-mint-green-50),
-        198vw -0.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 0.0625rem 0 0 var(--sc), 99vw 0.0625rem 0 0 var(--sc),
+        0 -0.0625rem 0 0 var(--sc), 99vw -0.0625rem 0 0 var(--sc),
+        198vw 0.0625rem 0 0 var(--sc), 198vw -0.0625rem 0 0 var(--sc);
     }
   }
 
   &--transparent {
-    &::after {
-      color: transparent;
-    }
+    --background-color: transparent;
   }
 
   /** deprecated: default should be white in v11 */
   &--mint-green-12,
   &--default {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-mint-green-12);
-    }
+    --text-color: var(--text-color--value, var(--color-black-80));
+    --background-color: var(
+      --background-color--value,
+      var(--color-mint-green-12)
+    );
   }
 
   &--white {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-white);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-white);
   }
 
   /** deprecated */
   &--mint-green {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-mint-green);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-mint-green);
   }
 
   /** deprecated */
   &--lavender {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-lavender);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-lavender);
   }
 
   &--sand-yellow,/** deprecated */
   &--warning {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-sand-yellow);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-sand-yellow);
   }
 
   &--pistachio,/** deprecated */
   &--info {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-pistachio);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-pistachio);
   }
 
   /** deprecated */
   &--black-3 {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-black-3);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-black-3);
   }
 
   /** deprecated */
   &--emerald-green {
-    color: var(--color-mint-green);
-
-    &::after {
-      color: var(--color-emerald-green);
-    }
+    --text-color: var(--color-mint-green);
+    --background-color: var(--color-emerald-green);
   }
 
   /** deprecated */
   &--sea-green {
-    color: var(--color-white);
-
-    &::after {
-      color: var(--color-sea-green);
-    }
+    --text-color: var(--color-white);
+    --background-color: var(--color-sea-green);
   }
 
   /** deprecated */
   &--fire-red {
-    color: var(--color-white);
-
-    &::after {
-      color: var(--color-fire-red);
-    }
+    --text-color: var(--color-white);
+    --background-color: var(--color-fire-red);
   }
 
   &--fire-red-8,/** deprecated */
   &--error {
-    color: var(--color-black-80);
-
-    &::after {
-      color: var(--color-fire-red-8);
-    }
+    --text-color: var(--color-black-80);
+    --background-color: var(--color-fire-red-8);
   }
 
   &--success {
-    color: var(--color-white);
-
-    &::after {
-      color: var(--color-success-green);
-    }
+    --text-color: var(--color-white);
+    --background-color: var(--color-success-green);
   }
 
   // Contrast styles
@@ -149,18 +117,18 @@
   &--fire-red .dnb-button--tertiary,/** deprecated */
   &--emerald-green .dnb-button--tertiary,/** deprecated */
   &--sea-green .dnb-button--tertiary /** deprecated */ {
-    color: var(--color-white);
+    --text-color: var(--color-white);
 
     &:hover {
-      color: var(--color-white);
+      --text-color: var(--color-white);
     }
 
     &:hover .dnb-button__text::after {
-      color: var(--color-white) !important;
+      --text-color: var(--color-white) !important;
     }
 
     &:focus {
-      color: var(--color-white);
+      --text-color: var(--color-white);
 
       &::before {
         @include focusRing(null, var(--color-white));

package/components/space/Space.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["element", "inline", "no_collapse", "top", "right", "bottom", "left", "space", "stretch", "skeleton", "innerRef", "className", "children"],
+const _excluded = ["element", "inline", "no_collapse", "top", "right", "bottom", "left", "style", "space", "innerSpace", "stretch", "skeleton", "innerRef", "className", "children"],
   _excluded2 = ["element", "no_collapse", "children", "innerRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -10,9 +10,8 @@ import classnames from 'classnames';
 import { isTrue, extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import { spacingPropTypes } from './SpacingHelper';
-import { createSpacingClasses, isInline } from './SpacingUtils';
+import { createSpacingClasses, createSpacingProperties, isInline } from './SpacingUtils';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-import Section from '../section/Section';
 export { spacingPropTypes };
 const defaultProps = {};
 export default function Space(localProps) {
@@ -30,7 +29,9 @@ export default function Space(localProps) {
       right,
       bottom,
       left,
+      style,
       space,
+      innerSpace,
       stretch,
       skeleton,
       innerRef,
@@ -47,11 +48,13 @@ export default function Space(localProps) {
       space
     }), className, isTrue(stretch) && 'dnb-space--stretch', isTrue(inline) && 'dnb-space--inline')
   }, attributes);
+  const styleObj = _objectSpread(_objectSpread({}, style), createSpacingProperties(props));
   skeletonDOMAttributes(params, skeleton);
   return React.createElement(Element, _extends({
     element: element,
     no_collapse: no_collapse,
-    innerRef: innerRef
+    innerRef: innerRef,
+    style: styleObj
   }, params), children);
 }
 Space._supportsSpacingProps = true;
@@ -64,17 +67,13 @@ function Element(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded2);
   const ElementDynamic = element;
-  let component = null;
-  if (ElementDynamic === Section) {
-    component = React.createElement(ElementDynamic, _extends({}, props, {
-      inner_ref: innerRef
-    }), children);
+  if ((element === null || element === void 0 ? void 0 : element['_name']) === 'Section') {
+    props['innerRef'] = innerRef;
   } else {
     validateDOMAttributes({}, props);
-    component = React.createElement(ElementDynamic, _extends({}, props, {
-      ref: innerRef
-    }), children);
+    props['ref'] = innerRef;
   }
+  const component = React.createElement(ElementDynamic, props, children);
   if (isTrue(no_collapse)) {
     const R = ElementDynamic === 'span' || isInline(element) ? 'span' : 'div';
     return React.createElement(R, {

package/components/space/Space.js.map

@@ -1 +1 @@
-{"version":3,"file":"Space.js","names":["React","classnames","isTrue","extendPropsWithContext","validateDOMAttributes","Context","spacingPropTypes","createSpacingClasses","isInline","skeletonDOMAttributes","createSkeletonClass","Section","defaultProps","Space","localProps","context","useContext","props","space","skeleton","element","inline","no_collapse","top","right","bottom","left","stretch","innerRef","className","children","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","createElement","Element","_extends","_supportsSpacingProps","_ref","_excluded2","ElementDynamic","component","inner_ref","ref","R"],"sources":["../../../../src/components/space/Space.tsx"],"sourcesContent":["/**\n * Web Space Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport Context, { ContextProps } from '../../shared/Context'\nimport { spacingPropTypes } from './SpacingHelper'\nimport { createSpacingClasses, isInline } from './SpacingUtils'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Section from '../section/Section'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\n\nexport { spacingPropTypes }\n\nexport type SpaceProps = {\n  /**\n   * Defines the HTML element used.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * If set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.\n   * Default: false\n   */\n  inline?: boolean\n\n  /**\n   * If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.\n   * Default: false\n   */\n  no_collapse?: boolean\n\n  /**\n   * If set to `true`, then the space element will be 100% in `width`.\n   * Default: false\n   */\n  stretch?: boolean\n\n  /**\n   * If set to `true`, a loading skeleton will be shown.\n   * Default: false\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & SpacingProps\n\nexport type SpaceAllProps = SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {}\n\nexport default function Space(localProps: SpaceAllProps) {\n  const context = React.useContext<ContextProps & SpacingProps>(Context)\n\n  // consume the space context\n  const props = context.space\n    ? // use only the props from context, who are available here anyway\n      extendPropsWithContext(\n        localProps,\n        defaultProps,\n        { space: context.space },\n        { skeleton: context?.skeleton }\n      )\n    : localProps\n\n  const {\n    element = 'div',\n    inline,\n    no_collapse,\n    top,\n    right,\n    bottom,\n    left,\n    space,\n    stretch,\n    skeleton,\n    innerRef,\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-space',\n      isTrue(stretch) && 'dnb-space--stretch',\n      isTrue(inline) && 'dnb-space--inline',\n      createSkeletonClass(null, skeleton), // do not send along context\n      createSpacingClasses({ top, right, bottom, left, space }),\n      className\n    ),\n    ...attributes,\n  }\n\n  skeletonDOMAttributes(params, skeleton) // do not send along context\n\n  return (\n    <Element\n      element={element}\n      no_collapse={no_collapse}\n      innerRef={innerRef}\n      {...params}\n    >\n      {children}\n    </Element>\n  )\n}\n\nSpace._supportsSpacingProps = true\n\nfunction Element({\n  element,\n  no_collapse,\n  children,\n  innerRef,\n  ...props\n}: SpaceAllProps) {\n  const ElementDynamic = element as DynamicElement<any>\n  let component: React.ReactElement = null\n\n  if (ElementDynamic === Section) {\n    component = (\n      <ElementDynamic {...props} inner_ref={innerRef}>\n        {children}\n      </ElementDynamic>\n    )\n  } else {\n    // also used for code markup simulation\n    validateDOMAttributes({}, props)\n\n    component = (\n      <ElementDynamic {...props} ref={innerRef}>\n        {children}\n      </ElementDynamic>\n    )\n  }\n\n  if (isTrue(no_collapse)) {\n    const R =\n      ElementDynamic === 'span' || isInline(element as string)\n        ? 'span'\n        : 'div'\n    return (\n      <R\n        className={classnames(\n          'dnb-space--no-collapse',\n          isInline(element as string) && 'dnb-space--inline'\n        )}\n      >\n        {component}\n      </R>\n    )\n  }\n\n  return component\n}\n"],"mappings":"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"}
+{"version":3,"file":"Space.js","names":["React","classnames","isTrue","extendPropsWithContext","validateDOMAttributes","Context","spacingPropTypes","createSpacingClasses","createSpacingProperties","isInline","skeletonDOMAttributes","createSkeletonClass","defaultProps","Space","localProps","context","useContext","props","space","skeleton","element","inline","no_collapse","top","right","bottom","left","style","innerSpace","stretch","innerRef","className","children","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","styleObj","createElement","Element","_extends","_supportsSpacingProps","_ref","_excluded2","ElementDynamic","component","R"],"sources":["../../../../src/components/space/Space.tsx"],"sourcesContent":["/**\n * Web Space Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport Context, { ContextProps } from '../../shared/Context'\nimport { spacingPropTypes } from './SpacingHelper'\nimport {\n  createSpacingClasses,\n  createSpacingProperties,\n  isInline,\n} from './SpacingUtils'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nimport type {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\n\nexport { spacingPropTypes }\n\nexport type SpaceProps = {\n  /**\n   * Defines the HTML element used.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * If set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.\n   * Default: false\n   */\n  inline?: boolean\n\n  /**\n   * If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.\n   * Default: false\n   */\n  no_collapse?: boolean\n\n  /**\n   * If set to `true`, then the space element will be 100% in `width`.\n   * Default: false\n   */\n  stretch?: boolean\n\n  /**\n   * If set to `true`, a loading skeleton will be shown.\n   * Default: false\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & SpacingProps\n\nexport type SpaceAllProps = SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {}\n\nexport default function Space(localProps: SpaceAllProps) {\n  const context = React.useContext<ContextProps & SpacingProps>(Context)\n\n  // consume the space context\n  const props = context.space\n    ? // use only the props from context, who are available here anyway\n      extendPropsWithContext(\n        localProps,\n        defaultProps,\n        { space: context.space },\n        { skeleton: context?.skeleton }\n      )\n    : localProps\n\n  const {\n    element = 'div',\n    inline,\n    no_collapse,\n    top,\n    right,\n    bottom,\n    left,\n    style,\n    space,\n    innerSpace, // eslint-disable-line\n    stretch,\n    skeleton,\n    innerRef,\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-space',\n      isTrue(stretch) && 'dnb-space--stretch',\n      isTrue(inline) && 'dnb-space--inline',\n      createSkeletonClass(null, skeleton), // do not send along context\n      createSpacingClasses({ top, right, bottom, left, space }),\n      className\n    ),\n    ...attributes,\n  }\n\n  const styleObj = {\n    ...style,\n    ...createSpacingProperties(props),\n  } as React.CSSProperties\n\n  skeletonDOMAttributes(params, skeleton) // do not send along context\n\n  return (\n    <Element\n      element={element}\n      no_collapse={no_collapse}\n      innerRef={innerRef}\n      style={styleObj}\n      {...params}\n    >\n      {children}\n    </Element>\n  )\n}\n\nSpace._supportsSpacingProps = true\n\nfunction Element({\n  element,\n  no_collapse,\n  children,\n  innerRef,\n  ...props\n}: SpaceAllProps) {\n  const ElementDynamic = element\n\n  if (element?.['_name'] === 'Section') {\n    props['innerRef'] = innerRef\n  } else {\n    // also used for code markup simulation\n    validateDOMAttributes({}, props)\n    props['ref'] = innerRef\n  }\n\n  const component = (\n    <ElementDynamic {...(props as DynamicElementParams)}>\n      {children}\n    </ElementDynamic>\n  )\n\n  if (isTrue(no_collapse)) {\n    const R =\n      ElementDynamic === 'span' || isInline(element as string)\n        ? 'span'\n        : 'div'\n    return (\n      <R\n        className={classnames(\n          'dnb-space--no-collapse',\n          isInline(element as string) && 'dnb-space--inline'\n        )}\n      >\n        {component}\n      </R>\n    )\n  }\n\n  return component\n}\n"],"mappings":"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"}

package/components/space/SpacingHelper.d.ts

@@ -10,7 +10,5 @@ export namespace spacingPropTypes {
     const bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
     const left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
 }
-import { createSpacingClasses } from './SpacingUtils';
-import { removeSpaceProps } from './SpacingUtils';
 import PropTypes from 'prop-types';
-export { createSpacingClasses, removeSpaceProps };
+export { createSpacingClasses, createSpacingProperties, removeSpaceProps } from "./SpacingUtils";

package/components/space/SpacingHelper.js

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

package/components/space/SpacingHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpacingHelper.js","names":["PropTypes","createSpacingClasses","removeSpaceProps","spacingPropTypes","space","oneOfType","string","number","bool","shape","top","right","bottom","left"],"sources":["../../../../src/components/space/SpacingHelper.js"],"sourcesContent":["/**\n * Space helper\n * NB: Because it contains \"PropTypes\" we keep this file as a JavaScript file.\n */\n\nimport PropTypes from 'prop-types'\nimport { createSpacingClasses, removeSpaceProps } from './SpacingUtils'\n\nexport { createSpacingClasses, removeSpaceProps } // because of ESLint import plugin\n\nexport const spacingPropTypes = {\n  space: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n    PropTypes.shape({\n      top: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      right: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      bottom: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      left: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n    }),\n  ]),\n  top: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  right: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  bottom: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  left: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n}\n"],"mappings":"AAKA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,oBAAoB,EAAEC,gBAAgB,QAAQ,gBAAgB;AAEvE,SAASD,oBAAoB,EAAEC,gBAAgB;AAE/C,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,KAAK,EAAEJ,SAAS,CAACK,SAAS,CAAC,CACzBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,EACdR,SAAS,CAACS,KAAK,CAAC;IACdC,GAAG,EAAEV,SAAS,CAACK,SAAS,CAAC,CACvBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;IACFG,KAAK,EAAEX,SAAS,CAACK,SAAS,CAAC,CACzBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;IACFI,MAAM,EAAEZ,SAAS,CAACK,SAAS,CAAC,CAC1BL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;IACFK,IAAI,EAAEb,SAAS,CAACK,SAAS,CAAC,CACxBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf;EACH,CAAC,CAAC,CACH,CAAC;EACFE,GAAG,EAAEV,SAAS,CAACK,SAAS,CAAC,CACvBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;EACFG,KAAK,EAAEX,SAAS,CAACK,SAAS,CAAC,CACzBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;EACFI,MAAM,EAAEZ,SAAS,CAACK,SAAS,CAAC,CAC1BL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf,CAAC;EACFK,IAAI,EAAEb,SAAS,CAACK,SAAS,CAAC,CACxBL,SAAS,CAACM,MAAM,EAChBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,IAAI,CACf;AACH,CAAC"}
+{"version":3,"file":"SpacingHelper.js","names":["PropTypes","createSpacingClasses","createSpacingProperties","removeSpaceProps","spacingPropTypes","space","oneOfType","string","number","bool","shape","top","right","bottom","left"],"sources":["../../../../src/components/space/SpacingHelper.js"],"sourcesContent":["/**\n * Space helper\n * NB: Because it contains \"PropTypes\" we keep this file as a JavaScript file.\n */\n\nimport PropTypes from 'prop-types'\nexport {\n  createSpacingClasses,\n  createSpacingProperties,\n  removeSpaceProps,\n} from './SpacingUtils'\n\nexport const spacingPropTypes = {\n  space: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n    PropTypes.shape({\n      top: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      right: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      bottom: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n      left: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number,\n        PropTypes.bool,\n      ]),\n    }),\n  ]),\n  top: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  right: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  bottom: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  left: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n}\n"],"mappings":"AAKA,OAAOA,SAAS,MAAM,YAAY;AAClC,SACEC,oBAAoB,EACpBC,uBAAuB,EACvBC,gBAAgB,QACX,gBAAgB;AAEvB,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,KAAK,EAAEL,SAAS,CAACM,SAAS,CAAC,CACzBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,EACdT,SAAS,CAACU,KAAK,CAAC;IACdC,GAAG,EAAEX,SAAS,CAACM,SAAS,CAAC,CACvBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;IACFG,KAAK,EAAEZ,SAAS,CAACM,SAAS,CAAC,CACzBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;IACFI,MAAM,EAAEb,SAAS,CAACM,SAAS,CAAC,CAC1BN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;IACFK,IAAI,EAAEd,SAAS,CAACM,SAAS,CAAC,CACxBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf;EACH,CAAC,CAAC,CACH,CAAC;EACFE,GAAG,EAAEX,SAAS,CAACM,SAAS,CAAC,CACvBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;EACFG,KAAK,EAAEZ,SAAS,CAACM,SAAS,CAAC,CACzBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;EACFI,MAAM,EAAEb,SAAS,CAACM,SAAS,CAAC,CAC1BN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf,CAAC;EACFK,IAAI,EAAEd,SAAS,CAACM,SAAS,CAAC,CACxBN,SAAS,CAACO,MAAM,EAChBP,SAAS,CAACQ,MAAM,EAChBR,SAAS,CAACS,IAAI,CACf;AACH,CAAC"}

package/components/space/SpacingUtils.d.ts

@@ -2,11 +2,18 @@
  * Space helper
  *
  */
-import type { SpaceType, SpacingUnknownProps, SpacingProps, SpaceTypesPositiveValuesType, SpaceTypesPositiveRemValuesType } from './types';
+import type { SpaceType, SpacingUnknownProps, SpacingProps, SpaceTypesPositiveValuesType, SpaceTypesPositiveRemValuesType, SpacingElementProps } from './types';
 type SpaceNumber = number;
 export declare const spacingDefaultProps: SpacingProps;
 export declare const spacePatterns: Record<SpaceTypesPositiveValuesType, SpaceTypesPositiveRemValuesType>;
 export declare const calc: (...types: Array<SpaceType>) => any;
+/**
+ * Creates a valid space CSS style out from given space types
+ *
+ * @param props
+ * @returns { '--space-b-l': '2rem', '--space-t-l': '1rem' }
+ */
+export declare const createSpacingProperties: (props: SpacingProps) => React.CSSProperties;
 /**
  * Creates a valid space CSS class out from given space types
  *
@@ -27,6 +34,6 @@ export declare const findType: (num: SpaceNumber) => SpaceType;
 export declare const findTypeAll: (num: SpaceNumber) => Array<SpaceTypesPositiveValuesType | SpaceTypesPositiveRemValuesType>;
 export declare const findNearestTypes: (num: SpaceNumber, multiply?: boolean) => any[];
 export declare const isValidSpaceProp: (propName: string) => boolean;
-export declare const removeSpaceProps: (props: SpacingProps | SpacingUnknownProps) => SpacingProps | SpacingUnknownProps;
+export declare const removeSpaceProps: <Props extends SpacingProps>(props: Props) => Omit<Props, "space" | "innerSpace" | keyof SpacingElementProps>;
 export declare const isInline: (elementName: string) => boolean;
 export {};

package/components/space/SpacingUtils.js

@@ -1,9 +1,12 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["space", "innerSpace", "top", "bottom", "left", "right"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { warn } from '../../shared/component-helper';
 export const spacingDefaultProps = {
   space: null,
+  innerSpace: null,
   top: null,
   right: null,
   bottom: null,
@@ -36,6 +39,61 @@ export const calc = function () {
   });
   return result.length ? globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})` : null;
 };
+export const createSpacingProperties = props => {
+  if (props !== null && props !== void 0 && props.innerSpace) {
+    return computeProperties(props.innerSpace);
+  }
+  return {};
+};
+function hasMediaSize(media) {
+  const keys = Object.keys(media);
+  return keys.includes('small') || keys.includes('medium') || keys.includes('large');
+}
+function hasSize(space) {
+  const keys = Object.keys(space);
+  return keys.includes('top') || keys.includes('right') || keys.includes('bottom') || keys.includes('left');
+}
+function computeProperties(space) {
+  if (!hasMediaSize(space)) {
+    space = {
+      small: space,
+      medium: space,
+      large: space
+    };
+  }
+  const result = {};
+  for (const size in space) {
+    var _space;
+    const value = (_space = space) === null || _space === void 0 ? void 0 : _space[size];
+    const props = transformToAll(value);
+    for (const key in props) {
+      if (isValidSpaceProp(key)) {
+        const cur = props[key];
+        const name = `--space-${key[0]}-${size[0]}`;
+        if (String(cur) === '0' || String(cur) === 'false') {
+          result[name] = '0';
+        } else if (cur) {
+          const typeModifiers = createTypeModifiers(cur);
+          const sum = sumTypes(typeModifiers);
+          result[name] = `${sum}rem`;
+        }
+      }
+    }
+  }
+  return result;
+}
+function transformToAll(value) {
+  let result = value;
+  if (!hasSize(value)) {
+    result = {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  return result;
+}
 export const createSpacingClasses = function (props) {
   let Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
@@ -54,7 +112,7 @@ export const createSpacingClasses = function (props) {
   }
   return Object.entries(p).reduce((acc, _ref) => {
     let [direction, cur] = _ref;
-    if (isValidSpaceProp(direction)) {
+    if (isValidSpaceProp(direction) && direction !== 'innerSpace') {
       if (String(cur) === '0' || String(cur) === 'false') {
         acc.push(`dnb-space__${direction}--zero`);
       } else if (cur) {
@@ -170,15 +228,18 @@ export const findNearestTypes = function (num) {
   }
   return res;
 };
-export const isValidSpaceProp = propName => propName && ['top', 'right', 'bottom', 'left'].includes(propName);
+export const isValidSpaceProp = propName => propName && ['top', 'right', 'bottom', 'left', 'space', 'innerSpace'].includes(propName);
 export const removeSpaceProps = props => {
-  const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
-  for (const i in p) {
-    if (isValidSpaceProp(i)) {
-      delete p[i];
-    }
-  }
-  return p;
+  const {
+      space,
+      innerSpace,
+      top,
+      bottom,
+      left,
+      right
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return restProps;
 };
 export const isInline = elementName => {
   switch (elementName) {

package/components/space/SpacingUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","_len","arguments","length","types","Array","_key","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","createSpacingClasses","props","Element","undefined","p","Object","isFrozen","_objectSpread","i","isValidSpaceProp","entries","reduce","acc","_ref","direction","cur","String","typeModifiers","sum","sumTypes","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","_ref2","k","v","multiply","res","near","reverse","includes","_ref3","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/**\n * Space helper\n *\n */\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n  SpaceType,\n  SpacingUnknownProps,\n  SpacingProps,\n  SpaceTypesPositiveValuesType,\n  SpaceTypesPositiveRemValuesType,\n  SpaceStringTypes,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n  space: null,\n  top: null,\n  right: null,\n  bottom: null,\n  left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n  SpaceTypesPositiveValuesType,\n  SpaceTypesPositiveRemValuesType\n> = {\n  'xx-small': 0.25,\n  'x-small': 0.5,\n  small: 1,\n  medium: 1.5,\n  large: 2,\n  'x-large': 3,\n  'xx-large': 3.5,\n  'xx-large-x2': 7,\n}\n\n/**\n * Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n *\n * @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n */\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n  const hash = types.join('|')\n  if (globalThis.CALC_CACHE[hash]) {\n    return globalThis.CALC_CACHE[hash]\n  }\n\n  const result: Array<string> = []\n\n  types.forEach((rawTypes) => {\n    createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n      result.push(`var(--spacing-${type})`)\n    })\n  })\n\n  return result.length\n    ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n    : null\n}\n\n/**\n * Creates a valid space CSS class out from given space types\n *\n * @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n */\nexport const createSpacingClasses = (\n  props:\n    | SpacingProps\n    /**\n     * To support typical not defined props form components\n     */\n    | SpacingUnknownProps,\n  Element = null\n) => {\n  const p = Object.isFrozen(props) ? { ...props } : props\n\n  if (typeof p.space !== 'undefined') {\n    if (\n      typeof p.space === 'string' ||\n      typeof p.space === 'number' ||\n      (typeof p.space === 'boolean' && p.space)\n    ) {\n      p.top = p.right = p.bottom = p.left = p.space\n    }\n    if (typeof p.space === 'object') {\n      for (const i in p.space) {\n        if (!p[i] && isValidSpaceProp(i)) {\n          p[i] = p.space[i]\n        }\n      }\n    }\n    delete p.space\n  }\n\n  return Object.entries(p).reduce((acc, [direction, cur]) => {\n    if (isValidSpaceProp(direction)) {\n      if (String(cur) === '0' || String(cur) === 'false') {\n        acc.push(`dnb-space__${direction}--zero`)\n      } else if (cur) {\n        const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n        // get the total sum\n        const sum = sumTypes(typeModifiers)\n        if (sum > 10) {\n          warn(\n            `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n              ','\n            )})`\n          )\n        } else {\n          // auto combine classes\n          const nearestTypes = findNearestTypes(sum, true)\n\n          acc = [\n            ...acc,\n            ...nearestTypes.map(\n              (type) => `dnb-space__${direction}--${type}`\n            ),\n          ]\n        }\n      }\n    } else if (direction === 'no_collapse') {\n      acc.push('dnb-space--no-collapse')\n      if (Element && isInline(Element)) {\n        acc.push('dnb-space--inline')\n      }\n    }\n\n    return acc\n  }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n  if (/-x2$/.test(String(type))) {\n    return spacePatterns[String(type).replace(/-x2$/, '')] * 2\n  }\n  return spacePatterns[String(type)] || 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType | Array<SpaceType>) => {\n  if (typeof types === 'string') {\n    const test = (types as SpaceStringTypes).split(/ /g)\n    return clean(test as Array<SpaceStringTypes>)\n  } else if (typeof types === 'boolean') {\n    return ['small' as SpaceTypesPositiveValuesType]\n  } else if (typeof types === 'number') {\n    return [types]\n  }\n\n  return clean(types) || null\n\n  function clean(t: Array<SpaceType> | Array<SpaceStringTypes>) {\n    return t?.filter((r) => r && String(r).length > 0)\n  }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType | Array<SpaceType>) =>\n  splitTypes(types)\n    .map((type) => translateSpace(type))\n    .reduce((acc, cur) => {\n      if (cur > 0) {\n        acc += cur\n      } else if (cur < 0) {\n        acc -= cur\n      }\n      return acc\n    }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n  types: SpaceType\n): Array<SpaceType> => {\n  return (splitTypes(types) || []).reduce((acc, type) => {\n    if (type) {\n      const firstLetter = String(type)[0]\n      if (parseFloat(firstLetter) > -1) {\n        // can be \"2rem\" or \"32px\" - but we want only a number\n        let num = parseFloat(String(type))\n\n        // check if we got pixels\n        if (num >= 8 && /[0-9]px/.test(String(type))) {\n          num = num / 16\n        }\n\n        // check if the type exists in our extensions\n        const foundType = findType(num)\n\n        // get the type\n        if (foundType) {\n          type = foundType\n        } else {\n          findNearestTypes(num).forEach((type) => {\n            if (type) {\n              acc.push(type)\n            }\n          })\n        }\n      }\n\n      if (!(parseFloat(String(type)) > 0)) {\n        acc.push(type)\n      }\n    }\n    return acc\n  }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n  const found = findTypeAll(num)\n\n  // get the type\n  if (found) {\n    return found[0]\n  }\n\n  return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n  num: SpaceNumber\n): Array<\n  SpaceTypesPositiveValuesType | SpaceTypesPositiveRemValuesType\n> => {\n  const listOfSpacePatterns = Object.entries(spacePatterns) as [\n    SpaceTypesPositiveValuesType,\n    SpaceTypesPositiveRemValuesType,\n  ][]\n  const found =\n    listOfSpacePatterns.find(([k, v]) => k && v === num) || null\n  return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n  let res = []\n\n  const near = Object.entries(spacePatterns)\n    .reverse()\n    .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n    .find(([k, v]) => k && num >= v)\n  const nearNum = (near && near[1]) || num\n  const types = findTypeAll(nearNum)\n\n  if (types) {\n    const nearType = types[0]\n    res.push(nearType)\n    const leftOver = num - parseFloat(String(types[1]))\n    const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n    // if the value already exists, then replace it with an x2\n    foundMoreTypes.forEach((type) => {\n      const index = res.indexOf(type)\n      if (index !== -1) {\n        res[index] = multiply ? `${type}-x2` : type\n      }\n    })\n\n    res = [...res, ...foundMoreTypes]\n  }\n\n  return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n  propName && ['top', 'right', 'bottom', 'left'].includes(propName)\n\nexport const removeSpaceProps = (\n  props: SpacingProps | SpacingUnknownProps\n) => {\n  const p = Object.isFrozen(props) ? { ...props } : props\n  for (const i in p) {\n    if (isValidSpaceProp(i)) {\n      delete p[i]\n    }\n  }\n  return p\n}\n\nexport const isInline = (elementName: string) => {\n  switch (elementName) {\n    case 'h1':\n    case 'h2':\n    case 'h3':\n    case 'h4':\n    case 'h5':\n    case 'h6':\n    case 'p':\n      return true\n  }\n\n  return false\n}\n"],"mappings":"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"}
+{"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","innerSpace","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","_len","arguments","length","types","Array","_key","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","createSpacingProperties","props","computeProperties","hasMediaSize","media","keys","Object","includes","hasSize","size","_space","value","transformToAll","key","isValidSpaceProp","cur","name","String","typeModifiers","sum","sumTypes","createSpacingClasses","Element","undefined","p","isFrozen","_objectSpread","i","entries","reduce","acc","_ref","direction","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","_ref2","k","v","multiply","res","near","reverse","_ref3","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","restProps","_objectWithoutProperties","_excluded","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/**\n * Space helper\n *\n */\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n  SpaceType,\n  SpacingUnknownProps,\n  SpacingProps,\n  SpaceTypesPositiveValuesType,\n  SpaceTypesPositiveRemValuesType,\n  SpaceStringTypes,\n  SpaceTypeMedia,\n  SpaceTypeAll,\n  SpacingElementProps,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n  space: null,\n  innerSpace: null,\n  top: null,\n  right: null,\n  bottom: null,\n  left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n  SpaceTypesPositiveValuesType,\n  SpaceTypesPositiveRemValuesType\n> = {\n  'xx-small': 0.25,\n  'x-small': 0.5,\n  small: 1,\n  medium: 1.5,\n  large: 2,\n  'x-large': 3,\n  'xx-large': 3.5,\n  'xx-large-x2': 7,\n}\n\n/**\n * Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n *\n * @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n */\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n  const hash = types.join('|')\n  if (globalThis.CALC_CACHE[hash]) {\n    return globalThis.CALC_CACHE[hash]\n  }\n\n  const result: Array<string> = []\n\n  types.forEach((rawTypes) => {\n    createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n      result.push(`var(--spacing-${type})`)\n    })\n  })\n\n  return result.length\n    ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n    : null\n}\n\n/**\n * Creates a valid space CSS style out from given space types\n *\n * @param props\n * @returns { '--space-b-l': '2rem', '--space-t-l': '1rem' }\n */\nexport const createSpacingProperties = (\n  props: SpacingProps\n): React.CSSProperties => {\n  if (props?.innerSpace) {\n    return computeProperties(props.innerSpace)\n  }\n\n  return {}\n}\n\nfunction hasMediaSize(media: SpaceTypeMedia) {\n  const keys = Object.keys(media)\n  return (\n    keys.includes('small') ||\n    keys.includes('medium') ||\n    keys.includes('large')\n  )\n}\n\nfunction hasSize(space: SpacingElementProps) {\n  const keys = Object.keys(space)\n  return (\n    keys.includes('top') ||\n    keys.includes('right') ||\n    keys.includes('bottom') ||\n    keys.includes('left')\n  )\n}\n\nfunction computeProperties(space: SpaceTypeAll | SpaceTypeMedia) {\n  if (!hasMediaSize(space as SpaceTypeMedia)) {\n    space = {\n      small: space,\n      medium: space,\n      large: space,\n    } as SpaceTypeMedia\n  }\n\n  const result = {}\n\n  for (const size in space as SpaceTypeMedia) {\n    const value = space?.[size] as SpaceType | SpacingElementProps\n    const props = transformToAll(value)\n\n    for (const key in props as SpaceTypeMedia) {\n      if (isValidSpaceProp(key)) {\n        const cur = props[key]\n        const name = `--space-${key[0]}-${size[0]}`\n\n        if (String(cur) === '0' || String(cur) === 'false') {\n          result[name] = '0'\n        } else if (cur) {\n          const typeModifiers = createTypeModifiers(cur as SpaceType)\n          const sum = sumTypes(typeModifiers)\n          result[name] = `${sum}rem`\n        }\n      }\n    }\n  }\n\n  return result as React.CSSProperties\n}\n\nfunction transformToAll(value: SpaceType | SpacingElementProps) {\n  let result = value\n\n  if (!hasSize(value as SpacingElementProps)) {\n    result = {\n      top: value,\n      right: value,\n      bottom: value,\n      left: value,\n    } as SpacingElementProps\n  }\n\n  return result as SpacingElementProps\n}\n\n/**\n * Creates a valid space CSS class out from given space types\n *\n * @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n */\nexport const createSpacingClasses = (\n  props:\n    | SpacingProps\n    /**\n     * To support typical not defined props form components\n     */\n    | SpacingUnknownProps,\n  Element = null\n) => {\n  const p = Object.isFrozen(props) ? { ...props } : props\n\n  if (typeof p.space !== 'undefined') {\n    if (\n      typeof p.space === 'string' ||\n      typeof p.space === 'number' ||\n      (typeof p.space === 'boolean' && p.space)\n    ) {\n      p.top = p.right = p.bottom = p.left = p.space\n    }\n    if (typeof p.space === 'object') {\n      for (const i in p.space) {\n        if (!p[i] && isValidSpaceProp(i)) {\n          p[i] = p.space[i]\n        }\n      }\n    }\n    delete p.space\n  }\n\n  return Object.entries(p).reduce((acc, [direction, cur]) => {\n    if (isValidSpaceProp(direction) && direction !== 'innerSpace') {\n      if (String(cur) === '0' || String(cur) === 'false') {\n        acc.push(`dnb-space__${direction}--zero`)\n      } else if (cur) {\n        const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n        // get the total sum\n        const sum = sumTypes(typeModifiers)\n        if (sum > 10) {\n          warn(\n            `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n              ','\n            )})`\n          )\n        } else {\n          // auto combine classes\n          const nearestTypes = findNearestTypes(sum, true)\n\n          acc = [\n            ...acc,\n            ...nearestTypes.map(\n              (type) => `dnb-space__${direction}--${type}`\n            ),\n          ]\n        }\n      }\n    } else if (direction === 'no_collapse') {\n      acc.push('dnb-space--no-collapse')\n      if (Element && isInline(Element)) {\n        acc.push('dnb-space--inline')\n      }\n    }\n\n    return acc\n  }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n  if (/-x2$/.test(String(type))) {\n    return spacePatterns[String(type).replace(/-x2$/, '')] * 2\n  }\n  return spacePatterns[String(type)] || 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType | Array<SpaceType>) => {\n  if (typeof types === 'string') {\n    const test = (types as SpaceStringTypes).split(/ /g)\n    return clean(test as Array<SpaceStringTypes>)\n  } else if (typeof types === 'boolean') {\n    return ['small' as SpaceTypesPositiveValuesType]\n  } else if (typeof types === 'number') {\n    return [types]\n  }\n\n  return clean(types) || null\n\n  function clean(t: Array<SpaceType> | Array<SpaceStringTypes>) {\n    return t?.filter((r) => r && String(r).length > 0)\n  }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType | Array<SpaceType>) =>\n  splitTypes(types)\n    .map((type) => translateSpace(type))\n    .reduce((acc, cur) => {\n      if (cur > 0) {\n        acc += cur\n      } else if (cur < 0) {\n        acc -= cur\n      }\n      return acc\n    }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n  types: SpaceType\n): Array<SpaceType> => {\n  return (splitTypes(types) || []).reduce((acc, type) => {\n    if (type) {\n      const firstLetter = String(type)[0]\n      if (parseFloat(firstLetter) > -1) {\n        // can be \"2rem\" or \"32px\" - but we want only a number\n        let num = parseFloat(String(type))\n\n        // check if we got pixels\n        if (num >= 8 && /[0-9]px/.test(String(type))) {\n          num = num / 16\n        }\n\n        // check if the type exists in our extensions\n        const foundType = findType(num)\n\n        // get the type\n        if (foundType) {\n          type = foundType\n        } else {\n          findNearestTypes(num).forEach((type) => {\n            if (type) {\n              acc.push(type)\n            }\n          })\n        }\n      }\n\n      if (!(parseFloat(String(type)) > 0)) {\n        acc.push(type)\n      }\n    }\n    return acc\n  }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n  const found = findTypeAll(num)\n\n  // get the type\n  if (found) {\n    return found[0]\n  }\n\n  return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n  num: SpaceNumber\n): Array<\n  SpaceTypesPositiveValuesType | SpaceTypesPositiveRemValuesType\n> => {\n  const listOfSpacePatterns = Object.entries(spacePatterns) as [\n    SpaceTypesPositiveValuesType,\n    SpaceTypesPositiveRemValuesType,\n  ][]\n  const found =\n    listOfSpacePatterns.find(([k, v]) => k && v === num) || null\n  return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n  let res = []\n\n  const near = Object.entries(spacePatterns)\n    .reverse()\n    .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n    .find(([k, v]) => k && num >= v)\n  const nearNum = (near && near[1]) || num\n  const types = findTypeAll(nearNum)\n\n  if (types) {\n    const nearType = types[0]\n    res.push(nearType)\n    const leftOver = num - parseFloat(String(types[1]))\n    const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n    // if the value already exists, then replace it with an x2\n    foundMoreTypes.forEach((type) => {\n      const index = res.indexOf(type)\n      if (index !== -1) {\n        res[index] = multiply ? `${type}-x2` : type\n      }\n    })\n\n    res = [...res, ...foundMoreTypes]\n  }\n\n  return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n  propName &&\n  ['top', 'right', 'bottom', 'left', 'space', 'innerSpace'].includes(\n    propName\n  )\n\nexport const removeSpaceProps = <Props extends SpacingProps>(\n  props: Props\n): Omit<Props, keyof SpacingProps> => {\n  const { space, innerSpace, top, bottom, left, right, ...restProps } =\n    props\n  return restProps\n}\n\nexport const isInline = (elementName: string) => {\n  switch (elementName) {\n    case 'h1':\n    case 'h2':\n    case 'h3':\n    case 'h4':\n    case 'h5':\n    case 'h6':\n    case 'p':\n      return true\n  }\n\n  return false\n}\n"],"mappings":"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"}

package/components/space/style/dnb-space.css

@@ -561,6 +561,42 @@
 .dnb-space__reset:not([class*=dnb-space__right]) {
   margin-right: 0;
 }
+.dnb-space[style*="--space-t-"] {
+  padding-top: var(--padding-top, 0);
+}
+.dnb-space[style*="--space-r-"] {
+  padding-right: var(--padding-right, 0);
+}
+.dnb-space[style*="--space-b-"] {
+  padding-bottom: var(--padding-bottom, 0);
+}
+.dnb-space[style*="--space-l-"] {
+  padding-left: var(--padding-left, 0);
+}
+@media screen and (max-width: 60em) {
+  .dnb-space {
+    --padding-right: var(--space-r-s);
+    --padding-left: var(--space-l-s);
+    --padding-top: var(--space-t-s);
+    --padding-bottom: var(--space-b-s);
+  }
+}
+@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+  .dnb-space {
+    --padding-right: var(--space-r-m);
+    --padding-left: var(--space-l-m);
+    --padding-top: var(--space-t-m);
+    --padding-bottom: var(--space-b-m);
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-space {
+    --padding-right: var(--space-r-l);
+    --padding-left: var(--space-l-l);
+    --padding-top: var(--space-t-l);
+    --padding-bottom: var(--space-b-l);
+  }
+}
 
 span.dnb-space--no-collapse > span {
   display: block;