@dnb/eufemia 10.7.0 → 10.8.0

package/cjs/extensions/forms/Field/style/dnb-country-code.css

@@ -0,0 +1,12 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
+}

package/cjs/extensions/forms/Field/style/dnb-country-code.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}

package/cjs/extensions/forms/Field/style/dnb-country-code.scss

@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-country-code {
+  .dnb-autocomplete__inner {
+    --autocomplete-width: 9rem;
+  }
+
+  &--width-small .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-small};
+  }
+
+  &--width-medium .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-medium};
+  }
+
+  &--width-large .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-large};
+  }
+}

package/cjs/extensions/forms/Field/style/dnb-phone-number.css

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

package/cjs/extensions/forms/Field/style/dnb-phone-number.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}

package/cjs/extensions/forms/Field/style/dnb-phone-number.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-phone-number {
   display: flex;
@@ -13,16 +13,11 @@
     width: $forms-field-width-large;
   }
 
-  &--width-medium {
-    width: $forms-field-width-medium;
-  }
-
   &__country-code {
-    --autocomplete-width: 145px;
-    flex: 0 144px;
+    flex: 0 9rem;
 
     .dnb-autocomplete__shell {
-      width: 144px;
+      width: 9rem;
     }
   }
 

package/cjs/extensions/forms/Field/style/dnb-postal-code-and-city.css

@@ -5,11 +5,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;

package/cjs/extensions/forms/Field/style/dnb-postal-code-and-city.min.css

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
+.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/cjs/extensions/forms/Field/style/dnb-postal-code-and-city.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-postal-code-and-city {
   &__fields {
@@ -7,6 +7,10 @@
     column-gap: var(--spacing-small);
   }
 
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
   &--width-medium {
     width: $forms-field-width-medium;
   }

package/cjs/extensions/forms/Field/style/dnb-selection.css

@@ -1,6 +1,9 @@
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
 }

package/cjs/extensions/forms/Field/style/dnb-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}

package/cjs/extensions/forms/Field/style/dnb-selection.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-selection {
   &--width-large {
@@ -12,4 +12,10 @@
       width: $forms-field-width-medium;
     }
   }
+
+  &--width-small {
+    .dnb-dropdown__shell {
+      width: $forms-field-width-small;
+    }
+  }
 }

package/cjs/extensions/forms/Field/style/index.scss

@@ -1,3 +1,5 @@
 @import './dnb-phone-number.scss';
 @import './dnb-postal-code-and-city.scss';
 @import './dnb-selection.scss';
+@import './dnb-array-selection.scss';
+@import './dnb-country-code.scss';

package/cjs/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -3,11 +3,12 @@ import type { ComponentProps } from '../component-types';
 import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & Pick<FieldProps, 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
     forId?: string;
+    contentClassName?: string;
     children: React.ReactNode;
     /** Width of outer block element */
-    width?: 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large';
     /** Width of contents block, while label etc can be wider if space is available */
-    contentsWidth?: 'medium' | 'large' | 'stretch';
+    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {

package/cjs/extensions/forms/FieldBlock/FieldBlock.js

@@ -25,16 +25,16 @@ function FieldBlock(props) {
     error,
     width,
     contentsWidth,
+    contentClassName,
     children
   } = props;
-  const cn = (0, _classnames.default)('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
+  const cn = (0, _classnames.default)(`dnb-forms-field-block dnb-forms-field-block--layout-${layout}`, className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   return _react.default.createElement(_elements.Div, _extends({
     className: cn
   }, (0, _utils.forwardSpaceProps)(props)), labelDescription || labelSecondary ? _react.default.createElement("div", {
-    className: "dnb-forms-field-block__label-block"
+    className: 'dnb-forms-field-block__label'
   }, label || labelDescription ? _react.default.createElement(_components.FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
@@ -44,13 +44,14 @@ function FieldBlock(props) {
     className: "dnb-forms-field-block__label-secondary"
   }, labelSecondary)) : label && _react.default.createElement(_components.FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
   }, label), _react.default.createElement("div", {
-    className: 'dnb-forms-field-block__contents' + (contentsWidth !== undefined ? ` dnb-forms-field-block__contents--width-${contentsWidth}` : "")
-  }, children), error && _react.default.createElement(_components.FormStatus, {
+    className: (0, _classnames.default)('dnb-forms-field-block__contents', contentClassName, contentsWidth !== undefined && `dnb-forms-field-block__contents--width-${contentsWidth}`)
+  }, children), error && _react.default.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, _react.default.createElement(_components.FormStatus, {
     state: "error",
     id: forId ? `${forId}-form-status` : undefined,
     text: error === null || error === void 0 ? void 0 : error.message,
@@ -58,15 +59,19 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }), warning && _react.default.createElement(_components.FormStatus, {
+  })), warning && _react.default.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, _react.default.createElement(_components.FormStatus, {
     state: "warn",
     id: forId ? `${forId}-form-status` : undefined,
-    text: warning instanceof Error && warning.message || warning instanceof _types.FormError && warning.message || (info === null || info === void 0 ? void 0 : info.toString()),
+    text: warning instanceof Error && warning.message || warning instanceof _types.FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()),
     label: label,
     space: {
       top: 'x-small'
     }
-  }), info && _react.default.createElement(_components.FormStatus, {
+  })), info && _react.default.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, _react.default.createElement(_components.FormStatus, {
     state: "info",
     id: forId ? `${forId}-form-status` : undefined,
     text: info instanceof Error && info.message || info instanceof _types.FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString()),
@@ -74,7 +79,7 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }));
+  })));
 }
 FieldBlock._supportsEufemiaSpacingProps = true;
 var _default = FieldBlock;

package/cjs/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["_react","_interopRequireDefault","require","_classnames","_elements","_components","_utils","_types","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","children","cn","classnames","undefined","createElement","Div","forwardSpaceProps","FormLabel","for_id","label_direction","space","bottom","Fragment","Span","FormStatus","state","id","text","message","top","Error","FormError","toString","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["_react","_interopRequireDefault","require","_classnames","_elements","_components","_utils","_types","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","contentClassName","children","cn","classnames","undefined","createElement","Div","forwardSpaceProps","FormLabel","for_id","space","bottom","Fragment","Span","FormStatus","state","id","text","message","top","Error","FormError","toString","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    contentClassName?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'small' | 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    contentClassName,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    `dnb-forms-field-block--layout-${layout}`,\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className={classnames('dnb-forms-field-block__label')}>\n          {label || labelDescription ? (\n            <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`,\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"error\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={error?.message}\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n      {warning && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"warn\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={\n              (warning instanceof Error && warning.message) ||\n              (warning instanceof FormError && warning.message) ||\n              warning?.toString()\n            }\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n      {info && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"info\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={\n              (info instanceof Error && info.message) ||\n              (info instanceof FormError && info.message) ||\n              info?.toString()\n            }\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/cjs/extensions/forms/FieldBlock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_FieldBlock","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../../../../../src/extensions/forms/FieldBlock/index.ts"],"sourcesContent":["export { default  } from './FieldBlock';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAwC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["_FieldBlock","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../../../../../src/extensions/forms/FieldBlock/index.ts"],"sourcesContent":["export { default } from './FieldBlock'\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

package/cjs/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -1,4 +1,24 @@
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -13,18 +33,21 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
-.dnb-forms-field-block--width-large {
-  width: 336px;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-forms-field-block--width-medium {
-  width: 176px;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-.dnb-forms-field-block__contents--width-large {
-  width: 336px;
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
 }
 .dnb-forms-field-block__contents--width-medium {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }

package/cjs/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}
+.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}

package/cjs/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -1,7 +1,40 @@
-@import '../../Field/fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-block {
-  &__label-block {
+  // Layout
+  &--layout-vertical {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-areas:
+      'label'
+      'contents'
+      'status';
+  }
+
+  &--layout-horizontal {
+    display: grid;
+    grid-template-columns: $forms-field-width-medium auto;
+    grid-template-areas:
+      'label contents'
+      'status status';
+  }
+
+  // Width
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
+
+  // Elements
+  &__label {
+    grid-area: label;
     display: flex;
     flex-flow: row;
     justify-content: space-between;
@@ -19,27 +52,27 @@
     font-size: var(--font-size-small);
   }
 
-  &--width-large {
-    width: $forms-field-width-large;
-  }
-
-  &--width-medium {
-    width: $forms-field-width-medium;
+  &__status {
+    grid-area: status;
   }
 
   &__contents {
+    grid-area: contents;
+
     &--width-stretch {
       width: 100%;
     }
 
-    &--width-large {
-      width: $forms-field-width-large;
+    &--width-small {
+      width: $forms-field-width-small;
     }
-  
+
     &--width-medium {
       width: $forms-field-width-medium;
     }
-  }
 
-  
+    &--width-large {
+      width: $forms-field-width-large;
+    }
+  }
 }

package/cjs/extensions/forms/FieldGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_FieldGroup","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sources":["../../../../../src/extensions/forms/FieldGroup/index.ts"],"sourcesContent":["export { default } from './FieldGroup';\nexport * from './FieldGroup';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,WAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,WAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,WAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAA6B,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAmB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA"}
+{"version":3,"file":"index.js","names":["_FieldGroup","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sources":["../../../../../src/extensions/forms/FieldGroup/index.ts"],"sourcesContent":["export { default } from './FieldGroup'\nexport * from './FieldGroup'\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,WAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,WAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,WAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAA4B,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAmB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA"}

package/cjs/extensions/forms/Layout/Card.js

@@ -35,9 +35,9 @@ function Card(props) {
       spacing: spacing ?? 'small'
     }, (0, _utils.forwardSpaceProps)(props)), children);
   }
-  return _react.default.createElement(_FlexItem.default, {
+  return _react.default.createElement(_FlexItem.default, _extends({
     className: (0, _classnames.default)('dnb-forms-card', className)
-  }, children);
+  }, (0, _utils.forwardSpaceProps)(props)), children);
 }
 Card._supportsEufemiaSpacingProps = true;
 var _default = Card;

package/cjs/extensions/forms/Layout/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_utils","_FlexContainer","_FlexItem","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","Card","props","className","stack","direction","spacing","children","createElement","classnames","divider","forwardSpaceProps","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/Layout/Card.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'\nimport FlexItem from './FlexItem'\n\nexport type Props = ComponentProps & {\n  stack?: boolean\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Card(props: Props) {\n  const { className, stack, direction, spacing, children } = props\n\n  if (stack) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction=\"column\"\n        divider=\"line\"\n        spacing={spacing ?? 'medium'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  if (direction || spacing) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction={direction ?? 'column'}\n        divider=\"space\"\n        spacing={spacing ?? 'small'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  return (\n    <FlexItem className={classnames('dnb-forms-card', className)}>\n      {children}\n    </FlexItem>\n  )\n}\n\nCard._supportsEufemiaSpacingProps = true\nexport default Card\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAGA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAiC,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AASjC,SAASQ,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEhE,IAAIE,KAAK,EAAE;IACT,OACE3B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,cAAA,CAAAI,OAAa,EAAAC,QAAA;MACZgB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS,CAAE;MACnDE,SAAS,EAAC,QAAQ;MAClBK,OAAO,EAAC,MAAM;MACdJ,OAAO,EAAEA,OAAO,IAAI;IAAS,GACzB,IAAAK,wBAAiB,EAACT,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,IAAIF,SAAS,IAAIC,OAAO,EAAE;IACxB,OACE7B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,cAAA,CAAAI,OAAa,EAAAC,QAAA;MACZgB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS,CAAE;MACnDE,SAAS,EAAEA,SAAS,IAAI,QAAS;MACjCK,OAAO,EAAC,OAAO;MACfJ,OAAO,EAAEA,OAAO,IAAI;IAAQ,GACxB,IAAAK,wBAAiB,EAACT,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,OACE9B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACzB,SAAA,CAAAG,OAAQ;IAACiB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS;EAAE,GAC1DI,QACO,CAAC;AAEf;AAEAN,IAAI,CAACW,4BAA4B,GAAG,IAAI;AAAA,IAAAC,QAAA,GACzBZ,IAAI;AAAAa,OAAA,CAAA5B,OAAA,GAAA2B,QAAA"}
+{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_utils","_FlexContainer","_FlexItem","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","Card","props","className","stack","direction","spacing","children","createElement","classnames","divider","forwardSpaceProps","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/Layout/Card.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'\nimport FlexItem from './FlexItem'\n\nexport type Props = ComponentProps & {\n  stack?: boolean\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Card(props: Props) {\n  const { className, stack, direction, spacing, children } = props\n\n  if (stack) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction=\"column\"\n        divider=\"line\"\n        spacing={spacing ?? 'medium'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  if (direction || spacing) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction={direction ?? 'column'}\n        divider=\"space\"\n        spacing={spacing ?? 'small'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  return (\n    <FlexItem\n      className={classnames('dnb-forms-card', className)}\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </FlexItem>\n  )\n}\n\nCard._supportsEufemiaSpacingProps = true\nexport default Card\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAGA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAiC,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AASjC,SAASQ,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEhE,IAAIE,KAAK,EAAE;IACT,OACE3B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,cAAA,CAAAI,OAAa,EAAAC,QAAA;MACZgB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS,CAAE;MACnDE,SAAS,EAAC,QAAQ;MAClBK,OAAO,EAAC,MAAM;MACdJ,OAAO,EAAEA,OAAO,IAAI;IAAS,GACzB,IAAAK,wBAAiB,EAACT,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,IAAIF,SAAS,IAAIC,OAAO,EAAE;IACxB,OACE7B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,cAAA,CAAAI,OAAa,EAAAC,QAAA;MACZgB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS,CAAE;MACnDE,SAAS,EAAEA,SAAS,IAAI,QAAS;MACjCK,OAAO,EAAC,OAAO;MACfJ,OAAO,EAAEA,OAAO,IAAI;IAAQ,GACxB,IAAAK,wBAAiB,EAACT,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,OACE9B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACzB,SAAA,CAAAG,OAAQ,EAAAC,QAAA;IACPgB,SAAS,EAAE,IAAAM,mBAAU,EAAC,gBAAgB,EAAEN,SAAS;EAAE,GAC/C,IAAAQ,wBAAiB,EAACT,KAAK,CAAC,GAE3BK,QACO,CAAC;AAEf;AAEAN,IAAI,CAACW,4BAA4B,GAAG,IAAI;AAAA,IAAAC,QAAA,GACzBZ,IAAI;AAAAa,OAAA,CAAA5B,OAAA,GAAA2B,QAAA"}

package/cjs/extensions/forms/Layout/FlexContainer.d.ts

@@ -14,6 +14,7 @@ export type Props = ComponentProps & {
     divider?: 'space' | 'line';
     /** Spacing between items inside */
     spacing?: false | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    width?: 'small' | 'medium' | 'large';
     children: React.ReactNode;
 };
 declare function FlexContainer(props: Props): import("react/jsx-runtime").JSX.Element;

package/cjs/extensions/forms/Layout/FlexContainer.js

@@ -57,9 +57,10 @@ function FlexContainer(props) {
     justify = 'flex-start',
     align = 'stretch',
     divider = 'space',
-    spacing = 'small'
+    spacing = 'small',
+    width
   } = props;
-  const cn = (0, _classnames.default)('dnb-forms-flex-container', className, direction && `dnb-forms-flex-container--direction-${direction}`, justify && `dnb-forms-flex-container--justify-${justify}`, align && `dnb-forms-flex-container--align-${align}`, wrap && `dnb-forms-flex-container--wrap`, divider && `dnb-forms-flex-container--divider-${divider}`, spacing && `dnb-forms-flex-container--spacing-${spacing}`);
+  const cn = (0, _classnames.default)('dnb-forms-flex-container', className, direction && `dnb-forms-flex-container--direction-${direction}`, justify && `dnb-forms-flex-container--justify-${justify}`, align && `dnb-forms-flex-container--align-${align}`, wrap && `dnb-forms-flex-container--wrap`, divider && `dnb-forms-flex-container--divider-${divider}`, spacing && `dnb-forms-flex-container--spacing-${spacing}`, width && `dnb-forms-flex-container--width-${width}`);
   const childrenArray = _react.default.Children.toArray(children);
   return _react.default.createElement(EufemiaElements.Div, _extends({
     className: cn

package/cjs/extensions/forms/Layout/FlexContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.js","names":["_react","_interopRequireDefault","require","_classnames","_components","EufemiaElements","_interopRequireWildcard","_utils","_MainHeading","_SubHeading","_hr","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","isHeadingElement","element","type","MainHeading","SubHeading","getSpaceTop","_element$props","_element$props2","React","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","values","some","eufemiaElement","exports","isSpacePropsComponent","_element$type","renderWithSpacing","takesSpaceProps","cloneElement","createElement","Div","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","classnames","childrenArray","Children","toArray","forwardSpaceProps","map","child","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","Space","_supportsEufemiaSpacingProps","_default"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsEufemiaSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":"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"}
+{"version":3,"file":"FlexContainer.js","names":["_react","_interopRequireDefault","require","_classnames","_components","EufemiaElements","_interopRequireWildcard","_utils","_MainHeading","_SubHeading","_hr","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","isHeadingElement","element","type","MainHeading","SubHeading","getSpaceTop","_element$props","_element$props2","React","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","values","some","eufemiaElement","exports","isSpacePropsComponent","_element$type","renderWithSpacing","takesSpaceProps","cloneElement","createElement","Div","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","width","cn","classnames","childrenArray","Children","toArray","forwardSpaceProps","map","child","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","Space","_supportsEufemiaSpacingProps","_default"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsEufemiaSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  width?: 'small' | 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n    width,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    width && `dnb-forms-flex-container--width-${width}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,uBAAA,CAAAJ,OAAA;AAGA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,YAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAqC,IAAAQ,GAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAArB,uBAAAe,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAiB,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAE9B,SAASI,gBAAgBA,CAACC,OAAO,EAAW;EACjD,OAAOA,OAAO,CAACC,IAAI,KAAKC,oBAAW,IAAIF,OAAO,CAACC,IAAI,KAAKE,mBAAU;AACpE;AAEA,MAAMC,WAAW,GACfJ,OAAmE,IACzC;EAAA,IAAAK,cAAA,EAAAC,eAAA;EAC1B,IAAI,CAACC,cAAK,CAACC,cAAc,CAACR,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAK,cAAA,GAAAL,OAAO,CAACS,KAAK,cAAAJ,cAAA,uBAAbA,cAAA,CAAeK,GAAG,MACjB,SAAAJ,eAAA,GAAON,OAAO,CAACS,KAAK,cAAAH,eAAA,uBAAbA,eAAA,CAAeK,KAAK,MAAK,QAAQ,GACrCX,OAAO,CAACS,KAAK,CAACE,KAAK,CAACD,GAAG,GACvBE,SAAS,CAAC;AAElB,CAAC;AAED,MAAMC,cAAc,GAClBb,OAAmE,IACzC;EAAA,IAAAc,eAAA,EAAAC,eAAA;EAC1B,IAAI,CAACR,cAAK,CAACC,cAAc,CAACR,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAc,eAAA,GAAAd,OAAO,CAACS,KAAK,cAAAK,eAAA,uBAAbA,eAAA,CAAeE,MAAM,MACpB,SAAAD,eAAA,GAAOf,OAAO,CAACS,KAAK,cAAAM,eAAA,uBAAbA,eAAA,CAAeJ,KAAK,MAAK,QAAQ,GACrCX,OAAO,CAACS,KAAK,CAACE,KAAK,CAACK,MAAM,GAC1BJ,SAAS,CAAC;AAElB,CAAC;AAEM,MAAMK,gBAAgB,GAAIjB,OAAO,IAAc;EACpD,OAAOnB,MAAM,CAACqC,MAAM,CAACxD,eAAe,CAAC,CAACyD,IAAI,CACvCC,cAAc,IAAK,CAAApB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,IAAI,MAAKmB,cACxC,CAAC;AACH,CAAC;AAAAC,OAAA,CAAAJ,gBAAA,GAAAA,gBAAA;AAKM,MAAMK,qBAAqB,GAChCtB,OAAwB,IACZ;EAAA,IAAAuB,aAAA;EACZ,OACGhB,cAAK,CAACC,cAAc,CAACR,OAAO,CAAC,IAC5B,CAAAA,OAAO,aAAPA,OAAO,wBAAAuB,aAAA,GAAPvB,OAAO,CAAEC,IAAI,cAAAsB,aAAA,uBAAbA,aAAA,CAAgB,8BAA8B,CAAC,MAAK,IAAI,IAC1DN,gBAAgB,CAACjB,OAAO,CAAC;AAE7B,CAAC;AAAAqB,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AAED,MAAME,iBAAiB,GAAGA,CAACxB,OAAwB,EAAES,KAAK,KAAK;EAC7D,MAAMgB,eAAe,GAAGH,qBAAqB,CAACtB,OAAO,CAAC;EAEtD,OAAOyB,eAAe,GACpBlB,cAAK,CAACmB,YAAY,CAAC1B,OAAO,EAAiCS,KAAK,CAAC,GAEjEpD,MAAA,CAAAkB,OAAA,CAAAoD,aAAA,CAACjE,eAAA,CAAAkE,GAAG,EAAKnB,KAAK,EAAGT,OAAa,CAC/B;AACH,CAAC;AA4BD,SAAS6B,aAAaA,CAACpB,KAAY,EAAE;EACnC,MAAM;IACJqB,SAAS;IACTC,QAAQ;IACRC,SAAS,GAAG,QAAQ;IACpBC,IAAI,GAAG,KAAK;IACZC,OAAO,GAAG,YAAY;IACtBC,KAAK,GAAG,SAAS;IACjBC,OAAO,GAAG,OAAO;IACjBC,OAAO,GAAG,OAAO;IACjBC;EACF,CAAC,GAAG7B,KAAK;EAET,MAAM8B,EAAE,GAAG,IAAAC,mBAAU,EACnB,0BAA0B,EAQ1BV,SAAS,EAPTE,SAAS,IAAK,uCAAsCA,SAAU,EAAC,EAC/DE,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,KAAK,IAAK,mCAAkCA,KAAM,EAAC,EACnDF,IAAI,IAAK,gCAA+B,EACxCG,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,KAAK,IAAK,mCAAkCA,KAAM,EAEpD,CAAC;EACD,MAAMG,aAAa,GAAGlC,cAAK,CAACmC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,CAAC;EAEtD,OACE1E,MAAA,CAAAkB,OAAA,CAAAoD,aAAA,CAACjE,eAAA,CAAAkE,GAAG,EAAAtC,QAAA;IAACwC,SAAS,EAAES;EAAG,GAAK,IAAAK,wBAAiB,EAACnC,KAAK,CAAC,GAC7CuB,SAAS,KAAK,QAAQ,GACnBS,aAAa,CAACI,GAAG,CAAC,CAACC,KAAK,EAAEpD,CAAC,KAAK;IAI9B,MAAMqD,OAAO,GAAGrD,CAAC,KAAK,CAAC;IACvB,MAAMsD,aAAa,GAAGP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAG/C,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAMuD,gBAAgB,GAAGlD,gBAAgB,CAAC+C,KAAK,CAAC;IAChD,MAAMI,kBAAkB,GACtBxD,CAAC,GAAG,CAAC,IAAIK,gBAAgB,CAACiD,aAAa,CAAC;IAI1C,MAAMhC,MAAM,GAAG,CAAC;IAEhB,IACEoB,OAAO,KAAK,MAAM,IAElB,CAACW,OAAO,IAER,CAACG,kBAAkB,IACnB,CAACD,gBAAgB,EACjB;MACA,MAAME,cAAc,GAClBtC,cAAc,CAACmC,aAAa,CAAC,IAAIX,OAAO;MAC1C,MAAM3B,GAAG,GAAGN,WAAW,CAAC0C,KAAK,CAAC,IAAIT,OAAO;MAEzC,OACEhF,MAAA,CAAAkB,OAAA,CAAAoD,aAAA,CAACtE,MAAA,CAAAkB,OAAK,CAAC6E,QAAQ;QAACpE,GAAG,EAAG,WAAUU,CAAE;MAAE,GAClCrC,MAAA,CAAAkB,OAAA,CAAAoD,aAAA,CAAClE,WAAA,CAAA4F,KAAK;QAAC3C,GAAG,EAAEyC;MAAe,CAAE,CAAC,EAAApF,GAAA,KAAAA,GAAA,GAC9BV,MAAA,CAAAkB,OAAA,CAAAoD,aAAA;QAAIG,SAAS,EAAC;MAA8B,CAAE,CAAC,GAC9CN,iBAAiB,CAACsB,KAAK,EAAE;QACxBnC,KAAK,EAAE;UAAED,GAAG;UAAEM;QAAO,CAAC;QACtBN,GAAG;QACHM;MACF,CAAC,CACa,CAAC;IAErB;IAEA,MAAMN,GAAG,GAEPqC,OAAO,GACH,CAAC,GAED3C,WAAW,CAAC0C,KAAK,CAAC,IAClBjC,cAAc,CAACmC,aAAa,CAAC,IAC7BX,OAAO;IAEb,OAAOb,iBAAiB,CAACsB,KAAK,EAAE;MAC9B9D,GAAG,EAAG,WAAUU,CAAE,EAAC;MACnBiB,KAAK,EAAE;QAAED,GAAG;QAAEM;MAAO,CAAC;MACtBN,GAAG;MACHM;IACF,CAAC,CAAC;EACJ,CAAC,CAAC,GAEFe,QACD,CAAC;AAEV;AAEAF,aAAa,CAACyB,4BAA4B,GAAG,IAAI;AAAA,IAAAC,QAAA,GAClC1B,aAAa;AAAAR,OAAA,CAAA9C,OAAA,GAAAgF,QAAA"}

package/cjs/extensions/forms/Layout/FlexItem.d.ts

@@ -3,6 +3,7 @@ import type { ComponentProps } from '../component-types';
 export type Props = ComponentProps & {
     grow?: boolean;
     shrink?: boolean;
+    width?: 'small' | 'medium' | 'large';
     children: React.ReactNode;
 };
 declare function FlexItem(props: Props): import("react/jsx-runtime").JSX.Element;

package/cjs/extensions/forms/Layout/FlexItem.js

@@ -15,9 +15,10 @@ function FlexItem(props) {
     className,
     grow,
     shrink,
+    width,
     children
   } = props;
-  const cn = (0, _classnames.default)('dnb-forms-flex-item', className, grow && 'dnb-forms-flex-item--grow', shrink && 'dnb-forms-flex-item--shrink');
+  const cn = (0, _classnames.default)('dnb-forms-flex-item', className, grow && 'dnb-forms-flex-item--grow', shrink && 'dnb-forms-flex-item--shrink', width && `dnb-forms-flex-item--width-${width}`);
   return _react.default.createElement(_elements.Div, _extends({
     className: cn
   }, (0, _utils.forwardSpaceProps)(props)), children);