@pega/cosmos-react-core 3.0.0-dev.11.0 → 3.0.0-dev.14.0

package/lib/components/CompositeInput/CompositeInput.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledInputButton: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCompositeInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default StyledCompositeInput;
+//# sourceMappingURL=CompositeInput.styles.d.ts.map

package/lib/components/CompositeInput/CompositeInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2GAO7B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAmBhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGA4BhC,CAAC;AAIF,eAAe,oBAAoB,CAAC"}

package/lib/components/CompositeInput/CompositeInput.styles.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+import { StyledButton } from '../Button';
+import { defaultThemeProp } from '../../theme';
+import { StyledIcon } from '../Icon';
+import StyledInput from '../Input/Input.styles';
+export const StyledInputButton = styled(StyledInput) `
+  background-color: inherit;
+  color: currentColor;
+  outline: none;
+  border: 0;
+  caret-color: transparent;
+  cursor: pointer;
+`;
+StyledInputButton.defaultProps = defaultThemeProp;
+export const StyledInputContainer = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      width: 100%;
+      position: relative;
+
+      > ${StyledIcon} {
+        position: absolute;
+        inset-inline-end: ${spacing};
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+    `;
+});
+StyledInputContainer.defaultProps = defaultThemeProp;
+export const StyledCompositeInput = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'hit-area': hitArea }, components: { 'form-control': formControl, input } } }) => {
+    return css `
+      height: ${input.height};
+      min-height: ${hitArea['mouse-min']};
+
+      &:focus-within {
+        border-color: ${formControl[':focus']['border-color']};
+        box-shadow: ${formControl[':focus']['box-shadow']};
+      }
+
+      &:hover:not([readonly]):not([disabled]):focus-within {
+        border-color: transparent;
+      }
+
+      & > ${StyledButton} {
+        border-start-start-radius: 0;
+        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});
+        border-end-start-radius: 0;
+        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});
+      }
+    `;
+});
+StyledCompositeInput.defaultProps = defaultThemeProp;
+export default StyledCompositeInput;
+//# sourceMappingURL=CompositeInput.styles.js.map

package/lib/components/CompositeInput/CompositeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;CAOnD,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;UAIJ,UAAU;;4BAEQ,OAAO;;;;;KAK9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;wBAGhB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport StyledInput from '../Input/Input.styles';\n\nexport const StyledInputButton = styled(StyledInput)`\n  background-color: inherit;\n  color: currentColor;\n  outline: none;\n  border: 0;\n  caret-color: transparent;\n  cursor: pointer;\n`;\n\nStyledInputButton.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      position: relative;\n\n      > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: ${spacing};\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n      }\n    `;\n  }\n);\n\nStyledInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCompositeInput = styled.div(\n  ({\n    theme: {\n      base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n      components: { 'form-control': formControl, input }\n    }\n  }) => {\n    return css`\n      height: ${input.height};\n      min-height: ${hitArea['mouse-min']};\n\n      &:focus-within {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n\n      &:hover:not([readonly]):not([disabled]):focus-within {\n        border-color: transparent;\n      }\n\n      & > ${StyledButton} {\n        border-start-start-radius: 0;\n        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n        border-end-start-radius: 0;\n        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n      }\n    `;\n  }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\n"]}

package/lib/components/CompositeInput/CompositeInput.types.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType, Ref } from 'react';
+import { BaseProps, DeferInfer, NoChildrenProp } from '../../types';
+import { FormControlProps } from '../FormControl';
+export interface CompositeInputProps<P extends object = object> extends BaseProps, NoChildrenProp {
+    /**
+     * Sets DOM id for the control and associates label element via 'for' attribute.
+     * If an id is not pass, a random id will be generated for any render.
+     */
+    id?: FormControlProps['id'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Pass a string or a fragment with an Icon and string. */
+    label?: FormControlProps['label'];
+    /** Visually hides the label region. */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
+    info?: FormControlProps['info'];
+    /** Indicate if the field is required. The browser defaults to false. */
+    required?: FormControlProps['required'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Callback when clear button is clicked. */
+    onClear: () => void;
+    /** String representation of the complex value. */
+    value?: string;
+    /** Text visible when on value has been set. */
+    placeholder?: FormControlProps['placeholder'];
+    /** Value form options. */
+    dialog: {
+        /**
+         * A component to render the main portion of the form.
+         */
+        renderer: ComponentType<P>;
+        /**
+         * A props object that will be passed to the form renderer.
+         */
+        rendererProps?: DeferInfer<P>;
+        /** Callback when cancel button is clicked. */
+        onCancel: ({ close }: {
+            close: () => void;
+        }) => void;
+        /** Callback when apply button is clicked. */
+        onApply: ({ close }: {
+            close: () => void;
+        }) => void;
+    };
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=CompositeInput.types.d.ts.map

package/lib/components/CompositeInput/CompositeInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,EAAE,cAAc;IAC/F;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,0BAA0B;IAC1B,MAAM,EAAE;QACN;;WAEG;QACH,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;QAC9B,8CAA8C;QAC9C,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,6CAA6C;QAC7C,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/CompositeInput/CompositeInput.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CompositeInput.types.js.map

package/lib/components/CompositeInput/CompositeInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.types.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport { BaseProps, DeferInfer, NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport interface CompositeInputProps<P extends object = object> extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Callback when clear button is clicked. */\n  onClear: () => void;\n  /** String representation of the complex value. */\n  value?: string;\n  /** Text visible when on value has been set. */\n  placeholder?: FormControlProps['placeholder'];\n  /** Value form options. */\n  dialog: {\n    /**\n     * A component to render the main portion of the form.\n     */\n    renderer: ComponentType<P>;\n    /**\n     * A props object that will be passed to the form renderer.\n     */\n    rendererProps?: DeferInfer<P>;\n    /** Callback when cancel button is clicked. */\n    onCancel: ({ close }: { close: () => void }) => void;\n    /** Callback when apply button is clicked. */\n    onApply: ({ close }: { close: () => void }) => void;\n  };\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CompositeInput/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CompositeInput } from './CompositeInput';
+export { CompositeInputProps } from './CompositeInput.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CompositeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/CompositeInput/index.js

@@ -0,0 +1,2 @@
+export { default as CompositeInput } from './CompositeInput';
+//# sourceMappingURL=index.js.map

package/lib/components/CompositeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default as CompositeInput } from './CompositeInput';\nexport { CompositeInputProps } from './CompositeInput.types';\n"]}

package/lib/components/Configuration/Configuration.d.ts

@@ -1,16 +1,13 @@
 import { FunctionComponent, ComponentType, ReactNode, Context } from 'react';
-import { ThemeMachine, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
+import { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
 import { Translation, TranslationPack } from '../../i18n';
 import { FileInputProps } from '../File';
+import '../../init';
 export interface ConfigurationProps {
     /**
      * Any components or nodes that should be impacted by the settings applied by this Configuration component.
      */
     children: ReactNode;
-    /**
-     * Context to read previous configuration values from.
-     */
-    context?: Context<ConfigurationContextValue>;
     /**
      * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).
      */
@@ -50,27 +47,31 @@ export interface ConfigurationProps {
      * @default false
      */
     renderNativeControls?: boolean;
+    /**
+     * String to identify this configuration instance.
+     */
+    id?: string;
 }
-declare const initializedKey: unique symbol;
 export interface ConfigurationContextValue {
-    [initializedKey]: boolean;
     locale: string;
     direction: ConfigurationProps['direction'];
     translations: TranslationPack;
-    themeMachine: ThemeMachine<DefaultThemeDefinition>;
+    themeMachine: ThemeMachineLike<DefaultThemeDefinition>;
     styleSheetTarget?: HTMLElement;
     portalTarget?: Element;
     overrideMap: NonNullable<ConfigurationProps['overrideMap']>;
     renderNativeControls: boolean;
+    initialized: boolean;
 }
 export declare const ConfigurationContext: Context<ConfigurationContextValue>;
-declare const metaKey: unique symbol;
-interface CosmosMetadata {
+interface CosmosInstance {
     version: string;
+    configs: symbol[];
 }
-declare global {
-    interface Window {
-        [metaKey]: CosmosMetadata[];
+declare module '../../init' {
+    interface CosmosGlobals {
+        instances?: CosmosInstance[];
+        configurationContext?: Context<ConfigurationContextValue>;
     }
 }
 declare const Configuration: FunctionComponent<ConfigurationProps>;

package/lib/components/Configuration/Configuration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,EAIT,OAAO,EACR,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,YAAY,EAEZ,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,cAAc,eAAkE,CAAC;AAEvF,MAAM,WAAW,yBAAyB;IACxC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAKD,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAEH,QAAA,MAAM,OAAO,eAAiD,CAAC;AAE/D,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,CAAC,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;KAC7B;CACF;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAkExD,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,EAIT,OAAO,EACR,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,gBAAgB,EAEhB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAEH,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAOD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;QAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;KAC3D;CACF;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgFxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Configuration/Configuration.js

@@ -7,11 +7,9 @@ import { ThemeMachine, BaseThemeMachine } from '../../theme';
 import { createTranslationPack, DefaultTranslation, direction as directionOfLocale } from '../../i18n';
 import { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';
 import pkg from '../../../package.json';
-const initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');
-const defaultProps = {};
+import '../../init';
 const defaultLocale = navigatorIsAvailable ? navigator.language : 'en';
 export const ConfigurationContext = createContext({
-    [initializedKey]: false,
     locale: defaultLocale,
     direction: directionOfLocale(defaultLocale),
     translations: DefaultTranslation,
@@ -19,17 +17,23 @@ export const ConfigurationContext = createContext({
     styleSheetTarget: documentIsAvailable ? document.head : undefined,
     portalTarget: documentIsAvailable ? document.body : undefined,
     overrideMap: {},
-    renderNativeControls: false
+    renderNativeControls: false,
+    initialized: false
 });
-const metaKey = Symbol.for('@pega/cosmos-react-core.metadata');
+const instance = {
+    version: pkg.version,
+    configs: []
+};
 if (windowIsAvailable) {
-    if (!window[metaKey]) {
-        window[metaKey] = [];
+    if (!window.cosmos.instances) {
+        window.cosmos.instances = [];
     }
-    window[metaKey].push({ version: pkg.version });
+    window.cosmos.instances.push(instance);
 }
-const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
-    const ctx = useContext(context);
+const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls, id }) => {
+    const ctx = useContext(windowIsAvailable
+        ? window.cosmos.configurationContext ?? ConfigurationContext
+        : ConfigurationContext);
     const themeMachine = theme
         ? new ThemeMachine({ theme, parent: ctx.themeMachine })
         : ctx.themeMachine;
@@ -38,7 +42,14 @@ const Configuration = ({ context = ConfigurationContext, children, locale, direc
     useEffect(() => {
         setMounted(true);
     }, []);
-    const wrappedChildren = ctx[initializedKey] ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: styleSheetTarget ?? ctx.styleSheetTarget, children: _jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
+    useEffect(() => {
+        const sym = Symbol(id);
+        instance.configs.push(sym);
+        return () => {
+            instance.configs = instance.configs.filter(item => item !== sym);
+        };
+    }, [id]);
+    const wrappedChildren = ctx.initialized ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: styleSheetTarget ?? ctx.styleSheetTarget, children: _jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
                     mounted &&
                     documentIsAvailable &&
                     createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap', "data-cosmos-global-style": true }), styleSheetTarget ?? ctx.styleSheetTarget ?? document.head), _jsx(GlobalStyle, {}), children] }) }));
@@ -47,13 +58,12 @@ const Configuration = ({ context = ConfigurationContext, children, locale, direc
             direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
             translations,
             themeMachine,
-            [initializedKey]: true,
             styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,
             portalTarget: portalTarget ?? ctx.portalTarget,
             overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,
-            renderNativeControls: renderNativeControls ?? ctx.renderNativeControls
+            renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
+            initialized: true
         }, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: wrappedChildren }) }));
 };
-Configuration.defaultProps = defaultProps;
 export default Configuration;
 //# sourceMappingURL=Configuration.js.map

package/lib/components/Configuration/Configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * Context to read previous configuration values from.\n   */\n  context?: Context<ConfigurationContextValue>;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n  [initializedKey]: boolean;\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachine<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  [initializedKey]: false,\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [metaKey]: CosmosMetadata[];\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window[metaKey]) {\n    window[metaKey] = [];\n  }\n\n  window[metaKey].push({ version: pkg.version });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  context = ConfigurationContext,\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls\n}: ConfigurationProps) => {\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const wrappedChildren = ctx[initializedKey] ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n              data-cosmos-global-style\n            />,\n            styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        [initializedKey]: true,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}
+{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  ThemeMachineLike,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport '../../init';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /**\n   * String to identify this configuration instance.\n   */\n  id?: string;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false,\n  initialized: false\n});\n\ninterface CosmosInstance {\n  version: string;\n  configs: symbol[];\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  configs: []\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: CosmosInstance[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls,\n  id\n}: ConfigurationProps) => {\n  const ctx = useContext(\n    windowIsAvailable\n      ? window.cosmos.configurationContext ?? ConfigurationContext\n      : ConfigurationContext\n  );\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    instance.configs.push(sym);\n\n    return () => {\n      instance.configs = instance.configs.filter(item => item !== sym);\n    };\n  }, [id]);\n\n  const wrappedChildren = ctx.initialized ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n              data-cosmos-global-style\n            />,\n            styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n        initialized: true\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nexport default Configuration;\n"]}

package/lib/components/Currency/utils.js

@@ -13,8 +13,8 @@ export const isValidCurrency = (currency) => {
 export const getFormattedValue = (value, locale, currency, { showGroupSeparators = true, showAs = 'code', numberOfDecimals } = {}) => {
     if (!currency)
         return getNumberFormattedValue(value, locale, undefined, {
-            showGroupSeparators,
-            numberOfDecimals
+            useGrouping: showGroupSeparators,
+            maximumFractionDigits: numberOfDecimals
         });
     const isCurrency = isValidCurrency(currency);
     const [integer, fractionPart] = value.split('.', 2);

package/lib/components/Currency/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { NUMBER_MAX_DECIMAL_PLACES } from '../Number/NumberInput.types';\nimport { getFormattedValue as getNumberFormattedValue } from '../Number/utils';\n\nexport const isValidCurrency = (currency: string) => {\n  try {\n    // eslint-disable-next-line no-new\n    new Intl.NumberFormat(undefined, { style: 'currency', currency });\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nexport const getFormattedValue = (\n  value: string,\n  locale: string,\n  currency?: string,\n  {\n    showGroupSeparators = true,\n    showAs = 'code',\n    numberOfDecimals\n  }: { showGroupSeparators?: boolean; showAs?: 'code' | 'symbol'; numberOfDecimals?: number } = {}\n) => {\n  if (!currency)\n    return getNumberFormattedValue(value, locale, undefined, {\n      showGroupSeparators,\n      numberOfDecimals\n    });\n\n  const isCurrency = isValidCurrency(currency);\n  const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n  const formatter = new Intl.NumberFormat(locale, {\n    useGrouping: showGroupSeparators,\n    maximumFractionDigits: numberOfDecimals,\n    minimumFractionDigits: numberOfDecimals,\n    ...(isCurrency\n      ? {\n          style: 'currency',\n          currency,\n          currencyDisplay: showAs\n        }\n      : {})\n  });\n\n  let formatted = value;\n\n  if (value && !Number.isNaN(parseFloat(integer))) {\n    const endsWithDot = fractionPart === '';\n    const valueNumber = Number(endsWithDot ? `${value}1` : value);\n    formatted = formatter.formatToParts(valueNumber).reduce((result, { type, value: part }) => {\n      if (type === 'fraction' && endsWithDot) return result;\n      return result + part;\n    }, '');\n  } else if (currency) {\n    formatted = formatter\n      .formatToParts(value.startsWith('-') ? -1 : 1)\n      .reduce(\n        (result, { type, value: part }) =>\n          ['currency', 'minusSign'].includes(type) ? result + part : result,\n        ''\n      );\n  }\n  return formatted;\n};\n\nexport function getCurrencyMaximumFractionDigits(locale: string, currencyISOCode?: string): number {\n  return currencyISOCode\n    ? new Intl.NumberFormat(locale, {\n        style: 'currency',\n        currency: currencyISOCode\n      }).resolvedOptions().maximumFractionDigits\n    : NUMBER_MAX_DECIMAL_PLACES;\n}\n\ninterface CurrencyFormatOptions {\n  locale: string;\n  options?: Intl.NumberFormatOptions;\n}\n\nexport function formatCurrency(value: number | bigint, { locale, options }: CurrencyFormatOptions) {\n  const formatter = new Intl.NumberFormat(locale, options);\n\n  return formatter.format(value);\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { NUMBER_MAX_DECIMAL_PLACES } from '../Number/NumberInput.types';\nimport { getFormattedValue as getNumberFormattedValue } from '../Number/utils';\n\nexport const isValidCurrency = (currency: string) => {\n  try {\n    // eslint-disable-next-line no-new\n    new Intl.NumberFormat(undefined, { style: 'currency', currency });\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nexport const getFormattedValue = (\n  value: string,\n  locale: string,\n  currency?: string,\n  {\n    showGroupSeparators = true,\n    showAs = 'code',\n    numberOfDecimals\n  }: { showGroupSeparators?: boolean; showAs?: 'code' | 'symbol'; numberOfDecimals?: number } = {}\n) => {\n  if (!currency)\n    return getNumberFormattedValue(value, locale, undefined, {\n      useGrouping: showGroupSeparators,\n      maximumFractionDigits: numberOfDecimals\n    });\n\n  const isCurrency = isValidCurrency(currency);\n  const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n  const formatter = new Intl.NumberFormat(locale, {\n    useGrouping: showGroupSeparators,\n    maximumFractionDigits: numberOfDecimals,\n    minimumFractionDigits: numberOfDecimals,\n    ...(isCurrency\n      ? {\n          style: 'currency',\n          currency,\n          currencyDisplay: showAs\n        }\n      : {})\n  });\n\n  let formatted = value;\n\n  if (value && !Number.isNaN(parseFloat(integer))) {\n    const endsWithDot = fractionPart === '';\n    const valueNumber = Number(endsWithDot ? `${value}1` : value);\n    formatted = formatter.formatToParts(valueNumber).reduce((result, { type, value: part }) => {\n      if (type === 'fraction' && endsWithDot) return result;\n      return result + part;\n    }, '');\n  } else if (currency) {\n    formatted = formatter\n      .formatToParts(value.startsWith('-') ? -1 : 1)\n      .reduce(\n        (result, { type, value: part }) =>\n          ['currency', 'minusSign'].includes(type) ? result + part : result,\n        ''\n      );\n  }\n  return formatted;\n};\n\nexport function getCurrencyMaximumFractionDigits(locale: string, currencyISOCode?: string): number {\n  return currencyISOCode\n    ? new Intl.NumberFormat(locale, {\n        style: 'currency',\n        currency: currencyISOCode\n      }).resolvedOptions().maximumFractionDigits\n    : NUMBER_MAX_DECIMAL_PLACES;\n}\n\ninterface CurrencyFormatOptions {\n  locale: string;\n  options?: Intl.NumberFormatOptions;\n}\n\nexport function formatCurrency(value: number | bigint, { locale, options }: CurrencyFormatOptions) {\n  const formatter = new Intl.NumberFormat(locale, options);\n\n  return formatter.format(value);\n}\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAsClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAsClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAsC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -32,7 +32,7 @@ export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { sp
       transform: rotate(0);
     }
 
-    > ${StyledFlex} {
+    > ${StyledFlex} ${StyledButton} {
       min-height: ${hitAreaMouse};
 
       @media (pointer: 'coarse') {
@@ -41,10 +41,11 @@ export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { sp
     }
   `);
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
-export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
+export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
       border: none;
+      margin-block-start: calc(3 * ${spacing});
 
       ${StyledFieldGroupLegend} ${StyledButton} {
         font-weight: inherit;

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => css`\n    width: 100%;\n    margin-bottom: 0;\n    ${open &&\n    css`\n      margin-block-end: calc(1.5 * ${spacing});\n    `}\n    transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n    button ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    button[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    button[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    > ${StyledFlex} {\n      min-height: ${hitAreaMouse};\n\n      @media (pointer: 'coarse') {\n        min-height: ${hitAreaFinger};\n      }\n    }\n  `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => css`\n    width: 100%;\n    margin-bottom: 0;\n    ${open &&\n    css`\n      margin-block-end: calc(1.5 * ${spacing});\n    `}\n    transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n    button ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    button[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    button[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    > ${StyledFlex} ${StyledButton} {\n      min-height: ${hitAreaMouse};\n\n      @media (pointer: 'coarse') {\n        min-height: ${hitAreaFinger};\n      }\n    }\n  `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n      margin-block-start: calc(3 * ${spacing});\n\n      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAWD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js

@@ -6,10 +6,14 @@ import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import FieldGroup from './FieldGroup';
+import FieldGroup, { StyledFieldGroup } from './FieldGroup';
 registerIcon(plusIcon);
 const StyledFieldGroupList = styled.div(({ theme }) => css `
-      margin-top: ${theme.base.spacing};
+      margin-block-start: ${theme.base.spacing};
+
+      ${StyledFieldGroup} {
+        margin-block-start: 0;
+      }
     `);
 StyledFieldGroupList.defaultProps = defaultThemeProp;
 export const StyledListItem = styled(FieldGroup)(({ theme }) => css `

package/lib/components/FieldGroup/FieldGroupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,cAAc,CAAC;AAE3D,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;kBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE/B,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,KACN,aAAa,EACjB,OAAO,EACL,QAAQ;wBACN,CAAC,CAAC;4BACE;gCACE,EAAE,EAAE,QAAQ;gCACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;gCACjB,IAAI,EAAE,OAAO;gCACb,QAAQ,EAAE,IAAI;gCACd,OAAO,EAAE,QAAQ;oCACf,CAAC,CAAC,GAAG,EAAE;wCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACf,CAAC;oCACH,CAAC,CAAC,SAAS;6BACd;yBACF;wBACH,CAAC,CAAC,SAAS,YAGd,QAAQ,IArBJ,EAAE,CAsBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACD,KAAK,IAAI,CACR,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,OAAE,CAAC,CAAC,KAAK,CAAC,IACd,CACnB,IACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={\n                onDelete\n                  ? [\n                      {\n                        id: 'delete',\n                        text: t('delete'),\n                        icon: 'trash',\n                        iconOnly: true,\n                        onClick: onDelete\n                          ? () => {\n                              onDelete(id);\n                            }\n                          : undefined\n                      }\n                    ]\n                  : undefined\n              }\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd}>\n            <Icon name='plus' /> {t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps, StyledFieldGroup } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    css`\n      margin-block-start: ${theme.base.spacing};\n\n      ${StyledFieldGroup} {\n        margin-block-start: 0;\n      }\n    `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={\n                onDelete\n                  ? [\n                      {\n                        id: 'delete',\n                        text: t('delete'),\n                        icon: 'trash',\n                        iconOnly: true,\n                        onClick: onDelete\n                          ? () => {\n                              onDelete(id);\n                            }\n                          : undefined\n                      }\n                    ]\n                  : undefined\n              }\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd}>\n            <Icon name='plus' /> {t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}

package/lib/components/Form/Form.d.ts

@@ -1,21 +1,10 @@
-import { FC, ReactNode, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface FormProps extends BaseProps {
+import { FC } from 'react';
+import { ForwardProps, OmitStrict } from '../../types';
+import { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
+export interface FormProps extends OmitStrict<BaseFormProps, 'content'> {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
-    children: ReactNode;
-    /** Region for Form Actions. */
-    actions?: ReactNode;
-    /** The heading of the form. */
-    heading?: string;
-    /** A description of the form to be displayed above the controls. */
-    description?: string;
-    /** Region for Banners above the Form. */
-    banners?: ReactNode;
-    /** Ref forwarded to the wrapping element. */
-    ref?: Ref<HTMLFormElement>;
+    children: BaseFormProps['content'];
 }
-export declare const StyledForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Form: FC<FormProps & ForwardProps>;
 export default Form;
 //# sourceMappingURL=Form.d.ts.map

package/lib/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,6HAA6H;IAC7H,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,0GAAgB,CAAC;AACxC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CAkCtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC;IACrE,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CA0BtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Form/Form.js

@@ -1,16 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled from 'styled-components';
 import { useUID } from '../../hooks';
-import Flex from '../Flex';
-import Text from '../Text';
-import HTML from '../HTML';
-export const StyledForm = styled.form ``;
-export const StyledFormContent = styled.div ``;
-const Form = forwardRef((props, ref) => {
-    const { children, actions, heading, description, banners, ...restProps } = props;
-    const uid = useUID();
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, as: StyledForm, ref: ref, ...restProps, "aria-labelledby": heading ? `${uid}-heading` : undefined, "aria-describedby": description ? `${uid}-description` : undefined, children: [banners, (heading || description) && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [heading && (_jsx(Text, { id: `${uid}-heading`, variant: 'h3', children: heading })), description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description })] })), _jsx(Flex, { as: StyledFormContent, container: { direction: 'column', gap: 3 }, children: children }), actions && _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: actions })] }));
+import MultiStepForm from '../MultiStepForm';
+const Form = forwardRef(({ children, actions, heading, description, banners, ...restProps }, ref) => {
+    const stepId = useUID();
+    return (_jsx(MultiStepForm, { ...restProps, heading: heading, steps: [
+            {
+                id: stepId,
+                name: '',
+                actions,
+                content: children,
+                description,
+                banners
+            }
+        ], currentStepId: stepId, ref: ref }));
 });
 export default Form;
 //# sourceMappingURL=Form.js.map