npm - @dnb/eufemia - Versions diffs - 10.46.0 → 10.48.0 - Mend

@dnb/eufemia 10.46.0 → 10.48.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 (894) hide show

package/components/flex/Container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.js","names":["React","useCallback","classnames","Space","Hr","useMedia","getSpaceValue","isHeadingElement","renderWithSpacing","propNames","pickFlexContainerProps","props","defaults","arguments","length","undefined","skip","_objectSpread","Object","fromEntries","entries","filter","_ref","key","includes","FlexContainer","_ref2","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","gap","spacing","spacingProp","breakpoints","queries","rest","_objectWithoutProperties","_excluded","childrenArray","wrapChildren","hasHeading","some","child","i","previousChild","hasSizeProp","_child$props","size","mediaKey","disabled","content","map","_previousChild$type","isFirst","isLast","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","Fragment","top","space","_ref3","_getSpaceValue3","isValidElement","type","n","getRowGapClass","cn","_extends","Children","toArray","cloneElement","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n getSpaceValue,\n isHeadingElement,\n renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\ntype Gap =\n \| false\n \| 'xx-small'\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type BasicProps = {\n direction?: 'horizontal' \| 'vertical'\n wrap?: boolean\n rowGap?: 'small' \| 'medium' \| 'large' \| boolean\n sizeCount?: number\n justify?:\n \| 'flex-start'\n \| 'flex-end'\n \| 'center'\n \| 'space-between'\n \| 'space-around'\n \| 'space-evenly'\n align?: 'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'\n /** For when used as a flex item in an outer container in addition to being a container: /\n alignSelf?: 'flex-start' \| 'flex-end' \| 'center' \| 'baseline' \| 'stretch'\n /* When \"line-framed\" is used, a line will be shown between items and above the first and below the last item /\n divider?: 'space' \| 'line' \| 'line-framed'\n /* Spacing between items inside /\n gap?: Gap\n /* @deprecated Use `gap` instead */\n spacing?: Gap\n breakpoints?: MediaQueryBreakpoints\n queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n SpaceProps &\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'ref' \| 'wrap' \| 'value' \| 'label' \| 'title' \| 'placeholder'\n >\n\nconst propNames: Array<keyof Props> = [\n 'direction',\n 'wrap',\n 'justify',\n 'align',\n 'divider',\n 'spacing',\n 'gap',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n props: T,\n defaults: Partial<Props> = {},\n skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n return {\n ...defaults,\n ...Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) =>\n propNames.includes(key as keyof Props) &&\n !skip.includes(key as keyof Props)\n )\n ),\n }\n}\n\nfunction FlexContainer(props: Props) {\n const {\n className,\n style,\n children,\n element = 'div',\n direction = 'horizontal',\n wrap = true,\n sizeCount = 12,\n rowGap,\n justify = 'flex-start',\n align = 'flex-start',\n alignSelf,\n divider = 'space',\n gap,\n spacing: spacingProp,\n breakpoints,\n queries,\n ...rest\n } = props\n\n const spacing = spacingProp ?? gap ?? 'small'\n\n const childrenArray = wrapChildren(props, children)\n const hasHeading = childrenArray.some((child, i) => {\n const previousChild = childrenArray?.[i - 1]\n return (\n isHeadingElement(child) \|\| (i > 0 && isHeadingElement(previousChild))\n )\n })\n const hasSizeProp =\n !hasHeading &&\n direction === 'horizontal' &&\n childrenArray.some((child) => child['props']?.size)\n\n const { key: mediaKey } = useMedia({\n disabled: !hasSizeProp,\n breakpoints,\n queries,\n })\n\n const content = childrenArray.map((child, i) => {\n // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n // and bottom when th\n const isFirst = i === 0\n const isLast = i >= childrenArray.length - 1\n const previousChild = childrenArray?.[i - 1]\n const isHeading = hasHeading && isHeadingElement(previousChild)\n\n // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n // having to divide spacing between both with smaller values.\n const start: Start = direction === 'horizontal' ? 'left' : 'top'\n const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n // const start: Start \| End = direction === 'horizontal' ? 'right' : 'top'\n // const end: Start \| End = direction === 'horizontal' ? 'left' : 'bottom'\n const endSpacing = 0\n let startSpacing = null\n\n if (\n // No line above heading\n !isHeading &&\n ((divider === 'line' && !isFirst) \|\| divider === 'line-framed')\n ) {\n const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n return (\n <React.Fragment key={`element-${i}`}>\n <Hr\n top={!isFirst ? spaceAboveLine : 0}\n space={0}\n className=\"dnb-flex-container__hr\"\n />\n\n {renderWithSpacing(child, {\n space: { [start]: startSpacing, [end]: endSpacing },\n })}\n\n {divider === 'line-framed' && isLast && (\n <Hr\n top={spaceAboveLine}\n space={0}\n className=\"dnb-flex-container__hr\"\n />\n )}\n </React.Fragment>\n )\n }\n\n // No space above first element.\n if (isFirst && direction !== 'horizontal') {\n startSpacing = 0\n } else {\n // Since top space of current and bottom space of previous component is the same\n startSpacing =\n getSpaceValue(start, child) ??\n getSpaceValue(end, previousChild) ??\n spacing\n }\n\n if (\n React.isValidElement(previousChild) &&\n previousChild?.type?.['_supportsSpacingProps'] === false\n ) {\n startSpacing = 0\n }\n\n const space =\n direction === 'horizontal'\n ? { [start]: endSpacing, [end]: startSpacing }\n : { [start]: startSpacing, [end]: endSpacing }\n\n return renderWithSpacing(child, {\n key: child?.['key'] \|\| `element-${i}`,\n space,\n })\n })\n\n const n = 'dnb-flex-container'\n const getRowGapClass = useCallback(() => {\n if (rowGap === false) {\n return `${n}--row-gap-off`\n }\n\n if (\n rowGap === true \|\|\n (!rowGap && wrap && direction === 'horizontal')\n ) {\n return `${n}--row-gap-small`\n }\n\n if (hasSizeProp && spacing) {\n return `${n}--row-gap-${spacing}`\n }\n\n if (rowGap) {\n return `${n}--row-gap-${rowGap}`\n }\n }, [direction, hasSizeProp, rowGap, spacing, wrap])\n\n const cn = classnames(\n 'dnb-flex-container',\n direction && `${n}--direction-${direction}`,\n justify && `${n}--justify-${justify}`,\n align && `${n}--align-${align}`,\n alignSelf && `${n}--align-self-${alignSelf}`,\n spacing && `${n}--spacing-${spacing}`,\n wrap && `${n}--wrap`,\n getRowGapClass(),\n hasSizeProp && `${n}--has-size`,\n divider && `${n}--divider-${divider}`,\n className\n )\n\n return (\n <Space\n element={element}\n className={cn}\n data-media-key={mediaKey}\n style={\n hasSizeProp\n ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n : style\n }\n {...rest}\n >\n {content}\n </Space>\n )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n return React.Children.toArray(children).map((child) => {\n if (\n React.isValidElement(child) &&\n child.type['_supportsSpacingProps'] === 'children'\n ) {\n return React.cloneElement(\n child,\n child.props,\n <FlexContainer {...props}>{child.props.children}</FlexContainer>\n )\n }\n\n return child\n })\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}
1	+ {"version":3,"file":"Container.js","names":["React","Fragment","useCallback","classnames","Space","Hr","useMedia","getSpaceValue","isHeadingElement","renderWithSpacing","propNames","pickFlexContainerProps","props","defaults","arguments","length","undefined","skip","_objectSpread","Object","fromEntries","entries","filter","_ref","key","includes","FlexContainer","_ref2","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","gap","spacing","spacingProp","breakpoints","queries","rest","_objectWithoutProperties","_excluded","childrenArray","replaceRootFragment","wrapChildren","hasHeading","some","child","i","previousChild","hasSizeProp","_child$props","size","mediaKey","disabled","content","map","_previousChild$type","isFirst","isLast","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","top","space","_ref3","_getSpaceValue3","isValidElement","type","n","getRowGapClass","cn","_extends","Children","toArray","cloneElement","firstChild","count","_firstChild$props","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n getSpaceValue,\n isHeadingElement,\n renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\ntype Gap =\n \| false\n \| 'xx-small'\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type BasicProps = {\n direction?: 'horizontal' \| 'vertical'\n wrap?: boolean\n rowGap?: 'small' \| 'medium' \| 'large' \| boolean\n sizeCount?: number\n justify?:\n \| 'flex-start'\n \| 'flex-end'\n \| 'center'\n \| 'space-between'\n \| 'space-around'\n \| 'space-evenly'\n align?: 'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'\n /** For when used as a flex item in an outer container in addition to being a container: /\n alignSelf?: 'flex-start' \| 'flex-end' \| 'center' \| 'baseline' \| 'stretch'\n /* When \"line-framed\" is used, a line will be shown between items and above the first and below the last item /\n divider?: 'space' \| 'line' \| 'line-framed'\n /* Spacing between items inside /\n gap?: Gap\n /* @deprecated Use `gap` instead */\n spacing?: Gap\n breakpoints?: MediaQueryBreakpoints\n queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n SpaceProps &\n Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'ref' \| 'wrap' \| 'value' \| 'label' \| 'title' \| 'placeholder'\n >\n\nconst propNames: Array<keyof Props> = [\n 'direction',\n 'wrap',\n 'justify',\n 'align',\n 'divider',\n 'spacing',\n 'gap',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n props: T,\n defaults: Partial<Props> = {},\n skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n return {\n ...defaults,\n ...Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) =>\n propNames.includes(key as keyof Props) &&\n !skip.includes(key as keyof Props)\n )\n ),\n }\n}\n\nfunction FlexContainer(props: Props) {\n const {\n className,\n style,\n children,\n element = 'div',\n direction = 'horizontal',\n wrap = true,\n sizeCount = 12,\n rowGap,\n justify = 'flex-start',\n align = 'flex-start',\n alignSelf,\n divider = 'space',\n gap,\n spacing: spacingProp,\n breakpoints,\n queries,\n ...rest\n } = props\n\n const spacing = spacingProp ?? gap ?? 'small'\n const childrenArray = replaceRootFragment(wrapChildren(props, children))\n const hasHeading = childrenArray.some((child, i) => {\n const previousChild = childrenArray?.[i - 1]\n return (\n isHeadingElement(child) \|\| (i > 0 && isHeadingElement(previousChild))\n )\n })\n const hasSizeProp =\n !hasHeading &&\n direction === 'horizontal' &&\n childrenArray.some((child) => child['props']?.size)\n\n const { key: mediaKey } = useMedia({\n disabled: !hasSizeProp,\n breakpoints,\n queries,\n })\n\n const content = childrenArray.map((child, i) => {\n // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n // and bottom when th\n const isFirst = i === 0\n const isLast = i >= childrenArray.length - 1\n const previousChild = childrenArray?.[i - 1]\n const isHeading = hasHeading && isHeadingElement(previousChild)\n\n // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n // having to divide spacing between both with smaller values.\n const start: Start = direction === 'horizontal' ? 'left' : 'top'\n const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n // const start: Start \| End = direction === 'horizontal' ? 'right' : 'top'\n // const end: Start \| End = direction === 'horizontal' ? 'left' : 'bottom'\n const endSpacing = 0\n let startSpacing = null\n\n if (\n // No line above heading\n !isHeading &&\n ((divider === 'line' && !isFirst) \|\| divider === 'line-framed')\n ) {\n const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n return (\n <React.Fragment key={`element-${i}`}>\n <Hr\n top={!isFirst ? spaceAboveLine : 0}\n space={0}\n className=\"dnb-flex-container__hr\"\n />\n\n {renderWithSpacing(child, {\n space: { [start]: startSpacing, [end]: endSpacing },\n })}\n\n {divider === 'line-framed' && isLast && (\n <Hr\n top={spaceAboveLine}\n space={0}\n className=\"dnb-flex-container__hr\"\n />\n )}\n </React.Fragment>\n )\n }\n\n // No space above first element.\n if (isFirst && direction !== 'horizontal') {\n startSpacing = 0\n } else {\n // Since top space of current and bottom space of previous component is the same\n startSpacing =\n getSpaceValue(start, child) ??\n getSpaceValue(end, previousChild) ??\n spacing\n }\n\n if (\n React.isValidElement(previousChild) &&\n previousChild?.type?.['_supportsSpacingProps'] === false\n ) {\n startSpacing = 0\n }\n\n const space =\n direction === 'horizontal'\n ? { [start]: endSpacing, [end]: startSpacing }\n : { [start]: startSpacing, [end]: endSpacing }\n\n return renderWithSpacing(child, {\n key: child?.['key'] \|\| `element-${i}`,\n space,\n })\n })\n\n const n = 'dnb-flex-container'\n const getRowGapClass = useCallback(() => {\n if (rowGap === false) {\n return `${n}--row-gap-off`\n }\n\n if (\n rowGap === true \|\|\n (!rowGap && wrap && direction === 'horizontal')\n ) {\n return `${n}--row-gap-small`\n }\n\n if (hasSizeProp && spacing) {\n return `${n}--row-gap-${spacing}`\n }\n\n if (rowGap) {\n return `${n}--row-gap-${rowGap}`\n }\n }, [direction, hasSizeProp, rowGap, spacing, wrap])\n\n const cn = classnames(\n 'dnb-flex-container',\n direction && `${n}--direction-${direction}`,\n justify && `${n}--justify-${justify}`,\n align && `${n}--align-${align}`,\n alignSelf && `${n}--align-self-${alignSelf}`,\n spacing && `${n}--spacing-${spacing}`,\n wrap && `${n}--wrap`,\n getRowGapClass(),\n hasSizeProp && `${n}--has-size`,\n divider && `${n}--divider-${divider}`,\n className\n )\n\n return (\n <Space\n element={element}\n className={cn}\n data-media-key={mediaKey}\n style={\n hasSizeProp\n ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n : style\n }\n {...rest}\n >\n {content}\n </Space>\n )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n return React.Children.toArray(children).map((child) => {\n if (\n React.isValidElement(child) &&\n child.type['_supportsSpacingProps'] === 'children'\n ) {\n return React.cloneElement(\n child,\n child.props,\n <FlexContainer {...props}>{child.props.children}</FlexContainer>\n )\n }\n\n return child\n })\n}\n\nfunction replaceRootFragment(children) {\n const firstChild = children[0]\n if (\n React.Children.count(children) === 1 &&\n firstChild?.type === Fragment\n ) {\n return React.Children.toArray(firstChild?.props?.children)\n }\n return children\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}

package/components/flex/utils.d.ts CHANGED Viewed

@@ -43,4 +43,4 @@ export declare function getSpaceVariant(element: React.ReactNode): any;
 export declare function renderWithSpacing(element: React.ReactNode, spaceProps: SpacingProps & {
     key?: string;
     className?: string;
-}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+}): any;

package/components/flex/utils.js CHANGED Viewed

@@ -74,6 +74,6 @@ function wrapWithSpace(_ref) {
     spaceProps,
     variant = null
   } = _ref;
-  return (variant !== null && variant !== void 0 ? variant : getSpaceVariant(element) === true) ? React.cloneElement(element, spaceProps) : React.createElement(Space, spaceProps, element);
+  return (variant !== null && variant !== void 0 ? variant : getSpaceVariant(element) === true) ? React.cloneElement(element, spaceProps) : getSpaceVariant(element) === 'children' ? renderWithSpacing(element, spaceProps) : React.createElement(Space, spaceProps, element);
 }
 //# sourceMappingURL=utils.js.map

package/components/flex/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":["React","Fragment","Space","isValidSpaceProp","removeSpaceProps","omitSpacingProps","pickSpacingProps","props","obj","key","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","space","undefined","isHeadingElement","_element$type","getSpaceVariant","_element$type2","_element$props3","check","keys","some","renderWithSpacing","spaceProps","variant","Children","toArray","map","child","_child$props","children","i","cloneElement","_objectSpread","wrapWithSpace","_ref","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { isValidSpaceProp, removeSpaceProps } from '../space/SpacingUtils'\nimport { End, Start } from './types'\n\nexport const omitSpacingProps = removeSpaceProps\n\n/*\n Picks the spacing props from the given props object.\n * @template Props - The type of the props object.\n * @param {Props} props - The props object.\n * @returns {SpacingProps} - The spacing props object.\n /\nexport function pickSpacingProps<Props extends SpacingProps>(\n props: Props\n): SpacingProps {\n const obj: SpacingProps = {}\n for (const key in props as SpacingProps) {\n if (isValidSpaceProp(key) && typeof props[key] !== 'undefined') {\n obj[key] = props[key]\n }\n }\n return obj\n}\n\n/\n Retrieves the space value of a Flex component based on the specified type and element.\n * @param type - The type of space value to retrieve (Start or End).\n * @param element - The React element to extract the space value from.\n * @returns The space value of the element, or undefined if it cannot be determined.\n /\nexport function getSpaceValue(\n type: Start \| End,\n element: React.ReactNode\n): SpaceType \| undefined {\n if (!React.isValidElement(element)) {\n return\n }\n\n return (\n element.props?.[type] ??\n (typeof element.props?.space === 'object'\n ? element.props.space[type]\n : undefined)\n )\n}\n\n/\n Checks if the provided element is a heading element.\n * @param element - The element to check.\n * @returns `true` if the element is a heading element, `false` otherwise.\n /\nexport function isHeadingElement(\n element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n return (\n React.isValidElement(element) &&\n element?.type?.['_isHeadingElement'] === true\n )\n}\n\n/\n Determines the spacing variant of a React node element.\n * @param element - The React node element to check.\n * @returns The spacing variant (true, false or \"children\") of the element, or undefined if it does not support spacing props.\n /\nexport function getSpaceVariant(element: React.ReactNode) {\n if (React.isValidElement(element)) {\n if (element?.type === Fragment) {\n return 'children'\n }\n\n const check = element?.type?.['_supportsSpacingProps']\n if (typeof check !== 'undefined') {\n return check\n }\n\n const keys = ['space', 'top', 'right', 'bottom', 'left']\n const props = element?.props ?? {}\n if (keys.some((key) => key in props)) {\n return true\n }\n }\n\n return undefined\n}\n\n/\n Renders an element with spacing props applied.\n * If the element is a component that accepts spacing props, the props are directly applied.\n * If the element is a component that has children and accepts spacing props, the props are applied to the children.\n * If the element does not accept spacing props, the element is returned as is.\n \n @param element - The element to render with spacing props.\n * @param spaceProps - The spacing props to apply.\n * @returns The rendered element with spacing props applied.\n */\nexport function renderWithSpacing(\n element: React.ReactNode,\n spaceProps: SpacingProps & { key?: string; className?: string }\n) {\n const variant = getSpaceVariant(element)\n\n if (variant === false) {\n return element\n }\n\n if (variant === 'children') {\n return React.Children.toArray(element).map(\n (child: React.ReactElement) => {\n const children = child?.props?.children\n\n return React.Children.toArray(children).map((element, i) => {\n return React.cloneElement(\n child,\n { key: i, ...child?.props },\n wrapWithSpace({ element, spaceProps })\n )\n })\n }\n )\n }\n\n return wrapWithSpace({ element, spaceProps, variant })\n}\n\nfunction wrapWithSpace({ element, spaceProps, variant = null }) {\n return variant ?? getSpaceVariant(element) === true ? (\n React.cloneElement(element as React.ReactElement, spaceProps)\n ) : (\n <Space {...spaceProps}>{element}</Space>\n )\n}\n"],"mappings":"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~~GAE7D5B~~,KAAA,CAAAyC,aAAA,CAACvC,KAAK,EAAK0B,UAAU,EAAGhB,OAAe,CACxC;AACH"}
1	+ {"version":3,"file":"utils.js","names":["React","Fragment","Space","isValidSpaceProp","removeSpaceProps","omitSpacingProps","pickSpacingProps","props","obj","key","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","space","undefined","isHeadingElement","_element$type","getSpaceVariant","_element$type2","_element$props3","check","keys","some","renderWithSpacing","spaceProps","variant","Children","toArray","map","child","_child$props","children","i","cloneElement","_objectSpread","wrapWithSpace","_ref","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { isValidSpaceProp, removeSpaceProps } from '../space/SpacingUtils'\nimport { End, Start } from './types'\n\nexport const omitSpacingProps = removeSpaceProps\n\n/*\n Picks the spacing props from the given props object.\n * @template Props - The type of the props object.\n * @param {Props} props - The props object.\n * @returns {SpacingProps} - The spacing props object.\n /\nexport function pickSpacingProps<Props extends SpacingProps>(\n props: Props\n): SpacingProps {\n const obj: SpacingProps = {}\n for (const key in props as SpacingProps) {\n if (isValidSpaceProp(key) && typeof props[key] !== 'undefined') {\n obj[key] = props[key]\n }\n }\n return obj\n}\n\n/\n Retrieves the space value of a Flex component based on the specified type and element.\n * @param type - The type of space value to retrieve (Start or End).\n * @param element - The React element to extract the space value from.\n * @returns The space value of the element, or undefined if it cannot be determined.\n /\nexport function getSpaceValue(\n type: Start \| End,\n element: React.ReactNode\n): SpaceType \| undefined {\n if (!React.isValidElement(element)) {\n return\n }\n\n return (\n element.props?.[type] ??\n (typeof element.props?.space === 'object'\n ? element.props.space[type]\n : undefined)\n )\n}\n\n/\n Checks if the provided element is a heading element.\n * @param element - The element to check.\n * @returns `true` if the element is a heading element, `false` otherwise.\n /\nexport function isHeadingElement(\n element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n return (\n React.isValidElement(element) &&\n element?.type?.['_isHeadingElement'] === true\n )\n}\n\n/\n Determines the spacing variant of a React node element.\n * @param element - The React node element to check.\n * @returns The spacing variant (true, false or \"children\") of the element, or undefined if it does not support spacing props.\n /\nexport function getSpaceVariant(element: React.ReactNode) {\n if (React.isValidElement(element)) {\n if (element?.type === Fragment) {\n return 'children'\n }\n\n const check = element?.type?.['_supportsSpacingProps']\n if (typeof check !== 'undefined') {\n return check\n }\n\n const keys = ['space', 'top', 'right', 'bottom', 'left']\n const props = element?.props ?? {}\n if (keys.some((key) => key in props)) {\n return true\n }\n }\n\n return undefined\n}\n\n/\n Renders an element with spacing props applied.\n * If the element is a component that accepts spacing props, the props are directly applied.\n * If the element is a component that has children and accepts spacing props, the props are applied to the children.\n * If the element does not accept spacing props, the element is returned as is.\n \n @param element - The element to render with spacing props.\n * @param spaceProps - The spacing props to apply.\n * @returns The rendered element with spacing props applied.\n */\nexport function renderWithSpacing(\n element: React.ReactNode,\n spaceProps: SpacingProps & { key?: string; className?: string }\n) {\n const variant = getSpaceVariant(element)\n\n if (variant === false) {\n return element\n }\n\n if (variant === 'children') {\n return React.Children.toArray(element).map(\n (child: React.ReactElement) => {\n const children = child?.props?.children\n\n return React.Children.toArray(children).map((element, i) => {\n return React.cloneElement(\n child,\n { key: i, ...child?.props },\n wrapWithSpace({ element, spaceProps })\n )\n })\n }\n )\n }\n\n return wrapWithSpace({ element, spaceProps, variant })\n}\n\nfunction wrapWithSpace({ element, spaceProps, variant = null }) {\n return variant ?? getSpaceVariant(element) === true ? (\n React.cloneElement(element as React.ReactElement, spaceProps)\n ) : getSpaceVariant(element) === 'children' ? (\n renderWithSpacing(element, spaceProps)\n ) : (\n <Space {...spaceProps}>{element}</Space>\n )\n}\n"],"mappings":"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"}

package/components/form-row/style/dnb-form-row.css CHANGED Viewed

@@ -40,7 +40,7 @@
     margin-top: 1rem;
   }
 }
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 40.0625em) {
   .dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content {
     align-items: center;
   }

package/components/form-row/style/dnb-form-row.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-form-row{align-items:baseline}.dnb-form-row,.dnb-form-row.dnb-section{display:flex}.dnb-form-row__content{display:inline-flex;flex:1;width:100%}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content{align-items:baseline}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content .dnb-form-label{white-space:nowrap}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content--wrap{display:block}@media screen and (max-width:40em){.dnb-form-row:not(.dnb-form-row--vertical){align-items:flex-start;flex-direction:column}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-label{margin-bottom:.5rem}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content{flex-direction:column}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content>.dnb-form-label{margin-top:1rem}}@media screen and (min-width:~~40em~~){.dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content{align-items:center}}.dnb-form-row--vertical>.dnb-form-row__label{margin-bottom:.5rem}.dnb-form-row--vertical-label,.dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested),.dnb-form-row--vertical>.dnb-form-row__content{flex-direction:column}.dnb-form-row>.dnb-form-status{margin:.5rem 0}.dnb-form-row>.dnb-form-row__label--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-form-row>.dnb-form-row__label--vertical~.dnb-form-row__content{grid-column:column1-start/column1-end}.dnb-form-row__label-dummy{margin:0}.dnb-core-style .dnb-form-row__fieldset,.dnb-form-row__fieldset{border:none;margin:0;padding:0;width:100%}
1	+ .dnb-form-row{align-items:baseline}.dnb-form-row,.dnb-form-row.dnb-section{display:flex}.dnb-form-row__content{display:inline-flex;flex:1;width:100%}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content{align-items:baseline}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content .dnb-form-label{white-space:nowrap}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content--wrap{display:block}@media screen and (max-width:40em){.dnb-form-row:not(.dnb-form-row--vertical){align-items:flex-start;flex-direction:column}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-label{margin-bottom:.5rem}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content{flex-direction:column}.dnb-form-row:not(.dnb-form-row--vertical)>.dnb-form-row__content>.dnb-form-label{margin-top:1rem}}@media screen and (min-width:40.0625em){.dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content{align-items:center}}.dnb-form-row--vertical>.dnb-form-row__label{margin-bottom:.5rem}.dnb-form-row--vertical-label,.dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested),.dnb-form-row--vertical>.dnb-form-row__content{flex-direction:column}.dnb-form-row>.dnb-form-status{margin:.5rem 0}.dnb-form-row>.dnb-form-row__label--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-form-row>.dnb-form-row__label--vertical~.dnb-form-row__content{grid-column:column1-start/column1-end}.dnb-form-row__label-dummy{margin:0}.dnb-core-style .dnb-form-row__fieldset,.dnb-form-row__fieldset{border:none;margin:0;padding:0;width:100%}

package/components/grid/style/dnb-grid.css CHANGED Viewed

@@ -34,12 +34,12 @@
 .dnb-grid-container--column-gap-large {
   --column-gap: var(--spacing-large);
 }
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 40.0625em) {
   .dnb-grid-container {
     --grid-columns: var(--medium-columns, 6);
   }
 }
-@media screen and (min-width: 60em) {
+@media screen and (min-width: 60.0625em) {
   .dnb-grid-container {
     --grid-columns: var(--large-columns, 12);
   }
@@ -49,12 +49,12 @@
     display: unset;
   }
 }
-@media screen and (min-width: 40em) and (max-width: 60em) {
+@media screen and (min-width: 40.0625em) and (max-width: 60em) {
   .dnb-grid-container__disabled--medium {
     display: unset;
   }
 }
-@media screen and (min-width: 72em) {
+@media screen and (min-width: 72.0625em) {
   .dnb-grid-container {
     --grid-columns: var(--large-columns, 12);
   }
@@ -68,13 +68,13 @@
   --start-c: var(--small-c-s, 1);
   --end-c: var(--small-c-e, calc(var(--grid-columns) + 1));
 }
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 40.0625em) {
   .dnb-grid-item {
     --start-c: var(--medium-c-s, 1);
     --end-c: var(--medium-c-e, calc(var(--grid-columns) + 1));
   }
 }
-@media screen and (min-width: 60em) {
+@media screen and (min-width: 60.0625em) {
   .dnb-grid-item {
     --start-c: var(--large-c-s, 1);
     --end-c: var(--large-c-e, calc(var(--grid-columns) + 1));

package/components/grid/style/dnb-grid.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-grid-container{--grid-columns:var(--small-columns,4);-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:grid;grid-auto-flow:dense;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));row-gap:var(--row-gap,0)}.dnb-grid-container--row-gap-x-small{--row-gap:var(--spacing-x-small)}.dnb-grid-container--row-gap-small{--row-gap:var(--spacing-small)}.dnb-grid-container--row-gap-medium{--row-gap:var(--spacing-medium)}.dnb-grid-container--row-gap-large{--row-gap:var(--spacing-large)}.dnb-grid-container--column-gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-grid-container--column-gap-small{--column-gap:var(--spacing-small)}.dnb-grid-container--column-gap-medium{--column-gap:var(--spacing-medium)}.dnb-grid-container--column-gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:~~40em~~){.dnb-grid-container{--grid-columns:var(--medium-columns,6)}}@media screen and (min-width:~~60em~~){.dnb-grid-container{--grid-columns:var(--large-columns,12)}}@media screen and (max-width:60em){.dnb-grid-container__disabled--small{display:unset}}@media screen and (min-width:~~40em~~) and (max-width:60em){.dnb-grid-container__disabled--medium{display:unset}}@media screen and (min-width:~~72em~~){.dnb-grid-container{--grid-columns:var(--large-columns,12)}.dnb-grid-container__disabled--large{display:unset}}.dnb-grid-item{--start-c:var(--small-c-s,1);--end-c:var(--small-c-e,calc(var(--grid-columns) + 1));grid-column:var(--start-c)/var(--end-c)}@media screen and (min-width:~~40em~~){.dnb-grid-item{--start-c:var(--medium-c-s,1);--end-c:var(--medium-c-e,calc(var(--grid-columns) + 1))}}@media screen and (min-width:~~60em~~){.dnb-grid-item{--start-c:var(--large-c-s,1);--end-c:var(--large-c-e,calc(var(--grid-columns) + 1))}}.dnb-grid-item--full-width{--start-c:0;--end-c:var(--grid-columns)}
1	+ .dnb-grid-container{--grid-columns:var(--small-columns,4);-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:grid;grid-auto-flow:dense;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));row-gap:var(--row-gap,0)}.dnb-grid-container--row-gap-x-small{--row-gap:var(--spacing-x-small)}.dnb-grid-container--row-gap-small{--row-gap:var(--spacing-small)}.dnb-grid-container--row-gap-medium{--row-gap:var(--spacing-medium)}.dnb-grid-container--row-gap-large{--row-gap:var(--spacing-large)}.dnb-grid-container--column-gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-grid-container--column-gap-small{--column-gap:var(--spacing-small)}.dnb-grid-container--column-gap-medium{--column-gap:var(--spacing-medium)}.dnb-grid-container--column-gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:40.0625em){.dnb-grid-container{--grid-columns:var(--medium-columns,6)}}@media screen and (min-width:60.0625em){.dnb-grid-container{--grid-columns:var(--large-columns,12)}}@media screen and (max-width:60em){.dnb-grid-container__disabled--small{display:unset}}@media screen and (min-width:40.0625em) and (max-width:60em){.dnb-grid-container__disabled--medium{display:unset}}@media screen and (min-width:72.0625em){.dnb-grid-container{--grid-columns:var(--large-columns,12)}.dnb-grid-container__disabled--large{display:unset}}.dnb-grid-item{--start-c:var(--small-c-s,1);--end-c:var(--small-c-e,calc(var(--grid-columns) + 1));grid-column:var(--start-c)/var(--end-c)}@media screen and (min-width:40.0625em){.dnb-grid-item{--start-c:var(--medium-c-s,1);--end-c:var(--medium-c-e,calc(var(--grid-columns) + 1))}}@media screen and (min-width:60.0625em){.dnb-grid-item{--start-c:var(--large-c-s,1);--end-c:var(--large-c-e,calc(var(--grid-columns) + 1))}}.dnb-grid-item--full-width{--start-c:0;--end-c:var(--grid-columns)}

package/components/lib.d.ts CHANGED Viewed

@@ -100,7 +100,7 @@ export declare const getComponents: () => {
     Card: typeof Card;
     Checkbox: typeof Checkbox;
     CopyOnClick: {
-        ({ children, className, disabled, showCursor, ...props }: import("./copy-on-click/types").CopyOnClickAllProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, disabled, showCursor, copyContent, ...props }: import("./copy-on-click/types").CopyOnClickAllProps): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
     };
     DatePicker: typeof DatePicker;

package/components/progress-indicator/ProgressIndicator.js CHANGED Viewed

@@ -18,7 +18,7 @@ import ProgressIndicatorLinear from './ProgressIndicatorLinear';
 import { format } from '../number-format/NumberUtils';
 import { isValidSize } from './types';
 function ProgressIndicator(props) {
-  const undeprecatedProps = handleDeprecatedBehaviour(props);
+  const undeprecatedProps = handleDeprecatedBehavior(props);
   const allProps = updatePropsWithContext(undeprecatedProps, useContext(Context));
   const {
       type = 'circular',
@@ -104,7 +104,7 @@ function updatePropsWithContext(props, context) {
   const componentPropsFromContext = context === null || context === void 0 ? void 0 : context.ProgressIndicator;
   return extendPropsWithContext(props, {}, localePropsFromContext, componentPropsFromContext);
 }
-function handleDeprecatedBehaviour(oldProps) {
+function handleDeprecatedBehavior(oldProps) {
   const {
       show_label: showDefaultLabel,
       indicator_label

package/components/progress-indicator/ProgressIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressIndicator.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","Context","isTrue","validateDOMAttributes","dispatchCustomElementEvent","extendPropsWithContext","convertSnakeCaseProps","createSpacingClasses","ProgressIndicatorCircular","ProgressIndicatorLinear","format","isValidSize","ProgressIndicator","props","undeprecatedProps","handleDeprecatedBehaviour","allProps","updatePropsWithContext","type","size","noAnimation","onComplete","label","children","indicator_label","labelDirection","showDefaultLabel","className","title","progress","visible","customColors","customCircleWidth","style","rest","_objectWithoutProperties","_excluded","remainingDOMProps","_objectSpread","sizeVariant","customSize","undefined","completeTimeout","fadeOutTimeout","complete","setCompleteState","progressNumber","parseFloat","indicatorLabel","progressTitle","formatProgress","clearTimeout","current","callOnCompleteHandler","setTimeout","createElement","_extends","toString","counterClockwise","context","localePropsFromContext","getTranslation","componentPropsFromContext","oldProps","show_label","propsToConvertToCamelCase","_excluded2","overrideExistingValue","decimals","percent","_supportsSpacingProps"],"sources":["../../../../src/components/progress-indicator/ProgressIndicator.tsx"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport classnames from 'classnames'\nimport Context, { ContextProps } from '../../shared/Context'\nimport {\n isTrue,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport ProgressIndicatorCircular from './ProgressIndicatorCircular'\nimport ProgressIndicatorLinear from './ProgressIndicatorLinear'\nimport { format } from '../number-format/NumberUtils'\n\nimport {\n ProgressIndicatorAllProps,\n ProgressIndicatorAnimationProps,\n isValidSize,\n CustomSize,\n} from './types'\n\n// deprecated, can be removed in v11\nexport type DeprecatedProgressIndicatorProps = {\n /** @deprecated use `noAnimation`. /\n no_animation?: boolean\n /* @deprecated use `labelDirection`. /\n label_direction?: string\n /* @deprecated use `showDefaultLabel`. /\n show_label?: boolean\n /* @deprecated use `onComplete`. /\n on_complete?: (...args: any[]) => any\n}\n\nfunction ProgressIndicator(\n props: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n) {\n const undeprecatedProps = handleDeprecatedBehaviour(props)\n const allProps = updatePropsWithContext(\n undeprecatedProps,\n useContext(Context)\n )\n\n const {\n type = 'circular',\n size = 'default',\n noAnimation = false,\n onComplete,\n label,\n children,\n indicator_label,\n labelDirection = 'horizontal',\n showDefaultLabel = false,\n className,\n title,\n progress,\n visible = true,\n customColors,\n customCircleWidth,\n style,\n ...rest\n } = allProps\n\n const remainingDOMProps = validateDOMAttributes(allProps, { ...rest })\n\n const [sizeVariant, customSize]: [\n ProgressIndicatorAnimationProps['size'],\n CustomSize,\n ] = isValidSize(size) ? [size, undefined] : ['custom-size', size]\n\n const completeTimeout = useRef<NodeJS.Timeout>()\n const fadeOutTimeout = useRef<NodeJS.Timeout>()\n const [complete, setCompleteState] = useState(false)\n\n const progressNumber =\n typeof progress === 'string'\n ? parseFloat(progress)\n : typeof progress === 'number'\n ? progress\n : undefined\n\n const indicatorLabel =\n label \|\| children \|\| (isTrue(showDefaultLabel) && indicator_label)\n const progressTitle = title \|\| formatProgress(progressNumber)\n\n useEffect(() => {\n return () => {\n clearTimeout(completeTimeout.current)\n clearTimeout(fadeOutTimeout.current)\n }\n }, [])\n\n useEffect(() => {\n if (visible) {\n setCompleteState(false)\n }\n }, [visible])\n\n const callOnCompleteHandler = useCallback(() => {\n completeTimeout.current = setTimeout(() => {\n setCompleteState(true)\n if (onComplete) {\n fadeOutTimeout.current = setTimeout(() => {\n dispatchCustomElementEvent({ onComplete }, 'onComplete')\n }, 600) // wait for CSS fade out, defined in \"progress-indicator-fade-out\"\n }\n }, 200)\n }, [onComplete])\n\n return (\n <span\n className={classnames(\n 'dnb-progress-indicator',\n visible && 'dnb-progress-indicator--visible',\n complete && 'dnb-progress-indicator--complete',\n type === 'linear' && 'dnb-progress-indicator--full-width',\n labelDirection && `dnb-progress-indicator--${labelDirection}`,\n sizeVariant && `dnb-progress-indicator--${sizeVariant}`,\n isTrue(noAnimation) && 'dnb-progress-indicator--no-animation',\n createSpacingClasses(allProps),\n className\n )}\n style={{\n ...style,\n ...{\n '--progress-indicator-circular-size': customSize,\n '--progress-indicator-circular-stroke-width': customCircleWidth,\n '--progress-indicator-linear-size': customSize,\n },\n }}\n {...remainingDOMProps}\n >\n {(type === 'circular' \|\| type === 'countdown') && (\n <ProgressIndicatorCircular\n size={sizeVariant}\n progress={progressNumber}\n visible={visible}\n onComplete={onComplete}\n callOnCompleteHandler={callOnCompleteHandler}\n title={progressTitle?.toString()}\n customColors={customColors}\n customCircleWidth={customCircleWidth}\n counterClockwise={type === 'countdown'}\n />\n )}\n {type === 'linear' && (\n <ProgressIndicatorLinear\n size={sizeVariant}\n progress={progressNumber}\n visible={visible}\n onComplete={onComplete}\n callOnCompleteHandler={callOnCompleteHandler}\n title={progressTitle?.toString()}\n customColors={customColors}\n />\n )}\n {indicatorLabel && (\n <span className=\"dnb-progress-indicator__label dnb-p\">\n {indicatorLabel}\n </span>\n )}\n </span>\n )\n}\n\nfunction updatePropsWithContext(\n props: ProgressIndicatorAllProps,\n context: ContextProps\n) {\n const localePropsFromContext =\n context?.getTranslation(props).ProgressIndicator\n const componentPropsFromContext = context?.ProgressIndicator\n return extendPropsWithContext(\n props,\n {},\n localePropsFromContext,\n componentPropsFromContext\n )\n}\n\n/\n Support deprecated behaviour by mutating the props.\n */\nfunction handleDeprecatedBehaviour(\n oldProps: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n): ProgressIndicatorAllProps {\n // Rename deprecated props\n // And indicator_label should still be snake case\n const {\n show_label: showDefaultLabel,\n indicator_label,\n ...propsToConvertToCamelCase\n } = oldProps\n\n // Merge deprecated props with new names (will not overwrite)\n return {\n showDefaultLabel,\n indicator_label,\n ...convertSnakeCaseProps(propsToConvertToCamelCase, {\n overrideExistingValue: false,\n }),\n }\n}\n\nfunction formatProgress(progress) {\n if (parseFloat(progress) > -1) {\n return format(progress, {\n decimals: 2,\n percent: true,\n })\n }\n return null\n}\n\nexport default ProgressIndicator\n\nProgressIndicator._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"ProgressIndicator.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","Context","isTrue","validateDOMAttributes","dispatchCustomElementEvent","extendPropsWithContext","convertSnakeCaseProps","createSpacingClasses","ProgressIndicatorCircular","ProgressIndicatorLinear","format","isValidSize","ProgressIndicator","props","undeprecatedProps","handleDeprecatedBehavior","allProps","updatePropsWithContext","type","size","noAnimation","onComplete","label","children","indicator_label","labelDirection","showDefaultLabel","className","title","progress","visible","customColors","customCircleWidth","style","rest","_objectWithoutProperties","_excluded","remainingDOMProps","_objectSpread","sizeVariant","customSize","undefined","completeTimeout","fadeOutTimeout","complete","setCompleteState","progressNumber","parseFloat","indicatorLabel","progressTitle","formatProgress","clearTimeout","current","callOnCompleteHandler","setTimeout","createElement","_extends","toString","counterClockwise","context","localePropsFromContext","getTranslation","componentPropsFromContext","oldProps","show_label","propsToConvertToCamelCase","_excluded2","overrideExistingValue","decimals","percent","_supportsSpacingProps"],"sources":["../../../../src/components/progress-indicator/ProgressIndicator.tsx"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport classnames from 'classnames'\nimport Context, { ContextProps } from '../../shared/Context'\nimport {\n isTrue,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport ProgressIndicatorCircular from './ProgressIndicatorCircular'\nimport ProgressIndicatorLinear from './ProgressIndicatorLinear'\nimport { format } from '../number-format/NumberUtils'\n\nimport {\n ProgressIndicatorAllProps,\n ProgressIndicatorAnimationProps,\n isValidSize,\n CustomSize,\n} from './types'\n\n// deprecated, can be removed in v11\nexport type DeprecatedProgressIndicatorProps = {\n /** @deprecated use `noAnimation`. /\n no_animation?: boolean\n /* @deprecated use `labelDirection`. /\n label_direction?: string\n /* @deprecated use `showDefaultLabel`. /\n show_label?: boolean\n /* @deprecated use `onComplete`. /\n on_complete?: (...args: any[]) => any\n}\n\nfunction ProgressIndicator(\n props: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n) {\n const undeprecatedProps = handleDeprecatedBehavior(props)\n const allProps = updatePropsWithContext(\n undeprecatedProps,\n useContext(Context)\n )\n\n const {\n type = 'circular',\n size = 'default',\n noAnimation = false,\n onComplete,\n label,\n children,\n indicator_label,\n labelDirection = 'horizontal',\n showDefaultLabel = false,\n className,\n title,\n progress,\n visible = true,\n customColors,\n customCircleWidth,\n style,\n ...rest\n } = allProps\n\n const remainingDOMProps = validateDOMAttributes(allProps, { ...rest })\n\n const [sizeVariant, customSize]: [\n ProgressIndicatorAnimationProps['size'],\n CustomSize,\n ] = isValidSize(size) ? [size, undefined] : ['custom-size', size]\n\n const completeTimeout = useRef<NodeJS.Timeout>()\n const fadeOutTimeout = useRef<NodeJS.Timeout>()\n const [complete, setCompleteState] = useState(false)\n\n const progressNumber =\n typeof progress === 'string'\n ? parseFloat(progress)\n : typeof progress === 'number'\n ? progress\n : undefined\n\n const indicatorLabel =\n label \|\| children \|\| (isTrue(showDefaultLabel) && indicator_label)\n const progressTitle = title \|\| formatProgress(progressNumber)\n\n useEffect(() => {\n return () => {\n clearTimeout(completeTimeout.current)\n clearTimeout(fadeOutTimeout.current)\n }\n }, [])\n\n useEffect(() => {\n if (visible) {\n setCompleteState(false)\n }\n }, [visible])\n\n const callOnCompleteHandler = useCallback(() => {\n completeTimeout.current = setTimeout(() => {\n setCompleteState(true)\n if (onComplete) {\n fadeOutTimeout.current = setTimeout(() => {\n dispatchCustomElementEvent({ onComplete }, 'onComplete')\n }, 600) // wait for CSS fade out, defined in \"progress-indicator-fade-out\"\n }\n }, 200)\n }, [onComplete])\n\n return (\n <span\n className={classnames(\n 'dnb-progress-indicator',\n visible && 'dnb-progress-indicator--visible',\n complete && 'dnb-progress-indicator--complete',\n type === 'linear' && 'dnb-progress-indicator--full-width',\n labelDirection && `dnb-progress-indicator--${labelDirection}`,\n sizeVariant && `dnb-progress-indicator--${sizeVariant}`,\n isTrue(noAnimation) && 'dnb-progress-indicator--no-animation',\n createSpacingClasses(allProps),\n className\n )}\n style={{\n ...style,\n ...{\n '--progress-indicator-circular-size': customSize,\n '--progress-indicator-circular-stroke-width': customCircleWidth,\n '--progress-indicator-linear-size': customSize,\n },\n }}\n {...remainingDOMProps}\n >\n {(type === 'circular' \|\| type === 'countdown') && (\n <ProgressIndicatorCircular\n size={sizeVariant}\n progress={progressNumber}\n visible={visible}\n onComplete={onComplete}\n callOnCompleteHandler={callOnCompleteHandler}\n title={progressTitle?.toString()}\n customColors={customColors}\n customCircleWidth={customCircleWidth}\n counterClockwise={type === 'countdown'}\n />\n )}\n {type === 'linear' && (\n <ProgressIndicatorLinear\n size={sizeVariant}\n progress={progressNumber}\n visible={visible}\n onComplete={onComplete}\n callOnCompleteHandler={callOnCompleteHandler}\n title={progressTitle?.toString()}\n customColors={customColors}\n />\n )}\n {indicatorLabel && (\n <span className=\"dnb-progress-indicator__label dnb-p\">\n {indicatorLabel}\n </span>\n )}\n </span>\n )\n}\n\nfunction updatePropsWithContext(\n props: ProgressIndicatorAllProps,\n context: ContextProps\n) {\n const localePropsFromContext =\n context?.getTranslation(props).ProgressIndicator\n const componentPropsFromContext = context?.ProgressIndicator\n return extendPropsWithContext(\n props,\n {},\n localePropsFromContext,\n componentPropsFromContext\n )\n}\n\n/\n Support deprecated behavior by mutating the props.\n */\nfunction handleDeprecatedBehavior(\n oldProps: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n): ProgressIndicatorAllProps {\n // Rename deprecated props\n // And indicator_label should still be snake case\n const {\n show_label: showDefaultLabel,\n indicator_label,\n ...propsToConvertToCamelCase\n } = oldProps\n\n // Merge deprecated props with new names (will not overwrite)\n return {\n showDefaultLabel,\n indicator_label,\n ...convertSnakeCaseProps(propsToConvertToCamelCase, {\n overrideExistingValue: false,\n }),\n }\n}\n\nfunction formatProgress(progress) {\n if (parseFloat(progress) > -1) {\n return format(progress, {\n decimals: 2,\n percent: true,\n })\n }\n return null\n}\n\nexport default ProgressIndicator\n\nProgressIndicator._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/section/style/dnb-section.css CHANGED Viewed

@@ -64,7 +64,7 @@
     );
   }
 }
-@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+@media screen and (max-width: 60em) and (min-width: 40.0625em) {
   .dnb-section {
     --breakout: var(--breakout--medium, var(--breakout--fallback));
     --background-color--value: var(--background-color--medium);
@@ -77,7 +77,7 @@
     );
   }
 }
-@media screen and (min-width: 60em) {
+@media screen and (min-width: 60.0625em) {
   .dnb-section {
     --breakout: var(--breakout--large, var(--breakout--fallback));
     --background-color--value: var(--background-color--large);

package/components/section/style/dnb-section.min.css CHANGED Viewed

@@ -1,7 +1,7 @@
 .dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
-    )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
+    )}}@media screen and (max-width:60em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)
-    )}}@media screen and (min-width:60em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
+    )}}@media screen and (min-width:60.0625em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
       --rounded-corner--large,var(--rounded-corner--fallback)
     )}}.dnb-section .dnb-section:after{z-index:-14}.dnb-section .dnb-section .dnb-section:after{z-index:-13}.dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.dnb-section--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.dnb-section--spacing,.dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}

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

@@ -581,7 +581,7 @@
     --padding-bottom: var(--space-b-s);
   }
 }
-@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+@media screen and (max-width: 60em) and (min-width: 40.0625em) {
   .dnb-space {
     --padding-right: var(--space-r-m);
     --padding-left: var(--space-l-m);
@@ -589,7 +589,7 @@
     --padding-bottom: var(--space-b-m);
   }
 }
-@media screen and (min-width: 60em) {
+@media screen and (min-width: 60.0625em) {
   .dnb-space {
     --padding-right: var(--space-r-l);
     --padding-left: var(--space-l-l);

package/components/space/style/dnb-space.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-core-style .dnb-space__top--zero{margin-top:0}.dnb-core-style .dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-core-style .dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-core-style .dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-core-style .dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-core-style .dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-core-style .dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--zero{margin-right:0}.dnb-core-style .dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-core-style .dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-core-style .dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-core-style .dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-core-style .dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-core-style .dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--zero{margin-bottom:0}.dnb-core-style .dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-core-style .dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-core-style .dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-core-style .dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-core-style .dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--zero{margin-left:0}.dnb-core-style .dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-core-style .dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-core-style .dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-core-style .dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-core-style .dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-core-style .dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space--no-collapse{display:flow-root}.dnb-space--stretch{width:100%}.dnb-space--inline{display:inline-block}.dnb-space__top--zero{margin-top:0}.dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-space__top--xx-large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__top--xx-large.dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__top--xx-large.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--zero{margin-right:0}.dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-space__right--xx-large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__right--xx-large.dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__right--xx-large.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--zero{margin-bottom:0}.dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-space__bottom--xx-large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__bottom--xx-large.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--zero{margin-left:0}.dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-space__left--xx-large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__left--xx-large.dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__left--xx-large.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__reset:not([class=dnb-space__top]){margin-top:0}.dnb-space__reset:not([class=dnb-space__bottom]){margin-bottom:0}.dnb-space__reset:not([class=dnb-space__left]){margin-left:0}.dnb-space__reset:not([class=dnb-space__right]){margin-right:0}.dnb-space[style="--space-t-"]{padding-top:var(--padding-top,0)}.dnb-space[style="--space-r-"]{padding-right:var(--padding-right,0)}.dnb-space[style="--space-b-"]{padding-bottom:var(--padding-bottom,0)}.dnb-space[style="--space-l-"]{padding-left:var(--padding-left,0)}@media screen and (max-width:60em){.dnb-space{--padding-right:var(--space-r-s);--padding-left:var(--space-l-s);--padding-top:var(--space-t-s);--padding-bottom:var(--space-b-s)}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-space{--padding-right:var(--space-r-m);--padding-left:var(--space-l-m);--padding-top:var(--space-t-m);--padding-bottom:var(--space-b-m)}}@media screen and (min-width:60em){.dnb-space{--padding-right:var(--space-r-l);--padding-left:var(--space-l-l);--padding-top:var(--space-t-l);--padding-bottom:var(--space-b-l)}}span.dnb-space--no-collapse>span{display:block}
1	+ .dnb-core-style .dnb-space__top--zero{margin-top:0}.dnb-core-style .dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-core-style .dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-core-style .dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-core-style .dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-core-style .dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-core-style .dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--zero{margin-right:0}.dnb-core-style .dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-core-style .dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-core-style .dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-core-style .dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-core-style .dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-core-style .dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--zero{margin-bottom:0}.dnb-core-style .dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-core-style .dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-core-style .dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-core-style .dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-core-style .dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--zero{margin-left:0}.dnb-core-style .dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-core-style .dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-core-style .dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-core-style .dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-core-style .dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-core-style .dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space--no-collapse{display:flow-root}.dnb-space--stretch{width:100%}.dnb-space--inline{display:inline-block}.dnb-space__top--zero{margin-top:0}.dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-space__top--xx-large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__top--xx-large.dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__top--xx-large.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--zero{margin-right:0}.dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-space__right--xx-large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__right--xx-large.dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__right--xx-large.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--zero{margin-bottom:0}.dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-space__bottom--xx-large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__bottom--xx-large.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--zero{margin-left:0}.dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-space__left--xx-large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__left--xx-large.dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__left--xx-large.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__reset:not([class=dnb-space__top]){margin-top:0}.dnb-space__reset:not([class=dnb-space__bottom]){margin-bottom:0}.dnb-space__reset:not([class=dnb-space__left]){margin-left:0}.dnb-space__reset:not([class=dnb-space__right]){margin-right:0}.dnb-space[style="--space-t-"]{padding-top:var(--padding-top,0)}.dnb-space[style="--space-r-"]{padding-right:var(--padding-right,0)}.dnb-space[style="--space-b-"]{padding-bottom:var(--padding-bottom,0)}.dnb-space[style="--space-l-"]{padding-left:var(--padding-left,0)}@media screen and (max-width:60em){.dnb-space{--padding-right:var(--space-r-s);--padding-left:var(--space-l-s);--padding-top:var(--space-t-s);--padding-bottom:var(--space-b-s)}}@media screen and (max-width:60em) and (min-width:40.0625em){.dnb-space{--padding-right:var(--space-r-m);--padding-left:var(--space-l-m);--padding-top:var(--space-t-m);--padding-bottom:var(--space-b-m)}}@media screen and (min-width:60.0625em){.dnb-space{--padding-right:var(--space-r-l);--padding-left:var(--space-l-l);--padding-top:var(--space-t-l);--padding-bottom:var(--space-b-l)}}span.dnb-space--no-collapse>span{display:block}

package/components/tabs/Tabs.js CHANGED Viewed

@@ -126,7 +126,7 @@ export default class Tabs extends React.PureComponent {
     _this = this;
     _defineProperty(this, "init", () => {
       if (this._isMounted) {
-        this.addScrollBehaviour();
+        this.addScrollBehavior();
         const hasScrollbar = this.hasScrollbar();
         const hasLastPosition = this.hasLastPosition();
         this.setScrollbarState({
@@ -652,7 +652,7 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
   hasScrollbar() {
     return this._tablistRef.current.scrollWidth - 1 > this._tablistRef.current.offsetWidth;
   }
-  addScrollBehaviour() {
+  addScrollBehavior() {
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.onResizeHandler);
     }