@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/components/SingleImageUpload.js

@@ -1,114 +1,41 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _Image = require("@webiny/app/components/Image");
-
-var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
-
-var _FileManager = require("./FileManager");
-
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ek1tjbh0",
-  label: "ImageUploadWrapper"
-})({
-  position: "relative",
-  ".disabled": {
-    opacity: 0.75,
-    pointerEvents: "none"
-  },
-  ".mdc-floating-label--float-above": {
-    transform: "scale(0.75)",
-    top: 10,
-    left: 10,
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  },
-  ".mdc-text-field-helper-text": {
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  }
-});
-
-var SingleImageUpload = function SingleImageUpload(props) {
-  var className = props.className,
-      value = props.value,
-      validation = props.validation,
-      label = props.label,
-      description = props.description,
-      accept = props.accept,
-      _props$includeFileMet = props.includeFileMeta,
-      includeFileMeta = _props$includeFileMet === void 0 ? false : _props$includeFileMet,
-      maxSize = props.maxSize,
-      imagePreviewProps = props.imagePreviewProps,
-      round = props.round;
-
-  var _ref = validation || {},
-      validationIsValid = _ref.isValid,
-      validationMessage = _ref.message;
-
-  var onChange = (0, React.useCallback)(function (value) {
-    if (!props.onChange) {
-      return;
-    }
-
-    if (value && !includeFileMeta) {
-      props.onChange({
-        id: value.id,
-        src: value.src
-      });
-      return;
-    }
-
-    if (value && includeFileMeta) {
-      props.onChange(value);
-      return;
-    }
-
-    props.onChange(null);
-  }, [props.onChange]);
-  return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-    className: className
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: "mdc-floating-label mdc-floating-label--float-above"
-  }, label), /*#__PURE__*/React.createElement(_FileManager.FileManager, {
-    onChange: onChange,
-    accept: accept,
-    images: !accept,
-    maxSize: maxSize,
-    render: function render(_ref2) {
-      var showFileManager = _ref2.showFileManager;
-      return /*#__PURE__*/React.createElement(Ui.Image, {
-        renderImagePreview: function renderImagePreview(renderImageProps) {
-          return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
-        },
-        style: {
-          width: "100%",
-          height: "auto"
-        },
-        value: value,
-        uploadImage: showFileManager,
-        removeImage: function removeImage() {
-          return onChange(null);
-        },
-        round: round
-      });
-    }
-  }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+import react, { useCallback } from "react";
+import { FileManager } from "../base/ui/FileManager.js";
+import { FileItem, FilePicker } from "@webiny/admin-ui";
+const SingleImageUpload = (props)=>{
+    const { accept, className, description, disabled, includeFileMeta = false, label, maxSize, renderFilePreview, renderTrigger, validation, value, variant, type } = props;
+    const onChange = useCallback((value)=>{
+        if (!props.onChange) return;
+        if (value && !includeFileMeta) return void props.onChange({
+            id: value.id,
+            src: value.src
+        });
+        if (value && includeFileMeta) return void props.onChange(value);
+        props.onChange(null);
+    }, [
+        props.onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        onChange: onChange,
+        accept: accept,
+        images: !accept,
+        maxSize: maxSize,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
+                label: label,
+                description: description,
+                validation: validation,
+                className: className,
+                disabled: disabled,
+                value: value ? FileItem.createFromUrl(value.src) : null,
+                onSelectItem: showFileManager,
+                onRemoveItem: ()=>onChange(null),
+                renderFilePreview: renderFilePreview,
+                renderTrigger: renderTrigger,
+                variant: variant,
+                type: type
+            }))
+    });
 };
+const components_SingleImageUpload = SingleImageUpload;
+export default components_SingleImageUpload;
 
-var _default = SingleImageUpload;
-exports.default = _default;
+//# sourceMappingURL=SingleImageUpload.js.map

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","SingleImageUpload","props","className","value","validation","label","description","accept","includeFileMeta","maxSize","imagePreviewProps","round","validationIsValid","isValid","validationMessage","message","onChange","useCallback","id","src","showFileManager","renderImageProps","width","height"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/Image\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { FileManager, FileManagerFileItem } from \"./FileManager\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport { useCallback } from \"react\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n}\n\nconst SingleImageUpload: React.FC<SingleImageUploadProps> = props => {\n    const {\n        className,\n        value,\n        validation,\n        label,\n        description,\n        accept,\n        includeFileMeta = false,\n        maxSize,\n        imagePreviewProps,\n        round\n    } = props;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <ImageUploadWrapper className={className}>\n            {label && (\n                <div className=\"mdc-floating-label mdc-floating-label--float-above\">{label}</div>\n            )}\n\n            <FileManager\n                onChange={onChange}\n                accept={accept}\n                images={!accept}\n                maxSize={maxSize}\n                render={({ showFileManager }) => (\n                    <Ui.Image\n                        renderImagePreview={renderImageProps => (\n                            <Image {...renderImageProps} {...imagePreviewProps} />\n                        )}\n                        style={{ width: \"100%\", height: \"auto\" }}\n                        value={value}\n                        uploadImage={showFileManager}\n                        removeImage={() => onChange(null)}\n                        round={round}\n                    />\n                )}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </ImageUploadWrapper>\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"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"}
+{"version":3,"file":"components/SingleImageUpload.js","sources":["../../src/components/SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: Pick<FileManagerFileItem, \"id\" | \"src\"> | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"names":["SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","useCallback","FileManager","showFileManager","FilePicker","FileItem"],"mappings":";;;AAkFA,MAAMA,oBAAoB,CAACC;IACvB,MAAM,EACFC,MAAM,EACNC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,KAAK,EACLC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,IAAI,EACP,GAAGb;IAEJ,MAAMc,WAAWC,YACb,CAACJ;QACG,IAAI,CAACX,MAAM,QAAQ,EACf;QAGJ,IAAIW,SAAS,CAACN,iBAAiB,YAC3BL,MAAM,QAAQ,CAAC;YAAE,IAAIW,MAAM,EAAE;YAAE,KAAKA,MAAM,GAAG;QAAC;QAIlD,IAAIA,SAASN,iBAAiB,YAC1BL,MAAM,QAAQ,CAACW;QAInBX,MAAM,QAAQ,CAAC;IACnB,GACA;QAACA,MAAM,QAAQ;KAAC;IAGpB,OAAO,WAAP,GACI,oBAACgB,aAAWA;QACR,UAAUF;QACV,QAAQb;QACR,QAAQ,CAACA;QACT,SAASM;QACT,QAAQ,CAAC,EAAEU,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOZ;gBACP,aAAaH;gBACb,YAAYO;gBACZ,WAAWR;gBACX,UAAUE;gBACV,OAAOO,QAAQQ,SAAS,aAAa,CAACR,MAAM,GAAG,IAAI;gBACnD,cAAcM;gBACd,cAAc,IAAMH,SAAS;gBAC7B,mBAAmBN;gBACnB,eAAeC;gBACf,SAASG;gBACT,MAAMC;;;AAM9B;AAEA,qCAAed"}

package/components/SplitView/SplitView.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
-import { CellProps } from "@webiny/ui/Grid";
-export declare const leftPanel: string;
-interface SplitViewProps {
-    children: React.ReactElement<any> | React.ReactElement<any>[];
-    className?: string;
+import type { ColumnProps } from "@webiny/admin-ui";
+import type { PanelProps, PanelGroupProps } from "../../components/ResizablePanels/index.js";
+interface SplitViewProps extends Omit<PanelGroupProps, "id"> {
+    namespace?: string;
 }
-declare const SplitView: React.FC<SplitViewProps>;
-declare const LeftPanel: React.FC<CellProps>;
-declare const RightPanel: React.FC<CellProps>;
-export { SplitView, LeftPanel, RightPanel };
+export declare const SplitView: ({ children, className, namespace, ...props }: SplitViewProps) => React.JSX.Element;
+interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
+    span?: ColumnProps["span"];
+}
+export declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export {};

package/components/SplitView/SplitView.js

@@ -1,95 +1,55 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.leftPanel = exports.SplitView = exports.RightPanel = exports.LeftPanel = void 0;
-
-var _clone2 = _interopRequireDefault(require("lodash/clone"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _emotion = require("emotion");
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _Helpers = require("@webiny/ui/Helpers");
-
-var grid = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-layout-grid": {
-    padding: 0,
-    backgroundColor: "var(--mdc-theme-background)",
-    ">.mdc-layout-grid__inner": {
-      gridGap: 0
-    }
-  }
-}, "label:grid;");
-var RightPanelWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "em0s1980",
-  label: "RightPanelWrapper"
-})({
-  backgroundColor: "var(--mdc-theme-background)",
-  overflow: "auto",
-  height: "calc(100vh - 70px)"
-});
-var leftPanel = /*#__PURE__*/(0, _emotion.css)({
-  backgroundColor: "var(--mdc-theme-surface)",
-  ">.webiny-data-list": {
-    display: "flex",
-    flexDirection: "column",
-    height: "calc(100vh - 70px)",
-    ".mdc-list": {
-      overflow: "auto"
-    }
-  },
-  ">.mdc-list": {
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "calc(100vh - 70px)",
-    overflow: "auto"
-  }
-}, "label:leftPanel;");
-exports.leftPanel = leftPanel;
-
-var SplitView = function SplitView(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
-    className: (0, _classnames.default)(grid, props.className, "webiny-split-view")
-  }, props.children);
+import { Separator, cn } from "@webiny/admin-ui";
+import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels/index.js";
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import * as __rspack_external_react from "react";
+const SplitView = ({ children, className, namespace = "splitView", ...props })=>{
+    const localStorage = useLocalStorage();
+    const layout = useLocalStorageValue(namespace);
+    const saveLayout = (0, __rspack_external_react.useCallback)((layout)=>{
+        localStorage.set(`${namespace}/panels`, layout);
+    }, [
+        localStorage,
+        namespace
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(PanelGroup, {
+        id: namespace,
+        defaultLayout: layout,
+        className: cn("webiny-split-view", className),
+        onLayoutChanged: saveLayout,
+        ...props
+    }, children);
 };
-
-exports.SplitView = SplitView;
-
-var LeftPanel = function LeftPanel(props) {
-  var propList = (0, _clone2.default)(props);
-
-  if (!propList.hasOwnProperty("span")) {
-    propList.span = 5;
-  }
-
-  return /*#__PURE__*/React.createElement(_Grid.Cell, (0, _Helpers.getClasses)(propList, (0, _classnames.default)(leftPanel, props.className, "webiny-split-view__left-panel")), propList.children);
+const getDefaultSize = (span)=>{
+    const spanValue = "number" == typeof span && span > 0 && span <= 12 ? span : 6;
+    return spanValue / 12 * 100;
 };
-
-exports.LeftPanel = LeftPanel;
-
-var RightPanel = function RightPanel(props) {
-  var propList = (0, _clone2.default)(props);
-
-  if (!propList.hasOwnProperty("span")) {
-    propList.span = 7;
-  }
-
-  return /*#__PURE__*/React.createElement(_Grid.Cell, (0, _Helpers.getClasses)(propList, "webiny-split-view__right-panel"), /*#__PURE__*/React.createElement(RightPanelWrapper, {
-    className: "webiny-split-view__right-panel-wrapper",
-    id: "webiny-split-view-right-panel"
-  }, propList.children));
+const LeftPanel = ({ children, className, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
+        defaultSize: defaultSize,
+        minSize: 10,
+        id: "leftPanel",
+        className: cn("webiny-split-view__right-panel", className),
+        ...props
+    }, children), /*#__PURE__*/ __rspack_external_react.createElement(PanelResizeHandle, {
+        className: "outline-0"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Separator, {
+        orientation: "vertical"
+    })));
+};
+const RightPanel = ({ children, className, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
+    return /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
+        defaultSize: defaultSize,
+        minSize: 30,
+        id: "rightPanel",
+        className: cn("overflow-scroll! webiny-split-view__right-panel", className),
+        ...props,
+        style: {
+            overflowY: "scroll"
+        }
+    }, children);
 };
+export { LeftPanel, RightPanel, SplitView };
 
-exports.RightPanel = RightPanel;
+//# sourceMappingURL=SplitView.js.map

package/components/SplitView/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"names":["grid","css","padding","backgroundColor","gridGap","RightPanelWrapper","styled","overflow","height","leftPanel","display","flexDirection","maxHeight","SplitView","props","classSet","className","children","LeftPanel","propList","hasOwnProperty","span","getClasses","RightPanel"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport classSet from \"classnames\";\nimport { Cell, Grid, CellProps } from \"@webiny/ui/Grid\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { clone } from \"lodash\";\nimport { getClasses } from \"@webiny/ui/Helpers\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst RightPanelWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\nexport const leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\ninterface SplitViewProps {\n    children: React.ReactElement<any> | React.ReactElement<any>[];\n    className?: string;\n}\n\nconst SplitView: React.FC<SplitViewProps> = props => {\n    return (\n        <Grid className={classSet(grid, props.className, \"webiny-split-view\")}>\n            {props.children}\n        </Grid>\n    );\n};\n\nconst LeftPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 5;\n    }\n\n    return (\n        <Cell\n            {...getClasses(\n                propList,\n                classSet(leftPanel, props.className, \"webiny-split-view__left-panel\")\n            )}\n        >\n            {propList.children}\n        </Cell>\n    );\n};\n\nconst RightPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 7;\n    }\n\n    return (\n        <Cell {...getClasses(propList, \"webiny-split-view__right-panel\")}>\n            <RightPanelWrapper\n                className={\"webiny-split-view__right-panel-wrapper\"}\n                id={\"webiny-split-view-right-panel\"}\n            >\n                {propList.children}\n            </RightPanelWrapper>\n        </Cell>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,IAAI,gBAAG,IAAAC,YAAA,EAAI;EACb,qBAAqB;IACjBC,OAAO,EAAE,CADQ;IAEjBC,eAAe,EAAE,6BAFA;IAGjB,4BAA4B;MACxBC,OAAO,EAAE;IADe;EAHX;AADR,CAAJ,gBAAb;AAUA,IAAMC,iBAAiB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACpCH,eAAe,EAAE,6BADmB;EAEpCI,QAAQ,EAAE,MAF0B;EAGpCC,MAAM,EAAE;AAH4B,CAAjB,CAAvB;AAMO,IAAMC,SAAS,gBAAG,IAAAR,YAAA,EAAI;EACzBE,eAAe,EAAE,0BADQ;EAEzB,sBAAsB;IAClBO,OAAO,EAAE,MADS;IAElBC,aAAa,EAAE,QAFG;IAGlBH,MAAM,EAAE,oBAHU;IAIlB,aAAa;MACTD,QAAQ,EAAE;IADD;EAJK,CAFG;EAUzB,cAAc;IACVG,OAAO,EAAE,MADC;IAEVC,aAAa,EAAE,QAFL;IAGVC,SAAS,EAAE,oBAHD;IAIVL,QAAQ,EAAE;EAJA;AAVW,CAAJ,qBAAlB;;;AAuBP,IAAMM,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAE,IAAAC,mBAAA,EAASf,IAAT,EAAec,KAAK,CAACE,SAArB,EAAgC,mBAAhC;EAAjB,GACKF,KAAK,CAACG,QADX,CADJ;AAKH,CAND;;;;AAQA,IAAMC,SAA8B,GAAG,SAAjCA,SAAiC,CAAAJ,KAAK,EAAI;EAC5C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EACQ,IAAAC,mBAAA,EACAH,QADA,EAEA,IAAAJ,mBAAA,EAASN,SAAT,EAAoBK,KAAK,CAACE,SAA1B,EAAqC,+BAArC,CAFA,CADR,EAMKG,QAAQ,CAACF,QANd,CADJ;AAUH,CAhBD;;;;AAkBA,IAAMM,UAA+B,GAAG,SAAlCA,UAAkC,CAAAT,KAAK,EAAI;EAC7C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EAAU,IAAAC,mBAAA,EAAWH,QAAX,EAAqB,gCAArB,CAAV,eACI,oBAAC,iBAAD;IACI,SAAS,EAAE,wCADf;IAEI,EAAE,EAAE;EAFR,GAIKA,QAAQ,CAACF,QAJd,CADJ,CADJ;AAUH,CAhBD"}
+{"version":3,"file":"components/SplitView/SplitView.js","sources":["../../../src/components/SplitView/SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ColumnProps } from \"@webiny/admin-ui\";\nimport { cn, Separator } from \"@webiny/admin-ui\";\nimport type { PanelProps, PanelGroupProps } from \"~/components/ResizablePanels/index.js\";\nimport {\n    Panel,\n    PanelGroup,\n    PanelResizeHandle,\n    type Layout\n} from \"~/components/ResizablePanels/index.js\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { useCallback } from \"react\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"id\"> {\n    namespace?: string;\n}\n\nexport const SplitView = ({\n    children,\n    className,\n    namespace = \"splitView\",\n    ...props\n}: SplitViewProps) => {\n    const localStorage = useLocalStorage();\n\n    const layout = useLocalStorageValue<Layout>(namespace);\n\n    const saveLayout = useCallback(\n        (layout: Layout) => {\n            localStorage.set(`${namespace}/panels`, layout);\n        },\n        [localStorage, namespace]\n    );\n\n    return (\n        <PanelGroup\n            id={namespace}\n            defaultLayout={layout}\n            className={cn(\"webiny-split-view\", className)}\n            onLayoutChanged={saveLayout}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nexport const LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle className={\"outline-0\"}>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nexport const RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"overflow-scroll! webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\" }}\n        >\n            {children}\n        </Panel>\n    );\n};\n"],"names":["SplitView","children","className","namespace","props","localStorage","useLocalStorage","layout","useLocalStorageValue","saveLayout","useCallback","PanelGroup","cn","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Panel","PanelResizeHandle","Separator","RightPanel"],"mappings":";;;;AAiBO,MAAMA,YAAY,CAAC,EACtBC,QAAQ,EACRC,SAAS,EACTC,YAAY,WAAW,EACvB,GAAGC,OACU;IACb,MAAMC,eAAeC;IAErB,MAAMC,SAASC,qBAA6BL;IAE5C,MAAMM,aAAaC,AAAAA,IAAAA,wBAAAA,WAAAA,AAAAA,EACf,CAACH;QACGF,aAAa,GAAG,CAAC,GAAGF,UAAU,OAAO,CAAC,EAAEI;IAC5C,GACA;QAACF;QAAcF;KAAU;IAG7B,OAAO,WAAP,GACI,sCAACQ,YAAUA;QACP,IAAIR;QACJ,eAAeI;QACf,WAAWK,GAAG,qBAAqBV;QACnC,iBAAiBO;QAChB,GAAGL,KAAK;OAERH;AAGb;AAGA,MAAMY,iBAAiB,CAACC;IACpB,MAAMC,YAAY,AAAgB,YAAhB,OAAOD,QAAqBA,OAAO,KAAKA,QAAQ,KAAKA,OAAO;IAC9E,OAAQC,YAAY,KAAM;AAC9B;AAMO,MAAMC,YAAY,CAAC,EAAEf,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAA4B;IAC5E,MAAMa,cAAcb,MAAM,WAAW,IAAIS,eAAeT,MAAM,IAAI,IAAI;IAEtE,OAAO,WAAP,GACI,4FACI,sCAACc,OAAKA;QACF,aAAaD;QACb,SAAS;QACT,IAAG;QACH,WAAWL,GAAG,kCAAkCV;QAC/C,GAAGE,KAAK;OAERH,WAAAA,WAAAA,GAEL,sCAACkB,mBAAiBA;QAAC,WAAW;qBAC1B,sCAACC,WAASA;QAAC,aAAa;;AAIxC;AAEO,MAAMC,aAAa,CAAC,EAAEpB,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAA4B;IAC7E,MAAMa,cAAcb,MAAM,WAAW,IAAIS,eAAeT,MAAM,IAAI,IAAI;IAEtE,OAAO,WAAP,GACI,sCAACc,OAAKA;QACF,aAAaD;QACb,SAAS;QACT,IAAG;QACH,WAAWL,GAAG,mDAAmDV;QAChE,GAAGE,KAAK;QACT,OAAO;YAAE,WAAW;QAAS;OAE5BH;AAGb"}

package/components/SplitView/index.d.ts

@@ -1 +1 @@
-export { SplitView, LeftPanel, RightPanel } from "./SplitView";
+export { SplitView, LeftPanel, RightPanel } from "./SplitView.js";

package/components/SplitView/index.js

@@ -1,25 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "LeftPanel", {
-  enumerable: true,
-  get: function get() {
-    return _SplitView.LeftPanel;
-  }
-});
-Object.defineProperty(exports, "RightPanel", {
-  enumerable: true,
-  get: function get() {
-    return _SplitView.RightPanel;
-  }
-});
-Object.defineProperty(exports, "SplitView", {
-  enumerable: true,
-  get: function get() {
-    return _SplitView.SplitView;
-  }
-});
-
-var _SplitView = require("./SplitView");
+export { LeftPanel, RightPanel, SplitView } from "./SplitView.js";

package/components/TeamAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_TEAMS: import("graphql").DocumentNode;

package/components/TeamAutocomplete/graphql.js

@@ -0,0 +1,19 @@
+import graphql_tag from "graphql-tag";
+const LIST_TEAMS = graphql_tag`
+    query listTeams {
+        security {
+            teams: listTeams {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+            }
+        }
+    }
+`;
+export { LIST_TEAMS };
+
+//# sourceMappingURL=graphql.js.map

package/components/TeamAutocomplete/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TeamAutocomplete/graphql.js","sources":["../../../src/components/TeamAutocomplete/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_TEAMS = gql`\n    query listTeams {\n        security {\n            teams: listTeams {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_TEAMS","gql"],"mappings":";AAEO,MAAMA,aAAaC,WAAG,CAAC;;;;;;;;;;;;;;AAc9B,CAAC"}

package/components/TeamAutocomplete/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+type TeamAutocompleteProps = Omit<React.ComponentProps<typeof AutoComplete>, "options" | "onValueChange"> & {
+    onChange?: (value: string) => void;
+};
+export declare const TeamAutocomplete: ({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element;
+export {};

package/components/TeamAutocomplete/index.js

@@ -0,0 +1,26 @@
+import react, { useCallback, useMemo } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+import { LIST_TEAMS } from "./graphql.js";
+import { useQuery } from "@apollo/react-hooks";
+const TeamAutocomplete = ({ onChange, value, ...props })=>{
+    const { data, loading } = useQuery(LIST_TEAMS);
+    const rawOptions = loading || !data ? [] : data.security.teams.data;
+    const options = useMemo(()=>rawOptions.map((team)=>({
+                label: team.name,
+                value: team.id
+            })), [
+        rawOptions
+    ]);
+    const onValueChange = useCallback((id)=>onChange?.(id), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        ...props,
+        options: options,
+        value: loading ? void 0 : value,
+        onValueChange: onValueChange
+    });
+};
+export { TeamAutocomplete };
+
+//# sourceMappingURL=index.js.map

package/components/TeamAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TeamAutocomplete/index.js","sources":["../../../src/components/TeamAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const TeamAutocomplete = ({ onChange, value, ...props }: TeamAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n    const rawOptions = loading || !data ? [] : data.security.teams.data;\n\n    const options = useMemo(\n        () => rawOptions.map((team: any) => ({ label: team.name, value: team.id })),\n        [rawOptions]\n    );\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            value={loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n};\n"],"names":["TeamAutocomplete","onChange","value","props","data","loading","useQuery","LIST_TEAMS","rawOptions","options","useMemo","team","onValueChange","useCallback","id","AutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAA8B;IACjF,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAEnE,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,gBAAgBC,YAAY,CAACC,KAAeb,WAAWa,KAAK;QAACb;KAAS;IAE5E,OAAO,WAAP,GACI,oBAACc,cAAYA;QACR,GAAGZ,KAAK;QACT,SAASM;QACT,OAAOJ,UAAUW,SAAad;QAC9B,eAAeU;;AAG3B"}

package/components/TeamsMultiAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_TEAMS: import("graphql").DocumentNode;

package/components/TeamsMultiAutocomplete/graphql.js

@@ -0,0 +1,24 @@
+import graphql_tag from "graphql-tag";
+const LIST_TEAMS = graphql_tag`
+    query listTeams {
+        security {
+            teams: listTeams {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+                error {
+                    data
+                    message
+                    code
+                }
+            }
+        }
+    }
+`;
+export { LIST_TEAMS };
+
+//# sourceMappingURL=graphql.js.map

package/components/TeamsMultiAutocomplete/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TeamsMultiAutocomplete/graphql.js","sources":["../../../src/components/TeamsMultiAutocomplete/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_TEAMS = gql`\n    query listTeams {\n        security {\n            teams: listTeams {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n                error {\n                    data\n                    message\n                    code\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_TEAMS","gql"],"mappings":";AAEO,MAAMA,aAAaC,WAAG,CAAC;;;;;;;;;;;;;;;;;;;AAmB9B,CAAC"}

package/components/TeamsMultiAutocomplete/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+type TeamsMultiAutocompleteProps = Omit<React.ComponentProps<typeof MultiAutoComplete>, "options" | "onValuesChange"> & {
+    onChange?: (values: string[]) => void;
+};
+export declare const TeamsMultiAutocomplete: ({ onChange, values, ...props }: TeamsMultiAutocompleteProps) => React.JSX.Element;
+export {};

package/components/TeamsMultiAutocomplete/index.js

@@ -0,0 +1,26 @@
+import react, { useCallback, useMemo } from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+import { LIST_TEAMS } from "./graphql.js";
+import { useQuery } from "@apollo/react-hooks";
+const TeamsMultiAutocomplete = ({ onChange, values, ...props })=>{
+    const { data, loading } = useQuery(LIST_TEAMS);
+    const rawOptions = loading || !data?.security?.teams?.data ? [] : data.security.teams.data;
+    const options = useMemo(()=>rawOptions.map((team)=>({
+                label: team.name,
+                value: team.id
+            })), [
+        rawOptions
+    ]);
+    const onValuesChange = useCallback((ids)=>onChange?.(ids), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        ...props,
+        options: options,
+        values: loading ? void 0 : values,
+        onValuesChange: onValuesChange
+    });
+};
+export { TeamsMultiAutocomplete };
+
+//# sourceMappingURL=index.js.map

package/components/TeamsMultiAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TeamsMultiAutocomplete/index.js","sources":["../../../src/components/TeamsMultiAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamsMultiAutocompleteProps = Omit<\n    React.ComponentProps<typeof MultiAutoComplete>,\n    \"options\" | \"onValuesChange\"\n> & {\n    onChange?: (values: string[]) => void;\n};\n\nexport const TeamsMultiAutocomplete = ({\n    onChange,\n    values,\n    ...props\n}: TeamsMultiAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n    const rawOptions = loading || !data?.security?.teams?.data ? [] : data.security.teams.data;\n\n    const options = useMemo(\n        () => rawOptions.map((team: any) => ({ label: team.name, value: team.id })),\n        [rawOptions]\n    );\n\n    const onValuesChange = useCallback((ids: string[]) => onChange?.(ids), [onChange]);\n\n    return (\n        <MultiAutoComplete\n            {...props}\n            options={options}\n            values={loading ? undefined : (values as string[] | undefined)}\n            onValuesChange={onValuesChange}\n        />\n    );\n};\n"],"names":["TeamsMultiAutocomplete","onChange","values","props","data","loading","useQuery","LIST_TEAMS","rawOptions","options","useMemo","team","onValuesChange","useCallback","ids","MultiAutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,yBAAyB,CAAC,EACnCC,QAAQ,EACRC,MAAM,EACN,GAAGC,OACuB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,MAAM,UAAU,OAAO,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAE1F,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,iBAAiBC,YAAY,CAACC,MAAkBb,WAAWa,MAAM;QAACb;KAAS;IAEjF,OAAO,WAAP,GACI,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAASM;QACT,QAAQJ,UAAUW,SAAad;QAC/B,gBAAgBU;;AAG5B"}

package/components/Wcp.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface ChildrenProps {
+    children: React.ReactNode;
+}
+declare function CanUseMultiTenancy({ children }: ChildrenProps): React.JSX.Element | null;
+declare function CanUseTeams({ children }: ChildrenProps): React.JSX.Element | null;
+declare function CanUsePrivateFiles({ children }: ChildrenProps): React.JSX.Element | null;
+declare function CanUseFileManagerThreatDetection({ children }: ChildrenProps): React.JSX.Element | null;
+declare function CanUseWorkflows({ children }: ChildrenProps): React.JSX.Element | null;
+declare function CanUseHcmsFieldPermissions({ children }: ChildrenProps): React.JSX.Element | null;
+export declare const Wcp: {
+    CanUseMultiTenancy: typeof CanUseMultiTenancy;
+    CanUseTeams: typeof CanUseTeams;
+    CanUsePrivateFiles: typeof CanUsePrivateFiles;
+    CanUseFileManagerThreatDetection: typeof CanUseFileManagerThreatDetection;
+    CanUseWorkflows: typeof CanUseWorkflows;
+    CanUseHcmsFieldPermissions: typeof CanUseHcmsFieldPermissions;
+};
+export {};