@dnb/eufemia 10.69.1 → 10.70.0

package/es/components/avatar/AvatarDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarDocs.js","names":["AvatarProperties","size","doc","type","status","children","alt","src","imgProps","variant","hasLabel","backgroundColor","color","skeleton","AvatarGroupProperties","label","maxElements"],"sources":["../../../../src/components/avatar/AvatarDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const AvatarProperties: PropertiesTableProps = {\n  size: {\n    doc: 'Size of the Avatar. Options: `small` | `medium` | `large` | `x-large`. Defaults to `medium`.',\n    type: ['small', 'medium', 'large', 'x-large'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content of the component.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  alt: {\n    doc: 'Used in combination with `src` to provide an alt attribute for the `img` element.',\n    type: 'string',\n    status: 'optional',\n  },\n  src: {\n    doc: 'Specifies the path to the image.',\n    type: 'string',\n    status: 'optional',\n  },\n  imgProps: {\n    doc: '[Image properties](/uilib/elements/image) applied to the `img` element if the component is used to display an image.',\n    type: ['ImgProps'],\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Override the variant of the component. Options: `primary` | `secondary` | `tertiary`. Defaults to `primary`.',\n    type: ['primary', 'secondary', 'tertiary'],\n    status: 'optional',\n  },\n  hasLabel: {\n    doc: 'If aria-hidden is set to `true` or if a label is given, typical inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar. Use `true` to omit the `Avatar group required:` warning.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  backgroundColor: {\n    doc: 'Define a custom background color, instead of a variant. Use a Eufemia color.',\n    type: 'string',\n    status: 'optional',\n  },\n  color: {\n    doc: 'Define a custom color to compliment the backgroundColor. Use a Eufemia color.',\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  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const AvatarGroupProperties: PropertiesTableProps = {\n  label: {\n    doc: 'The label description of the group of avatars.',\n    type: 'string',\n    status: 'required',\n  },\n  size: {\n    doc: 'Size of the Avatars, and \"elements hidden text (+x)\". Options: `small` | `medium` | `large` | `x-large`. Defaults to `medium`.',\n    type: ['small', 'medium', 'large', 'x-large'],\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Override the variant of the Avatars. Options: `primary` | `secondary` | `tertiary`. Defaults to `primary`.',\n    type: ['primary', 'secondary', 'tertiary'],\n    status: 'optional',\n  },\n  maxElements: {\n    doc: 'Number of max displayed elements, including the \"elements hidden text (+x)\". Defaults to `4`.',\n    type: 'number',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The Avatars to group.',\n    type: 'React.ReactNode',\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  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,IAAI,EAAE;IACJC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDE,GAAG,EAAE;IACHJ,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,GAAG,EAAE;IACHL,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,sHAAsH;IAC3HC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,8GAA8G;IACnHC,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;IAC1CC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,8NAA8N;IACnOC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,eAAe,EAAE;IACfT,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,KAAK,EAAE;IACLV,GAAG,EAAE,+EAA+E;IACpFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMU,qBAA2C,GAAG;EACzDC,KAAK,EAAE;IACLb,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDH,IAAI,EAAE;IACJC,GAAG,EAAE,gIAAgI;IACrIC,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;IAC1CC,MAAM,EAAE;EACV,CAAC;EACDY,WAAW,EAAE;IACXd,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/avatar/AvatarGroup.d.ts

@@ -38,6 +38,16 @@ export interface AvatarGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'si
      * Default: false
      */
     skeleton?: SkeletonShow;
+    /**
+     * Define a custom background color for the Avatars, instead of a variant. Use a Eufemia color.
+     * Default: undefined
+     */
+    backgroundColor?: string;
+    /**
+     * Define a custom color to compliment the backgroundColor for the Avatars. Use a Eufemia color.
+     * Default: undefined
+     */
+    color?: string;
 }
 export declare const defaultProps: {
     label: any;

package/es/components/avatar/AvatarGroup.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "className", "children", "size", "maxElements", "variant"],
+const _excluded = ["label", "className", "children", "size", "maxElements", "variant", "backgroundColor", "color"],
   _excluded2 = ["skeleton"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -33,7 +33,9 @@ const AvatarGroup = localProps => {
       children: childrenProp,
       size,
       maxElements: maxElementsProp,
-      variant
+      variant,
+      backgroundColor,
+      color
     } = _extendPropsWithConte,
     props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
   const maxElements = maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4;
@@ -45,11 +47,16 @@ const AvatarGroup = localProps => {
       numOfHiddenAvatars = total - maxElements + 1;
     }
     children = childrenProp.slice(0, total - numOfHiddenAvatars).map((child, i) => {
-      const appliedSize = child.props.size ? child.props.size : size;
-      const appliedVariant = child.props.variant ? child.props.variant : variant;
+      var _child$props$size, _child$props, _child$props$variant, _child$props2, _child$props$color, _child$props3, _child$props$backgrou, _child$props4;
+      const appliedSize = (_child$props$size = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.size) !== null && _child$props$size !== void 0 ? _child$props$size : size;
+      const appliedVariant = (_child$props$variant = (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.variant) !== null && _child$props$variant !== void 0 ? _child$props$variant : variant;
+      const appliedColor = (_child$props$color = (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.color) !== null && _child$props$color !== void 0 ? _child$props$color : color;
+      const appliedBackgroundColor = (_child$props$backgrou = (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.backgroundColor) !== null && _child$props$backgrou !== void 0 ? _child$props$backgrou : backgroundColor;
       return React.cloneElement(child, {
         size: appliedSize,
         variant: appliedVariant,
+        color: appliedColor,
+        backgroundColor: appliedBackgroundColor,
         style: _objectSpread(_objectSpread({}, child.props.style), {}, {
           zIndex: total - i
         }),
@@ -64,7 +71,12 @@ const AvatarGroup = localProps => {
     } = _validateDOMAttribute,
     attributes = _objectWithoutProperties(_validateDOMAttribute, _excluded2);
   return React.createElement(AvatarGroupContext.Provider, {
-    value: props
+    value: _objectSpread(_objectSpread({}, props), {}, {
+      variant,
+      size,
+      color,
+      backgroundColor
+    })
   }, React.createElement("span", _extends({
     className: classnames('dnb-avatar__group', spacingClasses, className)
   }, attributes), React.createElement("span", {

package/es/components/avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","classnames","createSpacingClasses","validateDOMAttributes","extendPropsWithContext","Context","defaultProps","label","className","maxElements","size","children","variant","skeleton","AvatarGroupContext","createContext","AvatarGroup","localProps","context","useContext","_extendPropsWithConte","childrenProp","maxElementsProp","props","_objectWithoutProperties","_excluded","numOfHiddenAvatars","Array","isArray","total","length","slice","map","child","i","appliedSize","appliedVariant","cloneElement","style","_objectSpread","zIndex","key","spacingClasses","_validateDOMAttribute","attributes","_excluded2","createElement","Provider","value","_extends","ElementsHidden","_supportsSpacingProps"],"sources":["../../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { AvatarSizes, AvatarVariants } from './Avatar'\n\n// Shared\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\nexport interface AvatarGroupProps\n  extends Omit<React.HTMLProps<HTMLElement>, 'size' | 'label'> {\n  /**\n   * Label to describe the avatar group\n   * Default: null\n   */\n  label: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Number of max displayed elements, including the \"elements hidden text (+x)\".\n   * Default: 4\n   */\n  maxElements?: number\n\n  /**\n   * The avatars to group.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the Avatars, and \"elements hidden text (+x)\".\n   * Default: medium.\n   */\n  size?: AvatarSizes\n\n  /**\n   * The variant of the Avatars.\n   * Default: primary.\n   */\n  variant?: AvatarVariants\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: false\n   */\n  skeleton?: SkeletonShow\n}\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  maxElements: 4,\n  size: 'medium',\n  children: null,\n  variant: 'primary',\n  skeleton: false,\n}\n\nexport const AvatarGroupContext = React.createContext(null)\n\nconst AvatarGroup = (localProps: AvatarGroupProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  // Extract additional props from global context\n  const {\n    label,\n    className,\n    children: childrenProp,\n    size,\n    maxElements: maxElementsProp,\n    variant,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.AvatarGroup,\n    {\n      skeleton: context?.skeleton,\n    }\n  )\n\n  const maxElements =\n    maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4\n\n  let children = childrenProp\n  let numOfHiddenAvatars = 0\n\n  if (Array.isArray(childrenProp)) {\n    const total = childrenProp.length\n\n    if (total > maxElements) {\n      numOfHiddenAvatars = total - maxElements + 1\n    }\n\n    children = childrenProp\n      .slice(0, total - numOfHiddenAvatars)\n      .map((child, i) => {\n        const appliedSize = child.props.size ? child.props.size : size\n        const appliedVariant = child.props.variant\n          ? child.props.variant\n          : variant\n        return React.cloneElement(child, {\n          size: appliedSize,\n          variant: appliedVariant,\n          style: { ...child.props.style, zIndex: total - i },\n          key: i,\n        })\n      })\n  }\n\n  const spacingClasses = createSpacingClasses(props)\n  const {\n    skeleton, // eslint-disable-line\n    ...attributes\n  } = validateDOMAttributes({}, props)\n\n  return (\n    <AvatarGroupContext.Provider value={props}>\n      <span\n        className={classnames(\n          'dnb-avatar__group',\n          spacingClasses,\n          className\n        )}\n        {...attributes}\n      >\n        <span className=\"dnb-sr-only\">{label}</span>\n\n        {children}\n\n        {numOfHiddenAvatars ? (\n          <ElementsHidden size={size}>\n            +{numOfHiddenAvatars}\n          </ElementsHidden>\n        ) : null}\n      </span>\n    </AvatarGroupContext.Provider>\n  )\n}\n\nexport interface ElementsHiddenProps {\n  /**\n   * The avatars to group.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the \"elements hidden text (+x)\".\n   * Default: medium.\n   */\n  size?: AvatarSizes\n}\n\nfunction ElementsHidden(props: ElementsHiddenProps) {\n  const { size, children } = props\n  return (\n    <span\n      className={classnames(\n        'dnb-avatar__group--elements-left',\n        `dnb-avatar__group--elements-left--size-${size || 'medium'}`\n      )}\n    >\n      {children}\n    </span>\n  )\n}\n\nAvatarGroup._supportsSpacingProps = true\n\nexport default AvatarGroup\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AvatarGroup.js","names":["React","classnames","createSpacingClasses","validateDOMAttributes","extendPropsWithContext","Context","defaultProps","label","className","maxElements","size","children","variant","skeleton","AvatarGroupContext","createContext","AvatarGroup","localProps","context","useContext","_extendPropsWithConte","childrenProp","maxElementsProp","backgroundColor","color","props","_objectWithoutProperties","_excluded","numOfHiddenAvatars","Array","isArray","total","length","slice","map","child","i","_child$props$size","_child$props","_child$props$variant","_child$props2","_child$props$color","_child$props3","_child$props$backgrou","_child$props4","appliedSize","appliedVariant","appliedColor","appliedBackgroundColor","cloneElement","style","_objectSpread","zIndex","key","spacingClasses","_validateDOMAttribute","attributes","_excluded2","createElement","Provider","value","_extends","ElementsHidden","_supportsSpacingProps"],"sources":["../../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { AvatarSizes, AvatarVariants } from './Avatar'\n\n// Shared\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\nexport interface AvatarGroupProps\n  extends Omit<React.HTMLProps<HTMLElement>, 'size' | 'label'> {\n  /**\n   * Label to describe the avatar group\n   * Default: null\n   */\n  label: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Number of max displayed elements, including the \"elements hidden text (+x)\".\n   * Default: 4\n   */\n  maxElements?: number\n\n  /**\n   * The avatars to group.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the Avatars, and \"elements hidden text (+x)\".\n   * Default: medium.\n   */\n  size?: AvatarSizes\n\n  /**\n   * The variant of the Avatars.\n   * Default: primary.\n   */\n  variant?: AvatarVariants\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: false\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Define a custom background color for the Avatars, instead of a variant. Use a Eufemia color.\n   * Default: undefined\n   */\n  backgroundColor?: string\n\n  /**\n   * Define a custom color to compliment the backgroundColor for the Avatars. Use a Eufemia color.\n   * Default: undefined\n   */\n  color?: string\n}\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  maxElements: 4,\n  size: 'medium',\n  children: null,\n  variant: 'primary',\n  skeleton: false,\n}\n\nexport const AvatarGroupContext = React.createContext(null)\n\nconst AvatarGroup = (localProps: AvatarGroupProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  // Extract additional props from global context\n  const {\n    label,\n    className,\n    children: childrenProp,\n    size,\n    maxElements: maxElementsProp,\n    variant,\n    backgroundColor,\n    color,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.AvatarGroup,\n    {\n      skeleton: context?.skeleton,\n    }\n  )\n\n  const maxElements =\n    maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4\n\n  let children = childrenProp\n  let numOfHiddenAvatars = 0\n\n  if (Array.isArray(childrenProp)) {\n    const total = childrenProp.length\n\n    if (total > maxElements) {\n      numOfHiddenAvatars = total - maxElements + 1\n    }\n\n    children = childrenProp\n      .slice(0, total - numOfHiddenAvatars)\n      .map((child, i) => {\n        const appliedSize = child.props?.size ?? size\n        const appliedVariant = child.props?.variant ?? variant\n        const appliedColor = child.props?.color ?? color\n        const appliedBackgroundColor =\n          child.props?.backgroundColor ?? backgroundColor\n        return React.cloneElement(child, {\n          size: appliedSize,\n          variant: appliedVariant,\n          color: appliedColor,\n          backgroundColor: appliedBackgroundColor,\n          style: { ...child.props.style, zIndex: total - i },\n          key: i,\n        })\n      })\n  }\n\n  const spacingClasses = createSpacingClasses(props)\n  const {\n    skeleton, // eslint-disable-line\n    ...attributes\n  } = validateDOMAttributes({}, props)\n\n  return (\n    <AvatarGroupContext.Provider\n      value={{ ...props, variant, size, color, backgroundColor }}\n    >\n      <span\n        className={classnames(\n          'dnb-avatar__group',\n          spacingClasses,\n          className\n        )}\n        {...attributes}\n      >\n        <span className=\"dnb-sr-only\">{label}</span>\n\n        {children}\n\n        {numOfHiddenAvatars ? (\n          <ElementsHidden size={size}>\n            +{numOfHiddenAvatars}\n          </ElementsHidden>\n        ) : null}\n      </span>\n    </AvatarGroupContext.Provider>\n  )\n}\n\nexport interface ElementsHiddenProps {\n  /**\n   * The avatars to group.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the \"elements hidden text (+x)\".\n   * Default: medium.\n   */\n  size?: AvatarSizes\n}\n\nfunction ElementsHidden(props: ElementsHiddenProps) {\n  const { size, children } = props\n  return (\n    <span\n      className={classnames(\n        'dnb-avatar__group--elements-left',\n        `dnb-avatar__group--elements-left--size-${size || 'medium'}`\n      )}\n    >\n      {children}\n    </span>\n  )\n}\n\nAvatarGroup._supportsSpacingProps = true\n\nexport default AvatarGroup\n"],"mappings":"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","ignoreList":[]}

package/es/components/avatar/style/dnb-avatar.css

@@ -34,6 +34,14 @@
   border-radius: 50%;
   font-weight: var(--font-weight-medium);
   line-height: 1;
+  background-color: var(--background-color);
+  color: var(--color);
+}
+.dnb-avatar[style*="--background-color"] {
+  background-color: var(--background-color, var(--color-emerald-green));
+}
+.dnb-avatar[style*="--color"] {
+  color: var(--color, var(--color-pistachio));
 }
 .dnb-avatar, .dnb-core-style .dnb-avatar {
   line-height: var(--line-height-large);

package/es/components/avatar/style/dnb-avatar.min.css

@@ -1 +1 @@
-.dnb-avatar{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem;align-items:center;border-radius:50%;display:inline-flex;flex-shrink:0;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:var(--line-height-large)}.dnb-avatar--size-small{font-size:var(--avatar-font-size--small);height:var(--avatar-height--small);width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:var(--avatar-font-size--medium);height:var(--avatar-height--medium);width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:var(--avatar-font-size--large);height:var(--avatar-height--large);width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:var(--avatar-font-size--x-large);height:var(--avatar-height--x-large);width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{--avatar-font-size-left--small:var(--font-size-x-small);--avatar-font-size-left--medium:var(--font-size-small);--avatar-font-size-left--large:var(--font-size-large);--avatar-font-size-left--x-large:var(--font-size-large);display:inline-flex;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{--border-color:var(--color-black-3);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){margin-left:0}.dnb-avatar__group--elements-left{align-items:center;color:var(--color-black-55);display:inline-flex;flex-shrink:0;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:var(--avatar-font-size-left--small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:var(--avatar-font-size-left--medium);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large{font-size:var(--avatar-font-size-left--large);margin-left:var(--spacing-xx-small)}.dnb-avatar__group--elements-left--size-x-large{font-size:var(--avatar-font-size-left--x-large);margin-left:var(--spacing-xx-small)}
+.dnb-avatar{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem;align-items:center;background-color:var(--background-color);border-radius:50%;color:var(--color);display:inline-flex;flex-shrink:0;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}.dnb-avatar[style*="--background-color"]{background-color:var(--background-color,var(--color-emerald-green))}.dnb-avatar[style*="--color"]{color:var(--color,var(--color-pistachio))}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:var(--line-height-large)}.dnb-avatar--size-small{font-size:var(--avatar-font-size--small);height:var(--avatar-height--small);width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:var(--avatar-font-size--medium);height:var(--avatar-height--medium);width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:var(--avatar-font-size--large);height:var(--avatar-height--large);width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:var(--avatar-font-size--x-large);height:var(--avatar-height--x-large);width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{--avatar-font-size-left--small:var(--font-size-x-small);--avatar-font-size-left--medium:var(--font-size-small);--avatar-font-size-left--large:var(--font-size-large);--avatar-font-size-left--x-large:var(--font-size-large);display:inline-flex;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{--border-color:var(--color-black-3);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){margin-left:0}.dnb-avatar__group--elements-left{align-items:center;color:var(--color-black-55);display:inline-flex;flex-shrink:0;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:var(--avatar-font-size-left--small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:var(--avatar-font-size-left--medium);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large{font-size:var(--avatar-font-size-left--large);margin-left:var(--spacing-xx-small)}.dnb-avatar__group--elements-left--size-x-large{font-size:var(--avatar-font-size-left--x-large);margin-left:var(--spacing-xx-small)}

package/es/components/avatar/style/dnb-avatar.scss

@@ -36,6 +36,15 @@
   border-radius: 50%;
   font-weight: var(--font-weight-medium);
   line-height: 1;
+  background-color: var(--background-color);
+  color: var(--color);
+
+  &[style*='--background-color'] {
+    background-color: var(--background-color, var(--color-emerald-green));
+  }
+  &[style*='--color'] {
+    color: var(--color, var(--color-pistachio));
+  }
 
   // Safari needs a correct CSS specificity
   &,

package/es/components/avatar/style/themes/dnb-avatar-theme-sbanken.css

@@ -8,17 +8,17 @@
 .dnb-avatar {
   --avatar-font-size--large: var(--font-size-x-large);
   --avatar-font-size--x-large: var(--font-size-x-large);
-  color: var(--sb-color-white);
+  --color: var(--sb-color-white);
 }
 .dnb-avatar--primary {
-  background-color: var(--sb-color-purple-alternative);
+  --background-color: var(--sb-color-purple-alternative);
 }
 .dnb-avatar--secondary {
-  background-color: var(--sb-color-violet-light);
+  --background-color: var(--sb-color-violet-light);
 }
 .dnb-avatar--tertiary {
-  background-color: var(--sb-color-violet-light-2);
-  color: var(--sb-color-purple-alternative);
+  --background-color: var(--sb-color-violet-light-2);
+  --color: var(--sb-color-purple-alternative);
 }
 .dnb-avatar--size-large {
   font-weight: var(--sb-font-weight-basis);

package/es/components/avatar/style/themes/dnb-avatar-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-avatar{--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);color:var(--sb-color-white)}.dnb-avatar--primary{background-color:var(--sb-color-purple-alternative)}.dnb-avatar--secondary{background-color:var(--sb-color-violet-light)}.dnb-avatar--tertiary{background-color:var(--sb-color-violet-light-2);color:var(--sb-color-purple-alternative)}.dnb-avatar--size-large,.dnb-avatar--size-x-large{font-family:var(--font-family-heading);font-weight:var(--sb-font-weight-basis)}.dnb-avatar__group{--avatar-font-size-left--medium:var(--font-size-basis);--avatar-font-size-left--large:var(--sb-font-size-medium--plus);--avatar-font-size-left--x-large:var(--sb-font-size-medium--plus)}
+.dnb-avatar{--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--color:var(--sb-color-white)}.dnb-avatar--primary{--background-color:var(--sb-color-purple-alternative)}.dnb-avatar--secondary{--background-color:var(--sb-color-violet-light)}.dnb-avatar--tertiary{--background-color:var(--sb-color-violet-light-2);--color:var(--sb-color-purple-alternative)}.dnb-avatar--size-large,.dnb-avatar--size-x-large{font-family:var(--font-family-heading);font-weight:var(--sb-font-weight-basis)}.dnb-avatar__group{--avatar-font-size-left--medium:var(--font-size-basis);--avatar-font-size-left--large:var(--sb-font-size-medium--plus);--avatar-font-size-left--x-large:var(--sb-font-size-medium--plus)}

package/es/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss

@@ -8,20 +8,19 @@
 .dnb-avatar {
   --avatar-font-size--large: var(--font-size-x-large);
   --avatar-font-size--x-large: var(--font-size-x-large);
-
-  color: var(--sb-color-white);
+  --color: var(--sb-color-white);
 
   &--primary {
-    background-color: var(--sb-color-purple-alternative);
+    --background-color: var(--sb-color-purple-alternative);
   }
 
   &--secondary {
-    background-color: var(--sb-color-violet-light);
+    --background-color: var(--sb-color-violet-light);
   }
 
   &--tertiary {
-    background-color: var(--sb-color-violet-light-2);
-    color: var(--sb-color-purple-alternative);
+    --background-color: var(--sb-color-violet-light-2);
+    --color: var(--sb-color-purple-alternative);
   }
 
   &--size-large {

package/es/components/avatar/style/themes/dnb-avatar-theme-ui.css

@@ -6,15 +6,15 @@
  * Utilities
  */
 .dnb-avatar {
-  color: var(--color-pistachio);
+  --color: var(--color-pistachio);
 }
 .dnb-avatar--primary {
-  background-color: var(--color-emerald-green);
+  --background-color: var(--color-emerald-green);
 }
 .dnb-avatar--secondary {
-  background-color: var(--color-sea-green);
+  --background-color: var(--color-sea-green);
 }
 .dnb-avatar--tertiary {
-  background-color: var(--color-mint-green);
-  color: var(--color-emerald-green);
+  --background-color: var(--color-mint-green);
+  --color: var(--color-emerald-green);
 }

package/es/components/avatar/style/themes/dnb-avatar-theme-ui.min.css

@@ -1 +1 @@
-.dnb-avatar{color:var(--color-pistachio)}.dnb-avatar--primary{background-color:var(--color-emerald-green)}.dnb-avatar--secondary{background-color:var(--color-sea-green)}.dnb-avatar--tertiary{background-color:var(--color-mint-green);color:var(--color-emerald-green)}
+.dnb-avatar{--color:var(--color-pistachio)}.dnb-avatar--primary{--background-color:var(--color-emerald-green)}.dnb-avatar--secondary{--background-color:var(--color-sea-green)}.dnb-avatar--tertiary{--background-color:var(--color-mint-green);--color:var(--color-emerald-green)}

package/es/components/avatar/style/themes/dnb-avatar-theme-ui.scss

@@ -6,18 +6,18 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-avatar {
-  color: var(--color-pistachio);
+  --color: var(--color-pistachio);
 
   &--primary {
-    background-color: var(--color-emerald-green);
+    --background-color: var(--color-emerald-green);
   }
 
   &--secondary {
-    background-color: var(--color-sea-green);
+    --background-color: var(--color-sea-green);
   }
 
   &--tertiary {
-    background-color: var(--color-mint-green);
-    color: var(--color-emerald-green);
+    --background-color: var(--color-mint-green);
+    --color: var(--color-emerald-green);
   }
 }

package/es/components/badge/BadgeDocs.d.ts

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

package/es/components/badge/BadgeDocs.js

@@ -0,0 +1,48 @@
+export const BadgeProperties = {
+  content: {
+    doc: 'Content of the component.',
+    type: ['string', 'number', 'React.ReactNode'],
+    status: 'optional'
+  },
+  children: {
+    doc: 'Content to display the badge on top of.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'Vertical positioning of the component. Options: `bottom` | `top`.',
+    type: ['top', 'bottom'],
+    status: 'optional'
+  },
+  horizontal: {
+    doc: 'Horizontal positioning of the component. Options: `left` | `right`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  className: {
+    doc: 'Custom className for the component.',
+    type: ['string'],
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'Applies loading skeleton.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'defines the visual appearance of the badge. There are two main variants `notification` and `information`. The default variant is `information`.',
+    type: ['information', 'notification'],
+    status: 'optional'
+  },
+  label: {
+    doc: 'The label description of the badge. Only required when passing a number as the badge content.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=BadgeDocs.js.map

package/es/components/badge/BadgeDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDocs.js","names":["BadgeProperties","content","doc","type","status","children","vertical","horizontal","className","skeleton","variant","label"],"sources":["../../../../src/components/badge/BadgeDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BadgeProperties: PropertiesTableProps = {\n  content: {\n    doc: 'Content of the component.',\n    type: ['string', 'number', 'React.ReactNode'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content to display the badge on top of.',\n    type: ['React.ReactNode'],\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Vertical positioning of the component. Options: `bottom` | `top`.',\n    type: ['top', 'bottom'],\n    status: 'optional',\n  },\n  horizontal: {\n    doc: 'Horizontal positioning of the component. Options: `left` | `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component.',\n    type: ['string'],\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Applies loading skeleton.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'defines the visual appearance of the badge. There are two main variants `notification` and `information`. The default variant is `information`.',\n    type: ['information', 'notification'],\n    status: 'optional',\n  },\n  label: {\n    doc: 'The label description of the badge. Only required when passing a number as the badge content.',\n    type: ['React.ReactNode'],\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"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,OAAO,EAAE;IACPC,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,yCAAyC;IAC9CC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDI,SAAS,EAAE;IACTN,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,OAAO,EAAE;IACPR,GAAG,EAAE,iJAAiJ;IACtJC,IAAI,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDO,KAAK,EAAE;IACLT,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/breadcrumb/BreadcrumbDocs.d.ts

@@ -0,0 +1,5 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const BreadcrumbProperties: PropertiesTableProps;
+export declare const BreadcrumbEvents: PropertiesTableProps;
+export declare const BreadcrumbItemProperties: PropertiesTableProps;
+export declare const BreadcrumbItemEvents: PropertiesTableProps;

package/es/components/breadcrumb/BreadcrumbDocs.js

@@ -0,0 +1,119 @@
+export const BreadcrumbProperties = {
+  data: {
+    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',
+    type: 'Array<BreadcrumbItemProps>',
+    status: 'optional'
+  },
+  children: {
+    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  variant: {
+    doc: "Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .",
+    type: ['responsive', 'single', 'multiple', 'collapse'],
+    status: 'optional'
+  },
+  href: {
+    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',
+    type: 'string',
+    status: 'optional'
+  },
+  navText: {
+    doc: 'Every `<nav>` on a page needs an unique aria-label text.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  goBackText: {
+    doc: "Override with a custom 'Back' text for variant `single` (Not recommended).",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  homeText: {
+    doc: "Override with a custom 'Home' text (Not recommended)",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  backToText: {
+    doc: "Override with a custom 'Back to...' text (Not recommended).",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  styleType: {
+    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',
+    type: 'Various',
+    status: 'optional'
+  },
+  collapsedStyleType: {
+    doc: 'Use one of the Section component variants. Defaults to `info`.',
+    type: ['error', 'info', 'warning', 'success'],
+    status: 'optional'
+  },
+  className: {
+    doc: 'Custom className for the component root.',
+    type: 'string',
+    status: 'optional'
+  },
+  isCollapsed: {
+    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  spacing: {
+    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',
+    type: 'Various',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const BreadcrumbEvents = {
+  onClick: {
+    doc: 'will be called by user click interaction, to handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+export const BreadcrumbItemProperties = {
+  text: {
+    doc: 'Text displaying inside Breadcrumb item.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'The component variant. Options: `home` | `previous` | `current`.',
+    type: ['home', 'previous', 'current'],
+    status: 'optional'
+  },
+  icon: {
+    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  href: {
+    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+export const BreadcrumbItemEvents = {
+  onClick: {
+    doc: 'will be called by user click interaction.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=BreadcrumbDocs.js.map

package/es/components/breadcrumb/BreadcrumbDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbDocs.js","names":["BreadcrumbProperties","data","doc","type","status","children","variant","href","navText","goBackText","homeText","backToText","styleType","collapsedStyleType","className","isCollapsed","spacing","skeleton","BreadcrumbEvents","onClick","BreadcrumbItemProperties","text","icon","BreadcrumbItemEvents"],"sources":["../../../../src/components/breadcrumb/BreadcrumbDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BreadcrumbProperties: PropertiesTableProps = {\n  data: {\n    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',\n    type: 'Array<BreadcrumbItemProps>',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: \"Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .\",\n    type: ['responsive', 'single', 'multiple', 'collapse'],\n    status: 'optional',\n  },\n  href: {\n    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',\n    type: 'string',\n    status: 'optional',\n  },\n  navText: {\n    doc: 'Every `<nav>` on a page needs an unique aria-label text.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  goBackText: {\n    doc: \"Override with a custom 'Back' text for variant `single` (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  homeText: {\n    doc: \"Override with a custom 'Home' text (Not recommended)\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  backToText: {\n    doc: \"Override with a custom 'Back to...' text (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  styleType: {\n    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  collapsedStyleType: {\n    doc: 'Use one of the Section component variants. Defaults to `info`.',\n    type: ['error', 'info', 'warning', 'success'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component root.',\n    type: 'string',\n    status: 'optional',\n  },\n  isCollapsed: {\n    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',\n    type: 'Various',\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  '[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 BreadcrumbEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction, to handle click event on \"Back\" for variant `single` and \"Back to...\" for variant `collapse`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemProperties: PropertiesTableProps = {\n  text: {\n    doc: 'Text displaying inside Breadcrumb item.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'The component variant. Options: `home` | `previous` | `current`.',\n    type: ['home', 'previous', 'current'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  href: {\n    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',\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}\n\nexport const BreadcrumbItemEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/es/components/button/Button.d.ts

@@ -160,9 +160,6 @@ export type ButtonProps = {
    * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.
    */
   element?: ButtonElement;
-  /**
-   * Will be called on a click event. Returns an object with the native event: `{ event }`.
-   */
   on_click?: ButtonOnClick;
 } & Partial<
   DataAttributeTypes &

package/es/components/button/ButtonDocs.d.ts

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

package/es/components/button/ButtonDocs.js

@@ -125,4 +125,11 @@ export const ButtonProperties = {
     status: 'optional'
   }
 };
+export const ButtonEvents = {
+  on_click: {
+    doc: 'will be called on a click event. Returns an object with the native event: `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
 //# sourceMappingURL=ButtonDocs.js.map

package/es/components/button/ButtonDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDocs.js","names":["ButtonProperties","type","doc","status","text","title","variant","size","icon","icon_position","icon_size","href","target","rel","to","wrap","stretch","bounding","element","custom_content","skeleton","tooltip","status_state","status_props","globalStatus"],"sources":["../../../../src/components/button/ButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ButtonProperties: PropertiesTableProps = {\n  type: {\n    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',\n    type: ['button', 'reset', 'submit'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'The content of the button can be a string or a React Element.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  'aria-label': {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',\n    type: ['small', 'medium', 'default', 'large'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',\n    type: ['left', 'right', 'top'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  href: {\n    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',\n    type: 'string',\n    status: 'optional',\n  },\n  target: {\n    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',\n    type: ['_self', '_blank', '_parent', '_top'],\n    status: 'optional',\n  },\n  rel: {\n    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',\n    type: 'string',\n    status: 'optional',\n  },\n  to: {\n    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',\n    type: 'string',\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bounding: {\n    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',\n    type: 'string',\n    status: 'optional',\n  },\n  custom_content: {\n    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',\n    type: 'React.ReactNode',\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  tooltip: {\n    doc: 'Provide a string or a React Element to be shown as the tooltip content.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Set it to either `status=\"error\"` or a 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: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ButtonDocs.js","names":["ButtonProperties","type","doc","status","text","title","variant","size","icon","icon_position","icon_size","href","target","rel","to","wrap","stretch","bounding","element","custom_content","skeleton","tooltip","status_state","status_props","globalStatus","ButtonEvents","on_click"],"sources":["../../../../src/components/button/ButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ButtonProperties: PropertiesTableProps = {\n  type: {\n    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',\n    type: ['button', 'reset', 'submit'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'The content of the button can be a string or a React Element.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  'aria-label': {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',\n    type: ['small', 'medium', 'default', 'large'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',\n    type: ['left', 'right', 'top'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  href: {\n    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',\n    type: 'string',\n    status: 'optional',\n  },\n  target: {\n    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',\n    type: ['_self', '_blank', '_parent', '_top'],\n    status: 'optional',\n  },\n  rel: {\n    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',\n    type: 'string',\n    status: 'optional',\n  },\n  to: {\n    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',\n    type: 'string',\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bounding: {\n    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',\n    type: 'string',\n    status: 'optional',\n  },\n  custom_content: {\n    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',\n    type: 'React.ReactNode',\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  tooltip: {\n    doc: 'Provide a string or a React Element to be shown as the tooltip content.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Set it to either `status=\"error\"` or a 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: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\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 ButtonEvents: PropertiesTableProps = {\n  on_click: {\n    doc: 'will be called on a click event. Returns an object with the native event: `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/es/components/date-picker/DatePickerAddon.js

@@ -13,7 +13,6 @@ import DatePickerContext from './DatePickerContext';
 function DatePickerAddon(props) {
   const {
     updateDates,
-    forceViewMonthChange,
     callOnChangeHandler,
     hidePicker,
     startDate,
@@ -37,13 +36,12 @@ function DatePickerAddon(props) {
       startDate,
       endDate
     });
-    forceViewMonthChange();
     callOnChangeHandler({
       startDate,
       endDate: endDate || startDate,
       event
     });
-  }, [updateDates, callOnChangeHandler, forceViewMonthChange]);
+  }, [updateDates, callOnChangeHandler]);
   const setDate = useCallback(({
     shortcut,
     event