@dnb/eufemia 10.7.0 → 10.8.0

package/es/elements/typography/H4.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H4 = _ref => {
   let {
-      size = 'basis'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h4",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H4;

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

@@ -1 +1 @@
-{"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size = 'basis', ...props }: SharedHProps) => (\n  <H as=\"h4\" size={size} {...props} />\n)\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAgC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACpCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h4\" size={size || 'auto'} {...props} />\n)\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H5.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H5 = _ref => {
   let {
-      size = 'small'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h5",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H5;

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

@@ -1 +1 @@
-{"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/**\n/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size = 'small', ...props }: SharedHProps) => (\n  <H as=\"h5\" size={size} {...props} />\n)\n\nexport default H5\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAgC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACpCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h5\" size={size || 'auto'} {...props} />\n)\n\nexport default H5\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H6.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H6 = _ref => {
   let {
-      size = 'x-small'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h6",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H6;

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

@@ -1 +1 @@
-{"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size = 'x-small', ...props }: SharedHProps) => (\n  <H as=\"h6\" size={size} {...props} />\n)\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAkC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACtCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h6\" size={size || 'auto'} {...props} />\n)\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/style/dnb-typography.scss

@@ -51,6 +51,7 @@
   --typography-h-basis-small-font-size: var(--font-size-small);
   --typography-h-basis-small-line-height: var(--line-height-small);
   --typography-h-basis-weight: var(--font-weight-medium);
+  --typography-h-basis-font-family: var(--font-family-default);
 
   // Heading small
   --typography-h-small-font-size: var(--font-size-small);
@@ -58,11 +59,13 @@
   --typography-h-small-small-font-size: var(--font-size-x-small);
   --typography-h-small-small-line-height: var(--line-height-x-small);
   --typography-h-small-weight: var(--font-weight-medium);
+  --typography-h-small-font-family: var(--font-family-default);
 
   // Heading x-small
   --typography-h-x-small-font-size: var(--font-size-x-small);
   --typography-h-x-small-line-height: var(--line-height-x-small);
   --typography-h-x-small-weight: var(--font-weight-medium);
+  --typography-h-x-small-font-family: var(--font-family-default);
 }
 
 @include headingClasses() {

package/es/elements/typography/style/themes/dnb-typography-theme-sbanken.scss

@@ -1,4 +1,5 @@
 @use '../typography-mixins.scss' as typography;
+@use '../../../../style/core/utilities.scss' as utilities;
 
 // Paragraphs
 .dnb-p {
@@ -22,6 +23,15 @@
   --typography-h-large-weight: var(--font-weight-regular);
   --typography-lead-weight: var(--font-weight-regular);
   --typography-h-medium-weight: var(--font-weight-regular);
-  --typography-h-basis-weight: var(--font-weight-regular);
-  --typography-h-small-weight: var(--font-weight-regular);
+
+  @include utilities.allBelow(small) {
+    --typography-h-xx-large-font-size: var(--font-size-x-large);
+    --typography-h-xx-large-line-height: var(--line-height-x-large);
+    --typography-h-x-large-font-size: var(--font-size-large);
+    --typography-h-x-large-line-height: var(--line-height-large);
+    --typography-h-large-font-size: var(--font-size-medium);
+    --typography-h-large-line-height: var(--line-height-medium);
+    --typography-h-medium-font-size: var(--font-size-lead);
+    --typography-h-medium-line-height: var(--line-height-lead);
+  }
 }

package/es/elements/typography/style/typography-mixins.scss

@@ -6,9 +6,11 @@
     $selectors: &;
     @at-root {
       @include headingTags() {
+        // prettier-ignore
         $selectors: #{$selectors}, &;
         @at-root {
           @include otherSelectos() {
+            // prettier-ignore
             $selectors: #{$selectors}, &;
 
             @at-root #{$selectors} {
@@ -191,6 +193,7 @@
     var(--typography-h-basis-small-line-height),
     var(--typography-h-basis-weight)
   ) {
+    font-family: var(--typography-h-basis-font-family);
     @content;
   }
 }
@@ -203,6 +206,7 @@
     var(--typography-h-small-small-line-height),
     var(--typography-h-small-weight)
   ) {
+    font-family: var(--typography-h-small-font-family);
     @content;
   }
 }
@@ -215,6 +219,7 @@
     null,
     var(--typography-h-x-small-weight)
   ) {
+    font-family: var(--typography-h-x-small-font-family);
     @content;
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Context","Provider","SubmitButton","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport SubmitButton from './SubmitButton'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  SubmitButton,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBJ,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC;AACF,CAAC;AAGD,eAAeC,WAAW"}
+{"version":3,"file":"index.js","names":["Context","Provider","SubmitButton","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport SubmitButton from './SubmitButton'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  SubmitButton,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBJ,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC;AACF,CAAC;AAGD,eAAeC,WAAW"}

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

@@ -3,7 +3,8 @@ import type { ComponentProps } from '../component-types';
 import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<Array<string | number>> & {
     children?: React.ReactNode;
-    variant?: 'checkbox';
+    variant?: 'checkbox' | 'button';
+    optionsLayout?: 'horizontal' | 'vertical';
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace ArraySelection {

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

@@ -1,7 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-var _br;
-import React from 'react';
-import { Checkbox } from '../../../components';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useMemo } from 'react';
+import { Checkbox, Button } from '../../../components';
+import ButtonRow from '../Layout/ButtonRow';
 import classnames from 'classnames';
 import { forwardSpaceProps } from '../utils';
 import Option from './Option';
@@ -9,9 +11,11 @@ import FieldBlock from '../FieldBlock';
 import { useField } from './hooks';
 function ArraySelection(props) {
   const {
+    id,
     className,
-    variant,
-    layout,
+    variant = 'checkbox',
+    layout = 'vertical',
+    optionsLayout = 'vertical',
     label,
     labelDescription,
     labelSecondary,
@@ -21,38 +25,50 @@ function ArraySelection(props) {
     warning,
     disabled,
     emptyValue,
-    onChange,
+    handleChange,
     children
   } = useField(props);
-  const options = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option);
+  const fieldBlockProps = _objectSpread({
+    forId: id,
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    contentClassName: 'dnb-forms-field-array-selection__options',
+    info,
+    warning,
+    error,
+    layout,
+    label,
+    labelDescription,
+    labelSecondary
+  }, forwardSpaceProps(props));
+  const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => ({
+    title: option.props.title ?? option.props.children,
+    value: option.props.value,
+    handleSelect: () => {
+      const selected = option.props.value;
+      const newValue = value !== null && value !== void 0 && value.includes(selected) ? value.filter(value => value !== selected) : [...(value ?? []), selected];
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValue.length === 0 ? emptyValue : newValue);
+    }
+  })), [children, value, emptyValue, handleChange]);
   switch (variant) {
-    default:
+    case 'button':
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, options.map((option, i) => React.createElement(Button, {
+        key: `option-${i}-${option.value}`,
+        id: id,
+        text: option.title,
+        on_click: option.handleSelect,
+        variant: value !== null && value !== void 0 && value.includes(option.value) ? undefined : 'secondary',
+        status: error ? 'error' : undefined,
+        disabled: disabled
+      }))));
     case 'checkbox':
-      return React.createElement(FieldBlock, _extends({
-        className: classnames('dnb-forms-field-string', className),
-        layout: layout,
-        label: label,
-        labelDescription: labelDescription,
-        labelSecondary: labelSecondary,
-        info: info,
-        warning: warning,
-        error: error
-      }, forwardSpaceProps(props)), options.map((child, i) => React.createElement(React.Fragment, {
-        key: child.props.value ?? `option-${i}`
-      }, React.createElement(Checkbox, {
-        label: child.props.title ?? child.props.children,
-        checked: child.props.value && (value === null || value === void 0 ? void 0 : value.includes(child.props.value)),
-        top: i > 0 ? 'x-small' : undefined,
+      return React.createElement(FieldBlock, fieldBlockProps, options.map((option, i) => React.createElement(Checkbox, {
+        key: `option-${i}-${option.value}`,
+        className: "dnb-forms-field-array-selection__checkbox",
+        label: option.title,
+        checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
         disabled: disabled,
-        onChange: () => {
-          const clickedValue = child.props.value;
-          if (clickedValue === undefined) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
-          }
-          const newValue = value !== null && value !== void 0 && value.includes(clickedValue) ? value.filter(value => value !== clickedValue) : [...(value ?? []), clickedValue];
-          onChange === null || onChange === void 0 ? void 0 : onChange(newValue.length === 0 ? emptyValue : newValue);
-        }
-      }), _br || (_br = React.createElement("br", null)))));
+        on_change: option.handleSelect
+      })));
   }
 }
 ArraySelection._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","Checkbox","classnames","forwardSpaceProps","Option","FieldBlock","useField","ArraySelection","props","className","variant","layout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","onChange","children","options","Children","toArray","filter","child","isValidElement","type","createElement","_extends","map","i","Fragment","key","title","checked","includes","top","undefined","clickedValue","newValue","length","_br","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<Array<string | number>> & {\n    children?: React.ReactNode\n    variant?: 'checkbox'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    className,\n    variant,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    onChange,\n    children,\n  } = useField(props)\n\n  const options = React.Children.toArray(children).filter(\n    (child) => React.isValidElement(child) && child.type === Option\n  ) as React.ReactElement[]\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock\n          className={classnames('dnb-forms-field-string', className)}\n          layout={layout}\n          label={label}\n          labelDescription={labelDescription}\n          labelSecondary={labelSecondary}\n          info={info}\n          warning={warning}\n          error={error}\n          {...forwardSpaceProps(props)}\n        >\n          {options.map((child, i) => (\n            <React.Fragment key={child.props.value ?? `option-${i}`}>\n              <Checkbox\n                label={child.props.title ?? child.props.children}\n                checked={\n                  child.props.value && value?.includes(child.props.value)\n                }\n                top={i > 0 ? 'x-small' : undefined}\n                disabled={disabled}\n                onChange={() => {\n                  const clickedValue = child.props.value\n\n                  if (clickedValue === undefined) {\n                    onChange?.(emptyValue)\n                  }\n\n                  const newValue = value?.includes(clickedValue)\n                    ? value.filter((value) => value !== clickedValue)\n                    : [...(value ?? []), clickedValue]\n\n                  onChange?.(newValue.length === 0 ? emptyValue : newValue)\n                }}\n              />\n              <br />\n            </React.Fragment>\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsEufemiaSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","Button","ButtonRow","classnames","forwardSpaceProps","Option","FieldBlock","useField","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","newValue","includes","length","createElement","i","key","text","on_click","undefined","status","checked","on_change","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, Button } from '../../../components'\nimport ButtonRow from '../Layout/ButtonRow'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = ComponentProps &\n  FieldProps<Array<string | number>> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useField(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    ...forwardSpaceProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={\n                  value?.includes(option.value) ? undefined : 'secondary'\n                }\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsEufemiaSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import type { ComponentProps } from '../component-types';
+import type { FieldProps, FieldHelpProps } from '../field-types';
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string> & {
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
+};
+declare function CountryCode(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CountryCode {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default CountryCode;

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext, useCallback, useMemo } from 'react';
+import { Autocomplete, HelpButton } from '../../../components';
+import classnames from 'classnames';
+import countries from '../constants/countries';
+import { forwardSpaceProps } from '../utils';
+import { useField } from './hooks';
+import { FormError } from '../types';
+import SharedContext from '../../../shared/Context';
+function CountryCode(props) {
+  const sharedContext = useContext(SharedContext);
+  const {
+    className,
+    layout = 'vertical',
+    placeholder,
+    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
+    value,
+    emptyValue,
+    info,
+    warning,
+    error,
+    disabled,
+    help,
+    width,
+    handleFocus,
+    handleBlur,
+    handleChange
+  } = useField(props);
+  const autocompleteData = useMemo(() => countries.map(country => ({
+    selected_key: `+${country.code}`,
+    selected_value: `${country.iso} (+${country.code})`,
+    content: `+${country.code} ${country.name}`
+  })), []);
+  const forwardHandleChange = useCallback(({
+    data: changedData
+  }) => {
+    if (!changedData || !changedData.selected_key.trim()) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
+      return;
+    }
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(changedData === null || changedData === void 0 ? void 0 : changedData.selected_key);
+  }, [emptyValue, handleChange]);
+  const valueIndex = autocompleteData.findIndex(item => item.selected_key === value);
+  return React.createElement(Autocomplete, _extends({
+    className: classnames('dnb-forms-field-country-code', className, width !== undefined && `dnb-forms-field-country-code--width-${width}`),
+    placeholder: placeholder ?? ' ',
+    label_direction: layout,
+    label: label,
+    data: autocompleteData,
+    value: valueIndex,
+    disabled: disabled,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: forwardHandleChange,
+    status: (error === null || error === void 0 ? void 0 : error.message) ?? (warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString())),
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    independent_width: true,
+    search_numbers: true
+  }, forwardSpaceProps(props), {
+    stretch: width === 'stretch'
+  }));
+}
+CountryCode._supportsEufemiaSpacingProps = true;
+export default CountryCode;
+//# sourceMappingURL=CountryCode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountryCode.js","names":["React","useContext","useCallback","useMemo","Autocomplete","HelpButton","classnames","countries","forwardSpaceProps","useField","FormError","SharedContext","CountryCode","props","sharedContext","className","layout","placeholder","label","translation","Forms","countryCodeLabel","value","emptyValue","info","warning","error","disabled","help","width","handleFocus","handleBlur","handleChange","autocompleteData","map","country","selected_key","code","selected_value","iso","content","name","forwardHandleChange","data","changedData","trim","valueIndex","findIndex","item","createElement","_extends","undefined","label_direction","on_focus","on_blur","on_change","status","message","Error","toString","suffix","title","contents","independent_width","search_numbers","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/CountryCode.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Autocomplete, HelpButton } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<string> & {\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction CountryCode(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label = sharedContext?.translation.Forms.countryCodeLabel,\n    value,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(props)\n\n  const autocompleteData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const forwardHandleChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (!changedData || !changedData.selected_key.trim()) {\n        handleChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.(changedData?.selected_key)\n    },\n    [emptyValue, handleChange]\n  )\n\n  const valueIndex = autocompleteData.findIndex(\n    (item) => item.selected_key === value\n  )\n\n  return (\n    <Autocomplete\n      className={classnames(\n        'dnb-forms-field-country-code',\n        width !== undefined &&\n          `dnb-forms-field-country-code--width-${width}`,\n        className\n      )}\n      placeholder={placeholder ?? ' '}\n      label_direction={layout}\n      label={label}\n      data={autocompleteData}\n      value={valueIndex}\n      disabled={disabled}\n      on_focus={handleFocus}\n      on_blur={handleBlur}\n      on_change={forwardHandleChange}\n      status={\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      }\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      independent_width\n      search_numbers\n      {...forwardSpaceProps(props)}\n      stretch={width === 'stretch'}\n    />\n  )\n}\n\nCountryCode._supportsEufemiaSpacingProps = true\nexport default CountryCode\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<number> & {
+import type { FieldProps, FieldHelpProps } from '../field-types';
+export type Props = ComponentProps & FieldHelpProps & FieldProps<number, undefined> & {
     currency?: string;
 };
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -4,46 +4,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import classnames from 'classnames';
-import { InputMasked } from '../../../components';
-import { useField } from './hooks';
-import { forwardSpaceProps } from '../utils';
+import NumberComponent from './Number';
 function Currency(props) {
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
-    fromInput: ({
-      value,
-      numberValue
-    }) => {
-      if (value === '') {
-        return props.emptyValue;
-      }
-      return numberValue;
-    }
+    currency: props.currency ?? 'NOK',
+    placeholder: props.placeholder ?? 'kr'
   });
-  const {
-    className,
-    currency,
-    placeholder,
-    label,
-    value,
-    error,
-    disabled,
-    onFocus,
-    onBlur,
-    onChange
-  } = useField(preparedProps);
-  return React.createElement(InputMasked, _extends({
-    as_currency: currency ?? true,
-    className: classnames('dnb-forms-field-currency', className),
-    placeholder: placeholder ?? 'kr',
-    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
-    label: label,
-    label_direction: "vertical",
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
-    status: error === null || error === void 0 ? void 0 : error.message,
-    disabled: disabled
-  }, forwardSpaceProps(props)));
+  return React.createElement(NumberComponent, _extends({}, preparedProps, {
+    className: classnames('dnb-forms-field-currency', props.className)
+  }));
 }
 Currency._supportsEufemiaSpacingProps = true;
 export default Currency;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","InputMasked","useField","forwardSpaceProps","Currency","props","preparedProps","_objectSpread","fromInput","value","numberValue","emptyValue","className","currency","placeholder","label","error","disabled","onFocus","onBlur","onChange","createElement","_extends","as_currency","toString","label_direction","on_focus","on_blur","on_change","status","message","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { InputMasked } from '../../../components'\nimport { useField } from './hooks'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<number> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n  }\n  const {\n    className,\n    currency,\n    placeholder,\n    label,\n    value,\n    error,\n    disabled,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <InputMasked\n      as_currency={currency ?? true}\n      className={classnames('dnb-forms-field-currency', className)}\n      placeholder={placeholder ?? 'kr'}\n      value={value?.toString() ?? ''}\n      label={label}\n      label_direction=\"vertical\"\n      on_focus={onFocus}\n      on_blur={onBlur}\n      on_change={onChange}\n      status={error?.message}\n      disabled={disabled}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,iBAAiB,QAAQ,UAAU;AAS5C,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBF,KAAK;IACRG,SAAS,EAAEA,CAAC;MACVC,KAAK;MACLC;IAIF,CAAC,KAAK;MACJ,IAAID,KAAK,KAAK,EAAE,EAAE;QAChB,OAAOJ,KAAK,CAACM,UAAU;MACzB;MACA,OAAOD,WAAW;IACpB;EAAC,EACF;EACD,MAAM;IACJE,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,KAAK;IACLN,KAAK;IACLO,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC,GAAGlB,QAAQ,CAACI,aAAa,CAAC;EAE3B,OACEP,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAAqB,QAAA;IACVC,WAAW,EAAEV,QAAQ,IAAI,IAAK;IAC9BD,SAAS,EAAEZ,UAAU,CAAC,0BAA0B,EAAEY,SAAS,CAAE;IAC7DE,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCL,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/BT,KAAK,EAAEA,KAAM;IACbU,eAAe,EAAC,UAAU;IAC1BC,QAAQ,EAAER,OAAQ;IAClBS,OAAO,EAAER,MAAO;IAChBS,SAAS,EAAER,QAAS;IACpBS,MAAM,EAAEb,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,OAAQ;IACvBb,QAAQ,EAAEA;EAAS,GACfd,iBAAiB,CAACE,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,QAAQ,CAAC2B,4BAA4B,GAAG,IAAI;AAC5C,eAAe3B,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","NumberComponent","Currency","props","preparedProps","_objectSpread","currency","placeholder","createElement","_extends","className","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport NumberComponent from './Number'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? 'NOK',\n    placeholder: props.placeholder ?? 'kr',\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAM,UAAU;AAUtC,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdF,KAAK;IACRG,QAAQ,EAAEH,KAAK,CAACG,QAAQ,IAAI,KAAK;IACjCC,WAAW,EAAEJ,KAAK,CAACI,WAAW,IAAI;EAAI,EACvC;EAED,OACER,KAAA,CAAAS,aAAA,CAACP,eAAe,EAAAQ,QAAA,KACVL,aAAa;IACjBM,SAAS,EAAEV,UAAU,CAAC,0BAA0B,EAAEG,KAAK,CAACO,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAR,QAAQ,CAACS,4BAA4B,GAAG,IAAI;AAC5C,eAAeT,QAAQ"}

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

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

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext } from 'react';
-import { DatePicker } from '../../../components';
+import { DatePicker, HelpButton } from '../../../components';
 import { forwardSpaceProps } from '../utils';
 import { useField } from './hooks';
 import SharedContext from '../../../shared/Context';
@@ -20,11 +20,12 @@ function DateComponent(props) {
     className,
     label,
     value,
+    help,
     error,
     disabled,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = useField(preparedProps);
   return React.createElement(DatePicker, _extends({
     className: className,
@@ -36,9 +37,12 @@ function DateComponent(props) {
     show_input: true,
     show_cancel_button: true,
     show_reset_button: true,
-    on_change: onChange,
-    on_show: onFocus,
-    on_hide: onBlur
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_change: handleChange,
+    on_show: handleFocus,
+    on_hide: handleBlur
   }, forwardSpaceProps(props)));
 }
 DateComponent._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","forwardSpaceProps","useField","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","error","disabled","onFocus","onBlur","onChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    error,\n    disabled,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      on_change={onChange}\n      on_show={onFocus}\n      on_hide={onBlur}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,SAAS;AAGlC,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC,GAAGhB,QAAQ,CAACK,aAAa,CAAC;EAE3B,OACET,KAAA,CAAAqB,aAAA,CAACnB,UAAU,EAAAoB,QAAA;IACTT,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bd,IAAI,EAAEG,KAAM;IACZY,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,SAAS,EAAEZ,QAAS;IACpBa,OAAO,EAAEf,OAAQ;IACjBgB,OAAO,EAAEf;EAAO,GACZhB,iBAAiB,CAACI,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,aAAa,CAAC6B,4BAA4B,GAAG,IAAI;AACjD,eAAe7B,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","HelpButton","forwardSpaceProps","useField","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","help","error","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","suffix","title","contents","undefined","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker, HelpButton } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & FieldHelpProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    help,\n    error,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      on_change={handleChange}\n      on_show={handleFocus}\n      on_hide={handleBlur}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,EAAEC,UAAU,QAAQ,qBAAqB;AAC5D,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,SAAS;AAGlC,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGR,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGjB,QAAQ,CAACK,aAAa,CAAC;EAE3B,OACEV,KAAA,CAAAuB,aAAA,CAACrB,UAAU,EAAAsB,QAAA;IACTV,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEgB,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bf,IAAI,EAAEG,KAAM;IACZa,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,MAAM,EACJjB,IAAI,GACFjB,KAAA,CAAAuB,aAAA,CAACpB,UAAU;MAACgC,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,QAAqB,CAAC,GACzDC,SACL;IACDC,SAAS,EAAEhB,YAAa;IACxBiB,OAAO,EAAEnB,WAAY;IACrBoB,OAAO,EAAEnB;EAAW,GAChBjB,iBAAiB,CAACI,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,aAAa,CAACkC,4BAA4B,GAAG,IAAI;AACjD,eAAelC,aAAa"}

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

@@ -1,5 +1,6 @@
+import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
+import type { FieldProps, FieldHelpProps } from '../field-types';
 interface ErrorMessages {
     required?: string;
     schema?: string;
@@ -9,8 +10,11 @@ interface ErrorMessages {
     exclusiveMaximum?: string;
     multipleOf?: string;
 }
-export type Props = ComponentProps & FieldProps<number, undefined, ErrorMessages> & {
+export type Props = ComponentProps & FieldHelpProps & FieldProps<number, undefined, ErrorMessages> & {
     inputClassName?: string;
+    currency?: InputMaskedProps['as_currency'];
+    percent?: InputMaskedProps['as_percent'];
+    mask?: InputMaskedProps['mask'];
     thousandSeparator?: string | true;
     decimalSymbol?: string;
     decimalLimit?: number;
@@ -21,7 +25,7 @@ export type Props = ComponentProps & FieldProps<number, undefined, ErrorMessages
     exclusiveMinimum?: number;
     exclusiveMaximum?: number;
     multipleOf?: number;
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
     rightAligned?: boolean;
 };
 declare function NumberComponent(props: Props): import("react/jsx-runtime").JSX.Element;