Change SCSS imports, so that default export is always used. Related to …

…#859.

app/src/common/AppFooter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './AppFooter.scss';
+import css from './AppFooter.scss';
 import { FlexRow, Text, Anchor, IconContainer } from '@epam/promo';
 import { ReactComponent as EPAMIcon } from '../icons/EPAM.svg';
 

app/src/common/AppHeader.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
 import { UUI4 } from './docs';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
-import * as css from './AppHeader.scss';
+import css from './AppHeader.scss';
 
 type Theme = 'promo' | 'loveship' | 'orange' | 'cyan' | 'violet' | 'red';
 
@@ -169,4 +169,4 @@ export class AppHeader extends React.Component {
             <MainMenu cx={ css.root } items={ this.getMainMenuItems() }></MainMenu>
         );
     }
-}
+}

app/src/common/MainMenuAppMultiSwitch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as css from './MainMenuAppMultiSwitch.scss';
+import css from './MainMenuAppMultiSwitch.scss';
 import {IAnalyticableOnChange, IEditable} from '@epam/uui';
 import { ButtonProps } from '@epam/uui-components';
 import { Button, ControlGroup, ButtonMods, ButtonColor, SizeMod } from '@epam/promo';
@@ -41,4 +41,4 @@ export class MainMenuAppMultiSwitch<TValue> extends React.Component<MainMenuAppM
             </ControlGroup>
         );
     }
-}
+}

app/src/common/Page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './Page.scss';
+import css from './Page.scss';
 import { cx, IHasChildren } from '@epam/uui';
 import { ErrorHandler } from '@epam/promo';
 

app/src/common/appFooterDemo/AppFooterDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './AppFooterDemo.scss';
+import css from './AppFooterDemo.scss';
 import { FlexRow } from '@epam/promo';
 import { DemoItem } from "../../demo/structure";
 import { DemoToolbar } from "./demoToolbar/DemoToolbar";

app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx

@@ -1,4 +1,4 @@
-import * as css from './DemoToolbar.scss';
+import css from './DemoToolbar.scss';
 import * as React from "react";
 import { useHistory } from 'react-router';
 import { LinkButton, FlexRow, FlexCell, SuccessNotification, Text } from "@epam/promo";

app/src/common/docs/BaseDocsBlock.tsx

@@ -6,7 +6,7 @@ import { ComponentEditor } from './ComponentEditor';
 import { svc } from '../../services';
 import { getQuery } from '../../helpers';
 import { analyticsEvents } from '../../analyticsEvents';
-import * as css from './BaseDocsBlock.scss';
+import css from './BaseDocsBlock.scss';
 
 export type UUI3 = 'UUI3_loveship';
 export type UUI4 = 'UUI4_promo';
@@ -235,4 +235,4 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
             </div>
         );
     }
-}
+}

app/src/common/docs/ComponentEditor.tsx

@@ -9,7 +9,7 @@ import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/notificati
 import { ReactComponent as CopyIcon } from '../../icons/icon-copy.svg';
 import { ReactComponent as ResetIcon } from '../../icons/reset-icon.svg';
 import { ReactComponent as NotificationIcon } from '../../icons/notification-check-fill-24.svg';
-import * as css from './ComponentEditor.scss';
+import css from './ComponentEditor.scss';
 
 declare var require: any;
 
@@ -440,4 +440,4 @@ export class ComponentEditor extends React.Component<ComponentEditorProps<any>,
             </>
         );
     }
-}
+}

app/src/common/docs/ContentSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './ContentSection.scss';
+import css from './ContentSection.scss';
 import { ScrollBars } from '@epam/promo';
 import { IHasChildren } from "@epam/uui-core";
 
@@ -17,4 +17,4 @@ export class ContentSection extends React.Component<ContentSectionProps> {
             </div>
         );
     }
-}
+}

app/src/common/docs/DocExample.tsx

@@ -4,7 +4,7 @@ import { EditableDocContent } from './EditableDocContent';
 import { svc } from '../../services';
 import type { FilesRecord } from '../../data/codesandbox/getCodesandboxConfig';
 import { codesandboxService } from '../../data/codesandbox/service';
-import * as css from './DocExample.scss';
+import css from './DocExample.scss';
 import { ReactComponent as AnchorIcon } from '@epam/assets/icons/common/action-external_link-18.svg';
 import { ReactComponent as CodesandboxIcon } from '../../icons/social-network-codesandbox-24.svg';
 
@@ -136,4 +136,4 @@ export class DocExample extends React.Component<DocExampleProps, DocExampleState
             </div>
         );
     }
-}
+}

app/src/common/docs/EditableDocContent.tsx

@@ -5,7 +5,7 @@ import { Blocker } from '@epam/loveship';
 import { SlateEditor, basePlugins, toDoListPlugin, attachmentPlugin, imagePlugin, videoPlugin, linkPlugin, iframePlugin, notePlugin, separatorPlugin, headerPlugin, colorPlugin, superscriptPlugin, listPlugin, quotePlugin, tablePlugin, codeBlockPlugin,
 } from "@epam/uui-editor";
 import { svc } from '../../services';
-import * as css from './EditableDocContent.scss';
+import css from './EditableDocContent.scss';
 
 export interface EditableDocContentProps {
     fileName: string;

app/src/common/docs/FloatingActionButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './FloatingActionButton.scss';
+import css from './FloatingActionButton.scss';
 import { Button, Tooltip } from '@epam/promo';
 import { cx, Icon } from '@epam/uui';
 
@@ -16,4 +16,4 @@ export class FloatingActionButton extends React.Component<FloatingActionButtonPr
             <Button fill="white" color="blue" icon={ this.props.icon } size="48" onClick={ this.props.onClick } cx={ cx(css.root, this.props.buttonCx) } />
         </Tooltip>;
     }
-}
+}

app/src/common/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './Sidebar.scss';
+import css from './Sidebar.scss';
 import { ScrollBars, SearchInput } from '@epam/promo';
 import { Tree, TreeListItem } from '@epam/uui-components';
 import { SidebarButton } from './SidebarButton';
@@ -65,4 +65,4 @@ export function Sidebar<TItem extends TreeListItem>(props: SidebarProps<TItem>)
             </div>
         </aside>
     );
-}
+}

app/src/common/sidebar/SidebarButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonProps } from '@epam/uui-components';
 import { ReactComponent as DropdownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
-import * as css from './SidebarButton.scss';
+import css from './SidebarButton.scss';
 import { cx } from '@epam/uui';
 
 export interface SidebarButtonProps extends ButtonProps {
@@ -27,4 +27,4 @@ export class SidebarButton extends React.Component<SidebarButtonProps, any> {
             dropdownIcon={ DropdownIcon }
         />;
     }
-}
+}

app/src/common/slider/Slide.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './Slide.scss';
+import css from './Slide.scss';
 import { Text } from '@epam/promo';
 
 export interface SlideProps {

app/src/common/slider/Slider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './Slider.scss';
+import css from './Slider.scss';
 import { Slide, SlideProps } from './';
 import { IconButton } from '@epam/promo';
 import { IAnalyticableOnChange, UuiContext, UuiContexts } from "@epam/uui";
@@ -50,4 +50,4 @@ export class Slider extends React.Component<SliderProps> {
             </div>
         );
     }
-}
+}

app/src/demo/DemoPage.tsx

@@ -5,7 +5,7 @@ import { svc } from '../services';
 import { demoItems } from './structure';
 import { analyticsEvents } from '../analyticsEvents';
 import { getQuery } from '../helpers';
-import * as css from './DemoPage.scss';
+import css from './DemoPage.scss';
 import { useEffect } from "react";
 import { useFullScreenApi } from "../common/services/useFullScreenApi";
 import { AppFooterDemo } from "../common/appFooterDemo/AppFooterDemo";

app/src/demo/RTE/RichTextEditorDemo.tsx

@@ -6,7 +6,7 @@ import { SlateEditor, defaultPlugins, imagePlugin, videoPlugin, attachmentPlugin
 } from "@epam/uui-editor";
 import { svc } from '../../services';
 import { demoData } from '@epam/uui-docs';
-import * as css from './RichTextEditorDemo.scss';
+import css from './RichTextEditorDemo.scss';
 
 
 interface SlateEditorBasicExampleState {
@@ -78,4 +78,4 @@ export class RichTextEditorDemo extends React.Component<any, SlateEditorBasicExa
             </div>
         );
     }
-}
+}

app/src/demo/demoItemCard/DemoItemCard.tsx

@@ -1,5 +1,5 @@
 import { Anchor, Text } from "@epam/promo";
-import * as css from "./DemoItemCard.scss";
+import css from "./DemoItemCard.scss";
 import * as React from "react";
 import { DemoItem } from "../structure";
 

app/src/demo/dnd/DemoDnd.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import sortBy from 'lodash.sortby';
-import * as css from './DemoDnd.scss';
+import css from './DemoDnd.scss';
 import { FlexCell, FlexRow, FlexSpacer, IconButton, Panel, Text } from '@epam/promo';
 import { ReactComponent as AddIcon } from '@epam/assets/icons/common/content-add-outline-18.svg';
 import { DropParams, getOrderBetween } from '@epam/uui';
@@ -106,4 +106,4 @@ export class DemoDnd extends React.Component<{}, DemoDndState> {
             </FlexRow>
         );
     }
-}
+}

app/src/demo/dnd/DndCriterion.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './DndCriterion.scss';
+import css from './DndCriterion.scss';
 import { DndActor, IEditable, cx, DropParams, getOrderBetween } from '@epam/uui';
 import { FlexRow, DropMarker, Checkbox } from '@epam/promo';
 import { DragHandle } from '@epam/uui-components';
@@ -65,4 +65,4 @@ export class DndCriterion extends React.Component<DndCriterionProps> {
             />
         );
     }
-}
+}

app/src/demo/dnd/DndMaterial.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './DndMaterial.scss';
+import css from './DndMaterial.scss';
 import { DndActor, IEditable, IDndActor, cx, DropParams, uuiDndState, getOrderBetween } from '@epam/uui';
 import { FlexRow, DropMarker, FlexCell, Text, IconContainer, Panel } from '@epam/promo';
 import { DragHandle } from '@epam/uui-components';
@@ -70,4 +70,4 @@ export class DndMaterial extends React.Component<DndMaterialProps> {
             ) }
         />;
     }
-}
+}

app/src/demo/dnd/DndModule.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './DndModule.scss';
+import css from './DndModule.scss';
 import { DndActor, cx, DropParams, getOrderBetween, IEditable } from '@epam/uui';
 import { FlexRow, IconContainer, DropMarker, FlexCell, Text } from '@epam/promo';
 import { DragHandle } from '@epam/uui-components';
@@ -70,4 +70,4 @@ export class DndModule extends React.Component<DndModuleProps> {
             } }
         />;
     }
-}
+}

app/src/demo/dnd/DndSection.tsx

@@ -6,7 +6,7 @@ import { FlexRow, IconContainer, DropMarker, Text, RichTextView, FlexSpacer, Pan
 import { CriterionItem, DndCriterion } from './DndCriterion';
 import { DndMaterial, MaterialItem } from './DndMaterial';
 import { demoText } from './defaultState';
-import * as css from './DndSection.scss';
+import css from './DndSection.scss';
 import { ReactComponent as DownIcon } from '@epam/assets/icons/common/navigation-chevron-down-24.svg';
 
 export interface SectionItem {
@@ -103,4 +103,4 @@ export class DndSection extends React.Component<DndSectionProps> {
             ) }
         />;
     }
-}
+}

app/src/demo/form/DemoForm.tsx

@@ -14,7 +14,7 @@ import { defaultData, emptyInfo } from './defaultData';
 import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/notification-help-outline-24.svg';
 import { ReactComponent as AddIcon } from '@epam/assets/icons/common/action-add-18.svg';
 import { ReactComponent as ClearIcon } from '@epam/assets/icons/common/navigation-close-24.svg';
-import * as css from './DemoForm.scss';
+import css from './DemoForm.scss';
 import { useState } from "react";
 import dayjs, { Dayjs } from "dayjs";
 

app/src/demo/tables/filteredTable/columns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Text, Badge, EpamAdditionalColor, FlexRow, LinkButton } from '@epam/promo';
 import { DataColumnProps, getSeparatedValue } from "@epam/uui";
 import { Person } from "@epam/uui-docs";
-import * as css from './FilteredTable.scss';
+import css from './FilteredTable.scss';
 
 export const personColumns: DataColumnProps<Person, number>[] = [
     {

app/src/demo/tables/masterDetailedTable/columns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Text, Badge, EpamAdditionalColor, FlexRow, IconButton, LinkButton, Tag } from '@epam/promo';
 import { DataColumnProps } from "@epam/uui";
 import { Person } from "@epam/uui-docs";
-import * as css from './DemoTable.scss';
+import css from './DemoTable.scss';
 import { ReactComponent as ViewIcon } from '@epam/assets/icons/common/action-eye-18.svg';
 
 export const personColumns: DataColumnProps<Person, number>[] = [

app/src/demo/timeline/ModuleItems.tsx

@@ -1,6 +1,6 @@
 import { BaseTimelineCanvasComponentProps } from '@epam/uui-timeline/BaseTimelineCanvasComponent';
 import * as React from 'react';
-import * as styles from './ModuleItems.scss';
+import styles from './ModuleItems.scss';
 
 export interface Item {
     id: number;
@@ -57,4 +57,4 @@ export class ModuleItems extends React.Component<ModuleItemsProps> {
             </div>
         )
     }
-}
+}

app/src/demo/timeline/Timeline.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './Timeline.scss';
+import css from './Timeline.scss';
 import { msPerDay, TimelineController, TimelineScale, TimelineNav, TimelineGrid, Item } from '@epam/uui-timeline';
 import { DemoCanvasBars } from './DemoCanvasBars';
 import { Button } from '@epam/loveship';

app/src/demo/timeline/TimelineDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './TimelineDemo.scss';
+import css from './TimelineDemo.scss';
 
 import { Timeline } from './Timeline';
 

app/src/docs/assets/ColorsPage.doc.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FlexRow, FlexSpacer } from '@epam/promo';
 import { BaseDocsBlock, UUI3 } from '../../common';
 import { getQuery } from '../../helpers';
-import * as css from './DownloadsDoc.scss';
+import css from './DownloadsDoc.scss';
 
 import { PromoColorsDoc } from './promo/PromoColors.doc';
 import { LoveshipColorsDoc as LoveshipColorsDoc } from './loveship/LoveshipColors.doc';
@@ -27,4 +27,4 @@ export class ColorsPageDoc extends BaseDocsBlock {
             </>
         );
     }
-}
+}

app/src/docs/assets/Downloads.doc.tsx

@@ -3,7 +3,7 @@ import { cx } from '@epam/uui';
 import { FlexCell, FlexRow, FlexSpacer, IconContainer, LinkButton, RichTextView, Text, Tooltip } from '@epam/promo';
 import { BaseDocsBlock, UUI4 } from '../../common/docs';
 import { getQuery } from '../../helpers';
-import * as css from './DownloadsDoc.scss';
+import css from './DownloadsDoc.scss';
 import { ReactComponent as Artbord } from '../../icons/artboard.svg';
 import { ReactComponent as Sketch } from '../../icons/sketch.svg';
 import { ReactComponent as FontIcon } from '../../icons/fonts_icon.svg';

app/src/docs/assets/Icons.doc.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as css from './IconsPage.scss';
+import css from './IconsPage.scss';
 import { FlexCell, SearchInput, ControlSize, Panel, FlexRow, Text, IconContainer, Button, IconButton, LinkButton, TextInput,
     Tooltip, FlexSpacer, NotificationCard, MultiSwitch, ScrollBars } from '@epam/promo';
 import { ArrayDataSource, cx, DataRowProps, DataSourceState, Icon } from '@epam/uui';