@steroidsjs/bootstrap 3.0.0-beta.42 → 3.0.0-beta.44

package/content/Icon/IconView.scss

@@ -0,0 +1,3 @@
+.IconView {
+    display: inline-flex;
+}

package/form/Button/ButtonView.js

@@ -39,7 +39,7 @@ function ButtonView(props) {
             : (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("span", { className: bem.element('label') },
+            !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))));
     };

package/form/Button/ButtonView.scss

@@ -102,15 +102,6 @@ $btn-letter-spacing: 0.1em;
         width: auto;
         height: auto;
         background-color: transparent;
-        
-        #{$root}__label {
-            display: inline;
-            color: $link-color;
-        }
-
-        #{$root}__label:hover {
-            color: $link-color-hover;
-        }
 
         &:focus-visible, &:focus {
             border: none;
@@ -121,18 +112,17 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-    &__label {
-        display: flex;
-        flex-direction: row;
-        column-gap: 10px;
-    }
-
     &__icon {
+        margin-right: 10px;
         width: 16px;
         height: 16px;
         &_without-label {
             margin: 0;
         }
+
+        svg path {
+            transition: stroke 0.15s ease-in-out;
+        }
     }
 
     &_failed {

package/form/CheckboxField/CheckboxFieldView.js

@@ -48,7 +48,6 @@ function CheckboxFieldView(props) {
             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("label", { className: bem.element('label'), htmlFor: props.id || id },
-            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));
+        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/CheckboxField/CheckboxFieldView.scss

@@ -11,7 +11,7 @@
 .CheckboxFieldView {
     $root: &;
 
-    display: inline-block;
+    display: inline-flex;
 
     font-family: $font-family-nunito;
 
@@ -36,7 +36,6 @@
 
             border: 1px solid $gray;
             border-radius: $radius-small;
-            margin-right: 8px;
 
             background-repeat: no-repeat;
             background-position: center center;
@@ -62,6 +61,7 @@
         }
 
         &-text {
+            margin-left: 8px;
             color: $text-color;
             font-size: $font-size-sm;
             font-weight: $font-weight-md;
@@ -132,7 +132,6 @@
                     width: 24px;
                     height: 24px;
                     border-radius: $radius-small;
-                    margin-right: 12px;
                 }
                 &::after {
                     width: 26px;
@@ -141,6 +140,7 @@
                 }
 
                 &-text {
+                    margin-left: 12px;
                     font-size: $font-size-lg;
                     line-height: 24px;
                 }
@@ -163,6 +163,7 @@
                 }
 
                 &-text {
+                    margin-left: 8px;
                     font-size: $font-size-base;
                     line-height: 22px;
                 }
@@ -185,6 +186,7 @@
                 }
 
                 &-text {
+                    margin-left: 8px;
                     font-size: $font-size-sm;
                     line-height: 18px;
                 }

package/form/DropDownFieldItem/DropDownFieldItemView.scss

@@ -1,4 +1,3 @@
-
 :root {
     --drop-down-item-hover-background-color: #f5f8fa;
     --drop-down-item-select-background-color: #eef1f2;
@@ -107,26 +106,29 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             right: 0;
         }
 
-        .RadioFieldView__label .RadioFieldView__ellipse { 
+        .RadioFieldView__label .RadioFieldView__ellipse {
             left: auto;
         }
 
         &_size {
             &_lg {
                 span {
-                    right: 13.5px;
+                    right: 0;
+                    transform: translateX(-115%) translateY(-50%);
                 }
             }
 
             &_md {
                 span {
-                    right: 12.5px;
+                    right: 0;
+                    transform: translateX(-130%) translateY(-50%);
                 }
             }
 
             &_sm {
                 span {
-                    right: 11.5px;
+                    right: 0;
+                    transform: translateX(-150%) translateY(-50%);
                 }
             }
         }
@@ -154,7 +156,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
 
                 border: none;
                 background-color: $element-background-color;
-                
+
                 &:hover {
                     background-color: $drop-down-item-hover-background-color;
                 }

package/form/FieldLayout/FieldLayoutView.scss

@@ -123,9 +123,7 @@
     }
 
     &__field {
-        .form-control,
-        input {
-            width: 100%;
-        }
+        display: flex;
+        flex-direction: column;
     }
 }

package/form/FileField/FileFieldItemView.js

@@ -28,15 +28,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var FileField_1 = require("@steroidsjs/core/ui/form/FileField/FileField");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function FileFieldItemView(props) {
     var bem = (0, hooks_1.useBem)('FileFieldItemView');
-    return (React.createElement("div", { className: bem(bem.block(), 'card mb-1 mr-1', props.error && 'border-danger') },
+    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' })
+        : 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("div", { className: bem.element('content') },
+            React.createElement("span", { className: bem.element('title', 'loading') }, props.title),
+            renderProgressBar(),
+            React.createElement("span", { className: bem.element('loading-text') }, __('Uploading...'))))); }, [bem, props.title, renderProgressBar]);
+    var renderFileItem = React.useCallback(function () { return (React.createElement("div", { className: bem.element('left') },
         props.image
-            ? (React.createElement("img", { src: props.image.url, className: 'card-img-top', width: props.image.width, height: props.image.height, alt: props.title }))
-            : (React.createElement(Icon_1["default"], { className: bem.element('blank-img'), name: props.imagesOnly ? 'file-image' : 'file' })),
-        props.showRemove && (React.createElement(Icon_1["default"], { onClick: props.onRemove, className: bem.element('remove'), name: 'times' })),
-        React.createElement("div", { className: 'card-body' },
-            React.createElement("p", { className: bem(bem.element('text'), 'card-text text-center', props.error && 'text-danger'), title: props.error || props.title }, props.error || props.title))));
+            ? (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' }))),
+        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({
+            error: !!props.error,
+            images: props.imagesOnly,
+            isWall: isWall
+        }) },
+        isLoading
+            ? renderLoadingState()
+            : renderFileItem(),
+        props.showRemove && (React.createElement(Icon_1["default"], { name: props.customRemoveIcon || 'trash', className: bem.element('remove', { isLoading: isLoading }), onClick: props.onRemove })),
+        React.createElement("div", { className: bem.element('overlay') })));
 }
 exports["default"] = FileFieldItemView;

package/form/FileField/FileFieldItemView.scss

@@ -1,33 +1,274 @@
+$small-image-size: 48px;
+$image-border-radius: 8px;
+
+@mixin fullSize {
+  width: 100%;
+  height: 100%;
+}
+
+@mixin textEllipsis {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .FileFieldItemView {
-  width: 200px;
+  $root: &;
+
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 8px;
+  padding: 12px 30px 12px 12px;
+  width: 100%;
   font-size: $font-size-sm;
 
-  &:hover &__remove {
-    display: block;
+  &_images {
+    padding: 8px;
+    border: 1px solid $gray;
+    border-radius: 12px;
+
+    #{$root}__icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $small-image-size;
+      height: $small-image-size;
+      border-radius: $image-border-radius;
+      background-color: $light-gray;
+    }
+  }
+
+  &__overlay {
+    display: none;
+  }
+
+  &_isWall {
+    padding: 5px;
+    width: 128px;
+    height: 128px;
+    border: 1px solid $gray;
+    border-radius: 20px;
+
+    #{$root}__title {
+      display: block;
+      text-align: center;
+
+      &_loading {
+        display: none;
+      }
+    }
+
+    #{$root}__overlay {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 3;
+      background-color: #000;
+      opacity: 0;
+      border-radius: 20px;
+    }
+
+    &:hover {
+      #{$root}__overlay {
+        opacity: 0.8;
+      }
+
+      #{$root}__link {
+        opacity: 1;
+      }
+    }
+
+    &#{$root}_images {
+      #{$root}__title {
+        display: none;
+      }
+
+      #{$root}__overlay {
+        top: 5px;
+        right: 5px;
+        left: 5px;
+        bottom: 5px;
+        border-radius: 16px;
+      }
+    }
+
+    #{$root}__link {
+      @include svg-color($white);
+      position: absolute;
+      top: 52px;
+      left: 70px;
+      z-index: 4;
+      opacity: 0;
+
+      circle {
+        stroke: $white;
+      }
+    }
+
+    #{$root}__left {
+      @include fullSize;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    #{$root}__image {
+      @include fullSize;
+      border-radius: 16px;
+    }
+
+    #{$root}__remove {
+      @include svg-color($white);
+      position: absolute;
+      left: 30px;
+      z-index: 4;
+
+      &_isLoading {
+        left: 50px;
+      }
+    }
+
+    #{$root}__icon-wrapper_loading {
+      display: none;
+    }
+
+    #{$root}__loading-text {
+      display: block;
+      margin-top: 16px;
+      text-align: center;
+    }
+
+    #{$root}__progress-track {
+      width: 40px;
+    }
+
+    #{$root}__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &#{$root}_error {
+      background-color: $light-gray;
+    }
+
+    &#{$root}_error {
+      #{$root}__title {
+        display: block;
+      }
+    }
   }
 
-  &__blank-img {
-    text-align: center;
-    padding: 35px 0 15px;
+  &__image {
+    width: $small-image-size;
+    height: $small-image-size;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: $image-border-radius;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
     width: 100%;
+  }
+
+  &__link {
+    @include textEllipsis;
+    color: $link-color;
+
+    &:hover {
+      color: $link-color-hover;
+      text-decoration: none;
+    }
+  }
+
+  &__title {
+    @include textEllipsis;
+    display: none;
+
+    &_loading {
+      display: block;
+    }
+  }
+
+  &_error {
+    @include svg-color($danger);
+
+    #{$root}__icon {
+      circle {
+        fill: $danger;
+      }
+    }
+
+    #{$root}__title {
+      color: $danger;
+    }
 
-    &.IconView svg {
-      width: 32px;
+    a,
+    a:hover {
+      color: $danger;
+      cursor: default;
+      pointer-events: none;
     }
   }
 
+  &__icon {
+    height: 25px;
+  }
+
+  &:hover &__remove {
+    opacity: 1;
+  }
+
   &__text {
     max-height: 80px;
     overflow: hidden;
   }
 
   &__remove {
-    position: absolute;
-    top: 0;
-    righT: 0;
-    display: none;
+    opacity: 0;
     cursor: pointer;
-    padding: 10px;
     z-index: 3;
+    height: 25px;
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  &__icon-loading {
+    @include loadingAnimation;
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  &__loading-text {
+    display: none;
+  }
+
+  &__content {
+    width: 100%;
+  }
+
+  &__progress-track {
+    margin-top: 4px;
+    height: 4px;
+    background-color: $gray;
+    border-radius: 4px;
+  }
+
+  &__progress-bar {
+    height: inherit;
+    background-color: $primary;
+    border-radius: 4px;
   }
 }

package/form/FileField/FileFieldView.js

@@ -39,17 +39,15 @@ 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/content/Icon"));
+var FileField_1 = require("@steroidsjs/core/ui/form/FileField/FileField");
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 function FileFieldView(props) {
     var bem = (0, hooks_1.useBem)('FileFieldView');
-    var ButtonComponent = props.buttonComponent || Button_1["default"];
+    var ButtonView = props.buttonView || Button_1["default"];
     var FileItemView = props.itemView;
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid }, item, props.itemProps))); })),
-        React.createElement("div", { className: bem.element('button') },
-            React.createElement(ButtonComponent, __assign({}, props.buttonProps, { label: null }),
-                React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: props.imagesOnly ? 'file-image' : 'upload' }),
-                React.createElement("span", { className: bem.element('button-label') }, props.buttonProps.label)))));
+    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("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/FileField/FileFieldView.scss

@@ -1,15 +1,43 @@
 .FileFieldView {
+  $root: &;
+
   &__files {
     margin-bottom: 1em;
     display: flex;
+    row-gap: 8px;
     flex-wrap: wrap;
+    flex-direction: column;
   }
 
-  &__button-label {
-    vertical-align: middle;
+  &_isWall {
+    display: flex;
+    column-gap: 10px;
+
+    #{$root}__files {
+      flex-direction: row;
+      column-gap: 10px;
+    }
+  }
+
+  &__button {
+    margin-bottom: 16px;
+
+    &_isWall {
+      width: 128px;
+      height: 128px;
+      border: 1px dashed $light;
+      background-color: $gray;
+      border-radius: 20px;
+
+      .ButtonView__label {
+        flex-direction: column;
+        row-gap: 10px;
+      }
+    }
   }
 
-  &__button-icon {
-    margin-right: 5px;
+  .ButtonView__icon {
+    width: 25px;
+    height: 25px;
   }
 }

package/form/InputField/InputFieldView.scss

@@ -24,7 +24,6 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
 
     height: 34px;
 
-    color: $text-color;
     font-family: $font-family-nunito;
     font-weight: $font-weight-sm;
     line-height: 24px;
@@ -36,6 +35,9 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     }
 
     &__input {
+        color: $text-color;
+        font-family: $font-family-nunito;
+
         width: 100%;
         height: 100%;
 
@@ -112,6 +114,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     //Sizes
     &_size {
         &_lg {
+            color: $text-color;
             height: $input-height-lg;
             border-radius: $radius-large;
             
@@ -135,6 +138,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
 
         &_md {
+            color: $text-color;
             height: $input-height-md;
             border-radius: $radius-large;
             
@@ -161,6 +165,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
 
         &_sm {
+            color: $text-color;
             height: $input-height-sm;
             border-radius: $radius-small;
             
@@ -217,6 +222,10 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     }
 
     &__icon-clear {
+        svg > * {
+            stroke: $text-color
+        }
+
         width: 24px;
         height: 24px;
         position: absolute;
@@ -276,6 +285,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     &__addon-after {
         padding: 11px 12px;
         background-color: $background-disabled-color;
+        color: $text-color;
     }
 
     &__addon-before {

package/icons/index.js

@@ -219,7 +219,7 @@ var groupedIcons = {
         'traffic-light', 'trailer', 'train', 'tram', 'transgender', 'transgender-alt', 'trash', 'trash-alt',
         'trash-restore', 'trash-restore-alt', 'tree', 'trophy', 'truck', 'truck-loading', 'truck-monster',
         'truck-moving', 'truck-pickup', 'tshirt', 'tty', 'tv', 'umbrella', 'umbrella-beach', 'underline', 'undo',
-        'undo-alt', 'universal-access', 'university', 'unlink', 'unlock', 'unlock-alt', 'upload', 'user',
+        'undo-alt', 'universal-access', 'university', 'unlink', 'unlock', 'unlock-alt', 'user',
         'user-alt', 'user-alt-slash', 'user-astronaut', 'user-check', 'user-circle', 'user-clock', 'user-cog',
         'user-edit', 'user-friends', 'user-graduate', 'user-injured', 'user-lock', 'user-md', 'user-minus',
         'user-ninja', 'user-nurse', 'user-plus', 'user-secret', 'user-shield', 'user-slash', 'user-tag', 'user-tie',
@@ -272,12 +272,17 @@ exports["default"] = (function (customIcons) {
         'home',
         'arrow-left',
         'double-arrow-left',
+        'upload',
+        'plus',
+        'clip',
+        'file-img-type',
         'copy',
         'cut',
-        'edit-duotone',
+        'edit',
         'paste',
         'pin',
         'trash',
+        'file-loading',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/clip.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.24224 14.134C9.24224 14.134 14.1855 9.2528 15.1743 8.22302C16.1631 7.19324 17.1526 8.22302 17.1526 8.22302C17.1526 8.22302 18.1407 9.25295 17.1519 10.2828C16.1631 11.3127 9.38808 18.378 9.38808 18.378C8.22338 19.5503 6.45101 19.694 5.28631 18.5217C4.12161 17.35 4.00707 15.5738 5.17178 14.4021L13.1974 6.16318C14.8279 4.52203 17.5021 4.52214 19.1302 6.16329C20.7619 7.80504 20.7607 10.7013 19.1302 12.3424L13.1974 18.378" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/crossed-out-eye.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 13.2867C15.9725 13.0286 16 12.7615 16 12.4879C16 10.2788 14.2091 8.48792 12 8.48792C11.7264 8.48792 11.4593 8.51538 11.2012 8.56769L12.7295 10.096C13.5236 10.3379 14.15 10.9643 14.3919 11.7584L15.9202 13.2867ZM9.76246 11.3716C9.5945 11.7076 9.5 12.0867 9.5 12.4879C9.5 13.8686 10.6193 14.9879 12 14.9879C12.4012 14.9879 12.7803 14.8934 13.1163 14.7255L14.212 15.8212C13.5784 16.2424 12.8179 16.4879 12 16.4879C9.79086 16.4879 8 14.6971 8 12.4879C8 11.67 8.24547 10.9095 8.66676 10.2759L9.76246 11.3716Z" fill="#323232"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7369 16.1634C19.5861 15.3972 20.278 14.625 20.7677 14.0304C20.7902 14.0031 20.8132 13.9755 20.8363 13.9476C21.1563 13.5626 21.521 13.1236 21.521 12.4879C21.521 11.8522 21.1563 11.4133 20.8363 11.0282C20.8132 11.0003 20.7902 10.9727 20.7677 10.9454C20.0353 10.0562 18.8506 8.7695 17.3636 7.6997C15.8826 6.63415 14.0377 5.73792 12.0007 5.73792C10.9236 5.73792 9.90014 5.98854 8.95578 6.3823L10.1221 7.5486C10.7332 7.35097 11.3622 7.23792 12.0007 7.23792C13.5996 7.23792 15.1386 7.94675 16.4876 8.91731C17.8307 9.88361 18.9222 11.0641 19.6099 11.899C19.8177 12.1514 19.92 12.2787 19.9814 12.3815C20.0213 12.4484 20.0212 12.4674 20.021 12.485L20.021 12.4879L20.021 12.4908C20.0212 12.5084 20.0213 12.5274 19.9814 12.5944C19.92 12.6971 19.8177 12.8245 19.6099 13.0768C19.1383 13.6493 18.4769 14.3843 17.6748 15.1013L18.7369 16.1634ZM8.64801 8.19585C8.25778 8.41127 7.87887 8.65471 7.51387 8.91731C6.17077 9.88361 5.07931 11.0641 4.39163 11.899C4.18379 12.1514 4.08145 12.2787 4.02013 12.3815C3.98021 12.4484 3.98034 12.4674 3.98046 12.485L3.98047 12.4879L3.98046 12.4908C3.98034 12.5084 3.98021 12.5274 4.02013 12.5944C4.08145 12.6971 4.18379 12.8245 4.39163 13.0768C5.0793 13.9117 6.17077 15.0922 7.51387 16.0585C8.86289 17.0291 10.4019 17.7379 12.0007 17.7379C13.5996 17.7379 15.1386 17.0291 16.4876 16.0585C16.4921 16.0553 16.4966 16.0521 16.501 16.0489L17.574 17.1219C17.5046 17.1737 17.4345 17.2252 17.3636 17.2761C15.8826 18.3417 14.0377 19.2379 12.0007 19.2379C9.96383 19.2379 8.11889 18.3417 6.63785 17.2761C5.15089 16.2063 3.96621 14.9197 3.2338 14.0304C3.21126 14.0031 3.18833 13.9755 3.16516 13.9476C2.8452 13.5626 2.48047 13.1236 2.48047 12.4879C2.48047 11.8522 2.8452 11.4133 3.16516 11.0282L3.16527 11.0281C3.1884 11.0003 3.21129 10.9727 3.2338 10.9454C3.96621 10.0562 5.15089 8.7695 6.63785 7.6997C6.92832 7.49072 7.23278 7.28825 7.54995 7.09778L8.64801 8.19585Z" fill="#323232"/>
-<path d="M5 2.48792L21 18.4879" stroke="#323232"/>
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2718 12.9311C16.3241 12.673 16.3516 12.4059 16.3516 12.1323C16.3516 9.92319 14.5607 8.13232 12.3516 8.13232C12.078 8.13232 11.8109 8.15978 11.5527 8.2121L12.4755 9.13484C14.0338 9.19815 15.2857 10.4501 15.349 12.0084L16.2718 12.9311ZM9.74467 10.6467C9.49451 11.0847 9.35156 11.5918 9.35156 12.1323C9.35156 13.7892 10.6947 15.1323 12.3516 15.1323C12.8921 15.1323 13.3992 14.9894 13.8372 14.7392L14.5636 15.4656C13.93 15.8869 13.1695 16.1323 12.3516 16.1323C10.1424 16.1323 8.35156 14.3415 8.35156 12.1323C8.35156 11.3144 8.59704 10.5539 9.01833 9.92032L9.74467 10.6467Z" fill="#323232"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9115 15.6308C19.7529 14.8727 20.4397 14.1067 20.9263 13.5159L20.9851 13.4447C21.3156 13.0453 21.6226 12.6744 21.6226 12.1323C21.6226 11.5903 21.3156 11.2193 20.9851 10.8199L20.9263 10.7487C20.2013 9.86855 19.0322 8.5996 17.5692 7.54704C16.1102 6.49733 14.3162 5.63232 12.3523 5.63232C11.3496 5.63232 10.3911 5.85783 9.49894 6.21829L10.276 6.99532C10.9463 6.76595 11.6419 6.63232 12.3523 6.63232C14.0241 6.63232 15.6142 7.37239 16.9852 8.35878C18.3523 9.34234 19.4593 10.5405 20.1544 11.3845C20.5788 11.8997 20.6226 11.9888 20.6226 12.1323C20.6226 12.2758 20.5788 12.3649 20.1544 12.8802C19.6799 13.4563 19.0134 14.1974 18.2034 14.9227L18.9115 15.6308ZM8.81578 7.65646C8.43746 7.86879 8.07124 8.10568 7.71943 8.35878C6.35236 9.34234 5.24535 10.5405 4.55022 11.3845C4.12586 11.8997 4.08203 11.9888 4.08203 12.1323C4.08203 12.2758 4.12586 12.3649 4.55022 12.8802C5.24535 13.7241 6.35236 14.9223 7.71943 15.9059C9.09046 16.8923 10.6805 17.6323 12.3523 17.6323C14.0241 17.6323 15.6142 16.8923 16.9852 15.9059C17.0007 15.8947 17.0162 15.8835 17.0316 15.8723L17.7469 16.5876C17.6882 16.6313 17.6289 16.6746 17.5692 16.7176C16.1102 17.7673 14.3162 18.6323 12.3523 18.6323C10.3884 18.6323 8.59445 17.7673 7.13542 16.7176C5.67243 15.6651 4.50329 14.3961 3.77833 13.5159L3.71953 13.4447C3.389 13.0453 3.08203 12.6744 3.08203 12.1323C3.08203 11.5903 3.389 11.2193 3.71953 10.8199L3.77833 10.7487C4.50329 9.86855 5.67243 8.59959 7.13542 7.54704C7.43767 7.32958 7.75429 7.12005 8.08382 6.9245L8.81578 7.65646Z" fill="#323232"/>
+<path d="M5.35156 2.13232L21.3516 18.1323" stroke="#323232"/>
 </svg>

package/icons/svgs/file-img-type.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.85352 11.1323C3.85352 7.36109 3.85352 5.47547 5.02509 4.3039C6.19666 3.13232 8.08228 3.13232 11.8535 3.13232H13.8535C17.6248 3.13232 19.5104 3.13232 20.6819 4.3039C21.8535 5.47547 21.8535 7.36109 21.8535 11.1323V13.1323C21.8535 16.9036 21.8535 18.7892 20.6819 19.9608C19.5104 21.1323 17.6248 21.1323 13.8535 21.1323H11.8535C8.08228 21.1323 6.19666 21.1323 5.02509 19.9608C3.85352 18.7892 3.85352 16.9036 3.85352 13.1323V11.1323Z" stroke="#323232"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.9369 12.3815C9.60384 11.4797 11.012 11.7141 11.3509 12.7833L11.5708 13.4771C12.0647 15.0355 14.1172 15.3771 15.0894 14.0627C15.49 13.5209 16.3004 13.5209 16.7011 14.0627L18.4515 16.4295C18.6157 16.6515 18.9288 16.6984 19.1509 16.5342C19.3729 16.37 19.4197 16.0569 19.2555 15.8349L17.5051 13.4681C16.7047 12.3858 15.0858 12.3858 14.2854 13.4681C13.7987 14.126 12.7713 13.955 12.524 13.1749L12.3041 12.4811C11.7185 10.6336 9.28534 10.2286 8.13289 11.7869L6.24842 14.3349C6.08422 14.5569 6.13109 14.87 6.35311 15.0342C6.57513 15.1984 6.88822 15.1515 7.05242 14.9295L8.9369 12.3815Z" fill="#323232"/>
+<circle cx="17.3535" cy="7.63232" r="1.5" fill="#323232"/>
+</svg>

package/icons/svgs/file-loading.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4456 4.13283C10.8634 4.11432 9.31133 4.56538 7.98554 5.42898C6.65975 6.29257 5.61982 7.52992 4.99726 8.98454C4.3747 10.4392 4.19746 12.0457 4.48796 13.6011C4.77846 15.1564 5.52366 16.5907 6.62931 17.7226C7.73496 18.8544 9.15141 19.6329 10.6995 19.9598C12.2477 20.2866 13.8579 20.147 15.3267 19.5586C16.7955 18.9703 18.0569 17.9596 18.9513 16.6544C19.8456 15.3492 20.3329 13.808 20.3514 12.2259" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/plus.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3535 6.13232L12.3535 18.1323" stroke="#323232" stroke-linecap="round"/>
+<path d="M18.3535 12.1323L6.35352 12.1323" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/upload.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.35352 9.58051L12.3535 14.5805M12.3535 14.5805L17.3535 9.58051M12.3535 14.5805L12.3535 5.58051" stroke="#312C3A" stroke-linecap="round"/>
+<path d="M5.35352 16.5805L5.35352 17.5805C5.35352 18.6851 6.24895 19.5805 7.35352 19.5805L17.3535 19.5805C18.4581 19.5805 19.3535 18.6851 19.3535 17.5805V16.5805" stroke="#312C3A" stroke-linecap="round"/>
+</svg>

package/icons/svgs/visible-eye.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12.4879" r="3.25" stroke="#323232" stroke-width="1.5"/>
-<path d="M20.188 11.4222C20.5762 11.8935 20.7703 12.1291 20.7703 12.4879C20.7703 12.8467 20.5762 13.0824 20.188 13.5536C18.7679 15.2778 15.6357 18.4879 12 18.4879C8.36427 18.4879 5.23206 15.2778 3.81197 13.5536C3.42381 13.0824 3.22973 12.8467 3.22973 12.4879C3.22973 12.1291 3.42381 11.8935 3.81197 11.4222C5.23206 9.69805 8.36427 6.48792 12 6.48792C15.6357 6.48792 18.7679 9.69805 20.188 11.4222Z" stroke="#323232" stroke-width="1.5"/>
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.1113" cy="12.1323" r="3.5" stroke="#323232"/>
+<path d="M20.2994 11.0666C20.6875 11.5379 20.8816 11.7735 20.8816 12.1323C20.8816 12.4911 20.6875 12.7268 20.2994 13.198C18.8793 14.9222 15.7471 18.1323 12.1113 18.1323C8.4756 18.1323 5.34339 14.9222 3.9233 13.198C3.53513 12.7268 3.34105 12.4911 3.34105 12.1323C3.34105 11.7735 3.53513 11.5379 3.9233 11.0666C5.34339 9.34246 8.4756 6.13232 12.1113 6.13232C15.7471 6.13232 18.8793 9.34246 20.2994 11.0666Z" stroke="#323232"/>
 </svg>

package/index.scss

@@ -1,5 +1,6 @@
 @import './scss/mixins';
 @import './scss/variables';
+@import './scss/animations';
 @import './scss/fonts';
 
 @import './crud/Crud/CrudView';
@@ -16,6 +17,7 @@
 @import './content/DropDown/DropDownView.scss';
 @import './content/Menu/MenuItemView';
 @import './content/Menu/MenuView';
+@import './content/Icon/IconView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
 @import './form/CheckboxField/CheckboxFieldView';

package/list/List/ListView.js

@@ -37,7 +37,7 @@ function ListView(props) {
         }
         return (React.createElement("div", { className: bem.element('pagination') },
             React.createElement("div", null, pagination),
-            React.createElement("div", null,
+            React.createElement("div", { className: bem.element('pagination-sizes') },
                 layout,
                 paginationSize)));
     };

package/list/List/ListView.scss

@@ -1,12 +1,21 @@
 .ListView {
-
-    &__pagination { 
+    &__pagination {
         display: flex;
+        justify-content: space-between;
         flex-flow: row nowrap;
         margin-bottom: 3px;
-        background: red;
-    }
 
+        &-sizes {
+            width: calc(100% / 4);
 
+            .PaginationSizeView__sizes {
+                display: flex;
+                flex-flow: row nowrap;
+            }
+        }
+    }
 
-}
+    &__content {
+        margin-bottom: 3px;
+    }
+}

package/nav/Tree/TreeView.scss

@@ -20,7 +20,7 @@
     justify-content: flex-start;
     background-color: $background-color;
 
-    .ButtonView__label {
+    .ButtonView__link {
       color: $text-color;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.42",
+    "version": "3.0.0-beta.44",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.20",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.24",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.20"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.24"
     }
 }

package/scss/animations/index.scss

@@ -0,0 +1 @@
+@import "loading";

package/scss/animations/loading.scss

@@ -0,0 +1,13 @@
+@keyframes loading {
+  from {
+    transform: none;
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin loadingAnimation {
+  animation: loading 1.5s linear infinite;
+}

package/scss/mixins/button.scss

@@ -1,3 +1,11 @@
+@mixin svg-color($color) {
+    svg {
+        path { 
+            stroke: $color;
+        }
+    }
+}
+
 @mixin button-theme($colorMap, $colorName, $root) {
     background-color: map-get($colorMap, color);
     color: map-get($colorMap, text-color);
@@ -29,6 +37,14 @@
             }
         }
     }
+
+    #{$root}__link {
+        color: map-get($colorMap, color-dark);
+
+        &:hover {
+            color: map-get($colorMap, color-light);
+        }
+    }
 }
 
 @mixin button-outline-theme($colorMap, $colorName, $root) {
@@ -36,15 +52,19 @@
     color: map-get($colorMap, color);
     border: 1px solid map-get($colorMap, color);
 
+    @include svg-color(map-get($colorMap, text-color));
+
     &:hover {
+        @include svg-color(map-get($colorMap, color-dark));
         color: map-get($colorMap, color-dark);
         border-color: map-get($colorMap, color-dark);
     }
     &:focus {
         box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
-        border: none;
+        border: 1px solid transparent;
     }
     &:active {
+        @include svg-color(map-get($colorMap, color-light));
         color: map-get($colorMap, color-light);
         border-color: map-get($colorMap, color-light);
         box-shadow: none;
@@ -52,6 +72,7 @@
 
     &:disabled {
         background-color: transparent;
+        @include svg-color(map-get($colorMap, color));
         color: map-get($colorMap, color);
         border: 1px solid map-get($colorMap, color);
     }
@@ -61,10 +82,6 @@
     } 
 
     #{$root}__loader { 
-        svg {
-            path { 
-                stroke: map-get($colorMap, color);
-            }
-        }
+        @include svg-color(map-get($colorMap, color));
     }
 }

package/scss/variables/common/colors.scss

@@ -173,6 +173,10 @@ $color-themes: map-merge(
             "color-light": $info-light,
             "text-color": $text-color,
         ),
+        "link": (
+            "color-dark": $link-color,
+            "color-light": $link-color-hover,
+        ),
     ),
     $color-themes
 );