@steroidsjs/bootstrap 3.0.0-beta.47 → 3.0.0-beta.49

package/content/Accordion/AccordionItemView.js

@@ -83,7 +83,7 @@ function AccordionItemView(props) {
                 ? renderIcon()
                 : (React.createElement(Icon_1["default"], { className: bem.element('icon-chevron', {
                         active: !props.disabled && props.isShowMore
-                    }), name: "accordion-chevron" }))))),
+                    }), name: "arrow_down_24x24" }))))),
         React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
 }
 exports["default"] = AccordionItemView;

package/content/Alert/AlertView.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var ICON_SIZE = '_24x24';
 function Alert(props) {
     var _a, _b;
     var bem = (0, hooks_1.useBem)('AlertView');
@@ -15,7 +16,7 @@ function Alert(props) {
             _a)), props.className), style: props.style },
         react_1["default"].createElement("div", { className: bem.element('wrapper') },
             react_1["default"].createElement("div", { className: bem.element('content') },
-                props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type, className: bem.element('icon', (_b = {},
+                props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type + ICON_SIZE, className: bem.element('icon', (_b = {},
                         _b[props.type] = !!props.type,
                         _b)) })),
                 react_1["default"].createElement("div", { className: bem.element('text-block') },
@@ -23,7 +24,7 @@ function Alert(props) {
                     props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description))),
                 react_1["default"].createElement("div", null, props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
                         large: !!props.description
-                    }), name: 'alert-close', onClick: props.onClose })))),
+                    }), name: 'circle_cross_16x16', onClick: props.onClose })))),
             props.children || null))));
 }
 exports["default"] = Alert;

package/content/Badge/BadgeView.js

@@ -20,6 +20,6 @@ function BadgeView(props) {
         react_1["default"].createElement("div", { className: bem.element('content') },
             react_1["default"].createElement("span", { className: bem.element('message') }, props.message),
             props.counter && (react_1["default"].createElement("span", { className: bem.element('counter') }, typeof props.counter === 'object' && (react_1["default"].createElement("span", { className: bem.element('counter-content') }, props.counter.content)))),
-            props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'badge-close' }))))));
+            props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'cross_4x4' }))))));
 }
 exports["default"] = BadgeView;

package/content/Card/CardView.js

@@ -33,7 +33,7 @@ function CardView(props) {
                     react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
                     react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
             props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
-                react_1["default"].createElement(Icon_1["default"], { name: 'dots', className: bem.element('header-dots') }))))),
+                react_1["default"].createElement(Icon_1["default"], { name: 'menu_dots', className: bem.element('header-dots') }))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
             react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
         hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },

package/content/Icon/IconView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IIconViewProps } from '@steroidsjs/core/ui/content/Icon/Icon';
-export default function IconView(props: IIconViewProps & IBemHocOutput): JSX.Element;
+export default function IconView(props: IIconViewProps): JSX.Element;

package/content/Menu/MenuView.js

@@ -25,6 +25,6 @@ function MenuView(props) {
     return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
         react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
             ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })
-            : (react_1["default"].createElement(content_1.Icon, { name: 'dots', className: bem.element('icon') })))));
+            : (react_1["default"].createElement(content_1.Icon, { name: 'menu_dots', className: bem.element('icon') })))));
 }
 exports["default"] = MenuView;

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

@@ -1,4 +1,3 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IAutoCompleteFieldViewProps } from '@steroidsjs/core/ui/form/AutoCompleteField/AutoCompleteField';
 import './AutoCompleteFieldView.scss';
-export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps & IBemHocOutput): JSX.Element;
+export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps): JSX.Element;

package/form/Button/ButtonView.d.ts

@@ -1,3 +1,2 @@
 import { IButtonViewProps } from '@steroidsjs/core/ui/form/Button/Button';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ButtonView(props: IButtonViewProps & IBemHocOutput): JSX.Element;
+export default function ButtonView(props: IButtonViewProps): JSX.Element;

package/form/Button/ButtonView.js

@@ -38,10 +38,10 @@ function ButtonView(props) {
             ? props.label
             : (props.hint || null);
         return (React.createElement(React.Fragment, null,
-            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loader', tabIndex: -1 })),
+            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loading_icon_thick', tabIndex: -1 })),
             !props.isLoading && (React.createElement("span", { title: props.hint, className: bem.element(props.link ? 'link' : 'label') },
                 props.icon && (React.createElement(Icon_1["default"], { name: props.icon, title: title, className: bem.element('icon', !props.label && 'without-label') })),
-                props.children))));
+                React.createElement("span", { className: bem.element('text') }, props.children)))));
     };
     var renderBadge = function () {
         var _a;

package/form/Button/ButtonView.scss

@@ -108,6 +108,12 @@ $btn-letter-spacing: 0.1em;
         &:hover,&:active {
             background-color: transparent;
         }
+        
+    }
+
+    &__link { 
+        display: inline-flex;
+        align-items: center;
     }
 
     &__icon {

package/form/CheckboxField/CheckboxFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
-export default function CheckboxFieldView(props: ICheckboxFieldViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxFieldView(props: ICheckboxFieldViewProps): JSX.Element;

package/form/CheckboxField/CheckboxFieldView.js

@@ -47,7 +47,7 @@ function CheckboxFieldView(props) {
             size: props.size,
             hasErrors: !!props.errors
         }), props.className), style: props.style, onClick: props.onChange },
-        React.createElement("input", __assign({ className: bem.element('input'), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })),
+        React.createElement("input", __assign({ className: bem.element('input'), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
         React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxListField/CheckboxListFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
-export default function CheckboxListFieldView(props: ICheckboxListFieldViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxListFieldView(props: ICheckboxListFieldViewProps): JSX.Element;

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -46,7 +46,6 @@ function CheckboxListFieldView(props) {
             }
         },
         disabled: props.disabled,
-        checked: props.selectedIds.includes(checkbox.id),
         label: checkbox.label,
         id: "".concat(prefix, "_").concat(checkbox.id),
         key: checkboxIndex

package/form/DateTimeField/DateTimeFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IDateTimeFieldViewProps } from '@steroidsjs/core/ui/form/DateTimeField/DateTimeField';
-export default function DateTimeFieldView(props: IDateTimeFieldViewProps & IBemHocOutput): JSX.Element;
+export default function DateTimeFieldView(props: IDateTimeFieldViewProps): JSX.Element;

package/form/DropDownField/DropDownFieldView.js

@@ -73,8 +73,8 @@ function DropDownFieldView(props) {
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
                 ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
                 : (0, utils_1.getSelectedItemsCount)(props.selectedItems))),
-        props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "field-close", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
-        React.createElement(Icon_1["default"], { name: 'accordion-chevron', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
+        props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
+        React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
             props.isAutoComplete && (React.createElement("div", { className: bem.element('search', {
                     size: props.size

package/form/DropDownField/DropDownFieldView.scss

@@ -365,7 +365,7 @@ $drop-down-color-themes: map-merge(
         }
 
         &-input {
-            width: 220px;
+            width: 100%;
             border-radius: 6px;
             outline: none;
 
@@ -423,5 +423,9 @@ $drop-down-color-themes: map-merge(
         top: 50%;
         right: 36px;
         transform: translateY(-50%);
+
+        path {
+            stroke-width: 1.5px;
+        }
     }
 }

package/form/FieldLayout/FieldLayoutView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function FieldLayoutView(props: IFieldLayoutViewProps): JSX.Element;

package/form/FieldLayout/FieldLayoutView.js

@@ -40,7 +40,7 @@ function FieldLayoutView(props) {
         React.createElement("div", { className: bem.element('field') },
             props.children,
             !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem.element('invalid-feedback') }, props.errors.filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index, className: bem.element('error-message') },
-                React.createElement(Icon_1["default"], { name: "error", className: bem.element('icon_error'), tabIndex: -1 }),
+                React.createElement(Icon_1["default"], { name: "error_24x24", className: bem.element('icon_error'), tabIndex: -1 }),
                 React.createElement("span", { className: bem.element('error-text', {
                         size: props.size || 'md'
                     }) }, error))); }))),

package/form/FieldLayout/FieldLayoutView.scss

@@ -77,14 +77,7 @@
             }
         }
     }
-
-    @mixin svgSize() {
-        svg {
-            width: 16px;
-            height: 16px;
-        }
-    }
-
+    
     &__icon_error {
         width: 16px;
         height: 16px;
@@ -92,16 +85,20 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        @include svgSize;
+        
+        svg {
+            width: 100%;
+            height: 100%;
 
-        svg rect {
-            color: $danger;
+            rect {
+                color: $danger;
+            }
         }
     }
 
-    &__error-text { 
+    &__error-text {
         color: $danger;
-        &_size {  
+        &_size {
             &_lg {
                 font-size: $font-size-base;
                 line-height: 22px;

package/form/FieldList/FieldListItemView.js

@@ -47,5 +47,5 @@ exports["default"] = React.memo(function (props) {
                 e.preventDefault();
                 props.onRemove(props.rowIndex);
             } },
-            React.createElement(content_1.Icon, { name: 'field-list-remove' })))))));
+            React.createElement(content_1.Icon, { name: 'circle_cross_18x18' })))))));
 });

package/form/FieldList/FieldListItemView.scss

@@ -1,12 +1,19 @@
 .FieldListItemView {
-  &__remove {
-    background-color: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    border: none;
-    width: 24px;
-    height: 24px;
-  }
-}
+    &__remove {
+        background-color: transparent;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border: none;
+        width: 24px;
+        height: 24px;
+
+        rect {
+            fill: #323232;
+        }
+        path {
+            stroke: $white;
+        }
+    }
+}

package/form/FieldSet/FieldSetView.scss

@@ -1,17 +1,14 @@
 :root {
     --legend-color: #152536;
-    --legend-background-color: #ffffff;
     --fieldset-border-color: #E6E6E6;
 }
   
 html[data-theme="dark"] { 
     --legend-color: #ffffff;
-    --legend-background-color: #414141;
     --fieldset-border-color: #595959;
 }
   
 $legend-color: var(--legend-color);
-$legend-background-color: var(--legend-background-color);
 $fieldset-border-color: var(--fieldset-border-color);
 
 .FieldSetView{
@@ -19,7 +16,7 @@ $fieldset-border-color: var(--fieldset-border-color);
     border-radius: 8px;
 
     &__legend {
-        background-color: $legend-background-color;
+        background-color: $background-color;
         color: $legend-color;
 
         padding: 8px;

package/form/FileField/FileFieldItemView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function FileFieldItemView(props: IFileFieldItemViewProps): JSX.Element;

package/form/FileField/FileFieldItemView.js

@@ -35,13 +35,13 @@ function FileFieldItemView(props) {
     var isLoading = props.progress && props.progress.percent !== 100;
     var isWall = props.filesLayout === FileField_1.FilesLayout.wall;
     var renderLink = React.useCallback(function () { return (React.createElement("a", { className: bem.element('link'), title: props.title, href: props.error ? '#' : props.item.url, target: 'blank' }, isWall
-        ? React.createElement(Icon_1["default"], { name: 'visible-eye' })
+        ? React.createElement(Icon_1["default"], { name: 'view' })
         : props.title)); }, [bem, props.title, props.error, props.item.url, isWall]);
     var renderProgressBar = React.useCallback(function () { return (React.createElement("div", { className: bem.element('progress-track') },
         React.createElement("div", { className: bem.element('progress-bar'), style: { width: "".concat(props.progress.percent, "%") } }))); }, [bem, props.progress]);
     var renderLoadingState = React.useCallback(function () { return (React.createElement("div", { className: bem.element('left') },
         React.createElement("div", { className: bem.element('icon-wrapper', 'loading') },
-            React.createElement(Icon_1["default"], { className: bem.element('icon-loading'), name: 'file-loading' })),
+            React.createElement(Icon_1["default"], { className: bem.element('icon-loading'), name: 'loading_icon' })),
         React.createElement("div", { className: bem.element('content') },
             React.createElement("span", { className: bem.element('title', 'loading') }, props.title),
             renderProgressBar(),
@@ -50,7 +50,7 @@ function FileFieldItemView(props) {
         props.image
             ? (React.createElement("div", { className: bem.element('image'), style: { backgroundImage: "url(".concat(props.image.url, ")") } }))
             : (React.createElement("div", { className: bem.element('icon-wrapper') },
-                React.createElement(Icon_1["default"], { className: bem.element('icon'), name: props.imagesOnly ? 'file-img-type' : 'clip' }))),
+                React.createElement(Icon_1["default"], { className: bem.element('icon'), name: props.imagesOnly ? 'img_box' : 'clip' }))),
         renderLink(),
         React.createElement("span", { className: bem.element('title') }, props.title))); }, [bem, props.image, props.imagesOnly, props.title, renderLink]);
     return (React.createElement("div", { className: bem.block({

package/form/FileField/FileFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function FileFieldView(props: IFileFieldViewProps): JSX.Element;

package/form/FileField/FileFieldView.js

@@ -47,7 +47,7 @@ function FileFieldView(props) {
     var FileItemView = props.itemView;
     var isWall = props.filesLayout === FileField_1.FilesLayout.wall;
     return (React.createElement("div", { className: bem(bem.block({ isWall: isWall }), props.className) },
-        React.createElement(ButtonView, __assign({ className: bem.element('button', { isWall: isWall }), icon: isWall ? 'plus' : 'upload' }, props.buttonProps)),
+        React.createElement(ButtonView, __assign({ className: bem.element('button', { isWall: isWall }), icon: isWall ? 'add' : 'import' }, props.buttonProps)),
         React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid, filesLayout: props.filesLayout, imagesOnly: props.imagesOnly, customRemoveIcon: props.customRemoveIcon }, item, props.itemProps))); }))));
 }
 exports["default"] = FileFieldView;

package/form/HtmlField/HtmlFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function HtmlFieldView(props: IHtmlFieldViewProps): JSX.Element;

package/form/ImageField/ImageFieldView.js

@@ -35,7 +35,7 @@ function ImageFieldView(props) {
     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') },
+        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: 'add' })) : (React.createElement("div", { className: bem.element('progress-bar') },
             React.createElement("div", { className: bem.element('progress-slider'), style: {
                     width: "".concat(item ? item.progress.percent : 0, "%")
                 } }))),

package/form/InputField/InputFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function InputFieldView(props: IInputFieldViewProps): JSX.Element;

package/form/InputField/InputFieldView.js

@@ -71,7 +71,7 @@ function InputFieldView(props) {
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
                     })) }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id }))),
-            !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "field-close", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
+            !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
 }

package/form/NumberField/NumberFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function NumberFieldView(props: INumberFieldViewProps): JSX.Element;

package/form/NumberField/NumberFieldView.js

@@ -66,11 +66,11 @@ function NumberFieldView(props) {
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: (0, isNumber_1["default"])(props.inputProps.max) && props.inputProps.value >= props.inputProps.max
                 }), type: 'button', onClick: onStepUp },
-                React.createElement(Icon_1["default"], { name: 'arrow', tabIndex: -1 })),
+                React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })),
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: (0, isNumber_1["default"])(props.inputProps.min) && props.inputProps.value <= props.inputProps.min
                 }), type: 'button', onClick: onStepDown },
-                React.createElement(Icon_1["default"], { name: 'arrow', tabIndex: -1 })))),
+                React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })))),
         React.createElement("span", { className: bem.element('input-effects') })));
 }
 exports["default"] = NumberFieldView;

package/form/PasswordField/PasswordFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function PasswordFieldView(props: IPasswordFieldViewProps): JSX.Element;

package/form/PasswordField/PasswordFieldView.js

@@ -52,7 +52,7 @@ function PasswordFieldView(props) {
             }) },
             React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id })),
             props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
-                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'crossed-out-eye' : 'visible-eye' })))),
+                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'view_hide' : 'view' })))),
         props.showSecurityBar && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
 }
 exports["default"] = PasswordFieldView;

package/form/RadioField/RadioFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IRadioFieldViewProps } from '@steroidsjs/core/ui/form/RadioField/RadioField';
-export default function RadioFieldView(props: IRadioFieldViewProps & IBemHocOutput): JSX.Element;
+export default function RadioFieldView(props: IRadioFieldViewProps): JSX.Element;

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function RadioListFieldView(props: IRadioListFieldViewProps): JSX.Element;

package/form/ReCaptchaField/ReCaptchaFieldView.d.ts

@@ -1,3 +1,2 @@
-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;
+export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps): JSX.Element;

package/form/SliderField/SliderFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISliderFieldViewProps } from '@steroidsjs/core/ui/form/SliderField/SliderField';
-export default function SliderFieldView(props: ISliderFieldViewProps & IBemHocOutput): JSX.Element;
+export default function SliderFieldView(props: ISliderFieldViewProps): JSX.Element;

package/form/SwitcherField/SwitcherFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISwitcherFieldViewProps } from '@steroidsjs/core/ui/form/SwitcherField/SwitcherField';
-export default function SwitcherFieldView(props: ISwitcherFieldViewProps & IBemHocOutput): JSX.Element;
+export default function SwitcherFieldView(props: ISwitcherFieldViewProps): JSX.Element;

package/form/TextField/TextFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITextFieldViewProps } from '@steroidsjs/core/ui/form/TextField/TextField';
-export default function TextFieldView(props: ITextFieldViewProps & IBemHocOutput): JSX.Element;
+export default function TextFieldView(props: ITextFieldViewProps): JSX.Element;

package/form/TextField/TextFieldView.js

@@ -48,6 +48,6 @@ function TextFieldView(props) {
             size: props.size
         }), props.className) },
         React.createElement("textarea", __assign({ className: bem.element('textarea'), id: props.id }, props.inputProps)),
-        props.showClear && (React.createElement(Icon_1["default"], { className: bem.element('clear'), name: "field-close", onClick: props.onClear }))));
+        props.showClear && (React.createElement(Icon_1["default"], { className: bem.element('clear'), name: "cross_8x8", onClick: props.onClear }))));
 }
 exports["default"] = TextFieldView;

package/form/TextField/TextFieldView.scss

@@ -42,6 +42,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         svg {
             path {
                 stroke: $background-disabled-color;
+                stroke-width: 1.5px;
             }
         }
 

package/form/TimeField/TimeFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITimeFieldViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
-export default function TimeFieldView(props: ITimeFieldViewProps & IBemHocOutput): JSX.Element;
+export default function TimeFieldView(props: ITimeFieldViewProps): JSX.Element;