@steroidsjs/bootstrap 3.0.32 → 3.0.35

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables";
+@use 'style/variables';
 
 :root {
     --switcher-dot-disabled-color: #dbe2e6;
@@ -11,85 +11,79 @@ html[data-theme="dark"] {
     --switcher-slider-disabled-color: #5b5c6b;
 }
 
+
 $switcher-dot-disabled-color: var(--switcher-dot-disabled-color);
 $switcher-slider-disabled-color: var(--switcher-slider-disabled-color);
 
 $background-color-transition-timing: 150ms;
 
-
 .SwitcherFieldView {
     $root: &;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    row-gap: 10px;
-
-    &__switcher {
-        display: inline-flex;
-        column-gap: 12px;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
 
-        $sizes: () !default;
-        $sizes: map.merge(
-            (
-                "lg": (
-                    "width": 40px,
-                    "height": 24px,
-                    "dotSize": 18px,
-                    "dotTranslateDefault": translateY(-50%) translateX(4px),
-                    "dotTranslateActive": translateY(-50%) translateX(16px),
-                    "font-size": variables.$font-size-lg,
-                    "line-height": variables.$line-height-lg,
-                ),
-                "md": (
-                    "width": 34px,
-                    "height": 20px,
-                    "dotSize": 14px,
-                    "dotTranslateDefault": translateY(-50%) translateX(3px),
-                    "dotTranslateActive": translateY(-50%) translateX(15px),
-                    "font-size": variables.$font-size-base,
-                    "line-height": variables.$line-height-base,
-                ),
-                "sm": (
-                    "width": 28px,
-                    "height": 16px,
-                    "dotSize": 12px,
-                    "dotTranslateDefault": translateY(-50%) translateX(2px),
-                    "dotTranslateActive": translateY(-50%) translateX(12px),
-                    "font-size": variables.$font-size-sm,
-                    "line-height": variables.$line-height-sm,
-                ),
+    display: inline-flex;
+    column-gap: 12px;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    $sizes: () !default;
+    $sizes: map.merge(
+        (
+            "lg": (
+                "width": 40px,
+                "height": 24px,
+                "dotSize": 18px,
+                "dotTranslateDefault": translateY(-50%) translateX(4px),
+                "dotTranslateActive": translateY(-50%) translateX(16px),
+                "font-size": variables.$font-size-lg,
+                "line-height": variables.$line-height-lg,
             ),
-            $sizes
-        );
-
-        &_size { 
-            @each $size, $sizeMap in $sizes { 
-                &_#{$size} {
-                    #{$root}__slider {
-                        width: map.get($sizeMap, width);
-                        height: map.get($sizeMap, height);
-    
-                        &::before {
-                            width: map.get($sizeMap, dotSize);
-                            height: map.get($sizeMap, dotSize);
-                            transform: map.get($sizeMap, dotTranslateDefault);
-                        }
-                    }
-    
-                    #{$root}__input:checked + #{$root}__slider {
-                        &::before {
-                            transform: map.get($sizeMap, dotTranslateActive);
-                        }
+            "md": (
+                "width": 34px,
+                "height": 20px,
+                "dotSize": 14px,
+                "dotTranslateDefault": translateY(-50%) translateX(3px),
+                "dotTranslateActive": translateY(-50%) translateX(15px),
+                "font-size": variables.$font-size-base,
+                "line-height": variables.$line-height-base,
+            ),
+            "sm": (
+                "width": 28px,
+                "height": 16px,
+                "dotSize": 12px,
+                "dotTranslateDefault": translateY(-50%) translateX(2px),
+                "dotTranslateActive": translateY(-50%) translateX(12px),
+                "font-size": variables.$font-size-sm,
+                "line-height": variables.$line-height-sm,
+            ),
+        ),
+        $sizes
+    );
+
+    &_size { 
+        @each $size, $sizeMap in $sizes { 
+            &_#{$size} {
+                #{$root}__slider {
+                    width: map.get($sizeMap, width);
+                    height: map.get($sizeMap, height);
+
+                    &::before {
+                        width: map.get($sizeMap, dotSize);
+                        height: map.get($sizeMap, dotSize);
+                        transform: map.get($sizeMap, dotTranslateDefault);
                     }
-    
-                    #{$root}__label {
-                        font-size: map.get($sizeMap, font-size);
-                        line-height: map.get($sizeMap, line-height);
+                }
+
+                #{$root}__input:checked + #{$root}__slider {
+                    &::before {
+                        transform: map.get($sizeMap, dotTranslateActive);
                     }
                 }
+
+                #{$root}__label {
+                    font-size: map.get($sizeMap, font-size);
+                    line-height: map.get($sizeMap, line-height);
+                }
             }
         }
     }
@@ -190,4 +184,4 @@ $background-color-transition-timing: 150ms;
     &__label {
         color: variables.$text-color;
     }
-}
+}

package/form/SwitcherListField/SwitcherListFieldView.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
+export default function SwitcherListFieldView(props: ICheckboxListFieldViewProps): React.JSX.Element;

package/form/SwitcherListField/SwitcherListFieldView.js

@@ -0,0 +1,54 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var SwitcherFieldView_1 = __importDefault(require("../SwitcherField/SwitcherFieldView"));
+function SwitcherListFieldView(props) {
+    var bem = (0, hooks_1.useBem)('SwitcherListFieldView');
+    var prefix = (0, hooks_1.useUniqueId)('switcher');
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (checkbox, checkboxIndex) { return props.renderItem({
+        key: checkboxIndex,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            type: 'checkbox',
+            checked: props.selectedIds.includes(checkbox.id),
+            onChange: function () {
+                props.onItemSelect(checkbox.id);
+            },
+            disabled: props.disabled || checkbox.disabled
+        },
+        size: checkbox.size || props.size,
+        color: checkbox.color,
+        required: checkbox.required,
+        view: SwitcherFieldView_1["default"]
+    }); })));
+}
+exports["default"] = SwitcherListFieldView;

package/form/SwitcherListField/SwitcherListFieldView.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+.SwitcherListFieldView {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    row-gap: 10px;
+}

package/form/TextField/TextFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITextFieldViewProps } from '@steroidsjs/core/ui/form/TextField/TextField';
-export default function TextFieldView(props: ITextFieldViewProps): JSX.Element;
+export default function TextFieldView(props: ITextFieldViewProps): React.JSX.Element;

package/form/TimeField/TimeFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITimeFieldViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
-export default function TimeFieldView(props: ITimeFieldViewProps): JSX.Element;
+export default function TimeFieldView(props: ITimeFieldViewProps): React.JSX.Element;

package/form/TimeField/TimePanelView.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITimePanelViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
 export interface ITimePanelColumn {
     values: string[];
     currentValueKey: string;
     onUpdate: (value: string) => void;
 }
-declare function TimePanelView(props: ITimePanelViewProps): JSX.Element;
+declare function TimePanelView(props: ITimePanelViewProps): React.JSX.Element;
 declare namespace TimePanelView {
     var defaultProps: {
         showHeader: boolean;

package/form/TimeField/views/TimePanelColumn/TimePanelColumn.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { ITimePanelColumn } from '../../TimePanelView';
 import './TimePanelColumn.scss';
 export interface ITimePanelColumnProps {
     column: ITimePanelColumn;
     currentValue: string;
 }
-export default function TimePanelColumn(props: ITimePanelColumnProps): JSX.Element;
+export default function TimePanelColumn(props: ITimePanelColumnProps): React.JSX.Element;

package/form/TimeRangeField/TimeRangeFieldView.d.ts

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

package/format/DefaultFormatter/DefaultFormatterView.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IBooleanFormatterPropsView } from '@steroidsjs/core/ui/format/BooleanFormatter/BooleanFormatter';
-export default function DefaultFormatterView(props: IBooleanFormatterPropsView): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment;
+export default function DefaultFormatterView(props: IBooleanFormatterPropsView): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>;

package/index.d.ts

@@ -161,6 +161,9 @@ declare const _default: {
     'form.SwitcherFieldView': {
         lazy: () => any;
     };
+    'form.SwitcherListFieldView': {
+        lazy: () => any;
+    };
     'form.TextFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -164,6 +164,9 @@ exports["default"] = {
     'form.SwitcherFieldView': {
         lazy: function () { return require('./form/SwitcherField/SwitcherFieldView')["default"]; }
     },
+    'form.SwitcherListFieldView': {
+        lazy: function () { return require('./form/SwitcherListField/SwitcherListFieldView')["default"]; }
+    },
     'form.TextFieldView': {
         lazy: function () { return require('./form/TextField/TextFieldView')["default"]; }
     },

package/index.scss

@@ -65,6 +65,7 @@
 @include meta.load-css('form/ReCaptchaField/ReCaptchaFieldView');
 @include meta.load-css('form/SliderField/SliderFieldView');
 @include meta.load-css('form/SwitcherField/SwitcherFieldView');
+@include meta.load-css('form/SwitcherListField/SwitcherListFieldView');
 @include meta.load-css('form/TextField/TextFieldView');
 @include meta.load-css('form/TimeField/TimeFieldView');
 @include meta.load-css('form/TimeField/TimePanelView');

package/layout/Header/HeaderView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IHeaderViewProps } from '@steroidsjs/core/ui/layout/Header/Header';
-export default function HeaderView(props: IHeaderViewProps): JSX.Element;
+export default function HeaderView(props: IHeaderViewProps): React.JSX.Element;

package/layout/Loader/LoaderView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ILoaderViewProps } from '@steroidsjs/core/ui/layout/Loader/Loader';
-export default function LoaderView(props: ILoaderViewProps): JSX.Element;
+export default function LoaderView(props: ILoaderViewProps): React.JSX.Element;

package/layout/Notifications/NotificationsItemView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INotificationsItemViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsItemView(props: INotificationsItemViewProps): JSX.Element;
+export default function NotificationsItemView(props: INotificationsItemViewProps): React.JSX.Element;

package/layout/Notifications/NotificationsView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INotificationsViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsView(props: INotificationsViewProps): JSX.Element;
+export default function NotificationsView(props: INotificationsViewProps): React.JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function CircleProgressBarView(props: IProgressBarViewProps): JSX.Element;
+export default function CircleProgressBarView(props: IProgressBarViewProps): React.JSX.Element;

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function LineProgressBarView(props: IProgressBarViewProps): JSX.Element;
+export default function LineProgressBarView(props: IProgressBarViewProps): React.JSX.Element;

package/layout/Sidebar/FooterIcons/FooterIcons.d.ts

@@ -5,6 +5,6 @@ interface IFooterIconsProps {
     footerIcons?: IIconProps[];
     isShink?: boolean;
 }
-declare function FooterIcons(props: IFooterIconsProps): JSX.Element;
+declare function FooterIcons(props: IFooterIconsProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FooterIcons>;
 export default _default;

package/layout/Sidebar/SidebarLogo/SidebarLogo.d.ts

@@ -5,6 +5,6 @@ interface ISidebarLogoProps {
     label: string;
     toggleSidebar: () => void;
 }
-declare function SidebarLogo(props: ISidebarLogoProps): JSX.Element;
+declare function SidebarLogo(props: ISidebarLogoProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof SidebarLogo>;
 export default _default;

package/layout/Sidebar/SidebarUser/SidebarUser.d.ts

@@ -6,6 +6,6 @@ interface ISidebarUserProps {
     name: string;
     picture: string;
 }
-declare function SidebarUser(props: ISidebarUserProps): JSX.Element;
+declare function SidebarUser(props: ISidebarUserProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof SidebarUser>;
 export default _default;

package/layout/Sidebar/SidebarView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { ISidebarViewProps } from '@steroidsjs/core/ui/layout/Sidebar/Sidebar';
-export default function SidebarView(props: ISidebarViewProps): JSX.Element;
+export default function SidebarView(props: ISidebarViewProps): React.JSX.Element;

package/layout/Skeleton/SkeletonView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISkeletonViewProps } from '@steroidsjs/core/ui/layout/Skeleton/Skeleton';
-export default function SkeletonView(props: ISkeletonViewProps): JSX.Element;
+export default function SkeletonView(props: ISkeletonViewProps): React.JSX.Element;

package/layout/Tooltip/TooltipView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
-export default function TooltipView(props: ITooltipViewProps): JSX.Element;
+export default function TooltipView(props: ITooltipViewProps): React.JSX.Element;

package/list/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
-export default function CheckboxColumnView(props: ICheckboxColumnViewProps): JSX.Element;
+export default function CheckboxColumnView(props: ICheckboxColumnViewProps): React.JSX.Element;

package/list/ControlsColumnView/ControlsColumnView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IControlsColumnViewProps } from '@steroidsjs/core/ui/list/ControlsColumn/ControlsColumn';
-export default function ControlsColumnView(props: IControlsColumnViewProps): JSX.Element;
+export default function ControlsColumnView(props: IControlsColumnViewProps): React.JSX.Element;

package/list/Empty/EmptyView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IEmptyViewProps } from '@steroidsjs/core/ui/list/Empty/Empty';
-export default function EmptyView(props: IEmptyViewProps): JSX.Element;
+export default function EmptyView(props: IEmptyViewProps): React.JSX.Element;

package/list/FlexGrid/FlexGridView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFlexGridViewProps } from '@steroidsjs/core/ui/list/FlexGrid/FlexGrid';
-export default function FlexGridView(props: IFlexGridViewProps): JSX.Element;
+export default function FlexGridView(props: IFlexGridViewProps): React.JSX.Element;

package/list/Grid/views/ContentColumnView/ContentColumnView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { IColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
-export default function ContentColumnView(props: IColumnViewProps): JSX.Element;
+export default function ContentColumnView(props: IColumnViewProps): React.JSX.Element;

package/list/Grid/views/DiagramColumnView/DiagramColumnView.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
 import './DiagramColumnView.scss';
-export default function DiagramColumnView(props: IColumnViewProps): JSX.Element;
+export default function DiagramColumnView(props: IColumnViewProps): React.JSX.Element;

package/list/Grid/views/TreeColumnView/TreeColumnView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { ITreeColumnViewProps } from '@steroidsjs/core/ui/list/TreeTable/TreeTable';
-export default function TreeColumnView(props: ITreeColumnViewProps): JSX.Element;
+export default function TreeColumnView(props: ITreeColumnViewProps): React.JSX.Element;

package/list/List/ListItemView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IListItemViewProps } from '@steroidsjs/core/ui/list/List/List';
-export default function ListItemView(props: IListItemViewProps): JSX.Element;
+export default function ListItemView(props: IListItemViewProps): React.JSX.Element;

package/list/Pagination/PaginationButtonView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IPaginationViewProps } from '@steroidsjs/core/ui/list/Pagination/Pagination';
-export default function PaginationButtonView(props: IPaginationViewProps): JSX.Element;
+export default function PaginationButtonView(props: IPaginationViewProps): React.JSX.Element;

package/list/Pagination/PaginationMoreView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IPaginationViewProps } from '@steroidsjs/core/ui/list/Pagination/Pagination';
-export default function PaginationMoreView(props: IPaginationViewProps): JSX.Element;
+export default function PaginationMoreView(props: IPaginationViewProps): React.JSX.Element;

package/list/PaginationSize/PaginationSizeView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IPaginationSizeViewProps } from '@steroidsjs/core/ui/list/PaginationSize/PaginationSize';
-export default function PaginationSizeView(props: IPaginationSizeViewProps): JSX.Element;
+export default function PaginationSizeView(props: IPaginationSizeViewProps): React.JSX.Element;

package/list/Steps/StepItemView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { IStepItemViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
-export default function StepItemView(props: IStepItemViewProps): JSX.Element;
+export default function StepItemView(props: IStepItemViewProps): React.JSX.Element;

package/list/Steps/StepsView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { IStepsViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
-export default function StepsView(props: IStepsViewProps): JSX.Element;
+export default function StepsView(props: IStepsViewProps): React.JSX.Element;

package/modal/Modal/ModalView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IModalViewProps } from '@steroidsjs/core/ui/modal/Modal/Modal';
-export default function ModalView(props: IModalViewProps): JSX.Element;
+export default function ModalView(props: IModalViewProps): React.JSX.Element;

package/modal/TwoFactorModal/TwoFactorModalView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { ITwoFactorModalViewProps } from '@steroidsjs/core/ui/modal/TwoFactorModal/TwoFactorModal';
-export default function TwoFactorModalView(props: ITwoFactorModalViewProps): JSX.Element;
+export default function TwoFactorModalView(props: ITwoFactorModalViewProps): React.JSX.Element;

package/nav/Breadcrubms/BreadcrumbsView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IBreadcrumbsViewProps } from '@steroidsjs/core/ui/nav/Breadcrumbs/Breadcrumbs';
-export default function BreadcrumbsView(props: IBreadcrumbsViewProps): JSX.Element;
+export default function BreadcrumbsView(props: IBreadcrumbsViewProps): React.JSX.Element;

package/nav/ButtonGroup/ButtonGroupView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { IButtonGroupViewProps } from '@steroidsjs/core/ui/nav/ButtonGroup/ButtonGroup';
-export default function ButtonGroupView(props: IButtonGroupViewProps): JSX.Element;
+export default function ButtonGroupView(props: IButtonGroupViewProps): React.JSX.Element;

package/nav/Controls/ControlsView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IControlsViewProps } from '@steroidsjs/core/ui/nav/Controls/Controls';
-export default function ControlsView(props: IControlsViewProps): JSX.Element;
+export default function ControlsView(props: IControlsViewProps): React.JSX.Element;

package/nav/Nav/NavBarView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavBarView(props: INavViewProps): JSX.Element;
+export default function NavBarView(props: INavViewProps): React.JSX.Element;

package/nav/Nav/NavButtonView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavButtonView(props: INavViewProps): JSX.Element;
+export default function NavButtonView(props: INavViewProps): React.JSX.Element;

package/nav/Nav/NavIconView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavIconView(props: INavViewProps): JSX.Element;
+export default function NavIconView(props: INavViewProps): React.JSX.Element;

package/nav/Nav/NavLinkView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavLinkView(props: INavViewProps): JSX.Element;
+export default function NavLinkView(props: INavViewProps): React.JSX.Element;

package/nav/Nav/NavListView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavListView(props: INavViewProps): JSX.Element;
+export default function NavListView(props: INavViewProps): React.JSX.Element;

package/nav/Nav/NavTabsView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavTabsView(props: INavViewProps): JSX.Element;
+export default function NavTabsView(props: INavViewProps): React.JSX.Element;

package/nav/Tree/TreeView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITreeViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
-export default function TreeView(props: ITreeViewProps): JSX.Element;
+export default function TreeView(props: ITreeViewProps): React.JSX.Element;

package/nav/TreeItem/TreeItemView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITreeItemViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
-export default function TreeItemView(props: ITreeItemViewProps): JSX.Element;
+export default function TreeItemView(props: ITreeItemViewProps): React.JSX.Element;