@dnb/eufemia 10.7.0 → 10.9.0

package/es/extensions/forms/style/dnb-forms.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;
@@ -32,11 +28,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;
@@ -46,10 +45,40 @@
 }
 
 .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;
+}
+
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.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;
 }
 
 .dnb-forms-button-row {
@@ -61,10 +90,10 @@
 }
 
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);
@@ -137,6 +166,15 @@
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-flex-item--grow {
   flex-grow: 1;
@@ -144,6 +182,15 @@
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
 }
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-section + .dnb-forms-section {
   margin-top: var(--spacing-large);
@@ -155,9 +202,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -168,21 +215,47 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }
 
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }
 
-.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;
@@ -197,20 +270,23 @@
   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;
 }
 
 .dnb-forms-value-block {

package/es/extensions/forms/style/dnb-forms.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-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-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.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-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}
+.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}.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}.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}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.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}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:.25rem solid var(--color-pistachio);border-radius:.75rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.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}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+import "./dnb-forms.min.css";

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/extensions/forms/style/index.js"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-forms.scss'\n"],"mappings":"AAKA,OAAO,qBAAkB"}

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

@@ -1,11 +1,104 @@
-interface IOptions {
+import { JSONSchema7 } from 'json-schema';
+import { SpacingProps } from '../../components/space/types';
+interface IFormErrorOptions {
     validationRule?: string | string[];
 }
+/**
+ * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling
+ */
 export declare class FormError extends Error {
     /**
      * What validation rule did the error occur based on? (i.e: minLength, required or maximum)
      */
     validationRule?: string | string[];
-    constructor(message: string, options?: IOptions);
+    constructor(message: string, options?: IFormErrorOptions);
+}
+export declare const pickSpacingProps: <Props extends SpacingProps>(props: Props) => SpacingProps;
+export declare const omitSpacingProps: <Props extends SpacingProps>(props: Props) => Omit<Props, "space" | keyof import("../../components/space/types").SpacingElementProps>;
+interface DefaultErrorMessages {
+    required?: string;
+}
+export interface DataValueReadProps<Value = unknown> {
+    /** JSON Pointer for where the data for this field is located in the source dataset */
+    path?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    value?: Value;
+}
+export declare function pickDataValueReadProps<Props extends DataValueReadProps>(props: Props): DataValueReadProps;
+export declare function omitDataValueReadProps<Props extends DataValueReadProps>(props: Props): Omit<DataValueReadProps, keyof DataValueReadProps>;
+export interface DataValueWriteProps<Value = unknown, EmptyValue = undefined | string | number> {
+    emptyValue?: EmptyValue;
+    onFocus?: (value: Value | EmptyValue) => void;
+    onBlur?: (value: Value | EmptyValue) => void;
+    onChange?: (value: Value | EmptyValue) => void;
+}
+export declare function pickDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): DataValueWriteProps;
+export declare function omitDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): Omit<DataValueWriteProps, keyof DataValueWriteProps>;
+export type DataValueReadWriteProps<Value = unknown, EmptyValue = undefined | string | number> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export declare function pickDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): DataValueReadWriteProps;
+export declare function omitDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps>;
+export type ComponentProps = SpacingProps & {
+    className?: string;
+};
+export type DataValueReadComponentProps<Value = unknown> = ComponentProps & DataValueReadProps<Value>;
+export type DataValueReadWriteComponentProps<Value = unknown, EmptyValue = undefined | string | number> = ComponentProps & DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export interface FieldProps<Value = unknown, EmptyValue = undefined | string | number, ErrorMessages extends {
+    required?: string;
+} = DefaultErrorMessages> extends DataValueReadWriteComponentProps<Value, EmptyValue> {
+    /** ID added to the actual field component, and linked to the label via for-attribute */
+    id?: string;
+    layout?: 'horizontal' | 'vertical';
+    /** Main label text */
+    label?: string;
+    /** A more discreet text displayed beside the label (i.e for "(optional)") */
+    labelDescription?: string;
+    /** Secondary information displayed at the end of the label line (i.e character counter) */
+    labelSecondary?: string;
+    /** Text showing in place of the value if no value is given */
+    placeholder?: string;
+    info?: Error | FormError | string;
+    warning?: Error | FormError | string;
+    error?: Error | FormError;
+    disabled?: boolean;
+    required?: boolean;
+    schema?: JSONSchema7;
+    validator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    onBlurValidator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    /**
+     * Should error messages based on validation be shown initially (from given value-prop or source data)
+     * before the user interacts with the field?
+     * @default false
+     * */
+    validateInitially?: boolean;
+    /**
+     * Should error messages be shown when touching (like focusing a field and blurring) without having changed
+     * the value? So the user did not introduce a new error, but it was invalid based on validation initially.
+     */
+    validateUnchanged?: boolean;
+    /** Should validation be done while writing, not just when blurring the field? */
+    continuousValidation?: boolean;
+    errorMessages?: ErrorMessages;
+    toInput?: (external: Value | undefined) => any;
+    fromInput?: (...args: any[]) => Value | undefined;
+}
+export interface FieldHelpProps {
+    help?: {
+        title?: string;
+        contents?: string;
+    };
+}
+export interface ValueProps<Value> extends DataValueReadComponentProps<Value> {
+    label?: string;
+    /** Should the component render if the value is empty? */
+    showEmpty?: boolean;
+    /** Text showing in place of the value if no value is given. */
+    placeholder?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    /** For showing the value inline (not as a block element) */
+    inline?: boolean;
+    /** Prepare value for display (regardless of source like props or data context) */
+    prepare?: (external: Value | undefined) => string;
 }
 export {};

package/es/extensions/forms/types.js

@@ -1,4 +1,6 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["space", "top", "bottom", "left", "right"];
 export class FormError extends Error {
   constructor(message, options) {
     super(message);
@@ -8,4 +10,44 @@ export class FormError extends Error {
     }
   }
 }
+export const pickSpacingProps = props => {
+  return {
+    space: props === null || props === void 0 ? void 0 : props.space,
+    top: props === null || props === void 0 ? void 0 : props.top,
+    bottom: props === null || props === void 0 ? void 0 : props.bottom,
+    left: props === null || props === void 0 ? void 0 : props.left,
+    right: props === null || props === void 0 ? void 0 : props.right
+  };
+};
+export const omitSpacingProps = props => {
+  const {
+      space,
+      top,
+      bottom,
+      left,
+      right
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return restProps;
+};
+const dataValueReadProps = ['path', 'elementPath', 'value'];
+export function pickDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueReadProps.includes(key)));
+}
+export function omitDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueReadProps.includes(key)));
+}
+const dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange'];
+export function pickDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueWriteProps.includes(key)));
+}
+export function omitDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueWriteProps.includes(key)));
+}
+export function pickDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueReadProps.includes(key) || dataValueWriteProps.includes(key)));
+}
+export function omitDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueReadProps.includes(key) && !dataValueWriteProps.includes(key)));
+}
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["interface IOptions {\n  validationRule?: string | string[]\n}\n\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: string | string[]\n\n  constructor(message: string, options?: IOptions) {\n    super(message)\n\n    if (options) {\n      this.validationRule = options.validationRule\n    }\n  }\n}\n"],"mappings":";AAIA,OAAO,MAAMA,SAAS,SAASC,KAAK,CAAC;EAMnCC,WAAWA,CAACC,OAAe,EAAEC,OAAkB,EAAE;IAC/C,KAAK,CAACD,OAAO,CAAC;IAAAE,eAAA;IAEd,IAAID,OAAO,EAAE;MACX,IAAI,CAACE,cAAc,GAAGF,OAAO,CAACE,cAAc;IAC9C;EACF;AACF"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","restProps","_objectWithoutProperties","_excluded","dataValueReadProps","pickDataValueReadProps","Object","fromEntries","entries","filter","key","includes","omitDataValueReadProps","dataValueWriteProps","pickDataValueWriteProps","omitDataValueWriteProps","pickDataValueReadWriteProps","omitDataValueReadWriteProps"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { SpacingProps } from '../../components/space/types'\n\ninterface IFormErrorOptions {\n  validationRule?: string | string[]\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: string | string[]\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      this.validationRule = options.validationRule\n    }\n  }\n}\n\n// Spacing\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): SpacingProps => {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\nexport const omitSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): Omit<Props, keyof SpacingProps> => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { space, top, bottom, left, right, ...restProps } = props\n  return restProps\n}\n\n// Data value\n\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  elementPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'elementPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  label?: string\n  /** Should the component render if the value is empty? */\n  showEmpty?: boolean\n  /** Text showing in place of the value if no value is given. */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  elementPath?: string\n  /** For showing the value inline (not as a block element) */\n  inline?: boolean\n  // Derivatives\n  /** Prepare value for display (regardless of source like props or data context) */\n  prepare?: (external: Value | undefined) => string\n}\n"],"mappings":";;;AAUA,OAAO,MAAMA,SAAS,SAASC,KAAK,CAAC;EAMnCC,WAAWA,CAACC,OAAe,EAAEC,OAA2B,EAAE;IACxD,KAAK,CAACD,OAAO,CAAC;IAAAE,eAAA;IAEd,IAAID,OAAO,EAAE;MACX,IAAI,CAACE,cAAc,GAAGF,OAAO,CAACE,cAAc;IAC9C;EACF;AACF;AAIA,OAAO,MAAMC,gBAAgB,GAC3BC,KAAY,IACK;EACjB,OAAO;IACLC,KAAK,EAAED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,KAAK;IACnBC,GAAG,EAAEF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,GAAG;IACfC,MAAM,EAAEH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,MAAM;IACrBC,IAAI,EAAEJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,IAAI;IACjBC,KAAK,EAAEL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK;EAChB,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAC3BN,KAAY,IACwB;EAEpC,MAAM;MAAEC,KAAK;MAAEC,GAAG;MAAEC,MAAM;MAAEC,IAAI;MAAEC;IAAoB,CAAC,GAAGL,KAAK;IAAnBO,SAAS,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA;EAC/D,OAAOF,SAAS;AAClB,CAAC;AAgBD,MAAMG,kBAAkB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC;AAE3D,OAAO,SAASC,sBAAsBA,CACpCX,KAAY,EACQ;EACpB,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCN,kBAAkB,CAACO,QAAQ,CAACD,GAAG,CACjC,CACF,CAAC;AACH;AAEA,OAAO,SAASE,sBAAsBA,CACpClB,KAAY,EACwC;EACpD,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACN,kBAAkB,CAACO,QAAQ,CAACD,GAAG,CAC7C,CACF,CAAC;AACH;AAYA,MAAMG,mBAAmB,GAAG,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC;AAE3E,OAAO,SAASC,uBAAuBA,CACrCpB,KAAY,EACS;EACrB,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAClC,CACF,CAAC;AACH;AAEA,OAAO,SAASK,uBAAuBA,CACrCrB,KAAY,EAC0C;EACtD,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAC9C,CACF,CAAC;AACH;AAOA,OAAO,SAASM,2BAA2BA,CAEzCtB,KAAY,EAA2B;EACvC,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJN,kBAAkB,CAACO,QAAQ,CAACD,GAAG,CAAC,IAChCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACpC,CACF,CAAC;AACH;AAEA,OAAO,SAASO,2BAA2BA,CAGzCvB,KAAY,EACkD;EAC9D,OAAOY,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACd,KAAK,IAAI,CAAC,CAAC,CAAC,CAACe,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJ,CAACN,kBAAkB,CAACO,QAAQ,CAACD,GAAG,CAAC,IACjC,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACrC,CACF,CAAC;AACH"}

package/es/extensions/forms/utils/TestElement/style/dnb-test-element.css

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

package/es/extensions/forms/utils/TestElement/style/dnb-test-element.min.css

@@ -1 +1 @@
-.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}
+.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/es/extensions/forms/utils/TestElement/style/dnb-test-element.scss

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

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

@@ -1,3 +1,2 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';

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

@@ -1,4 +1,3 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport * from './components'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}
+{"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}

package/es/extensions/forms/utils/useWasChanged.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ * Shallow object comparison to easily find out what props of an object was changed since the last render
+ */
+export default function useWasChanged<Subject extends object>(subject: Subject, title?: string, debug?: boolean): void;

package/es/extensions/forms/utils/useWasChanged.js

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+export default function useWasChanged(subject, title, debug) {
+  const previous = useRef(subject);
+  if (!previous.current && !subject) {
+    console.log('useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?');
+  }
+  const {
+    changed,
+    unchanged
+  } = [...Object.entries(subject), ...Object.entries(previous.current ?? {}).filter(([key]) => subject[key] === undefined)].reduce(({
+    changed,
+    unchanged
+  }, [key, value]) => {
+    var _previous$current;
+    if (((_previous$current = previous.current) === null || _previous$current === void 0 ? void 0 : _previous$current[key]) !== (subject === null || subject === void 0 ? void 0 : subject[key])) {
+      return {
+        changed: changed.concat(key),
+        unchanged
+      };
+    } else {
+      return {
+        changed,
+        unchanged: unchanged.concat(key)
+      };
+    }
+  }, {
+    changed: [],
+    unchanged: []
+  });
+  if (changed.length === 0 && !debug) {
+    return;
+  }
+  console.groupCollapsed(`${title ?? 'object'} -- ${changed.length} members was changed`);
+  Object.values(changed).map(key => {
+    if (debug) {
+      var _previous$current2;
+      console.groupCollapsed(`CHANGED: ${key}`);
+      console.log('PREVIOUS: ', (_previous$current2 = previous.current) === null || _previous$current2 === void 0 ? void 0 : _previous$current2[key]);
+      console.log('CURRENT: ', subject === null || subject === void 0 ? void 0 : subject[key]);
+      console.groupEnd();
+    } else {
+      console.log(`CHANGED: ${key}`);
+    }
+  });
+  Object.values(unchanged).map(key => {
+    console.log(`UNCHANGED: ${key}`);
+  });
+  previous.current = subject;
+  console.groupEnd();
+}
+//# sourceMappingURL=useWasChanged.js.map

package/es/extensions/forms/utils/useWasChanged.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWasChanged.js","names":["useRef","useWasChanged","subject","title","debug","previous","current","console","log","changed","unchanged","Object","entries","filter","key","undefined","reduce","value","_previous$current","concat","length","groupCollapsed","values","map","_previous$current2","groupEnd"],"sources":["../../../../../src/extensions/forms/utils/useWasChanged.ts"],"sourcesContent":["import { useRef } from 'react'\n\n/**\n *\n * Shallow object comparison to easily find out what props of an object was changed since the last render\n */\nexport default function useWasChanged<Subject extends object>(\n  subject: Subject,\n  title?: string,\n  debug?: boolean\n): void {\n  const previous = useRef<Subject>(subject)\n  if (!previous.current && !subject) {\n    console.log(\n      'useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?'\n    )\n  }\n\n  const { changed, unchanged } = [\n    ...Object.entries(subject),\n    ...Object.entries(previous.current ?? {}).filter(\n      ([key]) => subject[key] === undefined\n    ),\n  ].reduce(\n    ({ changed, unchanged }, [key, value]) => {\n      if (previous.current?.[key] !== subject?.[key]) {\n        return {\n          changed: changed.concat(key),\n          unchanged,\n        }\n      } else {\n        return {\n          changed,\n          unchanged: unchanged.concat(key),\n        }\n      }\n    },\n    { changed: [], unchanged: [] }\n  )\n\n  if (changed.length === 0 && !debug) {\n    return\n  }\n\n  console.groupCollapsed(\n    `${title ?? 'object'} -- ${changed.length} members was changed`\n  )\n\n  Object.values(changed).map((key) => {\n    if (debug) {\n      console.groupCollapsed(`CHANGED: ${key}`)\n      console.log('PREVIOUS: ', previous.current?.[key])\n      console.log('CURRENT: ', subject?.[key])\n      console.groupEnd()\n    } else {\n      console.log(`CHANGED: ${key}`)\n    }\n  })\n  Object.values(unchanged).map((key) => {\n    console.log(`UNCHANGED: ${key}`)\n  })\n\n  previous.current = subject\n\n  console.groupEnd()\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,OAAO;AAM9B,eAAe,SAASC,aAAaA,CACnCC,OAAgB,EAChBC,KAAc,EACdC,KAAe,EACT;EACN,MAAMC,QAAQ,GAAGL,MAAM,CAAUE,OAAO,CAAC;EACzC,IAAI,CAACG,QAAQ,CAACC,OAAO,IAAI,CAACJ,OAAO,EAAE;IACjCK,OAAO,CAACC,GAAG,CACT,+GACF,CAAC;EACH;EAEA,MAAM;IAAEC,OAAO;IAAEC;EAAU,CAAC,GAAG,CAC7B,GAAGC,MAAM,CAACC,OAAO,CAACV,OAAO,CAAC,EAC1B,GAAGS,MAAM,CAACC,OAAO,CAACP,QAAQ,CAACC,OAAO,IAAI,CAAC,CAAC,CAAC,CAACO,MAAM,CAC9C,CAAC,CAACC,GAAG,CAAC,KAAKZ,OAAO,CAACY,GAAG,CAAC,KAAKC,SAC9B,CAAC,CACF,CAACC,MAAM,CACN,CAAC;IAAEP,OAAO;IAAEC;EAAU,CAAC,EAAE,CAACI,GAAG,EAAEG,KAAK,CAAC,KAAK;IAAA,IAAAC,iBAAA;IACxC,IAAI,EAAAA,iBAAA,GAAAb,QAAQ,CAACC,OAAO,cAAAY,iBAAA,uBAAhBA,iBAAA,CAAmBJ,GAAG,CAAC,OAAKZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGY,GAAG,CAAC,GAAE;MAC9C,OAAO;QACLL,OAAO,EAAEA,OAAO,CAACU,MAAM,CAACL,GAAG,CAAC;QAC5BJ;MACF,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLD,OAAO;QACPC,SAAS,EAAEA,SAAS,CAACS,MAAM,CAACL,GAAG;MACjC,CAAC;IACH;EACF,CAAC,EACD;IAAEL,OAAO,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAC/B,CAAC;EAED,IAAID,OAAO,CAACW,MAAM,KAAK,CAAC,IAAI,CAAChB,KAAK,EAAE;IAClC;EACF;EAEAG,OAAO,CAACc,cAAc,CACnB,GAAElB,KAAK,IAAI,QAAS,OAAMM,OAAO,CAACW,MAAO,sBAC5C,CAAC;EAEDT,MAAM,CAACW,MAAM,CAACb,OAAO,CAAC,CAACc,GAAG,CAAET,GAAG,IAAK;IAClC,IAAIV,KAAK,EAAE;MAAA,IAAAoB,kBAAA;MACTjB,OAAO,CAACc,cAAc,CAAE,YAAWP,GAAI,EAAC,CAAC;MACzCP,OAAO,CAACC,GAAG,CAAC,YAAY,GAAAgB,kBAAA,GAAEnB,QAAQ,CAACC,OAAO,cAAAkB,kBAAA,uBAAhBA,kBAAA,CAAmBV,GAAG,CAAC,CAAC;MAClDP,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGY,GAAG,CAAC,CAAC;MACxCP,OAAO,CAACkB,QAAQ,CAAC,CAAC;IACpB,CAAC,MAAM;MACLlB,OAAO,CAACC,GAAG,CAAE,YAAWM,GAAI,EAAC,CAAC;IAChC;EACF,CAAC,CAAC;EACFH,MAAM,CAACW,MAAM,CAACZ,SAAS,CAAC,CAACa,GAAG,CAAET,GAAG,IAAK;IACpCP,OAAO,CAACC,GAAG,CAAE,cAAaM,GAAI,EAAC,CAAC;EAClC,CAAC,CAAC;EAEFT,QAAQ,CAACC,OAAO,GAAGJ,OAAO;EAE1BK,OAAO,CAACkB,QAAQ,CAAC,CAAC;AACpB"}

package/es/extensions/forms/variables.scss

@@ -0,0 +1,3 @@
+$forms-field-width-small: 5rem;
+$forms-field-width-medium: 11rem;
+$forms-field-width-large: 21rem;

package/es/extensions/lib.d.ts

@@ -19,8 +19,6 @@ export declare const getExtensions: () => {
         Currency: typeof import("./forms/Field/Currency").default;
         Date: typeof import("./forms/Field/Date").default;
         Email: typeof import("./forms/Field/Email").default;
-        FirstName: typeof import("./forms/Field/FirstName").default;
-        LastName: typeof import("./forms/Field/LastName").default;
         NationalIdentityNumber: typeof import("./forms/Field/NationalIdentityNumber").default;
         OrganizationNumber: typeof import("./forms/Field/OrganizationNumber").default;
         PhoneNumber: typeof import("./forms/Field/PhoneNumber").default;
@@ -30,6 +28,7 @@ export declare const getExtensions: () => {
         Option: typeof import("./forms/Field/Option").default;
         SelectCountry: typeof import("./forms/Field/SelectCountry").default;
         BankAccountNumber: typeof import("./forms/Field/BankAccountNumber").default;
+        CountryCode: typeof import("./forms/Field/CountryCode").default;
     };
     PaymentCard: typeof PaymentCard;
 };