@oneblink/apps-react 8.14.0 → 9.0.0-beta.1

package/dist/components/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Dialog,\n  DialogActions,\n  DialogTitle,\n  DialogContent,\n  Button,\n  Portal,\n  DialogProps,\n} from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport useIsMounted from '../hooks/useIsMounted'\nimport ErrorSnackbar from './ErrorSnackbar'\n\ntype Props = {\n  isOpen: boolean\n  onClose: () => void\n  onConfirm: (abortSignal: AbortSignal) => unknown\n  children: React.ReactNode\n  title: string\n  confirmButtonText: string\n  confirmButtonIcon: React.ReactNode\n  cypress?: {\n    dialog?: string\n    confirmButton?: string\n    cancelButton?: string\n    error?: string\n    title?: string\n  }\n  TransitionProps?: DialogProps['TransitionProps']\n  disabled?: boolean\n}\n\nexport default function ConfirmDialog({\n  isOpen,\n  onClose,\n  children,\n  onConfirm,\n  title,\n  confirmButtonText,\n  confirmButtonIcon,\n  cypress,\n  TransitionProps,\n  disabled,\n}: Props) {\n  const isMounted = useIsMounted()\n  const [isConfirming, setIsConfirming] = React.useState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const handleConfirm = React.useCallback(async () => {\n    setIsConfirming(true)\n    setError(null)\n    let newError = null\n\n    const abortController = new AbortController()\n    try {\n      await onConfirm(abortController.signal)\n    } catch (error) {\n      newError = error as Error\n    }\n\n    if (isMounted.current && !abortController.signal.aborted) {\n      setIsConfirming(false)\n      setError(newError)\n    }\n  }, [isMounted, onConfirm])\n  return (\n    <React.Fragment>\n      <Dialog\n        open={isOpen}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={!isConfirming ? onClose : undefined}\n        data-cypress={cypress?.dialog}\n        TransitionProps={{\n          onExiting: () => setError(null),\n          ...(TransitionProps ? TransitionProps : {}),\n        }}\n      >\n        <DialogTitle data-cypress={cypress?.title}>{title}</DialogTitle>\n        <DialogContent dividers>{children}</DialogContent>\n        <DialogActions>\n          <Button\n            disabled={isConfirming}\n            onClick={onClose}\n            data-cypress={cypress?.cancelButton}\n          >\n            Cancel\n          </Button>\n\n          <LoadingButton\n            variant=\"contained\"\n            loading={isConfirming}\n            autoFocus\n            startIcon={confirmButtonIcon}\n            loadingPosition=\"start\"\n            onClick={handleConfirm}\n            data-cypress={cypress?.confirmButton}\n            disabled={disabled}\n          >\n            {confirmButtonText}\n          </LoadingButton>\n        </DialogActions>\n      </Dialog>\n      <Portal>\n        <ErrorSnackbar open={!!error} onClose={setError}>\n          <span data-cypress={cypress?.error}>{error?.message}</span>\n        </ErrorSnackbar>\n      </Portal>\n    </React.Fragment>\n  )\n}\n"]}
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Dialog,\n  DialogActions,\n  DialogTitle,\n  DialogContent,\n  Button,\n  Portal,\n  DialogProps,\n} from '@mui/material'\nimport useIsMounted from '../hooks/useIsMounted'\nimport ErrorSnackbar from './ErrorSnackbar'\n\ntype Props = {\n  isOpen: boolean\n  onClose: () => void\n  onConfirm: (abortSignal: AbortSignal) => unknown\n  children: React.ReactNode\n  title: string\n  confirmButtonText: string\n  confirmButtonIcon: React.ReactNode\n  cypress?: {\n    dialog?: string\n    confirmButton?: string\n    cancelButton?: string\n    error?: string\n    title?: string\n  }\n  TransitionProps?: NonNullable<DialogProps['slotProps']>['transition']\n  disabled?: boolean\n}\n\nexport default function ConfirmDialog({\n  isOpen,\n  onClose,\n  children,\n  onConfirm,\n  title,\n  confirmButtonText,\n  confirmButtonIcon,\n  cypress,\n  TransitionProps,\n  disabled,\n}: Props) {\n  const isMounted = useIsMounted()\n  const [isConfirming, setIsConfirming] = React.useState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const handleConfirm = React.useCallback(async () => {\n    setIsConfirming(true)\n    setError(null)\n    let newError = null\n\n    const abortController = new AbortController()\n    try {\n      await onConfirm(abortController.signal)\n    } catch (error) {\n      newError = error as Error\n    }\n\n    if (isMounted.current && !abortController.signal.aborted) {\n      setIsConfirming(false)\n      setError(newError)\n    }\n  }, [isMounted, onConfirm])\n  return (\n    <React.Fragment>\n      <Dialog\n        open={isOpen}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={!isConfirming ? onClose : undefined}\n        data-cypress={cypress?.dialog}\n        slotProps={{\n          transition: {\n            onExiting: () => setError(null),\n            ...(TransitionProps ? TransitionProps : {}),\n          },\n        }}\n      >\n        <DialogTitle data-cypress={cypress?.title}>{title}</DialogTitle>\n        <DialogContent dividers>{children}</DialogContent>\n        <DialogActions>\n          <Button\n            disabled={isConfirming}\n            onClick={onClose}\n            data-cypress={cypress?.cancelButton}\n          >\n            Cancel\n          </Button>\n\n          <Button\n            variant=\"contained\"\n            loading={isConfirming}\n            autoFocus\n            startIcon={confirmButtonIcon}\n            loadingPosition=\"start\"\n            onClick={handleConfirm}\n            data-cypress={cypress?.confirmButton}\n            disabled={disabled}\n          >\n            {confirmButtonText}\n          </Button>\n        </DialogActions>\n      </Dialog>\n      <Portal>\n        <ErrorSnackbar open={!!error} onClose={setError}>\n          <span data-cypress={cypress?.error}>{error?.message}</span>\n        </ErrorSnackbar>\n      </Portal>\n    </React.Fragment>\n  )\n}\n"]}

package/dist/components/CopyToClipboardIconButton.d.ts

@@ -5,6 +5,6 @@ type Props = {
     large?: boolean;
     noMarginY?: boolean;
 } & React.ComponentProps<typeof IconButton>;
-export declare function CopyToClipBoardIconButton({ text, large, noMarginY, className, ...rest }: Props): React.JSX.Element;
+export declare function CopyToClipBoardIconButton({ text, large, noMarginY, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CopyToClipBoardIconButton>;
 export default _default;

package/dist/components/CopyToClipboardIconButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import copy from 'copy-to-clipboard';
 import { IconButton, Tooltip, Snackbar, Portal } from '@mui/material';
@@ -15,20 +16,15 @@ export function CopyToClipBoardIconButton({ text, large, noMarginY, className, .
     const handleClose = React.useCallback(() => {
         setIsCopyToClipboardOpen(false);
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { title: "Copy to clipboard" },
-            React.createElement(IconButton, { onClick: (e) => {
-                    e.stopPropagation();
-                    copyToClipboard();
-                }, "data-cypress": "copy-to-clip-board-button", className: className, sx: noMarginY ? noMargin : undefined, ...rest },
-                React.createElement(MaterialIcon, { style: large ? undefined : { fontSize: 18 } }, "file_copy"))),
-        React.createElement(Portal, null,
-            React.createElement(Snackbar, { anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }, open: isCopyToClipboardOpen, onClose: handleClose, autoHideDuration: 1500, ContentProps: {
-                    'aria-describedby': 'copy-clip-board-message-id',
-                }, message: React.createElement("span", { id: "copy-clip-board-message-id", "data-cypress": "copied-text-to-clip-board-message" }, "Copied to Clipboard") }))));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Copy to clipboard", children: _jsx(IconButton, { onClick: (e) => {
+                        e.stopPropagation();
+                        copyToClipboard();
+                    }, "data-cypress": "copy-to-clip-board-button", className: className, sx: noMarginY ? noMargin : undefined, ...rest, children: _jsx(MaterialIcon, { style: large ? undefined : { fontSize: 18 }, children: "file_copy" }) }) }), _jsx(Portal, { children: _jsx(Snackbar, { anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'right',
+                    }, open: isCopyToClipboardOpen, onClose: handleClose, autoHideDuration: 1500, ContentProps: {
+                        'aria-describedby': 'copy-clip-board-message-id',
+                    }, message: _jsx("span", { id: "copy-clip-board-message-id", "data-cypress": "copied-text-to-clip-board-message", children: "Copied to Clipboard" }) }) })] }));
 }
 export default React.memo(CopyToClipBoardIconButton);
 //# sourceMappingURL=CopyToClipboardIconButton.js.map

package/dist/components/CopyToClipboardIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboardIconButton.js","sourceRoot":"","sources":["../../src/components/CopyToClipboardIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,mBAAmB,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAW,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAQzC,MAAM,QAAQ,GAAY;IACxB,SAAS,EAAE,CAAC,CAAC;IACb,YAAY,EAAE,CAAC,CAAC;CACjB,CAAA;AACD,MAAM,UAAU,yBAAyB,CAAC,EACxC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACD;IACN,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GACrD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,IAAI,CAAC,CAAA;QACV,wBAAwB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,KAAK,EAAC,mBAAmB;YAChC,oBAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,eAAe,EAAE,CAAA;gBACnB,CAAC,kBACY,2BAA2B,EACxC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KAChC,IAAI;gBAER,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,gBAE1C,CACJ,CACL;QACV,oBAAC,MAAM;YACL,oBAAC,QAAQ,IACP,YAAY,EAAE;oBACZ,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,OAAO;iBACpB,EACD,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,IAAI,EACtB,YAAY,EAAE;oBACZ,kBAAkB,EAAE,4BAA4B;iBACjD,EACD,OAAO,EACL,8BACE,EAAE,EAAC,4BAA4B,kBAClB,mCAAmC,0BAG3C,GAET,CACK,CACR,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport copy from 'copy-to-clipboard'\nimport { IconButton, Tooltip, Snackbar, SxProps, Portal } from '@mui/material'\nimport MaterialIcon from './MaterialIcon'\n\ntype Props = {\n  text: string\n  large?: boolean\n  noMarginY?: boolean\n} & React.ComponentProps<typeof IconButton>\n\nconst noMargin: SxProps = {\n  marginTop: -1,\n  marginBottom: -1,\n}\nexport function CopyToClipBoardIconButton({\n  text,\n  large,\n  noMarginY,\n  className,\n  ...rest\n}: Props) {\n  const [isCopyToClipboardOpen, setIsCopyToClipboardOpen] =\n    React.useState(false)\n  const copyToClipboard = React.useCallback(() => {\n    copy(text)\n    setIsCopyToClipboardOpen(true)\n  }, [text])\n  const handleClose = React.useCallback(() => {\n    setIsCopyToClipboardOpen(false)\n  }, [])\n  return (\n    <>\n      <Tooltip title=\"Copy to clipboard\">\n        <IconButton\n          onClick={(e) => {\n            e.stopPropagation()\n            copyToClipboard()\n          }}\n          data-cypress=\"copy-to-clip-board-button\"\n          className={className}\n          sx={noMarginY ? noMargin : undefined}\n          {...rest}\n        >\n          <MaterialIcon style={large ? undefined : { fontSize: 18 }}>\n            file_copy\n          </MaterialIcon>\n        </IconButton>\n      </Tooltip>\n      <Portal>\n        <Snackbar\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'right',\n          }}\n          open={isCopyToClipboardOpen}\n          onClose={handleClose}\n          autoHideDuration={1500}\n          ContentProps={{\n            'aria-describedby': 'copy-clip-board-message-id',\n          }}\n          message={\n            <span\n              id=\"copy-clip-board-message-id\"\n              data-cypress=\"copied-text-to-clip-board-message\"\n            >\n              Copied to Clipboard\n            </span>\n          }\n        />\n      </Portal>\n    </>\n  )\n}\n\nexport default React.memo(CopyToClipBoardIconButton)\n"]}
+{"version":3,"file":"CopyToClipboardIconButton.js","sourceRoot":"","sources":["../../src/components/CopyToClipboardIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,mBAAmB,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAW,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAQzC,MAAM,QAAQ,GAAY;IACxB,SAAS,EAAE,CAAC,CAAC;IACb,YAAY,EAAE,CAAC,CAAC;CACjB,CAAA;AACD,MAAM,UAAU,yBAAyB,CAAC,EACxC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACD;IACN,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GACrD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,IAAI,CAAC,CAAA;QACV,wBAAwB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,8BACE,KAAC,OAAO,IAAC,KAAK,EAAC,mBAAmB,YAChC,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,eAAe,EAAE,CAAA;oBACnB,CAAC,kBACY,2BAA2B,EACxC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KAChC,IAAI,YAER,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,0BAE1C,GACJ,GACL,EACV,KAAC,MAAM,cACL,KAAC,QAAQ,IACP,YAAY,EAAE;wBACZ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,OAAO;qBACpB,EACD,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,IAAI,EACtB,YAAY,EAAE;wBACZ,kBAAkB,EAAE,4BAA4B;qBACjD,EACD,OAAO,EACL,eACE,EAAE,EAAC,4BAA4B,kBAClB,mCAAmC,oCAG3C,GAET,GACK,IACR,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport copy from 'copy-to-clipboard'\nimport { IconButton, Tooltip, Snackbar, SxProps, Portal } from '@mui/material'\nimport MaterialIcon from './MaterialIcon'\n\ntype Props = {\n  text: string\n  large?: boolean\n  noMarginY?: boolean\n} & React.ComponentProps<typeof IconButton>\n\nconst noMargin: SxProps = {\n  marginTop: -1,\n  marginBottom: -1,\n}\nexport function CopyToClipBoardIconButton({\n  text,\n  large,\n  noMarginY,\n  className,\n  ...rest\n}: Props) {\n  const [isCopyToClipboardOpen, setIsCopyToClipboardOpen] =\n    React.useState(false)\n  const copyToClipboard = React.useCallback(() => {\n    copy(text)\n    setIsCopyToClipboardOpen(true)\n  }, [text])\n  const handleClose = React.useCallback(() => {\n    setIsCopyToClipboardOpen(false)\n  }, [])\n  return (\n    <>\n      <Tooltip title=\"Copy to clipboard\">\n        <IconButton\n          onClick={(e) => {\n            e.stopPropagation()\n            copyToClipboard()\n          }}\n          data-cypress=\"copy-to-clip-board-button\"\n          className={className}\n          sx={noMarginY ? noMargin : undefined}\n          {...rest}\n        >\n          <MaterialIcon style={large ? undefined : { fontSize: 18 }}>\n            file_copy\n          </MaterialIcon>\n        </IconButton>\n      </Tooltip>\n      <Portal>\n        <Snackbar\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'right',\n          }}\n          open={isCopyToClipboardOpen}\n          onClose={handleClose}\n          autoHideDuration={1500}\n          ContentProps={{\n            'aria-describedby': 'copy-clip-board-message-id',\n          }}\n          message={\n            <span\n              id=\"copy-clip-board-message-id\"\n              data-cypress=\"copied-text-to-clip-board-message\"\n            >\n              Copied to Clipboard\n            </span>\n          }\n        />\n      </Portal>\n    </>\n  )\n}\n\nexport default React.memo(CopyToClipBoardIconButton)\n"]}

package/dist/components/CustomAccordion.d.ts

@@ -1,20 +1,3 @@
-export declare const CustomAccordion: import("@emotion/styled").StyledComponent<{
-    children: NonNullable<React.ReactNode>;
-    classes?: Partial<import("@mui/material").AccordionClasses>;
-    defaultExpanded?: boolean;
-    disabled?: boolean;
-    disableGutters?: boolean;
-    expanded?: boolean;
-    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
-    TransitionComponent?: React.JSXElementConstructor<import("@mui/material/transitions").TransitionProps & {
-        children?: React.ReactElement<any, any>;
-    }>;
-    TransitionProps?: import("@mui/material/transitions").TransitionProps;
-} & import("@mui/material").AccordionSlotsAndSlotProps & Omit<import("@mui/material").PaperOwnProps, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "onChange" | "elevation" | "disabled" | "TransitionComponent" | "TransitionProps" | "variant" | "disableGutters" | "square" | "defaultExpanded" | "expanded" | keyof import("@mui/material").AccordionSlotsAndSlotProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "children" | "classes" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const CustomAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CustomAccordion: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const CustomAccordionDetails: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/ErrorSnackbar.d.ts

@@ -3,6 +3,6 @@ declare function ErrorSnackbar({ open, onClose, children, }: {
     open: boolean;
     children: React.ReactNode;
     onClose: (arg: null) => unknown;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ErrorSnackbar>;
 export default _default;

package/dist/components/ErrorSnackbar.js

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Snackbar, IconButton, Alert as MuiAlert, styled, } from '@mui/material';
 import MaterialIcon from './MaterialIcon';
-const Alert = React.forwardRef(function Alert(props, ref) {
-    return React.createElement(MuiAlert, { elevation: 6, ref: ref, variant: "filled", ...props });
-});
+function Alert({ ref, ...props }) {
+    return _jsx(MuiAlert, { elevation: 6, ref: ref, variant: "filled", ...props });
+}
 const StyledIcon = styled(MaterialIcon)(() => ({
     fontSize: 20,
 }));
@@ -13,12 +14,10 @@ function ErrorSnackbar({ open, onClose, children, }) {
             onClose(null);
         }
     }, [onClose]);
-    return (React.createElement(Snackbar, { anchorOrigin: {
+    return (_jsx(Snackbar, { anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right',
-        }, open: open, onClose: handleClose, className: "ob-error-snackbar" },
-        React.createElement(Alert, { severity: "error", action: React.createElement(IconButton, { key: "close", "aria-label": "Close", color: "inherit", onClick: handleClose, "data-cypress": "error-snackbar-close", size: "large" },
-                React.createElement(StyledIcon, null, "close")) }, children)));
+        }, open: open, onClose: handleClose, className: "ob-error-snackbar", children: _jsx(Alert, { severity: "error", action: _jsx(IconButton, { "aria-label": "Close", color: "inherit", onClick: handleClose, "data-cypress": "error-snackbar-close", size: "large", children: _jsx(StyledIcon, { children: "close" }) }, "close"), children: children }) }));
 }
 export default React.memo(ErrorSnackbar);
 //# sourceMappingURL=ErrorSnackbar.js.map

package/dist/components/ErrorSnackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSnackbar.js","sourceRoot":"","sources":["../../src/components/ErrorSnackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,QAAQ,EACR,UAAU,EACV,KAAK,IAAI,QAAQ,EAEjB,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG;IACvB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,QAAQ,KAAK,KAAK,GAAI,CAAA;AACzE,CAAC,CACF,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7C,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC,CAAA;AAEH,SAAS,aAAa,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,QAAQ,GAKT;IACC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAU,EAAE,MAAe,EAAE,EAAE;QAC9B,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,OAAO,CACL,oBAAC,QAAQ,IACP,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,OAAO;SACpB,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,mBAAmB;QAE7B,oBAAC,KAAK,IACJ,QAAQ,EAAC,OAAO,EAChB,MAAM,EACJ,oBAAC,UAAU,IACT,GAAG,EAAC,OAAO,gBACA,OAAO,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,kBACP,sBAAsB,EACnC,IAAI,EAAC,OAAO;gBAEZ,oBAAC,UAAU,gBAAmB,CACnB,IAGd,QAAQ,CACH,CACC,CACZ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  Snackbar,\n  IconButton,\n  Alert as MuiAlert,\n  AlertProps,\n  styled,\n} from '@mui/material'\nimport MaterialIcon from './MaterialIcon'\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  function Alert(props, ref) {\n    return <MuiAlert elevation={6} ref={ref} variant=\"filled\" {...props} />\n  },\n)\n\nconst StyledIcon = styled(MaterialIcon)(() => ({\n  fontSize: 20,\n}))\n\nfunction ErrorSnackbar({\n  open,\n  onClose,\n  children,\n}: {\n  open: boolean\n  children: React.ReactNode\n  onClose: (arg: null) => unknown\n}) {\n  const handleClose = React.useCallback(\n    (e: unknown, reason?: string) => {\n      if (reason !== 'clickaway') {\n        onClose(null)\n      }\n    },\n    [onClose],\n  )\n  return (\n    <Snackbar\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      open={open}\n      onClose={handleClose}\n      className=\"ob-error-snackbar\"\n    >\n      <Alert\n        severity=\"error\"\n        action={\n          <IconButton\n            key=\"close\"\n            aria-label=\"Close\"\n            color=\"inherit\"\n            onClick={handleClose}\n            data-cypress=\"error-snackbar-close\"\n            size=\"large\"\n          >\n            <StyledIcon>close</StyledIcon>\n          </IconButton>\n        }\n      >\n        {children}\n      </Alert>\n    </Snackbar>\n  )\n}\n\nexport default React.memo(ErrorSnackbar)\n"]}
+{"version":3,"file":"ErrorSnackbar.js","sourceRoot":"","sources":["../../src/components/ErrorSnackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,QAAQ,EACR,UAAU,EACV,KAAK,IAAI,QAAQ,EAEjB,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,SAAS,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAc;IAC1C,OAAO,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,QAAQ,KAAK,KAAK,GAAI,CAAA;AACzE,CAAC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7C,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC,CAAA;AAEH,SAAS,aAAa,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,QAAQ,GAKT;IACC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAU,EAAE,MAAe,EAAE,EAAE;QAC9B,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,OAAO,CACL,KAAC,QAAQ,IACP,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,OAAO;SACpB,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,mBAAmB,YAE7B,KAAC,KAAK,IACJ,QAAQ,EAAC,OAAO,EAChB,MAAM,EACJ,KAAC,UAAU,kBAEE,OAAO,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,kBACP,sBAAsB,EACnC,IAAI,EAAC,OAAO,YAEZ,KAAC,UAAU,wBAAmB,IAP1B,OAAO,CAQA,YAGd,QAAQ,GACH,GACC,CACZ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  Snackbar,\n  IconButton,\n  Alert as MuiAlert,\n  AlertProps,\n  styled,\n} from '@mui/material'\nimport MaterialIcon from './MaterialIcon'\n\nfunction Alert({ ref, ...props }: AlertProps) {\n  return <MuiAlert elevation={6} ref={ref} variant=\"filled\" {...props} />\n}\n\nconst StyledIcon = styled(MaterialIcon)(() => ({\n  fontSize: 20,\n}))\n\nfunction ErrorSnackbar({\n  open,\n  onClose,\n  children,\n}: {\n  open: boolean\n  children: React.ReactNode\n  onClose: (arg: null) => unknown\n}) {\n  const handleClose = React.useCallback(\n    (e: unknown, reason?: string) => {\n      if (reason !== 'clickaway') {\n        onClose(null)\n      }\n    },\n    [onClose],\n  )\n  return (\n    <Snackbar\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      open={open}\n      onClose={handleClose}\n      className=\"ob-error-snackbar\"\n    >\n      <Alert\n        severity=\"error\"\n        action={\n          <IconButton\n            key=\"close\"\n            aria-label=\"Close\"\n            color=\"inherit\"\n            onClick={handleClose}\n            data-cypress=\"error-snackbar-close\"\n            size=\"large\"\n          >\n            <StyledIcon>close</StyledIcon>\n          </IconButton>\n        }\n      >\n        {children}\n      </Alert>\n    </Snackbar>\n  )\n}\n\nexport default React.memo(ErrorSnackbar)\n"]}

package/dist/components/ImageCropper/CropModal.d.ts

@@ -4,6 +4,6 @@ declare function CropModal({ imageSrc, onClose, onSave, }: {
     imageSrc: string;
     onClose: () => void;
     onSave: (imageArea: PercentCrop) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CropModal>;
 export default _default;

package/dist/components/ImageCropper/CropModal.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import ImageCropper from '.';
 import scrollingService from '../../services/scrolling-service';
@@ -14,14 +15,7 @@ function CropModal({ imageSrc, onClose, onSave, }) {
             scrollingService.enableScrolling();
         };
     }, []);
-    return (React.createElement("div", { className: "modal is-active" },
-        React.createElement("div", { className: "modal-background-faded" }),
-        React.createElement("div", { className: "ob-crop ob-border-radius" },
-            React.createElement("div", { className: "ob-crop__content ob-border-radius" },
-                React.createElement(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPercent })),
-            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
-                React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button", onClick: onClose }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPercent, onClick: handleSaveCrop }, "Save")))));
+    return (_jsxs("div", { className: "modal is-active", children: [_jsx("div", { className: "modal-background-faded" }), _jsxs("div", { className: "ob-crop ob-border-radius", children: [_jsx("div", { className: "ob-crop__content ob-border-radius", children: _jsx(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPercent }) }), _jsxs("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions", children: [_jsx("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPercent, onClick: handleSaveCrop, children: "Save" })] })] })] }));
 }
 export default React.memo(CropModal);
 //# sourceMappingURL=CropModal.js.map

package/dist/components/ImageCropper/CropModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,GAAG,CAAA;AAC5B,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAG/D,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,kBAAkB;YAAE,OAAM;QAE/B,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,qBAAqB,GACrC,CACE;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,aAGT;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,kBAAkB,EAC7B,OAAO,EAAE,cAAc,WAGhB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper from '.'\nimport scrollingService from '../../services/scrolling-service'\nimport { PercentCrop } from 'react-image-crop'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: PercentCrop) => void\n}) {\n  const [croppedAreaPercent, setCroppedAreaPercent] =\n    React.useState<PercentCrop | null>(null)\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPercent) return\n\n    onSave(croppedAreaPercent)\n  }, [croppedAreaPercent, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div className=\"ob-crop__content ob-border-radius\">\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPercent}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPercent}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}
+{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,GAAG,CAAA;AAC5B,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAG/D,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,kBAAkB;YAAE,OAAM;QAE/B,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,eAAK,SAAS,EAAC,iBAAiB,aAC9B,cAAK,SAAS,EAAC,wBAAwB,GAAO,EAC9C,eAAK,SAAS,EAAC,0BAA0B,aACvC,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,qBAAqB,GACrC,GACE,EACN,eAAK,SAAS,EAAC,uDAAuD,aACpE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,uBAGT,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,kBAAkB,EAC7B,OAAO,EAAE,cAAc,qBAGhB,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper from '.'\nimport scrollingService from '../../services/scrolling-service'\nimport { PercentCrop } from 'react-image-crop'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: PercentCrop) => void\n}) {\n  const [croppedAreaPercent, setCroppedAreaPercent] =\n    React.useState<PercentCrop | null>(null)\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPercent) return\n\n    onSave(croppedAreaPercent)\n  }, [croppedAreaPercent, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div className=\"ob-crop__content ob-border-radius\">\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPercent}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPercent}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}

package/dist/components/ImageCropper/index.d.ts

@@ -7,7 +7,7 @@ declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropCom
     onCropComplete: (croppedAreaPixels: PercentCrop) => void;
     outputAspectRatio?: number;
     cropperHeight?: number;
-}) => React.JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 export declare const getAspectRatio: ({ width, height, }: {
     width: number;

package/dist/components/ImageCropper/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo, useEffect } from 'react';
 import ReactImageCrop from 'react-image-crop';
 import { CropContainer } from './resource-components';
@@ -82,12 +83,9 @@ const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, cro
             };
         }
     }, [imageRef]);
-    return (React.createElement("div", { className: "ob-cropper__container" },
-        React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight, ref: cropperWrapperRef },
-            React.createElement(ReactImageCrop, { crop: crop, aspect: outputAspectRatio, onChange: handleSetCrop, onComplete: handleCropComplete, disabled: disabled, className: clsx('ob-cropper__cropper', {
+    return (_jsx("div", { className: "ob-cropper__container", children: _jsx(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight, ref: cropperWrapperRef, children: _jsx(ReactImageCrop, { crop: crop, aspect: outputAspectRatio, onChange: handleSetCrop, onComplete: handleCropComplete, disabled: disabled, className: clsx('ob-cropper__cropper', {
                     'ob-cropper__cropper-full-height': fullHeight,
-                }), ruleOfThirds: true, keepSelection: true },
-                React.createElement("img", { src: imgSrc, className: "ob-cropper__image", onLoad: handleLoadImage, ref: imageRef })))));
+                }), ruleOfThirds: true, keepSelection: true, children: _jsx("img", { src: imgSrc, className: "ob-cropper__image", onLoad: handleLoadImage, ref: imageRef }) }) }) }));
 };
 export default memo(ImageCropper);
 export const getAspectRatio = ({ width, height, }) => width / height;

package/dist/components/ImageCropper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,cAAqC,MAAM,kBAAkB,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAErD,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,MAAM,WAAW,GAAgB;IAC/B,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,CAAA;AAED,MAAM,6BAA6B,GAAG,CAAC,EACrC,iBAAiB,EACjB,UAAU,EACV,WAAW,GAKZ,EAAe,EAAE;IAChB,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAA;IAE5C,wFAAwF;IACxF,IAAI,KAAa,CAAA;IACjB,IAAI,MAAc,CAAA;IAClB,IAAI,WAAW,IAAI,iBAAiB,EAAE,CAAC;QACrC,oEAAoE;QACpE,MAAM,GAAG,GAAG,CAAA;QACZ,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAA;QACrD,aAAa;QACb,KAAK,GAAG,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,GAAG,CAAA;IAC5C,CAAC;SAAM,CAAC;QACN,8EAA8E;QAC9E,KAAK,GAAG,GAAG,CAAA;QACX,MAAM,cAAc,GAAG,UAAU,GAAG,iBAAiB,CAAA;QACrD,aAAa;QACb,MAAM,GAAG,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,GAAG,CAAA;IAC/C,CAAC;IAED,kBAAkB;IAClB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACvC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;IAExC,OAAO;QACL,IAAI,EAAE,GAAG;QACT,KAAK;QACL,MAAM;QACN,CAAC;QACD,CAAC;KACF,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,aAAa,GAOd,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAmB,GAAG,EAAE,CAC5D,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAC5C,CAAA;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAc,EAAE,EAAE;QAC5D,OAAO,CAAC,CAAC,CAAC,CAAA;IACZ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,CAAC,EAAE,CAAc,EAAE,EAAE;QACpB,cAAc,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAA;IAED,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,EAAE,aAAa,EAAiD,EAAE,EAAE;QACnE,IAAI,CAAC,iBAAiB;YAAE,OAAM;QAC9B,OAAO,CACL,6BAA6B,CAAC;YAC5B,iBAAiB;YACjB,UAAU,EAAE,aAAa,CAAC,KAAK;YAC/B,WAAW,EAAE,aAAa,CAAC,MAAM;SAClC,CAAC,CACH,CAAA;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAA;IAED,8EAA8E;IAC9E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAClD,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;oBAC5B,IAAI,CAAC,iBAAiB,CAAC,OAAO;wBAAE,SAAQ;oBAExC,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;oBAC9C,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAA;oBAEnE,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC;wBAC/D,aAAa,CAAC,KAAK,CAAC,CAAA;oBACtB,CAAC;yBAAM,CAAC;wBACN,aAAa,CAAC,IAAI,CAAC,CAAA;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAA;YACF,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YAExC,OAAO,GAAG,EAAE;gBACV,cAAc,CAAC,UAAU,EAAE,CAAA;YAC7B,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,aAAa,IACZ,SAAS,EAAC,6BAA6B,EACvC,MAAM,EAAE,aAAa,EACrB,GAAG,EAAE,iBAAiB;YAEtB,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,iBAAiB,EACzB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE;oBACrC,iCAAiC,EAAE,UAAU;iBAC9C,CAAC,EACF,YAAY,QACZ,aAAa;gBAEb,6BACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAC,mBAAmB,EAC7B,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,QAAQ,GACb,CACa,CACH,CACZ,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,YAAY,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,MAAM,GAIP,EAAE,EAAE,CAAC,KAAK,GAAG,MAAM,CAAA;AAEpB,MAAM,WAAW,GAAG,CAAC,GAAW,EAA6B,EAAE;IAC7D,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;QACzB,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC,CAAA;QACD,KAAK,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YACxB,MAAM,CAAC,KAAK,CAAC,CAAA;QACf,CAAC,CAAA;QACD,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;QACf,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,EAAE,EAC7C,kBAAkB,EAClB,MAAM,EACN,IAAI,EACJ,QAAQ,GAcT,EAAwB,EAAE;;IACzB,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;IACb,CAAC;IACD,sBAAsB;IACtB,MAAM,KAAK,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAA;IACvC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACnC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;IAC1B,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC5B,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1B,2BAA2B;IAC3B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtD,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAChC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAA;IAChD,MAAM,qBAAqB,GAAG,GAAG,EAAE,CACjC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,CAAA;IAElD,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAA;IAC5C,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAA;IAE7C,aAAa,CAAC,KAAK,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,oBAAoB,EAAE,CAAA;IAC3D,aAAa,CAAC,MAAM,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,qBAAqB,EAAE,CAAA;IAE9D,4DAA4D;IAC5D,UAAU,CAAC,SAAS,CAClB,MAAM;IACN,WAAW;IACX,sBAAsB,EAAE;IACxB,WAAW;IACX,sBAAsB,EAAE;IACxB,eAAe;IACf,oBAAoB,EAAE;IACtB,gBAAgB;IAChB,qBAAqB,EAAE;IACvB,gBAAgB;IAChB,CAAC;IACD,gBAAgB;IAChB,CAAC;IACD,oBAAoB;IACpB,aAAa,CAAC,KAAK;IACnB,qBAAqB;IACrB,aAAa,CAAC,MAAM,CACrB,CAAA;IAED,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,EAAE,QAAQ,CAAC,CAAA;IACd,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { memo, useEffect } from 'react'\nimport ReactImageCrop, { Crop, PercentCrop } from 'react-image-crop'\nimport { CropContainer } from './resource-components'\n\nimport clsx from 'clsx'\nexport { PercentCrop }\nconst defaultCrop: PercentCrop = {\n  unit: '%',\n  height: 100,\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst getDefaultCropFromAspectRatio = ({\n  outputAspectRatio,\n  imageWidth,\n  imageHeight,\n}: {\n  outputAspectRatio: number\n  imageWidth: number\n  imageHeight: number\n}): PercentCrop => {\n  const imageAspect = imageWidth / imageHeight\n\n  // Compute the largest rectangle that fits within the image and matches the aspect ratio\n  let width: number\n  let height: number\n  if (imageAspect >= outputAspectRatio) {\n    // Image is wider than desired aspect: constrain width by the height\n    height = 100\n    const widthInPixels = imageHeight * outputAspectRatio\n    // as percent\n    width = (widthInPixels / imageWidth) * 100\n  } else {\n    // Image is taller/narrower than desired aspect: constrain height by the width\n    width = 100\n    const heightInPixels = imageWidth * outputAspectRatio\n    // as percent\n    height = (heightInPixels / imageHeight) * 100\n  }\n\n  // Center the crop\n  const x = Math.round((100 - width) / 2)\n  const y = Math.round((100 - height) / 2)\n\n  return {\n    unit: '%',\n    width,\n    height,\n    x,\n    y,\n  }\n}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: PercentCrop) => void\n  outputAspectRatio?: number\n  cropperHeight?: number\n}) => {\n  const cropperWrapperRef = React.useRef<HTMLDivElement>(null)\n  const imageRef = React.useRef<HTMLImageElement>(null)\n\n  const [fullHeight, setFullHeight] = React.useState(false)\n\n  const [crop, setCrop] = React.useState<Crop | undefined>(() =>\n    outputAspectRatio ? undefined : defaultCrop,\n  )\n\n  const handleSetCrop = React.useCallback((_, c: PercentCrop) => {\n    setCrop(c)\n  }, [])\n\n  const handleCropComplete = React.useCallback(\n    (_, c: PercentCrop) => {\n      onCropComplete(c)\n    },\n    [onCropComplete],\n  )\n\n  const handleLoadImage = React.useCallback(\n    ({ currentTarget }: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      if (!outputAspectRatio) return\n      setCrop(\n        getDefaultCropFromAspectRatio({\n          outputAspectRatio,\n          imageWidth: currentTarget.width,\n          imageHeight: currentTarget.height,\n        }),\n      )\n    },\n    [outputAspectRatio],\n  )\n\n  // Resize magic to account for images that are larger than the dialog can hold\n  useEffect(() => {\n    if (imageRef.current && cropperWrapperRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (!cropperWrapperRef.current) continue\n\n          const imageElHeight = entry.contentRect.height\n          const cropperWrapperHeight = cropperWrapperRef.current.clientHeight\n\n          if (Math.ceil(imageElHeight) < Math.ceil(cropperWrapperHeight)) {\n            setFullHeight(false)\n          } else {\n            setFullHeight(true)\n          }\n        }\n      })\n      resizeObserver.observe(imageRef.current)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [imageRef])\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n        ref={cropperWrapperRef}\n      >\n        <ReactImageCrop\n          crop={crop}\n          aspect={outputAspectRatio}\n          onChange={handleSetCrop}\n          onComplete={handleCropComplete}\n          disabled={disabled}\n          className={clsx('ob-cropper__cropper', {\n            'ob-cropper__cropper-full-height': fullHeight,\n          })}\n          ruleOfThirds\n          keepSelection\n        >\n          <img\n            src={imgSrc}\n            className=\"ob-cropper__image\"\n            onLoad={handleLoadImage}\n            ref={imageRef}\n          />\n        </ReactImageCrop>\n      </CropContainer>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPercent,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPercent: PercentCrop\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPercent || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n\n  const widthPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.width\n  const heightPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.height\n\n  const sourceXPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.x\n  const sourceYPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.y\n\n  croppedCanvas.width = size?.width ?? widthPercentAsPixels()\n  croppedCanvas.height = size?.height ?? heightPercentAsPixels()\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    sourceXPercentAsPixels(),\n    // source y\n    sourceYPercentAsPixels(),\n    // source width\n    widthPercentAsPixels(),\n    // source height\n    heightPercentAsPixels(),\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    croppedCanvas.width,\n    // destination height\n    croppedCanvas.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useEffect } from 'react'\nimport ReactImageCrop, { Crop, PercentCrop } from 'react-image-crop'\nimport { CropContainer } from './resource-components'\n\nimport clsx from 'clsx'\nexport { PercentCrop }\nconst defaultCrop: PercentCrop = {\n  unit: '%',\n  height: 100,\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst getDefaultCropFromAspectRatio = ({\n  outputAspectRatio,\n  imageWidth,\n  imageHeight,\n}: {\n  outputAspectRatio: number\n  imageWidth: number\n  imageHeight: number\n}): PercentCrop => {\n  const imageAspect = imageWidth / imageHeight\n\n  // Compute the largest rectangle that fits within the image and matches the aspect ratio\n  let width: number\n  let height: number\n  if (imageAspect >= outputAspectRatio) {\n    // Image is wider than desired aspect: constrain width by the height\n    height = 100\n    const widthInPixels = imageHeight * outputAspectRatio\n    // as percent\n    width = (widthInPixels / imageWidth) * 100\n  } else {\n    // Image is taller/narrower than desired aspect: constrain height by the width\n    width = 100\n    const heightInPixels = imageWidth * outputAspectRatio\n    // as percent\n    height = (heightInPixels / imageHeight) * 100\n  }\n\n  // Center the crop\n  const x = Math.round((100 - width) / 2)\n  const y = Math.round((100 - height) / 2)\n\n  return {\n    unit: '%',\n    width,\n    height,\n    x,\n    y,\n  }\n}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: PercentCrop) => void\n  outputAspectRatio?: number\n  cropperHeight?: number\n}) => {\n  const cropperWrapperRef = React.useRef<HTMLDivElement>(null)\n  const imageRef = React.useRef<HTMLImageElement>(null)\n\n  const [fullHeight, setFullHeight] = React.useState(false)\n\n  const [crop, setCrop] = React.useState<Crop | undefined>(() =>\n    outputAspectRatio ? undefined : defaultCrop,\n  )\n\n  const handleSetCrop = React.useCallback((_: unknown, c: PercentCrop) => {\n    setCrop(c)\n  }, [])\n\n  const handleCropComplete = React.useCallback(\n    (_: unknown, c: PercentCrop) => {\n      onCropComplete(c)\n    },\n    [onCropComplete],\n  )\n\n  const handleLoadImage = React.useCallback(\n    ({ currentTarget }: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      if (!outputAspectRatio) return\n      setCrop(\n        getDefaultCropFromAspectRatio({\n          outputAspectRatio,\n          imageWidth: currentTarget.width,\n          imageHeight: currentTarget.height,\n        }),\n      )\n    },\n    [outputAspectRatio],\n  )\n\n  // Resize magic to account for images that are larger than the dialog can hold\n  useEffect(() => {\n    if (imageRef.current && cropperWrapperRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (!cropperWrapperRef.current) continue\n\n          const imageElHeight = entry.contentRect.height\n          const cropperWrapperHeight = cropperWrapperRef.current.clientHeight\n\n          if (Math.ceil(imageElHeight) < Math.ceil(cropperWrapperHeight)) {\n            setFullHeight(false)\n          } else {\n            setFullHeight(true)\n          }\n        }\n      })\n      resizeObserver.observe(imageRef.current)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [imageRef])\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n        ref={cropperWrapperRef}\n      >\n        <ReactImageCrop\n          crop={crop}\n          aspect={outputAspectRatio}\n          onChange={handleSetCrop}\n          onComplete={handleCropComplete}\n          disabled={disabled}\n          className={clsx('ob-cropper__cropper', {\n            'ob-cropper__cropper-full-height': fullHeight,\n          })}\n          ruleOfThirds\n          keepSelection\n        >\n          <img\n            src={imgSrc}\n            className=\"ob-cropper__image\"\n            onLoad={handleLoadImage}\n            ref={imageRef}\n          />\n        </ReactImageCrop>\n      </CropContainer>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPercent,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPercent: PercentCrop\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPercent || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n\n  const widthPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.width\n  const heightPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.height\n\n  const sourceXPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.x\n  const sourceYPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.y\n\n  croppedCanvas.width = size?.width ?? widthPercentAsPixels()\n  croppedCanvas.height = size?.height ?? heightPercentAsPixels()\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    sourceXPercentAsPixels(),\n    // source y\n    sourceYPercentAsPixels(),\n    // source width\n    widthPercentAsPixels(),\n    // source height\n    heightPercentAsPixels(),\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    croppedCanvas.width,\n    // destination height\n    croppedCanvas.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}

package/dist/components/InputClear.js

@@ -1,11 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box, IconButton, Icon } from '@mui/material';
 const InputClear = ({ onClear, select, value }) => {
     if (!value || (Array.isArray(value) && !value.length))
         return null;
-    return (React.createElement(Box, { mr: select ? 2 : 0, alignItems: "center", display: "flex" },
-        React.createElement(IconButton, { size: "small", onClick: onClear },
-            React.createElement(Icon, null, "close"))));
+    return (_jsx(Box, { mr: select ? 2 : 0, alignItems: "center", display: "flex", children: _jsx(IconButton, { size: "small", onClick: onClear, children: _jsx(Icon, { children: "close" }) }) }));
 };
 export default React.memo(InputClear);
 //# sourceMappingURL=InputClear.js.map

package/dist/components/InputClear.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputClear.js","sourceRoot":"","sources":["../../src/components/InputClear.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAS,EAAE,EAAE;IACvD,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAAE,OAAO,IAAI,CAAA;IAClE,OAAO,CACL,oBAAC,GAAG,IAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM;QACzD,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO;YACvC,oBAAC,IAAI,gBAAa,CACP,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Box, IconButton, Icon } from '@mui/material'\ninterface Props {\n  onClear: () => void\n  select?: boolean\n  value: unknown\n}\n\nconst InputClear = ({ onClear, select, value }: Props) => {\n  if (!value || (Array.isArray(value) && !value.length)) return null\n  return (\n    <Box mr={select ? 2 : 0} alignItems=\"center\" display=\"flex\">\n      <IconButton size=\"small\" onClick={onClear}>\n        <Icon>close</Icon>\n      </IconButton>\n    </Box>\n  )\n}\n\nexport default React.memo<Props>(InputClear)\n"]}
+{"version":3,"file":"InputClear.js","sourceRoot":"","sources":["../../src/components/InputClear.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAS,EAAE,EAAE;IACvD,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAAE,OAAO,IAAI,CAAA;IAClE,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,YACzD,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,YACvC,KAAC,IAAI,wBAAa,GACP,GACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Box, IconButton, Icon } from '@mui/material'\ninterface Props {\n  onClear: () => void\n  select?: boolean\n  value: unknown\n}\n\nconst InputClear = ({ onClear, select, value }: Props) => {\n  if (!value || (Array.isArray(value) && !value.length)) return null\n  return (\n    <Box mr={select ? 2 : 0} alignItems=\"center\" display=\"flex\">\n      <IconButton size=\"small\" onClick={onClear}>\n        <Icon>close</Icon>\n      </IconButton>\n    </Box>\n  )\n}\n\nexport default React.memo<Props>(InputClear)\n"]}

package/dist/components/InputField.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { TextField } from '@mui/material';
-type Props = React.ComponentProps<typeof TextField> & {
+import { TextFieldProps } from '@mui/material';
+type Props = TextFieldProps & {
     onClear?: () => void;
+    InputProps?: NonNullable<TextFieldProps['slotProps']>['input'];
 };
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/InputField.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { TextField } from '@mui/material';
 import InputClear from './InputClear';
@@ -7,11 +8,13 @@ const InputField = ({ margin = 'dense', variant = 'outlined', size = 'small', In
             return InputProps;
         if (onClear) {
             return {
-                endAdornment: (React.createElement(InputClear, { select: props.select, value: props.value, onClear: onClear })),
+                endAdornment: (_jsx(InputClear, { select: props.select, value: props.value, onClear: onClear })),
             };
         }
     }, [InputProps, onClear, props.select, props.value]);
-    return (React.createElement(TextField, { variant: variant, margin: margin, InputProps: inputProps, size: size, ...props }));
+    return (_jsx(TextField, { variant: variant, margin: margin, slotProps: {
+            input: inputProps,
+        }, size: size, ...props }));
 };
 export default React.memo(InputField);
 //# sourceMappingURL=InputField.js.map

package/dist/components/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../src/components/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,UAAU,MAAM,cAAc,CAAA;AAMrC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,OAAO,EACd,UAAU,EACV,OAAO,EACP,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,UAAU;YAAE,OAAO,UAAU,CAAA;QACjC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO;gBACL,YAAY,EAAE,CACZ,oBAAC,UAAU,IACT,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,GAChB,CACH;aACF,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEpD,OAAO,CACL,oBAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,KACN,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { TextField } from '@mui/material'\nimport InputClear from './InputClear'\n\ntype Props = React.ComponentProps<typeof TextField> & {\n  onClear?: () => void\n}\n\nconst InputField = ({\n  margin = 'dense',\n  variant = 'outlined',\n  size = 'small',\n  InputProps,\n  onClear,\n  ...props\n}: Props) => {\n  const inputProps = React.useMemo(() => {\n    if (InputProps) return InputProps\n    if (onClear) {\n      return {\n        endAdornment: (\n          <InputClear\n            select={props.select}\n            value={props.value}\n            onClear={onClear}\n          />\n        ),\n      }\n    }\n  }, [InputProps, onClear, props.select, props.value])\n\n  return (\n    <TextField\n      variant={variant}\n      margin={margin}\n      InputProps={inputProps}\n      size={size}\n      {...props}\n    />\n  )\n}\n\nexport default React.memo<Props>(InputField)\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../src/components/InputField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,UAAU,MAAM,cAAc,CAAA;AAOrC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,OAAO,EACd,UAAU,EACV,OAAO,EACP,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,UAAU;YAAE,OAAO,UAAU,CAAA;QACjC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO;gBACL,YAAY,EAAE,CACZ,KAAC,UAAU,IACT,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,GAChB,CACH;aACF,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEpD,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE;YACT,KAAK,EAAE,UAAU;SAClB,EACD,IAAI,EAAE,IAAI,KACN,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { TextField, TextFieldProps } from '@mui/material'\nimport InputClear from './InputClear'\n\ntype Props = TextFieldProps & {\n  onClear?: () => void\n  InputProps?: NonNullable<TextFieldProps['slotProps']>['input']\n}\n\nconst InputField = ({\n  margin = 'dense',\n  variant = 'outlined',\n  size = 'small',\n  InputProps,\n  onClear,\n  ...props\n}: Props) => {\n  const inputProps = React.useMemo(() => {\n    if (InputProps) return InputProps\n    if (onClear) {\n      return {\n        endAdornment: (\n          <InputClear\n            select={props.select}\n            value={props.value}\n            onClear={onClear}\n          />\n        ),\n      }\n    }\n  }, [InputProps, onClear, props.select, props.value])\n\n  return (\n    <TextField\n      variant={variant}\n      margin={margin}\n      slotProps={{\n        input: inputProps,\n      }}\n      size={size}\n      {...props}\n    />\n  )\n}\n\nexport default React.memo<Props>(InputField)\n"]}

package/dist/components/Lists.d.ts

@@ -6,10 +6,5 @@ type ListItemsProps = {
 };
 export declare const OrderedList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & ListItemsProps, React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
 export declare const UnorderedList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & ListItemsProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-type ListProps = {
-    spaced?: boolean;
-};
-export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "p" | "style" | "children" | "classes" | "sx" | "color" | "height" | "width" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "order" | "overflow" | "visibility" | "align" | "top" | "bottom" | "right" | "left" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export {};

package/dist/components/Lists.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material';
 const noPaddingY = {
@@ -28,7 +28,7 @@ export const UnorderedList = styled('ul', {
     };
 });
 function Li(props) {
-    return (React.createElement(Typography, { ...props, component: "li", color: "inherit", variant: "body2" }));
+    return (_jsx(Typography, { ...props, component: "li", color: "inherit", variant: "body2" }));
 }
 export const ListItem = styled(Li, {
     shouldForwardProp: (prop) => prop !== 'spaced',

package/dist/components/Lists.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lists.js","sourceRoot":"","sources":["../../src/components/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAS,MAAM,eAAe,CAAA;AAO7C,MAAM,UAAU,GAAG;IACjB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC;CACjB,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;IACvC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE,SAAS;IACpB,gBAAgB,EAAE,UAAU;CAC7B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,EAAE;IACtC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,gBAAgB;CACvD,CAAC,CAAiB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/C,OAAO;QACL,GAAG,aAAa,CAAC,KAAK,CAAC;QACvB,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;KACtC,CAAA;AACH,CAAC,CAAC,CAAA;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,gBAAgB;CACvD,CAAC,CAAiB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/C,OAAO;QACL,GAAG,aAAa,CAAC,KAAK,CAAC;QACvB,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;KACtC,CAAA;AACH,CAAC,CAAC,CAAA;AAMF,SAAS,EAAE,CAAC,KAA2D;IACrE,OAAO,CACL,oBAAC,UAAU,OAAK,KAAK,EAAE,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,GAAG,CACzE,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,EAAE;IACjC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3B,OAAO;QACL,OAAO,EAAE,WAAW;QACpB,GAAG,CAAC,MAAM;YACR,CAAC,CAAC;gBACE,UAAU,EAAE,GAAG;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport Typography from '@mui/material/Typography'\nimport { styled, Theme } from '@mui/material'\n\ntype ListItemsProps = {\n  children: React.ReactNode\n  disablePadding?: boolean\n}\n\nconst noPaddingY = {\n  paddingTop: 0,\n  paddingBottom: 0,\n}\n\nconst getListStyles = (theme: Theme) => ({\n  margin: 0,\n  padding: theme.spacing(1, 1, 1, 4),\n  listStyle: 'inherit',\n  '& > ul, & > ol': noPaddingY,\n})\n\nexport const OrderedList = styled('ol', {\n  shouldForwardProp: (prop) => prop !== 'disablePadding',\n})<ListItemsProps>(({ theme, disablePadding }) => {\n  return {\n    ...getListStyles(theme),\n    ...(disablePadding ? noPaddingY : {}),\n  }\n})\nexport const UnorderedList = styled('ul', {\n  shouldForwardProp: (prop) => prop !== 'disablePadding',\n})<ListItemsProps>(({ theme, disablePadding }) => {\n  return {\n    ...getListStyles(theme),\n    ...(disablePadding ? noPaddingY : {}),\n  }\n})\n\ntype ListProps = {\n  spaced?: boolean\n}\n\nfunction Li(props: Omit<React.ComponentProps<typeof Typography>, 'ref'>) {\n  return (\n    <Typography {...props} component=\"li\" color=\"inherit\" variant=\"body2\" />\n  )\n}\n\nexport const ListItem = styled(Li, {\n  shouldForwardProp: (prop) => prop !== 'spaced',\n})<ListProps>(({ spaced }) => {\n  return {\n    display: 'list-item',\n    ...(spaced\n      ? {\n          lineHeight: 1.9,\n        }\n      : {}),\n  }\n})\n"]}
+{"version":3,"file":"Lists.js","sourceRoot":"","sources":["../../src/components/Lists.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAS,MAAM,eAAe,CAAA;AAO7C,MAAM,UAAU,GAAG;IACjB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC;CACjB,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;IACvC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE,SAAS;IACpB,gBAAgB,EAAE,UAAU;CAC7B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,EAAE;IACtC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,gBAAgB;CACvD,CAAC,CAAiB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/C,OAAO;QACL,GAAG,aAAa,CAAC,KAAK,CAAC;QACvB,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;KACtC,CAAA;AACH,CAAC,CAAC,CAAA;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,gBAAgB;CACvD,CAAC,CAAiB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/C,OAAO;QACL,GAAG,aAAa,CAAC,KAAK,CAAC;QACvB,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;KACtC,CAAA;AACH,CAAC,CAAC,CAAA;AAMF,SAAS,EAAE,CAAC,KAA2D;IACrE,OAAO,CACL,KAAC,UAAU,OAAK,KAAK,EAAE,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,GAAG,CACzE,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,EAAE;IACjC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3B,OAAO;QACL,OAAO,EAAE,WAAW;QACpB,GAAG,CAAC,MAAM;YACR,CAAC,CAAC;gBACE,UAAU,EAAE,GAAG;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport Typography from '@mui/material/Typography'\nimport { styled, Theme } from '@mui/material'\n\ntype ListItemsProps = {\n  children: React.ReactNode\n  disablePadding?: boolean\n}\n\nconst noPaddingY = {\n  paddingTop: 0,\n  paddingBottom: 0,\n}\n\nconst getListStyles = (theme: Theme) => ({\n  margin: 0,\n  padding: theme.spacing(1, 1, 1, 4),\n  listStyle: 'inherit',\n  '& > ul, & > ol': noPaddingY,\n})\n\nexport const OrderedList = styled('ol', {\n  shouldForwardProp: (prop) => prop !== 'disablePadding',\n})<ListItemsProps>(({ theme, disablePadding }) => {\n  return {\n    ...getListStyles(theme),\n    ...(disablePadding ? noPaddingY : {}),\n  }\n})\nexport const UnorderedList = styled('ul', {\n  shouldForwardProp: (prop) => prop !== 'disablePadding',\n})<ListItemsProps>(({ theme, disablePadding }) => {\n  return {\n    ...getListStyles(theme),\n    ...(disablePadding ? noPaddingY : {}),\n  }\n})\n\ntype ListProps = {\n  spaced?: boolean\n}\n\nfunction Li(props: Omit<React.ComponentProps<typeof Typography>, 'ref'>) {\n  return (\n    <Typography {...props} component=\"li\" color=\"inherit\" variant=\"body2\" />\n  )\n}\n\nexport const ListItem = styled(Li, {\n  shouldForwardProp: (prop) => prop !== 'spaced',\n})<ListProps>(({ spaced }) => {\n  return {\n    display: 'list-item',\n    ...(spaced\n      ? {\n          lineHeight: 1.9,\n        }\n      : {}),\n  }\n})\n"]}

package/dist/components/LoadingWithMessage.js

@@ -1,12 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box, CircularProgress, Grid, Typography } from '@mui/material';
 const Loading = ({ message }) => {
-    return (React.createElement(Box, { p: 2, className: "ob-loading-with-message" },
-        React.createElement(Grid, { container: true, spacing: 2, className: "ob-loading" },
-            React.createElement(Grid, { xs: 12, container: true, item: true, justifyContent: "center" },
-                React.createElement(CircularProgress, null)),
-            message && (React.createElement(Grid, { xs: 12, container: true, item: true, justifyContent: "center", className: "ob-loading-message" },
-                React.createElement(Typography, { variant: "body2", align: "center" }, message))))));
+    return (_jsx(Box, { p: 2, className: "ob-loading-with-message", children: _jsxs(Grid, { container: true, spacing: 2, className: "ob-loading", children: [_jsx(Grid, { size: { xs: 12 }, container: true, justifyContent: "center", children: _jsx(CircularProgress, {}) }), message && (_jsx(Grid, { size: { xs: 12 }, container: true, justifyContent: "center", className: "ob-loading-message", children: _jsx(Typography, { variant: "body2", align: "center", children: message }) }))] }) }));
 };
 export default React.memo(Loading);
 //# sourceMappingURL=LoadingWithMessage.js.map

package/dist/components/LoadingWithMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingWithMessage.js","sourceRoot":"","sources":["../../src/components/LoadingWithMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAKvE,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACrC,OAAO,CACL,oBAAC,GAAG,IAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAC,yBAAyB;QAC5C,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,YAAY;YAChD,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,QAAC,IAAI,QAAC,cAAc,EAAC,QAAQ;gBAClD,oBAAC,gBAAgB,OAAoB,CAChC;YACN,OAAO,IAAI,CACV,oBAAC,IAAI,IACH,EAAE,EAAE,EAAE,EACN,SAAS,QACT,IAAI,QACJ,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAC,oBAAoB;gBAE9B,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,IACvC,OAAO,CACG,CACR,CACR,CACI,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,OAAO,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Box, CircularProgress, Grid, Typography } from '@mui/material'\ntype Props = {\n  message?: string\n}\n\nconst Loading = ({ message }: Props) => {\n  return (\n    <Box p={2} className=\"ob-loading-with-message\">\n      <Grid container spacing={2} className=\"ob-loading\">\n        <Grid xs={12} container item justifyContent=\"center\">\n          <CircularProgress></CircularProgress>\n        </Grid>\n        {message && (\n          <Grid\n            xs={12}\n            container\n            item\n            justifyContent=\"center\"\n            className=\"ob-loading-message\"\n          >\n            <Typography variant=\"body2\" align=\"center\">\n              {message}\n            </Typography>\n          </Grid>\n        )}\n      </Grid>\n    </Box>\n  )\n}\n\nexport default React.memo<Props>(Loading)\n"]}
+{"version":3,"file":"LoadingWithMessage.js","sourceRoot":"","sources":["../../src/components/LoadingWithMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAKvE,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACrC,OAAO,CACL,KAAC,GAAG,IAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAC,yBAAyB,YAC5C,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,YAAY,aAChD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,QAAC,cAAc,EAAC,QAAQ,YACvD,KAAC,gBAAgB,KAAoB,GAChC,EACN,OAAO,IAAI,CACV,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAChB,SAAS,QACT,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAC,oBAAoB,YAE9B,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,YACvC,OAAO,GACG,GACR,CACR,IACI,GACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,OAAO,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Box, CircularProgress, Grid, Typography } from '@mui/material'\ntype Props = {\n  message?: string\n}\n\nconst Loading = ({ message }: Props) => {\n  return (\n    <Box p={2} className=\"ob-loading-with-message\">\n      <Grid container spacing={2} className=\"ob-loading\">\n        <Grid size={{ xs: 12 }} container justifyContent=\"center\">\n          <CircularProgress></CircularProgress>\n        </Grid>\n        {message && (\n          <Grid\n            size={{ xs: 12 }}\n            container\n            justifyContent=\"center\"\n            className=\"ob-loading-message\"\n          >\n            <Typography variant=\"body2\" align=\"center\">\n              {message}\n            </Typography>\n          </Grid>\n        )}\n      </Grid>\n    </Box>\n  )\n}\n\nexport default React.memo<Props>(Loading)\n"]}

package/dist/components/MaterialIcon.d.ts

@@ -1,5 +1,3 @@
 import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<import("@mui/material").IconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "children" | "classes" | "sx" | "color" | "fontSize" | "baseClassName">, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export default _default;
+import { Icon } from '@mui/material';
+export default function MaterialIcon({ className, ref, ...props }: React.ComponentProps<typeof Icon>): import("react/jsx-runtime").JSX.Element;

package/dist/components/MaterialIcon.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@mui/material';
 import clsx from 'clsx';
-export default React.forwardRef(function MaterialIcon({ className, ...props }, ref) {
-    return (React.createElement(Icon, { ref: ref, role: "img", className: clsx('ob-icon', className), "aria-hidden": true, ...props }));
-});
+export default function MaterialIcon({ className, ref, ...props }) {
+    return (_jsx(Icon, { ref: ref, role: "img", className: clsx('ob-icon', className), "aria-hidden": true, ...props }));
+}
 //# sourceMappingURL=MaterialIcon.js.map

package/dist/components/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialIcon.js","sourceRoot":"","sources":["../../src/components/MaterialIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,eAAe,KAAK,CAAC,UAAU,CAG7B,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAClD,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,0BAEjC,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Icon } from '@mui/material'\nimport clsx from 'clsx'\n\nexport default React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof Icon>\n>(function MaterialIcon({ className, ...props }, ref) {\n  return (\n    <Icon\n      ref={ref}\n      role=\"img\"\n      className={clsx('ob-icon', className)}\n      aria-hidden\n      {...props}\n    />\n  )\n})\n"]}
+{"version":3,"file":"MaterialIcon.js","sourceRoot":"","sources":["../../src/components/MaterialIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EAC0B;IAClC,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,0BAEjC,KAAK,GACT,CACH,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { Icon } from '@mui/material'\nimport clsx from 'clsx'\n\nexport default function MaterialIcon({\n  className,\n  ref,\n  ...props\n}: React.ComponentProps<typeof Icon>) {\n  return (\n    <Icon\n      ref={ref}\n      role=\"img\"\n      className={clsx('ob-icon', className)}\n      aria-hidden\n      {...props}\n    />\n  )\n}\n"]}

package/dist/components/NotificationGrid.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare function NotificationGrid({ className, gridClassName, children, }: React.PropsWithChildren<{
     gridClassName: string;
     className: string;
-}>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function NotificationGridItem({ label, value, fullWidth, className, labelClassName, valueClassName, }: {
     label: string;
     value: string | undefined;
@@ -10,4 +10,4 @@ export declare function NotificationGridItem({ label, value, fullWidth, classNam
     className: string;
     labelClassName: string;
     valueClassName: string;
-}): React.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/NotificationGrid.js

@@ -1,14 +1,13 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid } from '@mui/material';
 export function NotificationGrid({ className, gridClassName, children, }) {
-    return (React.createElement("div", { className: `notification ${className}` },
-        React.createElement(Grid, { container: true, spacing: 1, className: gridClassName }, children)));
+    return (_jsx("div", { className: `notification ${className}`, children: _jsx(Grid, { container: true, spacing: 1, className: gridClassName, children: children }) }));
 }
 export function NotificationGridItem({ label, value, fullWidth, className, labelClassName, valueClassName, }) {
     if (!value) {
         return null;
     }
-    return (React.createElement(Grid, { item: true, className: className, sx: (theme) => ({
+    return (_jsxs(Grid, { className: className, sx: (theme) => ({
             flexBasis: '100%',
             flexGrow: 0,
             maxWidth: '100%',
@@ -24,8 +23,6 @@ export function NotificationGridItem({ label, value, fullWidth, className, label
                         maxWidth: '33.33%',
                     },
                 }),
-        }) },
-        React.createElement("label", { className: `is-size-6 has-text-weight-semibold ${labelClassName}` }, label),
-        React.createElement("div", { className: valueClassName }, value)));
+        }), children: [_jsx("label", { className: `is-size-6 has-text-weight-semibold ${labelClassName}`, children: label }), _jsx("div", { className: valueClassName, children: value })] }));
 }
 //# sourceMappingURL=NotificationGrid.js.map

package/dist/components/NotificationGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationGrid.js","sourceRoot":"","sources":["../../src/components/NotificationGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,aAAa,EACb,QAAQ,GAIR;IACA,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,SAAS,EAAE;QACzC,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,IACjD,QAAQ,CACJ,CACH,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EACnC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,cAAc,GAQf;IACC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,QACJ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACd,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,MAAM;YAEhB,GAAG,CAAC,SAAS;gBACX,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,EAAE;wBAC5D,SAAS,EAAE,KAAK;wBAChB,QAAQ,EAAE,KAAK;qBAChB;oBACD,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,EAAE;wBAC5D,SAAS,EAAE,QAAQ;wBACnB,QAAQ,EAAE,QAAQ;qBACnB;iBACF,CAAC;SACP,CAAC;QAEF,+BAAO,SAAS,EAAE,sCAAsC,cAAc,EAAE,IACrE,KAAK,CACA;QACR,6BAAK,SAAS,EAAE,cAAc,IAAG,KAAK,CAAO,CACxC,CACR,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { Grid } from '@mui/material'\n\nexport function NotificationGrid({\n  className,\n  gridClassName,\n  children,\n}: React.PropsWithChildren<{\n  gridClassName: string\n  className: string\n}>) {\n  return (\n    <div className={`notification ${className}`}>\n      <Grid container spacing={1} className={gridClassName}>\n        {children}\n      </Grid>\n    </div>\n  )\n}\n\nexport function NotificationGridItem({\n  label,\n  value,\n  fullWidth,\n  className,\n  labelClassName,\n  valueClassName,\n}: {\n  label: string\n  value: string | undefined\n  fullWidth?: boolean\n  className: string\n  labelClassName: string\n  valueClassName: string\n}) {\n  if (!value) {\n    return null\n  }\n\n  return (\n    <Grid\n      item\n      className={className}\n      sx={(theme) => ({\n        flexBasis: '100%',\n        flexGrow: 0,\n        maxWidth: '100%',\n\n        ...(fullWidth\n          ? {}\n          : {\n              [theme.breakpoints.up('sm').replace('@media', '@container')]: {\n                flexBasis: '50%',\n                maxWidth: '50%',\n              },\n              [theme.breakpoints.up('lg').replace('@media', '@container')]: {\n                flexBasis: '33.33%',\n                maxWidth: '33.33%',\n              },\n            }),\n      })}\n    >\n      <label className={`is-size-6 has-text-weight-semibold ${labelClassName}`}>\n        {label}\n      </label>\n      <div className={valueClassName}>{value}</div>\n    </Grid>\n  )\n}\n"]}
+{"version":3,"file":"NotificationGrid.js","sourceRoot":"","sources":["../../src/components/NotificationGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,aAAa,EACb,QAAQ,GAIR;IACA,OAAO,CACL,cAAK,SAAS,EAAE,gBAAgB,SAAS,EAAE,YACzC,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,YACjD,QAAQ,GACJ,GACH,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EACnC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,cAAc,GAQf;IACC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACd,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,MAAM;YAEhB,GAAG,CAAC,SAAS;gBACX,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,EAAE;wBAC5D,SAAS,EAAE,KAAK;wBAChB,QAAQ,EAAE,KAAK;qBAChB;oBACD,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,EAAE;wBAC5D,SAAS,EAAE,QAAQ;wBACnB,QAAQ,EAAE,QAAQ;qBACnB;iBACF,CAAC;SACP,CAAC,aAEF,gBAAO,SAAS,EAAE,sCAAsC,cAAc,EAAE,YACrE,KAAK,GACA,EACR,cAAK,SAAS,EAAE,cAAc,YAAG,KAAK,GAAO,IACxC,CACR,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { Grid } from '@mui/material'\n\nexport function NotificationGrid({\n  className,\n  gridClassName,\n  children,\n}: React.PropsWithChildren<{\n  gridClassName: string\n  className: string\n}>) {\n  return (\n    <div className={`notification ${className}`}>\n      <Grid container spacing={1} className={gridClassName}>\n        {children}\n      </Grid>\n    </div>\n  )\n}\n\nexport function NotificationGridItem({\n  label,\n  value,\n  fullWidth,\n  className,\n  labelClassName,\n  valueClassName,\n}: {\n  label: string\n  value: string | undefined\n  fullWidth?: boolean\n  className: string\n  labelClassName: string\n  valueClassName: string\n}) {\n  if (!value) {\n    return null\n  }\n\n  return (\n    <Grid\n      className={className}\n      sx={(theme) => ({\n        flexBasis: '100%',\n        flexGrow: 0,\n        maxWidth: '100%',\n\n        ...(fullWidth\n          ? {}\n          : {\n              [theme.breakpoints.up('sm').replace('@media', '@container')]: {\n                flexBasis: '50%',\n                maxWidth: '50%',\n              },\n              [theme.breakpoints.up('lg').replace('@media', '@container')]: {\n                flexBasis: '33.33%',\n                maxWidth: '33.33%',\n              },\n            }),\n      })}\n    >\n      <label className={`is-size-6 has-text-weight-semibold ${labelClassName}`}>\n        {label}\n      </label>\n      <div className={valueClassName}>{value}</div>\n    </Grid>\n  )\n}\n"]}