@steroidsjs/bootstrap 3.0.0 → 3.0.2

package/content/Calendar/CalendarView.scss

@@ -155,10 +155,10 @@ $calendar-border-color: var(--calendar-border-color);
             z-index: 9;
         }
 
-        &:focus { 
+        &:focus {
             outline: none;
         }
-        
+
         &:focus:not(:active)::after {
             opacity: 1;
         }
@@ -291,3 +291,8 @@ $calendar-border-color: var(--calendar-border-color);
         }
     }
 }
+
+// Class to allow body scroll, when Calendar is open in a Modal window
+.ModalView_body-hide-scroll:has(.CalendarView) {
+    overflow-y: auto;
+}

package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss

@@ -59,9 +59,8 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
 
         &__content {
             padding: 0;
-            padding-top: 0;
 
-            > .FieldLayoutView { 
+            > .FieldLayoutView {
                 margin-bottom: 0;
             }
         }
@@ -97,11 +96,17 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
         svg {
             position: absolute;
             width: 100%;
-            width: 100%;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
+
+            rect {
+                fill: $calendar-system-icon-background-color;
+            }
+            path {
+                stroke: variables.$icon-color;
+            }
         }
     }
 }

package/content/Chat/views/BubbleMessage/BubbleMessageView.js

@@ -65,7 +65,7 @@ function BubbleMessageView(props) {
             !(0, isEmpty_1["default"])(props.files) && (react_1["default"].createElement("div", { className: bem.element('files') }, props.files.map(function (file) { return (react_1["default"].createElement(ChatFileItem_1["default"], __assign({ key: file.uid, isFileByAnotherUser: isMessageByAnotherUser, isFileFromMessage: true }, file))); }))),
             react_1["default"].createElement("div", { className: bem.element('indicators') },
                 react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: timeAgo }),
-                props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),
+                props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all_16x16" })))),
         props.user && (react_1["default"].createElement("div", { className: bem.element('avatar') },
             react_1["default"].createElement(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' })))));
 }

package/content/Chat/views/BubbleMessage/BubbleMessageView.scss

@@ -187,6 +187,21 @@ $another-user-message-time-color: var(--another-user-message-time-color);
 
   &__check {
     margin-left: 4px;
+
+    svg {
+      width: 16px;
+      height: 17px;
+
+      path {
+        &:first-child {
+          stroke: $message-text-color;
+        }
+
+        &:last-child {
+          fill: $message-text-color;
+        }
+      }
+    }
   }
 
   .ChatFileItemView {

package/content/Kanban/views/KanbanModal/KanbanModalView.js

@@ -37,15 +37,15 @@ function KanbanModalView(props) {
     var renderModalContent = (0, react_1.useCallback)(function (modalType) {
         switch (modalType) {
             case enums_1.KanbanModalTypeEnum.CREATE:
-                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, submitButtonLabel: __('Создать'), onSubmit: props.onSubmit }));
+                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, createTaskEditorConfig: props.createTaskEditorConfig, submitButtonLabel: __('Создать'), onSubmit: props.onSubmit }));
             case enums_1.KanbanModalTypeEnum.DETAILS:
                 return (react_1["default"].createElement(TaskDetailsModalContent_1["default"], { bem: bem, task: props.task }));
             case enums_1.KanbanModalTypeEnum.EDIT:
-                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, task: props.task, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, submitButtonLabel: __('Сохранить'), onSubmit: props.onSubmit }));
+                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, task: props.task, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, createTaskEditorConfig: props.createTaskEditorConfig, submitButtonLabel: __('Сохранить'), onSubmit: props.onSubmit }));
             default:
                 return null;
         }
-    }, [bem, props.assigners, props.columnId, props.columns, props.formId, props.onSubmit, props.tags, props.task]);
+    }, [bem, props.assigners, props.columnId, props.columns, props.createTaskEditorConfig, props.formId, props.onSubmit, props.tags, props.task]);
     var renderModalButton = (0, react_1.useCallback)(function (modalType) { return modalType !== enums_1.KanbanModalTypeEnum.CREATE
         ? [{
                 icon: enums_1.KanbanModalTypeEnum.getModalIconByType(modalType),

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -74,7 +85,7 @@ function CreateOrEditTaskModalContentView(props) {
             react_1["default"].createElement("div", { className: props.bem.element('row') },
                 react_1["default"].createElement("div", { className: props.bem.element('label') }),
                 react_1["default"].createElement("div", { className: props.bem.element('right', 'html-field') },
-                    react_1["default"].createElement(form_1.HtmlField, { attribute: "fullDescription", size: "md" }))),
+                    react_1["default"].createElement(form_1.HtmlField, __assign({}, props.createTaskEditorConfig, { attribute: "fullDescription", size: "md" })))),
             !!((_d = props.tags) === null || _d === void 0 ? void 0 : _d.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags-field') },
                 react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Добавить теги') }),
                 react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -49,7 +49,8 @@ function CheckboxListFieldView(props) {
             disabled: props.disabled
         },
         size: props.size,
-        color: checkbox.color
+        color: checkbox.color,
+        required: checkbox.required
     }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/DateField/DateFieldView.js

@@ -46,7 +46,7 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 function DateFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateFieldView');
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: "bottom", visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: "bottom", visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), autoPositioning: props.autoPositioning, hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,

package/form/DropDownField/DropDownFieldView.scss

@@ -187,6 +187,8 @@ $drop-down-color-themes: map.merge(
     outline: none;
     cursor: pointer;
 
+    @include mixins.invalid-field($root);
+
     //Pseudo element for focus statement
     &::before {
         content: "";

package/form/FileField/FileFieldView.js

@@ -46,7 +46,10 @@ function FileFieldView(props) {
     var ButtonView = props.buttonView || Button_1["default"];
     var FileItemView = props.itemView;
     var isWall = props.filesLayout === FileField_1.FilesLayout.wall;
-    return (React.createElement("div", { className: bem(bem.block({ isWall: isWall }), props.className) },
+    return (React.createElement("div", { className: bem(bem.block({
+            isWall: isWall,
+            'is-invalid': !!props.errors
+        }), props.className) },
         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))); }))));
 }

package/form/FileField/FileFieldView.scss

@@ -1,9 +1,12 @@
 @use "../../scss/variables";
+@use '../../scss/mixins';
 
 .FileFieldView {
     $root: &;
     width: 100%;
 
+    @include mixins.invalid-button-field($root);
+
     &__files {
         margin-bottom: 1em;
         display: flex;

package/form/HtmlField/HtmlFieldView.js

@@ -1,41 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
-var ckeditor5_react_1 = require("@ckeditor/ckeditor5-react");
-var ckeditor5_build_classic_1 = __importDefault(require("@steroidsjs/ckeditor5/packages/ckeditor5-build-classic"));
+var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function HtmlFieldView(props) {
     var bem = (0, hooks_1.useBem)('HtmlFieldView');
+    var HtmlComponent = props.htmlComponent;
     if (process.env.IS_SSR) {
         return null;
     }
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement(ckeditor5_react_1.CKEditor, { editor: ckeditor5_build_classic_1["default"], disabled: props.disabled, config: props.editorProps, data: !props.input.value ? '' : props.input.value, onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur })));
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(HtmlComponent, { editor: props.editorConstructor, disabled: props.disabled, config: props.editorProps, data: !props.input.value ? '' : props.input.value, onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur })));
 }
 exports["default"] = HtmlFieldView;

package/form/ImageField/ImageFieldModalView.js

@@ -48,7 +48,7 @@ function ImageFieldModalView(props) {
     //TODO Исправить тип, связано с yarn tsc в action publish.yml
     var ReactCrop = react_image_crop_1["default"];
     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: [{
+    return (React.createElement(Modal_1["default"], { className: bem.block(), title: props.title || __('Выберите область изображения'), onClose: props.onClose, buttons: [{
                 label: __(('Сохранить')),
                 onClick: function () {
                     props.onClose();

package/form/ImageField/ImageFieldView.js

@@ -42,18 +42,25 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var form_1 = require("@steroidsjs/core/ui/form");
 function ImageFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('ImageFieldView');
     var item = props.item;
-    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement(form_1.Button, __assign({ className: bem.element('button', {
-            loading: item ? item.progress : false
+    var srcImage = React.useMemo(function () { return (item === null || item === void 0 ? void 0 : item.image) ? item.image.url + '?w=' + item.image.width + '&h=' + item.image.height : ''; }, [item]);
+    return (React.createElement("div", { className: bem(bem.block({
+            'is-invalid': !!props.errors
+        }), props.className) }, !item || !item.image ? (React.createElement(form_1.Button, __assign({ className: bem.element('button', {
+            loading: item ? item.progress : false,
+            hasErrors: !!props.errors
         }), onClick: props.onClick }, props.buttonProps),
         !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, "%")
                 } }))),
         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("img", { className: bem.element('image'), src: srcImage, width: item.image.width, height: item.image.height, alt: item.title }),
         React.createElement("div", { className: bem.element('image-controls') },
+            React.createElement("a", { className: bem.element('show-icon'), href: (_a = item.image.url) !== null && _a !== void 0 ? _a : '#', target: 'blank' },
+                React.createElement(Icon_1["default"], { name: 'view' })),
             React.createElement(Icon_1["default"], { className: bem.element('delete-icon'), name: 'trash', onClick: item.onRemove }))))));
 }
 exports["default"] = ImageFieldView;

package/form/ImageField/ImageFieldView.scss

@@ -1,21 +1,75 @@
 @use "../../scss/variables";
+@use '../../scss/mixins';
+
+:root {
+  --image-field-bottom-border-color: #9088a1;
+  --image-field-bottom-hover-border-color: #6f6b76;
+  --image-controls-icon-color: #ffffff;
+}
+
+$image-field-bottom-border-color: var(--image-field-bottom-border-color);
+$image-field-bottom-hover-border-color: var(
+  --image-field-bottom-hover-border-color
+);
+$image-controls-icon-color: var(--image-controls-icon-color);
 
 .ImageFieldView {
   $root: &;
+  width: 128px;
+  height: 128px;
+
+  @include mixins.invalid-button-field($root);
 
   &__button {
     display: flex;
     align-items: center;
-    min-width: 200px;
+    background-color: variables.$gray;
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    border: 1px dashed $image-field-bottom-border-color;
+
+    &:hover {
+      background-color: variables.$gray-dark;
+      border-color: $image-field-bottom-hover-border-color;
+
+      svg path {
+        stroke: variables.$text-color;
+      }
+    }
 
     &_loading {
       pointer-events: none;
     }
+
+    &_hasErrors {
+      border-color: variables.$danger;
+      border-style: solid;
+      background-color: variables.$background-color;
+
+      #{$root}__button-label {
+        color: variables.$danger;
+      }
+
+      svg path {
+        stroke: variables.$danger;
+      }
+
+      &:hover {
+        border-color: variables.$danger;
+
+        svg path {
+          stroke: variables.$danger;
+        }
+      }
+    }
   }
 
   .ButtonView__text {
     display: flex;
-    column-gap: 6px;
+    gap: 6px;
+    flex-direction: column;
+    align-items: center;
   }
 
   &__button-label {
@@ -24,7 +78,7 @@
   }
 
   &__progress-bar {
-    width: 80px;
+    width: 40px;
     height: 4px;
     border-radius: 100px;
     background: #cccccc;
@@ -39,7 +93,7 @@
 
   &__content {
     position: relative;
-    border-radius: 10px;
+    border-radius: 20px;
     width: 100%;
     height: 100%;
     border: 1px solid #cccccc;
@@ -59,21 +113,41 @@
     align-items: center;
     justify-content: center;
     opacity: 0;
+    gap: 16px;
     transition: opacity 0.15s;
 
+    .IconView {
+      cursor: pointer;
+      svg {
+        z-index: 1;
+        rect {
+          fill: $image-controls-icon-color;
+        }
+
+        path,
+        circle {
+          stroke: $image-controls-icon-color;
+        }
+      }
+    }
+
+    .MenuView__button svg {
+      width: 20px;
+      height: 24px;
+    }
+
     &:before {
       content: '';
       position: absolute;
       inset: 0;
       opacity: 0.6;
       background: #343a40;
-      border-radius: 6px;
+      border-radius: 16px;
     }
   }
 
-
   &__image {
-    border-radius: 6px;
+    border-radius: 16px;
     display: block;
     width: 100%;
     height: 100%;
@@ -88,4 +162,8 @@
       fill: #ffffff;
     }
   }
+
+  &__show-icon {
+    display: flex;
+  }
 }

package/form/RadioListField/RadioListFieldView.js

@@ -48,7 +48,8 @@ function RadioListFieldView(props) {
             },
             disabled: props.disabled
         },
-        size: props.size
+        size: props.size,
+        required: radio.required
     }); })));
 }
 exports["default"] = RadioListFieldView;

package/form/SwitcherField/SwitcherFieldView.js

@@ -48,7 +48,7 @@ function SwitcherFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (switcher, switcherIndex) { return (React.createElement("label", { key: switcherIndex, className: bem.element('switcher', {
             size: props.size
         }), htmlFor: "".concat(prefix, "_").concat(switcher.id) },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input') })),
+        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input'), required: switcher.required })),
         React.createElement("span", { className: bem.element('slider') }),
         React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
 }

package/icons/index.js

@@ -41,7 +41,7 @@ exports["default"] = (function (customIcons) {
         'cross_8x8',
         'default_16x16',
         'default_24x24',
-        'done-all',
+        'done-all_16x16',
         'cut',
         'error_16x16',
         'error_24x24',

package/icons/svgs/add_16x16.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 4L8 12" stroke="white" stroke-width="2" stroke-linecap="round"/>
-<path d="M12 8L4 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4.44916L8 12.4492" stroke="#323232" stroke-linecap="round"/>
+<path d="M12 8.44916L4 8.44916" stroke="#323232" stroke-linecap="round"/>
 </svg>

package/icons/svgs/copy.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.78125 4.48496C4.78125 3.64488 4.78125 3.22484 4.94474 2.90398C5.08855 2.62173 5.31802 2.39226 5.60026 2.24845C5.92113 2.08496 6.34117 2.08496 7.18125 2.08496H8.74178C9.09734 2.08496 9.27513 2.08496 9.44302 2.12407C9.5919 2.15875 9.73461 2.21598 9.86619 2.29379C10.0146 2.38153 10.1431 2.50438 10.4001 2.75007L12.0396 4.31721C12.3131 4.5786 12.4498 4.70929 12.5477 4.86353C12.6345 5.00025 12.6985 5.15013 12.7374 5.30734C12.7813 5.48468 12.7813 5.67382 12.7813 6.05211V9.68496C12.7813 10.525 12.7813 10.9451 12.6178 11.2659C12.474 11.5482 12.2445 11.7777 11.9622 11.9215C11.6414 12.085 11.2213 12.085 10.3813 12.085H7.18125C6.34117 12.085 5.92113 12.085 5.60026 11.9215C5.31802 11.7777 5.08855 11.5482 4.94474 11.2659C4.78125 10.9451 4.78125 10.525 4.78125 9.68496V4.48496Z" stroke="#323232"/>
-<path d="M2.94922 3.91504V9.91504C2.94922 11.3152 2.94922 12.0152 3.2217 12.55C3.46139 13.0204 3.84384 13.4029 4.31424 13.6426C4.84902 13.915 5.54909 13.915 6.94922 13.915H10.9492" stroke="#323232" stroke-linecap="round"/>
-<path d="M9.05078 2.08496V3.68496C9.05078 4.52504 9.05078 4.94508 9.21427 5.26595C9.35808 5.54819 9.58755 5.77766 9.8698 5.92147C10.1907 6.08496 10.6107 6.08496 11.4508 6.08496H13.0508" stroke="#323232"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 5.64922C7 4.52911 7 3.96906 7.21799 3.54124C7.40973 3.16491 7.71569 2.85895 8.09202 2.66721C8.51984 2.44922 9.07989 2.44922 10.2 2.44922H13.6745C14.1637 2.44922 14.4083 2.44922 14.6385 2.50448C14.8425 2.55347 15.0376 2.63428 15.2166 2.74394C15.4184 2.86762 15.5914 3.04057 15.9373 3.38648L19.0627 6.51196C19.4086 6.85786 19.5816 7.03082 19.7053 7.23265C19.8149 7.41159 19.8957 7.60668 19.9447 7.81076C20 8.04093 20 8.28552 20 8.7747V16.2492C20 17.3693 20 17.9294 19.782 18.3572C19.5903 18.7335 19.2843 19.0395 18.908 19.2312C18.4802 19.4492 17.9201 19.4492 16.8 19.4492H10.2C9.07989 19.4492 8.51984 19.4492 8.09202 19.2312C7.71569 19.0395 7.40973 18.7335 7.21799 18.3572C7 17.9294 7 17.3693 7 16.2492V5.64922Z" stroke="#323232"/>
+<path d="M4 5.44922V16.0492C4 18.2894 4 19.4095 4.43597 20.2652C4.81947 21.0178 5.43139 21.6298 6.18404 22.0132C7.03968 22.4492 8.15979 22.4492 10.4 22.4492H17" stroke="#323232" stroke-linecap="round"/>
+<path d="M14 2.44922V6.04922C14 6.8893 14 7.30934 14.1635 7.6302C14.3073 7.91245 14.5368 8.14192 14.819 8.28573C15.1399 8.44922 15.5599 8.44922 16.4 8.44922H20" stroke="#323232"/>
 </svg>

package/icons/svgs/cut.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.744 10.8572C5.84 11.0477 5.84 11.2382 5.84 11.4287C5.84 12.4763 4.976 13.3334 3.92 13.3334C2.864 13.3334 2 12.4763 2 11.4287C2 10.381 2.864 9.52389 3.92 9.52389C4.112 9.52389 4.208 9.52389 4.304 9.61913M7.184 9.42865L11.216 13.3334H13.904L5.744 5.23818C5.84 5.0477 5.84 4.95246 5.84 4.76199C5.84 3.71437 4.976 2.85722 3.92 2.85722C2.864 2.85722 2 3.71437 2 4.76199C2 5.80961 2.864 6.66675 3.92 6.66675C4.112 6.66675 4.304 6.66675 4.4 6.57151L5.84 8.09532M7.184 9.42865L5.84 8.09532M7.184 9.42865L5.168 10.0953L5.84 8.09532M8.144 5.71437L11.312 2.66675H14L9.584 7.14294" stroke="#323232" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.616 16.7349C8.76 17.0206 8.76 17.3064 8.76 17.5921C8.76 19.1635 7.464 20.4492 5.88 20.4492C4.296 20.4492 3 19.1635 3 17.5921C3 16.0206 4.296 14.7349 5.88 14.7349C6.168 14.7349 6.312 14.7349 6.456 14.8778M10.776 14.5921L16.824 20.4492H20.856L8.616 8.30636C8.76 8.02065 8.76 7.87779 8.76 7.59208C8.76 6.02065 7.464 4.73493 5.88 4.73493C4.296 4.73493 3 6.02065 3 7.59208C3 9.1635 4.296 10.4492 5.88 10.4492C6.168 10.4492 6.456 10.4492 6.6 10.3064L8.76 12.5921M10.776 14.5921L8.76 12.5921M10.776 14.5921L7.752 15.5921L8.76 12.5921M12.216 9.02065L16.968 4.44922H21L14.376 11.1635" stroke="#323232" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/svgs/done-all_16x16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.999998 9.54013L3.04198 10.9479C3.45739 11.2342 4.02106 11.1663 4.35652 10.7894L10 4.44922" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.51172 11.0044L7.80074 11.2332C8.4406 11.74 9.36817 11.6421 9.88816 11.0129L15.05 4.76777C15.2259 4.55493 15.196 4.23976 14.9831 4.06384C14.7703 3.88791 14.4551 3.91784 14.2792 4.13069L9.11737 10.3759C8.94404 10.5856 8.63485 10.6182 8.42156 10.4493L8.17769 10.2562L7.51172 11.0044Z" fill="#323232"/>
+</svg>

package/icons/svgs/edit.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.1492 13.1867L3.50275 12.8332L3.1492 13.1867C3.35861 13.3961 3.61967 13.3997 3.7744 13.3845C3.91494 13.3708 4.08228 13.3289 4.23896 13.2896C4.2479 13.2874 4.2568 13.2852 4.26566 13.283L5.68901 12.9271C5.70413 12.9233 5.71914 12.9196 5.73403 12.9159C5.95676 12.8605 6.15394 12.8114 6.33297 12.71C6.512 12.6087 6.65552 12.4648 6.81765 12.3024C6.82849 12.2915 6.83941 12.2806 6.85044 12.2695L11.6433 7.47662L11.6434 7.47661L11.651 7.46894L11.651 7.46893L11.6616 7.45835C11.8069 7.31306 11.9323 7.18769 12.0295 7.07715C12.1319 6.96083 12.226 6.83593 12.293 6.68494C12.4646 6.29777 12.4646 5.85607 12.293 5.46891C12.226 5.31791 12.1319 5.19302 12.0295 5.0767C11.9323 4.96616 11.8069 4.84079 11.6616 4.69552L11.651 4.68492L11.651 4.68491L11.6404 4.67432C11.4952 4.52903 11.3698 4.40365 11.2592 4.3064C11.1429 4.20407 11.018 4.10992 10.867 4.04297C10.4799 3.8713 10.0382 3.8713 9.651 4.04297C9.5 4.10992 9.37511 4.20407 9.25879 4.3064C9.14824 4.40365 9.02288 4.52902 8.87759 4.67432L8.867 4.68491L4.06641 9.4855C4.05538 9.49652 4.04444 9.50745 4.03357 9.51829C3.8711 9.68042 3.72727 9.82394 3.62591 10.003C3.52454 10.182 3.47547 10.3792 3.42004 10.6019C3.41633 10.6168 3.4126 10.6318 3.40882 10.6469L3.05298 12.0703C3.05076 12.0791 3.04854 12.088 3.0463 12.097C3.00706 12.2537 2.96514 12.421 2.9514 12.5615C2.93626 12.7163 2.93979 12.9773 3.1492 13.1867Z" stroke="#323232"/>
-<path d="M8.33203 5L10.9987 7.66667" stroke="#323232"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.92971 19.7322L5.92972 19.7322L5.95149 19.7267L5.95151 19.7267L8.58384 19.0686C8.59896 19.0649 8.61396 19.0611 8.62885 19.0574C8.85159 19.002 9.04877 18.9529 9.2278 18.8516C9.40683 18.7502 9.55035 18.6064 9.71248 18.4439C9.72332 18.433 9.73425 18.4221 9.74527 18.4111L16.9393 11.217L16.9393 11.217L16.9626 11.1937C17.2761 10.8803 17.5461 10.6103 17.7333 10.3649C17.9339 10.102 18.0858 9.8096 18.0858 9.44922C18.0858 9.08883 17.9339 8.79641 17.7333 8.53349C17.5461 8.28816 17.276 8.01812 16.9626 7.70472L16.9393 7.68145L16.5858 8.035L16.9393 7.68145L16.7678 7.50988L16.7445 7.4866C16.4311 7.17317 16.1611 6.9031 15.9157 6.71592C15.6528 6.51532 15.3604 6.36343 15 6.36343C14.6396 6.36343 14.3472 6.51532 14.0843 6.71592C13.8389 6.9031 13.5689 7.17317 13.2555 7.48661L13.2322 7.50988L6.03816 14.704C6.02714 14.715 6.01619 14.7259 6.00533 14.7367C5.84286 14.8989 5.69903 15.0424 5.59766 15.2214C5.4963 15.4005 5.44723 15.5976 5.39179 15.8204C5.38809 15.8353 5.38435 15.8503 5.38057 15.8654L4.71704 18.5195C4.71483 18.5284 4.7126 18.5373 4.71036 18.5462C4.67112 18.7029 4.62921 18.8702 4.61546 19.0108C4.60032 19.1655 4.60385 19.4265 4.81326 19.636C5.02267 19.8454 5.28373 19.8489 5.43846 19.8338C5.57899 19.82 5.74633 19.7781 5.90301 19.7389C5.91195 19.7366 5.92085 19.7344 5.92971 19.7322Z" stroke="#323232"/>
+<path d="M12.5 7.94922L16.5 11.9492" stroke="#323232"/>
 </svg>

package/icons/svgs/expand_down.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9L12 15L6 9" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 10.4492L12 14.4492L8 10.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/svgs/expand_up.svg

@@ -1,3 +1,3 @@
-<svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.2417 16.3981L17.9991 12.1554L13.7574 16.3971" stroke="#414141" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 14.4492L12 10.4492L8 14.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/svgs/paste.svg

@@ -1,8 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.20313 14C3.26032 14 2.78891 14 2.49602 13.6095C2.20312 13.219 2.20312 12.5904 2.20312 11.3333V4.66667C2.20312 3.40959 2.20312 2.78105 2.49602 2.39052C2.78891 2 3.26032 2 4.20312 2M9.20313 2C10.1459 2 10.6173 2 10.9102 2.39052C11.2031 2.78105 11.2031 3.40959 11.2031 4.66667" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="5.79688" y="6.05908" width="8" height="9" rx="2" stroke="#323232"/>
-<path d="M7.79688 8.05908L10.7969 8.05908" stroke="#323232" stroke-linecap="round"/>
-<path d="M7.79688 13.3923L9.79688 13.3923" stroke="#323232" stroke-linecap="round"/>
-<path d="M7.79688 10.7258L11.7969 10.7258" stroke="#323232" stroke-linecap="round"/>
-<rect x="4.20312" y="0.666504" width="5" height="3" rx="1.5" stroke="#323232"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.4158 21.4492C4.94921 21.4492 4.21591 21.4492 3.7603 20.8634C3.30469 20.2776 3.30469 19.3348 3.30469 17.4492V7.44922C3.30469 5.5636 3.30469 4.62079 3.7603 4.03501C4.21591 3.44922 4.94921 3.44922 6.4158 3.44922M14.1936 3.44922C15.6602 3.44922 16.3935 3.44922 16.8491 4.03501C17.3047 4.62079 17.3047 5.5636 17.3047 7.44922" stroke="#323232"/>
+<rect x="8.69531" y="9.53784" width="12" height="14" rx="3" stroke="#323232"/>
+<path d="M11.6953 12.5378L15.6953 12.5378" stroke="#323232" stroke-linecap="round"/>
+<path d="M11.6953 20.5378L14.6953 20.5378" stroke="#323232" stroke-linecap="round"/>
+<path d="M11.6953 16.5378L17.6953 16.5378" stroke="#323232" stroke-linecap="round"/>
+<rect x="6.30469" y="1.44922" width="8" height="4" rx="2" stroke="#323232"/>
 </svg>

package/icons/svgs/pin.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.69826 3.40949C9.35132 2.97412 9.67785 2.75643 10.0336 2.79166C10.3894 2.82689 10.6669 3.10439 11.2219 3.65938L12.3406 4.77812C12.8956 5.33311 13.1731 5.61061 13.2083 5.96638C13.2436 6.32215 13.0259 6.64868 12.5905 7.30174L11.7413 8.57559C11.6283 8.74498 11.5719 8.82967 11.518 8.91503C11.0329 9.68406 10.6825 10.5302 10.4817 11.417C10.4594 11.5154 10.4395 11.6152 10.3995 11.8148L10.2682 12.4714C10.171 12.9575 9.60766 13.1851 9.20002 12.9029V12.9029C6.81539 11.252 4.748 9.18461 3.0971 6.79998V6.79998C2.81489 6.39234 3.04246 5.82901 3.52863 5.73177L4.18516 5.60047C4.38478 5.56054 4.4846 5.54058 4.58303 5.5183C5.46984 5.31754 6.31594 4.96708 7.08497 4.48196C7.17033 4.42811 7.25502 4.37165 7.42441 4.25873L8.69826 3.40949Z" stroke="#323232"/>
-<path d="M2.75751 13.0794L5.58594 10.251" stroke="#323232" stroke-linecap="round"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6358 4.35871C15.2888 3.92334 15.6153 3.70565 15.9711 3.74088C16.3269 3.77611 16.6044 4.05361 17.1594 4.6086L19.8406 7.28984C20.3956 7.84483 20.6731 8.12233 20.7083 8.4781C20.7436 8.83387 20.5259 9.1604 20.0905 9.81345L18.4419 12.2864C17.88 13.1292 17.5991 13.5506 17.3749 14.0003C17.2086 14.3337 17.0659 14.6784 16.9476 15.0317C16.7882 15.5083 16.6889 16.0049 16.4902 16.9981L16.2992 17.953C16.2986 17.9564 16.2982 17.9581 16.298 17.9593C16.1556 18.6622 15.3414 18.9911 14.7508 18.5844C14.7497 18.5836 14.7483 18.5827 14.7455 18.5807V18.5807C14.7322 18.5715 14.7255 18.5669 14.7189 18.5623C11.2692 16.1717 8.27754 13.18 5.88691 9.7303C5.88233 9.72369 5.87772 9.71704 5.86851 9.70373V9.70373C5.86655 9.70091 5.86558 9.6995 5.86486 9.69846C5.45815 9.1078 5.78704 8.29366 6.4899 8.15124C6.49113 8.15099 6.49282 8.15066 6.49618 8.14998L7.45114 7.95899C8.44433 7.76035 8.94092 7.66103 9.4175 7.50158C9.77083 7.38337 10.1155 7.24061 10.4489 7.07436C10.8987 6.85011 11.32 6.5692 12.1628 6.00737L14.6358 4.35871Z" stroke="#323232"/>
+<path d="M5 19.4492L9.5 14.9492" stroke="#323232" stroke-linecap="round"/>
 </svg>

package/icons/svgs/trash.svg

@@ -1,6 +1,6 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.33203 9.66675L6.33203 7.66675" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.66797 9.66675L9.66797 7.66675" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 4.33325H14V4.33325C13.6904 4.33325 13.5356 4.33325 13.4056 4.35036C12.5081 4.46852 11.8019 5.17473 11.6838 6.0722C11.6667 6.20217 11.6667 6.35697 11.6667 6.66659V9.66659C11.6667 11.2303 11.6667 12.0122 11.2534 12.5508C11.147 12.6894 11.0229 12.8136 10.8842 12.92C10.3456 13.3333 9.56372 13.3333 8 13.3333V13.3333C6.43628 13.3333 5.65443 13.3333 5.11581 12.92C4.97715 12.8136 4.85303 12.6894 4.74663 12.5508C4.33333 12.0122 4.33333 11.2303 4.33333 9.66659V6.66659C4.33333 6.35697 4.33333 6.20217 4.31622 6.0722C4.19807 5.17473 3.49185 4.46852 2.59439 4.35036C2.46442 4.33325 2.30961 4.33325 2 4.33325V4.33325Z" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.66406 2.6665C6.66406 2.6665 6.96406 1.6665 8.16406 1.6665C9.36406 1.6665 9.66406 2.66626 9.66406 2.66626" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 14.9492L9.5 11.9492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 14.9492L14.5 11.9492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 6.94922H21V6.94922C19.5955 6.94922 18.8933 6.94922 18.3889 7.28628C18.1705 7.4322 17.983 7.6197 17.8371 7.83808C17.5 8.34253 17.5 9.04476 17.5 10.4492V15.9492C17.5 17.8348 17.5 18.7776 16.9142 19.3634C16.3284 19.9492 15.3856 19.9492 13.5 19.9492H10.5C8.61438 19.9492 7.67157 19.9492 7.08579 19.3634C6.5 18.7776 6.5 17.8348 6.5 15.9492V10.4492C6.5 9.04476 6.5 8.34253 6.16294 7.83808C6.01702 7.6197 5.82952 7.4322 5.61114 7.28628C5.10669 6.94922 4.40446 6.94922 3 6.94922V6.94922Z" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 3.94946C9.5 3.94946 10 2.94922 12 2.94922C14 2.94922 14.5 3.94922 14.5 3.94922" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/nav/Tree/TreeView.js

@@ -43,7 +43,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var TreeItemView_1 = __importDefault(require("../TreeItem/TreeItemView"));
 function TreeView(props) {
     var bem = (0, hooks_1.useBem)('TreeView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement(TreeItemView_1["default"], { key: item.uniqueId, item: item, levelPadding: props.levelPadding },
+    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement(TreeItemView_1["default"], { key: item.uniqueId, item: item, levelPadding: props.levelPadding, hideIcon: props.hideIcon },
         React.createElement(Link_1["default"], __assign({ className: bem.element('item-label') }, item)))); })));
 }
 exports["default"] = TreeView;

package/nav/TreeItem/TreeItemView.js

@@ -55,13 +55,14 @@ function TreeItemView(props) {
     return (React.createElement("div", __assign({ key: props.item.uniqueId, className: bem(bem.block({
             selected: props.item.isSelected,
             opened: props.item.isOpened,
-            'has-items': props.item.hasItems,
+            'has-items': props.item.hasItems || props.hideIcon,
             level: props.item.level,
-            disabled: props.item.disabled
+            disabled: props.item.disabled,
+            'hide-icon': props.hideIcon
         }), props.className), style: {
-            paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
+            paddingLeft: !props.hideIcon && "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
         } }, (!props.hasIconExpandOnly && onExpandProps)),
-        props.item.hasItems && (React.createElement(content_1.Icon, __assign({ name: 'expand_right', className: bem.element('icon', {
+        props.item.hasItems && !props.hideIcon && (React.createElement(content_1.Icon, __assign({ name: 'expand_right', className: bem.element('icon', {
                 opened: props.item.isOpened
             }) }, (props.hasIconExpandOnly && onExpandProps)))),
         React.createElement("div", { className: bem.element('item') }, props.children)));

package/nav/TreeItem/TreeItemView.scss

@@ -38,9 +38,21 @@ $grid-icon-color: var(--grid-icon-color);
   &__item {
     display: flex;
     margin-left: 8px;
+    flex-grow: 1;
+
+    >* {
+      flex-grow: 1;
+    }
+  }
+
+  &_hide-icon &__item {
+    margin-left: 0;
   }
 
   &__icon {
+    min-width: 24px;
+    min-height: 24px;
+
     transform: rotate(0);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
@@ -52,9 +64,4 @@ $grid-icon-color: var(--grid-icon-color);
         stroke: $grid-icon-color;
     }
   }
-
-  .IconView {
-    min-width: 24px;
-    min-height: 24px;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -18,9 +18,7 @@
         "url": "https://github.com/steroids/react-bootstrap/issues"
     },
     "dependencies": {
-        "@ckeditor/ckeditor5-react": "^3.0.2",
         "@splidejs/react-splide": "^0.7.12",
-        "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
         "date-fns": "^2.29.3",
         "lodash": "^4.17.20",
         "lodash-es": "^4.17.20",
@@ -37,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0.0",
+        "@steroidsjs/core": "^3.0.2",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/bootstrap-classes/flex.scss

@@ -40,3 +40,11 @@
     }
   }
 }
+
+.gap {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      gap: $value;
+    }
+  }
+}

package/scss/bootstrap-classes/spacing.scss

@@ -1,181 +1,119 @@
-// margin
-.m-1 {
-  margin: 0.25rem;
-}
-
-.m-2 {
-  margin: 0.5rem;
-}
-
-.m-3 {
-  margin: 1rem;
-}
-
-.m-horizontal-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.m-horizontal-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.m-horizontal-3 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.m-vertical-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.m-vertical-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.m-vertical-3 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
+@use "../variables";
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mb-3 {
-  margin-bottom: 1rem;
-}
-
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 1rem;
+// margin
+.m {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin: $value;
+    }
+  }
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
+.m-horizontal {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-left: $value;
+      margin-right: $value;
+    }
+  }
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
+.m-vertical {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-top: $value;
+      margin-bottom: $value;
+    }
+  }
 }
 
-.mr-3 {
-  margin-right: 1rem;
+.mb {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-bottom: $value;
+    }
+  }
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
+.mt {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-top: $value;
+    }
+  }
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
+.mr {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-right: $value;
+    }
+  }
 }
 
-.ml-3 {
-  margin-left: 1rem;
+.ml {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-left: $value;
+    }
+  }
 }
 
 // padding
-.p-1 {
-  padding: 0.25rem;
-}
-
-.p-2 {
-  padding: 0.5rem;
-}
-
-.p-3 {
-  padding: 1rem;
-}
-
-.p-horizontal-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.p-horizontal-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.p-horizontal-3 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.p-vertical-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.p-vertical-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.p-vertical-3 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pb-3 {
-  padding-bottom: 1rem;
-}
-
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.pt-3 {
-  padding-top: 1rem;
-}
-
-.pr-1 {
-  padding-right: 0.25rem;
-}
-
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
-.pr-3 {
-  padding-right: 1rem;
-}
-
-.pl-1 {
-  padding-left: 0.25rem;
-}
-
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
-.pl-3 {
-  padding-left: 1rem;
+.p {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      margin-left: $value;
+    }
+  }
+}
+
+.p-horizontal {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-left: $value;
+      padding-right: $value;
+    }
+  }
+}
+
+.p-vertical {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-top: $value;
+      padding-bottom: $value;
+    }
+  }
+}
+
+.pb {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-bottom: $value;
+    }
+  }
+}
+
+.pt {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-top: $value;
+    }
+  }
+}
+
+.pr {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-right: $value;
+    }
+  }
+}
+
+.pl {
+  @each $key, $value in variables.$spacing {
+    &-#{$key} {
+      padding-left: $value;
+    }
+  }
 }

package/scss/mixins/index.scss

@@ -4,4 +4,5 @@
 @forward "customMixins";
 @forward "date";
 @forward "navs";
-@forward "tooltip";
+@forward "tooltip";
+@forward "invalidField";

package/scss/mixins/invalidField.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../variables/index" as variables;
+
+@mixin invalid-field($root) {
+  &_is-invalid {
+    border: 1px solid variables.$danger !important;
+  }
+}
+
+@mixin invalid-button-field($root) {
+  &_is-invalid {
+    button {
+      border-color: variables.$danger !important;
+    }
+  }
+}

package/scss/variables/common/spacing.scss

@@ -10,3 +10,10 @@ $spacing-16: 16px;
 $spacing-8: 8px;
 $spacing-4: 4px;
 $spacing-2: 2px;
+
+$space: 1rem !default;
+$spacing: (
+        "1": $space * .25,
+        "2": $space * .5,
+        "3": $space,
+);

package/scss/variables/index.scss

@@ -5,6 +5,7 @@
 @forward 'common/old-variables';
 @forward 'common/variables';
 @forward 'common/flex';
+@forward 'common/spacing';
 
 @forward 'components/button';
 @forward 'components/calendar';

package/icons/svgs/done-all.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path d="M0.999998 9.09091L3.04198 10.4986C3.45739 10.785 4.02106 10.7171 4.35652 10.3402L10 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51367 10.5551L7.80269 10.784C8.44255 11.2907 9.37013 11.1928 9.89012 10.5637L15.0519 4.31856C15.2279 4.10571 15.1979 3.79054 14.9851 3.61462C14.7722 3.43869 14.4571 3.46862 14.2811 3.68147L9.11932 9.92663C8.94599 10.1363 8.6368 10.169 8.42351 10.0001L8.17965 9.80694L7.51367 10.5551Z" fill="white"/>
-</svg>