@pega/cosmos-react-core 4.0.0-dev.13.0 → 4.0.0-dev.14.0

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

@@ -1,16 +1,14 @@
+import { ReactNode } from 'react';
 import { OmitStrict } from '../../types';
 import { PopoverProps } from '../Popover';
 import { ProgressProps } from '../Progress';
 export interface BaseDialogProps {
     /**
-     * A string to indicate context for the dialog. The dialog will be labelled by this value.
+     * Certain uses of dialogs require a linear edge with an input like control.
+     * There an arrow is not desired.
+     * @default true
      */
-    heading: string;
-    /**
-     * In specific circumstances the heading can be visually hidden.
-     * @default false
-     */
-    headingHidden?: boolean;
+    arrow?: PopoverProps['arrow'];
     /**
      * An element the dialog is contextually and visually associated with. Normally a triggering button.
      * Components rendering Dialog should mount and unmount instances based on this value.
@@ -38,12 +36,16 @@ export interface BaseDialogProps {
      */
     ref?: PopoverProps['ref'];
 }
-export interface DialogProps extends OmitStrict<BaseDialogProps, 'heading' | 'headingHidden'> {
+export type DialogProps = BaseDialogProps & {
     /**
-     * The DOM id for the dialog's labelling element.
+     * The DOM id for the dialog's visible labelling element.
      */
-    labelledbyId: string;
-}
+    labelledbyId?: string;
+    /**
+     * Provide a contextually sufficient aria label if a visible labelling element is not present.
+     */
+    ariaLabel?: string;
+};
 /**
  * A simple callback or an object to customize a subset button properties.
  */
@@ -52,7 +54,7 @@ type FormAction = (() => void) | {
     disabled?: boolean;
     handler: () => void;
 };
-export interface FormDialogProps extends BaseDialogProps {
+export type FormDialogProps = BaseDialogProps & {
     /**
      * Called when the user presses escape or clicks away.
      */
@@ -68,8 +70,28 @@ export interface FormDialogProps extends BaseDialogProps {
      * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.
      */
     onSubmit: FormAction;
-}
-export interface InfoDialogProps extends BaseDialogProps {
+} & ({
+    /**
+     * A string to indicate context for the dialog. The dialog will be labelled by this value.
+     */
+    heading: string;
+    ariaLabel?: never;
+} | {
+    /**
+     * Provide a contextually sufficient aria label if a visible heading is not provided.
+     */
+    heading?: never;
+    ariaLabel: string;
+});
+export interface InfoDialogProps extends OmitStrict<BaseDialogProps, 'arrow'> {
+    /**
+     * A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property.
+     */
+    heading?: string | {
+        primary: string;
+        secondary?: string;
+        visual?: ReactNode;
+    };
     /**
      * Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE9C,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEpC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAEtC;;OAEG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,CAAC;IAC3F;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,KAAK,UAAU,GACX,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,EAAE,UAAU,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAE9B;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE9C,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEpC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAEtC;;OAEG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,KAAK,UAAU,GACX,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,EAAE,UAAU,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,UAAU,CAAC;CACtB,GAAG,CACE;IACE;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CACJ,CAAC;AAEJ,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,OAAO,CAAC,EACJ,MAAM,GACN;QACE,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB,CAAC;IAEN;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}

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

@@ -1,3 +1,2 @@
-// cSpell:words dialog's
 export {};
 //# sourceMappingURL=Dialog.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,wBAAwB","sourcesContent":["// cSpell:words dialog's\n\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport { ProgressProps } from '../Progress';\n\nexport interface BaseDialogProps {\n  /**\n   * A string to indicate context for the dialog. The dialog will be labelled by this value.\n   */\n  heading: string;\n\n  /**\n   * In specific circumstances the heading can be visually hidden.\n   * @default false\n   */\n  headingHidden?: boolean;\n\n  /**\n   * An element the dialog is contextually and visually associated with. Normally a triggering button.\n   * Components rendering Dialog should mount and unmount instances based on this value.\n   */\n  target: HTMLElement;\n\n  /**\n   * Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog.\n   */\n  children: PopoverProps['children'];\n\n  /**\n   * If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well.\n   */\n  progress?: boolean | ProgressProps['message'];\n\n  /** Optionally render the dialog element at the end of the body or within a specified element. */\n  portal?: PopoverProps['portal'];\n\n  /** Positioning strategy for solving rendering scenarios. */\n  strategy?: PopoverProps['strategy'];\n\n  /**\n   * Intended positioning placement for the dialog element.\n   * Placement may auto adjust based on screen position and other layout variables.\n   */\n  placement?: PopoverProps['placement'];\n\n  /**\n   * Reference to the dialog's root element.\n   */\n  ref?: PopoverProps['ref'];\n}\n\nexport interface DialogProps extends OmitStrict<BaseDialogProps, 'heading' | 'headingHidden'> {\n  /**\n   * The DOM id for the dialog's labelling element.\n   */\n  labelledbyId: string;\n}\n\n/**\n * A simple callback or an object to customize a subset button properties.\n */\ntype FormAction =\n  | (() => void)\n  | {\n      text?: string;\n      disabled?: boolean;\n      handler: () => void;\n    };\n\nexport interface FormDialogProps extends BaseDialogProps {\n  /**\n   * Called when the user presses escape or clicks away.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Renders a standard design system cancel button.\n   * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n   * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n   */\n  onCancel: FormAction;\n\n  /**\n   * Renders a standard design system submit button.\n   * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n   */\n  onSubmit: FormAction;\n}\n\nexport interface InfoDialogProps extends BaseDialogProps {\n  /**\n   * Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away.\n   */\n  onDismiss: () => void;\n}\n\n/**\n * Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n  open: () => void;\n  close: () => void;\n}\n"]}
+{"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport { ProgressProps } from '../Progress';\n\nexport interface BaseDialogProps {\n  /**\n   * Certain uses of dialogs require a linear edge with an input like control.\n   * There an arrow is not desired.\n   * @default true\n   */\n  arrow?: PopoverProps['arrow'];\n\n  /**\n   * An element the dialog is contextually and visually associated with. Normally a triggering button.\n   * Components rendering Dialog should mount and unmount instances based on this value.\n   */\n  target: HTMLElement;\n\n  /**\n   * Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog.\n   */\n  children: PopoverProps['children'];\n\n  /**\n   * If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well.\n   */\n  progress?: boolean | ProgressProps['message'];\n\n  /** Optionally render the dialog element at the end of the body or within a specified element. */\n  portal?: PopoverProps['portal'];\n\n  /** Positioning strategy for solving rendering scenarios. */\n  strategy?: PopoverProps['strategy'];\n\n  /**\n   * Intended positioning placement for the dialog element.\n   * Placement may auto adjust based on screen position and other layout variables.\n   */\n  placement?: PopoverProps['placement'];\n\n  /**\n   * Reference to the dialog's root element.\n   */\n  ref?: PopoverProps['ref'];\n}\n\nexport type DialogProps = BaseDialogProps & {\n  /**\n   * The DOM id for the dialog's visible labelling element.\n   */\n  labelledbyId?: string;\n\n  /**\n   * Provide a contextually sufficient aria label if a visible labelling element is not present.\n   */\n  ariaLabel?: string;\n};\n\n/**\n * A simple callback or an object to customize a subset button properties.\n */\ntype FormAction =\n  | (() => void)\n  | {\n      text?: string;\n      disabled?: boolean;\n      handler: () => void;\n    };\n\nexport type FormDialogProps = BaseDialogProps & {\n  /**\n   * Called when the user presses escape or clicks away.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Renders a standard design system cancel button.\n   * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n   * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n   */\n  onCancel: FormAction;\n\n  /**\n   * Renders a standard design system submit button.\n   * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n   */\n  onSubmit: FormAction;\n} & (\n    | {\n        /**\n         * A string to indicate context for the dialog. The dialog will be labelled by this value.\n         */\n        heading: string;\n        ariaLabel?: never;\n      }\n    | {\n        /**\n         * Provide a contextually sufficient aria label if a visible heading is not provided.\n         */\n        heading?: never;\n        ariaLabel: string;\n      }\n  );\n\nexport interface InfoDialogProps extends OmitStrict<BaseDialogProps, 'arrow'> {\n  /**\n   * A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property.\n   */\n  heading?:\n    | string\n    | {\n        primary: string;\n        secondary?: string;\n        visual?: ReactNode;\n      };\n\n  /**\n   * Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away.\n   */\n  onDismiss: () => void;\n}\n\n/**\n * Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n  open: () => void;\n  close: () => void;\n}\n"]}

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

@@ -1,7 +1,10 @@
 import { FC, HTMLAttributes } from 'react';
 import { OmitStrict } from '../../types';
 import { FormDialogProps } from './Dialog.types';
-export declare const StyledFormDialog: import("styled-components").StyledComponent<FC<import("./Dialog.types").DialogProps & HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormDialog: import("styled-components").StyledComponent<FC<import("./Dialog.types").BaseDialogProps & {
+    labelledbyId?: string | undefined;
+    ariaLabel?: string | undefined;
+} & HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 declare const FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>>;
 export default FormDialog;
 //# sourceMappingURL=FormDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB3F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CA6G1F,CAAC;AAEJ,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAe3F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,eAAO,MAAM,gBAAgB;;;yFAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAmH1F,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js

@@ -5,13 +5,12 @@ import { useConsolidatedRef, useEscape, useFocusTrap, useI18n, useOuterEvent, us
 import { getFocusables } from '../../utils';
 import Button from '../Button';
 import Text from '../Text';
-import { CardContent, CardFooter, CardHeader } from '../Card';
 import Progress from '../Progress';
-import VisuallyHiddenText from '../VisuallyHiddenText';
-import { StyledChildrenWrap } from './Dialog.styles';
+import Flex from '../Flex';
+import { StyledChildrenWrap, StyledDialogContent, StyledDialogFooter, StyledDialogHeader } from './Dialog.styles';
 import Dialog from './Dialog';
 export const StyledFormDialog = styled(Dialog) ``;
-const FormDialog = forwardRef(({ target, heading, headingHidden = false, children, progress, onDismiss, onCancel, onSubmit, ...restProps }, ref) => {
+const FormDialog = forwardRef(({ arrow = true, target, heading, ariaLabel, children, progress, onDismiss, onCancel, onSubmit, ...restProps }, ref) => {
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
@@ -48,7 +47,7 @@ const FormDialog = forwardRef(({ target, heading, headingHidden = false, childre
             }
         };
     }, []);
-    return (_jsxs(StyledFormDialog, { ...restProps, target: target, labelledbyId: headingId, progress: progress, ref: dialogRef, children: [_jsx(CardHeader, { forwardedAs: 'div', children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(CardFooter, { justify: 'between', forwardedAs: 'div', children: [_jsx(Button, { onClick: () => {
+    return (_jsxs(StyledFormDialog, { ...restProps, ...(heading === undefined ? { ariaLabel } : { labelledbyId: headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsx(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: _jsx(Text, { id: headingId, variant: 'h2', children: heading }) })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, children: [children && _jsx(StyledChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
                             onCancelHandler();
                         }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, ref: cancelButtonRef, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
                             (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Progress from '../Progress';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { OmitStrict } from '../../types';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>> =\n  forwardRef(\n    (\n      {\n        target,\n        heading,\n        headingHidden = false,\n        children,\n        progress,\n        onDismiss,\n        onCancel,\n        onSubmit,\n        ...restProps\n      }: PropsWithoutRef<FormDialogProps>,\n      ref: FormDialogProps['ref']\n    ) => {\n      const t = useI18n();\n      const headingId = useUID();\n      const dialogRef = useConsolidatedRef(ref);\n      const cancelButtonRef = useRef<HTMLButtonElement>(null);\n      const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n      useEscape(() => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useOuterEvent('mousedown', [target, dialogRef], () => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useFocusTrap(dialogRef);\n\n      useEffect(() => {\n        if (!progress) {\n          const focusables = getFocusables(dialogRef);\n          if (focusables[0]) focusables[0].focus();\n        }\n      }, [progress]);\n\n      useEffect(() => {\n        return () => {\n          if (document.contains(target)) {\n            target.focus();\n          }\n        };\n      }, []);\n\n      return (\n        <StyledFormDialog\n          {...restProps}\n          target={target}\n          labelledbyId={headingId}\n          progress={progress}\n          ref={dialogRef}\n        >\n          <CardHeader forwardedAs='div'>\n            {headingHidden ? (\n              <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n                {heading}\n              </VisuallyHiddenText>\n            ) : (\n              <Text id={headingId} variant='h2'>\n                {heading}\n              </Text>\n            )}\n          </CardHeader>\n\n          <CardContent>\n            {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n            <Progress\n              visible={!!progress}\n              focusOnVisible\n              placement={children ? 'local' : 'block'}\n              message={typeof progress === 'string' ? progress : undefined}\n            />\n          </CardContent>\n\n          <CardFooter justify='between' forwardedAs='div'>\n            <Button\n              onClick={() => {\n                onCancelHandler();\n              }}\n              disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n              ref={cancelButtonRef}\n            >\n              {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n            </Button>\n\n            <Button\n              variant='primary'\n              onClick={() => {\n                (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n              }}\n              disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n            >\n              {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n            </Button>\n          </CardFooter>\n        </StyledFormDialog>\n      );\n    }\n  );\n\nexport default FormDialog;\n"]}
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { OmitStrict } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogFooter,\n  StyledDialogHeader\n} from './Dialog.styles';\nimport { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>> =\n  forwardRef(\n    (\n      {\n        arrow = true,\n        target,\n        heading,\n        ariaLabel,\n        children,\n        progress,\n        onDismiss,\n        onCancel,\n        onSubmit,\n        ...restProps\n      }: PropsWithoutRef<FormDialogProps>,\n      ref: FormDialogProps['ref']\n    ) => {\n      const t = useI18n();\n      const headingId = useUID();\n      const dialogRef = useConsolidatedRef(ref);\n      const cancelButtonRef = useRef<HTMLButtonElement>(null);\n      const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n      useEscape(() => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useOuterEvent('mousedown', [target, dialogRef], () => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useFocusTrap(dialogRef);\n\n      useEffect(() => {\n        if (!progress) {\n          const focusables = getFocusables(dialogRef);\n          if (focusables[0]) focusables[0].focus();\n        }\n      }, [progress]);\n\n      useEffect(() => {\n        return () => {\n          if (document.contains(target)) {\n            target.focus();\n          }\n        };\n      }, []);\n\n      return (\n        <StyledFormDialog\n          {...restProps}\n          {...(heading === undefined ? { ariaLabel } : { labelledbyId: headingId })}\n          arrow={arrow}\n          target={target}\n          progress={progress}\n          ref={dialogRef}\n        >\n          {heading !== undefined && (\n            <Flex\n              container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n              item={{ shrink: 0 }}\n              as={StyledDialogHeader}\n            >\n              <Text id={headingId} variant='h2'>\n                {heading}\n              </Text>\n            </Flex>\n          )}\n\n          <Flex item={{ grow: 1 }} as={StyledDialogContent}>\n            {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n            <Progress\n              visible={!!progress}\n              focusOnVisible\n              placement={children ? 'local' : 'block'}\n              message={typeof progress === 'string' ? progress : undefined}\n            />\n          </Flex>\n\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogFooter}\n          >\n            <Button\n              onClick={() => {\n                onCancelHandler();\n              }}\n              disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n              ref={cancelButtonRef}\n            >\n              {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n            </Button>\n\n            <Button\n              variant='primary'\n              onClick={() => {\n                (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n              }}\n              disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n            >\n              {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n            </Button>\n          </Flex>\n        </StyledFormDialog>\n      );\n    }\n  );\n\nexport default FormDialog;\n"]}

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

@@ -1,6 +1,5 @@
 import { FC, HTMLAttributes } from 'react';
 import { InfoDialogProps } from './Dialog.types';
-export declare const StyledInfoDialog: import("styled-components").StyledComponent<FC<import("./Dialog.types").DialogProps & HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 declare const InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>>;
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAoB3F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAyFpE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB3F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAgHpE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from 'react';
-import styled from 'styled-components';
 import { useConsolidatedRef, useEscape, useFocusTrap, useI18n, useOuterEvent, useUID } from '../../hooks';
-import Button from '../Button';
 import Text from '../Text';
-import { CardContent, CardHeader } from '../Card';
 import Icon from '../Icon';
 import Progress from '../Progress';
-import VisuallyHiddenText from '../VisuallyHiddenText';
-import Dialog from './Dialog';
-import { StyledChildrenWrap } from './Dialog.styles';
-export const StyledInfoDialog = styled(Dialog) ``;
-const InfoDialog = forwardRef(({ target, heading, headingHidden = false, children, progress, onDismiss, ...restProps }, ref) => {
+import Flex from '../Flex';
+import SummaryItem from '../SummaryItem';
+import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
+import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
+const InfoDialog = forwardRef(({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) => {
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
@@ -24,10 +21,10 @@ const InfoDialog = forwardRef(({ target, heading, headingHidden = false, childre
     });
     useFocusTrap(dialogRef);
     useEffect(() => {
-        if (!progress) {
+        if (!progressProp) {
             closeButtonRef.current?.focus();
         }
-    }, [progress]);
+    }, [progressProp]);
     useEffect(() => {
         return () => {
             if (document.contains(target)) {
@@ -35,9 +32,14 @@ const InfoDialog = forwardRef(({ target, heading, headingHidden = false, childre
             }
         };
     }, []);
-    return (_jsxs(StyledInfoDialog, { ...restProps, target: target, labelledbyId: headingId, progress: progress, ref: dialogRef, children: [_jsx(CardHeader, { forwardedAs: 'div', actions: _jsx(Button, { icon: true, variant: 'simple', onClick: () => {
-                        onDismiss();
-                    }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }), children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined })] })] }));
+    const heading = headingProp ? (_jsx(Text, { id: headingId, variant: 'h2', children: typeof headingProp === 'string' ? headingProp : headingProp.primary })) : null;
+    const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progressProp === 'string' ? progressProp : undefined }));
+    const dismissButton = (_jsx(StyledDismissButton, { icon: true, variant: 'simple', onClick: () => {
+            onDismiss();
+        }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
+    return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
+            ? { labelledbyId: headingId }
+            : { ariaLabel: headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, children: [!headingProp && dismissButton, children && _jsx(StyledChildrenWrap, { children: children }), progress] })] }));
 });
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport Dialog from './Dialog';\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { InfoDialogProps } from './Dialog.types';\n\nexport const StyledInfoDialog = styled(Dialog)``;\n\nconst InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      target,\n      heading,\n      headingHidden = false,\n      children,\n      progress,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<InfoDialogProps>,\n    ref: InfoDialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEscape(() => {\n      onDismiss?.();\n    });\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (!progress) {\n        closeButtonRef.current?.focus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n      };\n    }, []);\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        target={target}\n        labelledbyId={headingId}\n        progress={progress}\n        ref={dialogRef}\n      >\n        <CardHeader\n          forwardedAs='div'\n          actions={\n            <Button\n              icon\n              variant='simple'\n              onClick={() => {\n                onDismiss();\n              }}\n              label={t('close')}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n              {heading}\n            </VisuallyHiddenText>\n          ) : (\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          )}\n        </CardHeader>\n\n        <CardContent>\n          {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement={children ? 'local' : 'block'}\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </CardContent>\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}
+{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      target,\n      heading: headingProp,\n      children,\n      progress: progressProp,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<InfoDialogProps>,\n    ref: InfoDialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEscape(() => {\n      onDismiss?.();\n    });\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (!progressProp) {\n        closeButtonRef.current?.focus();\n      }\n    }, [progressProp]);\n\n    useEffect(() => {\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n      };\n    }, []);\n\n    const heading = headingProp ? (\n      <Text id={headingId} variant='h2'>\n        {typeof headingProp === 'string' ? headingProp : headingProp.primary}\n      </Text>\n    ) : null;\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement={children ? 'local' : 'block'}\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <StyledDismissButton\n        icon\n        variant='simple'\n        onClick={() => {\n          onDismiss();\n        }}\n        label={t('close')}\n        ref={closeButtonRef}\n      >\n        <Icon name='times' />\n      </StyledDismissButton>\n    );\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        {...(typeof headingProp === 'string'\n          ? { labelledbyId: headingId }\n          : { ariaLabel: headingProp?.primary })}\n        arrow\n        target={target}\n        progress={progressProp}\n        ref={dialogRef}\n      >\n        {headingProp && heading && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            {typeof headingProp === 'string' ? (\n              heading\n            ) : (\n              <SummaryItem\n                primary={heading}\n                secondary={\n                  headingProp.secondary ? (\n                    <Text variant='secondary'>{headingProp.secondary}</Text>\n                  ) : undefined\n                }\n                visual={headingProp.visual}\n              />\n            )}\n            {dismissButton}\n          </Flex>\n        )}\n\n        <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledDialogContent}>\n          {!headingProp && dismissButton}\n          {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n          {progress}\n        </Flex>\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}

package/lib/components/Dialog/InfoDialog.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledDismissButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInfoDialog: import("styled-components").StyledComponent<import("react").FC<import("./Dialog.types").BaseDialogProps & {
+    labelledbyId?: string | undefined;
+    ariaLabel?: string | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=InfoDialog.styles.d.ts.map

package/lib/components/Dialog/InfoDialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,qMAAmB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;yGAS3B,CAAC"}

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

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import Button from '../Button';
+import Dialog from './Dialog';
+import { StyledDialogContent } from './Dialog.styles';
+export const StyledDismissButton = styled(Button) ``;
+export const StyledInfoDialog = styled(Dialog)(({ theme }) => {
+    return css `
+    /* When a header is not rendered(e.g. progress state) the button must positioned atop. */
+    ${StyledDialogContent} > ${StyledDismissButton} {
+      position: relative;
+      z-index: calc(${theme.base['z-index'].backdrop} + 1);
+      align-self: end;
+    }
+  `;
+});
+StyledInfoDialog.defaultProps = defaultThemeProp;
+//# sourceMappingURL=InfoDialog.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoDialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;;MAEN,mBAAmB,MAAM,mBAAmB;;sBAE5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\n\nimport Dialog from './Dialog';\nimport { StyledDialogContent } from './Dialog.styles';\n\nexport const StyledDismissButton = styled(Button)``;\n\nexport const StyledInfoDialog = styled(Dialog)(({ theme }) => {\n  return css`\n    /* When a header is not rendered(e.g. progress state) the button must positioned atop. */\n    ${StyledDialogContent} > ${StyledDismissButton} {\n      position: relative;\n      z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      align-self: end;\n    }\n  `;\n});\n\nStyledInfoDialog.defaultProps = defaultThemeProp;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.styles.js

@@ -230,7 +230,7 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
       .emoji-mart-emoji-native {
         /* stylelint-disable font-family-no-missing-generic-family-keyword */
         font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',
-          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cSpell:disable-line */
+          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cspell:disable-line */
 
         /* stylelint-enable font-family-no-missing-generic-family-keyword */
       }

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n  ({\n    showFooter,\n    theme: {\n      base: {\n        animation: { speed, timing },\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'font-family': fontFamily,\n        'font-weight': fontWeight,\n        palette,\n        shadow: { focus: focusShadow },\n        spacing,\n        'border-radius': borderRadius,\n        transparency\n      },\n      components: {\n        'search-input': { 'border-radius': searchInputRadius }\n      }\n    }\n  }) => {\n    const hoverColor = getHoverColors(palette['primary-background']).background;\n    const secondaryTextColor = transparentize(\n      1 - transparency['transparent-2'],\n      palette['foreground-color']\n    );\n\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border-radius: inherit;\n\n      /* stylelint-disable no-descending-specificity */\n\n      /* stylelint-disable no-duplicate-selectors */\n\n      /* stylelint-disable selector-max-class */\n\n      .emoji-mart,\n      .emoji-mart * {\n        box-sizing: border-box;\n        line-height: 1.15;\n      }\n\n      .emoji-mart {\n        font-family: ${fontFamily};\n        font-size: ${fontSizes.l};\n        display: inline-block;\n        color: ${palette['foreground-color']};\n        border: 0.0625rem solid ${palette['border-line']};\n        border-radius: inherit;\n        background: ${palette['primary-background']};\n      }\n\n      .emoji-mart .emoji-mart-emoji {\n        padding: calc(0.75 * ${spacing});\n      }\n\n      .emoji-mart-bar {\n        border: 0 solid ${palette['border-line']};\n      }\n      .emoji-mart-bar:first-child {\n        border-bottom-width: 0.0625rem;\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n      .emoji-mart-bar:last-child {\n        border-top-width: 0.0625rem;\n        border-bottom-left-radius: inherit;\n        border-bottom-right-radius: inherit;\n        ${!showFooter &&\n        css`\n          display: none;\n        `}\n      }\n\n      .emoji-mart-anchors {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        padding: 0 calc(0.75 * ${spacing});\n        line-height: 0;\n      }\n\n      .emoji-mart-anchor {\n        position: relative;\n        display: block;\n        flex: 1 1 auto;\n        color: ${secondaryTextColor};\n        text-align: center;\n        padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n        overflow: hidden;\n        transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n        margin: 0;\n        box-shadow: none;\n        background: none;\n        border: none;\n      }\n      .emoji-mart-anchor:focus {\n        outline: 0;\n      }\n      .emoji-mart-anchor:hover,\n      .emoji-mart-anchor:focus,\n      .emoji-mart-anchor-selected {\n        color: ${palette.interactive};\n      }\n\n      .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n        bottom: 0;\n      }\n\n      .emoji-mart-anchor-bar {\n        position: absolute;\n        bottom: calc(-0.375 * ${spacing});\n        left: 0;\n        width: 100%;\n        height: calc(0.375 * ${spacing});\n        background-color: ${palette.interactive};\n      }\n\n      .emoji-mart-anchors i {\n        display: inline-block;\n        width: 100%;\n        max-width: calc(2.75 * ${spacing});\n      }\n\n      .emoji-mart-anchors svg,\n      .emoji-mart-anchors img {\n        fill: currentColor;\n        height: calc(2.25 * ${spacing});\n        width: calc(2.25 * ${spacing});\n      }\n\n      .emoji-mart-scroll {\n        overflow-y: scroll;\n        overflow-x: hidden;\n        height: 16.875rem;\n        padding: 0 calc(0.75 * ${spacing});\n        will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome */\n      }\n\n      .emoji-mart-search {\n        padding: ${spacing};\n        position: relative;\n      }\n\n      .emoji-mart-search input {\n        font-size: ${fontSizes.l};\n        color: ${palette['foreground-color']};\n        display: block;\n        width: 100%;\n        padding: calc(0.625 * ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n          calc(1.25 * ${spacing});\n        border-radius: calc(${borderRadius} * ${searchInputRadius});\n        border: 0.0625rem solid ${palette['border-line']};\n        background-color: ${palette['primary-background']};\n        outline: 0;\n      }\n\n      .emoji-mart-search input:hover {\n        border-color: ${palette['foreground-color']};\n      }\n\n      .emoji-mart-search input,\n      .emoji-mart-search input::-webkit-search-decoration,\n      .emoji-mart-search input::-webkit-search-cancel-button,\n      .emoji-mart-search input::-webkit-search-results-button,\n      .emoji-mart-search input::-webkit-search-results-decoration {\n        /*\n          remove webkit/blink styles for <input type=\"search\">\n          via https://stackoverflow.com/a/9422689\n        */\n        -webkit-appearance: none;\n      }\n\n      .emoji-mart-search-icon {\n        position: absolute;\n        top: calc(1.875 * ${spacing});\n        right: calc(2.25 * ${spacing});\n        z-index: 2;\n        border: none;\n        background: none;\n      }\n\n      .emoji-mart-search-icon svg {\n        fill: ${secondaryTextColor};\n      }\n\n      .emoji-mart-category .emoji-mart-emoji span {\n        z-index: 1;\n        position: relative;\n        text-align: center;\n        cursor: default;\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:hover::before {\n        z-index: 0;\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ${hoverColor};\n        border-radius: 100%;\n      }\n\n      .emoji-mart-category-label {\n        z-index: 2;\n        top: 0;\n\n        /* stylelint-disable declaration-block-no-duplicate-properties */\n        position: relative;\n        position: -webkit-sticky;\n        position: sticky;\n\n        /* stylelint-enable declaration-block-no-duplicate-properties */\n      }\n\n      .emoji-mart-category-label span {\n        display: block;\n        width: 100%;\n        font-weight: ${fontWeight['semi-bold']};\n        padding: ${spacing} calc(0.25 * ${spacing});\n        background-color: ${transparentize(0.05, palette['primary-background'])};\n      }\n\n      .emoji-mart-category-list {\n        margin: 0;\n        padding: calc(0.375 * ${spacing}) 0;\n      }\n\n      .emoji-mart-category-list li {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: inline-block;\n      }\n\n      .emoji-mart-emoji {\n        position: relative;\n        display: inline-block;\n        font-size: 0;\n        margin: 0;\n        padding: 0;\n        border: none;\n        background: none;\n        box-shadow: none;\n      }\n\n      .emoji-mart-emoji-native {\n        /* stylelint-disable font-family-no-missing-generic-family-keyword */\n        font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cSpell:disable-line */\n\n        /* stylelint-enable font-family-no-missing-generic-family-keyword */\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:focus,\n      .emoji-mart-category .emoji-mart-emoji-native:focus,\n      .emoji-mart-skin:focus,\n      .emoji-mart-search input:focus {\n        outline: 0;\n        border-color: transparent;\n        box-shadow: ${focusShadow};\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:focus,\n      .emoji-mart-category .emoji-mart-emoji-native:focus {\n        border-radius: 100%;\n      }\n\n      .emoji-mart-no-results {\n        font-size: ${fontSizes.s};\n        text-align: center;\n        padding-top: 4.375rem;\n        color: ${secondaryTextColor};\n      }\n      .emoji-mart-no-results-img {\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n        width: 50%;\n      }\n      .emoji-mart-no-results .emoji-mart-category-label {\n        display: none;\n      }\n      .emoji-mart-no-results .emoji-mart-no-results-label {\n        margin-top: 0.2em;\n      }\n      .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n        content: none;\n      }\n\n      .emoji-mart-preview {\n        position: relative;\n        min-height: 2.5rem;\n        height: fit-content;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .emoji-mart-preview-emoji {\n        left: calc(1.5 * ${spacing});\n      }\n\n      .emoji-mart-preview-data {\n        left: calc(8.5 * ${spacing});\n        right: calc(1.5 * ${spacing});\n        word-break: break-all;\n        flex: 1;\n      }\n\n      .emoji-mart-preview-skins {\n        position: absolute;\n        right: calc(3.75 * ${spacing});\n        text-align: right;\n      }\n\n      .emoji-mart-preview-skins.custom {\n        right: calc(1.25 * ${spacing});\n        text-align: right;\n      }\n\n      .emoji-mart-preview-name {\n        font-size: ${fontSizes.s};\n      }\n\n      .emoji-mart-preview-shortname {\n        font-size: ${fontSizes.xxs};\n        color: ${secondaryTextColor};\n      }\n      .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n      .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n      .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n        margin-left: 0.5em;\n      }\n\n      .emoji-mart-preview-emoticon {\n        font-size: ${fontSizes.xxs};\n        color: ${secondaryTextColor};\n      }\n\n      .emoji-mart-title span {\n        display: inline-block;\n        vertical-align: middle;\n      }\n\n      .emoji-mart-title .emoji-mart-emoji {\n        padding: 0;\n      }\n\n      .emoji-mart-title-label {\n        color: ${secondaryTextColor};\n        font-size: ${fontSizes.xxl};\n        font-weight: ${fontWeight.normal};\n      }\n\n      .emoji-mart-skin-swatches {\n        font-size: 0;\n        padding: calc(0.25 * ${spacing}) 0;\n        border: 0.0625rem solid ${palette['border-line']};\n        border-radius: calc(1.5 * ${spacing});\n        background-color: ${palette['secondary-background']};\n      }\n\n      .emoji-mart-skin-swatches.custom {\n        font-size: 0;\n        border: none;\n        background-color: ${palette['secondary-background']};\n      }\n\n      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n        width: calc(2 * ${spacing});\n        padding: 0 calc(0.25 * ${spacing});\n      }\n\n      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      .emoji-mart-skin-swatch {\n        display: inline-block;\n        width: 0;\n        vertical-align: middle;\n        transition-property: width, padding;\n        transition-duration: calc(0.5 * ${speed});\n        transition-timing-function: ${timing['ease-out']};\n      }\n\n      .emoji-mart-skin-swatch:nth-child(1) {\n        transition-delay: 0s;\n      }\n      .emoji-mart-skin-swatch:nth-child(2) {\n        transition-delay: 0.03s;\n      }\n      .emoji-mart-skin-swatch:nth-child(3) {\n        transition-delay: 0.06s;\n      }\n      .emoji-mart-skin-swatch:nth-child(4) {\n        transition-delay: 0.09s;\n      }\n      .emoji-mart-skin-swatch:nth-child(5) {\n        transition-delay: 0.12s;\n      }\n      .emoji-mart-skin-swatch:nth-child(6) {\n        transition-delay: 0.15s;\n      }\n\n      .emoji-mart-skin-swatch.selected {\n        position: relative;\n        width: calc(2 * ${spacing});\n        padding: 0 calc(0.25 * ${spacing});\n      }\n\n      .emoji-mart-skin-swatch.selected::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: calc(0.5 * ${spacing});\n        height: calc(0.5 * ${spacing});\n        margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n        background-color: ${palette['primary-background']};\n        border-radius: 100%;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity ${speed} ${timing['ease-out']};\n      }\n\n      .emoji-mart-skin-swatch.custom {\n        display: inline-block;\n        width: 0;\n        height: 2.375rem;\n        overflow: hidden;\n        vertical-align: middle;\n        transition-property: width, height;\n        transition-duration: calc(0.5 * ${speed});\n        transition-timing-function: ${timing['ease-out']};\n        cursor: default;\n      }\n\n      .emoji-mart-skin-swatch.custom.selected {\n        position: relative;\n        width: 2.25rem;\n        height: 2.375rem;\n        padding: 0 calc(0.25 * ${spacing}) 0 0;\n      }\n\n      .emoji-mart-skin-swatch.custom.selected::after {\n        content: '';\n        width: 0;\n        height: 0;\n      }\n\n      .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n        background-color: ${palette['primary-background']};\n        border-radius: 10%;\n      }\n\n      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n        width: 2.25rem;\n        height: 2.375rem;\n        padding: 0 calc(0.25 * ${spacing}) 0 0;\n      }\n\n      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      .emoji-mart-skin-text.opened {\n        display: inline-block;\n        vertical-align: middle;\n        text-align: left;\n        color: ${secondaryTextColor};\n        font-size: ${fontSizes.xxs};\n        padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n        width: 6rem;\n        height: 2.5rem;\n        border-radius: 10%;\n        background-color: ${palette['primary-background']};\n      }\n\n      .emoji-mart-skin {\n        display: inline-block;\n        width: 100%;\n        padding-top: 100%;\n        max-width: calc(1.5 * ${spacing});\n        border-radius: 100%;\n      }\n\n      .emoji-mart-skin-tone-1 {\n        background-color: #ffc93a;\n      }\n      .emoji-mart-skin-tone-2 {\n        background-color: #fadcbc;\n      }\n      .emoji-mart-skin-tone-3 {\n        background-color: #e0bb95;\n      }\n      .emoji-mart-skin-tone-4 {\n        background-color: #bf8f68;\n      }\n      .emoji-mart-skin-tone-5 {\n        background-color: #9b643d;\n      }\n      .emoji-mart-skin-tone-6 {\n        background-color: #594539;\n      }\n\n      /* For screen readers only */\n      .emoji-mart-sr-only {\n        ${hideVisually}\n      }\n\n      /*\n        https://github.com/missive/emoji-mart/issues/319\n        https://github.com/missive/emoji-mart/pull/442\n      */\n      .emoji-mart-emoji-native {\n        height: var(--emoji-size);\n        width: var(--emoji-size);\n        position: relative;\n        display: inline-block;\n        box-sizing: content-box;\n        vertical-align: bottom;\n      }\n\n      .emoji-mart-emoji-native > span {\n        position: absolute !important;\n        top: 50%;\n        left: 50%;\n        height: initial !important;\n        width: initial !important;\n        transform: translate(-50%, -50%);\n      }\n    `;\n  }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}
+{"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n  ({\n    showFooter,\n    theme: {\n      base: {\n        animation: { speed, timing },\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'font-family': fontFamily,\n        'font-weight': fontWeight,\n        palette,\n        shadow: { focus: focusShadow },\n        spacing,\n        'border-radius': borderRadius,\n        transparency\n      },\n      components: {\n        'search-input': { 'border-radius': searchInputRadius }\n      }\n    }\n  }) => {\n    const hoverColor = getHoverColors(palette['primary-background']).background;\n    const secondaryTextColor = transparentize(\n      1 - transparency['transparent-2'],\n      palette['foreground-color']\n    );\n\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border-radius: inherit;\n\n      /* stylelint-disable no-descending-specificity */\n\n      /* stylelint-disable no-duplicate-selectors */\n\n      /* stylelint-disable selector-max-class */\n\n      .emoji-mart,\n      .emoji-mart * {\n        box-sizing: border-box;\n        line-height: 1.15;\n      }\n\n      .emoji-mart {\n        font-family: ${fontFamily};\n        font-size: ${fontSizes.l};\n        display: inline-block;\n        color: ${palette['foreground-color']};\n        border: 0.0625rem solid ${palette['border-line']};\n        border-radius: inherit;\n        background: ${palette['primary-background']};\n      }\n\n      .emoji-mart .emoji-mart-emoji {\n        padding: calc(0.75 * ${spacing});\n      }\n\n      .emoji-mart-bar {\n        border: 0 solid ${palette['border-line']};\n      }\n      .emoji-mart-bar:first-child {\n        border-bottom-width: 0.0625rem;\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n      .emoji-mart-bar:last-child {\n        border-top-width: 0.0625rem;\n        border-bottom-left-radius: inherit;\n        border-bottom-right-radius: inherit;\n        ${!showFooter &&\n        css`\n          display: none;\n        `}\n      }\n\n      .emoji-mart-anchors {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        padding: 0 calc(0.75 * ${spacing});\n        line-height: 0;\n      }\n\n      .emoji-mart-anchor {\n        position: relative;\n        display: block;\n        flex: 1 1 auto;\n        color: ${secondaryTextColor};\n        text-align: center;\n        padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n        overflow: hidden;\n        transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n        margin: 0;\n        box-shadow: none;\n        background: none;\n        border: none;\n      }\n      .emoji-mart-anchor:focus {\n        outline: 0;\n      }\n      .emoji-mart-anchor:hover,\n      .emoji-mart-anchor:focus,\n      .emoji-mart-anchor-selected {\n        color: ${palette.interactive};\n      }\n\n      .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n        bottom: 0;\n      }\n\n      .emoji-mart-anchor-bar {\n        position: absolute;\n        bottom: calc(-0.375 * ${spacing});\n        left: 0;\n        width: 100%;\n        height: calc(0.375 * ${spacing});\n        background-color: ${palette.interactive};\n      }\n\n      .emoji-mart-anchors i {\n        display: inline-block;\n        width: 100%;\n        max-width: calc(2.75 * ${spacing});\n      }\n\n      .emoji-mart-anchors svg,\n      .emoji-mart-anchors img {\n        fill: currentColor;\n        height: calc(2.25 * ${spacing});\n        width: calc(2.25 * ${spacing});\n      }\n\n      .emoji-mart-scroll {\n        overflow-y: scroll;\n        overflow-x: hidden;\n        height: 16.875rem;\n        padding: 0 calc(0.75 * ${spacing});\n        will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome */\n      }\n\n      .emoji-mart-search {\n        padding: ${spacing};\n        position: relative;\n      }\n\n      .emoji-mart-search input {\n        font-size: ${fontSizes.l};\n        color: ${palette['foreground-color']};\n        display: block;\n        width: 100%;\n        padding: calc(0.625 * ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n          calc(1.25 * ${spacing});\n        border-radius: calc(${borderRadius} * ${searchInputRadius});\n        border: 0.0625rem solid ${palette['border-line']};\n        background-color: ${palette['primary-background']};\n        outline: 0;\n      }\n\n      .emoji-mart-search input:hover {\n        border-color: ${palette['foreground-color']};\n      }\n\n      .emoji-mart-search input,\n      .emoji-mart-search input::-webkit-search-decoration,\n      .emoji-mart-search input::-webkit-search-cancel-button,\n      .emoji-mart-search input::-webkit-search-results-button,\n      .emoji-mart-search input::-webkit-search-results-decoration {\n        /*\n          remove webkit/blink styles for <input type=\"search\">\n          via https://stackoverflow.com/a/9422689\n        */\n        -webkit-appearance: none;\n      }\n\n      .emoji-mart-search-icon {\n        position: absolute;\n        top: calc(1.875 * ${spacing});\n        right: calc(2.25 * ${spacing});\n        z-index: 2;\n        border: none;\n        background: none;\n      }\n\n      .emoji-mart-search-icon svg {\n        fill: ${secondaryTextColor};\n      }\n\n      .emoji-mart-category .emoji-mart-emoji span {\n        z-index: 1;\n        position: relative;\n        text-align: center;\n        cursor: default;\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:hover::before {\n        z-index: 0;\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: ${hoverColor};\n        border-radius: 100%;\n      }\n\n      .emoji-mart-category-label {\n        z-index: 2;\n        top: 0;\n\n        /* stylelint-disable declaration-block-no-duplicate-properties */\n        position: relative;\n        position: -webkit-sticky;\n        position: sticky;\n\n        /* stylelint-enable declaration-block-no-duplicate-properties */\n      }\n\n      .emoji-mart-category-label span {\n        display: block;\n        width: 100%;\n        font-weight: ${fontWeight['semi-bold']};\n        padding: ${spacing} calc(0.25 * ${spacing});\n        background-color: ${transparentize(0.05, palette['primary-background'])};\n      }\n\n      .emoji-mart-category-list {\n        margin: 0;\n        padding: calc(0.375 * ${spacing}) 0;\n      }\n\n      .emoji-mart-category-list li {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: inline-block;\n      }\n\n      .emoji-mart-emoji {\n        position: relative;\n        display: inline-block;\n        font-size: 0;\n        margin: 0;\n        padding: 0;\n        border: none;\n        background: none;\n        box-shadow: none;\n      }\n\n      .emoji-mart-emoji-native {\n        /* stylelint-disable font-family-no-missing-generic-family-keyword */\n        font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cspell:disable-line */\n\n        /* stylelint-enable font-family-no-missing-generic-family-keyword */\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:focus,\n      .emoji-mart-category .emoji-mart-emoji-native:focus,\n      .emoji-mart-skin:focus,\n      .emoji-mart-search input:focus {\n        outline: 0;\n        border-color: transparent;\n        box-shadow: ${focusShadow};\n      }\n\n      .emoji-mart-category .emoji-mart-emoji:focus,\n      .emoji-mart-category .emoji-mart-emoji-native:focus {\n        border-radius: 100%;\n      }\n\n      .emoji-mart-no-results {\n        font-size: ${fontSizes.s};\n        text-align: center;\n        padding-top: 4.375rem;\n        color: ${secondaryTextColor};\n      }\n      .emoji-mart-no-results-img {\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n        width: 50%;\n      }\n      .emoji-mart-no-results .emoji-mart-category-label {\n        display: none;\n      }\n      .emoji-mart-no-results .emoji-mart-no-results-label {\n        margin-top: 0.2em;\n      }\n      .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n        content: none;\n      }\n\n      .emoji-mart-preview {\n        position: relative;\n        min-height: 2.5rem;\n        height: fit-content;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .emoji-mart-preview-emoji {\n        left: calc(1.5 * ${spacing});\n      }\n\n      .emoji-mart-preview-data {\n        left: calc(8.5 * ${spacing});\n        right: calc(1.5 * ${spacing});\n        word-break: break-all;\n        flex: 1;\n      }\n\n      .emoji-mart-preview-skins {\n        position: absolute;\n        right: calc(3.75 * ${spacing});\n        text-align: right;\n      }\n\n      .emoji-mart-preview-skins.custom {\n        right: calc(1.25 * ${spacing});\n        text-align: right;\n      }\n\n      .emoji-mart-preview-name {\n        font-size: ${fontSizes.s};\n      }\n\n      .emoji-mart-preview-shortname {\n        font-size: ${fontSizes.xxs};\n        color: ${secondaryTextColor};\n      }\n      .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n      .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n      .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n        margin-left: 0.5em;\n      }\n\n      .emoji-mart-preview-emoticon {\n        font-size: ${fontSizes.xxs};\n        color: ${secondaryTextColor};\n      }\n\n      .emoji-mart-title span {\n        display: inline-block;\n        vertical-align: middle;\n      }\n\n      .emoji-mart-title .emoji-mart-emoji {\n        padding: 0;\n      }\n\n      .emoji-mart-title-label {\n        color: ${secondaryTextColor};\n        font-size: ${fontSizes.xxl};\n        font-weight: ${fontWeight.normal};\n      }\n\n      .emoji-mart-skin-swatches {\n        font-size: 0;\n        padding: calc(0.25 * ${spacing}) 0;\n        border: 0.0625rem solid ${palette['border-line']};\n        border-radius: calc(1.5 * ${spacing});\n        background-color: ${palette['secondary-background']};\n      }\n\n      .emoji-mart-skin-swatches.custom {\n        font-size: 0;\n        border: none;\n        background-color: ${palette['secondary-background']};\n      }\n\n      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n        width: calc(2 * ${spacing});\n        padding: 0 calc(0.25 * ${spacing});\n      }\n\n      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      .emoji-mart-skin-swatch {\n        display: inline-block;\n        width: 0;\n        vertical-align: middle;\n        transition-property: width, padding;\n        transition-duration: calc(0.5 * ${speed});\n        transition-timing-function: ${timing['ease-out']};\n      }\n\n      .emoji-mart-skin-swatch:nth-child(1) {\n        transition-delay: 0s;\n      }\n      .emoji-mart-skin-swatch:nth-child(2) {\n        transition-delay: 0.03s;\n      }\n      .emoji-mart-skin-swatch:nth-child(3) {\n        transition-delay: 0.06s;\n      }\n      .emoji-mart-skin-swatch:nth-child(4) {\n        transition-delay: 0.09s;\n      }\n      .emoji-mart-skin-swatch:nth-child(5) {\n        transition-delay: 0.12s;\n      }\n      .emoji-mart-skin-swatch:nth-child(6) {\n        transition-delay: 0.15s;\n      }\n\n      .emoji-mart-skin-swatch.selected {\n        position: relative;\n        width: calc(2 * ${spacing});\n        padding: 0 calc(0.25 * ${spacing});\n      }\n\n      .emoji-mart-skin-swatch.selected::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: calc(0.5 * ${spacing});\n        height: calc(0.5 * ${spacing});\n        margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n        background-color: ${palette['primary-background']};\n        border-radius: 100%;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity ${speed} ${timing['ease-out']};\n      }\n\n      .emoji-mart-skin-swatch.custom {\n        display: inline-block;\n        width: 0;\n        height: 2.375rem;\n        overflow: hidden;\n        vertical-align: middle;\n        transition-property: width, height;\n        transition-duration: calc(0.5 * ${speed});\n        transition-timing-function: ${timing['ease-out']};\n        cursor: default;\n      }\n\n      .emoji-mart-skin-swatch.custom.selected {\n        position: relative;\n        width: 2.25rem;\n        height: 2.375rem;\n        padding: 0 calc(0.25 * ${spacing}) 0 0;\n      }\n\n      .emoji-mart-skin-swatch.custom.selected::after {\n        content: '';\n        width: 0;\n        height: 0;\n      }\n\n      .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n        background-color: ${palette['primary-background']};\n        border-radius: 10%;\n      }\n\n      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n        width: 2.25rem;\n        height: 2.375rem;\n        padding: 0 calc(0.25 * ${spacing}) 0 0;\n      }\n\n      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      .emoji-mart-skin-text.opened {\n        display: inline-block;\n        vertical-align: middle;\n        text-align: left;\n        color: ${secondaryTextColor};\n        font-size: ${fontSizes.xxs};\n        padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n        width: 6rem;\n        height: 2.5rem;\n        border-radius: 10%;\n        background-color: ${palette['primary-background']};\n      }\n\n      .emoji-mart-skin {\n        display: inline-block;\n        width: 100%;\n        padding-top: 100%;\n        max-width: calc(1.5 * ${spacing});\n        border-radius: 100%;\n      }\n\n      .emoji-mart-skin-tone-1 {\n        background-color: #ffc93a;\n      }\n      .emoji-mart-skin-tone-2 {\n        background-color: #fadcbc;\n      }\n      .emoji-mart-skin-tone-3 {\n        background-color: #e0bb95;\n      }\n      .emoji-mart-skin-tone-4 {\n        background-color: #bf8f68;\n      }\n      .emoji-mart-skin-tone-5 {\n        background-color: #9b643d;\n      }\n      .emoji-mart-skin-tone-6 {\n        background-color: #594539;\n      }\n\n      /* For screen readers only */\n      .emoji-mart-sr-only {\n        ${hideVisually}\n      }\n\n      /*\n        https://github.com/missive/emoji-mart/issues/319\n        https://github.com/missive/emoji-mart/pull/442\n      */\n      .emoji-mart-emoji-native {\n        height: var(--emoji-size);\n        width: var(--emoji-size);\n        position: relative;\n        display: inline-block;\n        box-sizing: content-box;\n        vertical-align: bottom;\n      }\n\n      .emoji-mart-emoji-native > span {\n        position: absolute !important;\n        top: 50%;\n        left: 50%;\n        height: initial !important;\n        width: initial !important;\n        transform: translate(-50%, -50%);\n      }\n    `;\n  }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}

package/lib/components/FieldValueList/FieldValueList.d.ts

@@ -2,14 +2,16 @@ import { ReactNode, FunctionComponent } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 export type FieldValueVariant = 'inline' | 'stacked';
 export interface FieldValueListItemProps extends TestIdProp {
-    id?: string;
     name: string;
     value?: ReactNode;
     variant?: FieldValueVariant;
 }
+export interface FieldValueListItem extends FieldValueListItemProps {
+    id?: string;
+}
 export interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** The set of field values to render in the list. */
-    fields: FieldValueListItemProps[];
+    fields: FieldValueListItem[];
     /**
      * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.
      * @default "inline"

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

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASlF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAuB/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,qCAKxB,uBAAuB,gBAsBzB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASlF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAuB/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,qCAKxB,uBAAuB,gBAsBzB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldValueList/FieldValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, Fragment, FunctionComponent, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\nexport interface FieldValueListItemProps extends TestIdProp {\n  id?: string;\n  name: string;\n  value?: ReactNode;\n  variant?: FieldValueVariant;\n}\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The set of field values to render in the list. */\n  fields: FieldValueListItemProps[];\n  /**\n   * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n   * @default \"inline\"\n   */\n  variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n  word-break: break-word;\n`;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n  return css`\n    width: 100%;\n\n    ${variant === 'value-comparison' &&\n    css`\n      dt {\n        width: 100%;\n      }\n      dd {\n        text-align: end;\n        padding-inline-start: calc(2 * ${theme.base.spacing});\n      }\n      ${StyledLabel} {\n        max-width: unset;\n      }\n      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        padding-bottom: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport const FieldValueItem = ({\n  testId,\n  name,\n  value,\n  variant = 'inline'\n}: FieldValueListItemProps) => {\n  const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n  const displayValue =\n    typeof value === 'string' ? <ShowMoreLess lines={3}>{value}</ShowMoreLess> : value;\n\n  const labelAndValue = (\n    <>\n      <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n        {name}\n      </StyledLabel>\n      <StyledFieldValue data-testid={testIds.value}>\n        {value ? displayValue : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledFieldValue>\n    </>\n  );\n\n  return variant === 'stacked' ? (\n    <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n  ) : (\n    <>{labelAndValue}</>\n  );\n};\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n  (\n    { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={fieldValueListRef}\n        container={{\n          cols:\n            ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n              ? '16ch minmax(0, 1fr)'\n              : 'minmax(0, 1fr)',\n          colGap: variant !== 'value-comparison' ? 2 : 0,\n          rowGap: variant !== 'value-comparison' ? 1 : 0.5\n        }}\n        as={StyledFieldValueList}\n        variant={variant}\n      >\n        {fields.map(({ id, name, value, variant: fieldVariant }) => {\n          return (\n            <FieldValueItem\n              name={name}\n              value={value}\n              variant={\n                (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n                  ? 'stacked'\n                  : 'inline'\n              }\n              key={id ?? name}\n            />\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport default FieldValueList;\n"]}
+{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FunctionComponent, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\nexport interface FieldValueListItemProps extends TestIdProp {\n  name: string;\n  value?: ReactNode;\n  variant?: FieldValueVariant;\n}\n\nexport interface FieldValueListItem extends FieldValueListItemProps {\n  id?: string;\n}\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The set of field values to render in the list. */\n  fields: FieldValueListItem[];\n  /**\n   * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n   * @default \"inline\"\n   */\n  variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n  word-break: break-word;\n`;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n  return css`\n    width: 100%;\n\n    ${variant === 'value-comparison' &&\n    css`\n      dt {\n        width: 100%;\n      }\n      dd {\n        text-align: end;\n        padding-inline-start: calc(2 * ${theme.base.spacing});\n      }\n      ${StyledLabel} {\n        max-width: unset;\n      }\n      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        padding-bottom: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport const FieldValueItem = ({\n  testId,\n  name,\n  value,\n  variant = 'inline'\n}: FieldValueListItemProps) => {\n  const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n  const displayValue =\n    typeof value === 'string' ? <ShowMoreLess lines={3}>{value}</ShowMoreLess> : value;\n\n  const labelAndValue = (\n    <>\n      <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n        {name}\n      </StyledLabel>\n      <StyledFieldValue data-testid={testIds.value}>\n        {value ? displayValue : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledFieldValue>\n    </>\n  );\n\n  return variant === 'stacked' ? (\n    <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n  ) : (\n    <>{labelAndValue}</>\n  );\n};\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n  (\n    { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={fieldValueListRef}\n        container={{\n          cols:\n            ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n              ? '16ch minmax(0, 1fr)'\n              : 'minmax(0, 1fr)',\n          colGap: variant !== 'value-comparison' ? 2 : 0,\n          rowGap: variant !== 'value-comparison' ? 1 : 0.5\n        }}\n        as={StyledFieldValueList}\n        variant={variant}\n      >\n        {fields.map(({ id, name, value, variant: fieldVariant }) => {\n          return (\n            <FieldValueItem\n              name={name}\n              value={value}\n              variant={\n                (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n                  ? 'stacked'\n                  : 'inline'\n              }\n              key={id ?? name}\n            />\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport default FieldValueList;\n"]}

package/lib/components/FieldValueList/FieldValueList.test-ids.d.ts

@@ -1,3 +1,3 @@
-export declare const getFieldValueListTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly []>;
-export declare const getFieldValueItemTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["name", "value"]>;
+export declare const getFieldValueListTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getFieldValueItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["name", "value"]>;
 //# sourceMappingURL=FieldValueList.test-ids.d.ts.map

package/lib/components/FieldValueList/FieldValueList.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,uFAAiD,CAAC;AAEvF,eAAO,MAAM,wBAAwB,sGAG1B,CAAC"}
+{"version":3,"file":"FieldValueList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,iFAAiD,CAAC;AAEvF,eAAO,MAAM,wBAAwB,gGAG1B,CAAC"}

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

@@ -1,4 +1,4 @@
 export { default, FieldValueItem } from './FieldValueList';
-export { FieldValueListProps, FieldValueListItemProps, StyledFieldValueListProps } from './FieldValueList';
+export { FieldValueListProps, FieldValueListItem, FieldValueListItemProps, StyledFieldValueListProps } from './FieldValueList';
 export { StyledFieldValueList, StyledFieldName, StyledFieldValue, StyledStackedFieldValue } from './FieldValueList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAM3D,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, FieldValueItem } from './FieldValueList';\nexport {\n  FieldValueListProps,\n  FieldValueListItemProps,\n  StyledFieldValueListProps\n} from './FieldValueList';\nexport {\n  StyledFieldValueList,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledStackedFieldValue\n} from './FieldValueList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO3D,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, FieldValueItem } from './FieldValueList';\nexport {\n  FieldValueListProps,\n  FieldValueListItem,\n  FieldValueListItemProps,\n  StyledFieldValueListProps\n} from './FieldValueList';\nexport {\n  StyledFieldValueList,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledStackedFieldValue\n} from './FieldValueList';\n"]}

package/lib/components/File/File.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getFileInputTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["control", "files"]>;
+export declare const getFileInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "files", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=File.test-ids.d.ts.map

package/lib/components/File/File.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"File.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/File/File.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yGAA6D,CAAC"}
+{"version":3,"file":"File.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/File/File.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,iLAIrB,CAAC"}