@pega/cosmos-react-core 10.0.0-build.4.2 → 10.0.0-build.4.21

package/lib/components/Dialog/TouchDialog.styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { StyledButton } from '../Button';
+import Drawer from '../Drawer';
+import { ExpandCollapseButton } from '../ExpandCollapse';
+import { StyledIcon } from '../Icon';
+import { StyledChildrenWrap } from './Dialog.styles';
+export const StyledExpandCollapse = styled(ExpandCollapseButton) `
+  position: absolute;
+  inset-block-start: 0;
+  width: 100%;
+
+  &[aria-expanded='false'] ${StyledIcon} {
+    transform: rotate(-90deg);
+  }
+`;
+StyledExpandCollapse.defaultProps = defaultThemeProp;
+export const StyledTouchDialog = styled(Drawer)(({ theme: { base, components } }) => css `
+    display: flex;
+    flex-direction: column;
+    background: ${components.popover.background};
+    inset-block-end: calc(${base.spacing} * 0.5);
+    inset-inline: calc(${base.spacing} * 0.5);
+    max-height: 90dvh;
+    border-radius: ${components.card['border-radius']};
+    width: auto;
+    transition-property: transform, box-shadow, opacity, height;
+
+    @media (height < 31.25rem) {
+      overflow-y: auto;
+      display: block;
+    }
+
+    &:has(${StyledExpandCollapse}) {
+      padding-block-start: ${base['hit-area'].compact};
+    }
+  `);
+StyledTouchDialog.defaultProps = defaultThemeProp;
+export const StyledTouchDialogHeader = styled.div(({ theme: { base } }) => css `
+    padding-inline: ${base.spacing};
+
+    ${StyledButton} {
+      margin-inline-start: auto;
+    }
+  `);
+StyledTouchDialogHeader.defaultProps = defaultThemeProp;
+export const StyledTouchDialogContent = styled.div(({ theme: { base } }) => css `
+    min-height: 0;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    padding-block-start: calc(${base.spacing} * 0.5);
+
+    ${StyledChildrenWrap} {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding-inline: ${base.spacing};
+    }
+  `);
+StyledTouchDialogContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=TouchDialog.styles.js.map

package/lib/components/Dialog/TouchDialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAA;;;;;6BAKnC,UAAU;;;CAGtC,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;kBAGxB,UAAU,CAAC,OAAO,CAAC,UAAU;4BACnB,IAAI,CAAC,OAAO;yBACf,IAAI,CAAC,OAAO;;qBAEhB,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;YASzC,oBAAoB;6BACH,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;GAElD,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;sBACR,IAAI,CAAC,OAAO;;MAE5B,YAAY;;;GAGf,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;gCAKE,IAAI,CAAC,OAAO;;MAEtC,kBAAkB;;;;wBAIA,IAAI,CAAC,OAAO;;GAEjC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport Drawer from '../Drawer';\nimport { ExpandCollapseButton } from '../ExpandCollapse';\nimport { StyledIcon } from '../Icon';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\n\nexport const StyledExpandCollapse = styled(ExpandCollapseButton)`\n  position: absolute;\n  inset-block-start: 0;\n  width: 100%;\n\n  &[aria-expanded='false'] ${StyledIcon} {\n    transform: rotate(-90deg);\n  }\n`;\n\nStyledExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialog = styled(Drawer)(\n  ({ theme: { base, components } }) => css`\n    display: flex;\n    flex-direction: column;\n    background: ${components.popover.background};\n    inset-block-end: calc(${base.spacing} * 0.5);\n    inset-inline: calc(${base.spacing} * 0.5);\n    max-height: 90dvh;\n    border-radius: ${components.card['border-radius']};\n    width: auto;\n    transition-property: transform, box-shadow, opacity, height;\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n      display: block;\n    }\n\n    &:has(${StyledExpandCollapse}) {\n      padding-block-start: ${base['hit-area'].compact};\n    }\n  `\n);\n\nStyledTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogHeader = styled.div(\n  ({ theme: { base } }) => css`\n    padding-inline: ${base.spacing};\n\n    ${StyledButton} {\n      margin-inline-start: auto;\n    }\n  `\n);\n\nStyledTouchDialogHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogContent = styled.div(\n  ({ theme: { base } }) => css`\n    min-height: 0;\n    overflow: auto;\n    height: 100%;\n    position: relative;\n    padding-block-start: calc(${base.spacing} * 0.5);\n\n    ${StyledChildrenWrap} {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      padding-inline: ${base.spacing};\n    }\n  `\n);\n\nStyledTouchDialogContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Dialog/TouchDialog.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getTouchDialogTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["dismiss"]>;
+//# sourceMappingURL=TouchDialog.test-ids.d.ts.map

package/lib/components/Dialog/TouchDialog.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4GAAsD,CAAC"}

package/lib/components/Dialog/TouchDialog.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getTouchDialogTestIds = createTestIds('touch-dialog', ['dismiss']);
+//# sourceMappingURL=TouchDialog.test-ids.js.map

package/lib/components/Dialog/TouchDialog.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.test-ids.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getTouchDialogTestIds = createTestIds('touch-dialog', ['dismiss'] as const);\n"]}

package/lib/components/Dialog/TouchDialog.types.d.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'react';
+import type { BaseProps, TestIdProp } from '../../types';
+import type { DrawerProps } from '../Drawer';
+import type { ProgressProps } from '../Progress';
+export interface TouchDialogProps extends BaseProps, TestIdProp {
+    /**
+     * Whether the TouchDialog should be open or closed.
+     * The component should not be unmounted before onAfterClose is called,
+     * otherwise the closing animation will be interrupted.
+     */
+    open: DrawerProps['open'];
+    /**
+     * Callback fired when the TouchDialog is dismissed with user intent.
+     * The parent component should toggle the `open` prop.
+     */
+    onDismiss: () => void;
+    /** Heading text displayed at the top of the drawer. */
+    heading?: string;
+    /** Content of the TouchDialog. */
+    children?: DrawerProps['children'];
+    /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */
+    progress?: boolean | ProgressProps['message'];
+    /**
+     * The initial height of the TouchDialog panel.
+     * - `'auto'` — height is driven by content (capped at 90% of the viewport).
+     * - `'half'` — half the viewport height.
+     * - `'full'` — opens to the maximum height (90% of the viewport).
+     * @default 'half'
+     */
+    size?: 'auto' | 'half' | 'full';
+    /** Callback fired before the TouchDialog starts opening. */
+    onBeforeOpen?: DrawerProps['onBeforeOpen'];
+    /** Callback fired after the TouchDialog finishes opening. */
+    onAfterOpen?: DrawerProps['onAfterOpen'];
+    /** Callback fired before the TouchDialog starts closing. */
+    onBeforeClose?: DrawerProps['onBeforeClose'];
+    /** Callback fired after the TouchDialog finishes closing. */
+    onAfterClose?: DrawerProps['onAfterClose'];
+    /** Ref for the dialog panel element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=TouchDialog.types.d.ts.map

package/lib/components/Dialog/TouchDialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,UAAU;IAC7D;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChC,4DAA4D;IAC5D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Dialog/TouchDialog.types.js

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

package/lib/components/Dialog/TouchDialog.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, TestIdProp } from '../../types';\nimport type { DrawerProps } from '../Drawer';\nimport type { ProgressProps } from '../Progress';\n\nexport interface TouchDialogProps extends BaseProps, TestIdProp {\n  /**\n   * Whether the TouchDialog should be open or closed.\n   * The component should not be unmounted before onAfterClose is called,\n   * otherwise the closing animation will be interrupted.\n   */\n  open: DrawerProps['open'];\n  /**\n   * Callback fired when the TouchDialog is dismissed with user intent.\n   * The parent component should toggle the `open` prop.\n   */\n  onDismiss: () => void;\n  /** Heading text displayed at the top of the drawer. */\n  heading?: string;\n  /** Content of the TouchDialog. */\n  children?: DrawerProps['children'];\n  /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n  /**\n   * The initial height of the TouchDialog panel.\n   * - `'auto'` — height is driven by content (capped at 90% of the viewport).\n   * - `'half'` — half the viewport height.\n   * - `'full'` — opens to the maximum height (90% of the viewport).\n   * @default 'half'\n   */\n  size?: 'auto' | 'half' | 'full';\n  /** Callback fired before the TouchDialog starts opening. */\n  onBeforeOpen?: DrawerProps['onBeforeOpen'];\n  /** Callback fired after the TouchDialog finishes opening. */\n  onAfterOpen?: DrawerProps['onAfterOpen'];\n  /** Callback fired before the TouchDialog starts closing. */\n  onBeforeClose?: DrawerProps['onBeforeClose'];\n  /** Callback fired after the TouchDialog finishes closing. */\n  onAfterClose?: DrawerProps['onAfterClose'];\n  /** Ref for the dialog panel element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Dialog/TouchInfoDialog.d.ts

@@ -0,0 +1,4 @@
+import type { InfoDialogProps } from './Dialog.types';
+declare const TouchInfoDialog: import("react").ForwardRefExoticComponent<Omit<Pick<InfoDialogProps, "hidden" | "color" | "content" | "style" | "progress" | "translate" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "heading" | "placement" | "strategy" | "portal" | "onDismiss" | "focusTrap">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TouchInfoDialog;
+//# sourceMappingURL=TouchInfoDialog.d.ts.map

package/lib/components/Dialog/TouchInfoDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchInfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchInfoDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,QAAA,MAAM,eAAe,80JAuBnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/Dialog/TouchInfoDialog.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { TouchDialog } from './TouchDialog';
+const TouchInfoDialog = forwardRef(function TouchInfoDialog({ heading: headingProp, children, onDismiss, ...restProps }, ref) {
+    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;
+    const [open, setOpen] = useState(true);
+    return (_jsx(TouchDialog, { ...restProps, open: open, onDismiss: () => {
+            setOpen(false);
+        }, ref: ref, heading: headingText, onAfterClose: () => {
+            onDismiss();
+        }, children: children }));
+});
+export default TouchInfoDialog;
+//# sourceMappingURL=TouchInfoDialog.js.map

package/lib/components/Dialog/TouchInfoDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchInfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchInfoDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACzF,MAAM,WAAW,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC;IACzF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,GAAG,EAAE;YACjB,SAAS,EAAE,CAAC;QACd,CAAC,YAEA,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useState, type PropsWithoutRef } from 'react';\n\nimport type { RefElement, OmitStrict } from '../../types';\n\nimport { TouchDialog } from './TouchDialog';\nimport type { InfoDialogProps } from './Dialog.types';\n\nconst TouchInfoDialog = forwardRef<\n  RefElement<InfoDialogProps>,\n  PropsWithoutRef<OmitStrict<InfoDialogProps, 'target'>>\n>(function TouchInfoDialog({ heading: headingProp, children, onDismiss, ...restProps }, ref) {\n  const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n  const [open, setOpen] = useState(true);\n\n  return (\n    <TouchDialog\n      {...restProps}\n      open={open}\n      onDismiss={() => {\n        setOpen(false);\n      }}\n      ref={ref}\n      heading={headingText}\n      onAfterClose={() => {\n        onDismiss();\n      }}\n    >\n      {children}\n    </TouchDialog>\n  );\n});\n\nexport default TouchInfoDialog;\n"]}

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

@@ -1,4 +1,7 @@
 export { default as FormDialog } from './FormDialog';
-export { default as InfoDialog } from './InfoDialog';
+export { default as InfoDialog } from './InfoDialogWrapper';
+export { default as TouchDialog } from './TouchDialog';
+export type { TouchDialogProps } from './TouchDialog.types';
+export { getTouchDialogTestIds } from './TouchDialog.test-ids';
 export type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Dialog/index.js

@@ -1,3 +1,5 @@
 export { default as FormDialog } from './FormDialog';
-export { default as InfoDialog } from './InfoDialog';
+export { default as InfoDialog } from './InfoDialogWrapper';
+export { default as TouchDialog } from './TouchDialog';
+export { getTouchDialogTestIds } from './TouchDialog.test-ids';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as FormDialog } from './FormDialog';\nexport { default as InfoDialog } from './InfoDialog';\nexport type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default as FormDialog } from './FormDialog';\nexport { default as InfoDialog } from './InfoDialogWrapper';\nexport { default as TouchDialog } from './TouchDialog';\nexport type { TouchDialogProps } from './TouchDialog.types';\nexport { getTouchDialogTestIds } from './TouchDialog.test-ids';\nexport type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';\n"]}

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

@@ -49,7 +49,15 @@ export type FieldGroupProps = BaseProps & {
     collapsed?: never;
     onToggleCollapsed?: never;
 });
-export declare const StyledFieldGroupName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../HTML").HTMLProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
+    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFieldGroupChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFieldGroupName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFieldHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & BaseProps & import("../..").AsProp & {
     children?: ReactNode;
     ref?: Ref<Element>;
@@ -417,15 +425,12 @@ export declare const StyledFieldGroupContent: import("styled-components/dist/typ
     ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }), import("styled-components/dist/types").BaseObject>> & string & Omit<ForwardRefForwardPropsComponent<import("../Grid").GridProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFieldGroupLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, Pick<FieldGroupProps, "collapsed">>> & string;
-export declare const StyledFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export declare const StyledFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {
+    $hasDescription?: boolean;
+}>> & string;
 export declare const StyledGroupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     border?: boolean;
 }>> & string;
-export declare const StyledDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../HTML").HTMLProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("../..").ForwardProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
-    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
-}, keyof import("react").Component<any, {}, any>>;
 declare const FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps>;
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

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":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA4CJ,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,+OAkB5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAkB/D,CAAC;AAiCH,eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA8F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAUJ,eAAO,MAAM,iBAAiB;;;;iDAU5B,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAAe,CAAC;AAoCrD,eAAO,MAAM,oBAAoB;;uIAAiB,CAAC;AAEnD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QAwBlC,CAAC;AAIF,eAAO,MAAM,gBAAgB;sBAAuC,OAAO;YAa1E,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAS/D,CAAC;AAiCH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAmG/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -18,6 +18,18 @@ import { calculateFontSize, omitProps } from '../../styles';
 import AdditionalInfo from '../AdditionalInfo';
 registerIcon(caretRightIcon);
 registerIcon(warnSolidIcon);
+export const StyledDescription = styled(HTML)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    /* Prevent instruction text from contributing to modal width calculation */
+    width: 0;
+    min-width: 100%;
+    color: rgb(from currentColor r g b / ${theme.base.transparency['transparent-2']});
+    font-size: ${fontSizes.xs};
+  `;
+});
+StyledDescription.defaultProps = defaultThemeProp;
+export const StyledFieldGroupChildren = styled.div ``;
 // Styles
 const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
     const { rtl } = useDirection();
@@ -38,19 +50,14 @@ const StyledErrorIcon = styled(Icon)(({ theme: { base: { palette } } }) => css `
     color: ${palette.urgent};
   `);
 StyledErrorIcon.defaultProps = defaultThemeProp;
-export const StyledFieldGroupName = styled.span ``;
+export const StyledFieldGroupName = styled(Text) ``;
 export const StyledFieldHeader = styled(Flex) `
   word-break: break-word;
 `;
 export const StyledFieldGroupContent = styled(Grid) ``;
-export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ collapsed, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ theme: { base: { animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
     return css `
       width: 100%;
-      margin-bottom: 0;
-      ${!collapsed &&
-        css `
-        margin-block-end: calc(1.5 * ${spacing});
-      `}
       transition: margin-block-end ${animation.speed} ${animation.timing.ease};
 
       > ${StyledExpandButton} {
@@ -63,26 +70,27 @@ export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collap
     `;
 });
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
-export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
-    const fontSizes = calculateFontSize(fontSize, fontScale);
+export const StyledFieldGroup = styled.fieldset(({ theme, $hasDescription }) => {
     return css `
       border: none;
 
-      & ${StyledFieldGroupName} {
-        font-size: ${fontSizes[text.h3['font-size']]};
-        font-weight: ${text.h3['font-weight']};
-      }
+      ${!$hasDescription &&
+        css `
+        & > ${StyledFieldGroupLegend}:not(:has([aria-expanded='false'])) {
+          margin-block-end: calc(${theme.base.spacing} / 2);
+        }
+      `}
     `;
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
 export const StyledGroupContainer = styled.div(({ theme, border }) => {
-    const { base: { palette: { 'border-line': borderColor }, spacing, 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-width': borderWidth } } } = theme;
     if (!border)
         return null;
     return css `
-    padding: ${spacing};
-    border-radius: calc(${baseBorderRadius} / 2);
-    border: ${borderWidth} solid ${borderColor};
+    padding: calc(2 * ${theme.base.spacing});
+    border-radius: calc(${theme.base['border-radius']} / 2);
+    border: ${theme.components['form-control']['border-width']} solid
+      ${theme.base.palette['border-line']};
   `;
 });
 StyledGroupContainer.defaultProps = defaultThemeProp;
@@ -90,20 +98,15 @@ StyledGroupContainer.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ name, contextualLabel, children, collapsed, actions, additionalInfo }) => {
     return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledFieldHeader, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: contextualLabel || name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions, contextualLabel: contextualLabel })] }) }));
 };
-export const StyledDescription = styled(HTML) `
-  /* Prevent instruction text from contributing to modal width calculation */
-  width: 0;
-  min-width: 100%;
-`;
 const FieldGroup = forwardRef(function FieldGroup({ children, description, banner, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, status, ...restProps }, ref) {
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [banner && _jsx(Banner, { ...banner }), description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx("div", { children: children })] }));
-    return (_jsx(StyledGroupContainer, { border: variant === 'form-group', children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
+    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 0.5 }, children: [banner && _jsx(Banner, { ...banner }), description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx(StyledFieldGroupChildren, { children: children })] }));
+    return (_jsx(StyledGroupContainer, { border: variant === 'form-group', children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, "$hasDescription": !!description, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed?.();
                         }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [
                             contextualLabel || name
-                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsxs(_Fragment, { children: [status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
+                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { variant: 'h3', forwardedAs: 'span', children: name }))] }) })) : (_jsxs(_Fragment, { children: [status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { variant: 'h3', forwardedAs: 'span', children: name }))] })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

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 } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = 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  /** A banner to be displayed above the controls. */\n  banner?: BannerProps;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** Indicates validation status for error display in the header. */\n  status?: 'error';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon}:first-child {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon}:first-child {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => css`\n    color: ${palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n  word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n  Pick<FieldGroupProps, 'collapsed'>\n>(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\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      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n  const {\n    base: {\n      palette: { 'border-line': borderColor },\n      spacing,\n      'border-radius': baseBorderRadius\n    },\n    components: {\n      'form-control': { 'border-width': borderWidth }\n    }\n  } = theme;\n  if (!border) return null;\n\n  return css`\n    padding: ${spacing};\n    border-radius: calc(${baseBorderRadius} / 2);\n    border: ${borderWidth} solid ${borderColor};\n  `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nexport const StyledDescription = styled(HTML)`\n  /* Prevent instruction text from contributing to modal width calculation */\n  width: 0;\n  min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    banner,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    status,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {banner && <Banner {...banner} />}\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C,YAAY,CAAC,cAAc,CAAC,CAAC;AAC7B,YAAY,CAAC,aAAa,CAAC,CAAC;AA6D5B,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;;;;2CAI+B,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;iBAClE,SAAS,CAAC,EAAE;GAC1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAErD,SAAS;AACT,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EACzC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;MACN,UAAU;8BACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;8BAExC,UAAU;;;+BAGT,UAAU;0BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;aACE,OAAO,CAAC,MAAM;GACxB,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAGpF,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,SAAS,EACT,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EACvE,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;qCAEuB,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;UAEnE,kBAAkB;sBACN,YAAY;;;wBAGV,aAAa;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAC7C,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC7B,OAAO,GAAG,CAAA;;;QAGN,CAAC,eAAe;QAClB,GAAG,CAAA;cACK,sBAAsB;mCACD,KAAK,CAAC,IAAI,CAAC,OAAO;;OAE9C;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACzF,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;0BAChB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;cACvC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;QACtD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,aAAa;AACb,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,EACQ,EAAE,EAAE;IAC1B,OAAO,CACL,KAAC,sBAAsB,IAAC,SAAS,EAAE,SAAS,YAC1C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,aACrE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,aACvE,QAAQ,EACR,cAAc,IAAI,CACjB,KAAC,cAAc,IACb,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,eAAe,EAAE,eAAe,IAAI,IAAI,YAEvC,cAAc,CAAC,OAAO,GACR,CAClB,IACI,EACN,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,GAAI,IACpE,GACgB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EACE,QAAQ,EACR,WAAW,EACX,MAAM,EACN,IAAI,EACJ,eAAe,EACf,cAAc,EACd,OAAO,EACP,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,GAAG,SAAS,EACqB,EACnC,GAA2B;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,CACtB,MAAC,uBAAuB,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,GAAG,EAAE,aACrE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EAChC,WAAW,IAAI,CACd,KAAC,iBAAiB,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,WAAW,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,CACtF,EACD,KAAC,wBAAwB,cAAE,QAAQ,GAA4B,IACvC,CAC3B,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,IAAC,MAAM,EAAE,OAAO,KAAK,YAAY,YACpD,MAAC,gBAAgB,kBACH,eAAe,IAAI,IAAI,sBACjB,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,EAChE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KACzB,SAAS,EACb,GAAG,EAAE,GAAG,qBACS,CAAC,CAAC,WAAW,aAE7B,IAAI,IAAI,CACP,KAAC,gBAAgB,IACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,YAE/B,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,EAAE,CAAC;wBACxB,CAAC,mBACc,CAAC,SAAS,gBACb,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EAAE;4BACzD,eAAe,IAAI,IAAI;yBACxB,CAAC,YAEF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC/D,WAAW,EAAC,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,EACjE,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,OAAO,EAAC,IAAI,EAAC,WAAW,EAAC,MAAM,YAClD,IAAI,GACgB,CACxB,IACI,GACY,CACtB,CAAC,CAAC,CAAC,CACF,8BACG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,EACjE,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,OAAO,EAAC,IAAI,EAAC,WAAW,EAAC,MAAM,YAClD,IAAI,GACgB,CACxB,IACA,CACJ,GACgB,CACpB,EAEA,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,eAAe,GAAkB,CACzE,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,IACgB,GACE,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = 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  /** A banner to be displayed above the controls. */\n  banner?: BannerProps;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** Indicates validation status for error display in the header. */\n  status?: 'error';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\nexport const StyledDescription = styled(HTML)(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    /* Prevent instruction text from contributing to modal width calculation */\n    width: 0;\n    min-width: 100%;\n    color: rgb(from currentColor r g b / ${theme.base.transparency['transparent-2']});\n    font-size: ${fontSizes.xs};\n  `;\n});\n\nStyledDescription.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupChildren = styled.div``;\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon}:first-child {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon}:first-child {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => css`\n    color: ${palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled(Text)``;\n\nexport const StyledFieldHeader = styled(Flex)`\n  word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n  Pick<FieldGroupProps, 'collapsed'>\n>(\n  ({\n    theme: {\n      base: {\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset<{ $hasDescription?: boolean }>(\n  ({ theme, $hasDescription }) => {\n    return css`\n      border: none;\n\n      ${!$hasDescription &&\n      css`\n        & > ${StyledFieldGroupLegend}:not(:has([aria-expanded='false'])) {\n          margin-block-end: calc(${theme.base.spacing} / 2);\n        }\n      `}\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n  if (!border) return null;\n\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    border: ${theme.components['form-control']['border-width']} solid\n      ${theme.base.palette['border-line']};\n  `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    banner,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    status,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 0.5 }}>\n      {banner && <Banner {...banner} />}\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <StyledFieldGroupChildren>{children}</StyledFieldGroupChildren>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n        $hasDescription={!!description}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName variant='h3' forwardedAs='span'>\n                      {name}\n                    </StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName variant='h3' forwardedAs='span'>\n                    {name}\n                  </StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.js

@@ -88,7 +88,7 @@ export const StyledListItem = styled.li(({ theme, depth, listGroupIndex, shouldH
       ${StyledFieldHeader} {
         margin-inline-start: calc(0.5 * ${spacing});
         padding-inline: ${spacing};
-        height: calc(4 * ${spacing});
+        padding-block: ${spacing};
         border-start-end-radius: calc(0.5 * ${borderRadius});
         border-end-end-radius: calc(0.5 * ${borderRadius});
         background: ${bgColor};