@gravity-ui/page-constructor 6.3.2-alpha.0 → 6.3.2-alpha.2

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.d.ts

@@ -0,0 +1,10 @@
+interface ItemButtonProps {
+    onRemove: () => void;
+    onReorderUp: () => void;
+    disableReorderUp?: boolean;
+    onReorderDown: () => void;
+    disableReorderDown?: boolean;
+    className?: string;
+}
+declare const ItemButton: ({ className, onRemove, onReorderUp, onReorderDown, disableReorderUp, disableReorderDown, }: ItemButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ItemButton;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../../../utils/cn.js");
+const b = (0, cn_1.editorCn)('array-item-button');
+const ItemButton = ({ className, onRemove, onReorderUp, onReorderDown, disableReorderUp = false, disableReorderDown = false, }) => {
+    const buttonRef = React.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const onMenuItemClickWrapper = React.useCallback((callback) => {
+        return () => {
+            setIsOpen(false);
+            callback();
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b(null, className), ref: buttonRef, onClick: () => setIsOpen(true), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.EllipsisVertical }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { placement: 'bottom-end', anchorRef: buttonRef, open: isOpen, onOutsideClick: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)(uikit_1.Menu, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { theme: 'danger', onClick: onMenuItemClickWrapper(onRemove), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }), children: "Remove" }), (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { disabled: disableReorderUp, onClick: onMenuItemClickWrapper(onReorderUp), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUp }), children: "Reorder Up" }), (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { disabled: disableReorderDown, onClick: onMenuItemClickWrapper(onReorderDown), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowDown }), children: "Reorder Down" })] }) })] }));
+};
+exports.default = ItemButton;
+//# sourceMappingURL=ItemButton.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemButton.js","sourceRoot":"../../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.tsx"],"names":[],"mappings":";;;;AAAA,6CAAiF;AACjF,6CAA4D;AAC5D,qDAA+B;AAE/B,mDAAiD;AAEjD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,mBAAmB,CAAC,CAAC;AAWxC,MAAM,UAAU,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,aAAa,EACb,gBAAgB,GAAG,KAAK,EACxB,kBAAkB,GAAG,KAAK,GACZ,EAAE,EAAE;IAClB,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAoB,EAAE,EAAE;QACtE,OAAO,GAAG,EAAE;YACR,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,wBAAC,KAAK,CAAC,QAAQ,eACX,uBAAC,cAAM,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,YACjF,uBAAC,YAAI,IAAC,IAAI,EAAE,wBAAgB,GAAI,GAC3B,EACT,uBAAC,aAAK,IACF,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAEtC,wBAAC,YAAI,eACD,uBAAC,YAAI,CAAC,IAAI,IACN,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,sBAAsB,CAAC,QAAQ,CAAC,EACzC,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,GAAI,uBAG3B,EACZ,uBAAC,YAAI,CAAC,IAAI,IACN,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,sBAAsB,CAAC,WAAW,CAAC,EAC5C,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,eAAO,GAAI,2BAG1B,EACZ,uBAAC,YAAI,CAAC,IAAI,IACN,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,sBAAsB,CAAC,aAAa,CAAC,EAC9C,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,iBAAS,GAAI,6BAG5B,IACT,GACH,IACK,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import {ArrowDown, ArrowUp, EllipsisVertical, TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon, Menu, Popup} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../../../utils/cn';\n\nconst b = editorCn('array-item-button');\n\ninterface ItemButtonProps {\n    onRemove: () => void;\n    onReorderUp: () => void;\n    disableReorderUp?: boolean;\n    onReorderDown: () => void;\n    disableReorderDown?: boolean;\n    className?: string;\n}\n\nconst ItemButton = ({\n    className,\n    onRemove,\n    onReorderUp,\n    onReorderDown,\n    disableReorderUp = false,\n    disableReorderDown = false,\n}: ItemButtonProps) => {\n    const buttonRef = React.useRef(null);\n    const [isOpen, setIsOpen] = React.useState(false);\n\n    const onMenuItemClickWrapper = React.useCallback((callback: () => void) => {\n        return () => {\n            setIsOpen(false);\n            callback();\n        };\n    }, []);\n\n    return (\n        <React.Fragment>\n            <Button className={b(null, className)} ref={buttonRef} onClick={() => setIsOpen(true)}>\n                <Icon data={EllipsisVertical} />\n            </Button>\n            <Popup\n                placement={'bottom-end'}\n                anchorRef={buttonRef}\n                open={isOpen}\n                onOutsideClick={() => setIsOpen(false)}\n            >\n                <Menu>\n                    <Menu.Item\n                        theme={'danger'}\n                        onClick={onMenuItemClickWrapper(onRemove)}\n                        iconStart={<Icon data={TrashBin} />}\n                    >\n                        Remove\n                    </Menu.Item>\n                    <Menu.Item\n                        disabled={disableReorderUp}\n                        onClick={onMenuItemClickWrapper(onReorderUp)}\n                        iconStart={<Icon data={ArrowUp} />}\n                    >\n                        Reorder Up\n                    </Menu.Item>\n                    <Menu.Item\n                        disabled={disableReorderDown}\n                        onClick={onMenuItemClickWrapper(onReorderDown)}\n                        iconStart={<Icon data={ArrowDown} />}\n                    >\n                        Reorder Down\n                    </Menu.Item>\n                </Menu>\n            </Popup>\n        </React.Fragment>\n    );\n};\n\nexport default ItemButton;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.css

@@ -0,0 +1,3 @@
+.pceditor-boolean-dynamic-field__switch {
+  margin-top: 5px;
+}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.d.ts

@@ -0,0 +1,8 @@
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+interface BooleanProps extends FieldBaseParams {
+    value: string;
+    onUpdate: (value: boolean | undefined) => void;
+    className?: string;
+}
+declare const BooleanDynamicField: ({ title, value, onUpdate, className }: BooleanProps) => import("react/jsx-runtime").JSX.Element;
+export default BooleanDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('boolean-dynamic-field');
+const BooleanDynamicField = ({ title, value, onUpdate, className }) => {
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate, children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { className: b('switch'), checked: Boolean(value), onUpdate: onUpdate }) }));
+};
+exports.default = BooleanDynamicField;
+//# sourceMappingURL=Boolean.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Boolean.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Boolean/Boolean.tsx"],"names":[],"mappings":";;;;AAAA,6CAAyC;AAEzC,gDAA8C;AAC9C,qFAAqE;AAIrE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,uBAAuB,CAAC,CAAC;AAQ5C,MAAM,mBAAmB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAe,EAAE,EAAE;IAC9E,OAAO,CACH,uBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,YACvE,uBAAC,cAAM,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACvE,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import {Switch} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../../../utils/cn';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\nimport './Boolean.scss';\n\nconst b = editorCn('boolean-dynamic-field');\n\ninterface BooleanProps extends FieldBaseParams {\n    value: string;\n    onUpdate: (value: boolean | undefined) => void;\n    className?: string;\n}\n\nconst BooleanDynamicField = ({title, value, onUpdate, className}: BooleanProps) => {\n    return (\n        <FieldBase title={title} className={b(null, className)} onRefresh={onUpdate}>\n            <Switch className={b('switch')} checked={Boolean(value)} onUpdate={onUpdate} />\n        </FieldBase>\n    );\n};\n\nexport default BooleanDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Number/Number.d.ts

@@ -0,0 +1,8 @@
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+interface NumberDynamicFieldProps extends FieldBaseParams {
+    value: string;
+    onUpdate: (value: number | undefined) => void;
+    className?: string;
+}
+declare const NumberDynamicField: ({ title, value, onUpdate, className }: NumberDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Number/Number.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('number-dynamic-field');
+const NumberDynamicField = ({ title, value, onUpdate, className }) => {
+    const onUpdateFunc = (updateValue) => {
+        onUpdate(Number(updateValue));
+    };
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate, children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: value || '', onUpdate: onUpdateFunc }) }));
+};
+exports.default = NumberDynamicField;
+//# sourceMappingURL=Number.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Number/Number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Number/Number.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4C;AAE5C,gDAA8C;AAC9C,qFAAqE;AAErE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,sBAAsB,CAAC,CAAC;AAQ3C,MAAM,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAA0B,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,WAAmB,EAAE,EAAE;QACzC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,YACvE,uBAAC,iBAAS,IAAC,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAI,GACjD,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import {TextInput} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../../../utils/cn';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\nconst b = editorCn('number-dynamic-field');\n\ninterface NumberDynamicFieldProps extends FieldBaseParams {\n    value: string;\n    onUpdate: (value: number | undefined) => void;\n    className?: string;\n}\n\nconst NumberDynamicField = ({title, value, onUpdate, className}: NumberDynamicFieldProps) => {\n    const onUpdateFunc = (updateValue: string) => {\n        onUpdate(Number(updateValue));\n    };\n\n    return (\n        <FieldBase title={title} className={b(null, className)} onRefresh={onUpdate}>\n            <TextInput value={value || ''} onUpdate={onUpdateFunc} />\n        </FieldBase>\n    );\n};\n\nexport default NumberDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.d.ts

@@ -0,0 +1,10 @@
+import { ConfigInput, DynamicFormValue } from "../../../../../../common/types/index.js";
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+interface ObjectDynamicFieldProps extends FieldBaseParams {
+    value: DynamicFormValue;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    blockConfig: Array<ConfigInput>;
+    className?: string;
+}
+declare const ObjectDynamicField: ({ title, value, onUpdate, className, blockConfig, }: ObjectDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default ObjectDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm.js"));
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const ObjectDynamicField = ({ title, value, onUpdate, className, blockConfig, }) => {
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: className, onRefresh: (updatedValue) => onUpdate('', updatedValue), expandable: true, children: (0, jsx_runtime_1.jsx)(uikit_1.Card, { children: (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig, onUpdate: onUpdate }) }) }));
+};
+exports.default = ObjectDynamicField;
+//# sourceMappingURL=Object.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Object.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Object/Object.tsx"],"names":[],"mappings":";;;;AAAA,6CAAuC;AAGvC,+EAA4C;AAC5C,qFAAqE;AASrE,MAAM,kBAAkB,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,GACW,EAAE,EAAE;IAC1B,OAAO,CACH,uBAAC,mBAAS,IACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,YAAY,CAAC,EACvD,UAAU,kBAEV,uBAAC,YAAI,cACD,uBAAC,qBAAW,IAAC,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAChF,GACC,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import {Card} from '@gravity-ui/uikit';\n\nimport {ConfigInput, DynamicFormValue} from '../../../../../../common/types';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\ninterface ObjectDynamicFieldProps extends FieldBaseParams {\n    value: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    blockConfig: Array<ConfigInput>;\n    className?: string;\n}\n\nconst ObjectDynamicField = ({\n    title,\n    value,\n    onUpdate,\n    className,\n    blockConfig,\n}: ObjectDynamicFieldProps) => {\n    return (\n        <FieldBase\n            title={title}\n            className={className}\n            onRefresh={(updatedValue) => onUpdate('', updatedValue)}\n            expandable\n        >\n            <Card>\n                <DynamicForm contentConfig={value} blockConfig={blockConfig} onUpdate={onUpdate} />\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default ObjectDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.css

@@ -0,0 +1,6 @@
+.pceditor-oneof-dynamic-field__radio {
+  margin: 16px 12px;
+}
+.pceditor-oneof-dynamic-field__select {
+  min-width: 80px;
+}

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.d.ts

@@ -0,0 +1,9 @@
+import { DynamicFormValue, OneOfInput } from "../../../../../../common/types/index.js";
+interface OneOfDynamicFieldProps {
+    contentConfig: DynamicFormValue;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    inputConfig: OneOfInput;
+    className?: string;
+}
+declare const OneOfDynamicField: ({ contentConfig, onUpdate, className, inputConfig, }: OneOfDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default OneOfDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../../utils/cn.js");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm.js"));
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('oneof-dynamic-field');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getOneOfContentConfig = (contentConfig, name) => {
+    if (name) {
+        return contentConfig ? contentConfig[name] : {};
+    }
+    return contentConfig;
+};
+const OneOfDynamicField = ({ contentConfig, onUpdate, className, inputConfig, }) => {
+    const defaultValue = inputConfig.options[0].value;
+    const [oneOfMetaValue, setOneOfMetaValue] = React.useState(defaultValue);
+    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);
+    const oneOfChosenOption = React.useMemo(() => inputConfig.options.find(({ value: foundOneOfValue }) => foundOneOfValue === oneOfMetaValue), [inputConfig.options, oneOfMetaValue]);
+    const onUpdateOneOf = React.useCallback((value) => {
+        setOneOfMetaValue(value);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: inputConfig.title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: (0, jsx_runtime_1.jsxs)(uikit_1.Card, { children: [inputConfig.options.length < 4 ? ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { className: b('radio'), options: inputConfig.options.map((option) => ({
+                        content: option.title,
+                        value: option.value,
+                    })), value: oneOfMetaValue, onUpdate: onUpdateOneOf })) : ((0, jsx_runtime_1.jsx)(uikit_1.Select, { options: inputConfig.options.map((option) => ({
+                        content: option.title,
+                        value: option.value,
+                    })), value: oneOfMetaValue ? [oneOfMetaValue] : [], onUpdate: ([selectValue]) => onUpdateOneOf(selectValue), className: b('select') })), oneOfChosenOption && ((0, jsx_runtime_1.jsx)(DynamicForm_1.default, { blockConfig: oneOfChosenOption.properties, contentConfig: oneOfContentConfig, onUpdate: onUpdate }))] }) }));
+};
+exports.default = OneOfDynamicField;
+//# sourceMappingURL=OneOf.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/OneOf/OneOf.tsx"],"names":[],"mappings":";;;;AAAA,6CAAoE;AACpE,qDAA+B;AAG/B,gDAA8C;AAC9C,+EAA4C;AAC5C,qFAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,qBAAqB,CAAC,CAAC;AAS1C,8DAA8D;AAC9D,MAAM,qBAAqB,GAAG,CAAC,aAAkB,EAAE,IAAY,EAAE,EAAE;IAC/D,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,CAAC;IACD,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACvB,aAAa,EACb,QAAQ,EACR,SAAS,EACT,WAAW,GACU,EAAE,EAAE;IACzB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEzE,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAClF,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CACD,WAAW,CAAC,OAAO,CAAC,IAAI,CACpB,CAAC,EAAC,KAAK,EAAE,eAAe,EAAC,EAAE,EAAE,CAAC,eAAe,KAAK,cAAc,CACnE,EACL,CAAC,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,CACxC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACtD,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,uBAAC,mBAAS,IACN,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,EACzC,UAAU,kBAEV,wBAAC,YAAI,eACA,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9B,uBAAC,2BAAmB,IAChB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;wBAC1C,OAAO,EAAE,MAAM,CAAC,KAAK;wBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;qBACtB,CAAC,CAAC,EACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,aAAa,GACzB,CACL,CAAC,CAAC,CAAC,CACA,uBAAC,cAAM,IACH,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;wBAC1C,OAAO,EAAE,MAAM,CAAC,KAAK;wBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;qBACtB,CAAC,CAAC,EACH,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,EAC7C,QAAQ,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EACvD,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,GACxB,CACL,EACA,iBAAiB,IAAI,CAClB,uBAAC,qBAAW,IACR,WAAW,EAAE,iBAAiB,CAAC,UAAU,EACzC,aAAa,EAAE,kBAAkB,EACjC,QAAQ,EAAE,QAAQ,GACpB,CACL,IACE,GACC,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import {Card, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {DynamicFormValue, OneOfInput} from '../../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './OneOf.scss';\n\nconst b = editorCn('oneof-dynamic-field');\n\ninterface OneOfDynamicFieldProps {\n    contentConfig: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    inputConfig: OneOfInput;\n    className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getOneOfContentConfig = (contentConfig: any, name: string) => {\n    if (name) {\n        return contentConfig ? contentConfig[name] : {};\n    }\n    return contentConfig;\n};\n\nconst OneOfDynamicField = ({\n    contentConfig,\n    onUpdate,\n    className,\n    inputConfig,\n}: OneOfDynamicFieldProps) => {\n    const defaultValue = inputConfig.options[0].value;\n\n    const [oneOfMetaValue, setOneOfMetaValue] = React.useState(defaultValue);\n\n    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);\n    const oneOfChosenOption = React.useMemo(\n        () =>\n            inputConfig.options.find(\n                ({value: foundOneOfValue}) => foundOneOfValue === oneOfMetaValue,\n            ),\n        [inputConfig.options, oneOfMetaValue],\n    );\n\n    const onUpdateOneOf = React.useCallback((value: string) => {\n        setOneOfMetaValue(value);\n    }, []);\n\n    return (\n        <FieldBase\n            title={inputConfig.title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            <Card>\n                {inputConfig.options.length < 4 ? (\n                    <SegmentedRadioGroup\n                        className={b('radio')}\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={oneOfMetaValue}\n                        onUpdate={onUpdateOneOf}\n                    />\n                ) : (\n                    <Select\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={oneOfMetaValue ? [oneOfMetaValue] : []}\n                        onUpdate={([selectValue]) => onUpdateOneOf(selectValue)}\n                        className={b('select')}\n                    />\n                )}\n                {oneOfChosenOption && (\n                    <DynamicForm\n                        blockConfig={oneOfChosenOption.properties}\n                        contentConfig={oneOfContentConfig}\n                        onUpdate={onUpdate}\n                    />\n                )}\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default OneOfDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Select/Select.css

@@ -0,0 +1,3 @@
+.pceditor-editor-select-field__select {
+  min-width: 80px;
+}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Select/Select.d.ts

@@ -0,0 +1,11 @@
+import { SelectMultipleInput, SelectSingleInput } from "../../../../../../common/types/index.js";
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+type SelectInput = SelectSingleInput | SelectMultipleInput;
+interface SelectDynamicFieldProps extends FieldBaseParams {
+    input: SelectInput;
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+    className?: string;
+}
+declare const SelectDynamicField: ({ input, value, onUpdate, className }: SelectDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Select/Select.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('editor-select-field');
+const SelectDynamicField = ({ input, value, onUpdate, className }) => {
+    const inputView = input.view || 'radiobutton';
+    return ((0, jsx_runtime_1.jsxs)(FieldBase_1.default, { title: input.title, className: b(null, className), onRefresh: onUpdate, children: [inputView === 'select' && ((0, jsx_runtime_1.jsx)(uikit_1.Select, { placeholder: 'Value', value: value ? [value] : [], onUpdate: ([selectValue]) => onUpdate(selectValue), options: input.enum, className: b('select') })), inputView === 'radiobutton' && ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { options: input.enum, value: value, onUpdate: onUpdate }))] }));
+};
+exports.default = SelectDynamicField;
+//# sourceMappingURL=Select.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Select/Select.tsx"],"names":[],"mappings":";;;;AAAA,6CAA8D;AAG9D,gDAA8C;AAC9C,qFAAqE;AAIrE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,qBAAqB,CAAC,CAAC;AAW1C,MAAM,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAA0B,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,IAAI,aAAa,CAAC;IAE9C,OAAO,CACH,wBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,aAC5E,SAAS,KAAK,QAAQ,IAAI,CACvB,uBAAC,cAAM,IACH,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAC3B,QAAQ,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,EAClD,OAAO,EAAE,KAAK,CAAC,IAAI,EACnB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,GACxB,CACL,EACA,SAAS,KAAK,aAAa,IAAI,CAC5B,uBAAC,2BAAmB,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjF,IACO,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {SelectMultipleInput, SelectSingleInput} from '../../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\nimport './Select.scss';\n\nconst b = editorCn('editor-select-field');\n\ntype SelectInput = SelectSingleInput | SelectMultipleInput;\n\ninterface SelectDynamicFieldProps extends FieldBaseParams {\n    input: SelectInput;\n    value: string;\n    onUpdate: (value: string | undefined) => void;\n    className?: string;\n}\n\nconst SelectDynamicField = ({input, value, onUpdate, className}: SelectDynamicFieldProps) => {\n    const inputView = input.view || 'radiobutton';\n\n    return (\n        <FieldBase title={input.title} className={b(null, className)} onRefresh={onUpdate}>\n            {inputView === 'select' && (\n                <Select\n                    placeholder={'Value'}\n                    value={value ? [value] : []}\n                    onUpdate={([selectValue]) => onUpdate(selectValue)}\n                    options={input.enum}\n                    className={b('select')}\n                />\n            )}\n            {inputView === 'radiobutton' && (\n                <SegmentedRadioGroup options={input.enum} value={value} onUpdate={onUpdate} />\n            )}\n        </FieldBase>\n    );\n};\n\nexport default SelectDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Text/Text.d.ts

@@ -0,0 +1,8 @@
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+interface TextDynamicFieldProps extends FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+    className?: string;
+}
+declare const TextDynamicField: ({ title, value, onUpdate, className }: TextDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default TextDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Text/Text.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('text-dynamic-field');
+const TextDynamicField = ({ title, value, onUpdate, className }) => {
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate, children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: value || '', onUpdate: onUpdate }) }));
+};
+exports.default = TextDynamicField;
+//# sourceMappingURL=Text.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Text/Text.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4C;AAE5C,gDAA8C;AAC9C,qFAAqE;AAErE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,oBAAoB,CAAC,CAAC;AAQzC,MAAM,gBAAgB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE;IACpF,OAAO,CACH,uBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,YACvE,uBAAC,iBAAS,IAAC,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC7C,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import {TextInput} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../../../utils/cn';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\nconst b = editorCn('text-dynamic-field');\n\ninterface TextDynamicFieldProps extends FieldBaseParams {\n    value: string;\n    onUpdate: (value: string | undefined) => void;\n    className?: string;\n}\n\nconst TextDynamicField = ({title, value, onUpdate, className}: TextDynamicFieldProps) => {\n    return (\n        <FieldBase title={title} className={b(null, className)} onRefresh={onUpdate}>\n            <TextInput value={value || ''} onUpdate={onUpdate} />\n        </FieldBase>\n    );\n};\n\nexport default TextDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/TextArea/TextArea.d.ts

@@ -0,0 +1,8 @@
+import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
+interface TextAreaDynamicFieldProps extends FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+    className?: string;
+}
+declare const TextAreaDynamicField: ({ title, value, onUpdate, className }: TextAreaDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default TextAreaDynamicField;

package/build/cjs/editor-v2/components/DynamicForm/Fields/TextArea/TextArea.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
+const b = (0, cn_1.editorCn)('textarea-dynamic-field');
+const TextAreaDynamicField = ({ title, value, onUpdate, className }) => {
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate, children: (0, jsx_runtime_1.jsx)(uikit_1.TextArea, { minRows: 5, maxRows: 20, value: value || '', onUpdate: onUpdate }) }));
+};
+exports.default = TextAreaDynamicField;
+//# sourceMappingURL=TextArea.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/TextArea/TextArea.tsx"],"names":[],"mappings":";;;;AAAA,6CAA2C;AAE3C,gDAA8C;AAC9C,qFAAqE;AAErE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,wBAAwB,CAAC,CAAC;AAQ7C,MAAM,oBAAoB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAA4B,EAAE,EAAE;IAC5F,OAAO,CACH,uBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,YACvE,uBAAC,gBAAQ,IAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACrE,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,oBAAoB,CAAC","sourcesContent":["import {TextArea} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../../../utils/cn';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\nconst b = editorCn('textarea-dynamic-field');\n\ninterface TextAreaDynamicFieldProps extends FieldBaseParams {\n    value: string;\n    onUpdate: (value: string | undefined) => void;\n    className?: string;\n}\n\nconst TextAreaDynamicField = ({title, value, onUpdate, className}: TextAreaDynamicFieldProps) => {\n    return (\n        <FieldBase title={title} className={b(null, className)} onRefresh={onUpdate}>\n            <TextArea minRows={5} maxRows={20} value={value || ''} onUpdate={onUpdate} />\n        </FieldBase>\n    );\n};\n\nexport default TextAreaDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/utils.d.ts

@@ -0,0 +1,3 @@
+import { DynamicFormValue } from "../../../../common/types/index.js";
+export declare const getFullPath: (path: string, name: string) => string;
+export declare const getContent: (contentConfig: DynamicFormValue, path: string) => any;

package/build/cjs/editor-v2/components/DynamicForm/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContent = exports.getFullPath = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const getFullPath = (path, name) => {
+    if (!path && !name) {
+        return '';
+    }
+    if (!path) {
+        return name;
+    }
+    if (!name) {
+        return path;
+    }
+    return path + '.' + name;
+};
+exports.getFullPath = getFullPath;
+const getContent = (contentConfig, path) => {
+    return path ? lodash_1.default.get(contentConfig, path) : contentConfig;
+};
+exports.getContent = getContent;
+//# sourceMappingURL=utils.js.map

package/build/cjs/editor-v2/components/DynamicForm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/DynamicForm/utils.ts"],"names":[],"mappings":";;;;AAAA,4DAAuB;AAIhB,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,EAAE;IACtD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;AAC7B,CAAC,CAAC;AAdW,QAAA,WAAW,eActB;AAEK,MAAM,UAAU,GAAG,CAAC,aAA+B,EAAE,IAAY,EAAE,EAAE;IACxE,OAAO,IAAI,CAAC,CAAC,CAAC,gBAAC,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,UAAU,cAErB","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../../common/types';\n\nexport const getFullPath = (path: string, name: string) => {\n    if (!path && !name) {\n        return '';\n    }\n\n    if (!path) {\n        return name;\n    }\n\n    if (!name) {\n        return path;\n    }\n\n    return path + '.' + name;\n};\n\nexport const getContent = (contentConfig: DynamicFormValue, path: string) => {\n    return path ? _.get(contentConfig, path) : contentConfig;\n};\n"]}

package/build/cjs/editor-v2/components/Panels/Panels.css

@@ -0,0 +1,37 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-panels__button-wrap {
+  --pceditor-panels-button-gap: 8px;
+  position: absolute;
+  z-index: 1000;
+}
+.pceditor-panels__button-wrap_left {
+  bottom: var(--pceditor-panels-button-gap);
+  left: calc(100% + var(--pceditor-panels-button-gap));
+}
+.pceditor-panels__button-wrap_right {
+  bottom: var(--pceditor-panels-button-gap);
+  right: calc(100% + var(--pceditor-panels-button-gap));
+}
+.pceditor-panels__draggable {
+  position: relative;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: var(--g-color-line-generic);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-color-base-background);
+}

package/build/cjs/editor-v2/components/Panels/Panels.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface PanelsProps {
+    left: React.ReactElement;
+    middle: React.ReactElement;
+    right: React.ReactElement;
+}
+export declare const Panels: ({ left, right, middle }: PanelsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/editor-v2/components/Panels/Panels.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panels = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const react_resizable_panels_1 = require("react-resizable-panels");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('panels');
+const Panels = ({ left, right, middle }) => {
+    const leftPanel = React.useRef(null);
+    const rightPanel = React.useRef(null);
+    const expandPanel = (reference) => {
+        const panel = reference.current;
+        if (panel) {
+            panel.expand();
+        }
+    };
+    const isCollapsed = {
+        left: leftPanel.current?.isCollapsed() || false,
+        right: rightPanel.current?.isCollapsed() || false,
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_resizable_panels_1.PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(react_resizable_panels_1.Panel, { ref: leftPanel, collapsible: true, defaultSize: 25, minSize: 15, children: left }), (0, jsx_runtime_1.jsxs)(react_resizable_panels_1.PanelResizeHandle, { className: b('draggable'), children: [(0, jsx_runtime_1.jsx)(icons_1.Grip, { className: b('grip') }), isCollapsed.left && ((0, jsx_runtime_1.jsx)("div", { className: b('button-wrap', { left: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "action", onClick: () => expandPanel(leftPanel), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRightFromLine }) }) }))] }), (0, jsx_runtime_1.jsx)(react_resizable_panels_1.Panel, { minSize: 20, children: middle }), (0, jsx_runtime_1.jsxs)(react_resizable_panels_1.PanelResizeHandle, { className: b('draggable'), children: [(0, jsx_runtime_1.jsx)(icons_1.Grip, { className: b('grip') }), isCollapsed.right && ((0, jsx_runtime_1.jsx)("div", { className: b('button-wrap', { right: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "action", onClick: () => expandPanel(rightPanel), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowLeftFromLine }) }) }))] }), (0, jsx_runtime_1.jsx)(react_resizable_panels_1.Panel, { ref: rightPanel, collapsible: true, minSize: 15, defaultSize: 25, children: right })] }));
+};
+exports.Panels = Panels;
+//# sourceMappingURL=Panels.js.map

package/build/cjs/editor-v2/components/Panels/Panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panels.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Panels/Panels.tsx"],"names":[],"mappings":";;;;;AAAA,6CAA8E;AAC9E,6CAA+C;AAC/C,qDAA+B;AAC/B,mEAAmG;AAEnG,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;AAQtB,MAAM,MAAM,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAc,EAAE,EAAE;IACzD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,CAAC,SAAiD,EAAE,EAAE;QACtE,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC;QAChC,IAAI,KAAK,EAAE,CAAC;YACR,KAAK,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAChB,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,KAAK;QAC/C,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,KAAK;KACpD,CAAC;IAEF,OAAO,CACH,wBAAC,mCAAU,IACP,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,UAAU,EAAC,yBAAyB,EACpC,SAAS,EAAC,YAAY,aAEtB,uBAAC,8BAAK,IAAC,GAAG,EAAE,SAAS,EAAE,WAAW,QAAC,WAAW,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,YAC1D,IAAI,GACD,EACR,wBAAC,0CAAiB,IAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,aACxC,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,EAC7B,WAAW,CAAC,IAAI,IAAI,CACjB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,YAC1C,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,YAErC,uBAAC,YAAI,IAAC,IAAI,EAAE,0BAAkB,GAAI,GAC7B,GACP,CACT,IACe,EACpB,uBAAC,8BAAK,IAAC,OAAO,EAAE,EAAE,YAAG,MAAM,GAAS,EACpC,wBAAC,0CAAiB,IAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,aACxC,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,EAC7B,WAAW,CAAC,KAAK,IAAI,CAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,YAC3C,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,YAEtC,uBAAC,YAAI,IAAC,IAAI,EAAE,yBAAiB,GAAI,GAC5B,GACP,CACT,IACe,EACpB,uBAAC,8BAAK,IAAC,GAAG,EAAE,UAAU,EAAE,WAAW,QAAC,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,YAC3D,KAAK,GACF,IACC,CAChB,CAAC;AACN,CAAC,CAAC;AA3DW,QAAA,MAAM,UA2DjB","sourcesContent":["import {ArrowLeftFromLine, ArrowRightFromLine, Grip} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\nimport {ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './Panels.scss';\n\nconst b = editorCn('panels');\n\ninterface PanelsProps {\n    left: React.ReactElement;\n    middle: React.ReactElement;\n    right: React.ReactElement;\n}\n\nexport const Panels = ({left, right, middle}: PanelsProps) => {\n    const leftPanel = React.useRef<ImperativePanelHandle>(null);\n    const rightPanel = React.useRef<ImperativePanelHandle>(null);\n\n    const expandPanel = (reference: React.RefObject<ImperativePanelHandle>) => {\n        const panel = reference.current;\n        if (panel) {\n            panel.expand();\n        }\n    };\n\n    const isCollapsed = {\n        left: leftPanel.current?.isCollapsed() || false,\n        right: rightPanel.current?.isCollapsed() || false,\n    };\n\n    return (\n        <PanelGroup\n            className={b('panel')}\n            autoSaveId=\"page-constructor-editor\"\n            direction=\"horizontal\"\n        >\n            <Panel ref={leftPanel} collapsible defaultSize={25} minSize={15}>\n                {left}\n            </Panel>\n            <PanelResizeHandle className={b('draggable')}>\n                <Grip className={b('grip')} />\n                {isCollapsed.left && (\n                    <div className={b('button-wrap', {left: true})}>\n                        <Button\n                            className={b('button')}\n                            view=\"action\"\n                            onClick={() => expandPanel(leftPanel)}\n                        >\n                            <Icon data={ArrowRightFromLine} />\n                        </Button>\n                    </div>\n                )}\n            </PanelResizeHandle>\n            <Panel minSize={20}>{middle}</Panel>\n            <PanelResizeHandle className={b('draggable')}>\n                <Grip className={b('grip')} />\n                {isCollapsed.right && (\n                    <div className={b('button-wrap', {right: true})}>\n                        <Button\n                            className={b('button')}\n                            view=\"action\"\n                            onClick={() => expandPanel(rightPanel)}\n                        >\n                            <Icon data={ArrowLeftFromLine} />\n                        </Button>\n                    </div>\n                )}\n            </PanelResizeHandle>\n            <Panel ref={rightPanel} collapsible minSize={15} defaultSize={25}>\n                {right}\n            </Panel>\n        </PanelGroup>\n    );\n};\n"]}

package/build/cjs/editor-v2/components/Sidebar/Sidebar.css

@@ -0,0 +1,24 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-sidebar {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pceditor-sidebar__block {
+  width: 100%;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}

package/build/cjs/editor-v2/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TabsItemProps } from "../Tabs/Tabs.js";
+interface SidebarProps {
+    tabs: TabsItemProps[];
+    defaultTab?: string;
+    top?: React.ElementType[];
+    className?: string;
+}
+export declare const Sidebar: ({ className, tabs, top }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/editor-v2/components/Sidebar/Sidebar.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.js");
+const Tabs_1 = tslib_1.__importDefault(require("../Tabs/Tabs.js"));
+const b = (0, cn_1.editorCn)('sidebar');
+const Sidebar = ({ className, tabs, top = [] }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [top.map((TopComponent, idx) => ((0, jsx_runtime_1.jsx)("div", { className: b('block'), children: (0, jsx_runtime_1.jsx)(TopComponent, {}) }, idx))), (0, jsx_runtime_1.jsx)(Tabs_1.default, { items: tabs })] }));
+};
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=Sidebar.js.map

package/build/cjs/editor-v2/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";;;;;AAEA,0CAAwC;AACxC,mEAAiD;AAIjD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,SAAS,CAAC,CAAC;AASvB,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,GAAG,GAAG,EAAE,EAAe,EAAE,EAAE;IACjE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,GAAG,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,gCAAe,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAChC,uBAAC,YAAY,KAAG,IADV,GAAG,CAEP,CACT,CAAC,EACF,uBAAC,cAAI,IAAC,KAAK,EAAE,IAAI,GAAI,IACnB,CACT,CAAC;AACN,CAAC,CAAC;AAXW,QAAA,OAAO,WAWlB","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport Tabs, {TabsItemProps} from '../Tabs/Tabs';\n\nimport './Sidebar.scss';\n\nconst b = editorCn('sidebar');\n\ninterface SidebarProps {\n    tabs: TabsItemProps[];\n    defaultTab?: string;\n    top?: React.ElementType[];\n    className?: string;\n}\n\nexport const Sidebar = ({className, tabs, top = []}: SidebarProps) => {\n    return (\n        <div className={b(null, className)}>\n            {top.map((TopComponent, idx) => (\n                <div key={idx} className={b('block')}>\n                    <TopComponent />\n                </div>\n            ))}\n            <Tabs items={tabs} />\n        </div>\n    );\n};\n"]}

package/build/cjs/editor-v2/components/StoreViewer/StoreViewer.css

@@ -0,0 +1,29 @@
+.pceditor-store-viewer {
+  background-color: var(--g-color-base-float-heavy);
+  border-radius: 12px;
+  border: 1px solid var(--g-color-line-generic);
+  overflow: hidden;
+  opacity: 0.3;
+}
+.pceditor-store-viewer:hover {
+  opacity: 1;
+}
+.pceditor-store-viewer_open {
+  opacity: 1;
+}
+.pceditor-store-viewer_open .pceditor-store-viewer__box {
+  display: block;
+}
+.pceditor-store-viewer__head {
+  padding: 12px;
+}
+.pceditor-store-viewer__box {
+  max-height: 80vh;
+  overflow: scroll;
+  display: none;
+  min-width: 400px;
+  max-width: 80vw;
+  padding: 12px;
+  background-color: var(--g-color-base-float);
+  white-space: pre;
+}

package/build/cjs/editor-v2/components/StoreViewer/StoreViewer.d.ts

@@ -0,0 +1,6 @@
+interface StoreViewerProps {
+    className?: string;
+    store: object;
+}
+declare const StoreViewer: ({ store, className }: StoreViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default StoreViewer;

package/build/cjs/editor-v2/components/StoreViewer/StoreViewer.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const react_json_view_1 = tslib_1.__importDefault(require("react-json-view"));
+const utils_1 = require("../../../../common/utils.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('store-viewer');
+const StoreViewer = ({ store, className }) => {
+    const [open, setOpen] = React.useState(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ open }, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('head'), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "action", onClick: () => setOpen(!open), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Code }) }) }), (0, jsx_runtime_1.jsx)("div", { className: b('box'), children: (0, jsx_runtime_1.jsx)(react_json_view_1.default, { style: { backgroundColor: 'transparent' }, src: (0, utils_1.removeFn)(store), collapsed: true, theme: "bright:inverted" }) })] }));
+};
+exports.default = StoreViewer;
+//# sourceMappingURL=StoreViewer.js.map

package/build/cjs/editor-v2/components/StoreViewer/StoreViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreViewer.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/StoreViewer/StoreViewer.tsx"],"names":[],"mappings":";;;;AAAA,6CAAuC;AACvC,6CAA+C;AAC/C,qDAA+B;AAC/B,8EAAwC;AAExC,uDAAkD;AAClD,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,cAAc,CAAC,CAAC;AAOnC,MAAM,WAAW,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAAmB,EAAE,EAAE;IACzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,aAChC,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,cAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAC/C,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAI,GAAI,GACf,GACP,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,YACpB,uBAAC,yBAAS,IACN,KAAK,EAAE,EAAC,eAAe,EAAE,aAAa,EAAC,EACvC,GAAG,EAAE,IAAA,gBAAQ,EAAC,KAAK,CAAC,EACpB,SAAS,QACT,KAAK,EAAC,iBAAiB,GACzB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import {Code} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\nimport ReactJson from 'react-json-view';\n\nimport {removeFn} from '../../../../common/utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './StoreViewer.scss';\n\nconst b = editorCn('store-viewer');\n\ninterface StoreViewerProps {\n    className?: string;\n    store: object;\n}\n\nconst StoreViewer = ({store, className}: StoreViewerProps) => {\n    const [open, setOpen] = React.useState(false);\n    return (\n        <div className={b({open}, className)}>\n            <div className={b('head')}>\n                <Button view=\"action\" onClick={() => setOpen(!open)}>\n                    <Icon data={Code} />\n                </Button>\n            </div>\n            <div className={b('box')}>\n                <ReactJson\n                    style={{backgroundColor: 'transparent'}}\n                    src={removeFn(store)}\n                    collapsed\n                    theme=\"bright:inverted\"\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default StoreViewer;\n"]}

package/build/cjs/editor-v2/components/Tabs/Tabs.css

@@ -0,0 +1,26 @@
+.pceditor-tabs {
+  overflow: auto;
+  width: 100%;
+}
+.pceditor-tabs__item {
+  color: var(--g-color-private-black-300);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+}
+.pceditor-tabs__item_active {
+  pointer-events: none;
+  color: var(--g-color-text-primary);
+}
+.pceditor-tabs__tabs-wrapper {
+  width: 100%;
+  border-bottom: 1px solid var(--g-color-line-generic);
+  display: inline-flex;
+  flex-direction: row;
+  padding: 16px 4px;
+}
+.pceditor-tabs__body {
+  flex: 1;
+  border-right: 1px solid var(--g-color-line-generic);
+  overflow-y: auto;
+}