npm - @dnb/eufemia - Versions diffs - 10.19.0 → 10.21.0 - Mend

@dnb/eufemia 10.19.0 → 10.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1308) hide show

package/elements/typography/H4.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h4\" size={size \|\| 'auto'} {...props} />\n)\n\nH4._isHeadingElement = true\nH._supportsSpacingProps = true\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;~~AAC3BV~~,~~CAAC~~,~~CAACW~~,qBAAqB,GAAG,IAAI;~~AAE9B~~,eAAeV,EAAE"}
1	+ {"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h4\" size={size \|\| 'auto'} {...props} />\n)\n\nH4._isHeadingElement = true\nH4._supportsSpacingProps = true\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;AAC3BT,EAAE,CAACU,qBAAqB,GAAG,IAAI;AAE/B,eAAeV,EAAE"}

package/elements/typography/H5.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import type { SharedHProps } from './H';
 declare const H5: {
     ({ size, ...props }: SharedHProps): import("react/jsx-runtime").JSX.Element;
     _isHeadingElement: boolean;
+    _supportsSpacingProps: boolean;
 };
 export default H5;

package/elements/typography/H5.js CHANGED Viewed

@@ -14,6 +14,6 @@ const H5 = _ref => {
   }, props));
 };
 H5._isHeadingElement = true;
-H._supportsSpacingProps = true;
+H5._supportsSpacingProps = true;
 export default H5;
 //# sourceMappingURL=H5.js.map

package/elements/typography/H5.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h5\" size={size \|\| 'auto'} {...props} />\n)\n\nH5._isHeadingElement = true\nH._supportsSpacingProps = true\n\nexport default H5\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;~~AAC3BV~~,~~CAAC~~,~~CAACW~~,qBAAqB,GAAG,IAAI;~~AAE9B~~,eAAeV,EAAE"}
1	+ {"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h5\" size={size \|\| 'auto'} {...props} />\n)\n\nH5._isHeadingElement = true\nH5._supportsSpacingProps = true\n\nexport default H5\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;AAC3BT,EAAE,CAACU,qBAAqB,GAAG,IAAI;AAE/B,eAAeV,EAAE"}

package/elements/typography/H6.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import type { SharedHProps } from './H';
 declare const H6: {
     ({ size, ...props }: SharedHProps): import("react/jsx-runtime").JSX.Element;
     _isHeadingElement: boolean;
+    _supportsSpacingProps: boolean;
 };
 export default H6;

package/elements/typography/H6.js CHANGED Viewed

@@ -14,6 +14,6 @@ const H6 = _ref => {
   }, props));
 };
 H6._isHeadingElement = true;
-H._supportsSpacingProps = true;
+H6._supportsSpacingProps = true;
 export default H6;
 //# sourceMappingURL=H6.js.map

package/elements/typography/H6.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h6\" size={size \|\| 'auto'} {...props} />\n)\n\nH6._isHeadingElement = true\nH._supportsSpacingProps = true\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;~~AAC3BV~~,~~CAAC~~,~~CAACW~~,qBAAqB,GAAG,IAAI;~~AAE9B~~,eAAeV,EAAE"}
1	+ {"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_isHeadingElement","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size, ...props }: SharedHProps) => (\n <H as=\"h6\" size={size \|\| 'auto'} {...props} />\n)\n\nH6._isHeadingElement = true\nH6._supportsSpacingProps = true\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAEDH,EAAE,CAACS,iBAAiB,GAAG,IAAI;AAC3BT,EAAE,CAACU,qBAAqB,GAAG,IAAI;AAE/B,eAAeV,EAAE"}

package/es/components/accordion/AccordionContent.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { SpacingProps } from '../space/types';
-export type AccordionContentProps = Omit<React.HTMLProps<HTMLElement>, 'onAnimationEnd' | 'children'> & SpacingProps & {
+export type AccordionContentProps = Omit<React.HTMLProps<HTMLElement>, 'onAnimationStart' | 'onAnimationEnd' | 'children'> & SpacingProps & {
     instance?: React.MutableRefObject<unknown>;
     className?: string;
     children?: React.ReactNode | ((...args: any[]) => any);

package/es/components/accordion/AccordionContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionContent.js","names":["React","classnames","warn","validateDOMAttributes","processChildren","getPreviousSibling","useMediaQuery","AccordionContext","createSpacingClasses","HeightAnimation","AccordionContent","props","context","useContext","id","expanded","prerender","prevent_rerender","single_container","disabled","no_animation","contentRef","className","children","instance","rest","_objectWithoutProperties","_excluded","elementRef","useRef","cacheRef","setContainerHeight","contentElem","current","style","height","containerElement","transitionDuration","minHeight","offsetHeight","offsetTop","e","renderContent","prevent_rerender_conditional","content","createElement","useEffect","useState","Object","prototype","hasOwnProperty","call","isSmallScreen","when","max","wrapperParams","_objectSpread","keepInDOM","innerParams","animate","_extends","open","innerRef","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["/*\n Web Accordion Component\n \n /\n\nimport React, { HTMLProps } from 'react'\nimport classnames from 'classnames'\nimport {\n warn,\n validateDOMAttributes,\n processChildren,\n getPreviousSibling,\n} from '../../shared/component-helper'\nimport { useMediaQuery } from '../../shared'\nimport AccordionContext, {\n AccordionContextProps,\n} from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { SpacingProps } from '../space/types'\n\nexport type AccordionContentProps = Omit<\n React.HTMLProps<HTMLElement>,\n 'onAnimationEnd' \| 'children'\n> &\n SpacingProps & {\n instance?: React.MutableRefObject<unknown>\n className?: string\n children?: React.ReactNode \| ((...args: any[]) => any)\n }\n\nexport default function AccordionContent(props: AccordionContentProps) {\n const context = React.useContext<AccordionContextProps>(AccordionContext)\n\n const {\n id,\n expanded,\n prerender,\n prevent_rerender,\n single_container,\n disabled,\n no_animation,\n contentRef,\n } = context\n\n const { className, children, instance, ...rest } = props\n\n let elementRef = React.useRef(null)\n const cacheRef = React.useRef(null)\n\n if (contentRef) {\n elementRef = contentRef\n }\n\n const setContainerHeight = () => {\n const { single_container } = context\n\n if (single_container) {\n const contentElem = elementRef.current\n if (contentElem) {\n try {\n contentElem.style.height = ''\n\n const containerElement = getPreviousSibling(\n 'dnb-accordion-group--single-container',\n contentElem\n ) as HTMLElement\n\n if (no_animation) {\n containerElement.style.transitionDuration = '1ms'\n }\n\n const minHeight =\n (contentElem.offsetHeight + contentElem.offsetTop) / 16\n containerElement.style.minHeight = `${minHeight}rem`\n } catch (e) {\n warn(e)\n }\n }\n }\n }\n\n const renderContent = () => {\n const children = processChildren(props)\n\n const {\n expanded,\n prerender,\n prevent_rerender,\n prevent_rerender_conditional,\n } = context\n\n let content = children\n\n if (typeof content === 'string') {\n content = <p className=\"dnb-p\">{content}</p>\n }\n\n if (prevent_rerender) {\n /*\n Ensure we do not render, if it is not expanded\n */\n if (!(expanded \|\| prerender)) {\n content = null\n }\n\n // update the cache if children is not the same anymore\n if (prevent_rerender_conditional && cacheRef.current !== content) {\n cacheRef.current = content\n }\n\n if (cacheRef.current) {\n content = cacheRef.current\n } else {\n cacheRef.current = content\n }\n }\n\n return content\n }\n\n React.useEffect(() => {\n if (expanded && single_container) {\n setContainerHeight()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, expanded, single_container])\n\n React.useState(() => {\n if (\n instance &&\n Object.prototype.hasOwnProperty.call(instance, 'current')\n ) {\n instance.current = { setContainerHeight }\n }\n })\n\n const isSmallScreen = useMediaQuery({\n when: { max: 'small' },\n })\n\n const content = renderContent()\n\n const wrapperParams = {\n className: classnames('dnb-accordion__content', className),\n ...rest,\n }\n\n const keepInDOM = prerender \|\| prevent_rerender\n\n const innerParams = {\n id: `${id}-content`,\n 'aria-labelledby': `${id}-header`,\n className: classnames(\n 'dnb-accordion__content__inner',\n createSpacingClasses(rest)\n ),\n } as HTMLProps<HTMLElement>\n\n if (expanded) {\n innerParams['aria-expanded'] = true\n }\n\n if (!expanded \|\| disabled) {\n innerParams.disabled = true\n innerParams['aria-hidden'] = true\n }\n\n // to remove spacing props\n validateDOMAttributes(props, wrapperParams)\n validateDOMAttributes(null, innerParams)\n\n const animate =\n !no_animation && (single_container ? isSmallScreen : true)\n\n return (\n <HeightAnimation\n {...wrapperParams}\n open={expanded}\n animate={animate}\n keepInDOM={keepInDOM}\n innerRef={elementRef}\n >\n <section {...innerParams}>{content}</section>\n </HeightAnimation>\n )\n}\n\nAccordionContent._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"AccordionContent.js","names":["React","classnames","warn","validateDOMAttributes","processChildren","getPreviousSibling","useMediaQuery","AccordionContext","createSpacingClasses","HeightAnimation","AccordionContent","props","context","useContext","id","expanded","prerender","prevent_rerender","single_container","disabled","no_animation","contentRef","className","children","instance","rest","_objectWithoutProperties","_excluded","elementRef","useRef","cacheRef","setContainerHeight","contentElem","current","style","height","containerElement","transitionDuration","minHeight","offsetHeight","offsetTop","e","renderContent","prevent_rerender_conditional","content","createElement","useEffect","useState","Object","prototype","hasOwnProperty","call","isSmallScreen","when","max","wrapperParams","_objectSpread","keepInDOM","innerParams","animate","_extends","open","innerRef","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["/*\n Web Accordion Component\n \n /\n\nimport React, { HTMLProps } from 'react'\nimport classnames from 'classnames'\nimport {\n warn,\n validateDOMAttributes,\n processChildren,\n getPreviousSibling,\n} from '../../shared/component-helper'\nimport { useMediaQuery } from '../../shared'\nimport AccordionContext, {\n AccordionContextProps,\n} from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { SpacingProps } from '../space/types'\n\nexport type AccordionContentProps = Omit<\n React.HTMLProps<HTMLElement>,\n 'onAnimationStart' \| 'onAnimationEnd' \| 'children'\n> &\n SpacingProps & {\n instance?: React.MutableRefObject<unknown>\n className?: string\n children?: React.ReactNode \| ((...args: any[]) => any)\n }\n\nexport default function AccordionContent(props: AccordionContentProps) {\n const context = React.useContext<AccordionContextProps>(AccordionContext)\n\n const {\n id,\n expanded,\n prerender,\n prevent_rerender,\n single_container,\n disabled,\n no_animation,\n contentRef,\n } = context\n\n const { className, children, instance, ...rest } = props\n\n let elementRef = React.useRef(null)\n const cacheRef = React.useRef(null)\n\n if (contentRef) {\n elementRef = contentRef\n }\n\n const setContainerHeight = () => {\n const { single_container } = context\n\n if (single_container) {\n const contentElem = elementRef.current\n if (contentElem) {\n try {\n contentElem.style.height = ''\n\n const containerElement = getPreviousSibling(\n 'dnb-accordion-group--single-container',\n contentElem\n ) as HTMLElement\n\n if (no_animation) {\n containerElement.style.transitionDuration = '1ms'\n }\n\n const minHeight =\n (contentElem.offsetHeight + contentElem.offsetTop) / 16\n containerElement.style.minHeight = `${minHeight}rem`\n } catch (e) {\n warn(e)\n }\n }\n }\n }\n\n const renderContent = () => {\n const children = processChildren(props)\n\n const {\n expanded,\n prerender,\n prevent_rerender,\n prevent_rerender_conditional,\n } = context\n\n let content = children\n\n if (typeof content === 'string') {\n content = <p className=\"dnb-p\">{content}</p>\n }\n\n if (prevent_rerender) {\n /*\n Ensure we do not render, if it is not expanded\n */\n if (!(expanded \|\| prerender)) {\n content = null\n }\n\n // update the cache if children is not the same anymore\n if (prevent_rerender_conditional && cacheRef.current !== content) {\n cacheRef.current = content\n }\n\n if (cacheRef.current) {\n content = cacheRef.current\n } else {\n cacheRef.current = content\n }\n }\n\n return content\n }\n\n React.useEffect(() => {\n if (expanded && single_container) {\n setContainerHeight()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, expanded, single_container])\n\n React.useState(() => {\n if (\n instance &&\n Object.prototype.hasOwnProperty.call(instance, 'current')\n ) {\n instance.current = { setContainerHeight }\n }\n })\n\n const isSmallScreen = useMediaQuery({\n when: { max: 'small' },\n })\n\n const content = renderContent()\n\n const wrapperParams = {\n className: classnames('dnb-accordion__content', className),\n ...rest,\n }\n\n const keepInDOM = prerender \|\| prevent_rerender\n\n const innerParams = {\n id: `${id}-content`,\n 'aria-labelledby': `${id}-header`,\n className: classnames(\n 'dnb-accordion__content__inner',\n createSpacingClasses(rest)\n ),\n } as HTMLProps<HTMLElement>\n\n if (expanded) {\n innerParams['aria-expanded'] = true\n }\n\n if (!expanded \|\| disabled) {\n innerParams.disabled = true\n innerParams['aria-hidden'] = true\n }\n\n // to remove spacing props\n validateDOMAttributes(props, wrapperParams)\n validateDOMAttributes(null, innerParams)\n\n const animate =\n !no_animation && (single_container ? isSmallScreen : true)\n\n return (\n <HeightAnimation\n {...wrapperParams}\n open={expanded}\n animate={animate}\n keepInDOM={keepInDOM}\n innerRef={elementRef}\n >\n <section {...innerParams}>{content}</section>\n </HeightAnimation>\n )\n}\n\nAccordionContent._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/accordion/style/dnb-accordion.css CHANGED Viewed

@@ -122,9 +122,6 @@
   width: 100%;
   margin-top: 1rem;
 }
-.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
-  display: none;
-}
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
 }

package/es/components/accordion/style/dnb-accordion.min.css CHANGED Viewed

@@ -1,3 +1,3 @@
 .dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
     --accordion-title-font-weight--expanded
-  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}
+  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

package/es/components/accordion/style/dnb-accordion.scss CHANGED Viewed

@@ -157,11 +157,6 @@
       width: 100%;
       margin-top: 1rem;
     }
-    // When "prerender" prop is true
-    &.dnb-height-animation--hidden &__inner {
-      display: none;
-    }
   }
   &-group--single-container {

package/es/components/breadcrumb/Breadcrumb.js CHANGED Viewed

@@ -13,6 +13,7 @@ import Context from '../../shared/Context';
 import BreadcrumbItem from './BreadcrumbItem';
 import { convertJsxToString, isTrue, validateDOMAttributes, extendPropsWithContext } from '../../shared/component-helper';
 import { BreadcrumbMultiple } from './BreadcrumbMultiple';
+import { useMedia } from '../../shared';
 export const defaultProps = {
   skeleton: false,
   navText: 'Back',
@@ -52,6 +53,9 @@ const Breadcrumb = localProps => {
   const skeletonClasses = createSkeletonClass('font', skeleton, context);
   const spacingClasses = createSpacingClasses(props);
   const [isCollapsed, setCollapse] = useState(overrideIsCollapsed);
+  const {
+    isLarge
+  } = useMedia();
   let currentVariant = variant;
   if (!variant) {
     if (items || data) {
@@ -63,15 +67,20 @@ const Breadcrumb = localProps => {
   useEffect(() => {
     setCollapse(overrideIsCollapsed);
   }, [overrideIsCollapsed]);
+  useEffect(() => {
+    if (isLarge && overrideIsCollapsed !== false) {
+      setCollapse(true);
+    }
+  }, [isLarge]);
   validateDOMAttributes(allProps, props);
-  const innerSpacing = isTrue(spacing) ? 'small' : spacing;
+  const innerSpace = isTrue(spacing) ? 'small' : spacing;
   return React.createElement("nav", _extends({
     "aria-label": convertJsxToString(navText),
     className: classnames(`dnb-breadcrumb dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, spacingClasses, className)
   }, props), React.createElement(Section, {
     className: "dnb-breadcrumb__bar",
     style_type: styleType || 'transparent',
-    spacing: innerSpacing
+    innerSpace: innerSpace
   }, currentVariant === 'single' ? React.createElement(Button, {
     text: goBackText,
     variant: "tertiary",

package/es/components/breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","currentVariant","innerSpacing","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"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'\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 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 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 `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 spacing={innerSpacing}\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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"}
1	+ {"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isLarge","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"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/es/components/breadcrumb/BreadcrumbItem.js CHANGED Viewed

@@ -23,7 +23,7 @@ const defaultProps = {
 const determineSbankenIcon = (variant, isSmallScreen) => {
   switch (variant) {
     case 'home':
-      return homeIcon;
+      return 'home-icon';
     case 'single':
     case 'collapse':
       return 'chevron_left';
@@ -58,13 +58,15 @@ const BreadcrumbItem = localProps => {
       max: 'medium'
     }
   });
-  const [currentIcon, setCurrentIcon] = React.useState(null);
+  const [currentIcon, setCurrentIcon] = React.useState('chevron_left');
   useLayoutEffect(() => {
     if (!icon && (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
-      const currentIcon = determineSbankenIcon(variant, isSmallScreen);
-      setCurrentIcon(currentIcon);
+      const icon = determineSbankenIcon(variant, isSmallScreen);
+      setCurrentIcon(icon);
     } else {
-      setCurrentIcon(icon || variant === 'home' && homeIcon || 'chevron_left');
+      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 || '';
@@ -72,6 +74,7 @@ const BreadcrumbItem = localProps => {
   const style = {
     '--delay': String(itemNr)
   };
+  const iconToUse = variant === 'home' || currentIcon === 'home-icon' ? homeIcon : currentIcon;
   return React.createElement("li", {
     className: "dnb-breadcrumb__item",
     "aria-current": variant === 'current' ? 'page' : undefined,
@@ -79,15 +82,15 @@ const BreadcrumbItem = localProps => {
   }, isInteractive ? React.createElement(Button, _extends({
     variant: "tertiary",
     href: href,
-    icon: currentIcon,
+    icon: iconToUse,
     icon_position: "left",
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
   }, props)) : React.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, filterProps(props, key => !key.includes('-'))), currentIcon && React.createElement(IconPrimary, {
-    icon: currentIcon,
+  }, filterProps(props, key => !key.includes('-'))), React.createElement(IconPrimary, {
+    icon: iconToUse,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {
     space: "0"

package/es/components/breadcrumb/BreadcrumbItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","filterProps","useLayoutEffect","window","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","name","currentText","isInteractive","to","style","String","createElement","className","undefined","_extends","icon_position","on_click","key","includes","space","_supportsSpacingProps"],"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 ~~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 const [currentIcon, setCurrentIcon] = React.useState(~~null~~)\n\n useLayoutEffect(() => {\n if (!icon && theme?.name === 'sbanken') {\n const ~~currentIcon~~ = determineSbankenIcon(variant, isSmallScreen)\n setCurrentIcon(~~currentIcon~~)\n } else {\n ~~setCurrentIcon(\n icon~~ \|\| (variant ~~===~~ 'home' && ~~homeIcon)~~ \|\| '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 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 ~~{currentIcon && (\n~~ <IconPrimary\n icon={~~currentIcon~~}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n ~~)}\n~~ <P space=\"0\">{currentText}</P>\n </span>\n )}\n </li>\n )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,MAAM,MAAuB,kBAAkB;AACtD,OAAOC,WAAW,MAAM,6BAA6B;AAIrD,OAAOC,CAAC,MAAM,kBAAkB;AAGhC,OAAOC,QAAQ,MAAM,kBAAkB;AAGvC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,cAAc;AACtD,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,SACEC,sBAAsB,EACtBC,WAAW,QACN,+BAA+B;AAGtC,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGX,KAAK,CAACY,SAAS,GAAGZ,KAAK,CAACU,eAAe;AA2CzE,MAAMG,YAAY,GAAG;EACnBC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,oBAA8B,GAAGA,CACrCF,OAAe,EACfG,aAAsB,KACnB;EACH,QAAQH,OAAO;IACb,KAAK,MAAM;MACT,~~OAAOd~~,~~QAAQ~~;~~IACjB~~,KAAK,QAAQ;IACb,KAAK,UAAU;MACb,OAAO,cAAc;IACvB;MACE,~~OAAOiB~~,aAAa,GAAG,cAAc,GAAG,eAAe;EAC3D;AACF,CAAC;AAED,MAAMC,cAAc,GAAIC,UAA+B,IAAK;EAE1D,MAAMC,OAAO,GAAGxB,KAAK,CAACyB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAM;IACJmB,WAAW,EAAE;MACXC,UAAU,EAAE;QAAEC;MAAS;IACzB;EACF,CAAC,GAAGJ,OAAO;EAGX,MAAAK,qBAAA,GASIrB,sBAAsB,CACxBe,UAAU,EACVV,YAAY,EACZW,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IAbK;MACJR,IAAI;MACJC,IAAI;MACJC,IAAI;MACJC,OAAO;MACPC,OAAO;MACPC,QAAQ;MACRW;IAEF,CAAC,GAAAD,qBAAA;IADIE,KAAK,GAAAC,wBAAA,CAAAH,qBAAA,EAAAI,SAAA;EAOV,MAAMC,KAAK,GAAG7B,QAAQ,CAAC,CAAC;EACxB,MAAMgB,aAAa,GAAGf,aAAa,CAAC;IAClC6B,UAAU,EAAE,IAAI;IAChBC,IAAI,EAAE;MAAEC,GAAG,EAAE;IAAS;EACxB,CAAC,CAAC;EAEF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,~~GAAGvC~~,KAAK,CAACwC,QAAQ,~~CAAC~~,~~IAAI~~,CAAC;~~EAE1D9B~~,eAAe,CAAC,MAAM;IACpB,IAAI,CAACM,IAAI,IAAI,CAAAkB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,IAAI,MAAK,SAAS,EAAE;MACtC,~~MAAMH~~,~~WAAW~~,~~GAAGlB~~,oBAAoB,CAACF,OAAO,EAAEG,aAAa,CAAC;~~MAChEkB~~,cAAc,~~CAACD~~,~~WAAW~~,CAAC;~~IAC7B~~,CAAC,MAAM;~~MACLC~~,~~cAAc~~,~~CACZvB,IAAI,IAAKE,~~OAAO,KAAK,MAAM,~~IAAId~~,~~QAAS~~,IAAI,~~cAC9C~~,CAAC;~~IACH~~;EACF,CAAC,EAAE,~~CAACY~~,IAAI,EAAEK,aAAa,EAAEa,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,IAAI,EAAEvB,OAAO,CAAC,CAAC;EAE/C,MAAMwB,WAAW,GAAG5B,IAAI,IAAKI,OAAO,KAAK,MAAM,IAAIU,QAAS,IAAI,EAAE;EAClE,MAAMe,aAAa,GACjB,CAAC5B,IAAI,IAAIE,OAAO,IAAIc,KAAK,CAACa,EAAE,KAAK1B,OAAO,KAAK,SAAS;EACxD,MAAM2B,KAAK,GAAG;IAAE,SAAS,EAAEC,MAAM,CAAChB,MAAM;EAAE,CAAwB;EAElE,~~OACE9B~~,KAAA,~~CAAA+C~~,aAAA;IACEC,SAAS,EAAC,sBAAsB;IAChC,~~gBAAc9B~~,OAAO,KAAK,SAAS,GAAG,MAAM,~~GAAG+B~~,SAAU;~~IACzDJ~~,KAAK,EAAEA;EAAM,GAEZF,aAAa,GACZ3C,KAAA,~~CAAA+C~~,aAAA,~~CAAC9C~~,MAAM,~~EAAAiD~~,QAAA;~~IACLhC~~,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAEA,IAAK;IACXC,IAAI,~~EAAEsB~~,~~WAAY~~;~~IAClBa~~,aAAa,EAAC,MAAM;IACpBC,QAAQ,~~EAAEnC~~,OAAQ;IAClBH,IAAI,EAAE4B,WAAY;IAClBvB,QAAQ,EAAEA;EAAS,GACfY,KAAK,CACV,CAAC,GAEF/B,KAAA,~~CAAA+C~~,aAAA,SAAAG,QAAA;IACEF,SAAS,EAAC;EAA4B,~~GAElCvC~~,WAAW,CAACsB,KAAK,~~EAAGsB~~,GAAG,IAAK,CAACA,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC,~~GAElDhB~~,~~WAAW,IACVtC,~~KAAA,~~CAAA+C~~,aAAA,~~CAAC7C~~,WAAW;IACVc,IAAI,~~EAAEsB~~,~~WAAY~~;~~IAClBU~~,SAAS,EAAC;EAAkC,CAC7C,~~CACF~~,~~EACDhD~~,KAAA,~~CAAA+C~~,aAAA,~~CAAC5C~~,CAAC;~~IAACoD~~,KAAK,EAAC;EAAG,~~GAAEb~~,WAAe,CACzB,CAEN,CAAC;AAET,CAAC;AAEDpB,cAAc,~~CAACkC~~,qBAAqB,GAAG,IAAI;AAE3C,~~eAAelC~~,cAAc"}
1	+ {"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","filterProps","useLayoutEffect","window","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","name","currentText","isInteractive","to","style","String","iconToUse","createElement","className","undefined","_extends","icon_position","on_click","key","includes","space","_supportsSpacingProps"],"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/es/components/card/Card.d.ts CHANGED Viewed

@@ -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/es/components/card/Card.js CHANGED Viewed

@@ -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 = ["className", "stack", "direction", "spacing", "innerSpace", "alignSelf", "divider", "children"];
+const _excluded = ["className", "stack", "direction", "spacing", "innerSpace", "alignSelf", "divider", "rowGap", "children"];
 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 React from 'react';
@@ -17,6 +17,7 @@ function Card(props) {
       innerSpace,
       alignSelf = 'stretch',
       divider = 'space',
+      rowGap,
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
@@ -42,7 +43,6 @@ function Card(props) {
   });
   const params = SectionParams(_objectSpread({
     className: classnames('dnb-card', className),
-    backgroundColor: 'white',
     breakout: trueWhenSmall,
     roundedCorner: falseWhenSmall,
     outline: true,
@@ -50,23 +50,19 @@ function Card(props) {
       small: smallSpace,
       medium: basisSpace,
       large: basisSpace
-    },
-    children
+    }
   }, rest));
-  if (stack || direction || spacing) {
-    return React.createElement(Flex.Container, _extends({
-      direction: direction !== null && direction !== void 0 ? direction : 'vertical',
-      divider: divider,
-      wrap: false,
-      spacing: spacing,
-      alignSelf: alignSelf,
-      element: "section"
-    }, params));
-  }
   return React.createElement(Flex.Item, _extends({
     alignSelf: alignSelf,
     element: "section"
-  }, params));
+  }, params), React.createElement(Flex.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;
 export default Card;

package/es/components/card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","Card","props","className","stack","direction","spacing","innerSpace","alignSelf","divider","children","rest","_objectWithoutProperties","_excluded","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","~~backgroundColor","~~breakout","roundedCorner","outline","createElement","~~Container~~","_extends","~~wrap~~","~~element~~","~~Item~~","_supportsSpacingProps"],"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":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,aAAa,~~QAAQ~~,oBAAoB;~~AAYlD~~,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;MACJC,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,OAAO;MACPC,UAAU;MACVC,SAAS,GAAG,SAAS;MACrBC,OAAO,GAAG,OAAO;MACjBC;IAEF,CAAC,~~GAAGR~~,KAAK;~~IADJS~~,IAAI,GAAAC,wBAAA,~~CACLV~~,KAAK,~~EAAAW~~,SAAA;EAET,MAAMC,cAAc,GAAG;IAAEC,KAAK,EAAE,KAAK;IAAEC,MAAM,EAAE,IAAI;IAAEC,KAAK,EAAE;EAAK,CAAC;EAClE,MAAMC,aAAa,GAAG;IAAEH,KAAK,EAAE,IAAI;IAAEC,MAAM,EAAE,KAAK;IAAEC,KAAK,EAAE;EAAM,CAAC;EAClE,MAAME,UAAU,GAAG;IACjBC,GAAG,EAAE,QAAQ;IACbC,KAAK,EAAE,QAAQ;IACfC,MAAM,EAAE,OAAO;IACfC,IAAI,EAAE;EACR,CAAC;EACD,MAAMC,UAAU,GAAAC,aAAA,CAAAA,aAAA,KACXN,UAAU;IACbE,KAAK,EAAE,CAAC;IACRE,IAAI,EAAE;EAAC,EACR;EAED,MAAMG,MAAM,~~GAAG1B~~,aAAa,~~CAAAyB~~,aAAA;~~IAC1BtB~~,SAAS,EAAEL,UAAU,CAAC,UAAU,EAAEK,SAAS,CAAC;~~IAC5CwB~~,~~eAAe,EAAE,OAAO;IACxBC,~~QAAQ,~~EAAEV~~,aAAa;~~IACvBW~~,aAAa,~~EAAEf~~,cAAc;~~IAC7BgB~~,OAAO,EAAE,IAAI;IACbvB,UAAU,EACRA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GACT;~~MACCQ~~,KAAK,EAAES,UAAU;MACjBR,MAAM,EAAEG,UAAU;MAClBF,KAAK,EAAEE;IACT~~,CAAoB~~;~~IACtBT;EAAQ~~,~~GACLC~~,IAAI,~~CACR~~,CAAC;EAEF,~~IAAIP~~,~~KAAK~~,~~IAAIC~~,SAAS,~~IAAIC~~,OAAO,~~EAAE~~;~~IACjC~~,~~OACET~~,KAAA,CAAAkC,aAAA,CAAChC,IAAI,~~CAACiC~~,SAAS~~,EAAAC,QAAA~~;~~MACb5B~~,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,UAAW;~~MACnCI~~,OAAO,EAAEA,OAAQ;~~MACjByB~~,~~IAAI,EAAE,KAAM;MACZ5B,OAAO,EAAEA,OAAQ;MACjBE,~~SAAS,EAAEA,SAAU;~~MACrB2B~~,~~OAAO~~,~~EAAC;IAAS~~,~~GACbT~~,~~MAAM,CACX,CAAC~~;~~EAEN;EAEA~~,~~OAAO7B~~,~~KAAA~~,~~CAAAkC~~,~~aAAA~~,~~CAAChC~~,~~IAAI~~,~~CAACqC~~,IAAI,~~EAAAH,QAAA~~;~~IAACzB~~,~~SAAS~~,EAAEA,~~SAAU;IAAC2B~~,~~OAAO,EAAC~~;~~EAAS~~,~~GAAKT~~,~~MAAM~~,~~CAAG~~,CAAC;~~AAC1E~~;~~AAEAzB~~,IAAI,CAACoC,qBAAqB,GAAG,IAAI;AAEjC,eAAepC,IAAI"}
1	+ {"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","Card","props","className","stack","direction","spacing","innerSpace","alignSelf","divider","rowGap","children","rest","_objectWithoutProperties","_excluded","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Container","wrap","_supportsSpacingProps"],"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":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,aAAa,QAAsB,oBAAoB;AAahE,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;MACJC,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,OAAO;MACPC,UAAU;MACVC,SAAS,GAAG,SAAS;MACrBC,OAAO,GAAG,OAAO;MACjBC,MAAM;MACNC;IAEF,CAAC,GAAGT,KAAK;IADJU,IAAI,GAAAC,wBAAA,CACLX,KAAK,EAAAY,SAAA;EAET,MAAMC,cAAc,GAAG;IAAEC,KAAK,EAAE,KAAK;IAAEC,MAAM,EAAE,IAAI;IAAEC,KAAK,EAAE;EAAK,CAAC;EAClE,MAAMC,aAAa,GAAG;IAAEH,KAAK,EAAE,IAAI;IAAEC,MAAM,EAAE,KAAK;IAAEC,KAAK,EAAE;EAAM,CAAC;EAClE,MAAME,UAAU,GAAG;IACjBC,GAAG,EAAE,QAAQ;IACbC,KAAK,EAAE,QAAQ;IACfC,MAAM,EAAE,OAAO;IACfC,IAAI,EAAE;EACR,CAAC;EACD,MAAMC,UAAU,GAAAC,aAAA,CAAAA,aAAA,KACXN,UAAU;IACbE,KAAK,EAAE,CAAC;IACRE,IAAI,EAAE;EAAC,EACR;EAED,MAAMG,MAAM,GAAG3B,aAAa,CAAA0B,aAAA;IAC1BvB,SAAS,EAAEL,UAAU,CAAC,UAAU,EAAEK,SAAS,CAAC;IAC5CyB,QAAQ,EAAET,aAAa;IACvBU,aAAa,EAAEd,cAAc;IAC7Be,OAAO,EAAE,IAAI;IACbvB,UAAU,EACRA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GACT;MACCS,KAAK,EAAES,UAAU;MACjBR,MAAM,EAAEG,UAAU;MAClBF,KAAK,EAAEE;IACT;EAAoB,GAClBR,IAAI,CACT,CAAC;EAEF,OACEf,KAAA,CAAAkC,aAAA,CAAChC,IAAI,CAACiC,IAAI,EAAAC,QAAA;IAACzB,SAAS,EAAEA,SAAU;IAAC0B,OAAO,EAAC;EAAS,GAAKP,MAAM,GAC3D9B,KAAA,CAAAkC,aAAA,CAAChC,IAAI,CAACoC,SAAS;IACb9B,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,UAAW;IACnCI,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrB4B,IAAI,EAAE,CAAChC,KAAM;IACbE,OAAO,EAAEF,KAAK,GAAG,OAAO,GAAGE,OAAO,IAAI,KAAM;IAC5CI,MAAM,EAAEA,MAAM,IAAI;EAAM,GAEvBC,QACa,CACP,CAAC;AAEhB;AAEAV,IAAI,CAACoC,qBAAqB,GAAG,IAAI;AAEjC,eAAepC,IAAI"}

package/es/components/card/style/dnb-card.css CHANGED Viewed

@@ -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/es/components/card/style/dnb-card.min.css CHANGED Viewed

	@@ -1 +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)}
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.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/es/components/card/style/dnb-card.scss CHANGED Viewed

@@ -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;
+      }
+    }
+  }
 }

package/es/components/card/style/themes/dnb-card-theme-ui.css CHANGED Viewed

@@ -2,25 +2,7 @@
  * Utilities
  */
 .dnb-card.dnb-section {
-  --background-color: var(--color-white);
   --outline-color: var(--border-color, var(--color-lavender));
   --outline-width: 0.25rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-card::before {
-    left: -100%;
-    right: -100%;
-  }
-}
-.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;
-  }
+  --background-color: var(--color-white);
 }

package/es/components/card/style/themes/dnb-card-theme-ui.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-card.dnb-section{--~~background-color:var(--color-white);--~~outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem~~}@media screen and (max~~-~~width~~:~~40em){.dnb-card:before{left:-100%;right:-100%}}.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}}
1	+ .dnb-card.dnb-section{--outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem;--background-color:var(--color-white)}