@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.10

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

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

package/lib/components/Form/Form.js

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

package/lib/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,IAAI,GAAiC,UAAU,CACnD,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,KACJ,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,sBACrC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,aAE/D,OAAO,EACP,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAC3B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,EAAC,IAAI,YACrC,OAAO,GACH,CACR,EACA,WAAW,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,IAC1E,CACR,EACD,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YACpE,QAAQ,GACJ,EAEN,OAAO,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,GAAQ,IACtF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useUID } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\n\nexport interface FormProps extends BaseProps {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: ReactNode;\n  /** Region for Form Actions. */\n  actions?: ReactNode;\n  /** The heading of the form. */\n  heading?: string;\n  /** A description of the form to be displayed above the controls. */\n  description?: string;\n  /** Region for Banners above the Form. */\n  banners?: ReactNode;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLFormElement>;\n}\n\nexport const StyledForm = styled.form``;\nexport const StyledFormContent = styled.div``;\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormProps>, ref: FormProps['ref']) => {\n    const { children, actions, heading, description, banners, ...restProps } = props;\n\n    const uid = useUID();\n\n    return (\n      <Flex\n        container={{ direction: 'column', gap: 3 }}\n        as={StyledForm}\n        ref={ref}\n        {...restProps}\n        aria-labelledby={heading ? `${uid}-heading` : undefined}\n        aria-describedby={description ? `${uid}-description` : undefined}\n      >\n        {banners}\n        {(heading || description) && (\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            {heading && (\n              <Text id={`${uid}-heading`} variant='h3'>\n                {heading}\n              </Text>\n            )}\n            {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n          </Flex>\n        )}\n        <Flex as={StyledFormContent} container={{ direction: 'column', gap: 3 }}>\n          {children}\n        </Flex>\n\n        {actions && <Flex container={{ justify: 'between', alignItems: 'center' }}>{actions}</Flex>}\n      </Flex>\n    );\n  }\n);\n\nexport default Form;\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAQ7C,MAAM,IAAI,GAAiC,UAAU,CACnD,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAA8B,EAC9F,GAAqB,EACrB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IAExB,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, OmitStrict } from '../../types';\nimport { useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'> {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (\n    { children, actions, heading, description, banners, ...restProps }: PropsWithoutRef<FormProps>,\n    ref: FormProps['ref']\n  ) => {\n    const stepId = useUID();\n\n    return (\n      <MultiStepForm\n        {...restProps}\n        heading={heading}\n        steps={[\n          {\n            id: stepId,\n            name: '',\n            actions,\n            content: children,\n            description,\n            banners\n          }\n        ]}\n        currentStepId={stepId}\n        ref={ref}\n        autoComplete='off'\n      />\n    );\n  }\n);\n\nexport default Form;\n"]}

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

@@ -1,5 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
+import { AdditionalInfoProps } from '../AdditionalInfo';
 export interface FormControlProps extends BaseProps {
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
@@ -7,7 +8,7 @@ export interface FormControlProps extends BaseProps {
      */
     id?: string;
     /** Set visual state based on a validation state. */
-    status?: 'success' | 'warning' | 'error';
+    status?: 'success' | 'warning' | 'error' | 'pending';
     /** Pass a string or a fragment with an Icon and string. */
     label?: ReactNode;
     /** Visually hides the label region. */
@@ -18,6 +19,11 @@ export interface FormControlProps extends BaseProps {
     required?: boolean;
     /** Placeholder text. The browser defaults to an empty string. */
     placeholder?: string;
+    /**  Button when clicked will show additional information on a field */
+    additionalInfo?: {
+        heading: AdditionalInfoProps['heading'];
+        content: AdditionalInfoProps['children'];
+    };
     /**
      * Creates a controlled input and sets the value. Requires an onChange handler to update value.
      * value + onChange is the recommended method per React team.
@@ -33,8 +39,12 @@ export interface FormControlProps extends BaseProps {
     readOnly?: boolean;
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: string;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: (accepted: boolean) => void;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>>, never>;
+export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 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":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,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;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;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;CACf;AAID,eAAO,MAAM,iBAAiB,0MAwE5B,CAAC;AAIH,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":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,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,uEAAuE;IACvE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;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,eAAO,MAAM,iBAAiB;;SA2G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js

@@ -1,53 +1,78 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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(props => {
-    const { theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale }, 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 } = props;
+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 }) => {
     const fontSize = calculateFontSize(baseFontSize, baseFontScale);
     const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;
+    const backgroundColor = hasSuggestion && status
+        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
+        : background;
     return css `
-    color: ${foreground};
-    background-color: ${background};
-    border-radius: calc(${baseRadius} * ${radius});
-    border-color: ${borderColor};
-    border-width: ${borderWidth};
-    border-style: solid;
-    &,
-    & > select {
-      outline: none;
-    }
+      color: ${foreground};
+      background-color: ${backgroundColor};
+      border-radius: calc(${baseRadius} * ${radius});
+      border-color: ${borderColor};
+      border-width: ${borderWidth};
+      border-style: solid;
+      transition: all ${timing.ease} ${speed};
+      &,
+      & > select {
+        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 &&
+        css `
+          background-color: ${background};
+        `}
+      }
 
-    &:focus:not([disabled]) {
-      border-color: ${focusBorderColor};
-      box-shadow: ${shadow};
-    }
+      &:focus-within:not([disabled]) {
+        ${hasSuggestion &&
+        css `
+          background-color: ${background};
+        `}
+      }
 
-    ${!status &&
+      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+        ${!status &&
+        css `
+          border-color: ${hoverBorderColor};
+        `}
+        ${hasSuggestion &&
         css `
-      &:hover:not([readonly]):not([disabled]):not(:focus) {
-        border-color: ${hoverBorderColor};
+          background-color: ${background};
+          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
+        `}
       }
-    `}
 
-    &[readonly] {
-      background-color: ${readOnlyBackgroundColor};
-      border-color: ${readOnlyBorderColor};
-    }
+      ${hasSuggestion &&
+        css `
+        border-end-end-radius: 0;
+      `}
+
+      &[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((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,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,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,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\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';\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  /**\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), 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}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\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  } = props;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n  const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n  return css`\n    color: ${foreground};\n    background-color: ${background};\n    border-radius: calc(${baseRadius} * ${radius});\n    border-color: ${borderColor};\n    border-width: ${borderWidth};\n    border-style: solid;\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    }\n\n    ${!status &&\n    css`\n      &:hover:not([readonly]):not([disabled]):not(:focus) {\n        border-color: ${hoverBorderColor};\n      }\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  (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":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,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;AA+CjD,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;;wBAET,MAAM,CAAC,IAAI,IAAI,KAAK;;;;;;;;4BAQhB,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,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { 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), 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 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: all ${timing.ease} ${speed};\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  (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

@@ -41,6 +41,11 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
      * @default false
      */
     labelAfter?: boolean;
+    /**
+     * Property used to check whether input type is radio to handle styling for RadioCheck
+     * @default false
+     */
+    isRadioCheck?: boolean;
     /**
      * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup
      * @default "div"

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":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAI1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,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,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,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;AAMH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA4HhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAa1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,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,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAMF,eAAO,MAAM,eAAe,qHAyC1B,CAAC;AA0DH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAgMhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FormField/FormField.js

@@ -1,13 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement, useEffect, useState, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { readableColor, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Actions from '../Actions';
-import { useUID } from '../../hooks';
+import { useConsolidatedRef, useI18n, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize } from '../../styles';
-import Icon from '../Icon';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { getFocusables, tryCatch } from '../../utils';
+import Button from '../Button';
+import Icon, { registerIcon } from '../Icon';
+import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
+import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import AdditionalInfo from '../AdditionalInfo';
+registerIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
     return css `
       height: 1em;
@@ -33,6 +42,7 @@ export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-
     `;
 });
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
+const StyledLabelRow = styled.div ``;
 export const StyledFormField = styled.div(props => {
     const { disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing } } } = props;
     return css `
@@ -45,32 +55,74 @@ export const StyledFormField = styled.div(props => {
     position: relative;
     border: 0;
 
-    > ${StyledLabel} {
+    > ${StyledLabel}, > ${StyledLabelRow} {
       margin-bottom: calc(0.25 * ${spacing});
-      ${disabled &&
-        css `
-        cursor: not-allowed;
-      `}
+    }
 
+    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {
       &::after {
         display: ${required ? 'inline' : 'none'};
         content: '\\00a0*';
         vertical-align: top;
         color: ${urgent};
       }
+
+      ${disabled &&
+        css `
+        cursor: not-allowed;
+      `}
     }
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
-const statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };
+const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
+    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
+    const backgroundColor = formField.pending['status-color'];
+    const hoverColors = getHoverColors(backgroundColor);
+    const color = tryCatch(() => readableColor(backgroundColor));
+    const borderColor = color ? rgba(color, 0.4) : color;
+    return css `
+      background-color: ${backgroundColor};
+      color: ${color};
+      font-size: ${buttonFontSize};
+      min-width: calc(3 * ${spacing});
+      min-height: calc(3 * ${spacing});
+      padding: 0 ${spacing};
+      border-radius: 0;
+      border: none;
+      &:first-child {
+        border-inline-end: ${borderWidth} solid ${borderColor};
+        border-end-start-radius: calc(${baseRadius} * ${radius});
+        margin-inline-start: calc(2 * ${spacing});
+      }
+      &:last-child {
+        border-end-end-radius: calc(${baseRadius} * ${radius});
+        margin-inline-start: 0;
+      }
+      &:hover {
+        background-color: ${hoverColors.background};
+      }
+
+      @media (pointer: coarse) {
+        min-height: 2rem;
+      }
+    `;
+});
+StyledSuggestionButton.defaultProps = defaultThemeProp;
+const statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };
 const FormField = forwardRef((props, ref) => {
     const uid = useUID();
-    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, ...restProps } = props;
+    const { 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, actions, container, additionalInfo, onResolveSuggestion, ...restProps } = props;
+    const t = useI18n();
     const labelAsLegend = labelAs === 'legend';
-    const styledLabel = (_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
-            if (readOnly)
-                e.preventDefault();
-        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }));
+    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
+    const consolidatedRef = useConsolidatedRef(ref);
+    const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
+    const labelAndInfo = (_jsxs(_Fragment, { children: [_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
+                    if (readOnly)
+                        e.preventDefault();
+                }, inline: inline, children: [status && status !== 'pending' && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }), showAdditionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }));
+    const labelRow = showAdditionalInfo && !isRadioCheck ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelAndInfo })) : (labelAndInfo);
     /*
       We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
       This is to ensure screen readers will announce info on errors when role is set to alert.
@@ -103,11 +155,30 @@ const FormField = forwardRef((props, ref) => {
     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, { 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, { onClick: () => {
+                                onResolveSuggestion(false);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('reject_suggestion_button_a11y'), children: t('no') }), _jsx(StyledSuggestionButton, { onClick: () => {
+                                onResolveSuggestion(true);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('accept_suggestion_button_a11y'), children: t('yes') })] })] }));
+    }
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            const target = e.target;
+            if (!target.closest('button')) {
+                e.preventDefault();
+                onResolveSuggestion?.(true);
+            }
+        }
+    };
     return (_jsxs(Flex, { ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }));
+        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent] }));
 });
 export default FormField;
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport Icon from '../Icon';\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default \"label\"\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default \"div\"\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n  const {\n    disabled,\n    required,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing\n      }\n    }\n  } = props;\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel} {\n      margin-bottom: calc(0.25 * ${spacing});\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n      }\n    }\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n    const uid = useUID();\n    const {\n      children: controlElement,\n      id = uid,\n      as = 'div',\n      label,\n      labelAs = 'label',\n      labelFor = id,\n      labelId,\n      labelHidden = false,\n      labelAfter = false,\n      info,\n      status,\n      charLimitDisplay,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      inline = false,\n      actions,\n      container,\n      ...restProps\n    } = props;\n\n    const labelAsLegend: boolean = labelAs === 'legend';\n\n    const styledLabel = (\n      <Label\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {status && !labelHidden && (\n          <StyledStatusIcon status={status} name={statusIconMap[status]} />\n        )}\n        {label}\n      </Label>\n    );\n\n    /*\n      We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n      This is to ensure screen readers will announce info on errors when role is set to alert.\n      Needs testing to confirm. Currently the expected sequence would be:\n      - FormField renders with no error and no info\n      - user input triggers an error status\n      - props passed set error status and provide info text\n      - effect runs and sets live region state which renders and is announced\n    */\n    const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n    useEffect(() => {\n      setLiveRegionInfo(info);\n    }, [info]);\n\n    // fieldset or single form control element\n    let content: FormFieldProps['children'] = labelAsLegend\n      ? controlElement\n      : cloneElement(controlElement as ReactElement, {\n          'aria-describedby': info && `${id}-info`\n        });\n\n    if (actions) {\n      content = (\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {content}\n          <Actions items={actions} menuAt={3} />\n        </Flex>\n      );\n    }\n\n    let infoContent = info ? (\n      /*\n        Region for additional info, help or error message.\n        Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n        https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n      */\n      <StyledFormFieldInfo\n        status={status}\n        role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n        id={`${id}-info`}\n      >\n        {liveRegionInfo}\n      </StyledFormFieldInfo>\n    ) : undefined;\n\n    if (charLimitDisplay) {\n      infoContent = (\n        <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n          {infoContent}\n          <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n        </Flex>\n      );\n    }\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: inline ? 'row' : 'column',\n          alignItems: inline ? 'center' : undefined,\n          ...container\n        }}\n        as={StyledFormField}\n        id={`${id}-field`}\n        forwardedAs={as}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n        ref={ref}\n      >\n        {(labelAsLegend || !labelAfter) && styledLabel}\n        {content}\n        {!labelAsLegend && labelAfter && styledLabel}\n        {infoContent}\n      </Flex>\n    );\n  }\n);\n\nexport default FormField;\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo from '../AdditionalInfo';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default \"label\"\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Property used to check whether input type is radio to handle styling for RadioCheck\n   * @default false\n   */\n  isRadioCheck?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default \"div\"\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div``;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n  const {\n    disabled,\n    required,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing\n      }\n    }\n  } = props;\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} {\n      margin-bottom: calc(0.25 * ${spacing});\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n      }\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n    const uid = useUID();\n    const {\n      children: controlElement,\n      id = uid,\n      as = 'div',\n      label,\n      labelAs = 'label',\n      labelFor = id,\n      labelId,\n      labelHidden = false,\n      labelAfter = false,\n      info,\n      status,\n      isRadioCheck,\n      charLimitDisplay,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      inline = false,\n      actions,\n      container,\n      additionalInfo,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const labelAsLegend: boolean = labelAs === 'legend';\n    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n    const consolidatedRef = useConsolidatedRef(ref);\n\n    const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n    const labelAndInfo = (\n      <>\n        <Label\n          id={labelId}\n          as={labelAs}\n          htmlFor={labelAs === 'label' ? labelFor : undefined}\n          labelHidden={labelHidden}\n          onClick={(e: MouseEvent) => {\n            if (readOnly) e.preventDefault();\n          }}\n          inline={inline}\n        >\n          {status && status !== 'pending' && !labelHidden && (\n            <StyledStatusIcon status={status} name={statusIconMap[status]} />\n          )}\n          {label}\n        </Label>\n        {showAdditionalInfo && (\n          <AdditionalInfo heading={additionalInfo.heading}>{additionalInfo.content}</AdditionalInfo>\n        )}\n      </>\n    );\n\n    const labelRow =\n      showAdditionalInfo && !isRadioCheck ? (\n        <Flex\n          as={StyledLabelRow}\n          container={{ justify: 'between', alignItems: 'end' }}\n          item={{ alignSelf: 'stretch' }}\n        >\n          {labelAndInfo}\n        </Flex>\n      ) : (\n        labelAndInfo\n      );\n\n    /*\n      We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n      This is to ensure screen readers will announce info on errors when role is set to alert.\n      Needs testing to confirm. Currently the expected sequence would be:\n      - FormField renders with no error and no info\n      - user input triggers an error status\n      - props passed set error status and provide info text\n      - effect runs and sets live region state which renders and is announced\n    */\n    const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n    useEffect(() => {\n      setLiveRegionInfo(info);\n    }, [info]);\n\n    // fieldset or single form control element\n    let content: FormFieldProps['children'] = labelAsLegend\n      ? controlElement\n      : cloneElement(controlElement as ReactElement, {\n          'aria-describedby': info && `${id}-info`\n        });\n\n    if (actions) {\n      content = (\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {content}\n          <Actions items={actions} menuAt={3} />\n        </Flex>\n      );\n    }\n\n    let infoContent = info ? (\n      /*\n        Region for additional info, help or error message.\n        Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n        https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n      */\n      <StyledFormFieldInfo\n        status={status}\n        role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n        id={`${id}-info`}\n      >\n        {liveRegionInfo}\n      </StyledFormFieldInfo>\n    ) : undefined;\n\n    if (charLimitDisplay) {\n      infoContent = (\n        <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n          {infoContent}\n          <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n        </Flex>\n      );\n    }\n\n    if (hasSuggestion) {\n      const focusables = getFocusables(consolidatedRef);\n      infoContent = (\n        <Flex container={{ alignItems: 'start', justify: 'between' }}>\n          <StyledFormFieldInfo status={status} id={`${id}-info`}>\n            {t('suggestion_info')}\n            <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n          </StyledFormFieldInfo>\n          <Flex container={{ wrap: 'nowrap' }}>\n            <StyledSuggestionButton\n              onClick={() => {\n                onResolveSuggestion(false);\n                focusables[0]?.focus();\n              }}\n              aria-label={t('reject_suggestion_button_a11y')}\n            >\n              {t('no')}\n            </StyledSuggestionButton>\n            <StyledSuggestionButton\n              onClick={() => {\n                onResolveSuggestion(true);\n                focusables[0]?.focus();\n              }}\n              aria-label={t('accept_suggestion_button_a11y')}\n            >\n              {t('yes')}\n            </StyledSuggestionButton>\n          </Flex>\n        </Flex>\n      );\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        const target = e.target as HTMLElement;\n        if (!target.closest('button')) {\n          e.preventDefault();\n          onResolveSuggestion?.(true);\n        }\n      }\n    };\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: inline ? 'row' : 'column',\n          alignItems: inline ? 'center' : undefined,\n          ...container\n        }}\n        as={StyledFormField}\n        id={`${id}-field`}\n        forwardedAs={as}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        onKeyDown={hasSuggestion ? onKeyDown : undefined}\n        aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n        ref={consolidatedRef}\n      >\n        {(labelAsLegend || !labelAfter) && labelRow}\n        {content}\n        {!labelAsLegend && labelAfter && labelRow}\n        {!readOnly && infoContent}\n      </Flex>\n    );\n  }\n);\n\nexport default FormField;\n"]}

package/lib/components/Grid/Grid.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import GridProps from './Grid.types';
-export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & GridProps, never>;
 declare const Grid: FunctionComponent<GridProps & ForwardProps>;
 export default Grid;
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,SAAS,MAAM,cAAc,CAAC;AA2LrC,eAAO,MAAM,UAAU,gHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,SAAS,MAAM,cAAc,CAAC;AA2LrC,eAAO,MAAM,UAAU,qHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,5 +1,5 @@
 import { ReactNode, Ref } from 'react';
-import { BaseProps, AsProp } from '../../types';
+import { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 export interface GridContainerProps {
     /**
      * Display the grid as an inline-grid.
@@ -84,27 +84,28 @@ export interface GridItemProps {
      */
     alignSelf?: 'stretch' | 'start' | 'end' | 'center';
 }
-interface BaseGridProps {
+export interface BaseGridProps {
     /** Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) */
     container?: GridContainerProps | true;
     /** Designate as a Grid item to leverage grid item props. */
     item?: GridItemProps;
 }
-export default interface GridProps extends BaseGridProps, BaseProps, AsProp {
+declare type BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' | 'item'>;
+declare type GridProps = RequireAtLeastOne<BaseGridProps & BaseProps & AsProp & {
     /** Any ReactNode to use as grid items. To leverage item based props, use Grid with "item" prop. */
     children?: ReactNode;
     /** Ref for the grid element. */
     ref?: Ref<Element>;
     /** Override props for the grid at extra small screen size. */
-    xs?: BaseGridProps;
+    xs?: BreakpointGridProps;
     /** Override props for the grid at small screen size. */
-    sm?: BaseGridProps;
+    sm?: BreakpointGridProps;
     /** Override props for the grid at medium screen size. */
-    md?: BaseGridProps;
+    md?: BreakpointGridProps;
     /** Override props for the grid at large screen size. */
-    lg?: BaseGridProps;
+    lg?: BreakpointGridProps;
     /** Override props for the grid at extra large screen size. */
-    xl?: BaseGridProps;
-}
-export {};
+    xl?: BreakpointGridProps;
+}, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+export default GridProps;
 //# sourceMappingURL=Grid.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"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"}