@dnb/eufemia 10.7.0 → 10.9.0

package/es/extensions/forms/Layout/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","forwardSpaceProps","FlexContainer","Section","props","className","direction","spacing","children","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/Section.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from './FlexContainer'\n\nexport type Props = ComponentProps & {\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Section(props: Props) {\n  const { className, direction, spacing, children } = props\n  return (\n    <FlexContainer\n      className={classnames('dnb-forms-section', className)}\n      direction={direction ?? 'column'}\n      spacing={spacing ?? 'small'}\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </FlexContainer>\n  )\n}\n\nSection._supportsEufemiaSpacingProps = true\nexport default Section\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,aAAa,MAEb,iBAAiB;AAQxB,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC7B,MAAM;IAAEC,SAAS;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EACzD,OACEL,KAAA,CAAAU,aAAA,CAACP,aAAa,EAAAQ,QAAA;IACZL,SAAS,EAAEL,UAAU,CAAC,mBAAmB,EAAEK,SAAS,CAAE;IACtDC,SAAS,EAAEA,SAAS,IAAI,QAAS;IACjCC,OAAO,EAAEA,OAAO,IAAI;EAAQ,GACxBN,iBAAiB,CAACG,KAAK,CAAC,GAE3BI,QACY,CAAC;AAEpB;AAEAL,OAAO,CAACQ,4BAA4B,GAAG,IAAI;AAC3C,eAAeR,OAAO"}
+{"version":3,"file":"Section.js","names":["React","classnames","pickSpacingProps","FlexContainer","Section","props","className","direction","spacing","children","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/Section.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps, pickSpacingProps } from '../types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from './FlexContainer'\n\nexport type Props = ComponentProps & {\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Section(props: Props) {\n  const { className, direction, spacing, children } = props\n  return (\n    <FlexContainer\n      className={classnames('dnb-forms-section', className)}\n      direction={direction ?? 'column'}\n      spacing={spacing ?? 'small'}\n      {...pickSpacingProps(props)}\n    >\n      {children}\n    </FlexContainer>\n  )\n}\n\nSection._supportsEufemiaSpacingProps = true\nexport default Section\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAAyBC,gBAAgB,QAAQ,UAAU;AAC3D,OAAOC,aAAa,MAEb,iBAAiB;AAQxB,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC7B,MAAM;IAAEC,SAAS;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EACzD,OACEL,KAAA,CAAAU,aAAA,CAACP,aAAa,EAAAQ,QAAA;IACZL,SAAS,EAAEL,UAAU,CAAC,mBAAmB,EAAEK,SAAS,CAAE;IACtDC,SAAS,EAAEA,SAAS,IAAI,QAAS;IACjCC,OAAO,EAAEA,OAAO,IAAI;EAAQ,GACxBN,gBAAgB,CAACG,KAAK,CAAC,GAE1BI,QACY,CAAC;AAEpB;AAEAL,OAAO,CAACQ,4BAA4B,GAAG,IAAI;AAC3C,eAAeR,OAAO"}

package/es/extensions/forms/Layout/SubHeading.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
+import { ComponentProps } from '../types';
+import type { HeadingLevel } from '../../../components/Heading';
 export type Props = ComponentProps & {
+    level?: HeadingLevel;
     children?: React.ReactNode;
 };
-declare function SubHeading(props: Props): import("react/jsx-runtime").JSX.Element;
+declare function SubHeading({ level, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace SubHeading {
     var _supportsEufemiaSpacingProps: boolean;
 }

package/es/extensions/forms/Layout/SubHeading.js

@@ -1,18 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["level"];
 import React from 'react';
 import classnames from 'classnames';
 import { Heading } from '../../../components';
-import { forwardSpaceProps } from '../utils';
-function SubHeading(props) {
+import { pickSpacingProps } from '../types';
+function SubHeading(_ref) {
+  let {
+      level
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     className,
     children
   } = props;
   return React.createElement(Heading, _extends({
     className: classnames('dnb-forms-sub-heading', className),
-    level: "3",
+    level: level || 3,
     size: "medium"
-  }, forwardSpaceProps(props)), children);
+  }, pickSpacingProps(props)), children);
 }
 SubHeading._supportsEufemiaSpacingProps = true;
 export default SubHeading;

package/es/extensions/forms/Layout/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","size","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      size=\"medium\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC,GAAG;IACTC,IAAI,EAAC;EAAQ,GACTR,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACQ,4BAA4B,GAAG,IAAI;AAC9C,eAAeR,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","pickSpacingProps","SubHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","createElement","_extends","size","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { ComponentProps, pickSpacingProps } from '../types'\nimport type { HeadingLevel } from '../../../components/Heading'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n}\n\nfunction SubHeading({ level, ...props }: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level={level || 3}\n      size=\"medium\"\n      {...pickSpacingProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAAyBC,gBAAgB,QAAQ,UAAU;AAQ3D,SAASC,UAAUA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACnC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EACrC,OACEP,KAAA,CAAAY,aAAA,CAACV,OAAO,EAAAW,QAAA;IACNH,SAAS,EAAET,UAAU,CAAC,uBAAuB,EAAES,SAAS,CAAE;IAC1DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBQ,IAAI,EAAC;EAAQ,GACTX,gBAAgB,CAACI,KAAK,CAAC,GAE1BI,QACM,CAAC;AAEd;AAEAP,UAAU,CAACW,4BAA4B,GAAG,IAAI;AAC9C,eAAeX,UAAU"}

package/es/extensions/forms/Layout/index.d.ts

@@ -7,7 +7,6 @@ import MainHeading from './MainHeading';
 import SubHeading from './SubHeading';
 import Row from './Row';
 import Column from './Column';
-import InfoCardSection from './InfoCardSection';
 declare const Layout: {
     ButtonRow: typeof ButtonRow;
     Card: typeof Card;
@@ -18,6 +17,5 @@ declare const Layout: {
     SubHeading: typeof SubHeading;
     Row: typeof Row;
     Column: typeof Column;
-    InfoCardSection: typeof InfoCardSection;
 };
 export default Layout;

package/es/extensions/forms/Layout/index.js

@@ -7,7 +7,6 @@ import MainHeading from './MainHeading';
 import SubHeading from './SubHeading';
 import Row from './Row';
 import Column from './Column';
-import InfoCardSection from './InfoCardSection';
 const Layout = {
   ButtonRow,
   Card,
@@ -17,8 +16,7 @@ const Layout = {
   MainHeading,
   SubHeading,
   Row,
-  Column,
-  InfoCardSection
+  Column
 };
 export default Layout;
 //# sourceMappingURL=index.js.map

package/es/extensions/forms/Layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ButtonRow","Card","FlexContainer","FlexItem","Section","MainHeading","SubHeading","Row","Column","InfoCardSection","Layout"],"sources":["../../../../../src/extensions/forms/Layout/index.ts"],"sourcesContent":["import ButtonRow from './ButtonRow'\nimport Card from './Card'\nimport FlexContainer from './FlexContainer'\nimport FlexItem from './FlexItem'\nimport Section from './Section'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\nimport Row from './Row'\nimport Column from './Column'\nimport InfoCardSection from './InfoCardSection'\n\nconst Layout = {\n  ButtonRow,\n  Card,\n  FlexContainer,\n  FlexItem,\n  Section,\n  MainHeading,\n  SubHeading,\n  Row,\n  Column,\n  InfoCardSection,\n}\n\nexport default Layout\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,GAAG,MAAM,OAAO;AACvB,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,eAAe,MAAM,mBAAmB;AAE/C,MAAMC,MAAM,GAAG;EACbV,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,GAAG;EACHC,MAAM;EACNC;AACF,CAAC;AAED,eAAeC,MAAM"}
+{"version":3,"file":"index.js","names":["ButtonRow","Card","FlexContainer","FlexItem","Section","MainHeading","SubHeading","Row","Column","Layout"],"sources":["../../../../../src/extensions/forms/Layout/index.ts"],"sourcesContent":["import ButtonRow from './ButtonRow'\nimport Card from './Card'\nimport FlexContainer from './FlexContainer'\nimport FlexItem from './FlexItem'\nimport Section from './Section'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\nimport Row from './Row'\nimport Column from './Column'\n\nconst Layout = {\n  ButtonRow,\n  Card,\n  FlexContainer,\n  FlexItem,\n  Section,\n  MainHeading,\n  SubHeading,\n  Row,\n  Column,\n}\n\nexport default Layout\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,GAAG,MAAM,OAAO;AACvB,OAAOC,MAAM,MAAM,UAAU;AAE7B,MAAMC,MAAM,GAAG;EACbT,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,GAAG;EACHC;AACF,CAAC;AAED,eAAeC,MAAM"}

package/es/extensions/forms/Layout/style/dnb-card.css

@@ -1,8 +1,8 @@
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);

package/es/extensions/forms/Layout/style/dnb-card.min.css

@@ -1 +1 @@
-.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}
+.dnb-forms-card{background-color:var(--color-white);border:.25rem solid var(--color-pistachio);border-radius:.75rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}

package/es/extensions/forms/Layout/style/dnb-card.scss

@@ -1,9 +1,11 @@
 .dnb-forms-card {
+  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large)
+    var(--spacing-medium);
+
   background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
-  
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
+
   &__heading {
     font-size: var(--font-size-basis);
     font-weight: var(--font-weight-medium);

package/es/extensions/forms/Layout/style/dnb-flex-container.css

@@ -60,4 +60,13 @@
   grid-column-gap: var(--spacing-medium);
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
+}
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
 }

package/es/extensions/forms/Layout/style/dnb-flex-container.min.css

@@ -1 +1 @@
-.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}
+.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}

package/es/extensions/forms/Layout/style/dnb-flex-container.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 .dnb-forms-flex-container {
   display: flex;
 
@@ -81,4 +83,16 @@
   &--direction-row.dnb-forms-flex-container--spacing-medium {
     column-gap: var(--spacing-medium);
   }
+
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
 }

package/es/extensions/forms/Layout/style/dnb-flex-item.css

@@ -3,4 +3,13 @@
 }
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
+}
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
 }

package/es/extensions/forms/Layout/style/dnb-flex-item.min.css

@@ -1 +1 @@
-.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}
+.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}

package/es/extensions/forms/Layout/style/dnb-flex-item.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 .dnb-forms-flex-item {
   &--grow {
     flex-grow: 1;
@@ -6,4 +8,16 @@
   &--shrink {
     flex-shrink: 1;
   }
+
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
 }

package/es/extensions/forms/StepsLayout/Buttons.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from '../component-types';
+import { ComponentProps } from '../types';
 export type Props = ComponentProps & {
     children?: string;
 };

package/es/extensions/forms/StepsLayout/Buttons.js

@@ -2,17 +2,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _PreviousButton, _NextButton;
 import React from 'react';
 import classnames from 'classnames';
+import { pickSpacingProps } from '../types';
 import ButtonRow from '../Layout/ButtonRow';
 import NextButton from './NextButton';
 import PreviousButton from './PreviousButton';
-import { forwardSpaceProps } from '../utils';
 function Buttons(props) {
   const {
     className
   } = props;
   return React.createElement(ButtonRow, _extends({
     className: classnames('dnb-forms-buttons', className)
-  }, forwardSpaceProps(props)), _PreviousButton || (_PreviousButton = React.createElement(PreviousButton, null)), _NextButton || (_NextButton = React.createElement(NextButton, null)));
+  }, pickSpacingProps(props)), _PreviousButton || (_PreviousButton = React.createElement(PreviousButton, null)), _NextButton || (_NextButton = React.createElement(NextButton, null)));
 }
 Buttons._supportsEufemiaSpacingProps = true;
 export default Buttons;

package/es/extensions/forms/StepsLayout/Buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.js","names":["React","classnames","ButtonRow","NextButton","PreviousButton","forwardSpaceProps","Buttons","props","className","createElement","_extends","_PreviousButton","_NextButton","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/Buttons.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../component-types'\nimport ButtonRow from '../Layout/ButtonRow'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport { forwardSpaceProps } from '../utils'\n\nexport type Props = ComponentProps & {\n  children?: string\n}\n\nfunction Buttons(props: Props) {\n  const { className } = props\n  return (\n    <ButtonRow\n      className={classnames('dnb-forms-buttons', className)}\n      {...forwardSpaceProps(props)}\n    >\n      <PreviousButton />\n      <NextButton />\n    </ButtonRow>\n  )\n}\n\nButtons._supportsEufemiaSpacingProps = true\nexport default Buttons\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,SAAS,MAAM,qBAAqB;AAC3C,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAM5C,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC7B,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAC3B,OACEP,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAQ,QAAA;IACRF,SAAS,EAAEP,UAAU,CAAC,mBAAmB,EAAEO,SAAS;EAAE,GAClDH,iBAAiB,CAACE,KAAK,CAAC,GAAAI,eAAA,KAAAA,eAAA,GAE5BX,KAAA,CAAAS,aAAA,CAACL,cAAc,MAAE,CAAC,GAAAQ,WAAA,KAAAA,WAAA,GAClBZ,KAAA,CAAAS,aAAA,CAACN,UAAU,MAAE,CAAC,CACL,CAAC;AAEhB;AAEAG,OAAO,CAACO,4BAA4B,GAAG,IAAI;AAC3C,eAAeP,OAAO"}
+{"version":3,"file":"Buttons.js","names":["React","classnames","pickSpacingProps","ButtonRow","NextButton","PreviousButton","Buttons","props","className","createElement","_extends","_PreviousButton","_NextButton","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/Buttons.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps, pickSpacingProps } from '../types'\nimport ButtonRow from '../Layout/ButtonRow'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\n\nexport type Props = ComponentProps & {\n  children?: string\n}\n\nfunction Buttons(props: Props) {\n  const { className } = props\n  return (\n    <ButtonRow\n      className={classnames('dnb-forms-buttons', className)}\n      {...pickSpacingProps(props)}\n    >\n      <PreviousButton />\n      <NextButton />\n    </ButtonRow>\n  )\n}\n\nButtons._supportsEufemiaSpacingProps = true\nexport default Buttons\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAAyBC,gBAAgB,QAAQ,UAAU;AAC3D,OAAOC,SAAS,MAAM,qBAAqB;AAC3C,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,cAAc,MAAM,kBAAkB;AAM7C,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC7B,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAC3B,OACEP,KAAA,CAAAS,aAAA,CAACN,SAAS,EAAAO,QAAA;IACRF,SAAS,EAAEP,UAAU,CAAC,mBAAmB,EAAEO,SAAS;EAAE,GAClDN,gBAAgB,CAACK,KAAK,CAAC,GAAAI,eAAA,KAAAA,eAAA,GAE3BX,KAAA,CAAAS,aAAA,CAACJ,cAAc,MAAE,CAAC,GAAAO,WAAA,KAAAA,WAAA,GAClBZ,KAAA,CAAAS,aAAA,CAACL,UAAU,MAAE,CAAC,CACL,CAAC;AAEhB;AAEAE,OAAO,CAACO,4BAA4B,GAAG,IAAI;AAC3C,eAAeP,OAAO"}

package/es/extensions/forms/StepsLayout/NextButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from '../component-types';
+import type { ComponentProps } from '../types';
 import { ButtonProps } from '../../../components/button/Button';
 export type Props = ComponentProps & ButtonProps & {
     children?: string;

package/es/extensions/forms/StepsLayout/NextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","onClick","handleNext","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../component-types'\nimport { Button } from '../../../components'\nimport { ButtonProps } from '../../../components/button/Button'\nimport SharedContext from '../../../shared/Context'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <Button\n      {...props}\n      className={classnames('dnb-forms-next-button', className)}\n      onClick={stepsContext?.handleNext}\n      variant={variant}\n      icon_position={icon_position}\n      icon={icon}\n    >\n      {children}\n    </Button>\n  )\n}\n\nNextButton._supportsEufemiaSpacingProps = true\nexport default NextButton\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AAOzC,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGP,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJK,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGhB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAgB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAEP,UAAU,CAAC,uBAAuB,EAAEO,SAAS,CAAE;IAC1DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,UAAW;IAClCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CAAC;AAEb;AAEAP,UAAU,CAACgB,4BAA4B,GAAG,IAAI;AAC9C,eAAehB,UAAU"}
+{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","onClick","handleNext","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../types'\nimport { Button } from '../../../components'\nimport { ButtonProps } from '../../../components/button/Button'\nimport SharedContext from '../../../shared/Context'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <Button\n      {...props}\n      className={classnames('dnb-forms-next-button', className)}\n      onClick={stepsContext?.handleNext}\n      variant={variant}\n      icon_position={icon_position}\n      icon={icon}\n    >\n      {children}\n    </Button>\n  )\n}\n\nNextButton._supportsEufemiaSpacingProps = true\nexport default NextButton\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AAOzC,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGP,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJK,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGhB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAgB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAEP,UAAU,CAAC,uBAAuB,EAAEO,SAAS,CAAE;IAC1DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,UAAW;IAClCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CAAC;AAEb;AAEAP,UAAU,CAACgB,4BAA4B,GAAG,IAAI;AAC9C,eAAehB,UAAU"}

package/es/extensions/forms/StepsLayout/PreviousButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from '../component-types';
+import type { ComponentProps } from '../types';
 import { ButtonProps } from '../../../components/button/Button';
 export type Props = ComponentProps & ButtonProps & {
     children?: string;

package/es/extensions/forms/StepsLayout/PreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","PreviousButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepPrevious","stepsContext","createElement","_extends","onClick","handlePrevious","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../component-types'\nimport { Button } from '../../../components'\nimport { ButtonProps } from '../../../components/button/Button'\nimport SharedContext from '../../../shared/Context'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction PreviousButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = sharedContext?.translation.Forms.stepPrevious,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <Button\n      {...props}\n      className={classnames('dnb-forms-previous-button', className)}\n      onClick={stepsContext?.handlePrevious}\n      variant={variant}\n      icon_position={icon_position}\n      icon={icon}\n    >\n      {children}\n    </Button>\n  )\n}\n\nPreviousButton._supportsEufemiaSpacingProps = true\nexport default PreviousButton\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AAOzC,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,aAAa,GAAGP,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJK,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGhB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAgB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAEP,UAAU,CAAC,2BAA2B,EAAEO,SAAS,CAAE;IAC9DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,cAAe;IACtCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CAAC;AAEb;AAEAP,cAAc,CAACgB,4BAA4B,GAAG,IAAI;AAClD,eAAehB,cAAc"}
+{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","PreviousButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepPrevious","stepsContext","createElement","_extends","onClick","handlePrevious","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../types'\nimport { Button } from '../../../components'\nimport { ButtonProps } from '../../../components/button/Button'\nimport SharedContext from '../../../shared/Context'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction PreviousButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = sharedContext?.translation.Forms.stepPrevious,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <Button\n      {...props}\n      className={classnames('dnb-forms-previous-button', className)}\n      onClick={stepsContext?.handlePrevious}\n      variant={variant}\n      icon_position={icon_position}\n      icon={icon}\n    >\n      {children}\n    </Button>\n  )\n}\n\nPreviousButton._supportsEufemiaSpacingProps = true\nexport default PreviousButton\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AAOzC,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,aAAa,GAAGP,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJK,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGhB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAgB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAEP,UAAU,CAAC,2BAA2B,EAAEO,SAAS,CAAE;IAC9DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,cAAe;IACtCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CAAC;AAEb;AAEAP,cAAc,CAACgB,4BAA4B,GAAG,IAAI;AAClD,eAAehB,cAAc"}

package/es/extensions/forms/StepsLayout/Step.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
+import { ComponentProps } from '../types';
 import { Props as FlexContainerProps } from '../Layout/FlexContainer';
 export type Props = ComponentProps & {
     index?: number;

package/es/extensions/forms/StepsLayout/Step.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { forwardSpaceProps } from '../utils';
+import { pickSpacingProps } from '../types';
 import FlexContainer from '../Layout/FlexContainer';
 import StepsContext from './StepsContext';
 function Step(props) {
@@ -20,7 +20,7 @@ function Step(props) {
     className: classnames('dnb-forms-step', className),
     direction: direction,
     spacing: spacing
-  }, forwardSpaceProps(props)), children);
+  }, pickSpacingProps(props)), children);
 }
 Step._supportsEufemiaSpacingProps = true;
 export default Step;

package/es/extensions/forms/StepsLayout/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","useContext","classnames","forwardSpaceProps","FlexContainer","StepsContext","Step","props","className","index","direction","spacing","children","stepsContext","activeIndex","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/Step.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from '../Layout/FlexContainer'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps & {\n  index?: number\n  title?: string\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Step(props: Props) {\n  const {\n    className,\n    index,\n    direction = 'column',\n    spacing = 'medium',\n    children,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  if (stepsContext?.activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  return (\n    <FlexContainer\n      className={classnames('dnb-forms-step', className)}\n      direction={direction}\n      spacing={spacing}\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </FlexContainer>\n  )\n}\n\nStep._supportsEufemiaSpacingProps = true\nexport default Step\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,aAAa,MAEb,yBAAyB;AAChC,OAAOC,YAAY,MAAM,gBAAgB;AAUzC,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,SAAS,GAAG,QAAQ;IACpBC,OAAO,GAAG,QAAQ;IAClBC;EACF,CAAC,GAAGL,KAAK;EACT,MAAMM,YAAY,GAAGZ,UAAU,CAACI,YAAY,CAAC;EAE7C,IAAI,CAAAQ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEC,WAAW,MAAKL,KAAK,EAAE;IAEvC,OAAO,IAAI;EACb;EAEA,OACET,KAAA,CAAAe,aAAA,CAACX,aAAa,EAAAY,QAAA;IACZR,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;IACnDE,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA;EAAQ,GACbR,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACY,CAAC;AAEpB;AAEAN,IAAI,CAACW,4BAA4B,GAAG,IAAI;AACxC,eAAeX,IAAI"}
+{"version":3,"file":"Step.js","names":["React","useContext","classnames","pickSpacingProps","FlexContainer","StepsContext","Step","props","className","index","direction","spacing","children","stepsContext","activeIndex","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/Step.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps, pickSpacingProps } from '../types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from '../Layout/FlexContainer'\nimport StepsContext from './StepsContext'\n\nexport type Props = ComponentProps & {\n  index?: number\n  title?: string\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Step(props: Props) {\n  const {\n    className,\n    index,\n    direction = 'column',\n    spacing = 'medium',\n    children,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  if (stepsContext?.activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  return (\n    <FlexContainer\n      className={classnames('dnb-forms-step', className)}\n      direction={direction}\n      spacing={spacing}\n      {...pickSpacingProps(props)}\n    >\n      {children}\n    </FlexContainer>\n  )\n}\n\nStep._supportsEufemiaSpacingProps = true\nexport default Step\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAAyBC,gBAAgB,QAAQ,UAAU;AAC3D,OAAOC,aAAa,MAEb,yBAAyB;AAChC,OAAOC,YAAY,MAAM,gBAAgB;AAUzC,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,SAAS,GAAG,QAAQ;IACpBC,OAAO,GAAG,QAAQ;IAClBC;EACF,CAAC,GAAGL,KAAK;EACT,MAAMM,YAAY,GAAGZ,UAAU,CAACI,YAAY,CAAC;EAE7C,IAAI,CAAAQ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEC,WAAW,MAAKL,KAAK,EAAE;IAEvC,OAAO,IAAI;EACb;EAEA,OACET,KAAA,CAAAe,aAAA,CAACX,aAAa,EAAAY,QAAA;IACZR,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;IACnDE,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA;EAAQ,GACbR,gBAAgB,CAACI,KAAK,CAAC,GAE1BK,QACY,CAAC;AAEpB;AAEAN,IAAI,CAACW,4BAA4B,GAAG,IAAI;AACxC,eAAeX,IAAI"}

package/es/extensions/forms/StepsLayout/StepsLayout.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
+import { ComponentProps } from '../types';
 export type Props = ComponentProps & {
     id?: string;
     mode?: 'static' | 'strict' | 'loose';

package/es/extensions/forms/StepsLayout/StepsLayout.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Div } from '../../../elements';
 import { StepIndicator } from '../../../components';
 import { makeUniqueId } from '../../../shared/component-helper';
-import { forwardSpaceProps } from '../utils';
+import { pickSpacingProps } from '../types';
 import DataContext from '../DataContext/Context';
 import Step from './Step';
 import StepsContext from './StepsContext';
@@ -55,7 +55,7 @@ function StepsLayout(props) {
   }, [dataContext, scrollTopOnStepChange, onStepChange]);
   const stepIndicatorData = React.Children.map(children, child => {
     if (!React.isValidElement(child) || child.type !== Step) {
-      throw new Error('Only Step can be children of Steps');
+      throw new Error('Only Step can be children of StepsLayout');
     }
     return child.props.title ?? 'Title missing';
   });
@@ -72,7 +72,7 @@ function StepsLayout(props) {
     }
   }, React.createElement(Div, _extends({
     className: classnames('dnb-forms-steps-layout', className)
-  }, forwardSpaceProps(props)), React.createElement("aside", {
+  }, pickSpacingProps(props)), React.createElement("aside", {
     className: "dnb-forms-steps-layout__sidebar"
   }, React.createElement(StepIndicator.Sidebar, {
     sidebar_id: id

package/es/extensions/forms/StepsLayout/StepsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","forwardSpaceProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of Steps')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...forwardSpaceProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAChE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,WAAW,MAAM,wBAAwB;AAChD,OAAOC,IAAI,MAA8B,QAAQ;AACjD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,OAAO,MAAM,WAAW;AAW/B,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;IACJC,SAAS;IACTC,EAAE,GAAGX,YAAY,CAAC,CAAC;IACnBY,IAAI,GAAG,OAAO;IACdC,qBAAqB;IACrBC,kBAAkB,GAAG,CAAC;IACtBC,YAAY;IACZC;EACF,CAAC,GAAGP,KAAK;EACT,MAAMQ,WAAW,GAAGvB,UAAU,CAACQ,WAAW,CAAC;EAC3C,MAAM,CAACgB,WAAW,EAAEC,cAAc,CAAC,GACjCxB,QAAQ,CAASmB,kBAAkB,CAAC;EAEtC,MAAMM,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvCuB,cAAc,CAAED,WAAW,IAAK;MAC9BH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,WAAW,GAAG,CAAC,CAAC;MAC/B,OAAOA,WAAW,GAAG,CAAC;IACxB,CAAC,CAAC;IACF,IAAIL,qBAAqB,EAAE;MAAA,IAAAQ,OAAA;MACzB,CAAAA,OAAA,GAAAC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,QAAQ,CAAC;QAAEC,GAAG,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAS,CAAC,CAAC;IAClD;EACF,CAAC,EAAE,CAACZ,qBAAqB,EAAEE,YAAY,CAAC,CAAC;EAEzC,MAAMW,UAAU,GAAG9B,WAAW,CAAC,MAAM;IACnC,IAAI,CAACqB,WAAW,CAACU,SAAS,CAAC,CAAC,EAAE;MAC5BR,cAAc,CAAED,WAAW,IAAK;QAC9BH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,WAAW,GAAG,CAAC,CAAC;QAC/B,OAAOA,WAAW,GAAG,CAAC;MACxB,CAAC,CAAC;MACF,IAAIL,qBAAqB,EAAE;QAAA,IAAAe,QAAA;QACzB,CAAAA,QAAA,GAAAN,MAAM,cAAAM,QAAA,uBAANA,QAAA,CAAQL,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MAClD;IACF,CAAC,MAAM;MACLR,WAAW,CAACY,gBAAgB,CAAC,IAAI,CAAC;IACpC;EACF,CAAC,EAAE,CAACZ,WAAW,EAAEJ,qBAAqB,EAAEE,YAAY,CAAC,CAAC;EAEtD,MAAMe,iBAAiB,GAAGrC,KAAK,CAACsC,QAAQ,CAACC,GAAG,CAAChB,QAAQ,EAAGiB,KAAK,IAAK;IAChE,IAAI,CAACxC,KAAK,CAACyC,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKhC,IAAI,EAAE;MACvD,MAAM,IAAIiC,KAAK,CAAC,oCAAoC,CAAC;IACvD;IACA,OAAOH,KAAK,CAACxB,KAAK,CAAC4B,KAAK,IAAI,eAAe;EAC7C,CAAC,CAAa;EAEd,MAAMC,YAAY,GAAG1C,WAAW,CAAC,CAAC;IAAE2C;EAAa,CAAC,KAAK;IACrDpB,cAAc,CAACoB,YAAY,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OACE9C,KAAA,CAAA+C,aAAA,CAACpC,YAAY,CAACqC,QAAQ;IACpBC,KAAK,EAAE;MACLxB,WAAW;MACXE,cAAc;MACdM;IACF;EAAE,GAEFjC,KAAA,CAAA+C,aAAA,CAAC1C,GAAG,EAAA6C,QAAA;IACFjC,SAAS,EAAEb,UAAU,CAAC,wBAAwB,EAAEa,SAAS;EAAE,GACvDT,iBAAiB,CAACQ,KAAK,CAAC,GAE5BhB,KAAA,CAAA+C,aAAA;IAAO9B,SAAS,EAAC;EAAiC,GAChDjB,KAAA,CAAA+C,aAAA,CAACzC,aAAa,CAAC6C,OAAO;IAACC,UAAU,EAAElC;EAAG,CAAE,CAAC,EACzClB,KAAA,CAAA+C,aAAA,CAACzC,aAAa;IACZ+C,MAAM;IACNP,YAAY,EAAErB,WAAY;IAC1B6B,IAAI,EAAEjB,iBAAkB;IACxBlB,IAAI,EAAEA,IAAK;IACXoC,YAAY;IACZC,SAAS,EAAEX,YAAa;IACxBO,UAAU,EAAElC,EAAG;IACf0B,KAAK,EAAC;EAAE,CACT,CACI,CAAC,EACR5C,KAAA,CAAA+C,aAAA;IAAK9B,SAAS,EAAC;EAAkC,GAC9CjB,KAAK,CAACsC,QAAQ,CAACC,GAAG,CAAChB,QAAQ,EAAE,CAACiB,KAAK,EAAEiB,CAAC,KAAK;IAC1C,IAAIzD,KAAK,CAACyC,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKhC,IAAI,EAAE;MACtD,OAAOV,KAAK,CAAC0D,YAAY,CACvBlB,KAAK,EACL;QACEmB,KAAK,EAAEF;MACT,CACF,CAAC;IACH;IACA,OAAOjB,KAAK;EACd,CAAC,CACE,CACF,CACgB,CAAC;AAE5B;AAEAzB,WAAW,CAAC6C,4BAA4B,GAAG,IAAI;AAE/C7C,WAAW,CAACL,IAAI,GAAGA,IAAI;AACvBK,WAAW,CAACH,UAAU,GAAGA,UAAU;AACnCG,WAAW,CAACF,cAAc,GAAGA,cAAc;AAC3CE,WAAW,CAACD,OAAO,GAAGA,OAAO;AAE7B,eAAeC,WAAW"}
+{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","pickSpacingProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { ComponentProps, pickSpacingProps } from '../types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of StepsLayout')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...pickSpacingProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.css

@@ -4,9 +4,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -17,9 +17,15 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.min.css

@@ -1 +1 @@
-.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}
+.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.scss

@@ -3,7 +3,7 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  column-gap: 3rem;
+  column-gap: var(--spacing-medium);
 
   @media (max-width: map-get($breakpoints, 'medium')) {
     flex-direction: column;
@@ -13,11 +13,18 @@
 
   &__sidebar {
     flex: 0;
-    min-width: 320px;
+    min-width: 21rem;
+
+    .dnb-step-indicator__sidebar {
+      max-width: 21rem;
+    }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 336px;
+    }
   }
 
   &__contents {
     flex: 1;
-    min-width: 400px;
+    min-width: 25rem;
   }
 }

package/es/extensions/forms/Value/Boolean.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentProps } from '../component-types';
-import type { ValueProps } from '../value-types';
-export type Props = ComponentProps & ValueProps<boolean>;
+import { ValueProps } from '../types';
+export type Props = ValueProps<boolean>;
 declare function BooleanComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace BooleanComponent {
     var _supportsEufemiaSpacingProps: boolean;

package/es/extensions/forms/Value/Boolean.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import ValueBlock from '../ValueBlock';
-import { useValue } from './hooks';
-import { forwardSpaceProps } from '../utils';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 import SharedContext from '../../../shared/Context';
 function BooleanComponent(props) {
   const sharedContext = useContext(SharedContext);
@@ -13,14 +13,14 @@ function BooleanComponent(props) {
     showEmpty,
     value,
     inline
-  } = useValue(props);
+  } = useDataValue(props);
   return React.createElement(ValueBlock, _extends({
     className: className,
     label: label,
     showEmpty: showEmpty,
     placeholder: placeholder,
     inline: inline
-  }, forwardSpaceProps(props)), value === true || value === false ? value === true ? sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanYes : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanNo : null);
+  }, pickSpacingProps(props)), value === true || value === false ? value === true ? sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanYes : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanNo : null);
 }
 BooleanComponent._supportsEufemiaSpacingProps = true;
 export default BooleanComponent;

package/es/extensions/forms/Value/Boolean.js.map

@@ -1 +1 @@
-{"version":3,"file":"Boolean.js","names":["React","useContext","ValueBlock","useValue","forwardSpaceProps","SharedContext","BooleanComponent","props","sharedContext","className","label","placeholder","showEmpty","value","inline","createElement","_extends","translation","Forms","booleanYes","booleanNo","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Value/Boolean.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport ValueBlock from '../ValueBlock'\nimport { useValue } from './hooks'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport type { ValueProps } from '../value-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & ValueProps<boolean>\n\nfunction BooleanComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { className, label, placeholder, showEmpty, value, inline } =\n    useValue(props)\n\n  return (\n    <ValueBlock\n      className={className}\n      label={label}\n      showEmpty={showEmpty}\n      placeholder={placeholder}\n      inline={inline}\n      {...forwardSpaceProps(props)}\n    >\n      {value === true || value === false\n        ? value === true\n          ? sharedContext?.translation.Forms.booleanYes\n          : sharedContext?.translation.Forms.booleanNo\n        : null}\n    </ValueBlock>\n  )\n}\n\nBooleanComponent._supportsEufemiaSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,iBAAiB,QAAQ,UAAU;AAG5C,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAC/C,MAAM;IAAEI,SAAS;IAAEC,KAAK;IAAEC,WAAW;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAC/DX,QAAQ,CAACI,KAAK,CAAC;EAEjB,OACEP,KAAA,CAAAe,aAAA,CAACb,UAAU,EAAAc,QAAA;IACTP,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAEA,SAAU;IACrBD,WAAW,EAAEA,WAAY;IACzBG,MAAM,EAAEA;EAAO,GACXV,iBAAiB,CAACG,KAAK,CAAC,GAE3BM,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,GAC9BA,KAAK,KAAK,IAAI,GACZL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACC,UAAU,GAC3CX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACE,SAAS,GAC5C,IACM,CAAC;AAEjB;AAEAd,gBAAgB,CAACe,4BAA4B,GAAG,IAAI;AACpD,eAAef,gBAAgB"}
+{"version":3,"file":"Boolean.js","names":["React","useContext","ValueBlock","useDataValue","pickSpacingProps","SharedContext","BooleanComponent","props","sharedContext","className","label","placeholder","showEmpty","value","inline","createElement","_extends","translation","Forms","booleanYes","booleanNo","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Value/Boolean.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport ValueBlock from '../ValueBlock'\nimport { useDataValue } from '../hooks'\nimport { ValueProps, pickSpacingProps } from '../types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ValueProps<boolean>\n\nfunction BooleanComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { className, label, placeholder, showEmpty, value, inline } =\n    useDataValue(props)\n\n  return (\n    <ValueBlock\n      className={className}\n      label={label}\n      showEmpty={showEmpty}\n      placeholder={placeholder}\n      inline={inline}\n      {...pickSpacingProps(props)}\n    >\n      {value === true || value === false\n        ? value === true\n          ? sharedContext?.translation.Forms.booleanYes\n          : sharedContext?.translation.Forms.booleanNo\n        : null}\n    </ValueBlock>\n  )\n}\n\nBooleanComponent._supportsEufemiaSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,QAAQ,UAAU;AACvC,SAAqBC,gBAAgB,QAAQ,UAAU;AACvD,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAC/C,MAAM;IAAEI,SAAS;IAAEC,KAAK;IAAEC,WAAW;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAC/DX,YAAY,CAACI,KAAK,CAAC;EAErB,OACEP,KAAA,CAAAe,aAAA,CAACb,UAAU,EAAAc,QAAA;IACTP,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAEA,SAAU;IACrBD,WAAW,EAAEA,WAAY;IACzBG,MAAM,EAAEA;EAAO,GACXV,gBAAgB,CAACG,KAAK,CAAC,GAE1BM,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,GAC9BA,KAAK,KAAK,IAAI,GACZL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACC,UAAU,GAC3CX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACE,SAAS,GAC5C,IACM,CAAC;AAEjB;AAEAd,gBAAgB,CAACe,4BAA4B,GAAG,IAAI;AACpD,eAAef,gBAAgB"}

package/es/extensions/forms/Value/Number.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentProps } from '../component-types';
-import type { ValueProps } from '../value-types';
-export type Props = ComponentProps & ValueProps<number> & {
+import { ValueProps } from '../types';
+export type Props = ValueProps<number> & {
     thousandSeparator?: string | true;
     decimalSymbol?: string;
     decimalLimit?: number;

package/es/extensions/forms/Value/Number.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { formatNumber, forwardSpaceProps } from '../utils';
+import { formatNumber } from '../utils';
 import ValueBlock from '../ValueBlock';
-import { useValue } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 function NumberComponent(props) {
   const {
     className,
@@ -16,14 +17,14 @@ function NumberComponent(props) {
     decimalLimit,
     prefix,
     suffix
-  } = useValue(props);
+  } = useDataValue(props);
   return React.createElement(ValueBlock, _extends({
     className: className,
     label: label,
     showEmpty: showEmpty,
     placeholder: placeholder,
     inline: inline
-  }, forwardSpaceProps(props)), value !== undefined ? formatNumber(value, {
+  }, pickSpacingProps(props)), value !== undefined ? formatNumber(value, {
     thousandSeparator: thousandSeparator === true ? ' ' : thousandSeparator,
     decimalSymbol,
     decimalLimit,