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

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":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,UAAU,EACV,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,aAAa,EAAE,UAAU,EACzB,OAAO,EACP,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACP,eAAe,EAAE,YAAY,EAC7B,YAAY,EACb,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,eAAe,EAAE,iBAAiB,EAAE,EACvD,EACF,EACF,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5E,MAAM,kBAAkB,GAAG,cAAc,CACvC,CAAC,GAAG,YAAY,CAAC,eAAe,CAAC,EACjC,OAAO,CAAC,kBAAkB,CAAC,CAC5B,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;uBAgBS,UAAU;qBACZ,SAAS,CAAC,CAAC;;iBAEf,OAAO,CAAC,kBAAkB,CAAC;kCACV,OAAO,CAAC,aAAa,CAAC;;sBAElC,OAAO,CAAC,oBAAoB,CAAC;;;;+BAIpB,OAAO;;;;0BAIZ,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;UAWtC,CAAC,UAAU;QACb,GAAG,CAAA;;SAEF;;;;;;;iCAOwB,OAAO;;;;;;;;iBAQvB,kBAAkB;;8BAEL,OAAO,gBAAgB,OAAO;;uCAErB,KAAK,KAAK,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;iBAYlD,OAAO,CAAC,WAAW;;;;;;;;;gCASJ,OAAO;;;+BAGR,OAAO;4BACV,OAAO,CAAC,WAAW;;;;;;iCAMd,OAAO;;;;;;8BAMV,OAAO;6BACR,OAAO;;;;;;;iCAOH,OAAO;;;;;mBAKrB,OAAO;;;;;qBAKL,SAAS,CAAC,CAAC;iBACf,OAAO,CAAC,kBAAkB,CAAC;;;gCAGZ,OAAO,kBAAkB,OAAO,iBAAiB,OAAO;wBAChE,OAAO;8BACD,YAAY,MAAM,iBAAiB;kCAC/B,OAAO,CAAC,aAAa,CAAC;4BAC5B,OAAO,CAAC,oBAAoB,CAAC;;;;;wBAKjC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;4BAiBvB,OAAO;6BACN,OAAO;;;;;;;gBAOpB,kBAAkB;;;;;;;;;;;;;;;;;;4BAkBN,UAAU;;;;;;;;;;;;;;;;;;;uBAmBf,UAAU,CAAC,WAAW,CAAC;mBAC3B,OAAO,gBAAgB,OAAO;4BACrB,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;;;;;gCAK/C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCjB,WAAW;;;;;;;;;qBASZ,SAAS,CAAC,CAAC;;;iBAGf,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4BR,OAAO;;;;2BAIP,OAAO;4BACN,OAAO;;;;;;;6BAON,OAAO;;;;;6BAKP,OAAO;;;;;qBAKf,SAAS,CAAC,CAAC;;;;qBAIX,SAAS,CAAC,GAAG;iBACjB,kBAAkB;;;;;;;;;qBASd,SAAS,CAAC,GAAG;iBACjB,kBAAkB;;;;;;;;;;;;;iBAalB,kBAAkB;qBACd,SAAS,CAAC,GAAG;uBACX,UAAU,CAAC,MAAM;;;;;+BAKT,OAAO;kCACJ,OAAO,CAAC,aAAa,CAAC;oCACpB,OAAO;4BACf,OAAO,CAAC,sBAAsB,CAAC;;;;;;4BAM/B,OAAO,CAAC,sBAAsB,CAAC;;;;0BAIjC,OAAO;iCACA,OAAO;;;;mBAIrB,YAAY,CAAC,eAAe,CAAC;;;;;;;;0CAQN,KAAK;sCACT,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;0BAwB9B,OAAO;iCACA,OAAO;;;;;;;;4BAQZ,OAAO;6BACN,OAAO;+BACL,OAAO,sBAAsB,OAAO;4BACvC,OAAO,CAAC,oBAAoB,CAAC;;;;8BAI3B,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;0CAUf,KAAK;sCACT,MAAM,CAAC,UAAU,CAAC;;;;;;;;iCAQvB,OAAO;;;;;;;;;;4BAUZ,OAAO,CAAC,oBAAoB,CAAC;;;;;;;iCAOxB,OAAO;;;;mBAIrB,YAAY,CAAC,eAAe,CAAC;;;;;;;iBAO/B,kBAAkB;qBACd,SAAS,CAAC,GAAG;gCACF,OAAO,iBAAiB,OAAO;;;;4BAInC,OAAO,CAAC,oBAAoB,CAAC;;;;;;;gCAOzB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;UAyB7B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;KAwBjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","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/FieldGroup/FieldGroup.js

@@ -85,7 +85,7 @@ const FieldGroup = forwardRef(({ children, description, name, additionalInfo, ac
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(Grid, { container: { gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    const descAndChildren = (_jsxs(Grid, { container: { cols: 'minmax(0, 1fr)', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
     return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, additionalInfo: additionalInfo, children: collapsible ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                         setOpen(cur => !cur);
                     }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /**\n   * Select the heading tag for header\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n  omitProps('open')\n)(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${open &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      headingTag,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n            {collapsible ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /**\n   * Select the heading tag for header\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n  omitProps('open')\n)(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${open &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      headingTag,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n            {collapsible ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

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

@@ -1,15 +1,17 @@
 import { ReactNode, FunctionComponent } from 'react';
-import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+import { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 export type FieldValueVariant = 'inline' | 'stacked';
-export interface FieldValueListItemProps {
-    id?: string;
+export interface FieldValueListItemProps extends TestIdProp {
     name: string;
     value?: ReactNode;
     variant?: FieldValueVariant;
 }
-export interface FieldValueListProps extends BaseProps, NoChildrenProp {
+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"
@@ -21,7 +23,7 @@ export declare const StyledFieldValue: import("styled-components").StyledCompone
 export type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;
 export declare const StyledFieldValueList: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, StyledFieldValueListProps, never>;
 export declare const StyledStackedFieldValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldValueItem: ({ name, value, variant }: FieldValueListItemProps) => JSX.Element;
+export declare const FieldValueItem: ({ testId, name, value, variant }: FieldValueListItemProps) => JSX.Element;
 declare const FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps>;
 export default FieldValueList;
 //# sourceMappingURL=FieldValueList.d.ts.map

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,MAAM,aAAa,CAAC;AAOtE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,uBAAuB;IACtC,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;IACpE,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,6BAAyC,uBAAuB,gBAa1F,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyCzE,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

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Grid from '../Grid';
 import { StyledLabel } from '../Label';
-import { useBreakpoint, useConsolidatedRef } from '../../hooks';
+import { useBreakpoint, useConsolidatedRef, useTestIds } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import ShowMoreLess from '../ShowMoreLess';
+import { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';
 export const StyledFieldName = styled.dt `
   word-break: break-word;
 `;
@@ -38,19 +39,20 @@ export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
 });
 StyledFieldValueList.defaultProps = defaultThemeProp;
 export const StyledStackedFieldValue = styled.div ``;
-export const FieldValueItem = ({ name, value, variant = 'inline' }) => {
-    const Wrapper = variant === 'stacked' ? StyledStackedFieldValue : Fragment;
+export const FieldValueItem = ({ testId, name, value, variant = 'inline' }) => {
+    const testIds = useTestIds(testId, getFieldValueItemTestIds);
     const displayValue = typeof value === 'string' ? _jsx(ShowMoreLess, { lines: 3, children: value }) : value;
-    return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { children: value ? displayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) })] }));
+    const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { "data-testid": testIds.value, children: value ? displayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) })] }));
+    return variant === 'stacked' ? (_jsx(StyledStackedFieldValue, { "data-testid": testIds.root, children: labelAndValue })) : (_jsx(_Fragment, { children: labelAndValue }));
 };
-const FieldValueList = forwardRef((props, ref) => {
-    const { fields, variant = 'inline', ...restProps } = props;
+const FieldValueList = forwardRef(({ testId, fields, variant = 'inline', ...restProps }, ref) => {
+    const testIds = useTestIds(testId, getFieldValueListTestIds);
     const fieldValueListRef = useConsolidatedRef(ref);
     const isXSContentWidthOrAbove = useBreakpoint('xs', {
         breakpointRef: fieldValueListRef,
         themeProp: 'content-width'
     });
-    return (_jsx(Grid, { ...restProps, ref: fieldValueListRef, container: {
+    return (_jsx(Grid, { "data-testid": testIds.root, ...restProps, ref: fieldValueListRef, container: {
             cols: ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove
                 ? '16ch minmax(0, 1fr)'
                 : 'minmax(0, 1fr)',

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 } from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\nexport interface FieldValueListItemProps {\n  id?: string;\n  name: string;\n  value?: ReactNode;\n  variant?: FieldValueVariant;\n}\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp {\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 = ({ name, value, variant = 'inline' }: FieldValueListItemProps) => {\n  const Wrapper = variant === 'stacked' ? StyledStackedFieldValue : Fragment;\n  const displayValue =\n    typeof value === 'string' ? <ShowMoreLess lines={3}>{value}</ShowMoreLess> : value;\n\n  return (\n    <Wrapper>\n      <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n      <StyledFieldValue>\n        {value ? displayValue : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledFieldValue>\n    </Wrapper>\n  );\n};\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n  (props: FieldValueListProps, ref: Ref<HTMLDivElement>) => {\n    const { fields, variant = 'inline', ...restProps } = props;\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    return (\n      <Grid\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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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/FieldValueList.test-ids.js

@@ -0,0 +1,7 @@
+import { createTestIds } from '../../utils';
+export const getFieldValueListTestIds = createTestIds('field-value-list', []);
+export const getFieldValueItemTestIds = createTestIds('field-value-item', [
+    'name',
+    'value'
+]);
+//# sourceMappingURL=FieldValueList.test-ids.js.map

package/lib/components/FieldValueList/FieldValueList.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.test-ids.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,kBAAkB,EAAE,EAAW,CAAC,CAAC;AAEvF,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,kBAAkB,EAAE;IACxE,MAAM;IACN,OAAO;CACC,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getFieldValueListTestIds = createTestIds('field-value-list', [] as const);\n\nexport const getFieldValueItemTestIds = createTestIds('field-value-item', [\n  'name',\n  'value'\n] as const);\n"]}