@pega/cosmos-react-core 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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,4GAYxB,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,149 @@
+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 } } }) => {
+    return css `
+      border: none;
+      min-width: ${contentWidth.sm};
+      max-width: ${contentWidth.lg};
+    `;
+});
+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: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\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/Drawer/Drawer.js

@@ -70,7 +70,7 @@ const Drawer = forwardRef((props, ref) => {
             return;
         setState(open ? 'open' : 'closed');
     }, [open]);
-    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }, void 0));
+    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }));
 });
 export default Drawer;
 //# sourceMappingURL=Drawer.js.map

package/lib/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  Ref,\n  useCallback,\n  FunctionComponent,\n  forwardRef,\n  ReactNode,\n  TransitionEvent,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n  /**\n   * If true, the Drawer will be visible.\n   * @default false\n   */\n  open: boolean;\n  /** Content of the Drawer. */\n  children?: ReactNode;\n  /**\n   * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Used to determine which side of the viewport the Drawer should open from.\n   * @default \"right\"\n   */\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * The position of the Drawer.\n   * @default \"absolute\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * The width or height that the Drawer will open to, depending on its placement.\n   * @default \"100%\"\n   */\n  size?: string;\n  /**  Callback fired after Drawer opens.  */\n  onAfterOpen?: () => void;\n  /**  Callback fired after Drawer closes.  */\n  onAfterClose?: () => void;\n  /**  Callback fired before Drawer opens.  */\n  onBeforeOpen?: () => void;\n  /** Callback fired before Drawer closes.  */\n  onBeforeClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Drawer.  */\n  onOuterClick?: () => void;\n  /**\n   * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n  const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n  let dimension = 'horizontal';\n  let axis = 'X';\n  let anchor = 'top';\n\n  if (placement === 'top' || placement === 'bottom') {\n    dimension = 'vertical';\n    axis = 'Y';\n    anchor = 'left';\n  }\n\n  const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n  const speed = transitionSpeed || theme.base.animation.speed;\n\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    position: ${position};\n    ${placement}: 0;\n    ${anchor}: 0;\n    height: ${dimension === 'vertical' ? size : '100%'};\n    width: ${dimension === 'horizontal' ? size : '100%'};\n    transition-property: transform, box-shadow, opacity;\n    transition-duration: max(${speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n    transform: ${state === 'open'\n      ? 'none'\n      : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n    ${shadow &&\n    css`\n      box-shadow: ${theme.base.shadow.high};\n    `}\n  `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n  (props: DrawerProps, ref: Ref<HTMLElement>) => {\n    const {\n      open = false,\n      shadow = false,\n      position = 'absolute',\n      children,\n      placement = 'right',\n      transitionSpeed,\n      size = '100%',\n      onAfterOpen,\n      onAfterClose,\n      onBeforeOpen,\n      onBeforeClose,\n      onOuterClick,\n      nullWhenClosed = false,\n      ...restProps\n    } = props;\n\n    const drawerRef = useConsolidatedRef(ref);\n\n    const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n    let prevState = usePrevious(state);\n    if (!prevState) prevState = state;\n\n    useOuterEvent(\n      'mousedown',\n      [drawerRef.current],\n      useCallback(() => {\n        if (open) onOuterClick?.();\n      }, [open, onOuterClick])\n    );\n\n    useEffect(() => {\n      if (open && (state === 'closed' || state === 'closing')) {\n        onBeforeOpen?.();\n        reflow(drawerRef.current);\n        setState('opening');\n      } else if (!open && (state === 'open' || state === 'opening')) {\n        onBeforeClose?.();\n        setState('closing');\n      } else if (open && state === 'open' && prevState !== 'open') {\n        onAfterOpen?.();\n      } else if (!open && state === 'closed' && prevState !== 'closed') {\n        onAfterClose?.();\n      }\n    }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent): void => {\n        if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n        setState(open ? 'open' : 'closed');\n      },\n      [open]\n    );\n\n    return state === 'closed' && !open && nullWhenClosed ? null : (\n      <StyledDrawer\n        ref={drawerRef}\n        position={position}\n        shadow={shadow && open}\n        transitionSpeed={transitionSpeed}\n        placement={placement}\n        size={size}\n        open={open}\n        state={state}\n        onTransitionEnd={onTransitionEnd}\n        {...restProps}\n      >\n        {children}\n      </StyledDrawer>\n    );\n  }\n);\n\nexport default Drawer;\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  Ref,\n  useCallback,\n  FunctionComponent,\n  forwardRef,\n  ReactNode,\n  TransitionEvent,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n  /**\n   * If true, the Drawer will be visible.\n   * @default false\n   */\n  open: boolean;\n  /** Content of the Drawer. */\n  children?: ReactNode;\n  /**\n   * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Used to determine which side of the viewport the Drawer should open from.\n   * @default \"right\"\n   */\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * The position of the Drawer.\n   * @default \"absolute\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * The width or height that the Drawer will open to, depending on its placement.\n   * @default \"100%\"\n   */\n  size?: string;\n  /**  Callback fired after Drawer opens.  */\n  onAfterOpen?: () => void;\n  /**  Callback fired after Drawer closes.  */\n  onAfterClose?: () => void;\n  /**  Callback fired before Drawer opens.  */\n  onBeforeOpen?: () => void;\n  /** Callback fired before Drawer closes.  */\n  onBeforeClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Drawer.  */\n  onOuterClick?: () => void;\n  /**\n   * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n  const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n  let dimension = 'horizontal';\n  let axis = 'X';\n  let anchor = 'top';\n\n  if (placement === 'top' || placement === 'bottom') {\n    dimension = 'vertical';\n    axis = 'Y';\n    anchor = 'left';\n  }\n\n  const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n  const speed = transitionSpeed || theme.base.animation.speed;\n\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    position: ${position};\n    ${placement}: 0;\n    ${anchor}: 0;\n    height: ${dimension === 'vertical' ? size : '100%'};\n    width: ${dimension === 'horizontal' ? size : '100%'};\n    transition-property: transform, box-shadow, opacity;\n    transition-duration: max(${speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n    transform: ${state === 'open'\n      ? 'none'\n      : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n    ${shadow &&\n    css`\n      box-shadow: ${theme.base.shadow.high};\n    `}\n  `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n  (props: DrawerProps, ref: Ref<HTMLElement>) => {\n    const {\n      open = false,\n      shadow = false,\n      position = 'absolute',\n      children,\n      placement = 'right',\n      transitionSpeed,\n      size = '100%',\n      onAfterOpen,\n      onAfterClose,\n      onBeforeOpen,\n      onBeforeClose,\n      onOuterClick,\n      nullWhenClosed = false,\n      ...restProps\n    } = props;\n\n    const drawerRef = useConsolidatedRef(ref);\n\n    const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n    let prevState = usePrevious(state);\n    if (!prevState) prevState = state;\n\n    useOuterEvent(\n      'mousedown',\n      [drawerRef.current],\n      useCallback(() => {\n        if (open) onOuterClick?.();\n      }, [open, onOuterClick])\n    );\n\n    useEffect(() => {\n      if (open && (state === 'closed' || state === 'closing')) {\n        onBeforeOpen?.();\n        reflow(drawerRef.current);\n        setState('opening');\n      } else if (!open && (state === 'open' || state === 'opening')) {\n        onBeforeClose?.();\n        setState('closing');\n      } else if (open && state === 'open' && prevState !== 'open') {\n        onAfterOpen?.();\n      } else if (!open && state === 'closed' && prevState !== 'closed') {\n        onAfterClose?.();\n      }\n    }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent): void => {\n        if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n        setState(open ? 'open' : 'closed');\n      },\n      [open]\n    );\n\n    return state === 'closed' && !open && nullWhenClosed ? null : (\n      <StyledDrawer\n        ref={drawerRef}\n        position={position}\n        shadow={shadow && open}\n        transitionSpeed={transitionSpeed}\n        placement={placement}\n        size={size}\n        open={open}\n        state={state}\n        onTransitionEnd={onTransitionEnd}\n        {...restProps}\n      >\n        {children}\n      </StyledDrawer>\n    );\n  }\n);\n\nexport default Drawer;\n"]}

package/lib/components/Email/EmailDisplay.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import Link from '../Link';
 const EmailDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    const displayValue = value ? (displayText || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
-    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: `mailto:${value}`, children: displayValue }, void 0));
+    const displayValue = value ? (displayText || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(Link, { ref: ref, ...restProps, href: `mailto:${value}`, children: displayValue }));
 });
 export default EmailDisplay;
 //# sourceMappingURL=EmailDisplay.js.map

package/lib/components/Email/EmailDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,KAAK,CACrB,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE,YAC7E,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nexport interface EmailDisplayProps extends BaseProps, NoChildrenProp {\n  /** Email address, no 'mailto:' scheme */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n    ref: EmailDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || value\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`mailto:${value}`}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default EmailDisplay;\n"]}
+{"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,KAAK,CACrB,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE,YAC7E,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nexport interface EmailDisplayProps extends BaseProps, NoChildrenProp {\n  /** Email address, no 'mailto:' scheme */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n    ref: EmailDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || value\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`mailto:${value}`}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default EmailDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiDisplay.js

@@ -20,13 +20,13 @@ const EmojiDisplay = props => {
     if (typeof content === 'string' && emojiSet) {
         const renderEmoji = (eMatch) => {
             const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data);
-            return emojiData && _jsx(Emoji, { set: emojiSet, emoji: emojiData, size: size }, void 0);
+            return emojiData && _jsx(Emoji, { set: emojiSet, emoji: emojiData, size: size });
         };
         if (content.split(regex).length > 1) {
             msgArr = replaceMatchWithElement(content, regex, renderEmoji);
         }
     }
-    return emojiSet && msgArr.length >= 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr }, void 0)) : (_jsx(_Fragment, { children: content }, void 0));
+    return emojiSet && msgArr.length >= 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr })) : (_jsx(_Fragment, { children: content }));
 };
 export default EmojiDisplay;
 //# sourceMappingURL=EmojiDisplay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,WAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,WAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}
+{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,GAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,GAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.js

@@ -34,7 +34,7 @@ const EmojiPicker = forwardRef(({ emojiSize = 24, perLine = 9, showFooter = true
             });
         }
     }, [set, overrideData]);
-    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }, void 0) }, void 0)));
+    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }) })));
 });
 export default EmojiPicker;
 //# sourceMappingURL=EmojiPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,WAClB,WACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  Ref,\n  forwardRef\n} from 'react';\nimport {\n  NimblePicker,\n  CategoryName,\n  Data as EmojiData,\n  BackgroundImageFn,\n  PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet | 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n  (\n    {\n      emojiSize = 24,\n      perLine = 9,\n      showFooter = true,\n      exclude,\n      onSelect,\n      ...restProps\n    }: PropsWithoutRef<EmojiPickerProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const theme = useTheme();\n    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n    const [data, setData] = useState<EmojiData | null>(null);\n\n    useEffect(() => {\n      const dataSet = set ?? 'all';\n\n      // Unmount NimblePicker for changes to take effect\n      setData(null);\n\n      if (overrideData) {\n        setTimeout(() => {\n          setData(overrideData);\n        }, 0);\n      } else if (emojiDataCache.has(dataSet)) {\n        setTimeout(() => {\n          setData(emojiDataCache.get(dataSet) ?? null);\n        }, 0);\n      } else {\n        import(`emoji-mart/data/${dataSet}.json`)\n          .then(({ default: json }) => {\n            emojiDataCache.set(dataSet, json);\n            setData(emojiDataCache.get(dataSet)!);\n          })\n          .catch(() => {\n            setData(null);\n          });\n      }\n    }, [set, overrideData]);\n\n    return (\n      data && (\n        <StyledEmojiPicker\n          ref={ref}\n          showFooter={showFooter}\n          style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n        >\n          <NimblePicker\n            {...restProps}\n            set={set}\n            native={!spriteSrcResolver}\n            backgroundImageFn={spriteSrcResolver}\n            data={data}\n            emojiSize={emojiSize}\n            perLine={perLine}\n            exclude={exclude}\n            onSelect={onSelect}\n            color={theme.base.palette.interactive}\n            emoji=''\n            title=''\n            emojiTooltip\n            showSkinTones={showFooter}\n            showPreview={false}\n          />\n        </StyledEmojiPicker>\n      )\n    );\n  }\n);\n\nexport default EmojiPicker;\n"]}
+{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,GAClB,GACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  Ref,\n  forwardRef\n} from 'react';\nimport {\n  NimblePicker,\n  CategoryName,\n  Data as EmojiData,\n  BackgroundImageFn,\n  PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet | 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n  (\n    {\n      emojiSize = 24,\n      perLine = 9,\n      showFooter = true,\n      exclude,\n      onSelect,\n      ...restProps\n    }: PropsWithoutRef<EmojiPickerProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const theme = useTheme();\n    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n    const [data, setData] = useState<EmojiData | null>(null);\n\n    useEffect(() => {\n      const dataSet = set ?? 'all';\n\n      // Unmount NimblePicker for changes to take effect\n      setData(null);\n\n      if (overrideData) {\n        setTimeout(() => {\n          setData(overrideData);\n        }, 0);\n      } else if (emojiDataCache.has(dataSet)) {\n        setTimeout(() => {\n          setData(emojiDataCache.get(dataSet) ?? null);\n        }, 0);\n      } else {\n        import(`emoji-mart/data/${dataSet}.json`)\n          .then(({ default: json }) => {\n            emojiDataCache.set(dataSet, json);\n            setData(emojiDataCache.get(dataSet)!);\n          })\n          .catch(() => {\n            setData(null);\n          });\n      }\n    }, [set, overrideData]);\n\n    return (\n      data && (\n        <StyledEmojiPicker\n          ref={ref}\n          showFooter={showFooter}\n          style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n        >\n          <NimblePicker\n            {...restProps}\n            set={set}\n            native={!spriteSrcResolver}\n            backgroundImageFn={spriteSrcResolver}\n            data={data}\n            emojiSize={emojiSize}\n            perLine={perLine}\n            exclude={exclude}\n            onSelect={onSelect}\n            color={theme.base.palette.interactive}\n            emoji=''\n            title=''\n            emojiTooltip\n            showSkinTones={showFooter}\n            showPreview={false}\n          />\n        </StyledEmojiPicker>\n      )\n    );\n  }\n);\n\nexport default EmojiPicker;\n"]}

package/lib/components/EmptyState/EmptyState.js

@@ -27,7 +27,7 @@ StyledEmptyState.defaultProps = defaultThemeProp;
 const EmptyState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('no_items'), ...restProps } = props;
-    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'galaxy' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0)] }, void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'galaxy' }), _jsx(Text, { variant: 'secondary', children: message })] }));
 });
 export default EmptyState;
 //# sourceMappingURL=EmptyState.js.map

package/lib/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,YACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('no_items'), ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmptyState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='galaxy' />\n        <Text variant='secondary'>{message}</Text>\n      </Flex>\n    );\n  }\n);\n\nexport default EmptyState;\n"]}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,IACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('no_items'), ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmptyState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='galaxy' />\n        <Text variant='secondary'>{message}</Text>\n      </Flex>\n    );\n  }\n);\n\nexport default EmptyState;\n"]}

package/lib/components/ErrorState/ErrorState.js

@@ -25,7 +25,7 @@ StyledErrorState.defaultProps = defaultThemeProp;
 const ErrorState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('unknown_error'), onRetry, ...restProps } = props;
-    return (_jsxs(Flex, { ...restProps, as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'warn' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0), onRetry && (_jsx(Button, { variant: 'secondary', onClick: onRetry, children: t('try_again') }, void 0))] }, void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'warn' }), _jsx(Text, { variant: 'secondary', children: message }), onRetry && (_jsx(Button, { variant: 'secondary', onClick: onRetry, children: t('try_again') }))] }));
 });
 export default ErrorState;
 //# sourceMappingURL=ErrorState.js.map

package/lib/components/ErrorState/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,WACR,CACV,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledErrorState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='warn' />\n        <Text variant='secondary'>{message}</Text>\n        {onRetry && (\n          <Button variant='secondary' onClick={onRetry}>\n            {t('try_again')}\n          </Button>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ErrorState;\n"]}
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,GACR,CACV,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n    const t = useI18n();\n    const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledErrorState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='warn' />\n        <Text variant='secondary'>{message}</Text>\n        {onRetry && (\n          <Button variant='secondary' onClick={onRetry}>\n            {t('try_again')}\n          </Button>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ErrorState;\n"]}

package/lib/components/ExpandCollapse/ExpandCollapse.js

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }, void 0));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

package/lib/components/ExpandCollapse/ExpandCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}
+{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}

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

@@ -1,9 +1,12 @@
 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;
+    /** A description of the field group to be displayed above the controls. */
+    description?: string;
     /**
      * If true, the Field Group will be able to collapse the content of its children by clicking on the name.
      * @default false
@@ -16,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;AAQjG,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;;;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;SA0BlE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8CjE,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;UAAyB,OAAO;SA6BlE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}