@axinom/mosaic-ui 0.72.0-rc.8 → 0.72.0

package/src/components/FormElements/Radio/Radio.tsx

@@ -8,7 +8,7 @@ import {
 import { SvgElement } from '../../VisualElements/SvgElement';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './Radio.scss';
+import classes from './Radio.module.scss';
 
 export interface RadioProps extends BaseFormControl, BaseInputEvents {
   /** Current value the form control has */

package/src/components/FormElements/ReadOnly/ReadOnlyField.tsx

@@ -4,7 +4,7 @@ import React, { type PropsWithChildren } from 'react';
 import type { TransformerFunction } from '../../Utils';
 import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './ReadOnlyField.scss';
+import classes from './ReadOnlyField.module.scss';
 
 export interface ReadOnlyFieldProps<T = any> extends BaseFormElement {
   /** Value to be displayed */

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.tsx

@@ -7,7 +7,7 @@ import { IconName } from '../../Icons';
 import type { TransformerFunction } from '../../Utils';
 import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './ReadOnlyTextField.scss';
+import classes from './ReadOnlyTextField.module.scss';
 
 export interface ReadOnlyTextFieldProps<T = any> extends BaseFormElement {
   /** Value to be displayed */

package/src/components/FormElements/Select/Select.tsx

@@ -6,7 +6,7 @@ import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './Select.scss';
+import classes from './Select.module.scss';
 
 export interface SelectOption {
   value: string | number | string[];

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -8,7 +8,7 @@ import React, {
 import { executeIfRefAvailable } from '../../../helpers/utils';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './SingleLineText.scss';
+import classes from './SingleLineText.module.scss';
 
 export interface SingleLineTextProps extends BaseFormControl, BaseInputEvents {
   /** Input element type */

package/src/components/FormElements/Tags/Tags.tsx

@@ -14,7 +14,7 @@ import { IconName } from '../../Icons';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import { Select, type SelectOption } from '../Select/Select';
-import classes from './Tags.scss';
+import classes from './Tags.module.scss';
 
 export interface TagsProps<T = string>
   extends BaseFormControl,

package/src/components/FormElements/TextArea/TextArea.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { type FormEvent } from 'react';
 import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './TextArea.scss';
+import classes from './TextArea.module.scss';
 
 export interface TextAreaProps extends BaseFormControl {
   /** Current value the form control has */

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -10,7 +10,7 @@ import {
 import { SvgElement } from '../../VisualElements/SvgElement';
 import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './ToggleButton.scss';
+import classes from './ToggleButton.module.scss';
 
 export interface ToggleButtonProps
   extends Omit<CommonJsButtonOptions, 'buttonContext' | 'onButtonClicked'>,

package/src/components/FormStation/FormGrid/FormGrid.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './FormGrid.scss';
+import classes from './FormGrid.module.scss';
 
 export interface FormGridProps {
   edgeToEdgeContent?: boolean;

package/src/components/FormStation/FormStation.tsx

@@ -13,7 +13,7 @@ import type {
   ObjectSchemaDefinition,
   SaveDataFunction,
 } from './FormStation.models';
-import classes from './FormStation.scss';
+import classes from './FormStation.module.scss';
 import { FormStationAction } from './FormStationActions';
 import { FormStationContentWrapper } from './FormStationContentWrapper';
 import { FormStationHeader } from './FormStationHeader';

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.tsx

@@ -6,7 +6,7 @@ import { MessageBar } from '../../MessageBar';
 import { FormGrid } from '../FormGrid';
 import type { FormStationProps } from '../FormStation';
 import type { StationErrorStateType } from '../FormStation.models';
-import classes from './FormStationContentWrapper.scss';
+import classes from './FormStationContentWrapper.module.scss';
 
 interface FormStationContentWrapperProps
   extends Pick<

package/src/components/Hub/Hub.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { HubItem } from './Hub.model';
-import classes from './Hub.scss';
+import classes from './Hub.module.scss';
 import { Tile } from './Tile';
 
 export interface HubProps {

package/src/components/Hub/Tile/Tile.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { ImgElement } from '../../VisualElements/ImgElement';
 import type { TileProps } from './Tile.model';
-import classes from './Tile.scss';
+import classes from './Tile.module.scss';
 
 // TODO: Support for background colors and hover effect
 // TODO: Refactor all tile type components.

package/src/components/Icons/Icons.models.ts

@@ -47,6 +47,7 @@ export enum IconName {
   QuickEdit,
   QuickEditStation,
   RemoveFilter,
+  RemoveAllFilters,
   Replace,
   Retry,
   Save,

package/src/components/Icons/Icons.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import classes from '../../../.storybook/static/css/icons.scss';
+import classes from '../../../.storybook/static/css/icons.module.scss';
 import { SvgElement, SvgElementProps } from '../VisualElements/SvgElement';
 import { Icons } from './Icons';
 import { IconName } from './Icons.models';

package/src/components/Icons/Icons.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { SvgElement, type SvgElementProps } from '../VisualElements/SvgElement';
 import { IconName, type IconsProps } from './Icons.models';
-import classes from './Icons.scss';
+import classes from './Icons.module.scss';
 
 const DEFAULT_PATH_PROPS = {
   vectorEffect: 'non-scaling-stroke' as const,
@@ -410,6 +410,15 @@ const RemoveFilterIcon: React.FC<SvgElementProps> = (props) => (
   </SvgElement>
 );
 
+const RemoveAllFiltersIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path
+      {...DEFAULT_PATH_PROPS}
+      d="M11.6,10.9h20.7l-8.2,8.7v9.9l-4.7,3.7v-13.4s-7.8-8.9-7.8-8.9ZM33.3,24.2l4.4,4.4-4.4-4.4ZM33.3,24.2l-4.4-4.4,4.4,4.4-4.4,4.4,4.4-4.4ZM33.3,24.2l4.4-4.4-4.4,4.4ZM21,6.5H2.1l12.8,15.2v10.4"
+    />
+  </SvgElement>
+);
+
 const ReplaceIcon: React.FC<SvgElementProps> = (props) => (
   <SvgElement {...props}>
     <path
@@ -610,6 +619,7 @@ export const Icons: React.FC<IconsProps> = ({ icon, className, ...props }) => {
     [IconName.QuickEdit]: QuickEditIcon,
     [IconName.QuickEditStation]: QuickEditStationIcon,
     [IconName.RemoveFilter]: RemoveFilterIcon,
+    [IconName.RemoveAllFilters]: RemoveAllFiltersIcon,
     [IconName.Replace]: ReplaceIcon,
     [IconName.Retry]: RetryIcon,
     [IconName.Save]: SaveIcon,

package/src/components/InfoPanel/InfoImage/InfoImage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ActionData } from '../../Actions';
 import { InlineMenu } from '../../InlineMenu/InlineMenu';
 import { ImageLoader, type ImageLoaderProps } from '../../Loaders';
-import classes from './InfoImage.scss';
+import classes from './InfoImage.module.scss';
 
 export interface InfoImageProps extends ImageLoaderProps {
   /** Optional class */

package/src/components/InfoPanel/InfoPanel.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { IconName, Icons } from '../Icons';
-import classes from './InfoPanel.scss';
+import classes from './InfoPanel.module.scss';
 import { useCollapse } from './hooks/useCollapse';
 
 export interface InfoPanelProps {

package/src/components/InfoPanel/Paragraph/Paragraph.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './Paragraph.scss';
+import classes from './Paragraph.module.scss';
 
 export interface ParagraphProps {
   /** Paragraph Title */

package/src/components/InfoPanel/Section/Section.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { AccordionItem } from '../../Accordion';
 import { Paragraph } from '../Paragraph/Paragraph';
-import classes from './Section.scss';
+import classes from './Section.module.scss';
 
 export interface SectionProps {
   /** Section Title. If set, will allow the section to be expandable/collapsible */

package/src/components/InfoTooltip/InfoTooltip.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import { IconName, Icons } from '../Icons';
-import classes from './InfoTooltip.scss';
+import classes from './InfoTooltip.module.scss';
 
 export interface InfoTooltipProps {
   className?: string;

package/src/components/InlineMenu/InlineMenu.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { action } from 'storybook/actions';
-import classes from '../../../.storybook/static/css/confirm-dialog.scss';
+import classes from '../../../.storybook/static/css/confirm-dialog.module.scss';
 import { createGroups, enumToObj } from '../../helpers/storybook';
 import type { ActionData } from '../Actions';
 import { ButtonContext } from '../Buttons/Button.model';

package/src/components/InlineMenu/InlineMenu.tsx

@@ -1,13 +1,13 @@
 import type { Placement } from '@popperjs/core';
 import clsx from 'clsx';
-import React, { type Ref, useState } from 'react';
+import React, { useState, type Ref } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useExpand } from '../../hooks/useExpand/useExpand';
 import { Actions, type ActionsProps } from '../Actions';
 import { Button, type ButtonContext } from '../Buttons';
 import { IconName, type IconComponent } from '../Icons';
-import classes from './InlineMenu.scss';
+import classes from './InlineMenu.module.scss';
 
 export interface InlineMenuProps extends ActionsProps {
   /** Additional CSS class for the action container */

package/src/components/LandingPageHeader/LandingPageHeader.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './LandingPageHeader.scss';
+import classes from './LandingPageHeader.module.scss';
 
 export interface LandingPageHeaderProps {
   title: string;

package/src/components/LandingPageTiles/LandingPageTiles.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import type { LandingPageItem } from './LandingPageTiles.model';
-import classes from './LandingPageTiles.scss';
+import classes from './LandingPageTiles.module.scss';
 import { TileLarge } from './TileLarge';
 import { TileSmall } from './TileSmall';
 

package/src/components/LandingPageTiles/TileLarge/TileLarge.tsx

@@ -5,7 +5,7 @@ import { useValueOrOnDemand } from '../../../hooks/useValueOrOnDemand/useValueOr
 import { Loader } from '../../Loaders/Loader/Loader';
 import { ImgElement } from '../../VisualElements';
 import type { LandingPageItem } from '../LandingPageTiles.model';
-import classes from './TileLarge.scss';
+import classes from './TileLarge.module.scss';
 
 // TODO: Support for background colors and hover effect
 

package/src/components/LandingPageTiles/TileSmall/TileSmall.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { ImgElement } from '../../VisualElements';
 import type { LandingPageItem } from '../LandingPageTiles.model';
-import classes from './TileSmall.scss';
+import classes from './TileSmall.module.scss';
 
 // TODO: Support for background colors and hover effect
 

package/src/components/List/List.tsx

@@ -22,7 +22,7 @@ import {
   ListSelectMode,
   type SortData,
 } from './List.model';
-import classes from './List.scss';
+import classes from './List.module.scss';
 import { ListHeader } from './ListHeader/ListHeader';
 import type { ListRowProps } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';

package/src/components/List/ListCheckBox/ListCheckBox.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import classes from './ListCheckBox.scss';
+import classes from './ListCheckBox.module.scss';
 
 export interface ListCheckBoxProps {
   /** Checkbox's height (default: '50px') */

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react';
 import { noop } from '../../../../helpers/utils';
 import { SvgElement } from '../../../VisualElements/SvgElement';
 import type { ColumnSortKeys, SortData } from '../../List.model';
-import classes from './ColumnLabel.scss';
+import classes from './ColumnLabel.module.scss';
 
 interface ColumnLabelProps<T> {
   /** Column label */

package/src/components/List/ListHeader/ListHeader.tsx

@@ -5,7 +5,7 @@ import type { Data } from '../../../types/data';
 import type { Column, SortData } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import { ColumnLabel } from './ColumnLabel/ColumnLabel';
-import classes from './ListHeader.scss';
+import classes from './ListHeader.module.scss';
 
 export interface ListHeaderProps<T extends Data> {
   /** Column definitions */

package/src/components/List/ListRow/ListRow.tsx

@@ -10,7 +10,7 @@ import { IconName } from '../../Icons';
 import { InlineMenu } from '../../InlineMenu/InlineMenu';
 import { type Column, ListSelectMode } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
-import classes from './ListRow.scss';
+import classes from './ListRow.module.scss';
 import { ListRowCell } from './ListRowCell/ListRowCell';
 
 export interface ListRowProps<T extends Data> {

package/src/components/List/ListRow/ListRowCell/ListRowCell.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import type { Data } from '../../../../types/data';
 import type { Column } from '../../List.model';
-import classes from './ListRowCell.scss';
+import classes from './ListRowCell.module.scss';
 import { renderData } from './renderData';
 
 interface ListRowCellProps<T extends Data> {

package/src/components/List/ListRow/ListRowLoader.tsx

@@ -2,7 +2,7 @@ import React, { type PropsWithChildren } from 'react';
 import type { Column } from '..';
 import type { Data } from '../../../types/data';
 import { Loader } from '../../Loaders/Loader/Loader';
-import classes from './ListRow.scss';
+import classes from './ListRow.module.scss';
 
 export interface ListRowLoaderProps<T extends Data> {
   /** Spacing of columns */

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './BooleanDotRenderer.scss';
+import classes from './BooleanDotRenderer.module.scss';
 
 /**
  * Renders a red or green color dot to represent a boolean value

package/src/components/List/ListRow/Renderers/ExternalLinkRenderer/ExternalLinkRenderer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { Data } from '../../../../../types/data';
 import { IconName, Icons } from '../../../../Icons';
 import type { ColumnRenderer } from '../../../List.model';
-import classes from './ExternalLinkRenderer.scss';
+import classes from './ExternalLinkRenderer.module.scss';
 
 export type ExternalLinkResolver<T extends Data> = (
   /** Row data */

package/src/components/List/ListRow/Renderers/StateRenderer/StateRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Data } from '../../../../../types/data';
 import type { ColumnMap, ColumnRenderer } from '../../../../List/List.model';
-import classes from './StateRenderer.scss';
+import classes from './StateRenderer.module.scss';
 
 /**
  * Renders a state icon for an item.

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.tsx

@@ -4,7 +4,7 @@ import {
   scheduleIdleCallback,
   type IdleCallbackHandle,
 } from '../../../../../helpers';
-import classes from './TagsRenderer.scss';
+import classes from './TagsRenderer.module.scss';
 
 export const TagsRenderer = (val: unknown): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -4,7 +4,7 @@ import ContentLoader from 'react-content-loader';
 import { noop } from '../../../helpers/utils';
 import { ImgElement } from '../../VisualElements/ImgElement';
 import { SquareOutlineSkeleton } from '../skeletons';
-import classes from './ImageLoader.scss';
+import classes from './ImageLoader.module.scss';
 
 export interface ImageLoaderProps {
   /** Image's url */

package/src/components/Loaders/Loader/Loader.tsx

@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 import ContentLoader from 'react-content-loader';
 import { SingleLineSkeleton } from '../skeletons';
-import classes from './Loader.scss';
+import classes from './Loader.module.scss';
 
 export interface LoaderProps {
   /** Whether to show or hide the loader animation */

package/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { IconName, Icons } from '../Icons';
-import classes from './Message.scss';
+import classes from './Message.module.scss';
 
 export type MessageType = 'error' | 'info' | 'success' | 'warning';
 type MessageClass = 'hasError' | 'hasInfo' | 'hasSuccess' | 'hasWarning';

package/src/components/MessageBar/MessageBar.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { IconName, Icons } from '../Icons';
 import { Message, type MessageType } from '../Message';
-import classes from './MessageBar.scss';
+import classes from './MessageBar.module.scss';
 
 export interface MessageBarProps {
   /** Context to convey */

package/src/components/Modal/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import classes from '../../../.storybook/static/css/modal.scss';
+import classes from '../../../.storybook/static/css/modal.module.scss';
 import { TextButton } from '../Buttons';
 import { IconName } from '../Icons';
 import { PageHeader } from '../PageHeader';

package/src/components/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { noop } from '../../helpers/utils';
-import classes from './Modal.scss';
+import classes from './Modal.module.scss';
 
 export interface ModalProps {
   /** Whether the Modal is shown or not */

package/src/components/PageHeader/PageHeader.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
 import type { PageHeaderProps } from './PageHeader.model';
-import classes from './PageHeader.scss';
+import classes from './PageHeader.module.scss';
 import type { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -16,7 +16,7 @@ import {
   type PageHeaderJsActionProps,
   type PageHeaderNavigationActionProps,
 } from './PageHeaderAction.model';
-import classes from './PageHeaderAction.scss';
+import classes from './PageHeaderAction.module.scss';
 
 /**
  * Simple Confirm message

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx

@@ -13,7 +13,7 @@ import {
   type PageHeaderActionProps,
   PageHeaderActionType,
 } from '../PageHeaderAction/PageHeaderAction.model';
-import classes from './PageHeaderActionsGroup.scss';
+import classes from './PageHeaderActionsGroup.module.scss';
 import { PageHeaderActionsGroupContext } from './PageHeaderActionsGroupsContext';
 
 export interface PageHeaderActionsGroupProps {

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { FullProgressBar, ProgressBarProps } from './ProgressBar.model';
-import classes from './ProgressBar.scss';
+import classes from './ProgressBar.module.scss';
 
 /**
  * Component for showing a progress bar.

package/src/components/Tabs/Tab/CustomTab.tsx

@@ -4,7 +4,7 @@ import {
   Tab,
   type TabProps,
 } from 'react-tabs';
-import classes from './CustomTab.scss';
+import classes from './CustomTab.module.scss';
 
 export const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
   children,

package/src/components/Tabs/TabList/CustomTabList.tsx

@@ -5,7 +5,7 @@ import {
   TabList,
   type TabListProps,
 } from 'react-tabs';
-import classes from './CustomTabList.scss';
+import classes from './CustomTabList.module.scss';
 import { ScrollContainer } from './ScrollContainer';
 
 export const CustomTabList: ReactTabsFunctionComponent<TabListProps> = ({

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { Button, ButtonContext } from '../../../Buttons';
 import { IconName } from '../../../Icons';
-import classes from './ScrollContainer.scss';
+import classes from './ScrollContainer.module.scss';
 import { useScroll } from './useScroll';
 
 export const ScrollContainer: React.FC = ({ children }) => {

package/src/components/Tabs/TabPanel/CustomTabPanel.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-tabs';
 import { FormGrid } from '../../FormStation';
 import type { FormGridProps } from '../../FormStation/FormGrid';
-import classes from './CustomTabPanel.scss';
+import classes from './CustomTabPanel.module.scss';
 
 interface CustomTabPanelProps extends TabPanelProps, FormGridProps {}
 

package/src/components/index.ts

@@ -1,6 +1,7 @@
 /** Export all components to be included into the node package here */
 export * from './Accordion';
 export * from './Actions';
+export * from './Badge';
 export * from './Buttons';
 export * from './DynamicDataList';
 export * from './EmptyStation';

package/src/docs/Intro.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import classes from './intro.scss';
+import classes from './intro.module.scss';
 
 <Meta title="Getting Started/Intro" />
 

package/src/hooks/useResize/ResizeIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classes from './ResizeIndicator.scss';
+import classes from './ResizeIndicator.module.scss';
 
 interface ResizeIndicatorProps {
   resizePosition: number | undefined;

package/src/components/Filters/Filters.scss

@@ -1,20 +0,0 @@
-@import '../../styles/common.scss';
-
-.container {
-  @include boxSizing;
-
-  height: 100%;
-  width: $filter-width;
-
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: min-content;
-  overflow-y: auto;
-  gap: 5px;
-  padding: 5px;
-
-  background-color: var(
-    --filter-controller-background-color,
-    $filter-controller-background-color
-  );
-}