@it-consultis/page-builder 1.1.34

package/controls/GradientColorPicker/GradientColorPicker.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@mui/material/styles/styled.js"));
+var _react = require("react");
+var _reactColorful = require("react-colorful");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PreviewSpan = (0, _styled.default)('span')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  border: '1px solid #ccc',
+  height: 64,
+  position: 'relative',
+  '&:after': {
+    content: '" "',
+    position: 'absolute',
+    backgroundImage: `
+    repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0),
+    repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0)`,
+    backgroundPosition: '0 0,24px 24px',
+    backgroundSize: '48px 48px',
+    inset: '1px',
+    zIndex: -1
+  }
+}));
+function GradientColorPicker({
+  current = '',
+  onChange,
+  label = 'Gradient Color Picker',
+  presets
+}) {
+  const [showPicker, setShowPicker] = (0, _react.useState)(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    onMouseLeave: () => {
+      if (showPicker) setShowPicker(false);
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+      style: {
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: () => setShowPicker(!showPicker),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewSpan, {
+        style: {
+          background: current
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            color: '#fff',
+            mixBlendMode: 'difference'
+          },
+          children: current
+        })
+      })
+    }), showPicker &&
+    /*#__PURE__*/
+    // Note: react-colorful types may be incompatible with React 19
+    (0, _jsxRuntime.jsx)(_reactColorful.HexAlphaColorPicker, {
+      color: current,
+      onChange: val => onChange(val)
+    })]
+  });
+}
+var _default = exports.default = GradientColorPicker;

package/controls/GradientColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+import GradientColorPicker from './GradientColorPicker';
+export default GradientColorPicker;

package/controls/GradientColorPicker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _GradientColorPicker = _interopRequireDefault(require("./GradientColorPicker"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _GradientColorPicker.default;

package/controls/HeadingControl/HeadingControl.d.ts

@@ -0,0 +1,14 @@
+export declare const headingAttributes: readonly ["Element", "FontSize", "DesktopFontSize", "LineHeight", "DesktopLineHeight", "FontWeight", "DesktopFontWeight", "LetterSpacing", "DesktopLetterSpacing"];
+export type HeadingAttribute = (typeof headingAttributes)[number];
+export type HeadingControlData = {
+    content: string;
+    attributes: {
+        [key in HeadingAttribute]: string;
+    };
+};
+export declare const defaultHeadingData: HeadingControlData;
+export default function HeadingControl({ label, data, onChange }: {
+    label?: string;
+    data: HeadingControlData;
+    onChange: <T extends keyof HeadingControlData>(key: T, value: HeadingControlData[T]) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/controls/HeadingControl/HeadingControl.js

@@ -0,0 +1,251 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeadingControl;
+exports.headingAttributes = exports.defaultHeadingData = void 0;
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField/TextField.js"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme.js"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const headingAttributes = exports.headingAttributes = ['Element', 'FontSize', 'DesktopFontSize', 'LineHeight', 'DesktopLineHeight', 'FontWeight', 'DesktopFontWeight', 'LetterSpacing', 'DesktopLetterSpacing'];
+// 定义一个泛型类型，用于生成带前缀的类型
+// export type PrefixHeadingData<P extends string> = {
+//     [K in keyof HeadingControlData as `${P}${K & string}`]: HeadingControlData[K];
+// };
+
+const defaultHeadingData = exports.defaultHeadingData = {
+  content: '',
+  attributes: {
+    Element: 'h2',
+    FontSize: '32px',
+    LineHeight: '40px',
+    FontWeight: '350',
+    LetterSpacing: '0px',
+    DesktopFontSize: '56px',
+    DesktopLineHeight: '72px',
+    DesktopFontWeight: '350',
+    DesktopLetterSpacing: '0px'
+  }
+};
+function HeadingControl({
+  label = 'Title',
+  data,
+  onChange
+}) {
+  const theme = (0, _useTheme.default)();
+  const [showSettings, setShowSettings] = (0, _react.useState)(false);
+  const toggleSettings = () => {
+    setShowSettings(prev => !prev);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      style: {
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: '1px solid #eee',
+        padding: '8px 0'
+      },
+      onClick: toggleSettings,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          fontWeight: 'bold',
+          textTransform: 'uppercase'
+        },
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        style: {
+          display: 'flex',
+          gap: 16
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {
+          style: {
+            color: showSettings ? theme.palette.grey[500] : theme.palette.primary.main
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Settings.default, {
+          style: {
+            color: showSettings ? theme.palette.primary.main : theme.palette.grey[500]
+          }
+        })]
+      })]
+    }), !showSettings && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      label: "Title",
+      multiline: true,
+      value: data.content,
+      onChange: e => onChange('content', e.target.value)
+    }), showSettings && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 0'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          style: {
+            width: '120px',
+            fontWeight: 'bold'
+          },
+          children: "Element"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+          style: {
+            border: '1px solid #ccc',
+            padding: '5px 10px',
+            borderRadius: '4px'
+          },
+          defaultValue: data.attributes.Element,
+          onChange: e => {
+            onChange('attributes', {
+              ...data.attributes,
+              Element: e.target.value
+            });
+          },
+          children: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'].map(el => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: el.toLowerCase(),
+            children: el
+          }, el))
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 0'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          style: {
+            width: '120px',
+            fontWeight: 'bold'
+          },
+          children: "Font Size"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Desktop",
+          size: "small",
+          value: data.attributes.DesktopFontSize,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            DesktopFontSize: e.target.value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Mobile",
+          size: "small",
+          value: data.attributes.FontSize,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            FontSize: e.target.value
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 0'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          style: {
+            width: '120px',
+            fontWeight: 'bold'
+          },
+          children: "Line Height"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Desktop",
+          size: "small",
+          value: data.attributes.DesktopLineHeight,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            DesktopLineHeight: e.target.value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Mobile",
+          size: "small",
+          value: data.attributes.LineHeight,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            LineHeight: e.target.value
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 0'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          style: {
+            width: '120px',
+            fontWeight: 'bold'
+          },
+          children: "Font Weight"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Desktop",
+          size: "small",
+          value: data.attributes.DesktopFontWeight,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            DesktopFontWeight: e.target.value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Mobile",
+          size: "small",
+          value: data.attributes.FontWeight,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            FontWeight: e.target.value
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 0'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          style: {
+            width: '120px',
+            fontWeight: 'bold'
+          },
+          children: "Spacing"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Desktop",
+          size: "small",
+          value: data.attributes.DesktopLetterSpacing,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            DesktopLetterSpacing: e.target.value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: "Mobile",
+          size: "small",
+          value: data.attributes.LetterSpacing,
+          onChange: e => onChange('attributes', {
+            ...data.attributes,
+            LetterSpacing: e.target.value
+          })
+        })]
+      })]
+    })]
+  });
+}

package/controls/HeadingControl/HeadingView.d.ts

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from 'react';
+import { HeadingControlData } from './HeadingControl';
+/**
+ * @example
+ * // use the code below in your block view.
+ * <HeadingView
+ *    data={data.title}
+ *    className="whitespace-pre-line
+ *    text-[length:var(--fontsize)] lg:text-[length:var(--desktop-fontsize)]
+ *    leading-[--line-height] lg:leading-[--desktop-line-height]
+ *    font-[--font-weight] lg:font-[--desktop-font-weight]
+ *    tracking-[--letter-spacing] lg:tracking-[--desktop-letter-spacing]"
+ * />
+ */
+export default function HeadingView({ data, className }: {
+    data: HeadingControlData;
+    className?: HTMLAttributes<HTMLHeadingElement>['className'];
+}): React.ReactElement<{
+    style: React.CSSProperties;
+    className: string;
+}, string | React.JSXElementConstructor<any>>;

package/controls/HeadingControl/HeadingView.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeadingView;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @example
+ * // use the code below in your block view.
+ * <HeadingView
+ *    data={data.title}
+ *    className="whitespace-pre-line
+ *    text-[length:var(--fontsize)] lg:text-[length:var(--desktop-fontsize)]
+ *    leading-[--line-height] lg:leading-[--desktop-line-height]
+ *    font-[--font-weight] lg:font-[--desktop-font-weight]
+ *    tracking-[--letter-spacing] lg:tracking-[--desktop-letter-spacing]"
+ * />
+ */
+function HeadingView({
+  data,
+  className
+}) {
+  const {
+    content,
+    attributes
+  } = data;
+  return /*#__PURE__*/_react.default.createElement(attributes.Element || 'p', {
+    style: {
+      '--fontsize': attributes.FontSize,
+      '--desktop-fontsize': attributes.DesktopFontSize,
+      '--line-height': attributes.LineHeight,
+      '--desktop-line-height': attributes.DesktopLineHeight,
+      '--font-weight': attributes.FontWeight,
+      '--desktop-font-weight': attributes.DesktopFontWeight,
+      '--letter-spacing': attributes.LetterSpacing,
+      '--desktop-letter-spacing': attributes.DesktopLetterSpacing
+    },
+    className: (0, _clsx.default)(className, 'whitespace-pre-line', 'text-[length:var(--fontsize)] lg:text-[length:var(--desktop-fontsize)]', 'leading-[--line-height] lg:leading-[--desktop-line-height]', 'font-[--font-weight] lg:font-[--desktop-font-weight]', 'tracking-[--letter-spacing] lg:tracking-[--desktop-letter-spacing]')
+  }, content);
+}

package/controls/HeadingControl/index.d.ts

@@ -0,0 +1,4 @@
+import HeadingControl from './HeadingControl';
+export { defaultHeadingData } from './HeadingControl';
+export type { HeadingControlData } from './HeadingControl';
+export default HeadingControl;

package/controls/HeadingControl/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "defaultHeadingData", {
+  enumerable: true,
+  get: function () {
+    return _HeadingControl.defaultHeadingData;
+  }
+});
+var _HeadingControl = _interopRequireWildcard(require("./HeadingControl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _HeadingControl.default;

package/controls/MediaLibraryControl/FileBrowserDialog.d.ts

@@ -0,0 +1,14 @@
+import { DialogProps } from '@mui/material';
+import { Object as BrowserObject, Permissions } from 'itc-file-browser';
+import React from 'react';
+export type FileBrowserDialogProps = {
+    open: boolean;
+    onClose(): void;
+    onSelect(files: BrowserObject[]): void;
+    permissions: Permissions;
+    cardinality: number;
+    container?: DialogProps['container'];
+    allowedExtensions: string[];
+};
+declare const FileBrowserDialog: React.FC<FileBrowserDialogProps>;
+export default FileBrowserDialog;

package/controls/MediaLibraryControl/FileBrowserDialog.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress/CircularProgress.js"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog/Dialog.js"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent/DialogContent.js"));
+var _colors = require("@mui/material/colors");
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _styles = require("@mui/material/styles");
+var _itcFileBrowser = _interopRequireDefault(require("itc-file-browser"));
+var _react2 = _interopRequireWildcard(require("react"));
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREFIX = 'FileBrowserDialog';
+const classes = {
+  root: `${PREFIX}-root`,
+  dialogTitle: `${PREFIX}-dialogTitle`,
+  dialogContent: `${PREFIX}-dialogContent`
+};
+const Root = (0, _styles.styled)(_Dialog.default)(({
+  theme
+}) => (0, _react.css)`
+  & {
+
+  }
+
+  .${classes.dialogTitle} {
+    border-bottom: 1px solid ${_colors.grey[300]};
+  }
+
+  .${classes.dialogContent} {
+    padding: 0;
+  }
+
+  .FileBrowser-main {
+    padding: 0;
+    .FileBrowserActions-root,
+    .Header-root {
+      padding-left: ${theme.spacing(2)};
+      padding-right: ${theme.spacing(2)};
+    }
+  }
+`);
+const FileBrowserDialog = props => {
+  const {
+    open,
+    onClose,
+    container,
+    onSelect,
+    cardinality,
+    permissions,
+    allowedExtensions
+  } = props;
+  const [selectedFiles, setSelectedFiles] = (0, _react2.useState)([]);
+  const [loading, setLoading] = (0, _react2.useState)(false);
+  const storage = (0, _store.useObjectStorage)();
+  const handleChooseFiles = async chosenObjects => {
+    onSelect(chosenObjects.slice(0, cardinality));
+    onClose();
+  };
+  (0, _react2.useEffect)(() => {
+    if (!open) {
+      setSelectedFiles([]);
+      setLoading(false);
+    }
+  }, [open]);
+  if (!storage) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      className: classes.root,
+      open: open,
+      onClose: onClose,
+      container: container,
+      PaperProps: {
+        sx: {
+          position: 'relative',
+          width: '80vw',
+          maxWidth: '90vw',
+          height: '80%'
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+        className: classes.dialogTitle,
+        children: "Unable to add or select media. No storage adapter provided."
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    className: classes.root,
+    open: open,
+    onClose: onClose,
+    container: container,
+    PaperProps: {
+      sx: {
+        position: 'relative',
+        width: '80vw',
+        maxWidth: '90vw',
+        height: '80%'
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+      className: classes.dialogTitle,
+      children: "Add or select media"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContent.default, {
+      className: classes.dialogContent,
+      children: [open && selectedFiles.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_itcFileBrowser.default, {
+        portalContainer: container,
+        onClose: onClose,
+        allowedExtensions: allowedExtensions,
+        onChooseFiles: handleChooseFiles,
+        adapter: storage,
+        viewMode: "grid",
+        permissions: permissions
+      }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'rgba(255 255 255 / 0.5)'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+      })]
+    })]
+  });
+};
+var _default = exports.default = FileBrowserDialog;

package/controls/MediaLibraryControl/MediaLibraryControl.d.ts

@@ -0,0 +1,38 @@
+import { Object as FileBrowserObject, ObjectMeta } from 'itc-file-browser';
+import React from 'react';
+import { FileBrowserDialogProps } from './FileBrowserDialog';
+export type MediaType = 'image' | 'document' | 'video';
+export type MediaItem = FileBrowserObject & {
+    meta?: ObjectMeta;
+    settings?: {
+        version: number;
+        filter: {
+            name: string;
+            value: number;
+        };
+    };
+};
+type MediaControlData<Cardinality extends number> = Cardinality extends 1 ? MediaItem | null : MediaItem[];
+type MediaControlProps<Cardinality extends number = number> = {
+    cardinality?: Cardinality;
+    onChange(arg: MediaControlData<Cardinality>): void;
+    initialData: MediaControlData<Cardinality>;
+    type?: MediaType;
+    label: React.ReactNode;
+    required?: boolean;
+    permissions?: FileBrowserDialogProps['permissions'];
+    mediaGridItemSize?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    itemActions?: React.FC<{
+        onChange(media: MediaItem): void;
+    }>;
+    disableFilters?: boolean;
+    className?: string | (string | Record<string, any>)[];
+};
+declare const MediaControl: <Cardinality extends number = 1>(props: MediaControlProps<Cardinality>) => React.ReactElement;
+export default MediaControl;