@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

package/lib/components/FormControl/FormControl.d.ts

@@ -47,9 +47,9 @@ export interface HandleValue {
     /** Used to clear component inputs with imperative handle */
     clear: () => void;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
+export declare const StyledFormControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
     hasSuggestion?: boolean;
-}, never>;
+}>> & string;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
 export default FormControl;
 //# sourceMappingURL=FormControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;oBACqB,OAAO;SA4GzD,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;oBACqB,OAAO;YAmHxD,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js

@@ -3,78 +3,89 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { calculateFontSize } from '../../styles';
-export const StyledFormControl = styled.div(({ theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status, hasSuggestion }) => {
+import { calculateFontSize, getReadableStatusColor } from '../../styles';
+export const StyledFormControl = styled.div(({ theme, status, hasSuggestion }) => {
+    const { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } } = theme;
     const fontSize = calculateFontSize(baseFontSize, baseFontScale);
-    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;
+    const borderColor = status && formField[status] ? getReadableStatusColor(theme, status) : brd;
     const backgroundColor = hasSuggestion && status
         ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
         : background;
+    const inline = formField.layout === 'inline';
     return css `
-      color: ${foreground};
-      background-color: ${backgroundColor};
-      border-radius: calc(${baseRadius} * ${radius});
-      border-color: ${borderColor};
-      border-width: ${borderWidth};
-      border-style: solid;
-      transition-property: color, background-color, border-color;
-      transition-duration: ${speed};
-      transition-timing-function: ${timing.ease};
-      &,
+    color: ${foreground};
+    background-color: ${backgroundColor};
+    border-radius: calc(${baseRadius} * ${radius});
+    border-color: ${borderColor};
+    border-width: ${borderWidth};
+    border-style: solid;
+    transition-property: color, background-color, border-color;
+    transition-duration: ${speed};
+    transition-timing-function: ${timing.ease};
+
+    ${inline &&
+        css `
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: 0;
+      align-self: flex-start;
+    `}
+
+    &,
       & > select {
-        outline: none;
-      }
+      outline: none;
+    }
 
-      &:disabled,
-      &[disabled] {
-        background-color: ${disabledBackgroundColor};
-        border-color: ${disabledBorderColor};
-        cursor: not-allowed;
-      }
+    &:disabled,
+    &[disabled] {
+      background-color: ${disabledBackgroundColor};
+      border-color: ${disabledBorderColor};
+      cursor: not-allowed;
+    }
 
-      &:focus:not([disabled]) {
-        border-color: ${focusBorderColor};
-        box-shadow: ${shadow};
-        ${hasSuggestion &&
+    &:focus:not([disabled]) {
+      border-color: ${focusBorderColor};
+      box-shadow: ${shadow};
+      ${hasSuggestion &&
         css `
-          background-color: ${background};
-        `}
-      }
+        background-color: ${background};
+      `}
+    }
 
-      &:focus-within:not([disabled]) {
-        ${hasSuggestion &&
+    &:focus-within:not([disabled]) {
+      ${hasSuggestion &&
         css `
-          background-color: ${background};
-        `}
-      }
+        background-color: ${background};
+      `}
+    }
 
-      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
-        ${!status &&
-        css `
-          border-color: ${hoverBorderColor};
-        `}
-        ${hasSuggestion &&
+    &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+      ${!status &&
         css `
-          background-color: ${background};
-          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
-        `}
-      }
-
+        border-color: ${hoverBorderColor};
+      `}
       ${hasSuggestion &&
         css `
-        border-end-end-radius: 0;
+        background-color: ${background};
+        box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
       `}
+    }
+
+    ${hasSuggestion &&
+        css `
+      border-end-end-radius: 0;
+    `}
 
-      &[readonly] {
-        background-color: ${readOnlyBackgroundColor};
-        border-color: ${readOnlyBorderColor};
-      }
+    &[readonly] {
+      background-color: ${readOnlyBackgroundColor};
+      border-color: ${readOnlyBorderColor};
+    }
 
-      @media (pointer: coarse) {
-        /* stylelint-disable-next-line unit-allowed-list */
-        font-size: max(${fontSize.s}, 16px);
-      }
-    `;
+    @media (pointer: coarse) {
+      /* stylelint-disable-next-line unit-allowed-list */
+      font-size: max(${fontSize.s}, 16px);
+    }
+  `;
 });
 StyledFormControl.defaultProps = defaultThemeProp;
 const FormControl = forwardRef(function FormControl(props, ref) {

package/lib/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAqDjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAAC,KAAwC,EAAE,GAAwB;IACrF,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\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?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading?: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n   * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\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?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading?: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n   * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(({ theme, status, hasSuggestion }) => {\n  const {\n    base: {\n      'border-radius': baseRadius,\n      'font-size': baseFontSize,\n      'font-scale': baseFontScale,\n      animation: { speed, timing },\n      palette\n    },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'foreground-color': foreground,\n        'background-color': background,\n        'border-color': brd,\n        'border-radius': radius,\n        'border-width': borderWidth,\n        ':hover': { 'border-color': hoverBorderColor },\n        ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n        ':disabled': {\n          'border-color': disabledBorderColor,\n          'background-color': disabledBackgroundColor\n        },\n        ':read-only': {\n          'border-color': readOnlyBorderColor,\n          'background-color': readOnlyBackgroundColor\n        }\n      }\n    }\n  } = theme;\n\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  const borderColor = status && formField[status] ? getReadableStatusColor(theme, status) : brd;\n  const backgroundColor =\n    hasSuggestion && status\n      ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n      : background;\n\n  const inline = formField.layout === 'inline';\n\n  return css`\n    color: ${foreground};\n    background-color: ${backgroundColor};\n    border-radius: calc(${baseRadius} * ${radius});\n    border-color: ${borderColor};\n    border-width: ${borderWidth};\n    border-style: solid;\n    transition-property: color, background-color, border-color;\n    transition-duration: ${speed};\n    transition-timing-function: ${timing.ease};\n\n    ${inline &&\n    css`\n      flex-grow: 1;\n      flex-shrink: 1;\n      flex-basis: 0;\n      align-self: flex-start;\n    `}\n\n    &,\n      & > select {\n      outline: none;\n    }\n\n    &:disabled,\n    &[disabled] {\n      background-color: ${disabledBackgroundColor};\n      border-color: ${disabledBorderColor};\n      cursor: not-allowed;\n    }\n\n    &:focus:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n      ${hasSuggestion &&\n      css`\n        background-color: ${background};\n      `}\n    }\n\n    &:focus-within:not([disabled]) {\n      ${hasSuggestion &&\n      css`\n        background-color: ${background};\n      `}\n    }\n\n    &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n      ${!status &&\n      css`\n        border-color: ${hoverBorderColor};\n      `}\n      ${hasSuggestion &&\n      css`\n        background-color: ${background};\n        box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n      `}\n    }\n\n    ${hasSuggestion &&\n    css`\n      border-end-end-radius: 0;\n    `}\n\n    &[readonly] {\n      background-color: ${readOnlyBackgroundColor};\n      border-color: ${readOnlyBorderColor};\n    }\n\n    @media (pointer: coarse) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      font-size: max(${fontSize.s}, 16px);\n    }\n  `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

package/lib/components/FormField/FormField.d.ts

@@ -67,13 +67,20 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
     'aria-describedby'?: string;
     /** Callback invoked when the clear button is clicked. If provided will render the clear button. */
     onClear?: () => void;
+    /** Suppresses announcements for status changes. */
+    suppressAnnouncements?: boolean;
 }
-export declare const StyledFormFieldInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
-export declare const StyledLabelRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FormFieldProps & {
-    labelAsLegend: boolean;
+export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & {
+    infoAbove?: boolean;
+}>> & string;
+export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    inline: boolean;
+}>> & string;
+export declare const StyledFormField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FormFieldProps & {
+    asFieldset: boolean;
     showAdditionalInfo: boolean;
-}, never>;
+    labelInline?: boolean;
+}>> & string;
 declare const _default: FC<FormFieldProps & ForwardProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAa3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD,eAAO,MAAM,mBAAmB,uIA6B/B,CAAC;AAIF,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SAoFtE,CAAC;;;;AAuTH,wBAA2D"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;gBACmB,OAAO;YA6BxD,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBAEZ,OAAO;wBACC,OAAO;kBACb,OAAO;YAqFvB,CAAC;;;;AAiVH,wBAA2D"}

package/lib/components/FormField/FormField.js

@@ -3,11 +3,11 @@ import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import Flex from '../Flex';
+import Flex, { StyledFlex } from '../Flex';
 import Actions from '../Actions';
-import { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
+import { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize, getHoverColors, readableColor, readableHue } from '../../styles';
+import { calculateFontSize, getHoverColors, readableColor, getReadableStatusColor } from '../../styles';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';
 import Button from '../Button';
@@ -16,14 +16,14 @@ import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';
-import { StyledRadioCheckInput } from '../RadioCheck/RadioCheck';
+import { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';
 import { getFormFieldTestIds } from './FormField.test-ids';
 registerIcon(warnSolidIcon, diamondMinusIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
     return css `
     height: 1em;
     width: 1em;
-    color: ${tryCatch(() => readableHue(theme.components['form-field'][status]['status-color'], theme.base.palette['primary-background']), () => theme.components['form-field'][status]['status-color'])};
+    color: ${getReadableStatusColor(theme, status)};
     vertical-align: baseline;
   `;
 });
@@ -35,28 +35,45 @@ const StyledClearButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledClearButton.defaultProps = defaultThemeProp;
-export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing, palette }, components: { 'form-field': formField } } }) => {
-    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);
+export const StyledFormFieldInfo = styled.div(({ status, infoAbove, theme }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { 'form-field': formField } } = theme;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    const infoFontSize = fontSizes.xxs;
     return css `
-      max-width: max-content;
-      font-size: ${infoFontSize};
-      word-break: break-word;
+    font-size: ${infoFontSize};
+    word-break: break-word;
 
-      &:not(:empty) {
-        margin-block-start: calc(0.25 * ${spacing});
-      }
+    &:not(:empty) {
+      ${infoAbove
+        ? css `
+            margin-block-end: calc(0.25 * ${spacing});
+          `
+        : css `
+            margin-block-start: calc(0.25 * ${spacing});
+          `}
+    }
 
-      ${status &&
+    ${status &&
         formField[status] &&
         css `
-        color: ${tryCatch(() => readableHue(formField[status]['status-color'], palette['primary-background']), () => formField[status]['status-color'])};
-      `}
-    `;
+      color: ${getReadableStatusColor(theme, status)};
+    `}
+  `;
 });
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
-export const StyledLabelRow = styled.div ``;
+export const StyledLabelRow = styled.div(({ inline }) => {
+    if (inline) {
+        return css `
+      flex-shrink: 0;
+      width: 14ch;
+      ${StyledAdditionalInfo} {
+        align-self: center;
+      }
+    `;
+    }
+});
 export const StyledFormField = styled.div(props => {
-    const { labelAsLegend, isRadioCheck, showAdditionalInfo, disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
+    const { asFieldset, showAdditionalInfo, disabled, required, labelInline, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
     return css `
     ${disabled &&
         css `
@@ -73,14 +90,18 @@ export const StyledFormField = styled.div(props => {
       }
     }
 
-    > ${StyledLabel}, > ${StyledLabelRow} {
+    ${StyledFlex}:has(${StyledRadioCheck}) {
+      flex-shrink: 0;
+    }
+
+    > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {
       &:not(:empty) {
         margin-bottom: calc(0.25 * ${spacing});
         min-height: ${hitAreaCompact};
       }
     }
 
-    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {
+    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {
       ${required &&
         css `
         &::after {
@@ -95,39 +116,36 @@ export const StyledFormField = styled.div(props => {
       `}
     }
 
-    ${labelAsLegend &&
+    ${asFieldset &&
+        showAdditionalInfo &&
         css `
-      > legend {
-        display: inline-flex;
-        align-items: flex-end;
+      > ${StyledFlex} > ${StyledLabel} {
+        display: block;
+      }
+
+      > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {
+        align-self: flex-start;
       }
     `}
 
-    ${labelAsLegend &&
-        showAdditionalInfo &&
+    ${labelInline &&
         css `
-      display: block;
-
-      > legend {
-        float: inline-start;
-      }
+      display: grid;
+      grid-template-columns: 14ch 1fr;
+      grid-template-rows: auto 1fr;
+      align-items: start;
 
-      > ${StyledAdditionalInfo} {
-        ${!isRadioCheck &&
-            css `
-          float: inline-end;
-        `}
-        + * {
-          clear: both;
-        }
+      ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {
+        grid-row: span 2;
       }
     `}
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
-const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing, palette }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
+const StyledSuggestionButton = styled(Button)(({ theme }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth } } } = theme;
     const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
-    const backgroundColor = tryCatch(() => readableHue(formField.pending['status-color'], palette['primary-background']), () => formField.pending['status-color']);
+    const backgroundColor = getReadableStatusColor(theme, 'pending');
     const hoverColors = getHoverColors(backgroundColor);
     const color = tryCatch(() => readableColor(backgroundColor));
     const borderColor = color ? rgba(color, 0.4) : color;
@@ -166,35 +184,54 @@ StyledSuggestionButton.defaultProps = defaultThemeProp;
 const statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
-    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
+    const theme = useTheme();
+    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
+    const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';
     const testIds = useTestIds(testId, getFormFieldTestIds);
+    const asFieldset = as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
-    const labelAsLegend = labelAs === 'legend';
+    const labelAs = asFieldset ? 'span' : labelAsProp;
     const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
     const consolidatedRef = useConsolidatedRef(ref);
     const labelRef = useRef(null);
     const [labelText, setLabelText] = useState(null);
     const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
+    const labelInline = inline && !isRadioCheck && !labelHidden;
+    const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;
     const labelContent = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
                     if (readOnly)
                         e.preventDefault();
-                }, inline: inline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
-    const labelRow = !isRadioCheck && !labelAsLegend && !labelHidden ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelContent })) : (labelContent);
+                }, inline: labelInline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
+    let labelRow;
+    if (!isRadioCheck && !asFieldset && !labelHidden) {
+        labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: labelInline ? 'start' : 'between', alignItems: 'end' }, item: { alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));
+    }
+    else if (asFieldset && !labelHidden) {
+        labelRow = (_jsx(Flex, { container: {
+                alignItems: 'end',
+                justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined
+            }, children: labelContent }));
+    }
+    else {
+        labelRow = labelContent;
+    }
     useEffect(() => {
         setLabelText(labelRef.current?.textContent ?? null);
     }, [label]);
     useEffect(() => {
-        if (status === 'error' || status === 'warning') {
-            let message = `${t(status)} ${info}`;
-            if (labelRef.current?.textContent)
-                message = `${labelRef.current?.textContent} ${message}`;
-            announceAssertive({ message, type: status });
-        }
+        if (suppressAnnouncements || (status !== 'error' && status !== 'warning'))
+            return;
+        let message = t(status);
+        if (typeof info === 'string')
+            message = `${message} ${info}`;
+        if (labelRef.current?.textContent)
+            message = `${labelRef.current?.textContent} ${message}`;
+        announceAssertive({ message, type: status });
     }, [status, info]);
     // fieldset or single form control element
     let content;
-    if (labelAsLegend || Children.count(controlElement) > 1) {
+    if (asFieldset || Children.count(controlElement) > 1) {
         content = controlElement;
     }
     else {
@@ -206,15 +243,15 @@ const FormField = forwardRef(function FormField(props, ref) {
         });
     }
     if (actions) {
-        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
+        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: labelInline ? 1 : undefined }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
-    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
+    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, infoAbove: infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
     if (charLimitDisplay) {
         infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
     }
     if (hasSuggestion) {
         const focusables = getFocusables(consolidatedRef);
-        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
+        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, infoAbove: infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
                                 onResolveSuggestion(false);
                                 focusables[0]?.focus();
                             }, "aria-label": `${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('no') }), _jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionAccept, onClick: () => {
@@ -234,14 +271,14 @@ const FormField = forwardRef(function FormField(props, ref) {
     const descriptionIds = [];
     if (ariaDescribedBy)
         descriptionIds.push(ariaDescribedBy);
-    if (labelAsLegend && info)
+    if (asFieldset && info)
         descriptionIds.push(`${id}-info`);
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: {
-            direction: inline ? 'row' : 'column',
-            alignItems: inline ? 'center' : undefined,
-            wrap: isRadioCheck ? 'wrap' : undefined,
+            direction: inline && !labelHidden ? 'row' : 'column',
+            alignItems: inline && !labelHidden ? 'center' : undefined,
+            wrap: isRadioCheck || inline ? 'wrap' : undefined,
             ...container
-        }, as: StyledFormField, labelAsLegend: labelAsLegend, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
+        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, labelInline: labelInline, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
                     onClear();
                 }, children: t('clear_selection') }))] }));
 });