diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 52608fe..e015d55 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -4,7 +4,7 @@ import {
   badgeWrapper,
   badgeThemeClass,
   badgeThemeVars
-} from "./badge.css";
+} from "./badge.styles.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { IBadgesProps } from "./badge.types";
 
diff --git a/packages/react/src/components/Badge/badge.css.ts b/packages/react/src/components/Badge/badge.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Badge/badge.css.ts
rename to packages/react/src/components/Badge/badge.styles.css.ts
diff --git a/packages/react/src/components/Badge/badge.types.ts b/packages/react/src/components/Badge/badge.types.ts
index 51e26d5..fd50d9d 100644
--- a/packages/react/src/components/Badge/badge.types.ts
+++ b/packages/react/src/components/Badge/badge.types.ts
@@ -1,5 +1,5 @@
 import { RecipeVariants } from "@vanilla-extract/recipes";
-import { badges } from "./badge.css";
+import { badges } from "./badge.styles.css";
 import { ReactNode } from "react";
 
 export type IBadgesProps = JSX.IntrinsicElements["span"] &
diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/Badge/index.ts
index 684d9b2..e2d8af5 100644
--- a/packages/react/src/components/Badge/index.ts
+++ b/packages/react/src/components/Badge/index.ts
@@ -1,3 +1,3 @@
 export * from "./Badge";
-export * from "./badge.css";
+export * from "./badge.styles.css";
 export * from "./badge.types";
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
index fe37b5a..ddfe1c0 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -4,7 +4,7 @@ import {
   breadcrumbWrapper,
   crumbSeparator,
   crumbTitle
-} from "./breadcrumb.css";
+} from "./breadcrumb.styles.css";
 
 const Breadcrumb: React.ForwardRefRenderFunction<
   HTMLDivElement,
diff --git a/packages/react/src/components/Breadcrumb/breadcrumb.css.ts b/packages/react/src/components/Breadcrumb/breadcrumb.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Breadcrumb/breadcrumb.css.ts
rename to packages/react/src/components/Breadcrumb/breadcrumb.styles.css.ts
diff --git a/packages/react/src/components/Breadcrumb/index.ts b/packages/react/src/components/Breadcrumb/index.ts
index b605234..ca86672 100644
--- a/packages/react/src/components/Breadcrumb/index.ts
+++ b/packages/react/src/components/Breadcrumb/index.ts
@@ -1,3 +1,3 @@
 export * from "./Breadcrumb";
-export * from "./breadcrumb.css";
+export * from "./breadcrumb.styles.css";
 export * from "./breadcrumb.types";
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index f6d5669..2481d5e 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -7,7 +7,7 @@ import {
   dividerVertical,
   labelHorizontal,
   labelVertical
-} from "./divider.css";
+} from "./divider.styles.css";
 import { DividerProps } from "./divider.types";
 
 export const Divider = ({
diff --git a/packages/react/src/components/Divider/divider.css.ts b/packages/react/src/components/Divider/divider.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Divider/divider.css.ts
rename to packages/react/src/components/Divider/divider.styles.css.ts
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index 31a9729..6601a43 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -1,7 +1,7 @@
 import React, { ForwardRefRenderFunction } from "react";
 
 import { IListProps } from "./list.types";
-import { listStyles, listThemeVars, listThemeClass } from "./list.css";
+import { listStyles, listThemeVars, listThemeClass } from "./list.styles.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 
 const ListComponent: ForwardRefRenderFunction<HTMLUListElement, IListProps> = (
diff --git a/packages/react/src/components/List/index.ts b/packages/react/src/components/List/index.ts
index 8e9cada..390884e 100644
--- a/packages/react/src/components/List/index.ts
+++ b/packages/react/src/components/List/index.ts
@@ -1,4 +1,4 @@
 export * from "./List";
-export * from "./list.css";
+export * from "./list.styles.css";
 export * from "./list.types";
 export * from "./ListItem";
diff --git a/packages/react/src/components/List/list.css.ts b/packages/react/src/components/List/list.styles.css.ts
similarity index 100%
rename from packages/react/src/components/List/list.css.ts
rename to packages/react/src/components/List/list.styles.css.ts
diff --git a/packages/react/src/components/List/list.types.ts b/packages/react/src/components/List/list.types.ts
index c2440a1..566e958 100644
--- a/packages/react/src/components/List/list.types.ts
+++ b/packages/react/src/components/List/list.types.ts
@@ -1,5 +1,5 @@
 import { RecipeVariants } from "@vanilla-extract/recipes";
-import { listStyles } from "./list.css";
+import { listStyles } from "./list.styles.css";
 
 export type IListProps = JSX.IntrinsicElements["ul"] &
   RecipeVariants<typeof listStyles> & {
diff --git a/packages/react/src/components/NativeSelect/NativeSelect.tsx b/packages/react/src/components/NativeSelect/NativeSelect.tsx
index e4744d4..d6abf58 100644
--- a/packages/react/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/react/src/components/NativeSelect/NativeSelect.tsx
@@ -8,7 +8,7 @@ import {
   nativeSelectIconStyle,
   nativeSelectRecipe,
   nativeSelectVars
-} from "./nativeSelect.css";
+} from "./nativeSelect.styles.css";
 import { NativeSelectPropsType } from "./nativeSelect.types";
 
 export const NativeSelect: FC<NativeSelectPropsType> = ({
diff --git a/packages/react/src/components/NativeSelect/index.ts b/packages/react/src/components/NativeSelect/index.ts
index 277be85..839cd39 100644
--- a/packages/react/src/components/NativeSelect/index.ts
+++ b/packages/react/src/components/NativeSelect/index.ts
@@ -1,3 +1,3 @@
 export * from "./NativeSelect";
-export * from "./nativeSelect.css";
+export * from "./nativeSelect.styles.css";
 export * from "./nativeSelect.types";
diff --git a/packages/react/src/components/NativeSelect/nativeSelect.css.ts b/packages/react/src/components/NativeSelect/nativeSelect.styles.css.ts
similarity index 100%
rename from packages/react/src/components/NativeSelect/nativeSelect.css.ts
rename to packages/react/src/components/NativeSelect/nativeSelect.styles.css.ts
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index f88f2cf..ef33d16 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { portalStyles } from "./portal.style.css";
+import { portalStyles } from "./portal.styles.css";
 import { PortalType } from "./portal.types";
 
 const Portal = ({
diff --git a/packages/react/src/components/Portal/index.ts b/packages/react/src/components/Portal/index.ts
index 0d3022e..ac069a8 100644
--- a/packages/react/src/components/Portal/index.ts
+++ b/packages/react/src/components/Portal/index.ts
@@ -1,3 +1,3 @@
 export * from "./Portal";
 export * from "./portal.types";
-export * from "./portal.style.css";
+export * from "./portal.styles.css";
diff --git a/packages/react/src/components/Portal/portal.style.css.ts b/packages/react/src/components/Portal/portal.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Portal/portal.style.css.ts
rename to packages/react/src/components/Portal/portal.styles.css.ts
diff --git a/packages/react/src/components/Select/Pill/Pill.tsx b/packages/react/src/components/Select/Pill/Pill.tsx
index 5d1e67d..e870c1b 100644
--- a/packages/react/src/components/Select/Pill/Pill.tsx
+++ b/packages/react/src/components/Select/Pill/Pill.tsx
@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import { pillIconStyles, pillStyles } from "./pill.css";
+import { pillIconStyles, pillStyles } from "./pill.styles.css";
 import { Flex } from "../../Flex";
 import { Clear } from "../../_internal/Icons/Clear";
 
diff --git a/packages/react/src/components/Select/Pill/pill.css.ts b/packages/react/src/components/Select/Pill/pill.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Select/Pill/pill.css.ts
rename to packages/react/src/components/Select/Pill/pill.styles.css.ts
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index eafde2b..6fdbfac 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -26,7 +26,7 @@ import {
   inputRecipe,
   loadingContentContainer,
   labelStyles
-} from "./select.css";
+} from "./select.styles.css";
 import { SelectPropsType, OptionsType } from "./select.types";
 import "./select.global.styles.css";
 import { Portal } from "../Portal";
diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts
index 2cef16f..7cdb0dd 100644
--- a/packages/react/src/components/Select/index.ts
+++ b/packages/react/src/components/Select/index.ts
@@ -1,5 +1,5 @@
 export * from "./Select";
-export * from "./select.css";
+export * from "./select.styles.css";
 export * from "./select.types";
 export * from "./Pill/Pill";
-export * from "./Pill/pill.css";
+export * from "./Pill/pill.styles.css";
diff --git a/packages/react/src/components/Select/select.css.ts b/packages/react/src/components/Select/select.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Select/select.css.ts
rename to packages/react/src/components/Select/select.styles.css.ts
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
index b1214bc..a4d2972 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/Switch/Switch.tsx
@@ -1,6 +1,6 @@
-import { slider, switchInputStyle, switchLayout } from "./switch.css";
+import { slider, switchInputStyle, switchLayout } from "./switch.styles.css";
 import { ISwitchProps } from "./switch.types";
-import "./switch-global-styles.css";
+import "./switch.global.styles.css";
 
 type SwitchProps = ISwitchProps & JSX.IntrinsicElements["input"];
 
diff --git a/packages/react/src/components/Switch/index.ts b/packages/react/src/components/Switch/index.ts
index e46d3bb..1613371 100644
--- a/packages/react/src/components/Switch/index.ts
+++ b/packages/react/src/components/Switch/index.ts
@@ -1,3 +1,3 @@
 export * from "./Switch";
-export * from "./switch.css";
+export * from "./switch.styles.css";
 export * from "./switch.types";
diff --git a/packages/react/src/components/Switch/switch-global-styles.css.ts b/packages/react/src/components/Switch/switch.global.styles.css.ts
similarity index 88%
rename from packages/react/src/components/Switch/switch-global-styles.css.ts
rename to packages/react/src/components/Switch/switch.global.styles.css.ts
index 95c4e8a..33e390c 100644
--- a/packages/react/src/components/Switch/switch-global-styles.css.ts
+++ b/packages/react/src/components/Switch/switch.global.styles.css.ts
@@ -1,5 +1,5 @@
 import { globalStyle } from "@vanilla-extract/css";
-import { switchInputStyle, slider } from "../../components/Switch";
+import { switchInputStyle, slider } from ".";
 
 globalStyle(`${switchInputStyle}:checked + ${slider}`, {
   background: "#1AB5EB",
diff --git a/packages/react/src/components/Switch/switch.css.ts b/packages/react/src/components/Switch/switch.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Switch/switch.css.ts
rename to packages/react/src/components/Switch/switch.styles.css.ts
diff --git a/packages/react/src/components/Tab/Tabs.tsx b/packages/react/src/components/Tab/Tabs.tsx
index f0e2830..9cfbc44 100644
--- a/packages/react/src/components/Tab/Tabs.tsx
+++ b/packages/react/src/components/Tab/Tabs.tsx
@@ -19,7 +19,7 @@ import {
   tabsHeaderContainerRecipe,
   tabsRecipe,
   tabsVars
-} from "./tabs.css";
+} from "./tabs.styles.css";
 import { TabsObjectProps, TabsProps } from "./tabs.types";
 
 const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabsProps> = (
diff --git a/packages/react/src/components/Tab/index.tsx b/packages/react/src/components/Tab/index.tsx
index 8265612..d5e6b22 100644
--- a/packages/react/src/components/Tab/index.tsx
+++ b/packages/react/src/components/Tab/index.tsx
@@ -1,3 +1,3 @@
 export * from "./Tabs";
-export * from "./tabs.css";
+export * from "./tabs.styles.css";
 export * from "./tabs.types";
diff --git a/packages/react/src/components/Tab/tabs.css.ts b/packages/react/src/components/Tab/tabs.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Tab/tabs.css.ts
rename to packages/react/src/components/Tab/tabs.styles.css.ts
diff --git a/packages/react/src/components/Table/Table.css.ts b/packages/react/src/components/Table/Table.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Table/Table.css.ts
rename to packages/react/src/components/Table/Table.styles.css.ts
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 64f3c77..2d41dfa 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -7,8 +7,7 @@ import {
   tableThemeVars,
   tableContainerThemeClass,
   tableThemeClass
-} from "./Table.css";
-import "./Table.global.styles.css";
+} from "./Table.styles.css";
 import { InitialTableProps } from "./Table.types";
 
 const Table: ForwardRefRenderFunction<HTMLTableElement, InitialTableProps> = (
diff --git a/packages/react/src/components/Table/Tfoot/Tfoot.css.ts b/packages/react/src/components/Table/Tfoot/Tfoot.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Table/Tfoot/Tfoot.css.ts
rename to packages/react/src/components/Table/Tfoot/Tfoot.styles.css.ts
diff --git a/packages/react/src/components/Table/Tfoot/Tfoot.tsx b/packages/react/src/components/Table/Tfoot/Tfoot.tsx
index 39dcfdf..83a124d 100644
--- a/packages/react/src/components/Table/Tfoot/Tfoot.tsx
+++ b/packages/react/src/components/Table/Tfoot/Tfoot.tsx
@@ -1,6 +1,10 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { ForwardRefRenderFunction } from "react";
-import { footerDefaults, tfootThemeClass, tfootThemeVars } from "./Tfoot.css";
+import {
+  footerDefaults,
+  tfootThemeClass,
+  tfootThemeVars
+} from "./Tfoot.styles.css";
 import { TfootProps } from "./Tfoot.types";
 import "./Tfoot.global.styles.css";
 
diff --git a/packages/react/src/components/Table/Tfoot/index.ts b/packages/react/src/components/Table/Tfoot/index.ts
index 12b113d..364e400 100644
--- a/packages/react/src/components/Table/Tfoot/index.ts
+++ b/packages/react/src/components/Table/Tfoot/index.ts
@@ -1,3 +1,3 @@
 export * from "./Tfoot";
-export * from "./Tfoot.css";
+export * from "./Tfoot.styles.css";
 export * from "./Tfoot.types";
diff --git a/packages/react/src/components/Table/Thead/Thead.css.ts b/packages/react/src/components/Table/Thead/Thead.styles.css.ts
similarity index 100%
rename from packages/react/src/components/Table/Thead/Thead.css.ts
rename to packages/react/src/components/Table/Thead/Thead.styles.css.ts
diff --git a/packages/react/src/components/Table/Thead/Thead.tsx b/packages/react/src/components/Table/Thead/Thead.tsx
index 96ab939..eb0397d 100644
--- a/packages/react/src/components/Table/Thead/Thead.tsx
+++ b/packages/react/src/components/Table/Thead/Thead.tsx
@@ -1,8 +1,11 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { ForwardRefRenderFunction } from "react";
-import { headerDefaults, theadThemeClass, theadThemeVars } from "./Thead.css";
+import {
+  headerDefaults,
+  theadThemeClass,
+  theadThemeVars
+} from "./Thead.styles.css";
 import { TheadProps } from "./Thead.types";
-import "./Thead.global.styles.css";
 
 const Thead: ForwardRefRenderFunction<HTMLTableSectionElement, TheadProps> = (
   { children, backgroundColor = "#ddd", className, style, ...nativeProps },
diff --git a/packages/react/src/components/Table/Thead/index.ts b/packages/react/src/components/Table/Thead/index.ts
index d802684..450eb05 100644
--- a/packages/react/src/components/Table/Thead/index.ts
+++ b/packages/react/src/components/Table/Thead/index.ts
@@ -1,3 +1,3 @@
 export * from "./Thead";
-export * from "./Thead.css";
+export * from "./Thead.styles.css";
 export * from "./Thead.types";
diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts
index 9976767..ef74952 100644
--- a/packages/react/src/components/Table/index.ts
+++ b/packages/react/src/components/Table/index.ts
@@ -1,5 +1,5 @@
 export * from "./Table";
-export * from "./Table.css";
+export * from "./Table.styles.css";
 export * from "./Table.types";
 export * from "./TableCaption";
 export * from "./Tbody";
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 3266ab3..8dacc8d 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -5,7 +5,7 @@ import {
   textAreaResize,
   textAreaColorClass,
   textAreaColorVars
-} from "./text-area.css";
+} from "./text-area.styles.css";
 import { TextAreaProps } from "./text-area.types";
 
 const TextAreaComponent: ForwardRefRenderFunction<
diff --git a/packages/react/src/components/TextArea/index.ts b/packages/react/src/components/TextArea/index.ts
index 006751d..076d582 100644
--- a/packages/react/src/components/TextArea/index.ts
+++ b/packages/react/src/components/TextArea/index.ts
@@ -1,3 +1,3 @@
 export * from "./TextArea";
-export * from "./text-area.css";
+export * from "./text-area.styles.css";
 export * from "./text-area.types";
diff --git a/packages/react/src/components/TextArea/text-area.css.ts b/packages/react/src/components/TextArea/text-area.styles.css.ts
similarity index 100%
rename from packages/react/src/components/TextArea/text-area.css.ts
rename to packages/react/src/components/TextArea/text-area.styles.css.ts
diff --git a/packages/react/src/components/UnstyledButton/UnstyledButton.css.ts b/packages/react/src/components/UnstyledButton/UnstyledButton.styles.css.ts
similarity index 100%
rename from packages/react/src/components/UnstyledButton/UnstyledButton.css.ts
rename to packages/react/src/components/UnstyledButton/UnstyledButton.styles.css.ts
diff --git a/packages/react/src/components/UnstyledButton/UnstyledButton.tsx b/packages/react/src/components/UnstyledButton/UnstyledButton.tsx
index 4339ba1..e00bd8a 100644
--- a/packages/react/src/components/UnstyledButton/UnstyledButton.tsx
+++ b/packages/react/src/components/UnstyledButton/UnstyledButton.tsx
@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction } from "react";
-import { unstyledButtonClass } from "./UnstyledButton.css";
+import { unstyledButtonClass } from "./UnstyledButton.styles.css";
 import { TUnstyledButtonProps } from "./UnstyledButton.types";
 
 const UnstyledButtonComponent: ForwardRefRenderFunction<
diff --git a/packages/react/src/components/UnstyledButton/index.ts b/packages/react/src/components/UnstyledButton/index.ts
index 3a80931..5fa584d 100644
--- a/packages/react/src/components/UnstyledButton/index.ts
+++ b/packages/react/src/components/UnstyledButton/index.ts
@@ -1,3 +1,3 @@
 export * from "./UnstyledButton";
-export * from "./UnstyledButton.css";
+export * from "./UnstyledButton.styles.css";
 export * from "./UnstyledButton.types";
diff --git a/packages/react/src/components/reset/index.ts b/packages/react/src/components/reset/index.ts
index 5b98dea..c2959c0 100644
--- a/packages/react/src/components/reset/index.ts
+++ b/packages/react/src/components/reset/index.ts
@@ -1 +1 @@
-export * from "./reset.css";
+export * from "./reset.styles.css";
diff --git a/packages/react/src/components/reset/reset.css.ts b/packages/react/src/components/reset/reset.styles.css.ts
similarity index 100%
rename from packages/react/src/components/reset/reset.css.ts
rename to packages/react/src/components/reset/reset.styles.css.ts