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

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

@@ -0,0 +1,32 @@
+import { FunctionComponent, Ref, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { BaseProps, ForwardProps } from '../../types';
+import { PopoverProps } from '../Popover';
+export interface DialogProps extends BaseProps {
+    target: HTMLElement | null;
+    placement?: PopoverProps['placement'];
+    children: PopoverProps['children'];
+    heading: string;
+    headingHidden?: boolean;
+    onSubmit?: (arg: {
+        close: () => void;
+    }) => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    loading?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledDialog: import("styled-components").StyledComponent<"dialog", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogTitle: import("styled-components").StyledComponent<FunctionComponent<import("../Text").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const useDialog: () => {
+    target: HTMLElement | null;
+    loading: boolean;
+    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    events: {
+        onMouseDown: (e: ReactMouseEvent) => void;
+        onKeyDown: (e: ReactKeyboardEvent) => void;
+    };
+    setTargetWithEvent: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
+};
+declare const Dialog: FunctionComponent<DialogProps & ForwardProps>;
+export default Dialog;
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,4GAgBxB,CAAC;AAIF,eAAO,MAAM,iBAAiB,iKAsB7B,CAAC;AAIF,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgKzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, usePrevious, useUID } from '../../hooks';
+import { defaultThemeProp } from '../../theme';
+import { getFocusables } from '../../utils';
+import Button from '../Button';
+import { CardContent, CardFooter, CardHeader } from '../Card';
+import Icon from '../Icon';
+import Popover from '../Popover';
+import Progress from '../Progress';
+import Text from '../Text';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+export const StyledDialog = styled.dialog(({ theme: { base: { 'content-width': contentWidth, palette: { 'foreground-color': foregroundColor } } } }) => {
+    return css `
+      border: none;
+      min-width: ${contentWidth.sm};
+      max-width: ${contentWidth.lg};
+      color: ${foregroundColor};
+    `;
+});
+StyledDialog.defaultProps = defaultThemeProp;
+export const StyledDialogTitle = styled(Text)(({ theme: { base: { shadow, 'border-radius': borderRadius } } }) => {
+    return css `
+      position: relative;
+      ::after {
+        content: '';
+        border-radius: ${borderRadius};
+        position: absolute;
+        inset: -0.25rem;
+      }
+      :focus-visible {
+        outline: none;
+        ::after {
+          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};
+        }
+      }
+    `;
+});
+StyledDialogTitle.defaultProps = defaultThemeProp;
+export const useDialog = () => {
+    const [target, setTarget] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const setTargetWithEvent = (e) => {
+        if (e.target instanceof HTMLElement) {
+            setTarget(e.target);
+        }
+    };
+    return {
+        target,
+        loading,
+        setLoading,
+        events: {
+            onMouseDown: (e) => {
+                setTargetWithEvent(e);
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    setTargetWithEvent(e);
+                }
+            }
+        },
+        setTargetWithEvent
+    };
+};
+const Dialog = forwardRef(({ target, placement, heading, headingHidden = false, onSubmit, onClose, onOpen, loading, children, ...restProps }, ref) => {
+    const t = useI18n();
+    const headingId = useUID();
+    const [popoverEl, setPopoverEl] = useElement();
+    const popoverRef = useConsolidatedRef(ref, setPopoverEl);
+    const headingRef = useRef(null);
+    const [currentTarget, setCurrentTarget] = useState(() => target);
+    const [show, setShow] = useState(false);
+    const skipChangeShow = useRef(false);
+    const prevTarget = usePrevious(target);
+    useEscape(() => {
+        if (show) {
+            setShow(false);
+        }
+    }, undefined, [show, setShow]);
+    useOuterEvent('mousedown', [target, popoverEl], () => {
+        if (target && popoverEl && show) {
+            setShow(false);
+            onClose?.();
+        }
+    });
+    useFocusTrap(popoverRef);
+    useEffect(() => {
+        if (!show) {
+            currentTarget?.focus();
+        }
+    }, [show]);
+    useEffect(() => {
+        if (show && popoverEl) {
+            if (headingRef.current) {
+                headingRef.current.focus();
+            }
+            else {
+                const focusables = getFocusables(popoverRef);
+                focusables[0]?.focus();
+            }
+        }
+    }, [show, popoverEl]);
+    useLayoutEffect(() => {
+        const onTargetClick = (e) => {
+            setCurrentTarget(prev => (e.target ? e.target : prev));
+            if (!skipChangeShow.current) {
+                setShow(prev => !prev);
+            }
+            else {
+                skipChangeShow.current = false;
+            }
+        };
+        if (target instanceof HTMLElement) {
+            target.addEventListener('click', onTargetClick);
+        }
+        return () => {
+            if (target instanceof HTMLElement) {
+                target.removeEventListener('click', onTargetClick);
+            }
+        };
+    }, [target]);
+    useEffect(() => {
+        if (show) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
+    }, [show]);
+    useEffect(() => {
+        /* If our target is changing and the popover is already open we will want
+        to skip the next change. The next show change would come from a click on the new button,
+        the popover should stay open. */
+        if (target !== prevTarget && show) {
+            skipChangeShow.current = true;
+        }
+    }, [target, show]);
+    const onTitleKeyDown = (e) => {
+        const focusables = getFocusables(popoverRef);
+        if (e.shiftKey && e.key === 'Tab') {
+            e.preventDefault();
+            focusables[focusables.length - 1].focus();
+        }
+    };
+    const progress = loading ? _jsx(Progress, { placement: 'local' }) : null;
+    return (_jsxs(Popover, { ...restProps, as: StyledDialog, ref: popoverRef, target: currentTarget, placement: placement, show: show, open: show, "aria-labelledby": headingId, children: [_jsx(CardHeader, { actions: !onSubmit ? (_jsx(Button, { icon: true, variant: 'simple', onClick: () => setShow(false), "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) })) : undefined, children: headingHidden ? (_jsx(VisuallyHiddenText, { id: headingId, children: heading })) : (_jsx(StyledDialogTitle, { variant: 'h2', tabIndex: -1, ref: headingRef, onKeyDown: onTitleKeyDown, id: headingId, children: heading })) }), _jsxs(CardContent, { children: [children, progress] }), onSubmit && (_jsxs(CardFooter, { justify: 'between', children: [_jsx(Button, { variant: 'secondary', onClick: () => setShow(false), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit({ close: () => setShow(false) }), disabled: loading, children: t('submit') })] }))] }));
+});
+export default Dialog;
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  usePrevious,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n  target: HTMLElement | null;\n  placement?: PopoverProps['placement'];\n  children: PopoverProps['children'];\n  heading: string;\n  headingHidden?: boolean;\n  onSubmit?: (arg: { close: () => void }) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledDialog = styled.dialog(\n  ({\n    theme: {\n      base: {\n        'content-width': contentWidth,\n        palette: { 'foreground-color': foregroundColor }\n      }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\n      color: ${foregroundColor};\n    `;\n  }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nexport const StyledDialogTitle = styled(Text)(\n  ({\n    theme: {\n      base: { shadow, 'border-radius': borderRadius }\n    }\n  }) => {\n    return css`\n      position: relative;\n      ::after {\n        content: '';\n        border-radius: ${borderRadius};\n        position: absolute;\n        inset: -0.25rem;\n      }\n      :focus-visible {\n        outline: none;\n        ::after {\n          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n        }\n      }\n    `;\n  }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const setTargetWithEvent = (e: ReactMouseEvent | ReactKeyboardEvent) => {\n    if (e.target instanceof HTMLElement) {\n      setTarget(e.target);\n    }\n  };\n\n  return {\n    target,\n    loading,\n    setLoading,\n    events: {\n      onMouseDown: (e: ReactMouseEvent) => {\n        setTargetWithEvent(e);\n      },\n      onKeyDown: (e: ReactKeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setTargetWithEvent(e);\n        }\n      }\n    },\n    setTargetWithEvent\n  };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n  (\n    {\n      target,\n      placement,\n      heading,\n      headingHidden = false,\n      onSubmit,\n      onClose,\n      onOpen,\n      loading,\n      children,\n      ...restProps\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n    const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n    const headingRef = useRef<HTMLSpanElement>(null);\n    const [currentTarget, setCurrentTarget] = useState(() => target);\n    const [show, setShow] = useState(false);\n    const skipChangeShow = useRef(false);\n    const prevTarget = usePrevious(target);\n    useEscape(\n      () => {\n        if (show) {\n          setShow(false);\n        }\n      },\n      undefined,\n      [show, setShow]\n    );\n    useOuterEvent('mousedown', [target, popoverEl], () => {\n      if (target && popoverEl && show) {\n        setShow(false);\n        onClose?.();\n      }\n    });\n    useFocusTrap(popoverRef);\n\n    useEffect(() => {\n      if (!show) {\n        currentTarget?.focus();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      if (show && popoverEl) {\n        if (headingRef.current) {\n          headingRef.current.focus();\n        } else {\n          const focusables = getFocusables(popoverRef);\n          focusables[0]?.focus();\n        }\n      }\n    }, [show, popoverEl]);\n\n    useLayoutEffect(() => {\n      const onTargetClick = (e: MouseEvent) => {\n        setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n        if (!skipChangeShow.current) {\n          setShow(prev => !prev);\n        } else {\n          skipChangeShow.current = false;\n        }\n      };\n      if (target instanceof HTMLElement) {\n        target.addEventListener('click', onTargetClick);\n      }\n      return () => {\n        if (target instanceof HTMLElement) {\n          target.removeEventListener('click', onTargetClick);\n        }\n      };\n    }, [target]);\n\n    useEffect(() => {\n      if (show) {\n        onOpen?.();\n      } else {\n        onClose?.();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      /* If our target is changing and the popover is already open we will want\n      to skip the next change. The next show change would come from a click on the new button,\n      the popover should stay open. */\n      if (target !== prevTarget && show) {\n        skipChangeShow.current = true;\n      }\n    }, [target, show]);\n\n    const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n      const focusables = getFocusables(popoverRef);\n      if (e.shiftKey && e.key === 'Tab') {\n        e.preventDefault();\n        focusables[focusables.length - 1].focus();\n      }\n    };\n\n    const progress = loading ? <Progress placement='local' /> : null;\n\n    return (\n      <Popover\n        {...restProps}\n        as={StyledDialog}\n        ref={popoverRef}\n        target={currentTarget}\n        placement={placement}\n        show={show}\n        open={show}\n        aria-labelledby={headingId}\n      >\n        <CardHeader\n          actions={\n            !onSubmit ? (\n              <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            ) : undefined\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n          ) : (\n            <StyledDialogTitle\n              variant='h2'\n              tabIndex={-1}\n              ref={headingRef}\n              onKeyDown={onTitleKeyDown}\n              id={headingId}\n            >\n              {heading}\n            </StyledDialogTitle>\n          )}\n        </CardHeader>\n        <CardContent>\n          {children}\n          {progress}\n        </CardContent>\n        {onSubmit && (\n          <CardFooter justify='between'>\n            <Button variant='secondary' onClick={() => setShow(false)}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              onClick={() => onSubmit({ close: () => setShow(false) })}\n              disabled={loading}\n            >\n              {t('submit')}\n            </Button>\n          </CardFooter>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport default Dialog;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Dialog';
+export { DialogProps, useDialog } from './Dialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Dialog/index.js

@@ -0,0 +1,3 @@
+export { default } from './Dialog';
+export { useDialog } from './Dialog';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAe,SAAS,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Dialog';\nexport { DialogProps, useDialog } from './Dialog';\n"]}

package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;SA0hBzD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;SA2hBzD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

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

@@ -2,11 +2,13 @@ import { hideVisually, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
 import { getHoverColors, calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
-const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation: { speed, timing }, 'font-size': fontSize, 'font-scale': fontScale, 'font-family': fontFamily, 'font-weight': fontWeight, palette, shadow: { focus: focusShadow }, spacing, 'border-radius': borderRadius, transparency }, components: { card: { 'border-radius': cardRadius }, 'search-input': { 'border-radius': searchInputRadius } } } }) => {
+const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation: { speed, timing }, 'font-size': fontSize, 'font-scale': fontScale, 'font-family': fontFamily, 'font-weight': fontWeight, palette, shadow: { focus: focusShadow }, spacing, 'border-radius': borderRadius, transparency }, components: { 'search-input': { 'border-radius': searchInputRadius } } } }) => {
     const hoverColor = getHoverColors(palette['primary-background']).background;
     const secondaryTextColor = transparentize(1 - transparency['transparent-2'], palette['foreground-color']);
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
+      border-radius: inherit;
+
       /* stylelint-disable no-descending-specificity */
 
       /* stylelint-disable no-duplicate-selectors */
@@ -25,7 +27,7 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
         display: inline-block;
         color: ${palette['foreground-color']};
         border: 0.0625rem solid ${palette['border-line']};
-        border-radius: ${cardRadius};
+        border-radius: inherit;
         background: ${palette['primary-background']};
       }
 
@@ -38,13 +40,13 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
       }
       .emoji-mart-bar:first-child {
         border-bottom-width: 0.0625rem;
-        border-top-left-radius: ${cardRadius};
-        border-top-right-radius: ${cardRadius};
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
       }
       .emoji-mart-bar:last-child {
         border-top-width: 0.0625rem;
-        border-bottom-left-radius: ${cardRadius};
-        border-bottom-right-radius: ${cardRadius};
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
         ${!showFooter &&
         css `
           display: none;

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

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

@@ -1,6 +1,7 @@
 import { FunctionComponent, Ref, ReactNode } from 'react';
 import { ActionsProps } from '../Actions';
 import { BaseProps, ForwardProps } from '../../types';
+import { AdditionalInfoProps } from '../AdditionalInfo';
 export interface FieldGroupProps extends BaseProps {
     /** The content of the Field Group. */
     children: ReactNode;
@@ -18,11 +19,17 @@ export interface FieldGroupProps extends BaseProps {
     defaultCollapsed?: boolean;
     /** The name associated with the Field Group. */
     name?: string;
+    /** Provides additional info relevant to the field group. */
+    additionalInfo?: {
+        heading: AdditionalInfoProps['heading'];
+        content: AdditionalInfoProps['children'];
+    };
     /** An array of actions to add to the header. */
     actions?: ActionsProps['items'];
     /** A reference to the wrapping element. */
     ref?: Ref<HTMLFieldSetElement>;
 }
+export declare const StyledFieldGroupName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFieldGroupLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {
     open: boolean;
 }, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAsClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAgCD,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB;UAAoC,OAAO;SA+B7E,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -1,88 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import Button, { StyledButton } from '../Button';
+import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
-import Flex, { StyledFlex } from '../Flex';
+import Flex from '../Flex';
 import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
-import { useI18n, useUID } from '../../hooks';
-import { calculateFontSize } from '../../styles';
+import { useDirection, useI18n, useUID } from '../../hooks';
+import { calculateFontSize, omitProps } from '../../styles';
+import AdditionalInfo from '../AdditionalInfo';
 registerIcon(caretRightIcon);
-export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => css `
-    width: 100%;
-    margin-bottom: 0;
-    ${open &&
-    css `
-      margin-block-end: calc(1.5 * ${spacing});
-    `}
-    transition: margin-block-end ${animation.speed} ${animation.timing.ease};
-
-    button ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
-
-    button[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-    button[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(0);
-    }
+const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
+      &[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+      &[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
+    `;
+});
+StyledExpandButton.defaultProps = defaultThemeProp;
+export const StyledFieldGroupName = styled.span ``;
+export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('open'))(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+    return css `
+      width: 100%;
+      margin-bottom: 0;
+      ${open &&
+        css `
+        margin-block-end: calc(1.5 * ${spacing});
+      `}
+      transition: margin-block-end ${animation.speed} ${animation.timing.ease};
 
-    > ${StyledFlex} {
-      min-height: ${hitAreaMouse};
+      > ${StyledExpandButton} {
+        min-height: ${hitAreaMouse};
 
-      @media (pointer: 'coarse') {
-        min-height: ${hitAreaFinger};
+        @media (pointer: 'coarse') {
+          min-height: ${hitAreaFinger};
+        }
       }
-    }
-  `);
+    `;
+});
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
 export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
       border: none;
 
-      ${StyledFieldGroupLegend} ${StyledButton} {
-        font-weight: inherit;
-      }
-
-      & ${StyledFieldGroupLegend} {
+      & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h3['font-size']]};
         font-weight: ${text.h3['font-weight']};
       }
 
-      & & ${StyledFieldGroupLegend} {
+      & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h4['font-size']]};
         font-weight: ${text.h4['font-weight']};
       }
 
-      & & & ${StyledFieldGroupLegend} {
+      & & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h5['font-size']]};
         font-weight: ${text.h5['font-weight']};
       }
 
-      & & & & ${StyledFieldGroupLegend} {
+      & & & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h6['font-size']]};
         font-weight: ${text.h6['font-weight']};
       }
     `;
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
-const FieldGroupLegend = ({ children, open, actions, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [children, actions && _jsx(Actions, { items: actions })] }) }));
+const FieldGroupLegend = ({ children, open, actions, additionalInfo, ...restProps }) => {
+    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
 };
-const FieldGroup = forwardRef(({ children, description, name, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
+const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
     const uid = useUID();
     const descAndChildren = (_jsxs(Flex, { container: { direction: 'column', 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, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
+    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' }), _jsx("span", { children: name })] }) })) : (_jsx("span", { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
+                    }, "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' }), _jsx(StyledFieldGroupName, { children: name })] }) })) : (_jsx(StyledFieldGroupName, { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\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 { useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\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  /** The name associated with the Field Group. */\n  name?: string;\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}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => 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    button ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    button[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    button[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    > ${StyledFlex} {\n      min-height: ${hitAreaMouse};\n\n      @media (pointer: 'coarse') {\n        min-height: ${hitAreaFinger};\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      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\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  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\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      actions,\n      collapsible = false,\n      defaultCollapsed = false,\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      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\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}>\n            {collapsible ? (\n              <Button\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                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\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 Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\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  /** 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      ...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      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\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                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <StyledFieldGroupName>{name}</StyledFieldGroupName>\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/FieldGroup/FieldGroupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAWD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAW1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}