chore: fix import statements

core/components/atoms/avatar/Avatar.tsx

@@ -70,6 +70,8 @@ export const Avatar = (props: AvatarProps) => {
 
   const baseProps = extractBaseProps(props);
 
+  console.log('stylessss', styles);
+
   const initials =
     children && typeof children === 'string'
       ? children.trim().slice(0, initialsLength)

core/components/atoms/avatar/avatar.module.css

@@ -10,6 +10,7 @@
   text-transform: uppercase;
   border-radius: 50%;
   cursor: default;
+  background-color: red;
 }
 
 .Avatar--wrapper {

core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -7,7 +7,7 @@ import { AvatarSize } from '@/common.type';
 import AvatarCount from './AvatarCount';
 import Avatars from './Avatars';
 import AvatarPopperBody from './AvatarPopperBody';
-import styles from './AvatarGroup.module.css';
+import styles from './avatarGroup.module.css';
 
 interface AvatarData extends Record<string, any> {
   firstName?: string;

core/components/atoms/backdrop/Backdrop.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './Backdrop.module.css';
+import styles from './backdrop.module.css';
 
 const { useEffect, useState } = React;
 

core/components/atoms/badge/Badge.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { AccentAppearance } from '@/common.type';
-import styles from './Badge.module.css';
+import styles from './badge.module.css';
 
 export interface BadgeProps extends BaseProps {
   /*

core/components/atoms/breadcrumbs/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Button, Link, Tooltip, Dropdown } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './Breadcrumbs.module.css';
+import styles from './breadcrumbs.module.css';
 
 interface Breadcrumb {
   label: string;

core/components/atoms/card/Card.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
-import styles from './Card.module.css';
+import styles from './card.module.css';
 
 export type Shadow = 'none' | 'default' | 'light' | 'medium' | 'dark' | 'shadow10' | 'shadow20' | 'shadow30';
 

core/components/atoms/cardSubdued/CardSubdued.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
-import styles from './CardSubdued.module.css';
+import styles from './cardSubdued.module.css';
 
 type Border = 'top' | 'left' | 'right' | 'bottom';
 

core/components/atoms/checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
 import { ChangeEvent } from '@/common.type';
 import CheckboxIcon from './CheckboxIcon';
-import styles from './Checkbox.module.css';
+import styles from './checkbox.module.css';
 
 export type CheckBoxSize = 'regular' | 'tiny';
 

core/components/atoms/checkbox/CheckboxIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Checkbox.module.css';
+import styles from './checkbox.module.css';
 
 type CheckboxIconProp = {
   name: string;

core/components/atoms/chip/Chip.tsx

@@ -3,7 +3,7 @@ import GenericChip from '../_chip';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { IconType } from '@/common.type';
-import styles from './Chip.module.css';
+import styles from './chip.module.css';
 
 export type ChipType = 'action' | 'selection' | 'input';
 export type Name = number | string | object;

core/components/atoms/chipGroup/ChipGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Chip, { ChipProps } from '../chip/Chip';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './ChipGroup.module.css';
+import styles from './chipGroup.module.css';
 
 export interface ChipGroupProps extends BaseProps {
   /**

core/components/atoms/collapsible/Collapsible.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './Collapsible.module.css';
+import styles from './collapsible.module.css';
 
 export interface CollapsibleProps extends BaseProps {
   /**

core/components/atoms/divider/Divider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './Divider.module.css';
+import styles from './divider.module.css';
 
 type DividerType = 'basic' | 'header';
 

core/components/atoms/dropdown/DropdownButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import { IconType } from '@/common.type';
-import styles from './Dropdown.module.css';
+import styles from './dropdownButton.module.css';
 
 export type DropDownButtonSize = 'tiny' | 'regular';
 

core/components/atoms/dropdown/DropdownList.tsx

@@ -10,7 +10,7 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { ChangeEvent } from '@/common.type';
 import { ErrorTemplate } from './ErrorTemplate';
 import { ErrorType } from './Dropdown';
-import styles from './Dropdown.module.css';
+import styles from './dropdown.module.css';
 
 export type DropdownAlign = 'left' | 'right';
 export type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';

core/components/atoms/icon/Icon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { useAccessibilityProps } from '@/accessibility/utils';
-import styles from './Icon.module.css';
+import styles from './icon.module.css';
 
 export type IconAppearance =
   | 'default'

core/components/atoms/input/Input.tsx

@@ -5,7 +5,7 @@ import { IconProps } from '@/index.type';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
 import { AutoComplete, IconType } from '@/common.type';
 import ActionButton from './actionButton';
-import styles from './Input.module.css';
+import styles from './input.module.css';
 
 export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
 export type InputSize = 'tiny' | 'regular' | 'large';

core/components/atoms/input/actionButton/ActionButton.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps } from '@/utils/types';
 import { IconType } from '@/common.type';
 import { Icon } from '@/index';
-import styles from './ActionButton.module.css';
+import styles from './actionButton.module.css';
 
 export type ActionButtonType = 'outlined' | 'rounded';
 

core/components/atoms/link/Link.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
-import styles from './Link.module.css';
+import styles from './link.module.css';
 
 type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
 type LinkAppearance = 'default' | 'subtle';

core/components/atoms/linkButton/LinkButton.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps, BaseHtmlProps } from '@/utils/types';
 import { Icon } from '@/index';
 import { IconType } from '@/common.type';
-import styles from './LinkButton.module.css';
+import styles from './linkButton.module.css';
 
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type LinkButtonSize = 'tiny' | 'regular';

core/components/atoms/message/Message.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Icon, Heading, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { MessageAppearance } from '@/common.type';
-import styles from './Message.module.css';
+import styles from './message.module.css';
 
 const IconMapping = {
   success: 'check_circle',

core/components/atoms/metaList/Meta.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Icon, Text } from '@/index';
 import { MetaSize } from './MetaList';
 import { IconType } from '@/common.type';
-import styles from './Metalist.module.css';
+import styles from './metaList.module.css';
 
 export interface MetaProps {
   label: string;

core/components/atoms/metaList/MetaList.tsx

@@ -4,7 +4,7 @@ import Meta, { MetaProps } from './Meta';
 import { Icon } from '@/index';
 import { IconProps, TextProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './MetaList.module.css';
+import styles from './metaList.module.css';
 
 export type MetaSize = 'small' | 'regular';
 export interface MetaListProps extends BaseProps {

core/components/atoms/metricInput/MetricInput.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Button, Icon, Text } from '@/index';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
 import { AutoComplete, IconType } from '@/common.type';
-import styles from './MetricInput.module.css';
+import styles from './metricInput.module.css';
 
 export type MetricInputSize = 'regular' | 'large';
 

core/components/atoms/pills/Pills.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { AccentAppearance } from '@/common.type';
-import styles from './Pills.module.css';
+import styles from './pills.module.css';
 
 export interface PillsProps extends BaseProps {
   /**

core/components/atoms/progressRing/ProgressRing.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './ProgressRing.module.css';
+import styles from './progressRing.module.css';
 
 export type ProgressRingSize = 'small' | 'regular';
 

core/components/atoms/radio/Radio.tsx

@@ -4,7 +4,7 @@ import Text from '@/components/atoms/text';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
 import { ChangeEvent } from '@/common.type';
-import styles from './Radio.module.css';
+import styles from './radio.module.css';
 
 export type RadioSize = 'regular' | 'tiny';
 

core/components/atoms/selectionCard/SelectionCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, BaseHtmlProps } from '@/utils/types';
 import { useMultiSelect, useSingleSelect } from './hooks';
-import styles from './SelectionCard.module.css';
+import styles from './selectionCard.module.css';
 
 type ClickEventType = React.MouseEvent<HTMLDivElement> | React.KeyboardEvent;
 

core/components/atoms/spinner/Spinner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './Spinner.module.css';
+import styles from './spinner.module.css';
 
 export type SpinnerAppearance = 'primary' | 'secondary' | 'white';
 export type SpinnerSize = 'small' | 'medium' | 'large';

core/components/atoms/switchInput/Switch.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { OmitNativeProps, BaseProps } from '@/utils/types';
 import { isSpaceKey } from '@/accessibility/utils';
 import { ChangeEvent } from '@/common.type';
-import styles from './Switch.module.css';
+import styles from './switch.module.css';
 
 export type SwitchSize = 'regular' | 'tiny' | 'large';
 export type SwitchAppearance = 'primary' | 'alert' | 'success' | 'warning';

core/components/atoms/textarea/Textarea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
-import styles from './Textarea.module.css';
+import styles from './textarea.module.css';
 
 export interface TextareaProps extends BaseProps, BaseHtmlProps<HTMLTextAreaElement> {
   /**

core/components/atoms/toast/Toast.tsx

@@ -6,7 +6,7 @@ import Icon from '@/components/atoms/icon';
 import ActionButton from './ActionButton';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { MessageAppearance } from '@/common.type';
-import styles from './Toast.module.css';
+import styles from './toast.module.css';
 
 export type Action = {
   /**

core/components/css-utilities/Spacing/Schema.tsx

@@ -1,7 +1,7 @@
 import { Schema } from '../../organisms/grid';
 import { GridCell, Button } from '@/index';
 import * as React from 'react';
-import styles from './YourCSSModule.module.css';
+// import styles from './YourCSSModule.module.css';
 
 const copyCode = (val: string) => navigator.clipboard.writeText(val);
 
@@ -20,7 +20,7 @@ export const classSchema: Schema = [
             appearance="transparent"
             icon="content_copy"
             onClick={copyCode.bind(null, marginClasses)}
-            className={styles.button}
+            // className={styles.button}
           />
         </>
       );
@@ -40,7 +40,7 @@ export const classSchema: Schema = [
             appearance="transparent"
             icon="content_copy"
             onClick={copyCode.bind(null, paddingClasses)}
-            className={styles.button}
+            // className={styles.button}
           />
         </>
       );

core/components/css-utilities/designTokens/Schema.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Schema } from '../../organisms/grid';
 import { GridCell, Button } from '@/index';
-import styles from './YourStyles.module.css';
+// import styles from './YourStyles.module.css';
 
 const copyCode = (val: string) => navigator.clipboard.writeText(val);
 
@@ -82,7 +82,7 @@ export const getSchema = (property: string, text: string, classnames?: string, c
         return (
           <div
             style={styleObj}
-            className={`${classnames} ${props.data.setBgColor === undefined ? '' : styles.setBgColor}`}
+            className={`${classnames} ${props.data.setBgColor === undefined ? '' : 'setBgColor'}`}
           >
             {text}
           </div>

core/components/css-utilities/designTokens/Utilities.tsx

@@ -1,6 +1,6 @@
-import styles from './YourComponent.module.css';
+// import styles from './YourComponent.module.css';
 
 export function giveBgColor(htmlCollection: HTMLCollection) {
   const htmlArr = Array.from(htmlCollection);
-  htmlArr.forEach((element) => element.parentNode?.parentElement?.classList.add(styles.bgDark));
+  htmlArr.forEach((element) => element.parentNode?.parentElement?.classList.add('bg-dark'));
 }

core/components/molecules/chipInput/ChipInput.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Chip, Icon } from '@/index';
 import { ChipProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './ChipInput.module.css';
+import styles from './chipInput.module.css';
 
 const keyCodes = {
   BACKSPACE: 'Backspace',

core/components/molecules/dropzone/Dropzone.tsx

@@ -8,7 +8,7 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { fileErrorMessages } from './FileErrors';
 import { useAccessibilityProps } from '@/accessibility/utils';
 import DropzoneIcon from './DropzoneIcon';
-import styles from './Dropzone.module.css';
+import styles from './dropzone.module.css';
 
 export type DropZoneType = 'standard' | 'compressed' | 'tight';
 

core/components/molecules/dropzone/DropzoneIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Dropzone.module.css';
+import styles from './dropzone.module.css';
 
 type SVGIconProps = {
   /**

core/components/molecules/editableChipInput/EditableChipInput.tsx

@@ -4,7 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { ChipInput, Button, Chip, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { ChipInputProps } from '@/index.type';
-import styles from './EditableChipInput.module.css';
+import styles from './editableChipInput.module.css';
 
 export interface EditableChipInputProps extends BaseProps {
   /**

core/components/molecules/editableDropdown/EditableDropdown.tsx

@@ -4,7 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { Dropdown } from '@/index';
 import { DropdownProps } from '@/index.type';
 import { BaseProps, extractBaseProps, MakeOptional } from '@/utils/types';
-import styles from './EditableDropdown.module.css';
+import styles from './editableDropdown.module.css';
 
 type DropdownOptions = MakeOptional<DropdownProps, keyof typeof Dropdown['defaultProps']>;
 

core/components/molecules/editableInput/EditableInput.tsx

@@ -4,7 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { Input, Button, Popover, InlineMessage } from '@/index';
 import { InputProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import styles from './EditableInput.module.css';
+import styles from './editableInput.module.css';
 
 export interface EditableInputProps extends BaseProps {
   /**