@dnb/eufemia 10.55.0 → 10.56.0

package/es/elements/lists/Dl.d.ts

@@ -15,7 +15,7 @@ export type DlProps = {
      */
     direction?: 'vertical' | 'horizontal';
 };
-export type DlAllProps = DlProps & React.AllHTMLAttributes<HTMLDListElement> & ElementProps;
+export type DlAllProps = DlProps & React.AllHTMLAttributes<HTMLDListElement> & Omit<ElementProps, 'skeleton' | 'skeletonMethod'>;
 declare const Dl: {
     ({ direction, layout, ...props }: DlAllProps): import("react/jsx-runtime").JSX.Element;
     Item({ className, children, ...props }: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/lists/Dl.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","layout","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  layout?: 'vertical' | 'horizontal' | 'grid'\n\n  /**\n   * @deprecated Use layout instead\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  ElementProps\n\nconst Dl = ({ direction, layout, ...props }: DlAllProps) => {\n  if (layout || direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__layout--${layout || direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAmB5C,MAAMC,EAAE,GAAGC,IAAA,IAAiD;EAAA,IAAhD;MAAEC,SAAS;MAAEC;IAA6B,CAAC,GAAAF,IAAA;IAAnBG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACvC,IAAIH,MAAM,IAAID,SAAS,EAAE;IACvBE,KAAK,CAACG,SAAS,GAAGT,UAAU,CAC1BM,KAAK,CAACG,SAAS,EACd,mBAAkBJ,MAAM,IAAID,SAAU,EACzC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDX,EAAE,CAACY,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACElB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAmB,QAAA,QACGF,QAAQ,EACTjB,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAET,UAAU,CAACS,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDJ,EAAE,CAACiB,qBAAqB,GAAG,IAAI;AAE/B,eAAejB,EAAE"}
+{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","layout","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  layout?: 'vertical' | 'horizontal' | 'grid'\n\n  /**\n   * @deprecated Use layout instead\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  Omit<ElementProps, 'skeleton' | 'skeletonMethod'>\n\nconst Dl = ({ direction, layout, ...props }: DlAllProps) => {\n  if (layout || direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__layout--${layout || direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAmB5C,MAAMC,EAAE,GAAGC,IAAA,IAAiD;EAAA,IAAhD;MAAEC,SAAS;MAAEC;IAA6B,CAAC,GAAAF,IAAA;IAAnBG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACvC,IAAIH,MAAM,IAAID,SAAS,EAAE;IACvBE,KAAK,CAACG,SAAS,GAAGT,UAAU,CAC1BM,KAAK,CAACG,SAAS,EACd,mBAAkBJ,MAAM,IAAID,SAAU,EACzC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDX,EAAE,CAACY,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACElB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAmB,QAAA,QACGF,QAAQ,EACTjB,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAET,UAAU,CAACS,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDJ,EAAE,CAACiB,qBAAqB,GAAG,IAAI;AAE/B,eAAejB,EAAE"}

package/es/elements/lists/DlDocs.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { ElementProperties } from './../ElementDocs';
+import { ElementPropertiesWithoutSkeleton } from './../ElementDocs';
 export const DlProperties = _objectSpread({
   layout: {
     doc: 'Sets the layout of the list. Can be `vertical`, `horizontal` or `grid`. Defaults to `vertical`.',
     type: 'string',
     status: 'optional'
   }
-}, ElementProperties);
+}, ElementPropertiesWithoutSkeleton);
 //# sourceMappingURL=DlDocs.js.map

package/es/elements/lists/DlDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DlDocs.js","names":["ElementProperties","DlProperties","_objectSpread","layout","doc","type","status"],"sources":["../../../../src/elements/lists/DlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { ElementProperties } from './../ElementDocs'\n\nexport const DlProperties: PropertiesTableProps = {\n  layout: {\n    doc: 'Sets the layout of the list. Can be `vertical`, `horizontal` or `grid`. Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n\n  ...ElementProperties,\n}\n"],"mappings":";;;AACA,SAASA,iBAAiB,QAAQ,kBAAkB;AAEpD,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,iGAAiG;IACtGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AAAC,GAEEN,iBAAiB,CACrB"}
+{"version":3,"file":"DlDocs.js","names":["ElementPropertiesWithoutSkeleton","DlProperties","_objectSpread","layout","doc","type","status"],"sources":["../../../../src/elements/lists/DlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { ElementPropertiesWithoutSkeleton } from './../ElementDocs'\n\nexport const DlProperties: PropertiesTableProps = {\n  layout: {\n    doc: 'Sets the layout of the list. Can be `vertical`, `horizontal` or `grid`. Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  ...ElementPropertiesWithoutSkeleton,\n}\n"],"mappings":";;;AACA,SAASA,gCAAgC,QAAQ,kBAAkB;AAEnE,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,iGAAiG;IACtGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AAAC,GACEN,gCAAgC,CACpC"}

package/es/elements/lists/Li.d.ts

@@ -5,5 +5,5 @@
 import React from 'react';
 import { ElementProps } from '../Element';
 export type LiAllProps = React.AllHTMLAttributes<HTMLLIElement> & ElementProps;
-declare const Li: ({ className, ...p }?: LiAllProps) => import("react/jsx-runtime").JSX.Element;
+declare const Li: ({ className, ...props }?: LiAllProps) => import("react/jsx-runtime").JSX.Element;
 export default Li;

package/es/elements/lists/Li.js

@@ -10,9 +10,9 @@ const Li = (_ref = {}) => {
   let {
       className
     } = _ref,
-    p = _objectWithoutProperties(_ref, _excluded);
-  if (Array.isArray(p.children)) {
-    p.children.forEach(Comp => {
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (Array.isArray(props.children)) {
+    props.children.forEach(Comp => {
       if (Comp && (Comp.type === Ul || Comp.type === Ol)) {
         className = classnames(className, 'is-nested');
       }
@@ -20,7 +20,7 @@ const Li = (_ref = {}) => {
   }
   return React.createElement(E, _extends({
     as: "li"
-  }, p, {
+  }, props, {
     className: className
   }));
 };

package/es/elements/lists/Li.js.map

@@ -1 +1 @@
-{"version":3,"file":"Li.js","names":["React","classnames","E","Ul","Ol","Li","_ref","className","p","_objectWithoutProperties","_excluded","Array","isArray","children","forEach","Comp","type","createElement","_extends","as"],"sources":["../../../../src/elements/lists/Li.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport Ul from './Ul'\nimport Ol from './Ol'\n\nexport type LiAllProps = React.AllHTMLAttributes<HTMLLIElement> &\n  ElementProps\n\nconst Li = ({ className, ...p }: LiAllProps = {}) => {\n  /**\n   * Check if we have a nested list,\n   * then we set the class \"is-nested\" and give it a max-height,\n   * if it is a skeleton\n   */\n\n  if (Array.isArray(p.children)) {\n    p.children.forEach((Comp) => {\n      if (Comp && (Comp.type === Ul || Comp.type === Ol)) {\n        className = classnames(className, 'is-nested')\n      }\n    })\n  }\n\n  return <E as=\"li\" {...p} className={className} />\n}\n\nexport default Li\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAC5C,OAAOC,EAAE,MAAM,MAAM;AACrB,OAAOC,EAAE,MAAM,MAAM;AAKrB,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAkC,CAAC,CAAC,KAAK;EAAA,IAAzC;MAAEC;IAA4B,CAAC,GAAAD,IAAA;IAAfE,CAAC,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAO3B,IAAIC,KAAK,CAACC,OAAO,CAACJ,CAAC,CAACK,QAAQ,CAAC,EAAE;IAC7BL,CAAC,CAACK,QAAQ,CAACC,OAAO,CAAEC,IAAI,IAAK;MAC3B,IAAIA,IAAI,KAAKA,IAAI,CAACC,IAAI,KAAKb,EAAE,IAAIY,IAAI,CAACC,IAAI,KAAKZ,EAAE,CAAC,EAAE;QAClDG,SAAS,GAAGN,UAAU,CAACM,SAAS,EAAE,WAAW,CAAC;MAChD;IACF,CAAC,CAAC;EACJ;EAEA,OAAOP,KAAA,CAAAiB,aAAA,CAACf,CAAC,EAAAgB,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKX,CAAC;IAAED,SAAS,EAAEA;EAAU,EAAE,CAAC;AACnD,CAAC;AAED,eAAeF,EAAE"}
+{"version":3,"file":"Li.js","names":["React","classnames","E","Ul","Ol","Li","_ref","className","props","_objectWithoutProperties","_excluded","Array","isArray","children","forEach","Comp","type","createElement","_extends","as"],"sources":["../../../../src/elements/lists/Li.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport Ul from './Ul'\nimport Ol from './Ol'\n\nexport type LiAllProps = React.AllHTMLAttributes<HTMLLIElement> &\n  ElementProps\n\nconst Li = ({ className, ...props }: LiAllProps = {}) => {\n  /**\n   * Check if we have a nested list,\n   * then we set the class \"is-nested\" and give it a max-height,\n   * if it is a skeleton\n   */\n\n  if (Array.isArray(props.children)) {\n    props.children.forEach((Comp) => {\n      if (Comp && (Comp.type === Ul || Comp.type === Ol)) {\n        className = classnames(className, 'is-nested')\n      }\n    })\n  }\n\n  return <E as=\"li\" {...props} className={className} />\n}\n\nexport default Li\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAC5C,OAAOC,EAAE,MAAM,MAAM;AACrB,OAAOC,EAAE,MAAM,MAAM;AAKrB,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAsC,CAAC,CAAC,KAAK;EAAA,IAA7C;MAAEC;IAAgC,CAAC,GAAAD,IAAA;IAAnBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAO/B,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAACK,QAAQ,CAAC,EAAE;IACjCL,KAAK,CAACK,QAAQ,CAACC,OAAO,CAAEC,IAAI,IAAK;MAC/B,IAAIA,IAAI,KAAKA,IAAI,CAACC,IAAI,KAAKb,EAAE,IAAIY,IAAI,CAACC,IAAI,KAAKZ,EAAE,CAAC,EAAE;QAClDG,SAAS,GAAGN,UAAU,CAACM,SAAS,EAAE,WAAW,CAAC;MAChD;IACF,CAAC,CAAC;EACJ;EAEA,OAAOP,KAAA,CAAAiB,aAAA,CAACf,CAAC,EAAAgB,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKX,KAAK;IAAED,SAAS,EAAEA;EAAU,EAAE,CAAC;AACvD,CAAC;AAED,eAAeF,EAAE"}

package/es/elements/lists/Ol.d.ts

@@ -18,9 +18,9 @@ export type OlProps = {
      */
     nested?: boolean;
 };
-export type OlAllProps = OlProps & React.AllHTMLAttributes<HTMLOListElement> & ElementProps;
+export type OlAllProps = OlProps & React.AllHTMLAttributes<HTMLOListElement> & Omit<ElementProps, 'skeleton' | 'skeletonMethod'>;
 declare const Ol: {
-    ({ nested, inside, outside, ...p }?: OlAllProps): import("react/jsx-runtime").JSX.Element;
+    ({ nested, inside, outside, ...props }?: OlAllProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };
 export default Ol;

package/es/elements/lists/Ol.js

@@ -10,11 +10,11 @@ const Ol = (_ref = {}) => {
       inside,
       outside
     } = _ref,
-    p = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(E, _extends({
     as: "ol"
-  }, p, {
-    className: classnames(p.className, nested && 'dnb-ol--nested', inside && 'dnb-ol--inside', outside && 'dnb-ol--outside'),
+  }, props, {
+    className: classnames(props.className, nested && 'dnb-ol--nested', inside && 'dnb-ol--inside', outside && 'dnb-ol--outside'),
     skeleton: false
   }));
 };

package/es/elements/lists/Ol.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ol.js","names":["React","classnames","E","Ol","_ref","nested","inside","outside","p","_objectWithoutProperties","_excluded","createElement","_extends","as","className","skeleton","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Ol.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\n\nexport type OlProps = {\n  /**\n   * Defines the position of the marker\n   */\n  inside?: boolean\n\n  /**\n   * Defines the position of the marker (default)\n   */\n  outside?: boolean\n\n  /**\n   * Will ensure a nested structure of several lists\n   */\n  nested?: boolean\n}\n\nexport type OlAllProps = OlProps &\n  React.AllHTMLAttributes<HTMLOListElement> &\n  ElementProps\n\nconst Ol = ({ nested, inside, outside, ...p }: OlAllProps = {}) => {\n  return (\n    <E\n      as=\"ol\"\n      {...p}\n      className={classnames(\n        p.className,\n        nested && 'dnb-ol--nested',\n        inside && 'dnb-ol--inside',\n        outside && 'dnb-ol--outside'\n      )}\n      skeleton={false}\n    />\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nOl._supportsSpacingProps = true\n\nexport default Ol\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAuB5C,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAgD,CAAC,CAAC,KAAK;EAAA,IAAvD;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAA0B,CAAC,GAAAH,IAAA;IAAfI,CAAC,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACzC,OACEV,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC;EAAI,GACHL,CAAC;IACLM,SAAS,EAAEb,UAAU,CACnBO,CAAC,CAACM,SAAS,EACXT,MAAM,IAAI,gBAAgB,EAC1BC,MAAM,IAAI,gBAAgB,EAC1BC,OAAO,IAAI,iBACb,CAAE;IACFQ,QAAQ,EAAE;EAAM,EACjB,CAAC;AAEN,CAAC;AAIDZ,EAAE,CAACa,qBAAqB,GAAG,IAAI;AAE/B,eAAeb,EAAE"}
+{"version":3,"file":"Ol.js","names":["React","classnames","E","Ol","_ref","nested","inside","outside","props","_objectWithoutProperties","_excluded","createElement","_extends","as","className","skeleton","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Ol.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\n\nexport type OlProps = {\n  /**\n   * Defines the position of the marker\n   */\n  inside?: boolean\n\n  /**\n   * Defines the position of the marker (default)\n   */\n  outside?: boolean\n\n  /**\n   * Will ensure a nested structure of several lists\n   */\n  nested?: boolean\n}\n\nexport type OlAllProps = OlProps &\n  React.AllHTMLAttributes<HTMLOListElement> &\n  Omit<ElementProps, 'skeleton' | 'skeletonMethod'>\n\nconst Ol = ({ nested, inside, outside, ...props }: OlAllProps = {}) => {\n  return (\n    <E\n      as=\"ol\"\n      {...props}\n      className={classnames(\n        props.className,\n        nested && 'dnb-ol--nested',\n        inside && 'dnb-ol--inside',\n        outside && 'dnb-ol--outside'\n      )}\n      skeleton={false}\n    />\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nOl._supportsSpacingProps = true\n\nexport default Ol\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAuB5C,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAoD,CAAC,CAAC,KAAK;EAAA,IAA3D;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAA8B,CAAC,GAAAH,IAAA;IAAnBI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC7C,OACEV,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC;EAAI,GACHL,KAAK;IACTM,SAAS,EAAEb,UAAU,CACnBO,KAAK,CAACM,SAAS,EACfT,MAAM,IAAI,gBAAgB,EAC1BC,MAAM,IAAI,gBAAgB,EAC1BC,OAAO,IAAI,iBACb,CAAE;IACFQ,QAAQ,EAAE;EAAM,EACjB,CAAC;AAEN,CAAC;AAIDZ,EAAE,CAACa,qBAAqB,GAAG,IAAI;AAE/B,eAAeb,EAAE"}

package/es/elements/lists/OlDocs.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { ElementProperties } from './../ElementDocs';
+import { ElementPropertiesWithoutSkeleton } from './../ElementDocs';
 export const OlProperties = _objectSpread({
   inside: {
     doc: 'Defines the position of the marker.',
@@ -18,5 +18,5 @@ export const OlProperties = _objectSpread({
     type: 'boolean',
     status: 'optional'
   }
-}, ElementProperties);
+}, ElementPropertiesWithoutSkeleton);
 //# sourceMappingURL=OlDocs.js.map

package/es/elements/lists/OlDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OlDocs.js","names":["ElementProperties","OlProperties","_objectSpread","inside","doc","type","status","outside","nested"],"sources":["../../../../src/elements/lists/OlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nimport { ElementProperties } from './../ElementDocs'\n\nexport const OlProperties: PropertiesTableProps = {\n  inside: {\n    doc: 'Defines the position of the marker.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outside: {\n    doc: 'Defines the position of the marker (default).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nested: {\n    doc: 'Will ensure a nested structure of several lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  ...ElementProperties,\n}\n"],"mappings":";;;AAEA,SAASA,iBAAiB,QAAQ,kBAAkB;AAEpD,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,GACEN,iBAAiB,CACrB"}
+{"version":3,"file":"OlDocs.js","names":["ElementPropertiesWithoutSkeleton","OlProperties","_objectSpread","inside","doc","type","status","outside","nested"],"sources":["../../../../src/elements/lists/OlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nimport { ElementPropertiesWithoutSkeleton } from './../ElementDocs'\n\nexport const OlProperties: PropertiesTableProps = {\n  inside: {\n    doc: 'Defines the position of the marker.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outside: {\n    doc: 'Defines the position of the marker (default).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nested: {\n    doc: 'Will ensure a nested structure of several lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  ...ElementPropertiesWithoutSkeleton,\n}\n"],"mappings":";;;AAEA,SAASA,gCAAgC,QAAQ,kBAAkB;AAEnE,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,GACEN,gCAAgC,CACpC"}

package/es/elements/lists/Ul.d.ts

@@ -18,9 +18,9 @@ export type UlProps = {
      */
     nested?: boolean;
 };
-export type UlAllProps = UlProps & React.AllHTMLAttributes<HTMLUListElement> & ElementProps;
+export type UlAllProps = UlProps & React.AllHTMLAttributes<HTMLUListElement> & Omit<ElementProps, 'skeleton' | 'skeletonMethod'>;
 declare const Ul: {
-    ({ nested, inside, outside, ...p }?: UlAllProps): import("react/jsx-runtime").JSX.Element;
+    ({ nested, inside, outside, ...props }?: UlAllProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };
 export default Ul;

package/es/elements/lists/Ul.js

@@ -10,11 +10,11 @@ const Ul = (_ref = {}) => {
       inside,
       outside
     } = _ref,
-    p = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(E, _extends({
     as: "ul"
-  }, p, {
-    className: classnames(p.className, nested && 'dnb-ol--nested', inside && 'dnb-ol--inside', outside && 'dnb-ol--outside'),
+  }, props, {
+    className: classnames(props.className, nested && 'dnb-ol--nested', inside && 'dnb-ol--inside', outside && 'dnb-ol--outside'),
     skeleton: false
   }));
 };

package/es/elements/lists/Ul.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ul.js","names":["React","classnames","E","Ul","_ref","nested","inside","outside","p","_objectWithoutProperties","_excluded","createElement","_extends","as","className","skeleton","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Ul.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\n\nexport type UlProps = {\n  /**\n   * Defines the position of the marker\n   */\n  inside?: boolean\n\n  /**\n   * Defines the position of the marker (default)\n   */\n  outside?: boolean\n\n  /**\n   * Will ensure a nested structure of several lists\n   */\n  nested?: boolean\n}\n\nexport type UlAllProps = UlProps &\n  React.AllHTMLAttributes<HTMLUListElement> &\n  ElementProps\n\nconst Ul = ({ nested, inside, outside, ...p }: UlAllProps = {}) => {\n  return (\n    <E\n      as=\"ul\"\n      {...p}\n      className={classnames(\n        p.className,\n        nested && 'dnb-ol--nested',\n        inside && 'dnb-ol--inside',\n        outside && 'dnb-ol--outside'\n      )}\n      skeleton={false}\n    />\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nUl._supportsSpacingProps = true\n\nexport default Ul\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAuB5C,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAgD,CAAC,CAAC,KAAK;EAAA,IAAvD;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAA0B,CAAC,GAAAH,IAAA;IAAfI,CAAC,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACzC,OACEV,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC;EAAI,GACHL,CAAC;IACLM,SAAS,EAAEb,UAAU,CACnBO,CAAC,CAACM,SAAS,EACXT,MAAM,IAAI,gBAAgB,EAC1BC,MAAM,IAAI,gBAAgB,EAC1BC,OAAO,IAAI,iBACb,CAAE;IACFQ,QAAQ,EAAE;EAAM,EACjB,CAAC;AAEN,CAAC;AAIDZ,EAAE,CAACa,qBAAqB,GAAG,IAAI;AAE/B,eAAeb,EAAE"}
+{"version":3,"file":"Ul.js","names":["React","classnames","E","Ul","_ref","nested","inside","outside","props","_objectWithoutProperties","_excluded","createElement","_extends","as","className","skeleton","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Ul.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\n\nexport type UlProps = {\n  /**\n   * Defines the position of the marker\n   */\n  inside?: boolean\n\n  /**\n   * Defines the position of the marker (default)\n   */\n  outside?: boolean\n\n  /**\n   * Will ensure a nested structure of several lists\n   */\n  nested?: boolean\n}\n\nexport type UlAllProps = UlProps &\n  React.AllHTMLAttributes<HTMLUListElement> &\n  Omit<ElementProps, 'skeleton' | 'skeletonMethod'>\n\nconst Ul = ({ nested, inside, outside, ...props }: UlAllProps = {}) => {\n  return (\n    <E\n      as=\"ul\"\n      {...props}\n      className={classnames(\n        props.className,\n        nested && 'dnb-ol--nested',\n        inside && 'dnb-ol--inside',\n        outside && 'dnb-ol--outside'\n      )}\n      skeleton={false}\n    />\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nUl._supportsSpacingProps = true\n\nexport default Ul\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAuB5C,MAAMC,EAAE,GAAGA,CAACC,IAAA,GAAoD,CAAC,CAAC,KAAK;EAAA,IAA3D;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAA8B,CAAC,GAAAH,IAAA;IAAnBI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC7C,OACEV,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC;EAAI,GACHL,KAAK;IACTM,SAAS,EAAEb,UAAU,CACnBO,KAAK,CAACM,SAAS,EACfT,MAAM,IAAI,gBAAgB,EAC1BC,MAAM,IAAI,gBAAgB,EAC1BC,OAAO,IAAI,iBACb,CAAE;IACFQ,QAAQ,EAAE;EAAM,EACjB,CAAC;AAEN,CAAC;AAIDZ,EAAE,CAACa,qBAAqB,GAAG,IAAI;AAE/B,eAAeb,EAAE"}

package/es/elements/lists/UlDocs.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { ElementProperties } from './../ElementDocs';
+import { ElementPropertiesWithoutSkeleton } from './../ElementDocs';
 export const UlProperties = _objectSpread({
   inside: {
     doc: 'Defines the position of the marker.',
@@ -18,5 +18,5 @@ export const UlProperties = _objectSpread({
     type: 'boolean',
     status: 'optional'
   }
-}, ElementProperties);
+}, ElementPropertiesWithoutSkeleton);
 //# sourceMappingURL=UlDocs.js.map

package/es/elements/lists/UlDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UlDocs.js","names":["ElementProperties","UlProperties","_objectSpread","inside","doc","type","status","outside","nested"],"sources":["../../../../src/elements/lists/UlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { ElementProperties } from './../ElementDocs'\n\nexport const UlProperties: PropertiesTableProps = {\n  inside: {\n    doc: 'Defines the position of the marker.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outside: {\n    doc: 'Defines the position of the marker (default).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nested: {\n    doc: 'Will ensure a nested structure of several lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  ...ElementProperties,\n}\n"],"mappings":";;;AACA,SAASA,iBAAiB,QAAQ,kBAAkB;AAEpD,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,GACEN,iBAAiB,CACrB"}
+{"version":3,"file":"UlDocs.js","names":["ElementPropertiesWithoutSkeleton","UlProperties","_objectSpread","inside","doc","type","status","outside","nested"],"sources":["../../../../src/elements/lists/UlDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { ElementPropertiesWithoutSkeleton } from './../ElementDocs'\n\nexport const UlProperties: PropertiesTableProps = {\n  inside: {\n    doc: 'Defines the position of the marker.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outside: {\n    doc: 'Defines the position of the marker (default).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nested: {\n    doc: 'Will ensure a nested structure of several lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  ...ElementPropertiesWithoutSkeleton,\n}\n"],"mappings":";;;AACA,SAASA,gCAAgC,QAAQ,kBAAkB;AAEnE,OAAO,MAAMC,YAAkC,GAAAC,aAAA;EAC7CC,MAAM,EAAE;IACNC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,GACEN,gCAAgC,CACpC"}

package/es/elements/typography/P.d.ts

@@ -11,7 +11,7 @@ export type PProps = SpacingProps & React.HTMLAttributes<HTMLParagraphElement> &
      * Defines the Element Type, like "p"
      * Default: p
      */
-    element?: DynamicElement & 'p';
+    element?: DynamicElement | 'p';
     /**
      * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
      */
@@ -31,8 +31,12 @@ export type PProps = SpacingProps & React.HTMLAttributes<HTMLParagraphElement> &
      */
     modifier?: string;
 };
-declare const P: {
-    ({ modifier, element, className, medium, bold, size, ...props }: PProps): import("react/jsx-runtime").JSX.Element;
-    _supportsSpacingProps: boolean;
-};
+declare function P(props: PProps): import("react/jsx-runtime").JSX.Element;
+declare namespace P {
+    var _supportsSpacingProps: boolean;
+}
 export default P;
+export type ParagraphContextType = {
+    isNested?: boolean;
+};
+export declare const ParagraphContext: React.Context<ParagraphContextType>;

package/es/elements/typography/P.js

@@ -1,20 +1,24 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["modifier", "element", "className", "medium", "bold", "size"];
-import React from 'react';
+const _excluded = ["modifier", "element", "className", "medium", "bold", "size", "children"];
+import React, { createContext, useContext } from 'react';
 import classnames from 'classnames';
 import E from '../Element';
-const P = _ref => {
-  let {
+function P(props) {
+  const {
       modifier,
       element = 'p',
       className,
       medium,
       bold,
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+      size,
+      children
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   const allModifiers = [medium && 'medium', bold && 'bold'];
+  const paragraphContext = useContext(ParagraphContext);
   if (modifier) {
     modifier.split(/\s/g).forEach(modifier => allModifiers.push(modifier));
   }
@@ -24,12 +28,17 @@ const P = _ref => {
     }
     return `${acc} dnb-p--${cur}`;
   }, '');
-  return React.createElement(E, _extends({
-    as: element
-  }, props, {
+  return React.createElement(ParagraphContext.Provider, {
+    value: {
+      isNested: true
+    }
+  }, React.createElement(E, _extends({
+    as: element === 'p' && paragraphContext !== null && paragraphContext !== void 0 && paragraphContext.isNested ? 'span' : element
+  }, rest, {
     className: classnames('dnb-p', modifierString, className, size && `dnb-p__size--${size}`)
-  }));
-};
+  }), children));
+}
 P._supportsSpacingProps = true;
 export default P;
+export const ParagraphContext = createContext(undefined);
 //# sourceMappingURL=P.js.map

package/es/elements/typography/P.js.map

@@ -1 +1 @@
-{"version":3,"file":"P.js","names":["React","classnames","E","P","_ref","modifier","element","className","medium","bold","size","props","_objectWithoutProperties","_excluded","allModifiers","split","forEach","push","modifierString","filter","Boolean","reduce","acc","cur","includes","createElement","_extends","as","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/P.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport type { DynamicElement } from '../../shared/types'\nimport E from '../Element'\n\nexport type PSize =\n  | 'x-small'\n  | 'small'\n  | 'basis'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type PProps = SpacingProps &\n  React.HTMLAttributes<HTMLParagraphElement> & {\n    /**\n     * Defines the Element Type, like \"p\"\n     * Default: p\n     */\n    element?: DynamicElement & 'p'\n    /**\n     * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    medium?: boolean\n    /**\n     * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    bold?: boolean\n    /**\n     * Sets the font size based on size classes defined in paragraphStyle - typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/\n     */\n    size?: PSize\n    /**\n     * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. \"x-small bold\" would make the paragraph extra small and bold.\n     * Works as a flexible alternative to setting the medium, small, bold and size props.\n     * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    modifier?: string\n  }\n\nconst P = ({\n  modifier,\n  element = 'p',\n  className,\n  medium,\n  bold,\n  size,\n  ...props\n}: PProps) => {\n  const allModifiers = [medium && 'medium', bold && 'bold']\n\n  if (modifier) {\n    modifier\n      .split(/\\s/g)\n      .forEach((modifier) => allModifiers.push(modifier))\n  }\n\n  const modifierString = allModifiers\n    .filter(Boolean)\n    .reduce((acc, cur) => {\n      if (['x-small', 'small'].includes(cur)) {\n        return `${acc} dnb-p__size--${cur}`\n      }\n\n      return `${acc} dnb-p--${cur}`\n    }, '')\n\n  return (\n    <E\n      as={element}\n      {...props}\n      className={classnames(\n        'dnb-p',\n        modifierString,\n        className,\n        size && `dnb-p__size--${size}`\n      )}\n    />\n  )\n}\n\nP._supportsSpacingProps = true\n\nexport default P\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,CAAC,MAAM,YAAY;AAsC1B,MAAMC,CAAC,GAAGC,IAAA,IAQI;EAAA,IARH;MACTC,QAAQ;MACRC,OAAO,GAAG,GAAG;MACbC,SAAS;MACTC,MAAM;MACNC,IAAI;MACJC;IAEM,CAAC,GAAAN,IAAA;IADJO,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAER,MAAMC,YAAY,GAAG,CAACN,MAAM,IAAI,QAAQ,EAAEC,IAAI,IAAI,MAAM,CAAC;EAEzD,IAAIJ,QAAQ,EAAE;IACZA,QAAQ,CACLU,KAAK,CAAC,KAAK,CAAC,CACZC,OAAO,CAAEX,QAAQ,IAAKS,YAAY,CAACG,IAAI,CAACZ,QAAQ,CAAC,CAAC;EACvD;EAEA,MAAMa,cAAc,GAAGJ,YAAY,CAChCK,MAAM,CAACC,OAAO,CAAC,CACfC,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IACpB,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,GAAG,CAAC,EAAE;MACtC,OAAQ,GAAED,GAAI,iBAAgBC,GAAI,EAAC;IACrC;IAEA,OAAQ,GAAED,GAAI,WAAUC,GAAI,EAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAER,OACEvB,KAAA,CAAAyB,aAAA,CAACvB,CAAC,EAAAwB,QAAA;IACAC,EAAE,EAAErB;EAAQ,GACRK,KAAK;IACTJ,SAAS,EAAEN,UAAU,CACnB,OAAO,EACPiB,cAAc,EACdX,SAAS,EACTG,IAAI,IAAK,gBAAeA,IAAK,EAC/B;EAAE,EACH,CAAC;AAEN,CAAC;AAEDP,CAAC,CAACyB,qBAAqB,GAAG,IAAI;AAE9B,eAAezB,CAAC"}
+{"version":3,"file":"P.js","names":["React","createContext","useContext","classnames","E","P","props","modifier","element","className","medium","bold","size","children","rest","_objectWithoutProperties","_excluded","allModifiers","paragraphContext","ParagraphContext","split","forEach","push","modifierString","filter","Boolean","reduce","acc","cur","includes","createElement","Provider","value","isNested","_extends","as","_supportsSpacingProps","undefined"],"sources":["../../../../src/elements/typography/P.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React, { createContext, useContext } from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport type { DynamicElement } from '../../shared/types'\nimport E from '../Element'\n\nexport type PSize =\n  | 'x-small'\n  | 'small'\n  | 'basis'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type PProps = SpacingProps &\n  React.HTMLAttributes<HTMLParagraphElement> & {\n    /**\n     * Defines the Element Type, like \"p\"\n     * Default: p\n     */\n    element?: DynamicElement | 'p'\n    /**\n     * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    medium?: boolean\n    /**\n     * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    bold?: boolean\n    /**\n     * Sets the font size based on size classes defined in paragraphStyle - typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/\n     */\n    size?: PSize\n    /**\n     * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. \"x-small bold\" would make the paragraph extra small and bold.\n     * Works as a flexible alternative to setting the medium, small, bold and size props.\n     * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    modifier?: string\n  }\n\nfunction P(props: PProps) {\n  const {\n    modifier,\n    element = 'p',\n    className,\n    medium,\n    bold,\n    size,\n    children,\n    ...rest\n  } = props\n\n  const allModifiers = [medium && 'medium', bold && 'bold']\n  const paragraphContext = useContext(ParagraphContext)\n\n  if (modifier) {\n    modifier\n      .split(/\\s/g)\n      .forEach((modifier) => allModifiers.push(modifier))\n  }\n\n  const modifierString = allModifiers\n    .filter(Boolean)\n    .reduce((acc, cur) => {\n      if (['x-small', 'small'].includes(cur)) {\n        return `${acc} dnb-p__size--${cur}`\n      }\n\n      return `${acc} dnb-p--${cur}`\n    }, '')\n\n  return (\n    <ParagraphContext.Provider value={{ isNested: true }}>\n      <E\n        as={\n          element === 'p' && paragraphContext?.isNested ? 'span' : element\n        }\n        {...rest}\n        className={classnames(\n          'dnb-p',\n          modifierString,\n          className,\n          size && `dnb-p__size--${size}`\n        )}\n      >\n        {children}\n      </E>\n    </ParagraphContext.Provider>\n  )\n}\n\nP._supportsSpacingProps = true\n\nexport default P\n\nexport type ParagraphContextType = {\n  isNested?: boolean\n}\n\nexport const ParagraphContext =\n  createContext<ParagraphContextType>(undefined)\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AACxD,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,CAAC,MAAM,YAAY;AAsC1B,SAASC,CAACA,CAACC,KAAa,EAAE;EACxB,MAAM;MACJC,QAAQ;MACRC,OAAO,GAAG,GAAG;MACbC,SAAS;MACTC,MAAM;MACNC,IAAI;MACJC,IAAI;MACJC;IAEF,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,MAAMC,YAAY,GAAG,CAACP,MAAM,IAAI,QAAQ,EAAEC,IAAI,IAAI,MAAM,CAAC;EACzD,MAAMO,gBAAgB,GAAGhB,UAAU,CAACiB,gBAAgB,CAAC;EAErD,IAAIZ,QAAQ,EAAE;IACZA,QAAQ,CACLa,KAAK,CAAC,KAAK,CAAC,CACZC,OAAO,CAAEd,QAAQ,IAAKU,YAAY,CAACK,IAAI,CAACf,QAAQ,CAAC,CAAC;EACvD;EAEA,MAAMgB,cAAc,GAAGN,YAAY,CAChCO,MAAM,CAACC,OAAO,CAAC,CACfC,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IACpB,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,GAAG,CAAC,EAAE;MACtC,OAAQ,GAAED,GAAI,iBAAgBC,GAAI,EAAC;IACrC;IAEA,OAAQ,GAAED,GAAI,WAAUC,GAAI,EAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAER,OACE5B,KAAA,CAAA8B,aAAA,CAACX,gBAAgB,CAACY,QAAQ;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAK;EAAE,GACnDjC,KAAA,CAAA8B,aAAA,CAAC1B,CAAC,EAAA8B,QAAA;IACAC,EAAE,EACA3B,OAAO,KAAK,GAAG,IAAIU,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEe,QAAQ,GAAG,MAAM,GAAGzB;EAC1D,GACGM,IAAI;IACRL,SAAS,EAAEN,UAAU,CACnB,OAAO,EACPoB,cAAc,EACdd,SAAS,EACTG,IAAI,IAAK,gBAAeA,IAAK,EAC/B;EAAE,IAEDC,QACA,CACsB,CAAC;AAEhC;AAEAR,CAAC,CAAC+B,qBAAqB,GAAG,IAAI;AAE9B,eAAe/B,CAAC;AAMhB,OAAO,MAAMc,gBAAgB,GAC3BlB,aAAa,CAAuBoC,SAAS,CAAC"}

package/es/extensions/forms/Field/ArraySelection/ArraySelection.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ReturnAdditional } from '../../hooks/useFieldProps';
-import { DefaultErrorMessages, FieldHelpProps, FieldProps, Path } from '../../types';
+import { DefaultErrorMessages, FieldProps, Path } from '../../types';
 import { Data } from '../Selection';
 type OptionValue = string | number;
-export type Props = FieldHelpProps & FieldProps<Array<OptionValue> | undefined> & {
+export type Props = FieldProps<Array<OptionValue> | undefined> & {
     children?: React.ReactNode;
     variant?: 'checkbox' | 'button' | 'checkbox-button';
     optionsLayout?: 'horizontal' | 'vertical';

package/es/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -1,19 +1,21 @@
 "use client";
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["value", "error", "title", "help", "className", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext, useMemo } from 'react';
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
 import classnames from 'classnames';
+import { convertJsxToString } from '../../../../shared/component-helper';
+import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps } from '../../hooks';
+import { checkForError } from '../../hooks/useFieldProps';
 import { pickSpacingProps } from '../../../../components/flex/utils';
-import { getStatus, mapOptions } from '../Selection';
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
+import { mapOptions } from '../Selection';
 import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
 function ArraySelection(props) {
@@ -26,10 +28,8 @@ function ArraySelection(props) {
     variant = 'checkbox',
     layout = 'vertical',
     optionsLayout = 'vertical',
-    labelDescription,
     value,
     hasError,
-    help,
     info,
     warning,
     disabled,
@@ -45,13 +45,9 @@ function ArraySelection(props) {
   const dataList = dataPath ? getValueByPath(dataPath) : data;
   const fieldBlockProps = _objectSpread({
     forId: id,
-    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant === 'checkbox' ? 'checkbox' : 'button'} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant === 'checkbox' ? 'checkbox' : 'button'} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout--${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
-    labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
-      size: "small",
-      left: labelDescription ? 'x-small' : false,
-      title: help.title
-    }, help.content) : undefined),
+    labelHeight: 'small',
     disableStatusSummary: true
   }, pickSpacingProps(props));
   const options = useCheckboxOrToggleOptions({
@@ -76,13 +72,9 @@ function ArraySelection(props) {
   });
   switch (variant) {
     case 'checkbox':
-      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        labelHeight: "small"
-      }), options);
+      return React.createElement(FieldBlock, fieldBlockProps, options);
     default:
-      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        labelHeight: "small"
-      }), React.createElement(ToggleButtonGroupContext.Provider, {
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButtonGroupContext.Provider, {
         value: {
           status: hasError ? 'error' : undefined,
           disabled
@@ -125,10 +117,9 @@ export function useCheckboxOrToggleOptions({
       activeData.push(props);
     }
     const label = title !== null && title !== void 0 ? title : children;
-    const status = getStatus(error, info, warning);
     const suffix = help ? React.createElement(HelpButton, {
       size: "small",
-      title: help.title
+      title: convertJsxToString(help.title)
     }, help.content) : undefined;
     const handleSelect = () => {
       const newValue = value !== null && value !== void 0 && value.includes(active) ? value.filter(value => value !== active) : [...(value !== null && value !== void 0 ? value : []), active];
@@ -145,7 +136,7 @@ export function useCheckboxOrToggleOptions({
       value: value,
       disabled: disabled,
       checked: value === null || value === void 0 ? void 0 : value.includes(active),
-      status: (hasError || status) && 'error',
+      status: (hasError || checkForError([error, info, warning])) && 'error',
       suffix: suffix,
       on_change: handleSelect
     }, htmlAttributes, rest));

package/es/extensions/forms/Field/ArraySelection/ArraySelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","Checkbox","HelpButton","ToggleButton","classnames","FieldBlock","useFieldProps","pickSpacingProps","getStatus","mapOptions","ToggleButtonGroupContext","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","labelDescription","value","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","disableStatusSummary","options","useCheckboxOrToggleOptions","handleActiveData","labels","_extends","labelHeight","Provider","status","setFieldProps","optionsCount","Children","count","length","activeData","createOption","i","active","error","rest","_objectWithoutProperties","_excluded","includes","push","label","suffix","handleSelect","newValue","filter","Component","key","text","checked","on_change","result","map","Boolean","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport {\n  DefaultErrorMessages,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus, mapOptions, Data } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<OptionValue> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    /**\n     * The path to the context data (Form.Handler).\n     * The context data object needs to have a `value` and a `title` property.\n     */\n    dataPath?: Path\n\n    /**\n     * Data to be used for the component. The object needs to have a `value` and a `title` property.\n     * The generated options will be placed above given JSX based children.\n     */\n    data?: Data\n\n    errorMessages?: DefaultErrorMessages & {\n      minItems?: string\n      maxItems?: string\n    }\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    labelDescription,\n    value,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    hasError,\n    handleChange,\n    handleActiveData: ({ labels }) => {\n      setDisplayValue(path, labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} labelHeight=\"small\">\n          {options}\n        </FieldBlock>\n      )\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps} labelHeight=\"small\">\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n  handleActiveData,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n  handleActiveData?: (item: { labels: Array<Props['children']> }) => void\n}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const activeData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: active,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(active)) {\n        activeData.push(props)\n      }\n\n      const label = title ?? children\n      const status = getStatus(error, info, warning)\n      const suffix = help ? (\n        <HelpButton size=\"small\" title={help.title}>\n          {help.content}\n        </HelpButton>\n      ) : undefined\n\n      const handleSelect = () => {\n        const newValue = value?.includes(active)\n          ? value.filter((value) => value !== active)\n          : [...(value ?? []), active]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          variant={variant === 'checkbox-button' ? 'checkbox' : undefined}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(active)}\n          status={(hasError || status) && 'error'}\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (handleActiveData) {\n    handleActiveData({\n      labels: activeData.map(({ title, children }) => title ?? children),\n    })\n  }\n\n  if (path) {\n    setFieldProps?.(path + '/arraySelectionData', activeData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","classnames","convertJsxToString","Checkbox","HelpButton","ToggleButton","FieldBlock","useFieldProps","checkForError","pickSpacingProps","ToggleButtonGroupContext","mapOptions","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","value","hasError","info","warning","disabled","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","labelHeight","disableStatusSummary","options","useCheckboxOrToggleOptions","handleActiveData","labels","createElement","Provider","status","undefined","setFieldProps","optionsCount","Children","count","length","activeData","createOption","i","active","error","title","help","rest","_objectWithoutProperties","_excluded","includes","push","label","suffix","size","content","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { DefaultErrorMessages, FieldProps, Path } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { mapOptions, Data } from '../Selection'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldProps<Array<OptionValue> | undefined> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button' | 'checkbox-button'\n  optionsLayout?: 'horizontal' | 'vertical'\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  errorMessages?: DefaultErrorMessages & {\n    minItems?: string\n    maxItems?: string\n  }\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    value,\n    hasError,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout--${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    labelHeight: 'small',\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    hasError,\n    handleChange,\n    handleActiveData: ({ labels }) => {\n      setDisplayValue(path, labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n  handleActiveData,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n  handleActiveData?: (item: { labels: Array<Props['children']> }) => void\n}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const activeData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: active,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(active)) {\n        activeData.push(props)\n      }\n\n      const label = title ?? children\n      const suffix = help ? (\n        <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n          {help.content}\n        </HelpButton>\n      ) : undefined\n\n      const handleSelect = () => {\n        const newValue = value?.includes(active)\n          ? value.filter((value) => value !== active)\n          : [...(value ?? []), active]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          variant={variant === 'checkbox-button' ? 'checkbox' : undefined}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(active)}\n          status={\n            (hasError || checkForError([error, info, warning])) && 'error'\n          }\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (handleActiveData) {\n    handleActiveData({\n      labels: activeData.map(({ title, children }) => title ?? children),\n    })\n  }\n\n  if (path) {\n    setFieldProps?.(path + '/arraySelectionData', activeData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css

@@ -7,18 +7,18 @@
 .dnb-forms-field-array-selection--variant-button {
   --row-gap: var(--spacing-small);
 }
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--row-gap);
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}}
+.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -6,23 +6,23 @@
     --row-gap: var(--spacing-small);
   }
 
-  &--options-layout-vertical &__options {
+  &--options-layout--vertical &__options {
     display: flex;
     flex-flow: column;
     row-gap: var(--row-gap);
   }
-  &--options-layout-vertical#{&}--layout-horizontal {
+  &--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       align-items: flex-start;
     }
   }
-  &--variant-button#{&}--options-layout-vertical#{&}--layout-horizontal {
+  &--variant-button#{&}--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       line-height: 2.5rem;
     }
   }
 
-  &--options-layout-horizontal &__options {
+  &--options-layout--horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);

package/es/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.js

@@ -4,11 +4,6 @@ export const BankAccountNumberProperties = {
     type: 'boolean',
     status: 'optional'
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
-  },
   onBlurValidator: {
     doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',
     type: 'function',