@steroidsjs/bootstrap 2.1.21 → 3.0.0-beta.10

package/form/DropDownField/DropDownFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -29,19 +33,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function DropDownFieldView(props) {
-    var inputRef = react_1.useRef(null);
+    var bem = (0, hooks_1.useBem)('DropDownFieldView');
+    var inputRef = (0, react_1.useRef)(null);
     // Auto focus on search
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
             inputRef.current.focus();
         }
@@ -51,7 +60,7 @@ function DropDownFieldView(props) {
         if (props.groupAttribute && Array.isArray(item[props.groupAttribute])) {
             return __spreadArray([
                 (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', 'group') }, item.label))
-            ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }));
+            ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }), true);
         }
         return (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
                 hover: props.hoveredId === item[props.primaryKey],
@@ -62,7 +71,6 @@ function DropDownFieldView(props) {
                 props.onItemSelect(item[props.primaryKey]);
             }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label));
     };
-    var bem = hooks_1.useBem('DropDownFieldView');
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({ size: props.size }), props.className), style: props.style },
         React.createElement("div", { className: bem.element('selected-items', {
                 reset: props.showReset,
@@ -71,18 +79,19 @@ function DropDownFieldView(props) {
                 disabled: props.disabled
             }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.selectedItems.map(function (item) { return (props.multiple
             ? (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
-                item.label,
-                React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        props.onItemRemove(item[props.primaryKey]);
-                    }, onKeyPress: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        props.onItemRemove(item[props.primaryKey]);
-                    }, tabIndex: 0, role: 'button' },
-                    React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
-                        React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                         5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                         512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                          3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })))))
+                React.createElement(React.Fragment, null,
+                    item.label,
+                    React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            props.onItemRemove(item[props.primaryKey]);
+                        }, onKeyPress: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            props.onItemRemove(item[props.primaryKey]);
+                        }, tabIndex: 0, role: 'button' },
+                        React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
+                            React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                         5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                         512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                          3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }))))))
             : (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label))); })),
         props.showReset && props.selectedIds.length > 0 && (React.createElement("button", { className: bem.element('reset'), onClick: props.onReset, "aria-label": __('Сбросить') })),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },

package/form/FieldLayout/FieldLayoutView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IFieldLayoutViewProps } from '@steroidsjs/core/ui/form/FieldLayout/FieldLayout';
 export default function FieldLayoutView(props: IFieldLayoutViewProps & IBemHocOutput): JSX.Element;

package/form/FieldLayout/FieldLayoutView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -26,7 +30,7 @@ var React = __importStar(require("react"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function FieldLayoutView(props) {
-    var bem = hooks_1.useBem('FieldLayoutView');
+    var bem = (0, hooks_1.useBem)('FieldLayoutView');
     return (React.createElement("div", { className: bem(bem.block({
             layout: props.layout.layout
         }), 'form-group', props.layout.className, props.layout.layout === 'horizontal' && 'row', props.layout.layout === 'inline' && 'form-inline mb-0'), style: props.layout.style },
@@ -35,7 +39,7 @@ function FieldLayoutView(props) {
             }), props.layout.layout === 'horizontal' && 'col-form-label text-right', props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[0], props.layout.layout === 'inline' && 'sr-only') }, props.label + ':')),
         React.createElement("div", { className: bem(bem.element('field'), props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[1], props.layout.layout === 'horizontal' && !props.label && 'offset-' + props.layout.cols[0], props.layout.layout === 'inline' && 'w-100') },
             props.children,
-            !isEmpty_1["default"](props.errors) && (React.createElement("div", { className: bem(bem.element('invalid-feedback'), 'invalid-feedback') }, [].concat(props.errors).filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index }, error)); }))),
-            isEmpty_1["default"](props.errors) && props.layout.layout !== 'inline' && props.hint && (React.createElement("div", { className: bem(bem.element('hint'), 'text-muted') }, props.hint)))));
+            !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem(bem.element('invalid-feedback'), 'invalid-feedback') }, [].concat(props.errors).filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index }, error)); }))),
+            (0, isEmpty_1["default"])(props.errors) && props.layout.layout !== 'inline' && props.hint && (React.createElement("div", { className: bem(bem.element('hint'), 'text-muted') }, props.hint)))));
 }
 exports["default"] = FieldLayoutView;

package/form/FieldList/FieldListItemView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -34,7 +38,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 exports["default"] = React.memo(function (props) {
-    var bem = hooks_1.useBem('FieldListItemView');
+    var bem = (0, hooks_1.useBem)('FieldListItemView');
     return (React.createElement("tr", null,
         props.items.map(function (field, index) { return (React.createElement("td", { key: index, className: bem(bem.element('table-cell'), field.className) },
             React.createElement(form_1.Field, __assign({}, field, { prefix: props.prefix })))); }),

package/form/FieldList/FieldListView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IFieldListViewProps } from '@steroidsjs/core/ui/form/FieldList/FieldList';
 export default function FieldListView(props: IFieldListViewProps): JSX.Element;

package/form/FieldList/FieldListView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -23,7 +27,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 function FieldListView(props) {
-    var bem = hooks_1.useBem('FieldListView');
+    var bem = (0, hooks_1.useBem)('FieldListView');
     return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style, ref: props.forwardedRef },
         React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size, props.tableClassName) },
             React.createElement("thead", null,

package/form/FieldSet/FieldSetView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IFieldSetViewProps } from '@steroidsjs/core/ui/form/FieldSet/FieldSet';
 export default function FieldSetView(props: IFieldSetViewProps): JSX.Element;

package/form/FieldSet/FieldSetView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/form/FileField/FileFieldItemView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IFileFieldItemViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
 export default function FileFieldItemView(props: IFileFieldItemViewProps & IBemHocOutput): JSX.Element;

package/form/FileField/FileFieldItemView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function FileFieldItemView(props) {
-    var bem = hooks_1.useBem('FileFieldItemView');
+    var bem = (0, hooks_1.useBem)('FileFieldItemView');
     return (React.createElement("div", { className: bem(bem.block(), 'card mb-1 mr-1', props.error && 'border-danger') },
         props.image
             ? (React.createElement("img", { src: props.image.url, className: 'card-img-top', width: props.image.width, height: props.image.height, alt: props.title }))

package/form/FileField/FileFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IFileFieldViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
 export default function FileFieldView(props: IFileFieldViewProps & IBemHocOutput): JSX.Element;

package/form/FileField/FileFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -35,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 function FileFieldView(props) {
-    var bem = hooks_1.useBem('FileFieldView');
+    var bem = (0, hooks_1.useBem)('FileFieldView');
     var ButtonComponent = props.buttonComponent || Button_1["default"];
     var FileItemView = props.itemView;
     return (React.createElement("div", { className: bem.block() },

package/form/Form/FormView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,10 +45,10 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var react_use_1 = require("react-use");
 var react_1 = require("react");
 function FormView(props) {
-    var bem = hooks_1.useBem('FormView');
-    var formRef = react_1.useRef(null);
+    var bem = (0, hooks_1.useBem)('FormView');
+    var formRef = (0, react_1.useRef)(null);
     // Auto focus
-    react_use_1.useMount(function () {
+    (0, react_use_1.useMount)(function () {
         if (props.autoFocus) {
             var inputEl_1 = formRef.current.querySelector('input:not([type=hidden])');
             setTimeout(function () {
@@ -59,7 +63,7 @@ function FormView(props) {
             inline: props.layout.layout === 'inline'
         }), props.className, props.layout.layout === 'horizontal' && 'form-horizontal'), onSubmit: props.onSubmit, style: props.style },
         props.children,
-        (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, (isString_1["default"](field) ? { attribute: field } : field)))); }),
+        (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field)))); }),
         props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));
 }
 exports["default"] = React.memo(FormView);

package/form/HtmlField/HtmlFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IHtmlFieldViewProps } from '@steroidsjs/core/ui/form/HtmlField/HtmlField';
 export default function HtmlFieldView(props: IHtmlFieldViewProps & IBemHocOutput): JSX.Element;

package/form/HtmlField/HtmlFieldView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -27,7 +31,7 @@ var ckeditor5_react_1 = require("@ckeditor/ckeditor5-react");
 var ckeditor5_build_classic_1 = __importDefault(require("@steroidsjs/ckeditor5/packages/ckeditor5-build-classic"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function HtmlFieldView(props) {
-    var bem = hooks_1.useBem('HtmlFieldView');
+    var bem = (0, hooks_1.useBem)('HtmlFieldView');
     if (process.env.IS_SSR) {
         return null;
     }

package/form/ImageField/ImageFieldModalView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IImageFieldModalViewProps } from '@steroidsjs/core/ui/form/ImageField/ImageField';
 import 'react-image-crop/dist/ReactCrop.css';
 export default function ImageFieldModalView(props: IImageFieldModalViewProps): JSX.Element;

package/form/ImageField/ImageFieldModalView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,8 +44,8 @@ var react_image_crop_1 = __importDefault(require("react-image-crop"));
 var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
 require("react-image-crop/dist/ReactCrop.css");
 function ImageFieldModalView(props) {
-    var bem = hooks_1.useBem('ImageFieldModalView');
-    var _a = react_1.useState(props.crop.initialValues), crop = _a[0], setCrop = _a[1];
+    var bem = (0, hooks_1.useBem)('ImageFieldModalView');
+    var _a = (0, react_1.useState)(props.crop.initialValues), crop = _a[0], setCrop = _a[1];
     return (React.createElement(Modal_1["default"], { className: bem.block(), title: props.title || __('Выберите область изображения'), onClose: props.onClose, controls: [{
                 label: __(('Сохранить')),
                 onClick: function () {

package/form/ImageField/ImageFieldView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IImageFieldViewProps } from "@steroidsjs/core/ui/form/ImageField/ImageField";
+import { IImageFieldViewProps } from '@steroidsjs/core/ui/form/ImageField/ImageField';
 export default function ImageFieldView(props: IImageFieldViewProps): JSX.Element;

package/form/ImageField/ImageFieldView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,20 +28,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function ImageFieldView(props) {
-    var bem = hooks_1.useBem("ImageFieldView");
+    var bem = (0, hooks_1.useBem)('ImageFieldView');
     var item = props.item;
-    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element("button", {
+    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element('button', {
             loading: item ? item.progress : false
         }), onClick: props.onClick },
-        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element("button-icon"), name: 'plus' })) : (React.createElement("div", { className: bem.element("progress-bar") },
-            React.createElement("div", { className: bem.element("progress-slider"), style: {
-                    width: (item ? item.progress.percent : 0) + "%"
+        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: 'plus' })) : (React.createElement("div", { className: bem.element('progress-bar') },
+            React.createElement("div", { className: bem.element('progress-slider'), style: {
+                    width: "".concat(item ? item.progress.percent : 0, "%")
                 } }))),
-        React.createElement("span", { className: bem.element("button-label") }, !item || !item.progress ? props.label : "Uploading..."))) : (React.createElement("div", { className: bem.element("content") },
-        React.createElement("img", { className: bem.element("image"), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
-        React.createElement("div", { className: bem.element("image-controls") },
-            React.createElement(Icon_1["default"], { className: bem.element("delete-icon"), name: 'trash', onClick: item.onRemove }))))));
+        React.createElement("span", { className: bem.element('button-label') }, !item || !item.progress ? props.label : 'Uploading...'))) : (React.createElement("div", { className: bem.element('content') },
+        React.createElement("img", { className: bem.element('image'), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
+        React.createElement("div", { className: bem.element('image-controls') },
+            React.createElement(Icon_1["default"], { className: bem.element('delete-icon'), name: 'trash', onClick: item.onRemove }))))));
 }
 exports["default"] = ImageFieldView;

package/form/InputField/InputFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IInputFieldViewProps } from '@steroidsjs/core/ui/form/InputField/InputField';
 export default function InputFieldView(props: IInputFieldViewProps & IBemHocOutput): JSX.Element;

package/form/InputField/InputFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -33,7 +37,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function InputFieldView(props) {
-    var bem = hooks_1.useBem('InputFieldView');
+    var bem = (0, hooks_1.useBem)('InputFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled,
             size: props.size

package/form/NumberField/NumberFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INumberFieldViewProps } from '@steroidsjs/core/ui/form/NumberField/NumberField';
 export default function NumberFieldView(props: INumberFieldViewProps & IBemHocOutput): JSX.Element;

package/form/NumberField/NumberFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -35,16 +39,16 @@ var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NumberFieldView(props) {
     // Input ref
-    var inputRef = react_1.useRef(null);
-    var onStepUp = react_1.useCallback(function () {
+    var inputRef = (0, react_1.useRef)(null);
+    var onStepUp = (0, react_1.useCallback)(function () {
         inputRef.current.stepUp();
         props.inputProps.onChange(inputRef.current.value);
     }, [inputRef.current]);
-    var onStepDown = react_1.useCallback(function () {
+    var onStepDown = (0, react_1.useCallback)(function () {
         inputRef.current.stepDown();
         props.inputProps.onChange(inputRef.current.value);
     }, [inputRef.current]);
-    var bem = hooks_1.useBem('NumberFieldView');
+    var bem = (0, hooks_1.useBem)('NumberFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled
         }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) },

package/form/PasswordField/PasswordFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IPasswordFieldViewProps } from '@steroidsjs/core/ui/form/PasswordField/PasswordField';
 export default function PasswordFieldView(props: IPasswordFieldViewProps & IBemHocOutput): JSX.Element;

package/form/PasswordField/PasswordFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -34,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function PasswordFieldView(props) {
-    var bem = hooks_1.useBem('PasswordFieldView');
+    var bem = (0, hooks_1.useBem)('PasswordFieldView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
         React.createElement("div", { className: bem(bem.element('container', {
                 disabled: props.inputProps.disabled

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IRadioListFieldViewProps } from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
 export default function RadioListFieldView(props: IRadioListFieldViewProps & IBemHocOutput): JSX.Element;

package/form/RadioListField/RadioListFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,12 +41,12 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function RadioListFieldView(props) {
-    var bem = hooks_1.useBem('RadioListFieldView');
-    var prefix = useUniqueId_1["default"]('radio');
+    var bem = (0, hooks_1.useBem)('RadioListFieldView');
+    var prefix = (0, useUniqueId_1["default"])('radio');
     return (React.createElement("div", { className: bem.block() }, props.items.map(function (item) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: 'custom-control custom-radio' },
-        React.createElement("input", __assign({}, props.inputProps, { id: prefix + "_" + item.id, className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
+        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
                 props.onItemSelect(item.id);
             } })),
-        React.createElement("label", { className: 'custom-control-label', htmlFor: prefix + "_" + item.id }, item.label))); })));
+        React.createElement("label", { className: 'custom-control-label', htmlFor: "".concat(prefix, "_").concat(item.id) }, item.label))); })));
 }
 exports["default"] = RadioListFieldView;

package/form/RateField/RateFieldView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IRateFieldViewProps } from '@steroidsjs/core/ui/form/RateField/RateField';
 export default function RateFieldView(props: IRateFieldViewProps): JSX.Element;

package/form/RateField/RateFieldView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function RateFieldView(props) {
-    var bem = hooks_1.useBem('RateFieldView');
+    var bem = (0, hooks_1.useBem)('RateFieldView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {
             'is-full': item.value <= props.inputProps.value
         }), onClick: function (e) {

package/form/ReCaptchaField/ReCaptchaFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IReCaptchaFieldViewProps } from '@steroidsjs/core/ui/form/ReCaptchaField/ReCaptchaField';
 export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps & IBemHocOutput): JSX.Element;