@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

package/build/cjs/lib/core/components/View/hooks/useComponents.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponents = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const react_is_1 = require("react-is");
+const helpers_1 = require("../../../helpers");
+const helpers_2 = require("../helpers");
+const _1 = require("./");
+const useComponents = (spec) => {
+    var _a, _b;
+    const { config } = (0, _1.useDynamicFormsCtx)();
+    const { views, layouts } = react_1.default.useMemo(() => {
+        if ((0, helpers_2.isCorrectViewConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
+            return config[spec.type];
+        }
+        return {};
+    }, [config, spec]);
+    const viewEntity = react_1.default.useMemo(() => {
+        if (views) {
+            const entity = views[spec.viewSpec.type];
+            if ((0, react_is_1.isValidElementType)(entity === null || entity === void 0 ? void 0 : entity.Component)) {
+                return entity;
+            }
+        }
+        return;
+    }, [views, (_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.type]);
+    const Layout = react_1.default.useMemo(() => {
+        if (layouts && lodash_1.default.isString(spec.viewSpec.layout)) {
+            const Component = layouts[spec.viewSpec.layout];
+            if ((0, react_is_1.isValidElementType)(Component)) {
+                return Component;
+            }
+        }
+        return;
+    }, [layouts, (_b = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _b === void 0 ? void 0 : _b.layout]);
+    return { viewEntity, Layout };
+};
+exports.useComponents = useComponents;

package/build/cjs/lib/core/components/View/hooks/useCreateContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const createContext = lodash_1.default.once(() => react_1.default.createContext({}));
+const useCreateContext = () => createContext();
+exports.useCreateContext = useCreateContext;

package/build/cjs/lib/core/components/View/hooks/useDynamicFormsCtx.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicFormsCtx = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const _1 = require("./");
+const useDynamicFormsCtx = () => {
+    const DynamicFormsCtx = (0, _1.useCreateContext)();
+    const context = react_1.default.useContext(DynamicFormsCtx);
+    return context;
+};
+exports.useDynamicFormsCtx = useDynamicFormsCtx;

package/build/cjs/lib/core/components/View/hooks/useMonaco.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMonaco = void 0;
+const useDynamicFormsCtx_1 = require("./useDynamicFormsCtx");
+const useMonaco = () => (0, useDynamicFormsCtx_1.useDynamicFormsCtx)().Monaco;
+exports.useMonaco = useMonaco;

package/build/cjs/lib/core/components/View/hooks/useRender.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRender = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const react_is_1 = require("react-is");
+const helpers_1 = require("../../../helpers");
+const useRender = ({ value, name, spec, viewEntity, Layout, Link, }) => {
+    const render = react_1.default.useMemo(() => {
+        var _a;
+        if (viewEntity && (0, helpers_1.isCorrectSpec)(spec) && lodash_1.default.isString(name)) {
+            const currentValue = name ? lodash_1.default.get(value, name) : value;
+            const linkValue = (0, react_is_1.isValidElementType)(Link) && ((_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.link) ? (react_1.default.createElement(Link, { value: currentValue, link: spec.viewSpec.link })) : undefined;
+            if (viewEntity.independent) {
+                const InputComponent = viewEntity.Component;
+                return (react_1.default.createElement(InputComponent, { spec: spec, name: name, Layout: Layout, value: currentValue, linkValue: linkValue }));
+            }
+            const InputComponent = viewEntity.Component;
+            const input = (react_1.default.createElement(InputComponent, { spec: spec, name: name, value: currentValue, linkValue: linkValue }));
+            if (Layout) {
+                return (react_1.default.createElement(Layout, { spec: spec, name: name, value: currentValue }, input));
+            }
+            return input;
+        }
+        return null;
+    }, [spec, name, value, viewEntity, Layout, Link]);
+    return render;
+};
+exports.useRender = useRender;

package/build/cjs/lib/core/components/View/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DynamicView"), exports);
+tslib_1.__exportStar(require("./ViewController"), exports);
+tslib_1.__exportStar(require("./helpers"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/lib/core/components/View/types/array.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/boolean.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/config.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/context.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./array"), exports);
+tslib_1.__exportStar(require("./boolean"), exports);
+tslib_1.__exportStar(require("./config"), exports);
+tslib_1.__exportStar(require("./context"), exports);
+tslib_1.__exportStar(require("./layout"), exports);
+tslib_1.__exportStar(require("./number"), exports);
+tslib_1.__exportStar(require("./object"), exports);
+tslib_1.__exportStar(require("./string"), exports);
+tslib_1.__exportStar(require("./views"), exports);

package/build/cjs/lib/core/components/View/types/layout.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/number.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/object.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/string.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/View/types/views.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Form"), exports);
+tslib_1.__exportStar(require("./View"), exports);

package/build/cjs/lib/core/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecTypes = void 0;
+var SpecTypes;
+(function (SpecTypes) {
+    SpecTypes["Array"] = "array";
+    SpecTypes["Boolean"] = "boolean";
+    SpecTypes["Number"] = "number";
+    SpecTypes["Object"] = "object";
+    SpecTypes["String"] = "string";
+})(SpecTypes = exports.SpecTypes || (exports.SpecTypes = {}));

package/build/cjs/lib/core/helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringSpec = exports.isObjectSpec = exports.isNumberSpec = exports.isBooleanSpec = exports.isArraySpec = exports.isCorrectSpec = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const constants_1 = require("./constants");
+const isCorrectSpec = (candidate) => lodash_1.default.isObjectLike(candidate) &&
+    (candidate.type === constants_1.SpecTypes.Array ||
+        candidate.type === constants_1.SpecTypes.Boolean ||
+        candidate.type === constants_1.SpecTypes.Number ||
+        candidate.type === constants_1.SpecTypes.Object ||
+        candidate.type === constants_1.SpecTypes.String) &&
+    lodash_1.default.isObjectLike(candidate.viewSpec) &&
+    lodash_1.default.isString(candidate.viewSpec.type);
+exports.isCorrectSpec = isCorrectSpec;
+const isArraySpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.Array;
+exports.isArraySpec = isArraySpec;
+const isBooleanSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.Boolean;
+exports.isBooleanSpec = isBooleanSpec;
+const isNumberSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.Number;
+exports.isNumberSpec = isNumberSpec;
+const isObjectSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.Object;
+exports.isObjectSpec = isObjectSpec;
+const isStringSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.String;
+exports.isStringSpec = isStringSpec;

package/build/cjs/lib/core/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./helpers"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/lib/core/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./specs"), exports);
+tslib_1.__exportStar(require("./value"), exports);

package/build/cjs/lib/core/types/specs.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/types/value.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./core"), exports);
+tslib_1.__exportStar(require("./kit"), exports);

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.css

@@ -0,0 +1,81 @@
+.df-accordeon-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  max-width: 750px;
+  box-shadow: 0 1px 5px var(--yc-color-sfx-shadow);
+  border-radius: 5px;
+  color: var(--yc-color-text-primary);
+  background-color: var(--yc-color-base-float);
+}
+.df-accordeon-card:hover {
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+.df-accordeon-card:last-child {
+  margin-bottom: 0;
+}
+.df-accordeon-card_empty .df-accordeon-card__body,
+.df-accordeon-card_empty .df-accordeon-card__header-toggle-btn {
+  display: none;
+}
+.df-accordeon-card_empty .df-accordeon-card__header_open {
+  border-bottom: none;
+}
+.df-accordeon-card__header {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+}
+.df-accordeon-card__header:hover {
+  cursor: pointer;
+}
+.df-accordeon-card__header_open {
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.df-accordeon-card__header_without-action:hover {
+  cursor: default;
+}
+.df-accordeon-card__header-content, .df-accordeon-card__header-toggle-btn {
+  display: inline-flex;
+  flex: 1 1 auto;
+}
+.df-accordeon-card__header-content {
+  flex-direction: column;
+  justify-content: center;
+  order: -1;
+}
+.df-accordeon-card__header-content-title {
+  font-weight: 700;
+}
+.df-accordeon-card__header-content-title_size_s {
+  font-size: 13px;
+}
+.df-accordeon-card__header-content-title_size_m {
+  font-size: 16px;
+}
+.df-accordeon-card__header-content-description {
+  margin-top: 12px;
+  color: var(--yc-color-text-complementary);
+}
+.df-accordeon-card__header-toggle-btn {
+  flex-grow: 0;
+  justify-content: flex-end;
+  order: 1;
+}
+.df-accordeon-card__interal-actions {
+  margin-right: 5px;
+}
+.df-accordeon-card__toggle-icon_open {
+  transform: rotate(180deg);
+}
+.df-accordeon-card__body {
+  display: none;
+  margin-top: -10px 0 8px;
+  padding: 16px;
+}
+.df-accordeon-card__body_open {
+  display: block;
+}

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordeonCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('accordeon-card');
+const AccordeonCard = ({ className, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
+    const accordeonRef = react_1.default.useRef(null);
+    const bodyRef = react_1.default.useRef(null);
+    const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
+    const handleToggle = react_1.default.useCallback(() => {
+        setOpen(!open);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+    }, [open, setOpen, onToggle]);
+    const preventEvent = react_1.default.useCallback((e) => e.stopPropagation(), []);
+    const emptyBody = bodyRef.current && !bodyRef.current.childElementCount;
+    react_1.default.useEffect(() => {
+        if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
+            setOpen(propsOpen);
+        }
+    }, [propsOpen]);
+    react_1.default.useEffect(() => {
+        if (bodyRef.current &&
+            !bodyRef.current.childElementCount &&
+            accordeonRef.current &&
+            !accordeonRef.current.className.includes('df-accordeon-card_empty')) {
+            accordeonRef.current.classList.add('df-accordeon-card_empty');
+        }
+    });
+    return (react_1.default.createElement("div", { ref: accordeonRef, className: b({ empty: Boolean(emptyBody) }, className) },
+        react_1.default.createElement("div", { className: b('header', {
+                open: open && !emptyBody,
+                'without-action': ignoreHeaderToggle || alwaysOpen,
+            }), onClick: !ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined },
+            react_1.default.createElement("div", { className: b('header-content') },
+                react_1.default.createElement("span", { className: lodash_1.default.isString(header)
+                        ? b('header-content-title', { size: titleSize })
+                        : undefined }, header),
+                description ? (react_1.default.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
+            !emptyBody && !alwaysOpen ? (react_1.default.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
+                headerActionsTemplate ? (react_1.default.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,
+                react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle },
+                    react_1.default.createElement(uikit_1.Icon, { className: b('toggle-icon', { open }), data: icons_1.ChevronDown, size: 16 })))) : null),
+        react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }) }, children)));
+};
+exports.AccordeonCard = AccordeonCard;

package/build/cjs/lib/kit/components/AccordeonCard/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordeonCard"), exports);

package/build/cjs/lib/kit/components/Card/Card.css

@@ -0,0 +1,72 @@
+.df-card {
+  margin-bottom: 20px;
+}
+.df-card:last-child {
+  margin-bottom: 0;
+}
+.df-card .df-row {
+  width: 100%;
+  max-width: unset;
+}
+.df-card .df-row .df-select,
+.df-card .df-row .df-multi-select,
+.df-card .df-row .df-transparent_array-item {
+  max-width: unset;
+}
+.df-card .df-monaco-input,
+.df-card .df-monaco-base-view {
+  width: 100%;
+}
+.df-card_empty-body .df-card__header {
+  cursor: default;
+}
+.df-card_empty-body .df-card__header-right {
+  display: none;
+}
+.df-card_empty-body .df-card__body {
+  display: none;
+}
+.df-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+.df-card__header_interactive {
+  cursor: pointer;
+}
+.df-card__header-left {
+  display: flex;
+  align-items: center;
+}
+.df-card__header-right {
+  display: flex;
+  align-items: center;
+}
+.df-card__header-right > * {
+  margin-left: 5px;
+}
+.df-card__title {
+  font-size: var(--yc-text-subheader-2-font-size);
+  font-weight: var(--yc-text-subheader-font-weight);
+  line-height: var(--yc-text-subheader-2-line-height);
+}
+.df-card__note {
+  margin-left: 5px;
+}
+.df-card__note .yc-help-popover {
+  display: flex;
+}
+.df-card__note .yc-help-popover > span {
+  display: flex;
+}
+.df-card__toggler-icon_open {
+  transform: rotate(180deg);
+}
+.df-card__body {
+  display: none;
+  padding: 0 20px 20px;
+}
+.df-card__body_open {
+  display: block;
+}

package/build/cjs/lib/kit/components/Card/Card.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('card');
+const Card = ({ title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+    const containerRef = react_1.default.useRef(null);
+    const bodyRef = react_1.default.useRef(null);
+    const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
+    const emptyBody = Boolean(bodyRef.current && !bodyRef.current.childElementCount);
+    const handleToggle = react_1.default.useMemo(() => {
+        if (!alwaysOpen) {
+            return () => {
+                setOpen(!open);
+                onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+            };
+        }
+        return;
+    }, [alwaysOpen, open, setOpen, onToggle]);
+    const handleHeaderToggle = react_1.default.useMemo(() => {
+        if (!disableHeaderToggle && handleToggle) {
+            return handleToggle;
+        }
+        return;
+    }, [disableHeaderToggle, handleToggle]);
+    const preventEvent = react_1.default.useCallback((e) => e.stopPropagation(), []);
+    const title = react_1.default.useMemo(() => {
+        if (lodash_1.default.isString(propsTitle)) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: b('title') }, propsTitle),
+                description ? (react_1.default.createElement("div", { className: b('note') },
+                    react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))) : null));
+        }
+        return propsTitle;
+    }, [propsTitle, description]);
+    react_1.default.useEffect(() => {
+        if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
+            setOpen(propsOpen);
+        }
+    }, [propsOpen]);
+    react_1.default.useEffect(() => {
+        if (checkEmptyBody &&
+            bodyRef.current &&
+            !bodyRef.current.childElementCount &&
+            containerRef.current &&
+            !containerRef.current.className.includes('df-card_empty-body')) {
+            containerRef.current.classList.add('df-card_empty-body');
+        }
+    });
+    return (react_1.default.createElement(uikit_1.Card, { ref: containerRef, className: b({ 'empty-body': emptyBody }), type: "container", theme: "normal" },
+        react_1.default.createElement("div", { className: b('header', { interactive: Boolean(handleHeaderToggle) }), onClick: handleHeaderToggle },
+            react_1.default.createElement("div", { className: b('header-left') }, title),
+            react_1.default.createElement("div", { className: b('header-right'), onClick: preventEvent },
+                actions ? react_1.default.createElement("div", { className: b('actions') }, actions) : null,
+                alwaysOpen ? null : (react_1.default.createElement("div", { className: b('toggler') },
+                    react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle },
+                        react_1.default.createElement(uikit_1.Icon, { className: b('toggler-icon', { open }), data: icons_1.ChevronDown, size: 16 })))))),
+        react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open }) }, children)));
+};
+exports.Card = Card;

package/build/cjs/lib/kit/components/Card/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Card"), exports);

package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.css

@@ -0,0 +1,23 @@
+.df-error-wrapper {
+  width: 100%;
+}
+.df-error-wrapper_error .yc-select-control:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control.yc-select-control_focused:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control.yc-select-control_focused:hover:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore) .g-select-control::before,
+.df-error-wrapper_error .g-select:hover:not(.df-error-wrapper-ignore) .g-select-control_open::before,
+.df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
+.df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
+  border-color: var(--yc-color-text-danger);
+}
+.df-error-wrapper__error-text {
+  color: var(--yc-color-text-danger);
+  margin-top: 2px;
+  font-size: var(--yc-text-body-font-size);
+  line-height: var(--yc-text-body-line-height);
+}

package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorWrapper = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('error-wrapper');
+const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, }) => {
+    const error = react_1.default.useMemo(() => {
+        if ((meta.touched || meta.submitFailed) && meta.error) {
+            return meta.error;
+        }
+        return;
+    }, [meta.touched, meta.submitFailed, meta.error]);
+    const props = react_1.default.useMemo(() => (meta.error ? { 'data-form-error': true, 'data-form-error-name': name } : {}), [meta.error, name]);
+    return (react_1.default.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }) }, props),
+        children,
+        error && typeof error === 'string' ? (react_1.default.createElement("div", { className: b('error-text') }, error)) : null));
+};
+exports.ErrorWrapper = ErrorWrapper;

package/build/cjs/lib/kit/components/ErrorWrapper/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ErrorWrapper"), exports);

package/build/cjs/lib/kit/components/GroupIndent/GroupIndent.css

@@ -0,0 +1,17 @@
+.df-group-indent {
+  padding-top: 11px;
+  padding-left: 20px;
+  margin-top: -11px;
+  margin-bottom: 20px;
+  margin-left: 5px;
+  border-left: 1px solid var(--yc-color-line-generic-accent);
+}
+.df-group-indent:last-child {
+  margin-bottom: 0;
+}
+.df-group-indent:empty {
+  display: none;
+}
+.df-group-indent > .df-simple-vertical-accordeon_view {
+  margin-top: -10px;
+}

package/build/cjs/lib/kit/components/GroupIndent/GroupIndent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupIndent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('group-indent');
+const GroupIndent = ({ children }) => (react_1.default.createElement("div", { className: b() }, children));
+exports.GroupIndent = GroupIndent;

package/build/cjs/lib/kit/components/GroupIndent/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./GroupIndent"), exports);