npm - @dnb/eufemia - Versions diffs - 10.31.0 → 10.33.0 - Mend

@dnb/eufemia 10.31.0 → 10.33.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 (846) hide show

package/es/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","skip","_objectSpread","Object","fromEntries","entries","filter","key","includes","FlexContainer","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","spacing","breakpoints","queries","rest","_objectWithoutProperties","_excluded","childrenArray","wrapChildren","hasHeading","some","child","i","previousChild","hasSizeProp","_child$props","size","mediaKey","disabled","content","map","_previousChild$type","isFirst","isLast","length","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","Fragment","top","space","_ref","_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\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 spacing?:\n \| false\n \| 'xx-small'\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\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]\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 spacing = 'small',\n breakpoints,\n queries,\n ...rest\n } = props\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","useCallback","classnames","Space","Hr","useMedia","getSpaceValue","isHeadingElement","renderWithSpacing","propNames","pickFlexContainerProps","props","defaults","skip","_objectSpread","Object","fromEntries","entries","filter","key","includes","FlexContainer","_ref","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","length","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","Fragment","top","space","_ref2","_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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"}

package/es/components/flex/Stack.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "direction", "alignSelf", "align", "spacing", "children"];
+const _excluded = ["className", "direction", "alignSelf", "align", "gap", "children"];
 import React from 'react';
 import classnames from 'classnames';
 import Container from './Container';
@@ -10,7 +10,7 @@ function Stack(props) {
       direction = 'vertical',
       alignSelf = 'stretch',
       align = 'stretch',
-      spacing = props.divider !== 'line' && props.divider !== 'line-framed' ? 'medium' : 'small',
+      gap = props.divider !== 'line' && props.divider !== 'line-framed' ? 'medium' : 'small',
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
@@ -20,7 +20,7 @@ function Stack(props) {
     direction: direction,
     alignSelf: alignSelf,
     align: align,
-    spacing: spacing
+    gap: gap
   }, rest), children);
 }
 Stack._supportsSpacingProps = true;

package/es/components/flex/Stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.js","names":["React","classnames","Container","Stack","props","className","direction","alignSelf","align","~~spacing~~","divider","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","element","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Stack.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Container from './Container'\nimport type { Props as FlexContainerProps } from './Container'\n\nexport type Props = FlexContainerProps\n\nfunction Stack(props: Props) {\n const {\n className,\n direction = 'vertical',\n alignSelf = 'stretch',\n align = 'stretch',\n ~~spacing~~ = props.divider !== 'line' && props.divider !== 'line-framed'\n ? 'medium'\n : 'small',\n children,\n ...rest\n } = props\n\n return (\n <Container\n element=\"section\"\n className={classnames('dnb-flex-stack', className)}\n direction={direction}\n alignSelf={alignSelf}\n align={align}\n ~~spacing~~={~~spacing~~}\n {...rest}\n >\n {children}\n </Container>\n )\n}\n\nStack._supportsSpacingProps = true\n\nexport default Stack\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,aAAa;AAKnC,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAM;MACJC,SAAS;MACTC,SAAS,GAAG,UAAU;MACtBC,SAAS,GAAG,SAAS;MACrBC,KAAK,GAAG,SAAS;MACjBC,~~OAAO~~,GAAGL,KAAK,CAACM,OAAO,KAAK,MAAM,IAAIN,KAAK,CAACM,OAAO,KAAK,aAAa,~~GACjE~~,QAAQ,GACR,OAAO;MACXC;IAEF,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACb,SAAS,EAAAc,QAAA;IACRC,OAAO,EAAC,SAAS;IACjBZ,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,~~OAAO~~,EAAEA;~~EAAQ~~,~~GACbG~~,IAAI,GAEPD,QACQ,CAAC;AAEhB;AAEAR,KAAK,CAACe,qBAAqB,GAAG,IAAI;AAElC,eAAef,KAAK"}
1	+ {"version":3,"file":"Stack.js","names":["React","classnames","Container","Stack","props","className","direction","alignSelf","align","gap","divider","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","element","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Stack.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Container from './Container'\nimport type { Props as FlexContainerProps } from './Container'\n\nexport type Props = FlexContainerProps\n\nfunction Stack(props: Props) {\n const {\n className,\n direction = 'vertical',\n alignSelf = 'stretch',\n align = 'stretch',\n gap = props.divider !== 'line' && props.divider !== 'line-framed'\n ? 'medium'\n : 'small',\n children,\n ...rest\n } = props\n\n return (\n <Container\n element=\"section\"\n className={classnames('dnb-flex-stack', className)}\n direction={direction}\n alignSelf={alignSelf}\n align={align}\n gap={gap}\n {...rest}\n >\n {children}\n </Container>\n )\n}\n\nStack._supportsSpacingProps = true\n\nexport default Stack\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,aAAa;AAKnC,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAM;MACJC,SAAS;MACTC,SAAS,GAAG,UAAU;MACtBC,SAAS,GAAG,SAAS;MACrBC,KAAK,GAAG,SAAS;MACjBC,GAAG,GAAGL,KAAK,CAACM,OAAO,KAAK,MAAM,IAAIN,KAAK,CAACM,OAAO,KAAK,aAAa,GAC7D,QAAQ,GACR,OAAO;MACXC;IAEF,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACb,SAAS,EAAAc,QAAA;IACRC,OAAO,EAAC,SAAS;IACjBZ,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,GAAG,EAAEA;EAAI,GACLG,IAAI,GAEPD,QACQ,CAAC;AAEhB;AAEAR,KAAK,CAACe,qBAAqB,GAAG,IAAI;AAElC,eAAef,KAAK"}

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

@@ -3,16 +3,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { Fragment } from 'react';
 import Space from '../space/Space';
-import { removeSpaceProps } from '../space/SpacingUtils';
+import { isValidSpaceProp, removeSpaceProps } from '../space/SpacingUtils';
 export const omitSpacingProps = removeSpaceProps;
 export function pickSpacingProps(props) {
-  return {
-    space: props === null || props === void 0 ? void 0 : props.space,
-    top: props === null || props === void 0 ? void 0 : props.top,
-    bottom: props === null || props === void 0 ? void 0 : props.bottom,
-    left: props === null || props === void 0 ? void 0 : props.left,
-    right: props === null || props === void 0 ? void 0 : props.right
-  };
+  const obj = {};
+  for (const key in props) {
+    if (isValidSpaceProp(key) && typeof props[key] !== 'undefined') {
+      obj[key] = props[key];
+    }
+  }
+  return obj;
 }
 export function getSpaceValue(type, element) {
   var _element$props$type, _element$props, _element$props2;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":["React","Fragment","Space","removeSpaceProps","omitSpacingProps","pickSpacingProps","props","~~space~~","~~top~~","~~bottom","left","right","~~getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","undefined","isHeadingElement","_element$type","getSpaceVariant","_element$type2","_element$props3","check","keys","some","~~key","~~renderWithSpacing","spaceProps","variant","Children","toArray","map","child","_child$props","children","i","cloneElement","_objectSpread","wrapWithSpace","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 { 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 ~~return~~ {\n ~~space:~~ props~~?.space,\~~n ~~top:~~ props~~?.top,\n bottom:~~ ~~props?.bottom,\~~n ~~left:~~ props~~?.left,\~~n ~~right: props?.right,\~~n }\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":";;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,SAASC,gBAAgB,QAAQ,uBAAuB;~~AAGxD~~,OAAO,MAAMC,gBAAgB,GAAGD,gBAAgB;AAQhD,OAAO,SAASE,gBAAgBA,CAC9BC,KAAY,EACE;EACd,~~OAAO;IACLC~~,~~KAAK~~,~~EAAED~~,~~KAAK~~,~~aAALA~~,KAAK,~~uBAALA~~,~~KAAK,CAAEC,KAAK;IACnBC,~~GAAG,~~EAAEF~~,KAAK,~~aAALA~~,~~KAAK~~,~~uBAALA~~,~~KAAK~~,~~CAAEE,~~GAAG~~;IACfC~~,~~MAAM~~,~~EAAEH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,MAAM;IACrBC,~~IAAI,~~EAAEJ~~,KAAK,~~aAALA~~,~~KAAK~~,~~uBAALA~~,KAAK,~~CAAEI~~,~~IAAI~~;~~IACjBC~~,~~KAAK~~,~~EAAEL~~,~~KAAK~~,~~aAALA~~,KAAK,~~uBAALA~~,~~KAAK~~,~~CAAEK~~;~~EAChB~~,~~CAAC~~;~~AACH~~;AAQA,OAAO,~~SAASC~~,aAAaA,CAC3BC,IAAiB,EACjBC,OAAwB,EACD;EAAA,IAAAC,mBAAA,EAAAC,cAAA,EAAAC,eAAA;EACvB,IAAI,~~CAACjB~~,KAAK,~~CAACkB~~,cAAc,CAACJ,OAAO,CAAC,EAAE;IAClC;EACF;EAEA,QAAAC,mBAAA,IAAAC,cAAA,GACEF,OAAO,~~CAACR~~,KAAK,~~cAAAU~~,cAAA,uBAAbA,cAAA,CAAgBH,IAAI,CAAC,cAAAE,mBAAA,cAAAA,mBAAA,GACpB,SAAAE,eAAA,GAAOH,OAAO,~~CAACR~~,KAAK,~~cAAAW~~,eAAA,uBAAbA,eAAA,~~CAAeV~~,KAAK,MAAK,QAAQ,~~GACrCO~~,OAAO,~~CAACR~~,KAAK,~~CAACC~~,KAAK,~~CAACM~~,IAAI,CAAC,~~GACzBM~~,SAAS;AAEjB;AAOA,OAAO,SAASC,gBAAgBA,~~CAC9BN~~,OAA0D,EACjD;EAAA,~~IAAAO~~,aAAA;EACT,~~OACErB~~,KAAK,~~CAACkB~~,cAAc,CAACJ,OAAO,CAAC,IAC7B,CAAAA,OAAO,aAAPA,OAAO,~~wBAAAO~~,aAAA,~~GAAPP~~,OAAO,CAAED,IAAI,~~cAAAQ~~,aAAA,uBAAbA,aAAA,CAAgB,mBAAmB,CAAC,MAAK,IAAI;AAEjD;AAOA,OAAO,SAASC,eAAeA,~~CAACR~~,OAAwB,EAAE;EACxD,~~IAAId~~,KAAK,~~CAACkB~~,cAAc,CAACJ,OAAO,CAAC,EAAE;IAAA,~~IAAAS~~,cAAA,EAAAC,eAAA;IACjC,IAAI,~~CAAAV~~,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAED,IAAI,~~MAAKZ~~,QAAQ,EAAE;MAC9B,OAAO,UAAU;IACnB;IAEA,~~MAAMwB~~,KAAK,~~GAAGX~~,OAAO,aAAPA,OAAO,~~wBAAAS~~,cAAA,~~GAAPT~~,OAAO,CAAED,IAAI,~~cAAAU~~,cAAA,uBAAbA,cAAA,CAAgB,uBAAuB,CAAC;IACtD,IAAI,OAAOE,KAAK,KAAK,WAAW,EAAE;MAChC,OAAOA,KAAK;IACd;IAEA,MAAMC,IAAI,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACxD,~~MAAMpB~~,KAAK,~~IAAAkB~~,eAAA,~~GAAGV~~,OAAO,aAAPA,OAAO,uBAAPA,OAAO,~~CAAER~~,KAAK,~~cAAAkB~~,eAAA,cAAAA,eAAA,GAAI,CAAC,CAAC;IAClC,IAAIE,IAAI,CAACC,IAAI,~~CAAEC~~,GAAG,IAAKA,GAAG,~~IAAItB~~,KAAK,CAAC,EAAE;MACpC,OAAO,IAAI;IACb;EACF;EAEA,~~OAAOa~~,SAAS;AAClB;AAYA,OAAO,~~SAASU~~,iBAAiBA,CAC/Bf,OAAwB,EACxBgB,UAA+D,EAC/D;EACA,MAAMC,OAAO,~~GAAGT~~,eAAe,~~CAACR~~,OAAO,CAAC;EAExC,IAAIiB,OAAO,KAAK,KAAK,EAAE;IACrB,OAAOjB,OAAO;EAChB;EAEA,IAAIiB,OAAO,KAAK,UAAU,EAAE;IAC1B,~~OAAO/B~~,KAAK,~~CAACgC~~,QAAQ,CAACC,OAAO,CAACnB,OAAO,CAAC,CAACoB,GAAG,CACvCC,KAAyB,IAAK;MAAA,IAAAC,YAAA;MAC7B,MAAMC,QAAQ,GAAGF,KAAK,aAALA,KAAK,wBAAAC,YAAA,GAALD,KAAK,~~CAAE7B~~,KAAK,~~cAAA8B~~,YAAA,uBAAZA,YAAA,CAAcC,QAAQ;MAEvC,~~OAAOrC~~,KAAK,~~CAACgC~~,QAAQ,CAACC,OAAO,CAACI,QAAQ,CAAC,CAACH,GAAG,CAAC,CAACpB,OAAO,EAAEwB,CAAC,KAAK;QAC1D,~~OAAOtC~~,KAAK,~~CAACuC~~,YAAY,CACvBJ,KAAK,EAAAK,aAAA;~~UACHZ~~,GAAG,~~EAAEU~~;QAAC,GAAKH,KAAK,aAALA,KAAK,uBAALA,KAAK,~~CAAE7B~~,KAAK,~~GACzBmC~~,aAAa,CAAC;UAAE3B,OAAO;UAAEgB;QAAW,CAAC,CACvC,CAAC;MACH,CAAC,CAAC;IACJ,CACF,CAAC;EACH;EAEA,OAAOW,aAAa,CAAC;IAAE3B,OAAO;IAAEgB,UAAU;IAAEC;EAAQ,CAAC,CAAC;AACxD;AAEA,SAASU,aAAaA,CAAC;EAAE3B,OAAO;EAAEgB,UAAU;EAAEC,OAAO,GAAG;AAAK,CAAC,EAAE;EAC9D,OAAO,CAAAA,OAAO,aAAPA,OAAO,cAAPA,OAAO,~~GAAIT~~,eAAe,~~CAACR~~,OAAO,CAAC,KAAK,IAAI,~~IACjDd~~,KAAK,~~CAACuC~~,YAAY,CAACzB,OAAO,EAAwBgB,UAAU,CAAC,~~GAE7D9B~~,KAAA,~~CAAA0C~~,aAAA,~~CAACxC~~,KAAK,~~EAAK4B~~,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","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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"}

package/es/components/grid/Container.d.ts CHANGED Viewed

@@ -7,8 +7,8 @@ export type Media = {
 };
 export type BasicProps = {
     columns?: Media | Columns;
-    rowGap?: 'small' | 'medium' | 'large' | boolean;
-    columnGap?: 'small' | 'medium' | 'large' | boolean;
+    rowGap?: 'x-small' | 'small' | 'medium' | 'large' | boolean;
+    columnGap?: 'x-small' | 'small' | 'medium' | 'large' | boolean;
 };
 export type AllProps = BasicProps & SpaceAllProps;
 declare function GridContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;

package/es/components/grid/Container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.js","names":["React","classnames","Space","GridContainer","props","columns","rowGap","columnGap","style","className","children","element","rest","_objectWithoutProperties","_excluded","styleObj","_objectSpread","compute","n","unsetClasses","prop","disableClass","replace","push","cn","createElement","_extends","_supportsSpacingProps","result","small","medium","large","media","_columns","value"],"sources":["../../../../src/components/grid/Container.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceAllProps } from '../space/Space'\n\nexport type Columns = number\n\nexport type Media = {\n small?: Columns \| false\n medium?: Columns \| false\n large?: Columns \| false\n}\n\nexport type BasicProps = {\n columns?: Media \| Columns\n rowGap?: 'small' \| 'medium' \| 'large' \| boolean\n columnGap?: 'small' \| 'medium' \| 'large' \| boolean\n}\n\nexport type AllProps = BasicProps & SpaceAllProps\n\nfunction GridContainer(props: AllProps) {\n const {\n columns,\n rowGap,\n columnGap,\n style,\n className,\n children,\n element = 'div',\n ...rest\n } = props\n\n const styleObj = {\n ...compute(columns),\n ...style,\n }\n\n const n = 'dnb-grid-container'\n\n const unsetClasses = []\n for (const prop in styleObj) {\n if (styleObj[prop] === 'unset') {\n const disableClass = `${n}__disabled--${prop.replace(\n /--([a-z]+)-.*/,\n '$1'\n )}`\n unsetClasses.push(disableClass)\n }\n }\n\n const cn = classnames(\n n,\n className,\n columnGap &&\n `${n}--column-gap-${columnGap === true ? 'small' : columnGap}`,\n rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`,\n unsetClasses\n )\n\n return (\n <Space element={element} className={cn} style={styleObj} {...rest}>\n {children}\n </Space>\n )\n}\n\nGridContainer._supportsSpacingProps = true\n\nexport default GridContainer\n\nfunction compute(columns) {\n if (!columns) {\n return null\n }\n\n const result = {}\n\n if (typeof columns === 'number') {\n columns = {\n small: columns,\n medium: columns,\n large: columns,\n }\n }\n\n for (const media in columns) {\n const value = columns?.[media]\n result[`--${media}-columns`] = value \|\| 'unset'\n }\n\n return result\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAyB,gBAAgB;AAkBrD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAM;MACJC,OAAO;MACPC,MAAM;MACNC,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,OAAO,GAAG;IAEZ,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,MAAMC,QAAQ,GAAAC,aAAA,CAAAA,aAAA,KACTC,OAAO,CAACZ,OAAO,CAAC,GAChBG,KAAK,CACT;EAED,MAAMU,CAAC,GAAG,oBAAoB;EAE9B,MAAMC,YAAY,GAAG,EAAE;EACvB,KAAK,MAAMC,IAAI,IAAIL,QAAQ,EAAE;IAC3B,IAAIA,QAAQ,CAACK,IAAI,CAAC,KAAK,OAAO,EAAE;MAC9B,MAAMC,YAAY,GAAI,GAAEH,CAAE,eAAcE,IAAI,CAACE,OAAO,CAClD,eAAe,EACf,IACF,CAAE,EAAC;MACHH,YAAY,CAACI,IAAI,CAACF,YAAY,CAAC;IACjC;EACF;EAEA,MAAMG,EAAE,GAAGvB,UAAU,CACnBiB,CAAC,EACDT,SAAS,EAITU,YAAY,EAHZZ,SAAS,IACN,GAAEW,CAAE,gBAAeX,SAAS,KAAK,IAAI,GAAG,OAAO,GAAGA,SAAU,EAAC,EAChED,MAAM,IAAK,GAAEY,CAAE,aAAYZ,MAAM,KAAK,IAAI,GAAG,OAAO,GAAGA,MAAO,EAEhE,CAAC;EAED,OACEN,KAAA,CAAAyB,aAAA,CAACvB,KAAK,EAAAwB,QAAA;IAACf,OAAO,EAAEA,OAAQ;IAACF,SAAS,EAAEe,EAAG;IAAChB,KAAK,EAAEO;EAAS,GAAKH,IAAI,GAC9DF,QACI,CAAC;AAEZ;AAEAP,aAAa,CAACwB,qBAAqB,GAAG,IAAI;AAE1C,eAAexB,aAAa;AAE5B,SAASc,OAAOA,CAACZ,OAAO,EAAE;EACxB,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,MAAMuB,MAAM,GAAG,CAAC,CAAC;EAEjB,IAAI,OAAOvB,OAAO,KAAK,QAAQ,EAAE;IAC/BA,OAAO,GAAG;MACRwB,KAAK,EAAExB,OAAO;MACdyB,MAAM,EAAEzB,OAAO;MACf0B,KAAK,EAAE1B;IACT,CAAC;EACH;EAEA,KAAK,MAAM2B,KAAK,IAAI3B,OAAO,EAAE;IAAA,IAAA4B,QAAA;IAC3B,MAAMC,KAAK,IAAAD,QAAA,GAAG5B,OAAO,cAAA4B,QAAA,uBAAPA,QAAA,CAAUD,KAAK,CAAC;IAC9BJ,MAAM,CAAE,KAAII,KAAM,UAAS,CAAC,GAAGE,KAAK,IAAI,OAAO;EACjD;EAEA,OAAON,MAAM;AACf"}
1	+ {"version":3,"file":"Container.js","names":["React","classnames","Space","GridContainer","props","columns","rowGap","columnGap","style","className","children","element","rest","_objectWithoutProperties","_excluded","styleObj","_objectSpread","compute","n","unsetClasses","prop","disableClass","replace","push","cn","createElement","_extends","_supportsSpacingProps","result","small","medium","large","media","_columns","value"],"sources":["../../../../src/components/grid/Container.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceAllProps } from '../space/Space'\n\nexport type Columns = number\n\nexport type Media = {\n small?: Columns \| false\n medium?: Columns \| false\n large?: Columns \| false\n}\n\nexport type BasicProps = {\n columns?: Media \| Columns\n rowGap?: 'x-small' \| 'small' \| 'medium' \| 'large' \| boolean\n columnGap?: 'x-small' \| 'small' \| 'medium' \| 'large' \| boolean\n}\n\nexport type AllProps = BasicProps & SpaceAllProps\n\nfunction GridContainer(props: AllProps) {\n const {\n columns,\n rowGap,\n columnGap,\n style,\n className,\n children,\n element = 'div',\n ...rest\n } = props\n\n const styleObj = {\n ...compute(columns),\n ...style,\n }\n\n const n = 'dnb-grid-container'\n\n const unsetClasses = []\n for (const prop in styleObj) {\n if (styleObj[prop] === 'unset') {\n const disableClass = `${n}__disabled--${prop.replace(\n /--([a-z]+)-.*/,\n '$1'\n )}`\n unsetClasses.push(disableClass)\n }\n }\n\n const cn = classnames(\n n,\n className,\n columnGap &&\n `${n}--column-gap-${columnGap === true ? 'small' : columnGap}`,\n rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`,\n unsetClasses\n )\n\n return (\n <Space element={element} className={cn} style={styleObj} {...rest}>\n {children}\n </Space>\n )\n}\n\nGridContainer._supportsSpacingProps = true\n\nexport default GridContainer\n\nfunction compute(columns) {\n if (!columns) {\n return null\n }\n\n const result = {}\n\n if (typeof columns === 'number') {\n columns = {\n small: columns,\n medium: columns,\n large: columns,\n }\n }\n\n for (const media in columns) {\n const value = columns?.[media]\n result[`--${media}-columns`] = value \|\| 'unset'\n }\n\n return result\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAyB,gBAAgB;AAkBrD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAM;MACJC,OAAO;MACPC,MAAM;MACNC,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,OAAO,GAAG;IAEZ,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,MAAMC,QAAQ,GAAAC,aAAA,CAAAA,aAAA,KACTC,OAAO,CAACZ,OAAO,CAAC,GAChBG,KAAK,CACT;EAED,MAAMU,CAAC,GAAG,oBAAoB;EAE9B,MAAMC,YAAY,GAAG,EAAE;EACvB,KAAK,MAAMC,IAAI,IAAIL,QAAQ,EAAE;IAC3B,IAAIA,QAAQ,CAACK,IAAI,CAAC,KAAK,OAAO,EAAE;MAC9B,MAAMC,YAAY,GAAI,GAAEH,CAAE,eAAcE,IAAI,CAACE,OAAO,CAClD,eAAe,EACf,IACF,CAAE,EAAC;MACHH,YAAY,CAACI,IAAI,CAACF,YAAY,CAAC;IACjC;EACF;EAEA,MAAMG,EAAE,GAAGvB,UAAU,CACnBiB,CAAC,EACDT,SAAS,EAITU,YAAY,EAHZZ,SAAS,IACN,GAAEW,CAAE,gBAAeX,SAAS,KAAK,IAAI,GAAG,OAAO,GAAGA,SAAU,EAAC,EAChED,MAAM,IAAK,GAAEY,CAAE,aAAYZ,MAAM,KAAK,IAAI,GAAG,OAAO,GAAGA,MAAO,EAEhE,CAAC;EAED,OACEN,KAAA,CAAAyB,aAAA,CAACvB,KAAK,EAAAwB,QAAA;IAACf,OAAO,EAAEA,OAAQ;IAACF,SAAS,EAAEe,EAAG;IAAChB,KAAK,EAAEO;EAAS,GAAKH,IAAI,GAC9DF,QACI,CAAC;AAEZ;AAEAP,aAAa,CAACwB,qBAAqB,GAAG,IAAI;AAE1C,eAAexB,aAAa;AAE5B,SAASc,OAAOA,CAACZ,OAAO,EAAE;EACxB,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,MAAMuB,MAAM,GAAG,CAAC,CAAC;EAEjB,IAAI,OAAOvB,OAAO,KAAK,QAAQ,EAAE;IAC/BA,OAAO,GAAG;MACRwB,KAAK,EAAExB,OAAO;MACdyB,MAAM,EAAEzB,OAAO;MACf0B,KAAK,EAAE1B;IACT,CAAC;EACH;EAEA,KAAK,MAAM2B,KAAK,IAAI3B,OAAO,EAAE;IAAA,IAAA4B,QAAA;IAC3B,MAAMC,KAAK,IAAAD,QAAA,GAAG5B,OAAO,cAAA4B,QAAA,uBAAPA,QAAA,CAAUD,KAAK,CAAC;IAC9BJ,MAAM,CAAE,KAAII,KAAM,UAAS,CAAC,GAAGE,KAAK,IAAI,OAAO;EACjD;EAEA,OAAON,MAAM;AACf"}

package/es/components/grid/ContainerDocs.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { PropertiesTableProps } from '../../shared/types';
2	+ export declare const GridContainerProperties: PropertiesTableProps;

package/es/components/grid/ContainerDocs.js ADDED Viewed

@@ -0,0 +1,23 @@
+export const GridContainerProperties = {
+  columns: {
+    doc: 'Define how many columns your layout should be divided in. Can be just a number `columns={12}` or an object with media query sizes like `columns={{ small: 4, medium: 6, large: 12 }}` (default values). You can also disabled CSS Grid by providing `false` for one size, like so `columns={{ small: 4, medium: false, large: 12 }}`.',
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  rowGap: {
+    doc: 'Defines how much the gap between rows should be. Can be `large`, `medium`, `small`, `x-small` or `false` for no gap. Defaults to `false`.',
+    type: ['string', 'false'],
+    status: 'optional'
+  },
+  columnsGap: {
+    doc: 'Defines how much the gap between columns should be. Can be `large`, `medium`, `small`, `x-small` or `false` for no gap. Defaults to `false`.',
+    type: ['string', 'false'],
+    status: 'optional'
+  },
+  element: {
+    doc: 'Define the type of element. Defaults to `div`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ContainerDocs.js.map

package/es/components/grid/ContainerDocs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContainerDocs.js","names":["GridContainerProperties","columns","doc","type","status","rowGap","columnsGap","element"],"sources":["../../../../src/components/grid/ContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const GridContainerProperties: PropertiesTableProps = {\n columns: {\n doc: 'Define how many columns your layout should be divided in. Can be just a number `columns={12}` or an object with media query sizes like `columns={{ small: 4, medium: 6, large: 12 }}` (default values). You can also disabled CSS Grid by providing `false` for one size, like so `columns={{ small: 4, medium: false, large: 12 }}`.',\n type: ['number', 'object'],\n status: 'optional',\n },\n rowGap: {\n doc: 'Defines how much the gap between rows should be. Can be `large`, `medium`, `small`, `x-small` or `false` for no gap. Defaults to `false`.',\n type: ['string', 'false'],\n status: 'optional',\n },\n columnsGap: {\n doc: 'Defines how much the gap between columns should be. Can be `large`, `medium`, `small`, `x-small` or `false` for no gap. Defaults to `false`.',\n type: ['string', 'false'],\n status: 'optional',\n },\n element: {\n doc: 'Define the type of element. Defaults to `div`.',\n type: ['string', 'React.Element'],\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,OAAO,EAAE;IACPC,GAAG,EAAE,uUAAuU;IAC5UC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -10,6 +10,9 @@
        column-gap: var(--column-gap, 0);
   --grid-columns: var(--small-columns, 4);
 }
+.dnb-grid-container--row-gap-x-small {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-grid-container--row-gap-small {
   --row-gap: var(--spacing-small);
 }
@@ -19,6 +22,9 @@
 .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);
 }

package/es/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-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-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: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)}

package/es/components/grid/style/grid-container.scss CHANGED Viewed

@@ -7,6 +7,9 @@
   row-gap: var(--row-gap, 0);
   column-gap: var(--column-gap, 0);
+  &--row-gap-x-small {
+    --row-gap: var(--spacing-x-small);
+  }
   &--row-gap-small {
     --row-gap: var(--spacing-small);
   }
@@ -17,6 +20,9 @@
     --row-gap: var(--spacing-large);
   }
+  &--column-gap-x-small {
+    --column-gap: var(--spacing-x-small);
+  }
   &--column-gap-small {
     --column-gap: var(--spacing-small);
   }

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

@@ -54,8 +54,7 @@
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   background-repeat: repeat !important;
   background-size: 100% !important;
-  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
   animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
 }
 .dnb-skeleton--code pre,
@@ -118,16 +117,13 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
 @keyframes skeletonLinearAnimation {
   0% {
-    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
   }
   50% {
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   100% {
-    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
   }
 }
 @keyframes skeletonFontAnimation {

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

	@@ -1 +1 @@
1	- .dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important~~;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)~~;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code ,.dnb-skeleton--code pre,.dnb-skeleton--code pre ,.dnb-skeleton--font code,.dnb-skeleton--font code ,.dnb-skeleton--font pre,.dnb-skeleton--font pre {--font-family-monospace:"DNBMonoSkeleton"!important;box-shadow:none!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{~~-webkit-~~clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)~~;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)~~}50%{~~-webkit-~~clip-path:polygon(0 0,100% 0,100% 100%,0 100%)~~;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)~~}to{~~-webkit-~~clip-path:polygon(0 0,0 0,0 100%,0 100%)~~;clip-path:polygon(0 0,0 0,0 100%,0 100%)~~}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
1	+ .dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code ,.dnb-skeleton--code pre,.dnb-skeleton--code pre ,.dnb-skeleton--font code,.dnb-skeleton--font code ,.dnb-skeleton--font pre,.dnb-skeleton--font pre {--font-family-monospace:"DNBMonoSkeleton"!important;box-shadow:none!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}

package/es/components/slider/SliderDocs.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const SliderProperties: PropertiesTableProps;
+export declare const SliderEvents: PropertiesTableProps;

package/es/components/slider/SliderDocs.js ADDED Viewed

@@ -0,0 +1,150 @@
+export const SliderProperties = {
+  value: {
+    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',
+    type: ['number', 'Array<number>'],
+    status: 'required'
+  },
+  min: {
+    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',
+    type: 'number',
+    status: 'optional'
+  },
+  max: {
+    doc: 'The maximum value. Defaults to `100`.',
+    type: 'number',
+    status: 'optional'
+  },
+  step: {
+    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',
+    type: 'number',
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'Show the slider vertically. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  reverse: {
+    doc: 'Show the slider reversed. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the slider will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  hideButtons: {
+    doc: 'Removes the helper buttons. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  multiThumbBehavior: {
+    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',
+    type: 'string',
+    status: 'optional'
+  },
+  thumbTitle: {
+    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  subtractTitle: {
+    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',
+    type: 'string',
+    status: 'optional'
+  },
+  addTitle: {
+    doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',
+    type: 'string',
+    status: 'optional'
+  },
+  numberFormat: {
+    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',
+    type: 'object',
+    status: 'optional'
+  },
+  tooltip: {
+    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  alwaysShowTooltip: {
+    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'string',
+    status: 'optional'
+  },
+  labelDirection: {
+    doc: 'Use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  labelSrOnly: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: 'string',
+    status: 'optional'
+  },
+  statusState: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  statusProps: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatusId: {
+    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  extensions: {
+    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',
+    type: 'object',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const SliderEvents = {
+  onChange: {
+    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  onDragStart: {
+    doc: 'will be called once the user stops dragging. Returns `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  onDragEnd: {
+    doc: 'will be called once the user starts dragging. Returns `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SliderDocs.js.map

package/es/components/slider/SliderDocs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SliderDocs.js","names":["SliderProperties","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n value: {\n doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n type: ['number', 'Array<number>'],\n status: 'required',\n },\n min: {\n doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n type: 'number',\n status: 'optional',\n },\n max: {\n doc: 'The maximum value. Defaults to `100`.',\n type: 'number',\n status: 'optional',\n },\n step: {\n doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n type: 'number',\n status: 'optional',\n },\n vertical: {\n doc: 'Show the slider vertically. Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n reverse: {\n doc: 'Show the slider reversed. Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n stretch: {\n doc: 'If set to `true`, then the slider will be 100% in `width`.',\n type: 'boolean',\n status: 'optional',\n },\n hideButtons: {\n doc: 'Removes the helper buttons. Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n multiThumbBehavior: {\n doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n type: 'string',\n status: 'optional',\n },\n thumbTitle: {\n doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n type: 'string',\n status: 'optional',\n },\n subtractTitle: {\n doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',\n type: 'string',\n status: 'optional',\n },\n addTitle: {\n doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',\n type: 'string',\n status: 'optional',\n },\n numberFormat: {\n doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n type: 'object',\n status: 'optional',\n },\n tooltip: {\n doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n type: 'boolean',\n status: 'optional',\n },\n alwaysShowTooltip: {\n doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n type: 'boolean',\n status: 'optional',\n },\n label: {\n doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n type: 'string',\n status: 'optional',\n },\n labelDirection: {\n doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n type: 'string',\n status: 'optional',\n },\n labelSrOnly: {\n doc: 'Use `true` to make the label only readable by screen readers.',\n type: 'boolean',\n status: 'optional',\n },\n status: {\n doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n type: 'string',\n status: 'optional',\n },\n statusState: {\n doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n type: 'string',\n status: 'optional',\n },\n statusProps: {\n doc: 'Use an object to define additional FormStatus properties.',\n type: 'object',\n status: 'optional',\n },\n globalStatusId: {\n doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n type: 'string',\n status: 'optional',\n },\n suffix: {\n doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n type: 'string',\n status: 'optional',\n },\n skeleton: {\n doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n type: 'boolean',\n status: 'optional',\n },\n extensions: {\n doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n type: 'object',\n status: 'optional',\n },\n '[Space](/uilib/layout/space/properties)': {\n doc: 'Spacing properties like `top` or `bottom` are supported.',\n type: ['string', 'object'],\n status: 'optional',\n },\n}\n\nexport const SliderEvents: PropertiesTableProps = {\n onChange: {\n doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n type: 'function',\n status: 'optional',\n },\n onDragStart: {\n doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n type: 'function',\n status: 'optional',\n },\n onDragEnd: {\n doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n type: 'function',\n status: 'optional',\n },\n}\n"],"mappings":"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"}

package/es/components/space/SpacingUtils.d.ts CHANGED Viewed

@@ -27,7 +27,7 @@ export declare const createSpacingClasses: (props: SpacingProps
  */
  | SpacingUnknownProps, Element?: any) => any[];
 export declare const translateSpace: (type: SpaceType) => any;
-export declare const splitTypes: (types: SpaceType | Array<SpaceType>) => SpaceType[];
+export declare const splitTypes: (types: SpaceType | Array<SpaceType>) => SpaceType[] | (number | SpaceTypesPositiveValuesType)[];
 export declare const sumTypes: (types: SpaceType | Array<SpaceType>) => any;
 export declare const createTypeModifiers: (types: SpaceType) => Array<SpaceType>;
 export declare const findType: (num: SpaceNumber) => SpaceType;

package/es/components/space/SpacingUtils.js CHANGED Viewed

@@ -144,7 +144,7 @@ export const splitTypes = types => {
     const test = types.split(/ /g);
     return clean(test);
   } else if (typeof types === 'boolean') {
-    return ['small'];
+    return [types ? 'small' : 0];
   } else if (typeof types === 'number') {
     return [types];
   }