@pega/cosmos-react-core 3.0.0-dev.10.1 → 3.0.0-dev.13.0

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/Currency/CurrencyDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE;QAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;QACxC;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CurrencyDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE;QAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;QACxC;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAsD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Currency/CurrencyDisplay.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import { formatCurrency, isCurrencyISOCodeValid } from './utils';
+import { formatCurrency, isValidCurrency } from './utils';
 const CurrencyDisplay = forwardRef(({ value, currencyISOCode, formattingOptions: { currency = 'symbol', negative = 'minus-sign', notation = 'standard', groupSeparators = true, fractionDigits } = {}, ...restProps }, ref) => {
     const { locale } = useConfiguration();
-    const options = isCurrencyISOCodeValid(currencyISOCode)
+    const options = currencyISOCode && isValidCurrency(currencyISOCode)
         ? {
             style: 'currency',
             currency: currencyISOCode,

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

@@ -1 +1 @@
-{"version":3,"file":"CurrencyDisplay.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAkCjE,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EACE,KAAK,EACL,eAAe,EACf,iBAAiB,EAAE,EACjB,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,YAAY,EACvB,QAAQ,GAAG,UAAU,EACrB,eAAe,GAAG,IAAI,EACtB,cAAc,EACf,GAAG,EAAE,EACN,GAAG,SAAS,EAC0B,EACxC,GAAgC,EAChC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,OAAO,GAAG,sBAAsB,CAAC,eAAe,CAAC;QACrD,CAAC,CAAE;YACC,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,eAAe;YACzB,eAAe,EAAE,QAAQ;YACzB,WAAW,EAAE,eAAe;YAC5B,QAAQ;YACR,YAAY,EAAE,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;YACpE,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACT;QAChC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,SAAS,GAAG;QAChB,GAAG,OAAO;QACV,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,UAAU;QACxB,eAAe,EAAE,MAAM;KACxB,CAAC;IAEF,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,8BACE,8BAAkB,MAAM,YAAE,cAAc,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAQ,EAC5E,KAAC,kBAAkB,cAChB,cAAc,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,GACnC,IACpB,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { formatCurrency, isCurrencyISOCodeValid } from './utils';\n\nexport interface CurrencyDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value. */\n  value?: number | bigint;\n  /** Three letter currency shorthand ISO code. If not provided or invalid, component renders only the number. */\n  currencyISOCode?: string;\n  /** Options to define formatting. */\n  formattingOptions?: {\n    currency?: 'symbol' | 'code' | 'name';\n    /**\n     * Determines negative value notation: using minus sign or parentheses.\n     * @default 'minus-sign'\n     */\n    negative?: 'minus-sign' | 'parentheses';\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Fixed number of fraction digits. Maximum is 20, default is currency dependant.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /** Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst CurrencyDisplay: FunctionComponent<CurrencyDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      currencyISOCode,\n      formattingOptions: {\n        currency = 'symbol',\n        negative = 'minus-sign',\n        notation = 'standard',\n        groupSeparators = true,\n        fractionDigits\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<CurrencyDisplayProps>,\n    ref: CurrencyDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    const options = isCurrencyISOCodeValid(currencyISOCode)\n      ? ({\n          style: 'currency',\n          currency: currencyISOCode,\n          currencyDisplay: currency,\n          useGrouping: groupSeparators,\n          notation,\n          currencySign: negative === 'parentheses' ? 'accounting' : 'standard',\n          minimumFractionDigits: fractionDigits,\n          maximumFractionDigits: fractionDigits\n        } as Intl.NumberFormatOptions)\n      : undefined;\n\n    const srOptions = {\n      ...options,\n      useGrouping: false,\n      currencySign: 'standard',\n      currencyDisplay: 'name'\n    };\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          <>\n            <span aria-hidden='true'>{formatCurrency(value, { locale, options })}</span>\n            <VisuallyHiddenText>\n              {formatCurrency(value, { locale, options: srOptions })}\n            </VisuallyHiddenText>\n          </>\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default CurrencyDisplay;\n"]}
+{"version":3,"file":"CurrencyDisplay.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkC1D,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EACE,KAAK,EACL,eAAe,EACf,iBAAiB,EAAE,EACjB,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,YAAY,EACvB,QAAQ,GAAG,UAAU,EACrB,eAAe,GAAG,IAAI,EACtB,cAAc,EACf,GAAG,EAAE,EACN,GAAG,SAAS,EAC0B,EACxC,GAAgC,EAChC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,OAAO,GACX,eAAe,IAAI,eAAe,CAAC,eAAe,CAAC;QACjD,CAAC,CAAE;YACC,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,eAAe;YACzB,eAAe,EAAE,QAAQ;YACzB,WAAW,EAAE,eAAe;YAC5B,QAAQ;YACR,YAAY,EAAE,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;YACpE,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACT;QAChC,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,SAAS,GAAG;QAChB,GAAG,OAAO;QACV,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,UAAU;QACxB,eAAe,EAAE,MAAM;KACxB,CAAC;IAEF,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,8BACE,8BAAkB,MAAM,YAAE,cAAc,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAQ,EAC5E,KAAC,kBAAkB,cAChB,cAAc,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,GACnC,IACpB,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { formatCurrency, isValidCurrency } from './utils';\n\nexport interface CurrencyDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value. */\n  value?: number | bigint;\n  /** Three letter currency shorthand ISO code. If not provided or invalid, component renders only the number. */\n  currencyISOCode?: string;\n  /** Options to define formatting. */\n  formattingOptions?: {\n    currency?: 'symbol' | 'code' | 'name';\n    /**\n     * Determines negative value notation: using minus sign or parentheses.\n     * @default 'minus-sign'\n     */\n    negative?: 'minus-sign' | 'parentheses';\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Fixed number of fraction digits. Maximum is 20, default is currency dependant.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /** Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst CurrencyDisplay: FunctionComponent<CurrencyDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      currencyISOCode,\n      formattingOptions: {\n        currency = 'symbol',\n        negative = 'minus-sign',\n        notation = 'standard',\n        groupSeparators = true,\n        fractionDigits\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<CurrencyDisplayProps>,\n    ref: CurrencyDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    const options =\n      currencyISOCode && isValidCurrency(currencyISOCode)\n        ? ({\n            style: 'currency',\n            currency: currencyISOCode,\n            currencyDisplay: currency,\n            useGrouping: groupSeparators,\n            notation,\n            currencySign: negative === 'parentheses' ? 'accounting' : 'standard',\n            minimumFractionDigits: fractionDigits,\n            maximumFractionDigits: fractionDigits\n          } as Intl.NumberFormatOptions)\n        : undefined;\n\n    const srOptions = {\n      ...options,\n      useGrouping: false,\n      currencySign: 'standard',\n      currencyDisplay: 'name'\n    };\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          <>\n            <span aria-hidden='true'>{formatCurrency(value, { locale, options })}</span>\n            <VisuallyHiddenText>\n              {formatCurrency(value, { locale, options: srOptions })}\n            </VisuallyHiddenText>\n          </>\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default CurrencyDisplay;\n"]}

package/lib/components/Currency/CurrencyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAG7F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAOvD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA+EvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CurrencyInput.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgB3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8HvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Currency/CurrencyInput.js

@@ -1,39 +1,75 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from 'react';
 import FormField from '../FormField';
-import { useConfiguration, useUID } from '../../hooks';
-import { NumberInput } from '../Number';
-import { getCurrencyMaximumFractionDigits, getCurrencySymbol, isCurrencyISOCodeValid } from './utils';
+import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
+import { getCleanedValue, getDecimalSign, getDecrementedValue, getIncrementedValue } from '../Number/utils';
+import Input from '../Input';
+import { getCurrencyMaximumFractionDigits, getFormattedValue, isValidCurrency } from './utils';
 const CurrencyInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onBlur, onFocus, showDecimal = true, currencyISOCode, alwaysShowISOCode = false, ...restProps } = props;
+    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onBlur, onFocus, currencyISOCode, showDecimal = true, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, alwaysShowISOCode = false, ...restProps } = props;
     const { locale } = useConfiguration();
-    const validCurrencyISOCode = useMemo(() => (isCurrencyISOCodeValid(currencyISOCode) ? currencyISOCode : undefined), [currencyISOCode]);
-    const { symbol, symbolPlacement } = useMemo(() => getCurrencySymbol(locale, alwaysShowISOCode, validCurrencyISOCode), [locale, alwaysShowISOCode, validCurrencyISOCode]);
+    const t = useI18n();
+    const inputRef = useConsolidatedRef(ref);
+    const validCurrencyISOCode = useMemo(() => (currencyISOCode && isValidCurrency(currencyISOCode) ? currencyISOCode : undefined), [currencyISOCode]);
     const maximumFractionDigits = useMemo(() => getCurrencyMaximumFractionDigits(locale, validCurrencyISOCode), [locale, validCurrencyISOCode]);
-    const onInputFocusEvent = useCallback((callbackFn) => {
-        if (!callbackFn)
+    const numberOfDecimals = showDecimal ? maximumFractionDigits : 0;
+    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);
+    const formatValue = useCallback(number => {
+        return getFormattedValue(number, locale, validCurrencyISOCode, {
+            showGroupSeparators,
+            showAs: alwaysShowISOCode ? 'code' : 'symbol',
+            numberOfDecimals
+        });
+    }, [showDecimal, numberOfDecimals, showGroupSeparators, locale, validCurrencyISOCode]);
+    const onInputChange = (e) => {
+        const inputValue = e.target.value;
+        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);
+        if (cleanedInputValue === value)
             return;
-        return (inputValue) => {
-            let formattedValue = inputValue;
-            if (validCurrencyISOCode && !Number.isNaN(parseFloat(value))) {
-                const [integer, fraction = ''] = inputValue.split('.');
-                formattedValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;
-            }
-            callbackFn(formattedValue);
-        };
-    }, [maximumFractionDigits]);
-    const Comp = (_jsx(NumberInput, { numberOfDecimals: maximumFractionDigits, onFocus: onInputFocusEvent(onFocus), onBlur: onInputFocusEvent(onBlur), unit: symbol, unitPlacement: symbolPlacement, ...{
-            ref,
-            id,
-            value,
-            showDecimal,
-            readOnly,
-            required,
-            disabled,
-            status,
-            ...restProps
-        } }));
+        onChange(cleanedInputValue);
+    };
+    const onKeyDown = (e) => {
+        if (readOnly)
+            return;
+        const input = e.currentTarget;
+        switch (e.key) {
+            case 'ArrowUp':
+                e.preventDefault();
+                onChange(getIncrementedValue(value, min, max, step));
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                onChange(getDecrementedValue(value, min, max, step));
+                break;
+            case decimalSign:
+                if (input.value.includes(decimalSign)) {
+                    if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {
+                        input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);
+                    }
+                    e.preventDefault();
+                }
+                break;
+            case '-':
+                if (value.startsWith('-'))
+                    e.preventDefault();
+                break;
+            default:
+        }
+    };
+    const onInputFocusEvent = (e) => {
+        let parsableValue = value;
+        if (validCurrencyISOCode && !Number.isNaN(parseFloat(value))) {
+            const [integer, fraction = ''] = value.split('.');
+            parsableValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;
+        }
+        if (e.type === 'focus')
+            onFocus?.(parsableValue);
+        else
+            onBlur?.(parsableValue);
+    };
+    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
+    const Comp = (_jsx(Input, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${label}. ${validCurrencyISOCode ? t('measured_in', [validCurrencyISOCode]) : ''}`, maxLength: 16 }));
     return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
 });
 export default CurrencyInput;

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

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useCallback, useMemo } from 'react';\n\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport { useConfiguration, useUID } from '../../hooks';\nimport { NumberInput } from '../Number';\n\nimport CurrencyInputProps from './CurrencyInput.types';\nimport {\n  getCurrencyMaximumFractionDigits,\n  getCurrencySymbol,\n  isCurrencyISOCodeValid\n} from './utils';\n\nconst CurrencyInput: FunctionComponent<CurrencyInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CurrencyInputProps>, ref: CurrencyInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onBlur,\n      onFocus,\n      showDecimal = true,\n      currencyISOCode,\n      alwaysShowISOCode = false,\n      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const validCurrencyISOCode = useMemo(\n      () => (isCurrencyISOCodeValid(currencyISOCode) ? currencyISOCode : undefined),\n      [currencyISOCode]\n    );\n    const { symbol, symbolPlacement } = useMemo(\n      () => getCurrencySymbol(locale, alwaysShowISOCode, validCurrencyISOCode),\n      [locale, alwaysShowISOCode, validCurrencyISOCode]\n    );\n    const maximumFractionDigits = useMemo(\n      () => getCurrencyMaximumFractionDigits(locale, validCurrencyISOCode),\n      [locale, validCurrencyISOCode]\n    );\n\n    const onInputFocusEvent = useCallback(\n      (callbackFn: CurrencyInputProps['onFocus' | 'onBlur']) => {\n        if (!callbackFn) return;\n        return (inputValue: string) => {\n          let formattedValue = inputValue;\n          if (validCurrencyISOCode && !Number.isNaN(parseFloat(value))) {\n            const [integer, fraction = ''] = inputValue.split('.');\n            formattedValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;\n          }\n          callbackFn(formattedValue);\n        };\n      },\n      [maximumFractionDigits]\n    );\n\n    const Comp = (\n      <NumberInput\n        numberOfDecimals={maximumFractionDigits}\n        onFocus={onInputFocusEvent(onFocus)}\n        onBlur={onInputFocusEvent(onBlur)}\n        unit={symbol}\n        unitPlacement={symbolPlacement}\n        {...{\n          ref,\n          id,\n          value,\n          showDecimal,\n          readOnly,\n          required,\n          disabled,\n          status,\n          ...restProps\n        }}\n      />\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default CurrencyInput;\n"]}
+{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  KeyboardEvent,\n  ChangeEvent,\n  FocusEvent\n} from 'react';\n\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getIncrementedValue\n} from '../Number/utils';\nimport Input from '../Input';\n\nimport CurrencyInputProps from './CurrencyInput.types';\nimport { getCurrencyMaximumFractionDigits, getFormattedValue, isValidCurrency } from './utils';\n\nconst CurrencyInput: FunctionComponent<CurrencyInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CurrencyInputProps>, ref: CurrencyInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onBlur,\n      onFocus,\n      currencyISOCode,\n      showDecimal = true,\n      showGroupSeparators = true,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      alwaysShowISOCode = false,\n      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const t = useI18n();\n    const inputRef = useConsolidatedRef(ref);\n\n    const validCurrencyISOCode = useMemo(\n      () => (currencyISOCode && isValidCurrency(currencyISOCode) ? currencyISOCode : undefined),\n      [currencyISOCode]\n    );\n\n    const maximumFractionDigits = useMemo(\n      () => getCurrencyMaximumFractionDigits(locale, validCurrencyISOCode),\n      [locale, validCurrencyISOCode]\n    );\n\n    const numberOfDecimals = showDecimal ? maximumFractionDigits : 0;\n\n    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, validCurrencyISOCode, {\n          showGroupSeparators,\n          showAs: alwaysShowISOCode ? 'code' : 'symbol',\n          numberOfDecimals\n        });\n      },\n      [showDecimal, numberOfDecimals, showGroupSeparators, locale, validCurrencyISOCode]\n    );\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);\n      if (cleanedInputValue === value) return;\n      onChange(cleanedInputValue);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const input = e.currentTarget;\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          onChange(getIncrementedValue(value, min, max, step));\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          onChange(getDecrementedValue(value, min, max, step));\n          break;\n        case decimalSign:\n          if (input.value.includes(decimalSign)) {\n            if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n              input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n            }\n            e.preventDefault();\n          }\n          break;\n        case '-':\n          if (value.startsWith('-')) e.preventDefault();\n          break;\n        default:\n      }\n    };\n\n    const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n      let parsableValue = value;\n      if (validCurrencyISOCode && !Number.isNaN(parseFloat(value))) {\n        const [integer, fraction = ''] = value.split('.');\n        parsableValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;\n      }\n\n      if (e.type === 'focus') onFocus?.(parsableValue);\n      else onBlur?.(parsableValue);\n    };\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const Comp = (\n      <Input\n        {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        inputMode='numeric'\n        ref={inputRef}\n        value={formattedValue}\n        onKeyDown={onKeyDown}\n        onFocus={onInputFocusEvent}\n        onBlur={onInputFocusEvent}\n        aria-label={`${label}. ${\n          validCurrencyISOCode ? t('measured_in', [validCurrencyISOCode]) : ''\n        }`}\n        maxLength={16}\n      />\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default CurrencyInput;\n"]}

package/lib/components/Currency/utils.d.ts

@@ -1,20 +1,10 @@
-export declare type CurrencySymbol = {
-    symbol: string;
-    symbolPlacement: 'before' | 'after';
-};
-export declare function getCurrencySymbol(locale: string, alwaysShowISOCode: boolean, currencyISOCode?: string): CurrencySymbol;
+export declare const isValidCurrency: (currency: string) => boolean;
+export declare const getFormattedValue: (value: string, locale: string, currency?: string | undefined, { showGroupSeparators, showAs, numberOfDecimals }?: {
+    showGroupSeparators?: boolean | undefined;
+    showAs?: "symbol" | "code" | undefined;
+    numberOfDecimals?: number | undefined;
+}) => string;
 export declare function getCurrencyMaximumFractionDigits(locale: string, currencyISOCode?: string): number;
-export declare function isCurrencyISOCodeValid(currencyISOCode?: string): boolean;
-export declare function addTrailingZeros(valueToFormat: string, maximumFractionDigits: number, currencyISOCode?: string): string;
-declare type DisplayValueParams = {
-    value: string;
-    locale: string;
-    alwaysShowISOCode: boolean;
-    showDecimal: boolean;
-    showGroupSeparators: boolean;
-    currencyISOCode?: string;
-};
-export declare function getDisplayValue({ value, locale, alwaysShowISOCode, showDecimal, showGroupSeparators, currencyISOCode }: DisplayValueParams): string;
 interface CurrencyFormatOptions {
     locale: string;
     options?: Intl.NumberFormatOptions;

package/lib/components/Currency/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"AAQA,oBAAY,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,OAAO,EAC1B,eAAe,CAAC,EAAE,MAAM,GACvB,cAAc,CAmBhB;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAOjG;AAED,wBAAgB,sBAAsB,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAExE;AAED,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,MAAM,EACrB,qBAAqB,EAAE,MAAM,EAC7B,eAAe,CAAC,EAAE,MAAM,UAQzB;AAED,aAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,mBAAmB,EACnB,eAAe,EAChB,EAAE,kBAAkB,UA+BpB;AAED,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,UAIhG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,aAAc,MAAM,YAQ/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,UACrB,MAAM,UACL,MAAM;;;;YAiDf,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAOjG;AAED,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,UAIhG"}

package/lib/components/Currency/utils.js

@@ -1,24 +1,52 @@
 import { NUMBER_MAX_DECIMAL_PLACES } from '../Number/NumberInput.types';
-import { getFormattedValue } from '../Number/utils';
-// Currency & funds code list valid for Intl.NumberFormat(): https://www.currency-iso.org/en/home/tables/table-a1.html
-import currencyCodeList from './currencyCodes';
-export function getCurrencySymbol(locale, alwaysShowISOCode, currencyISOCode) {
-    const options = currencyISOCode
-        ? {
-            style: 'currency',
-            currency: currencyISOCode
-        }
-        : undefined;
-    return new Intl.NumberFormat(locale, options).formatToParts(1).reduce((currencyObj, part, index) => {
-        if (part.type === 'currency') {
-            currencyObj.symbol = alwaysShowISOCode ? currencyISOCode || '' : part.value;
-            if (index === 0) {
-                currencyObj.symbolPlacement = 'before';
+import { getFormattedValue as getNumberFormattedValue } from '../Number/utils';
+export const isValidCurrency = (currency) => {
+    try {
+        // eslint-disable-next-line no-new
+        new Intl.NumberFormat(undefined, { style: 'currency', currency });
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+export const getFormattedValue = (value, locale, currency, { showGroupSeparators = true, showAs = 'code', numberOfDecimals } = {}) => {
+    if (!currency)
+        return getNumberFormattedValue(value, locale, undefined, {
+            useGrouping: showGroupSeparators,
+            maximumFractionDigits: numberOfDecimals
+        });
+    const isCurrency = isValidCurrency(currency);
+    const [integer, fractionPart] = value.split('.', 2);
+    const formatter = new Intl.NumberFormat(locale, {
+        useGrouping: showGroupSeparators,
+        maximumFractionDigits: numberOfDecimals,
+        minimumFractionDigits: numberOfDecimals,
+        ...(isCurrency
+            ? {
+                style: 'currency',
+                currency,
+                currencyDisplay: showAs
             }
-        }
-        return currencyObj;
-    }, { symbol: '', symbolPlacement: 'after' });
-}
+            : {})
+    });
+    let formatted = value;
+    if (value && !Number.isNaN(parseFloat(integer))) {
+        const endsWithDot = fractionPart === '';
+        const valueNumber = Number(endsWithDot ? `${value}1` : value);
+        formatted = formatter.formatToParts(valueNumber).reduce((result, { type, value: part }) => {
+            if (type === 'fraction' && endsWithDot)
+                return result;
+            return result + part;
+        }, '');
+    }
+    else if (currency) {
+        formatted = formatter
+            .formatToParts(value.startsWith('-') ? -1 : 1)
+            .reduce((result, { type, value: part }) => ['currency', 'minusSign'].includes(type) ? result + part : result, '');
+    }
+    return formatted;
+};
 export function getCurrencyMaximumFractionDigits(locale, currencyISOCode) {
     return currencyISOCode
         ? new Intl.NumberFormat(locale, {
@@ -27,36 +55,6 @@ export function getCurrencyMaximumFractionDigits(locale, currencyISOCode) {
         }).resolvedOptions().maximumFractionDigits
         : NUMBER_MAX_DECIMAL_PLACES;
 }
-export function isCurrencyISOCodeValid(currencyISOCode) {
-    return currencyISOCode ? currencyCodeList.has(currencyISOCode) : false;
-}
-export function addTrailingZeros(valueToFormat, maximumFractionDigits, currencyISOCode) {
-    let formattedValue = valueToFormat;
-    if (currencyISOCode && !Number.isNaN(parseFloat(valueToFormat))) {
-        const [integer, fraction = ''] = valueToFormat.split('.');
-        formattedValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;
-    }
-    return formattedValue;
-}
-export function getDisplayValue({ value, locale, alwaysShowISOCode, showDecimal, showGroupSeparators, currencyISOCode }) {
-    const validCurrencyISOCode = isCurrencyISOCodeValid(currencyISOCode)
-        ? currencyISOCode
-        : undefined;
-    const { symbol, symbolPlacement } = getCurrencySymbol(locale, alwaysShowISOCode, validCurrencyISOCode);
-    const maximumFractionDigits = getCurrencyMaximumFractionDigits(locale, validCurrencyISOCode);
-    let sign = '';
-    let formattedValue = getFormattedValue(!showDecimal
-        ? value.split('.')[0]
-        : addTrailingZeros(value, maximumFractionDigits, validCurrencyISOCode), locale, showGroupSeparators, maximumFractionDigits);
-    if (formattedValue.startsWith('-')) {
-        sign = '-';
-        formattedValue = formattedValue.substring(1);
-    }
-    let symbolBefore = symbolPlacement === 'before' ? symbol : '';
-    symbolBefore += symbolBefore === currencyISOCode ? ' ' : '';
-    const symbolAfter = symbolPlacement === 'after' && symbol ? ` ${symbol}` : '';
-    return `${sign}${symbolBefore}${formattedValue}${symbolAfter}`;
-}
 export function formatCurrency(value, { locale, options }) {
     const formatter = new Intl.NumberFormat(locale, options);
     return formatter.format(value);

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 } from '../Number/utils';\n\n// Currency & funds code list valid for Intl.NumberFormat(): https://www.currency-iso.org/en/home/tables/table-a1.html\nimport currencyCodeList from './currencyCodes';\n\ntype CurrencyPart = { type: string; value: string };\n\nexport type CurrencySymbol = {\n  symbol: string;\n  symbolPlacement: 'before' | 'after';\n};\n\nexport function getCurrencySymbol(\n  locale: string,\n  alwaysShowISOCode: boolean,\n  currencyISOCode?: string\n): CurrencySymbol {\n  const options = currencyISOCode\n    ? {\n        style: 'currency',\n        currency: currencyISOCode\n      }\n    : undefined;\n  return new Intl.NumberFormat(locale, options).formatToParts(1).reduce(\n    (currencyObj: CurrencySymbol, part: CurrencyPart, index: number) => {\n      if (part.type === 'currency') {\n        currencyObj.symbol = alwaysShowISOCode ? currencyISOCode || '' : part.value;\n        if (index === 0) {\n          currencyObj.symbolPlacement = 'before';\n        }\n      }\n      return currencyObj;\n    },\n    { symbol: '', symbolPlacement: 'after' }\n  );\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\nexport function isCurrencyISOCodeValid(currencyISOCode?: string): boolean {\n  return currencyISOCode ? currencyCodeList.has(currencyISOCode) : false;\n}\n\nexport function addTrailingZeros(\n  valueToFormat: string,\n  maximumFractionDigits: number,\n  currencyISOCode?: string\n) {\n  let formattedValue = valueToFormat;\n  if (currencyISOCode && !Number.isNaN(parseFloat(valueToFormat))) {\n    const [integer, fraction = ''] = valueToFormat.split('.');\n    formattedValue = `${integer}.${fraction.padEnd(maximumFractionDigits, '0')}`;\n  }\n  return formattedValue;\n}\n\ntype DisplayValueParams = {\n  value: string;\n  locale: string;\n  alwaysShowISOCode: boolean;\n  showDecimal: boolean;\n  showGroupSeparators: boolean;\n  currencyISOCode?: string;\n};\n\nexport function getDisplayValue({\n  value,\n  locale,\n  alwaysShowISOCode,\n  showDecimal,\n  showGroupSeparators,\n  currencyISOCode\n}: DisplayValueParams) {\n  const validCurrencyISOCode = isCurrencyISOCodeValid(currencyISOCode)\n    ? currencyISOCode\n    : undefined;\n  const { symbol, symbolPlacement } = getCurrencySymbol(\n    locale,\n    alwaysShowISOCode,\n    validCurrencyISOCode\n  );\n  const maximumFractionDigits = getCurrencyMaximumFractionDigits(locale, validCurrencyISOCode);\n\n  let sign = '';\n  let formattedValue = getFormattedValue(\n    !showDecimal\n      ? value.split('.')[0]\n      : addTrailingZeros(value, maximumFractionDigits, validCurrencyISOCode),\n    locale,\n    showGroupSeparators,\n    maximumFractionDigits\n  );\n  if (formattedValue.startsWith('-')) {\n    sign = '-';\n    formattedValue = formattedValue.substring(1);\n  }\n\n  let symbolBefore = symbolPlacement === 'before' ? symbol : '';\n  symbolBefore += symbolBefore === currencyISOCode ? ' ' : '';\n\n  const symbolAfter = symbolPlacement === 'after' && symbol ? ` ${symbol}` : '';\n\n  return `${sign}${symbolBefore}${formattedValue}${symbolAfter}`;\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 `