@steroidsjs/bootstrap 3.0.0-beta.8 → 3.0.0-beta.81

package/index.js

@@ -5,6 +5,12 @@ exports["default"] = {
     'crud.CrudView': {
         lazy: function () { return require('./crud/Crud/CrudView')["default"]; }
     },
+    'content.MenuView': {
+        lazy: function () { return require('./content/Menu/MenuView')["default"]; }
+    },
+    'content.MenuItemView': {
+        lazy: function () { return require('./content/Menu/MenuItemView')["default"]; }
+    },
     'content.DropDownView': {
         lazy: function () { return require('./content/DropDown/DropDownView')["default"]; }
     },
@@ -26,6 +32,15 @@ exports["default"] = {
     'content.IconView': {
         lazy: function () { return require('./content/Icon/IconView')["default"]; }
     },
+    'content.BadgeView': {
+        lazy: function () { return require('./content/Badge/BadgeView')["default"]; }
+    },
+    'content.CopyToClipboardView': {
+        lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
+    },
+    'content.SliderView': {
+        lazy: function () { return require('./content/Slider/SliderView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -35,11 +50,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
@@ -122,6 +137,9 @@ exports["default"] = {
     'form.TimeFieldView': {
         lazy: function () { return require('./form/TimeField/TimeFieldView')["default"]; }
     },
+    'form.TimeRangeFieldView': {
+        lazy: function () { return require('./form/TimeRangeField/TimeRangeFieldView')["default"]; }
+    },
     'format.BooleanFormatterView': {
         lazy: function () { return require('./format/BooleanFormatter/BooleanFormatterView')["default"]; }
     },
@@ -164,6 +182,15 @@ exports["default"] = {
     'list.GridView': {
         lazy: function () { return require('./list/Grid/GridView')["default"]; }
     },
+    'list.FlexGridView': {
+        lazy: function () { return require('./list/FlexGrid/FlexGridView')["default"]; }
+    },
+    'list.ContentColumnView': {
+        lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
+    },
+    'list.DiagramColumnView': {
+        lazy: function () { return require('./list/Grid/views/DiagramColumnView/DiagramColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },
@@ -217,5 +244,14 @@ exports["default"] = {
     },
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    },
+    'nav.ButtonGroupView': {
+        lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
+    },
+    'typography.TextView': {
+        lazy: function () { return require('./typography/Text/TextView')["default"]; }
+    },
+    'typography.TitleView': {
+        lazy: function () { return require('./typography/Title/TitleView')["default"]; }
     }
 };

package/index.scss

@@ -1,16 +1,28 @@
+@import '~@splidejs/splide/dist/css/splide.min.css';
+
+@import './scss/normalize';
 @import './scss/mixins';
 @import './scss/variables';
+@import './scss/animations';
+@import './scss/fonts';
 
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
 @import './content/Avatar/AvatarGroupView';
+@import './content/Badge/BadgeView';
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
 @import './content/Detail/DetailView';
+@import './content/DropDown/DropDownView';
+@import './content/Menu/MenuItemView';
+@import './content/Menu/MenuView';
+@import './content/Icon/IconView';
+@import './content/CopyToClipboard/CopyToClipboardView';
+@import './content/Slider//SliderView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
 @import './form/CheckboxField/CheckboxFieldView';
@@ -19,18 +31,23 @@
 @import './form/DateRangeField/DateRangeFieldView';
 @import './form/DateTimeField/DateTimeFieldView';
 @import './form/DateTimeRangeField/DateTimeRangeFieldView';
+@import './form/TimeRangeField//TimeRangeFieldView';
+@import './form/DropDownFieldItem/DropDownFieldItemView';
 @import './form/DropDownField/DropDownFieldView';
 @import './form/FieldLayout/FieldLayoutView';
 @import './form/FieldList/FieldListView';
 @import './form/FieldList/FieldListItemView';
 @import './form/FileField/FileFieldView';
+@import './form/ImageField/ImageFieldView';
 @import './form/FileField/FileFieldItemView';
+@import './form/FieldSet/FieldSetView';
 @import './form/Form/FormView';
 @import './form/HtmlField/HtmlFieldView';
 @import './form/InputField/InputFieldView';
 @import './form/NumberField/NumberFieldView';
 @import './form/PasswordField/PasswordFieldView';
 @import './form/RateField/RateFieldView';
+@import './form/RadioField/RadioFieldView';
 @import './form/RadioListField/RadioListFieldView';
 @import './form/ReCaptchaField/ReCaptchaFieldView';
 @import './form/SliderField/SliderFieldView';
@@ -38,7 +55,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './content/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';
@@ -51,6 +67,8 @@
 @import './list/CheckboxColumn/CheckboxColumnView';
 @import './list/Empty/EmptyView';
 @import './list/Grid/GridView';
+@import './list/Grid/views/ContentColumnView/ContentColumnView';
+@import './list/FlexGrid/FlexGridView';
 @import './list/List/ListView';
 @import './list/Pagination/PaginationButtonView';
 @import './list/Pagination/PaginationMoreView';
@@ -67,3 +85,6 @@
 @import './nav/Nav/NavListView';
 @import './nav/Nav/NavTabsView';
 @import './nav/Tree/TreeView';
+@import './nav/ButtonGroup/ButtonGroupView';
+@import './typography/Text/TextView';
+@import './typography/Title/TitleView';

package/layout/Header/HeaderView.js

@@ -44,7 +44,7 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function HeaderView(props) {
     var bem = (0, hooks_1.useBem)('HeaderView');
-    return (React.createElement("nav", { className: bem('navbar navbar-expand-lg', props.dark ? 'navbar-dark' : 'navbar-light', props.dark ? 'bg-dark' : 'bg-light', bem.block(), props.className) },
+    return (React.createElement("header", { className: bem(bem.block(), props.className) },
         props.logo && (React.createElement(nav_1.Link, __assign({ className: bem('navbar-brand', bem.element('logo')), toRoute: 'root' }, props.logo.linkProps),
             props.logo.icon && (React.createElement(Icon_1["default"], { className: bem.element('logo-image'), name: props.logo.icon, title: props.logo.title })),
             props.logo.title || '')),

package/layout/Header/HeaderView.scss

@@ -1,15 +1,20 @@
 .HeaderView {
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
-  background-color: $body-bg;
-  &, a {
-    color: $body-color;
-  }
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 20px;
+  width: 100%;
+  background-color: $gray;
+
   a:hover {
     opacity: .7;
   }
 
   &__logo {
+    .ButtonView__text {
+      color: $text-color;
+    }
   }
+  
   &__logo-image {
     margin-right: 12px;
     display: inline-block;

package/layout/Loader/LoaderView.d.ts

@@ -1,2 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function LoaderView(props: IBemHocOutput): JSX.Element;
+import { ILoaderViewProps } from '@steroidsjs/core/ui/layout/Loader/Loader';
+export default function LoaderView(props: ILoaderViewProps): JSX.Element;

package/layout/Loader/LoaderView.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
 function LoaderView(props) {
     var bem = (0, hooks_1.useBem)('LoaderView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem.element('loader') })));
+    return (React.createElement("div", { className: bem.block({
+            color: props.color,
+            size: props.size
+        }) },
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading_purple' })));
 }
 exports["default"] = LoaderView;

package/layout/Loader/LoaderView.scss

@@ -1,27 +1,72 @@
+:root {
+  --gradient-color-primary-first: #651FFF;
+  --gradient-color-primary-second: #BA9BFF;
+}
+
+html[data-theme="dark"] { 
+  --gradient-color-primary-first: #9362FF;
+  --gradient-color-primary-second: #B898FF;
+}
+
+$gradient-color-primary-first: var(--gradient-color-primary-first);
+$gradient-color-primary-second: var(--gradient-color-primary-second);
+
 .LoaderView {
-  position: relative;
-  width: 100%;
-
-  &__loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -27px 0 0 -27px;
-    z-index: 20;
-    font-size: 10px;
-    text-indent: -9999em;
-    border-top: .9em solid rgba(246, 168, 33, 0.2);
-    border-right: .9em solid rgba(246, 168, 33, 0.2);
-    border-bottom: .9em solid rgba(246, 168, 33, 0.2);
-    border-left: .9em solid #db001f;
-    transform: translateZ(0);
+  $root: &;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &_size {
+    &_sm {
+      svg {
+        height: 33px;
+        width: 33px;
+        path {
+          stroke-width: 4px;
+        }
+      }
+    }
+    &_md {
+      svg {
+        height: 44px;
+        width: 44px;
+        path {
+          stroke-width: 6px;
+        }
+      }
+    }
+    &_lg {
+      svg {
+        height: 55px;
+        width: 55px;
+        path {
+          stroke-width: 7px;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: Loader-spin 1.1s infinite linear;
-    opacity: 1 !important;
+  }
+
+  &_color_gradient {
+    svg stop:first-child {
+      stop-color: $gradient-color-primary-first;
+    }
+    svg stop:last-child {
+      stop-color: $gradient-color-primary-second;
+    }
+  }
 
-    &, &::after {
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
+  @each $colorName, $colorMap in $color-themes {
+    &_color_#{$colorName} {
+        @include loader-color($colorMap, $colorName, $root);
     }
   }
 }
@@ -35,4 +80,4 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-}
+}

package/layout/Notifications/NotificationsItemView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsItemViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsItemView(props: INotificationsItemViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsItemView(props: INotificationsItemViewProps): JSX.Element;

package/layout/Notifications/NotificationsItemView.js

@@ -22,11 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 react_1 = require("react");
 var react_transition_group_1 = require("react-transition-group");
 var hooks_1 = require("@steroidsjs/core/hooks");
+var AlertView_1 = __importDefault(require("../../content/Alert/AlertView"));
 function NotificationsItemView(props) {
     var _a, _b;
     var _c = (0, react_1.useState)(false), isShow = _c[0], setIsShow = _c[1];
@@ -34,15 +38,12 @@ function NotificationsItemView(props) {
         setIsShow(!props.isClosing);
     }, [props.isClosing]);
     var bem = (0, hooks_1.useBem)('NotificationsItemView');
-    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem(bem.block((_a = {},
+    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem.block((_a = {},
             _a[props.position] = true,
-            _a))), unmountOnExit: true },
-        React.createElement("div", { className: bem(bem.block((_b = {},
-                _b[props.level] = true,
+            _a)), unmountOnExit: true },
+        React.createElement("div", { className: bem.block((_b = {},
                 _b[props.position] = true,
-                _b)), 'alert', 'alert-' + props.level) },
-            React.createElement("div", { className: bem.element('body') },
-                React.createElement("div", { className: bem.element('message') }, props.message),
-                React.createElement("button", { className: bem.element('close'), onClick: props.onClose })))));
+                _b)) },
+            React.createElement(AlertView_1["default"], { onClose: props.onClose, message: props.message, type: props.level, showClose: true, isExist: true, isVisible: true, showIcon: true }))));
 }
 exports["default"] = NotificationsItemView;

package/layout/Notifications/NotificationsItemView.scss

@@ -1,51 +1,13 @@
 .NotificationsItemView {
+
   overflow: hidden;
   max-height: 120px;
   padding: 0;
 
   border-width: 0;
-  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.1);
 
   transition: opacity .6s, transform .4s,
   max-height .6s .4s, margin .6s .6s;
-
-  &__body{
-    width: 100%;
-    height: 100%;
-
-    padding: 0.75rem 1.8rem 0.75rem 1.25rem;
-    border: 1px solid transparent;
-    border-color: inherit;
-  }
-
-  &__close{
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 25px;
-    height: 25px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .IconView{
-      svg{
-        width: 10px;
-      }
-    }
-
-    svg{
-      opacity: 0.4;
-      transition: opacity .1s ease-in;
-    }
-    &:hover svg{
-      opacity: 1;
-    }
-  }
-
-
   // Styles for React-Transition-Groups
   ////////////////////////////////////////
 

package/layout/Notifications/NotificationsView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsView(props: INotificationsViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsView(props: INotificationsViewProps): JSX.Element;

package/layout/Notifications/NotificationsView.scss

@@ -1,6 +1,9 @@
 .NotificationsView {
   z-index: 9999;
   position: fixed;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
   width: 400px;
 
   margin: 0;

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function CircleProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function CircleProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function LineProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function LineProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/ProgressBar/LineProgressBarView.scss

@@ -109,7 +109,7 @@
   }
 
   &__text{
-    color: $dark;
+    color: $graphite;
     margin-left: 8px;
   }
 }

package/layout/Tooltip/TooltipView.d.ts

@@ -1,3 +1,2 @@
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function TooltipView(props: ITooltipViewProps & IBemHocOutput): JSX.Element;
+export default function TooltipView(props: ITooltipViewProps): JSX.Element;

package/layout/Tooltip/TooltipView.js

@@ -27,18 +27,18 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+            show: props.isTooltipVisible,
+            position: props.position
+        }), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;

package/layout/Tooltip/TooltipView.scss

@@ -1,8 +1,7 @@
 @use 'sass:math';
 
-$tooltip-arrow-color: #000;
-$tooltip-arrow-width: 8px;
-$tooltip-arrow-height: 8px;
+$tooltip-arrow-width: 10px;
+$tooltip-arrow-height: 10px;
 $tooltip-arrow-border: math.div($tooltip-arrow-width, 2);
 $tooltip-gap: 12px;
 
@@ -10,10 +9,18 @@ $tooltip-arrow-offset-horizontal: 20px;
 $tooltip-arrow-offset-vertical-top: 15px;
 $tooltip-arrow-offset-vertical-bottom: 7px;
 
+$tooltip-background-color: rgba(65, 65, 65, 0.95);
+
 .TooltipView {
   position: absolute;
   top: 0;
   left: 0;
+  max-width: 300px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: $tooltip-background-color;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
@@ -22,99 +29,100 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   &_show {
     opacity: 1;
   }
-  &_show.tooltip-position-top, &_show.tooltip-position-topLeft,  &_show.tooltip-position-topRight{
+
+  &_position{
+    &_top, &_topLeft, &_topRight {
       transform: translateY(-$tooltip-gap);
-  }
-  &_show.tooltip-position-bottom, &_show.tooltip-position-bottomLeft,  &_show.tooltip-position-bottomRight{
-    transform: translateY($tooltip-gap);
-  }
-  &_show.tooltip-position-left, &_show.tooltip-position-leftTop,  &_show.tooltip-position-leftBottom{
-    transform: translateX(-$tooltip-gap);
-  }
-  &_show.tooltip-position-right, &_show.tooltip-position-rightTop,  &_show.tooltip-position-rightBottom{
-    transform: translateX($tooltip-gap);
-  }
+    }
+
+    &_bottom, &_bottomLeft, &_bottomRight {
+      transform: translateY($tooltip-gap);
+    }
+
+    &_left, &_leftTop, &_leftBottom {
+      transform: translateX(-$tooltip-gap);
+    }
 
+    &_right, &_rightTop, &_rightBottom {
+      transform: translateX($tooltip-gap);
+    }
+  }
 
   &__arrow{
     position: absolute;
-
+    
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
     border-style: solid;
     border-width: math.div($tooltip-arrow-height, 2);
+    border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-
-    &_position-top, &_position-topLeft, &_position-topRight{
+    &_position_top, &_position_topLeft, &_position_topRight{
       bottom: -$tooltip-arrow-border;
       left: 50%;
-
       border-top-color: transparent;
       border-left-color: transparent;
-      border-right-color:  $tooltip-arrow-color;
-      border-bottom-color:  $tooltip-arrow-color;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-topLeft{
+    &_position_topLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-topRight{
+    &_position_topRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-bottom, &_position-bottomLeft, &_position-bottomRight{
+    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
       top: -$tooltip-arrow-border;
       left: 50%;
-      border-top-color: $tooltip-arrow-color;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-bottomLeft{
+    &_position_bottomLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-bottomRight{
+    &_position_bottomRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-left, &_position-leftTop, &_position-leftBottom{
+    &_position_left, &_position_leftTop, &_position_leftBottom{
       right: -$tooltip-arrow-border;
       top: 50%;
-      border-top-color: $tooltip-arrow-color;
       border-left-color: transparent;
-      border-right-color: $tooltip-arrow-color;
       border-bottom-color: transparent;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-leftTop{
+    &_position_leftTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-leftBottom{
+    &_position_leftBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
 
-    &_position-right, &_position-rightTop, &_position-rightBottom{
+    &_position_right, &_position_rightTop, &_position_rightBottom{
       left: -$tooltip-arrow-border;
       top: 50%;
       border-top-color: transparent;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
-      border-bottom-color: $tooltip-arrow-color;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-rightTop{
+    &_position_rightTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-rightBottom{
+    &_position_rightBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
   }
 
+  &__content{
+    color: $white;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }

package/list/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
-export default function CheckboxColumnView(props: ICheckboxColumnViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxColumnView(props: ICheckboxColumnViewProps): JSX.Element;