@dnb/eufemia 10.18.0 → 10.20.0

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -17,11 +17,11 @@ var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 var _SpacingHelper = require("../space/SpacingHelper");
 var _Section = _interopRequireDefault(require("../section/Section"));
 var _Button = _interopRequireDefault(require("../button/Button"));
-var _shared = require("../../shared");
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
 var _componentHelper = require("../../shared/component-helper");
 var _BreadcrumbMultiple = require("./BreadcrumbMultiple");
+var _shared = require("../../shared");
 const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -69,16 +69,13 @@ const Breadcrumb = localProps => {
   const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
   const [isCollapsed, setCollapse] = (0, _react.useState)(overrideIsCollapsed);
-  const isSmallScreen = (0, _shared.useMediaQuery)({
-    matchOnSSR: true,
-    when: {
-      max: 'medium'
-    }
-  });
+  const {
+    isLarge
+  } = (0, _shared.useMedia)();
   let currentVariant = variant;
   if (!variant) {
     if (items || data) {
-      currentVariant = isSmallScreen ? 'collapse' : 'multiple';
+      currentVariant = 'multiple';
     } else {
       currentVariant = 'single';
     }
@@ -86,16 +83,29 @@ const Breadcrumb = localProps => {
   (0, _react.useEffect)(() => {
     setCollapse(overrideIsCollapsed);
   }, [overrideIsCollapsed]);
+  (0, _react.useEffect)(() => {
+    if (isLarge && overrideIsCollapsed !== false) {
+      setCollapse(true);
+    }
+  }, [isLarge]);
   (0, _componentHelper.validateDOMAttributes)(allProps, props);
-  const innerSpacing = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
+  const innerSpace = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
   return _react.default.createElement("nav", _extends({
     "aria-label": (0, _componentHelper.convertJsxToString)(navText),
-    className: (0, _classnames.default)('dnb-breadcrumb', skeletonClasses, spacingClasses, className)
+    className: (0, _classnames.default)(`dnb-breadcrumb dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, spacingClasses, className)
   }, props), _react.default.createElement(_Section.default, {
     className: "dnb-breadcrumb__bar",
     style_type: styleType || 'transparent',
-    spacing: innerSpacing
-  }, currentVariant === 'collapse' && _react.default.createElement(_Button.default, {
+    innerSpace: innerSpace
+  }, currentVariant === 'single' ? _react.default.createElement(_Button.default, {
+    text: goBackText,
+    variant: "tertiary",
+    icon: "chevron_left",
+    icon_position: "left",
+    onClick: onClick,
+    href: href
+  }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Button.default, {
+    className: "dnb-breadcrumb__toggle",
     text: backToText,
     variant: "tertiary",
     icon: "chevron_left",
@@ -104,19 +114,12 @@ const Breadcrumb = localProps => {
       setCollapse(!isCollapsed);
     }),
     "aria-expanded": !isCollapsed
-  }), currentVariant === 'single' && _react.default.createElement(_Button.default, {
-    text: goBackText,
-    variant: "tertiary",
-    icon: "chevron_left",
-    icon_position: "left",
-    onClick: onClick,
-    href: href
-  }), currentVariant === 'multiple' && _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
+  }), currentVariant !== 'collapse' && _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,
     isCollapsed: false,
     noAnimation: noAnimation
-  })), currentVariant === 'collapse' && _react.default.createElement(_Section.default, {
+  }))), _react.default.createElement(_Section.default, {
     variant: collapsedStyleType,
     className: "dnb-breadcrumb__collapse"
   }, _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {

package/cjs/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_shared","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","setCollapse","useState","isSmallScreen","useMediaQuery","matchOnSSR","when","max","currentVariant","useEffect","validateDOMAttributes","innerSpacing","isTrue","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","BreadcrumbMultiple","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n   */\n  variant?: 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = isSmallScreen ? 'collapse' : 'multiple'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpacing = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        spacing={innerSpacing}\n      >\n        {currentVariant === 'collapse' && (\n          <Button\n            text={backToText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={\n              onClick ||\n              (() => {\n                setCollapse(!isCollapsed)\n              })\n            }\n            aria-expanded={!isCollapsed}\n          />\n        )}\n\n        {currentVariant === 'single' && (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        )}\n\n        {currentVariant === 'multiple' && (\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={false}\n            noAnimation={noAnimation}\n          />\n        )}\n      </Section>\n\n      {currentVariant === 'collapse' && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsed}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\n\nexport { BreadcrumbItem }\n\nBreadcrumb._supportsSpacingProps = true\n\nexport default Breadcrumb\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_shared","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","setCollapse","useState","isLarge","useMedia","currentVariant","useEffect","validateDOMAttributes","innerSpace","isTrue","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","Fragment","BreadcrumbMultiple","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n   */\n  variant?: 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = 'multiple'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      setCollapse(true)\n    }\n  }, [isLarge])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            <Button\n              className=\"dnb-breadcrumb__toggle\"\n              text={backToText}\n              variant=\"tertiary\"\n              icon=\"chevron_left\"\n              icon_position=\"left\"\n              onClick={\n                onClick ||\n                (() => {\n                  setCollapse(!isCollapsed)\n                })\n              }\n              aria-expanded={!isCollapsed}\n            />\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      <Section\n        variant={collapsedStyleType}\n        className=\"dnb-breadcrumb__collapse\"\n      >\n        <BreadcrumbMultiple\n          data={data}\n          items={items}\n          isCollapsed={isCollapsed}\n          noAnimation={noAnimation}\n        />\n      </Section>\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
 const defaultProps = {
   text: null,
   href: null,
@@ -29,7 +30,7 @@ const defaultProps = {
 const determineSbankenIcon = (variant, isSmallScreen) => {
   switch (variant) {
     case 'home':
-      return _home.default;
+      return 'home-icon';
     case 'single':
     case 'collapse':
       return 'chevron_left';
@@ -64,15 +65,23 @@ const BreadcrumbItem = localProps => {
       max: 'medium'
     }
   });
-  let currentIcon = icon || variant === 'home' && _home.default || 'chevron_left';
-  if ((theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
-    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen);
-  }
+  const [currentIcon, setCurrentIcon] = _react.default.useState('chevron_left');
+  useLayoutEffect(() => {
+    if (!icon && (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
+      const icon = determineSbankenIcon(variant, isSmallScreen);
+      setCurrentIcon(icon);
+    } else {
+      if (variant !== 'home') {
+        setCurrentIcon(icon !== null && icon !== void 0 ? icon : 'chevron_left');
+      }
+    }
+  }, [icon, isSmallScreen, theme === null || theme === void 0 ? void 0 : theme.name, variant]);
   const currentText = text || variant === 'home' && homeText || '';
   const isInteractive = (href || onClick || props.to) && variant !== 'current';
   const style = {
     '--delay': String(itemNr)
   };
+  const iconToUse = variant === 'home' || currentIcon === 'home-icon' ? _home.default : currentIcon;
   return _react.default.createElement("li", {
     className: "dnb-breadcrumb__item",
     "aria-current": variant === 'current' ? 'page' : undefined,
@@ -80,7 +89,7 @@ const BreadcrumbItem = localProps => {
   }, isInteractive ? _react.default.createElement(_Button.default, _extends({
     variant: "tertiary",
     href: href,
-    icon: currentIcon,
+    icon: iconToUse,
     icon_position: "left",
     on_click: onClick,
     text: currentText,
@@ -88,7 +97,7 @@ const BreadcrumbItem = localProps => {
   }, props)) : _react.default.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
   }, (0, _componentHelper.filterProps)(props, key => !key.includes('-'))), _react.default.createElement(_IconPrimary.default, {
-    icon: currentIcon,
+    icon: iconToUse,
     className: "dnb-breadcrumb__item__span__icon"
   }), _react.default.createElement(_P.default, {
     space: "0"

package/cjs/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","homeIcon","BreadcrumbItem","localProps","context","React","useContext","Context","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","theme","useTheme","useMediaQuery","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","to","style","String","createElement","className","undefined","icon_position","on_click","filterProps","includes","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
+{"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","useLayoutEffect","window","React","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","Context","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","theme","useTheme","useMediaQuery","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","name","currentText","isInteractive","to","style","String","iconToUse","homeIcon","createElement","className","undefined","icon_position","on_click","filterProps","includes","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return 'home-icon'\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  const [currentIcon, setCurrentIcon] =\n    React.useState<IconIcon>('chevron_left')\n\n  useLayoutEffect(() => {\n    if (!icon && theme?.name === 'sbanken') {\n      const icon = determineSbankenIcon(variant, isSmallScreen)\n      setCurrentIcon(icon)\n    } else {\n      if (variant !== 'home') {\n        setCurrentIcon(icon ?? 'chevron_left')\n      }\n    }\n  }, [icon, isSmallScreen, theme?.name, variant])\n\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  const iconToUse =\n    variant === 'home' || currentIcon === 'home-icon'\n      ? homeIcon\n      : currentIcon\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={iconToUse}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={iconToUse}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/cjs/components/breadcrumb/BreadcrumbMultiple.js

@@ -20,7 +20,7 @@ const BreadcrumbMultiple = _ref => {
   return _react.default.createElement(_HeightAnimation.default, {
     open: !isCollapsed,
     animate: !noAnimation,
-    className: "dnb-breadcrumb__animation"
+    className: "dnb-breadcrumb__multiple"
   }, _react.default.createElement(_Section.default, {
     className: "dnb-breadcrumb__list",
     element: "ol",

package/cjs/components/breadcrumb/BreadcrumbMultiple.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbMultiple.js","names":["_react","_interopRequireDefault","require","_HeightAnimation","_Section","_BreadcrumbItem","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","BreadcrumbMultiple","_ref","isCollapsed","items","noAnimation","data","createElement","open","animate","className","element","style_type","map","breadcrumbItem","variant","itemNr","React","Children","toArray","filter","item","isValidElement","cloneElement","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbMultiple.tsx"],"sourcesContent":["import React from 'react'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport Section from '../section/Section'\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\n\ntype BreadcrumbMultipleProps = {\n  isCollapsed: boolean\n  noAnimation: boolean\n  data: Array<BreadcrumbItemProps>\n  items:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n}\n\nexport const BreadcrumbMultiple = ({\n  isCollapsed,\n  items,\n  noAnimation,\n  data,\n}: BreadcrumbMultipleProps) => {\n  return (\n    <HeightAnimation\n      open={!isCollapsed}\n      animate={!noAnimation}\n      className=\"dnb-breadcrumb__animation\"\n    >\n      <Section\n        className=\"dnb-breadcrumb__list\"\n        element=\"ol\"\n        style_type=\"transparent\"\n      >\n        {data?.map((breadcrumbItem, i) => {\n          return (\n            <BreadcrumbItem\n              key={i}\n              variant={\n                (i == 0 && 'home') ||\n                (i == data.length - 1 && 'current') ||\n                null\n              }\n              itemNr={i}\n              {...breadcrumbItem}\n            />\n          )\n        })}\n\n        {React.Children.toArray(items)\n          .filter((item) => React.isValidElement(item))\n          .map((item: React.ReactElement<BreadcrumbItemProps>, i) =>\n            React.cloneElement(item, { key: i, itemNr: i })\n          )}\n      </Section>\n    </HeightAnimation>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsE,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAW/D,MAAMQ,kBAAkB,GAAGC,IAAA,IAKH;EAAA,IALI;IACjCC,WAAW;IACXC,KAAK;IACLC,WAAW;IACXC;EACuB,CAAC,GAAAJ,IAAA;EACxB,OACExB,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAAC1B,gBAAA,CAAAK,OAAe;IACdsB,IAAI,EAAE,CAACL,WAAY;IACnBM,OAAO,EAAE,CAACJ,WAAY;IACtBK,SAAS,EAAC;EAA2B,GAErChC,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAACzB,QAAA,CAAAI,OAAO;IACNwB,SAAS,EAAC,sBAAsB;IAChCC,OAAO,EAAC,IAAI;IACZC,UAAU,EAAC;EAAa,GAEvBN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,GAAG,CAAC,CAACC,cAAc,EAAEtB,CAAC,KAAK;IAChC,OACEd,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAACxB,eAAA,CAAAG,OAAc,EAAAC,QAAA;MACbS,GAAG,EAAEJ,CAAE;MACPuB,OAAO,EACJvB,CAAC,IAAI,CAAC,IAAI,MAAM,IAChBA,CAAC,IAAIc,IAAI,CAACZ,MAAM,GAAG,CAAC,IAAI,SAAU,IACnC,IACD;MACDsB,MAAM,EAAExB;IAAE,GACNsB,cAAc,CACnB,CAAC;EAEN,CAAC,CAAC,EAEDG,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACf,KAAK,CAAC,CAC3BgB,MAAM,CAAEC,IAAI,IAAKJ,cAAK,CAACK,cAAc,CAACD,IAAI,CAAC,CAAC,CAC5CR,GAAG,CAAC,CAACQ,IAA6C,EAAE7B,CAAC,KACpDyB,cAAK,CAACM,YAAY,CAACF,IAAI,EAAE;IAAEzB,GAAG,EAAEJ,CAAC;IAAEwB,MAAM,EAAExB;EAAE,CAAC,CAChD,CACK,CACM,CAAC;AAEtB,CAAC;AAAAgC,OAAA,CAAAvB,kBAAA,GAAAA,kBAAA"}
+{"version":3,"file":"BreadcrumbMultiple.js","names":["_react","_interopRequireDefault","require","_HeightAnimation","_Section","_BreadcrumbItem","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","BreadcrumbMultiple","_ref","isCollapsed","items","noAnimation","data","createElement","open","animate","className","element","style_type","map","breadcrumbItem","variant","itemNr","React","Children","toArray","filter","item","isValidElement","cloneElement","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbMultiple.tsx"],"sourcesContent":["import React from 'react'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport Section from '../section/Section'\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\n\ntype BreadcrumbMultipleProps = {\n  isCollapsed: boolean\n  noAnimation: boolean\n  data: Array<BreadcrumbItemProps>\n  items:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n}\n\nexport const BreadcrumbMultiple = ({\n  isCollapsed,\n  items,\n  noAnimation,\n  data,\n}: BreadcrumbMultipleProps) => {\n  return (\n    <HeightAnimation\n      open={!isCollapsed}\n      animate={!noAnimation}\n      className=\"dnb-breadcrumb__multiple\"\n    >\n      <Section\n        className=\"dnb-breadcrumb__list\"\n        element=\"ol\"\n        style_type=\"transparent\"\n      >\n        {data?.map((breadcrumbItem, i) => {\n          return (\n            <BreadcrumbItem\n              key={i}\n              variant={\n                (i == 0 && 'home') ||\n                (i == data.length - 1 && 'current') ||\n                null\n              }\n              itemNr={i}\n              {...breadcrumbItem}\n            />\n          )\n        })}\n\n        {React.Children.toArray(items)\n          .filter((item) => React.isValidElement(item))\n          .map((item: React.ReactElement<BreadcrumbItemProps>, i) =>\n            React.cloneElement(item, { key: i, itemNr: i })\n          )}\n      </Section>\n    </HeightAnimation>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsE,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAW/D,MAAMQ,kBAAkB,GAAGC,IAAA,IAKH;EAAA,IALI;IACjCC,WAAW;IACXC,KAAK;IACLC,WAAW;IACXC;EACuB,CAAC,GAAAJ,IAAA;EACxB,OACExB,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAAC1B,gBAAA,CAAAK,OAAe;IACdsB,IAAI,EAAE,CAACL,WAAY;IACnBM,OAAO,EAAE,CAACJ,WAAY;IACtBK,SAAS,EAAC;EAA0B,GAEpChC,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAACzB,QAAA,CAAAI,OAAO;IACNwB,SAAS,EAAC,sBAAsB;IAChCC,OAAO,EAAC,IAAI;IACZC,UAAU,EAAC;EAAa,GAEvBN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,GAAG,CAAC,CAACC,cAAc,EAAEtB,CAAC,KAAK;IAChC,OACEd,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAACxB,eAAA,CAAAG,OAAc,EAAAC,QAAA;MACbS,GAAG,EAAEJ,CAAE;MACPuB,OAAO,EACJvB,CAAC,IAAI,CAAC,IAAI,MAAM,IAChBA,CAAC,IAAIc,IAAI,CAACZ,MAAM,GAAG,CAAC,IAAI,SAAU,IACnC,IACD;MACDsB,MAAM,EAAExB;IAAE,GACNsB,cAAc,CACnB,CAAC;EAEN,CAAC,CAAC,EAEDG,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACf,KAAK,CAAC,CAC3BgB,MAAM,CAAEC,IAAI,IAAKJ,cAAK,CAACK,cAAc,CAACD,IAAI,CAAC,CAAC,CAC5CR,GAAG,CAAC,CAACQ,IAA6C,EAAE7B,CAAC,KACpDyB,cAAK,CAACM,YAAY,CAACF,IAAI,EAAE;IAAEzB,GAAG,EAAEJ,CAAC;IAAEwB,MAAM,EAAExB;EAAE,CAAC,CAChD,CACK,CACM,CAAC;AAEtB,CAAC;AAAAgC,OAAA,CAAAvB,kBAAA,GAAAA,kBAAA"}

package/cjs/components/breadcrumb/style/dnb-breadcrumb.css

@@ -32,18 +32,28 @@
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__animation {
+.dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
   transition: height 400ms var(--easing-default);
 }
-.dnb-breadcrumb__animation .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
   transform: translateX(-1rem);
 }
-.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+@media screen and (max-width: 60em) {
+  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+    display: none;
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+    display: none;
+  }
+}
 .dnb-breadcrumb__collapse {
   display: flex;
   flex-direction: column;

package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css

@@ -1 +1 @@
-.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;gap:1.5rem;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:normal;padding:.5rem 0}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__animation{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__animation .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;gap:0;margin:.5rem 0 .5rem 1.5rem}
+.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;gap:1.5rem;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:normal;padding:.5rem 0}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}@media screen and (max-width:60em){.dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;gap:0;margin:.5rem 0 .5rem 1.5rem}

package/cjs/components/breadcrumb/style/dnb-breadcrumb.scss

@@ -42,23 +42,35 @@
     }
   }
 
-  &__animation {
+  &__multiple {
     display: flex;
     flex-direction: column;
 
     transition: height 400ms var(--easing-default);
   }
 
-  &__animation &__item {
+  &__multiple &__item {
     transition: transform 400ms var(--easing-default)
       calc(var(--delay) * 50ms);
     transform: translateX(-1rem);
   }
 
-  &__animation.dnb-height-animation--parallax &__item {
+  &__multiple.dnb-height-animation--parallax &__item {
     transform: translateX(0);
   }
 
+  &__bar &__multiple {
+    @include allBelow(medium) {
+      display: none;
+    }
+  }
+
+  &--variant-multiple &__toggle {
+    @include allAbove(medium) {
+      display: none;
+    }
+  }
+
   &__collapse {
     display: flex;
     flex-direction: column;

package/cjs/components/card/Card.d.ts

@@ -1,8 +1,10 @@
-import type { Props as FlexContainerProps } from '../flex/Container';
-import type { Props as FlexItemProps } from '../flex/Item';
-export type Props = Omit<FlexContainerProps & FlexItemProps, 'ref' | 'wrap'> & {
+import React from 'react';
+import type { BasicProps as FlexContainerProps } from '../flex/Container';
+import type { BasicProps as FlexItemProps } from '../flex/Item';
+import { SpaceProps } from '../Space';
+export type Props = FlexContainerProps & FlexItemProps & {
     stack?: boolean;
-};
+} & SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>;
 declare function Card(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Card {
     var _supportsSpacingProps: boolean;

package/cjs/components/card/Card.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _Section = require("../section/Section");
-const _excluded = ["className", "stack", "direction", "spacing", "innerSpace", "alignSelf", "divider", "children"];
+const _excluded = ["className", "stack", "direction", "spacing", "innerSpace", "alignSelf", "divider", "rowGap", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -27,6 +27,7 @@ function Card(props) {
       innerSpace,
       alignSelf = 'stretch',
       divider = 'space',
+      rowGap,
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
@@ -52,7 +53,6 @@ function Card(props) {
   });
   const params = (0, _Section.SectionParams)(_objectSpread({
     className: (0, _classnames.default)('dnb-card', className),
-    backgroundColor: 'white',
     breakout: trueWhenSmall,
     roundedCorner: falseWhenSmall,
     outline: true,
@@ -60,23 +60,19 @@ function Card(props) {
       small: smallSpace,
       medium: basisSpace,
       large: basisSpace
-    },
-    children
+    }
   }, rest));
-  if (stack || direction || spacing) {
-    return _react.default.createElement(_Flex.default.Container, _extends({
-      direction: direction !== null && direction !== void 0 ? direction : 'vertical',
-      divider: divider,
-      wrap: false,
-      spacing: spacing,
-      alignSelf: alignSelf,
-      element: "section"
-    }, params));
-  }
   return _react.default.createElement(_Flex.default.Item, _extends({
     alignSelf: alignSelf,
     element: "section"
-  }, params));
+  }, params), _react.default.createElement(_Flex.default.Container, {
+    direction: direction !== null && direction !== void 0 ? direction : 'vertical',
+    divider: divider,
+    alignSelf: alignSelf,
+    wrap: !stack,
+    spacing: stack ? 'small' : spacing || false,
+    rowGap: rowGap || false
+  }, children));
 }
 Card._supportsSpacingProps = true;
 var _default = Card;

package/cjs/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","spacing","innerSpace","alignSelf","divider","children","rest","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","backgroundColor","breakout","roundedCorner","outline","createElement","Container","wrap","element","Item","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams } from '../section/Section'\n\nimport type { Props as FlexContainerProps } from '../flex/Container'\nimport type { Props as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\n\nexport type Props = Omit<\n  FlexContainerProps & FlexItemProps,\n  'ref' | 'wrap'\n> & {\n  stack?: boolean\n}\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    children,\n    ...rest\n  } = props\n\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = {\n    ...basisSpace,\n    right: 0,\n    left: 0,\n  }\n\n  const params = SectionParams({\n    className: classnames('dnb-card', className),\n    backgroundColor: 'white',\n    breakout: trueWhenSmall,\n    roundedCorner: falseWhenSmall,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    children,\n    ...rest,\n  })\n\n  if (stack || direction || spacing) {\n    return (\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        wrap={false}\n        spacing={spacing}\n        alignSelf={alignSelf}\n        element=\"section\"\n        {...params}\n      />\n    )\n  }\n\n  return <Flex.Item alignSelf={alignSelf} element=\"section\" {...params} />\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","spacing","innerSpace","alignSelf","divider","rowGap","children","rest","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","createElement","Item","element","Container","wrap","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport { SpaceProps } from '../Space'\n\nexport type Props = FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    rowGap,\n    children,\n    ...rest\n  } = props\n\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = {\n    ...basisSpace,\n    right: 0,\n    left: 0,\n  }\n\n  const params = SectionParams({\n    className: classnames('dnb-card', className),\n    breakout: trueWhenSmall,\n    roundedCorner: falseWhenSmall,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        alignSelf={alignSelf}\n        wrap={!stack}\n        spacing={stack ? 'small' : spacing || false}\n        rowGap={rowGap || false}\n      >\n        {children}\n      </Flex.Container>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

package/cjs/components/card/style/dnb-card.css

@@ -1,7 +1,36 @@
+/*
+ * Utilities
+ */
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
 }
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
+}
+.dnb-card.dnb-section {
+  background-color: var(--background-color);
+}
+@media screen and (max-width: 40em) {
+  .dnb-card.dnb-section::before {
+    left: -100vw;
+    right: -100vw;
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-card + .dnb-card:not([class*=space__top]) {
+    background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
+  }
+  .dnb-card + .dnb-card:not([class*=space__top])::before {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
 }

package/cjs/components/card/style/dnb-card.min.css

@@ -1 +1 @@
-.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card.dnb-section{background-color:var(--background-color)}@media screen and (max-width:40em){.dnb-card.dnb-section:before{left:-100vw;right:-100vw}.dnb-card+.dnb-card:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card:before{top:var(--outline-width);z-index:0}}

package/cjs/components/card/style/dnb-card.scss

@@ -1,3 +1,5 @@
+@import '../../../style/core/utilities.scss';
+
 .dnb-card {
   &__heading {
     font-size: var(--font-size-basis);
@@ -7,4 +9,43 @@
   & + &__heading {
     margin-top: var(--spacing-small);
   }
+
+  &.dnb-section {
+    background-color: var(--background-color);
+  }
+
+  @include allBelow(small) {
+    &.dnb-section::before {
+      left: -100vw;
+      right: -100vw;
+    }
+  }
+
+  // Show only one border (combined) when stacked
+  & + .dnb-card:not([class*='space__top']) {
+    @include allBelow(small) {
+      &::before {
+        top: var(--outline-width);
+      }
+      background: linear-gradient(
+          to left,
+          var(--background-color),
+          var(--background-color)
+        )
+        no-repeat 0 var(--outline-width); // with an offset
+    }
+  }
+
+  // Combine the two borers to one
+  .dnb-flex-container.dnb-flex-container--divider-space & + .dnb-card {
+    @include allBelow(small) {
+      // --gap: var(--outline-width);
+      margin-top: 0;
+
+      &::before {
+        top: var(--outline-width); // align background and outline
+        z-index: 0;
+      }
+    }
+  }
 }