From 7db51ff032a6057c4f4e0c725d3d35c2b1219f64 Mon Sep 17 00:00:00 2001
From: Dima Belyaev <dima.belyaev@shopify.com>
Date: Sun, 18 Jan 2026 18:37:30 +0000
Subject: [PATCH 1/2] test: shared storybook setup

---
 .storybook/main.ts                            | 11 ++-
 .storybook/plugins/iframe.mjs                 |  2 +-
 .storybook/plugins/preset.mjs                 |  2 +-
 .../src/hooks/tests/useHandlerRef.stories.tsx | 14 ++--
 .../src/hooks/tests/useHotkeys.stories.tsx    | 69 +++++++++----------
 .../useKeyboardArrowNavigation.stories.tsx    | 56 ++++++++-------
 .../hooks/tests/useKeyboardMode.stories.tsx   | 18 +++--
 .../hooks/tests/useOnClickOutside.stories.tsx | 32 ++++-----
 .../src/hooks/tests/useRTL.stories.tsx        |  5 +-
 .../src/hooks/tests/useScrollLock.stories.tsx | 51 ++++++--------
 .../src/hooks/tests/useToggle.stories.tsx     | 21 +++---
 11 files changed, 124 insertions(+), 157 deletions(-)
 rename packages/{reshaped => headless}/src/hooks/tests/useHandlerRef.stories.tsx (78%)
 rename packages/{reshaped => headless}/src/hooks/tests/useHotkeys.stories.tsx (83%)
 rename packages/{reshaped => headless}/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx (73%)
 rename packages/{reshaped => headless}/src/hooks/tests/useKeyboardMode.stories.tsx (75%)
 rename packages/{reshaped => headless}/src/hooks/tests/useOnClickOutside.stories.tsx (81%)
 rename packages/{reshaped => headless}/src/hooks/tests/useRTL.stories.tsx (88%)
 rename packages/{reshaped => headless}/src/hooks/tests/useScrollLock.stories.tsx (66%)
 rename packages/{reshaped => headless}/src/hooks/tests/useToggle.stories.tsx (77%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 55b0f3c3..eac76a88 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -26,13 +26,10 @@ const config: StorybookConfig = {
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
 	},
-	// core: {
-	// 	builder: {
-	// 		name: "@storybook/builder-vite",
-	// 		options: { fsCache: false },
-	// 	},
-	// },
-	stories: ["../packages/reshaped/src/**/*.stories.tsx"],
+	stories: [
+		"../packages/reshaped/src/**/*.stories.tsx",
+		"../packages/headless/src/**/*.stories.tsx",
+	],
 	staticDirs: ["./public"],
 	addons: [
 		"@storybook/addon-vitest",
diff --git a/.storybook/plugins/iframe.mjs b/.storybook/plugins/iframe.mjs
index 4fb85ef0..e3d852d6 100644
--- a/.storybook/plugins/iframe.mjs
+++ b/.storybook/plugins/iframe.mjs
@@ -1,6 +1,6 @@
 import React from "react";
-import { addons, types } from "storybook/manager-api";
 import { AddonPanel } from "storybook/internal/components";
+import { addons, types } from "storybook/manager-api";
 
 const ADDON_ID = "reshaped-iframe";
 const PANEL_ID = `${ADDON_ID}/panel`;
diff --git a/.storybook/plugins/preset.mjs b/.storybook/plugins/preset.mjs
index 1aa3a682..08edcba6 100644
--- a/.storybook/plugins/preset.mjs
+++ b/.storybook/plugins/preset.mjs
@@ -1,5 +1,5 @@
-import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
diff --git a/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx b/packages/headless/src/hooks/tests/useHandlerRef.stories.tsx
similarity index 78%
rename from packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx
rename to packages/headless/src/hooks/tests/useHandlerRef.stories.tsx
index 8d51ae71..24d353a7 100644
--- a/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx
+++ b/packages/headless/src/hooks/tests/useHandlerRef.stories.tsx
@@ -1,13 +1,11 @@
-import { useHandlerRef } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, Mock, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useHandlerRef from "../useHandlerRef";
 
 export default {
-	title: "Hooks/useHandlerRef",
+	title: "Headless/Hooks/useHandlerRef",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -38,16 +36,16 @@ export const base: StoryObj<{ handleEffect: Mock }> = {
 		};
 
 		return (
-			<View gap={4}>
-				<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>
+			<div style={{ display: "flex", gap: "4px" }}>
+				<button onClick={() => setCount((prev) => prev + 1)}>Increase count</button>
 				<Component onEffect={handleEffect} count={count} />
-			</View>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
 		const button = canvas.getAllByRole("button")[0];
 
-		// mount, triggerred twice in dev mode
+		// mount, triggered twice in dev mode
 		expect(args.handleEffect).toHaveBeenCalledTimes(2);
 
 		await userEvent.click(button);
diff --git a/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx b/packages/headless/src/hooks/tests/useHotkeys.stories.tsx
similarity index 83%
rename from packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx
rename to packages/headless/src/hooks/tests/useHotkeys.stories.tsx
index a24d80c9..6ad38acc 100644
--- a/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx
+++ b/packages/headless/src/hooks/tests/useHotkeys.stories.tsx
@@ -1,11 +1,10 @@
-import { useHotkeys } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import View from "components/View";
+import useHotkeys from "../useHotkeys";
 
 export default {
-	title: "Hooks/useHotkeys",
+	title: "Headless/Hooks/useHotkeys",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -38,48 +37,42 @@ export const base = {
 		const nActive = checkHotkeyState("n");
 
 		return (
-			<View
-				animated
-				gap={2}
-				direction="row"
-				backgroundColor={active ? "positive-faded" : undefined}
-				padding={2}
-				borderRadius="small"
+			<div
+				style={{
+					display: "flex",
+					gap: 8,
+					padding: 8,
+					background: active ? "violet" : "transparent",
+				}}
 			>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"}
-					shadow={shiftActive ? undefined : "raised"}
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: shiftActive ? "tomato" : "transparent",
+					}}
 				>
 					Shift
-				</View>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={bActive ? "neutral-faded" : "elevation-raised"}
-					shadow={bActive ? undefined : "raised"}
+				</div>
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: bActive ? "tomato" : "transparent",
+					}}
 				>
 					b
-				</View>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={nActive ? "neutral-faded" : "elevation-raised"}
-					shadow={nActive ? undefined : "raised"}
+				</div>
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: nActive ? "tomato" : "transparent",
+					}}
 				>
 					n
-				</View>
-			</View>
+				</div>
+			</div>
 		);
 	},
 };
diff --git a/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx b/packages/headless/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx
similarity index 73%
rename from packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx
rename to packages/headless/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx
index 085508b7..70d86864 100644
--- a/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx
+++ b/packages/headless/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx
@@ -1,13 +1,11 @@
-import { useKeyboardArrowNavigation } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { useRef } from "react";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation";
 
 export default {
-	title: "Hooks/useKeyboardArrowNavigation",
+	title: "Headless/Hooks/useKeyboardArrowNavigation",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -21,11 +19,11 @@ export const base: StoryObj = {
 		useKeyboardArrowNavigation({ ref });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -56,11 +54,11 @@ export const horizontal: StoryObj = {
 		useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -95,11 +93,11 @@ export const vertical: StoryObj = {
 		useKeyboardArrowNavigation({ ref, orientation: "vertical" });
 
 		return (
-			<View gap={2} direction="column" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "column" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -130,11 +128,11 @@ export const circular: StoryObj = {
 		useKeyboardArrowNavigation({ ref, circular: true });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -162,11 +160,11 @@ export const disabled: StoryObj = {
 		useKeyboardArrowNavigation({ ref, disabled: true });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
diff --git a/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx b/packages/headless/src/hooks/tests/useKeyboardMode.stories.tsx
similarity index 75%
rename from packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx
rename to packages/headless/src/hooks/tests/useKeyboardMode.stories.tsx
index e547b978..4b7dc707 100644
--- a/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx
+++ b/packages/headless/src/hooks/tests/useKeyboardMode.stories.tsx
@@ -1,12 +1,10 @@
-import { useKeyboardMode } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useKeyboardMode from "../useKeyboardMode";
 
 export default {
-	title: "Hooks/useKeyboardMode",
+	title: "Headless/Hooks/useKeyboardMode",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -16,12 +14,12 @@ const Component = () => {
 	const { activate, deactivate, disable, enable } = useKeyboardMode();
 
 	return (
-		<View direction="row" gap={2}>
-			<Button onClick={activate}>Activate</Button>
-			<Button onClick={deactivate}>Deactivate</Button>
-			<Button onClick={disable}>Disable</Button>
-			<Button onClick={enable}>Enable</Button>
-		</View>
+		<div style={{ display: "flex", gap: 8, flexDirection: "row" }}>
+			<button onClick={activate}>Activate</button>
+			<button onClick={deactivate}>Deactivate</button>
+			<button onClick={disable}>Disable</button>
+			<button onClick={enable}>Enable</button>
+		</div>
 	);
 };
 
diff --git a/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx b/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx
similarity index 81%
rename from packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx
rename to packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx
index 1c6f85c2..7a90fc9f 100644
--- a/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx
+++ b/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx
@@ -1,13 +1,11 @@
-import { useOnClickOutside } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, type Mock } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useOnClickOutside from "../useOnClickOutside";
 
 export default {
-	title: "Hooks/useOnClickOutside",
+	title: "Headless/Hooks/useOnClickOutside",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -28,12 +26,12 @@ export const base: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }} onClick={() => setTarget("inside")}>
+			<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
+				<button ref={ref} onClick={() => setTarget("inside")}>
 					Trigger
-				</Button>
+				</button>
 				{target && `Clicked ${target}`}
-			</View>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
@@ -64,10 +62,10 @@ export const refs: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-				<Button attributes={{ ref: ref2 }}>Trigger 2</Button>
-			</View>
+			<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
+				<button ref={ref}>Trigger</button>
+				<button ref={ref2}>Trigger 2</button>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
@@ -106,11 +104,7 @@ export const disabled: StoryObj<{ handleOutsideClick: Mock }> = {
 			}
 		);
 
-		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-			</View>
-		);
+		return <button ref={ref}>Trigger</button>;
 	},
 	play: async ({ args }) => {
 		await userEvent.click(document.body);
@@ -133,9 +127,9 @@ export const deps: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>
+			<button ref={ref} onClick={() => setCount((prev) => prev + 1)}>
 				Trigger
-			</Button>
+			</button>
 		);
 	},
 	play: async ({ canvas, args }) => {
diff --git a/packages/reshaped/src/hooks/tests/useRTL.stories.tsx b/packages/headless/src/hooks/tests/useRTL.stories.tsx
similarity index 88%
rename from packages/reshaped/src/hooks/tests/useRTL.stories.tsx
rename to packages/headless/src/hooks/tests/useRTL.stories.tsx
index b3f3566b..828e6cd5 100644
--- a/packages/reshaped/src/hooks/tests/useRTL.stories.tsx
+++ b/packages/headless/src/hooks/tests/useRTL.stories.tsx
@@ -1,10 +1,11 @@
-import { useRTL } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect } from "storybook/test";
 
+import useRTL from "../useRTL";
+
 export default {
-	title: "Hooks/useRTL",
+	title: "Headless/Hooks/useRTL",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
diff --git a/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx b/packages/headless/src/hooks/tests/useScrollLock.stories.tsx
similarity index 66%
rename from packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx
rename to packages/headless/src/hooks/tests/useScrollLock.stories.tsx
index 24395cb1..11b4467c 100644
--- a/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx
+++ b/packages/headless/src/hooks/tests/useScrollLock.stories.tsx
@@ -1,14 +1,11 @@
-import { useScrollLock } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import useScrollLock from "../useScrollLock";
 
 export default {
-	title: "Hooks/useScrollLock",
+	title: "Headless/Hooks/useScrollLock",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -21,7 +18,9 @@ export const base: StoryObj = {
 
 		return (
 			<React.Fragment>
-				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+				<button onClick={scrollLocked ? unlockScroll : lockScroll}>
+					{scrollLocked ? "Unlock" : "Lock"}
+				</button>
 				<div style={{ height: "150vh" }} />
 			</React.Fragment>
 		);
@@ -46,11 +45,11 @@ export const origin: StoryObj = {
 		const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });
 
 		return (
-			<View overflow="auto" height={25} attributes={{ ref: originRef, "data-testid": "root" }}>
-				<View height={50} padding={4} backgroundColor="neutral-faded" borderRadius="medium">
-					<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
-				</View>
-			</View>
+			<div style={{ overflow: "auto", height: 100 }} ref={originRef} data-testid="root">
+				<div style={{ height: 200, padding: 15, backgroundColor: "#1f1f1f", borderRadius: 8 }}>
+					<button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</button>
+				</div>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -75,9 +74,9 @@ export const container: StoryObj = {
 		const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });
 
 		return (
-			<View height={25} attributes={{ ref: containerRef, "data-testid": "root" }}>
-				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
-			</View>
+			<div style={{ overflow: "auto", height: 100 }} ref={containerRef} data-testid="root">
+				<button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -103,22 +102,14 @@ export const testContainerAsync: StoryObj = {
 		const scopedLock = useScrollLock({ containerRef });
 
 		return (
-			<Example>
-				<Example.Item title="calling regular lock and lock with a container only requires a single unlock to remove overflow">
-					<View attributes={{ ref: containerRef }} gap={4} direction="row">
-						<Button
-							onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}
-						>
-							Toggle
-						</Button>
-						<Button
-							onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}
-						>
-							Toggle
-						</Button>
-					</View>
-				</Example.Item>
-			</Example>
+			<div style={{ display: "flex", gap: 16, flexDirection: "row" }} ref={containerRef}>
+				<button onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}>
+					Toggle
+				</button>
+				<button onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}>
+					Toggle
+				</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
diff --git a/packages/reshaped/src/hooks/tests/useToggle.stories.tsx b/packages/headless/src/hooks/tests/useToggle.stories.tsx
similarity index 77%
rename from packages/reshaped/src/hooks/tests/useToggle.stories.tsx
rename to packages/headless/src/hooks/tests/useToggle.stories.tsx
index 769c7ca9..62dba1fc 100644
--- a/packages/reshaped/src/hooks/tests/useToggle.stories.tsx
+++ b/packages/headless/src/hooks/tests/useToggle.stories.tsx
@@ -1,12 +1,11 @@
-import { useToggle } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
+import useToggle from "../useToggle";
 
 export default {
-	title: "Hooks/useToggle",
+	title: "Headless/Hooks/useToggle",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -18,9 +17,9 @@ export const toggle: StoryObj = {
 		const { toggle, active } = useToggle();
 
 		return (
-			<Button onClick={() => toggle()} attributes={{ "data-active": active }}>
+			<button onClick={() => toggle()} data-active={active}>
 				{active ? "Deactivate" : "Activate"}
-			</Button>
+			</button>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -44,11 +43,9 @@ export const activate: StoryObj = {
 		const { activate, active } = useToggle();
 
 		return (
-			<React.Fragment>
-				<Button onClick={activate} attributes={{ "data-active": active }}>
-					Activate
-				</Button>
-			</React.Fragment>
+			<button onClick={activate} data-active={active}>
+				Activate
+			</button>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -68,9 +65,9 @@ export const deactivate: StoryObj = {
 		const { deactivate, active } = useToggle(true);
 
 		return (
-			<Button onClick={deactivate} attributes={{ "data-active": active }}>
+			<button onClick={deactivate} data-active={active}>
 				Deactivate
-			</Button>
+			</button>
 		);
 	},
 	play: async ({ canvas }) => {

From d29ac149500c74851f24809f59d711d1be6e51a1 Mon Sep 17 00:00:00 2001
From: Dima Belyaev <dima.belyaev@shopify.com>
Date: Sun, 18 Jan 2026 19:25:38 +0000
Subject: [PATCH 2/2] chore: import alias update

---
 .storybook/main.ts                            |  10 +-
 .../src/hooks/_internal/useSingletonRTL.tsx   |   2 +-
 packages/headless/src/hooks/useHandlerRef.ts  |   2 +-
 packages/headless/src/hooks/useHotkeys.ts     |   2 +-
 .../headless/src/hooks/useKeyboardMode.ts     |   2 +-
 packages/headless/src/hooks/useRTL.ts         |   2 +-
 packages/reshaped/src/Sandbox.stories.tsx     |  14 +-
 packages/reshaped/src/cli/theming/index.ts    |  10 +-
 .../src/cli/theming/reshaped.config.ts        |   8 +-
 packages/reshaped/src/cli/theming/tailwind.ts |   8 +-
 .../components/Accordion/Accordion.types.ts   |   4 +-
 .../components/Accordion/AccordionContent.tsx |   4 +-
 .../Accordion/AccordionControlled.tsx         |   2 +-
 .../components/Accordion/AccordionTrigger.tsx |   8 +-
 .../Accordion/tests/Accordion.stories.tsx     |   8 +-
 .../src/components/ActionBar/ActionBar.tsx    |   4 +-
 .../components/ActionBar/ActionBar.types.ts   |   4 +-
 .../ActionBar/tests/ActionBar.stories.tsx     |   8 +-
 .../src/components/Actionable/Actionable.tsx  |   2 +-
 .../components/Actionable/Actionable.types.ts |   2 +-
 .../src/components/Actionable/index.ts        |   2 +-
 .../Actionable/tests/Actionable.stories.tsx   |   6 +-
 .../reshaped/src/components/Alert/Alert.tsx   |   6 +-
 .../src/components/Alert/Alert.types.ts       |   4 +-
 .../components/Alert/tests/Alert.stories.tsx  |   8 +-
 .../components/Autocomplete/Autocomplete.tsx  |  12 +-
 .../Autocomplete/Autocomplete.types.ts        |   6 +-
 .../tests/Autocomplete.stories.tsx            |  10 +-
 .../reshaped/src/components/Avatar/Avatar.tsx |  10 +-
 .../src/components/Avatar/Avatar.types.ts     |   4 +-
 .../Avatar/tests/Avatar.stories.tsx           |   8 +-
 .../reshaped/src/components/Badge/Badge.tsx   |   8 +-
 .../src/components/Badge/Badge.types.ts       |   4 +-
 .../components/Badge/tests/Badge.stories.tsx  |  16 +-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |  12 +-
 .../Breadcrumbs/Breadcrumbs.types.ts          |   2 +-
 .../Breadcrumbs/BreadcrumbsItem.tsx           |   4 +-
 .../Breadcrumbs/tests/Breadcrumbs.stories.tsx |   8 +-
 .../reshaped/src/components/Button/Button.tsx |   8 +-
 .../src/components/Button/Button.types.ts     |   8 +-
 .../src/components/Button/ButtonAligner.tsx   |   2 +-
 .../Button/tests/Button.stories.tsx           |  14 +-
 .../Calendar/CalendarControlled.tsx           |   4 +-
 .../components/Calendar/CalendarControls.tsx  |  16 +-
 .../src/components/Calendar/CalendarDate.tsx  |   2 +-
 .../src/components/Calendar/CalendarYear.tsx  |   4 +-
 .../Calendar/tests/Calendar.stories.tsx       |   6 +-
 .../Calendar/useCalendarKeyboardNavigation.ts |   2 +-
 .../reshaped/src/components/Card/Card.tsx     |   4 +-
 .../src/components/Card/Card.types.ts         |   6 +-
 .../components/Card/tests/Card.stories.tsx    |   4 +-
 .../src/components/Carousel/Carousel.tsx      |   6 +-
 .../src/components/Carousel/Carousel.types.ts |   4 +-
 .../components/Carousel/CarouselControl.tsx   |   8 +-
 .../Carousel/tests/Carousel.stories.tsx       |   8 +-
 .../src/components/Checkbox/Checkbox.tsx      |  14 +-
 .../src/components/Checkbox/Checkbox.types.ts |   2 +-
 .../Checkbox/tests/Checkbox.stories.tsx       |   6 +-
 .../CheckboxGroup/CheckboxGroup.types.ts      |   4 +-
 .../tests/CheckboxGroup.stories.tsx           |   6 +-
 .../src/components/Container/Container.tsx    |   2 +-
 .../components/Container/Container.types.ts   |   4 +-
 .../Container/tests/Container.stories.tsx     |   4 +-
 .../components/ContextMenu/ContextMenu.tsx    |   2 +-
 .../ContextMenu/ContextMenu.types.ts          |   2 +-
 .../src/components/ContextMenu/index.ts       |   2 +-
 .../ContextMenu/tests/ContextMenu.stories.tsx |   8 +-
 .../components/Dismissible/Dismissible.tsx    |   4 +-
 .../Dismissible/tests/Dismissible.stories.tsx |   8 +-
 .../src/components/Divider/Divider.tsx        |   4 +-
 .../src/components/Divider/Divider.types.ts   |   2 +-
 .../Divider/tests/Divider.stories.tsx         |   6 +-
 .../components/DropdownMenu/DropdownMenu.tsx  |  12 +-
 .../DropdownMenu/DropdownMenu.types.ts        |   6 +-
 .../src/components/DropdownMenu/index.ts      |   2 +-
 .../tests/DropdownMenu.stories.tsx            |  16 +-
 .../src/components/FileUpload/FileUpload.tsx  |   4 +-
 .../components/FileUpload/FileUpload.types.ts |   4 +-
 .../FileUpload/tests/FileUpload.stories.tsx   |  16 +-
 .../src/components/Flyout/FlyoutContent.tsx   |   2 +-
 .../components/Flyout/FlyoutControlled.tsx    |   8 +-
 .../Flyout/tests/Flyout.stories.tsx           |  22 +-
 .../components/FormControl/FormControl.tsx    |   2 +-
 .../FormControl/FormControlCaption.tsx        |   2 +-
 .../FormControl/FormControlLabel.tsx          |   2 +-
 .../FormControl/tests/FormControl.stories.tsx |  12 +-
 .../reshaped/src/components/Grid/Grid.tsx     |   4 +-
 .../src/components/Grid/Grid.types.ts         |   4 +-
 .../components/Grid/tests/Grid.stories.tsx    |   6 +-
 .../reshaped/src/components/Hidden/Hidden.tsx |   2 +-
 .../src/components/Hidden/Hidden.types.ts     |   2 +-
 .../Hidden/tests/Hidden.stories.tsx           |   4 +-
 .../components/HiddenInput/HiddenInput.tsx    |   6 +-
 .../HiddenInput/HiddenInput.types.ts          |   2 +-
 .../HiddenInput/tests/HiddenInput.stories.tsx |  14 +-
 .../tests/HiddenVisually.stories.tsx          |   4 +-
 .../reshaped/src/components/Hotkey/Hotkey.tsx |   2 +-
 .../Hotkey/tests/Hotkey.stories.tsx           |   6 +-
 .../reshaped/src/components/Icon/Icon.tsx     |   2 +-
 .../src/components/Icon/Icon.types.ts         |   2 +-
 .../components/Icon/tests/Icon.stories.tsx    |  12 +-
 .../reshaped/src/components/Image/Image.tsx   |   2 +-
 .../src/components/Image/Image.types.ts       |   4 +-
 .../components/Image/tests/Image.stories.tsx  |   8 +-
 .../reshaped/src/components/Link/Link.tsx     |   4 +-
 .../src/components/Link/Link.types.ts         |   4 +-
 .../components/Link/tests/Link.stories.tsx    |   8 +-
 .../reshaped/src/components/Loader/Loader.tsx |   2 +-
 .../src/components/Loader/Loader.types.ts     |   2 +-
 .../Loader/tests/Loader.stories.tsx           |   4 +-
 .../src/components/MenuItem/MenuItem.tsx      |   8 +-
 .../src/components/MenuItem/MenuItem.types.ts |   6 +-
 .../components/MenuItem/MenuItemAligner.tsx   |   2 +-
 .../MenuItem/tests/MenuItem.stories.tsx       |  12 +-
 .../reshaped/src/components/Modal/Modal.tsx   |  12 +-
 .../src/components/Modal/Modal.types.ts       |   4 +-
 .../components/Modal/tests/Modal.stories.tsx  |  20 +-
 .../NumberField/NumberField.types.ts          |   4 +-
 .../NumberField/NumberFieldControlled.tsx     |  22 +-
 .../NumberField/tests/NumberField.stories.tsx |   6 +-
 .../src/components/Overlay/Overlay.tsx        |   6 +-
 .../Overlay/tests/Overlay.stories.tsx         |   8 +-
 .../Pagination/PaginationControlled.tsx       |  10 +-
 .../Pagination/tests/Pagination.stories.tsx   |   4 +-
 .../src/components/PinField/PinField.types.ts |   2 +-
 .../PinField/PinFieldControlled.tsx           |  12 +-
 .../PinField/tests/PinField.stories.tsx       |   6 +-
 .../src/components/Popover/Popover.tsx        |   6 +-
 .../src/components/Popover/Popover.types.ts   |   2 +-
 .../reshaped/src/components/Popover/index.ts  |   2 +-
 .../Popover/tests/Popover.stories.tsx         |  16 +-
 .../Progress/tests/Progress.stories.tsx       |   8 +-
 .../tests/ProgressIndicator.stories.tsx       |  12 +-
 .../reshaped/src/components/Radio/Radio.tsx   |  10 +-
 .../src/components/Radio/Radio.types.ts       |   2 +-
 .../components/Radio/tests/Radio.stories.tsx  |   6 +-
 .../components/RadioGroup/RadioGroup.types.ts |   4 +-
 .../RadioGroup/RadioGroupControlled.tsx       |   2 +-
 .../RadioGroup/tests/RadioGroup.stories.tsx   |   4 +-
 .../src/components/Reshaped/Reshaped.tsx      |   8 +-
 .../src/components/Reshaped/Reshaped.types.ts |   6 +-
 .../Reshaped/tests/Reshaped.stories.tsx       |   6 +-
 .../src/components/Resizable/Resizable.tsx    |   2 +-
 .../components/Resizable/Resizable.types.ts   |   4 +-
 .../components/Resizable/ResizableHandle.tsx  |   4 +-
 .../Resizable/tests/Resizable.stories.tsx     |   8 +-
 .../reshaped/src/components/Scrim/Scrim.tsx   |   2 +-
 .../src/components/Scrim/Scrim.types.ts       |   2 +-
 .../components/Scrim/tests/Scrim.stories.tsx  |   8 +-
 .../src/components/ScrollArea/ScrollArea.tsx  |   2 +-
 .../components/ScrollArea/ScrollArea.types.ts |   2 +-
 .../ScrollArea/tests/ScrollArea.stories.tsx   |   8 +-
 .../src/components/Select/Select.types.ts     |  10 +-
 .../Select/SelectCustomControlled.tsx         |  10 +-
 .../components/Select/SelectEndContent.tsx    |   6 +-
 .../src/components/Select/SelectGroup.tsx     |   4 +-
 .../src/components/Select/SelectOption.tsx    |   2 +-
 .../src/components/Select/SelectRoot.tsx      |   6 +-
 .../components/Select/SelectStartContent.tsx  |   4 +-
 .../src/components/Select/SelectTrigger.tsx   |   4 +-
 .../Select/tests/Select.stories.tsx           |  16 +-
 .../src/components/Skeleton/Skeleton.tsx      |   2 +-
 .../src/components/Skeleton/Skeleton.types.ts |   2 +-
 .../Skeleton/tests/Skeleton.stories.tsx       |   4 +-
 .../components/Slider/SliderControlled.tsx    |   4 +-
 .../src/components/Slider/SliderThumb.tsx     |   4 +-
 .../Slider/tests/Slider.stories.tsx           |   8 +-
 .../src/components/Stepper/Stepper.tsx        |  16 +-
 .../src/components/Stepper/Stepper.types.ts   |   2 +-
 .../Stepper/tests/Stepper.stories.tsx         |   8 +-
 .../reshaped/src/components/Switch/Switch.tsx |   8 +-
 .../src/components/Switch/Switch.types.ts     |   2 +-
 .../Switch/tests/Switch.stories.tsx           |   6 +-
 .../reshaped/src/components/Table/Table.tsx   |   6 +-
 .../components/Table/tests/Table.stories.tsx  |  10 +-
 .../src/components/Tabs/Tabs.types.ts         |   2 +-
 .../src/components/Tabs/TabsControlled.tsx    |   2 +-
 .../reshaped/src/components/Tabs/TabsItem.tsx |   8 +-
 .../reshaped/src/components/Tabs/TabsList.tsx |  10 +-
 .../components/Tabs/tests/Tabs.stories.tsx    |  14 +-
 .../reshaped/src/components/Text/Text.tsx     |   4 +-
 .../src/components/Text/Text.types.ts         |   2 +-
 .../components/Text/tests/Text.stories.tsx    |   4 +-
 .../src/components/TextArea/TextArea.tsx      |   6 +-
 .../src/components/TextArea/TextArea.types.ts |   4 +-
 .../reshaped/src/components/TextArea/index.ts |   2 +-
 .../TextArea/tests/TextArea.stories.tsx       |  12 +-
 .../src/components/TextField/TextField.tsx    |   8 +-
 .../components/TextField/TextField.types.ts   |   6 +-
 .../src/components/TextField/index.ts         |   2 +-
 .../TextField/tests/TextField.stories.tsx     |  20 +-
 .../src/components/Theme/GlobalColorMode.tsx  |   4 +-
 .../reshaped/src/components/Theme/Theme.tsx   |   2 -
 .../src/components/Theme/Theme.types.ts       |   2 +-
 .../components/Theme/tests/Theme.stories.tsx  |  14 +-
 .../src/components/Timeline/Timeline.tsx      |   2 +-
 .../Timeline/tests/Timeline.stories.tsx       |   4 +-
 .../reshaped/src/components/Toast/Toast.tsx   |  10 +-
 .../src/components/Toast/Toast.types.ts       |   2 +-
 .../src/components/Toast/ToastContainer.tsx   |   2 +-
 .../components/Toast/tests/Toast.stories.tsx  |  16 +-
 .../ToggleButton/ToggleButton.types.ts        |   2 +-
 .../ToggleButton/ToggleButtonControlled.tsx   |   4 +-
 .../tests/ToggleButton.stories.tsx            |   2 +-
 .../ToggleButtonGroup.types.ts                |   4 +-
 .../ToggleButtonGroupControlled.tsx           |   2 +-
 .../tests/ToggleButtonGroup.stories.tsx       |  12 +-
 .../src/components/Tooltip/Tooltip.tsx        |   6 +-
 .../src/components/Tooltip/Tooltip.types.ts   |   2 +-
 .../Tooltip/tests/Tooltip.stories.tsx         |  12 +-
 .../reshaped/src/components/View/View.tsx     |  10 +-
 .../src/components/View/View.types.ts         |   4 +-
 .../components/View/tests/View.stories.tsx    |  18 +-
 .../_private/Expandable/Expandable.tsx        |   2 +-
 .../src/components/_private/Portal/Portal.tsx |   2 +-
 .../_private/Portal/tests/Portal.stories.tsx  |   2 +-
 packages/reshaped/src/config/tailwind.ts      |  12 +-
 .../src/core/Actionable/Actionable.tsx        |   2 +-
 .../reshaped/src/hooks/_private/useDrag.ts    |   2 +-
 .../src/hooks/_private/useIsDismissible.ts    |   2 +-
 .../hooks/_private/useSingletonViewport.tsx   |   4 +-
 .../src/hooks/tests/useDrag.stories.tsx       |   6 +-
 .../src/hooks/tests/useElementId.stories.tsx  |   2 +-
 .../useResponsiveClientValue.stories.tsx      |   4 +-
 .../src/hooks/useResponsiveClientValue.ts     |   4 +-
 packages/reshaped/src/hooks/useViewport.ts    |   2 +-
 packages/reshaped/src/index.ts                | 262 +++++++++---------
 packages/reshaped/src/styles/mixin.ts         |  34 +--
 .../src/styles/resolvers/align/index.ts       |   4 +-
 .../src/styles/resolvers/aspectRatio/index.ts |   4 +-
 .../src/styles/resolvers/bleed/index.ts       |   4 +-
 .../src/styles/resolvers/border/index.ts      |   4 +-
 .../src/styles/resolvers/height/index.ts      |   4 +-
 .../src/styles/resolvers/inset/index.ts       |   4 +-
 .../src/styles/resolvers/justify/index.ts     |   4 +-
 .../src/styles/resolvers/margin/index.ts      |   4 +-
 .../src/styles/resolvers/maxHeight/index.ts   |   4 +-
 .../src/styles/resolvers/maxWidth/index.ts    |   4 +-
 .../src/styles/resolvers/minHeight/index.ts   |   4 +-
 .../src/styles/resolvers/minWidth/index.ts    |   4 +-
 .../src/styles/resolvers/padding/index.ts     |   4 +-
 .../src/styles/resolvers/position/index.ts    |   4 +-
 .../src/styles/resolvers/radius/index.ts      |   4 +-
 .../src/styles/resolvers/textAlign/index.ts   |   4 +-
 .../src/styles/resolvers/width/index.ts       |   4 +-
 packages/reshaped/src/styles/types.ts         |   2 +-
 .../reshaped/src/tests/ShadowDOM.stories.tsx  |  16 +-
 .../reshaped/src/tests/ThemesPlayground.tsx   |  42 +--
 .../reshaped/src/tests/themes.stories.tsx     |  30 +-
 .../src/tests/themingWithDefinition.ts        |   2 +-
 .../src/tests/themingWithoutDefinition.ts     |   2 +-
 .../src/themes/_generator/constants.ts        |   2 +-
 .../themes/_generator/definitions/reshaped.ts |   2 +-
 .../themes/_generator/definitions/slate.ts    |   4 +-
 .../tokens/color/color.transforms.ts          |   2 +-
 .../tokens/color/utilities/generateColors.ts  |   2 +-
 .../color/utilities/generateMetaColors.ts     |   2 +-
 .../src/themes/_generator/tokens/css.ts       |   2 +-
 .../tokens/unit/utilities/generate.ts         |   4 +-
 .../reshaped/src/themes/_generator/types.ts   |   2 +-
 packages/reshaped/src/themes/index.ts         |  34 +--
 packages/reshaped/src/types/config.ts         |   4 +-
 packages/reshaped/src/utilities/props.ts      |   2 +-
 .../src/utilities/storybook/Example.tsx       |   4 +-
 .../src/utilities/tests/props.test.ts         |   2 +-
 packages/reshaped/tsconfig.esm.json           |   7 +-
 packages/reshaped/tsconfig.json               |   3 +-
 packages/reshaped/tsconfig.stories.json       |   2 +-
 268 files changed, 950 insertions(+), 942 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index eac76a88..dfbc246a 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -47,9 +47,17 @@ const config: StorybookConfig = {
 	],
 	async viteFinal(config: UserConfig) {
 		return mergeConfig(config, {
+			resolve: {
+				alias: {
+					"@reshaped/headless": resolve(__dirname, "../packages/headless/src"),
+				},
+			},
 			plugins: [
 				tsconfigPaths({
-					projects: [resolve(__dirname, "../packages/reshaped/tsconfig.json")],
+					projects: [
+						resolve(__dirname, "../packages/reshaped/tsconfig.json"),
+						resolve(__dirname, "../packages/headless/tsconfig.json"),
+					],
 				}),
 			],
 			css: {
diff --git a/packages/headless/src/hooks/_internal/useSingletonRTL.tsx b/packages/headless/src/hooks/_internal/useSingletonRTL.tsx
index 9fc2a7bd..ad9b4fcd 100644
--- a/packages/headless/src/hooks/_internal/useSingletonRTL.tsx
+++ b/packages/headless/src/hooks/_internal/useSingletonRTL.tsx
@@ -3,7 +3,7 @@
 import { isRTL } from "@reshaped/utilities";
 import React from "react";
 
-import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect";
 
 type Context = {
 	rtl: [boolean, (state: boolean) => void];
diff --git a/packages/headless/src/hooks/useHandlerRef.ts b/packages/headless/src/hooks/useHandlerRef.ts
index 654abb02..e1e8f311 100644
--- a/packages/headless/src/hooks/useHandlerRef.ts
+++ b/packages/headless/src/hooks/useHandlerRef.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
 
 /**
  * Hook for wrapping event handlers passed as props with a ref
diff --git a/packages/headless/src/hooks/useHotkeys.ts b/packages/headless/src/hooks/useHotkeys.ts
index 2334af40..8f52b547 100644
--- a/packages/headless/src/hooks/useHotkeys.ts
+++ b/packages/headless/src/hooks/useHotkeys.ts
@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { useSingletonHotkeys, type Hotkeys } from "@/hooks/_internal/useSingletonHotkeys";
+import { useSingletonHotkeys, type Hotkeys } from "./_internal/useSingletonHotkeys";
 
 const useHotkeys = <Element extends HTMLElement>(
 	hotkeys: Hotkeys,
diff --git a/packages/headless/src/hooks/useKeyboardMode.ts b/packages/headless/src/hooks/useKeyboardMode.ts
index 681116d3..bd5617c8 100644
--- a/packages/headless/src/hooks/useKeyboardMode.ts
+++ b/packages/headless/src/hooks/useKeyboardMode.ts
@@ -1,3 +1,3 @@
-import { useSingletonKeyboardMode } from "@/hooks/_internal/useSingletonKeyboardMode";
+import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode";
 
 export default useSingletonKeyboardMode;
diff --git a/packages/headless/src/hooks/useRTL.ts b/packages/headless/src/hooks/useRTL.ts
index 94853e24..aaa78b64 100644
--- a/packages/headless/src/hooks/useRTL.ts
+++ b/packages/headless/src/hooks/useRTL.ts
@@ -1,3 +1,3 @@
-import { useSingletonRTL } from "@/hooks/_internal/useSingletonRTL";
+import { useSingletonRTL } from "./_internal/useSingletonRTL";
 
 export default useSingletonRTL;
diff --git a/packages/reshaped/src/Sandbox.stories.tsx b/packages/reshaped/src/Sandbox.stories.tsx
index 19818528..7fcd93cd 100644
--- a/packages/reshaped/src/Sandbox.stories.tsx
+++ b/packages/reshaped/src/Sandbox.stories.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 
-import Card from "components/Card";
-import FormControl from "components/FormControl";
-import HiddenInput from "components/HiddenInput";
-import Image from "components/Image";
-import RadioGroup from "components/RadioGroup";
-import Text from "components/Text";
-import View from "components/View";
+import Card from "@/components/Card";
+import FormControl from "@/components/FormControl";
+import HiddenInput from "@/components/HiddenInput";
+import Image from "@/components/Image";
+import RadioGroup from "@/components/RadioGroup";
+import Text from "@/components/Text";
+import View from "@/components/View";
 
 export default {
 	title: "Sandbox",
diff --git a/packages/reshaped/src/cli/theming/index.ts b/packages/reshaped/src/cli/theming/index.ts
index 00ba80e4..f44b5869 100644
--- a/packages/reshaped/src/cli/theming/index.ts
+++ b/packages/reshaped/src/cli/theming/index.ts
@@ -3,14 +3,14 @@ import path from "node:path";
 
 import chalk from "chalk";
 
-import reshapedDefinition from "themes/_generator/definitions/reshaped";
-import transform from "themes/_generator/transform";
-import mergeDefinitions from "themes/_generator/utilities/mergeDefinitions";
+import reshapedDefinition from "@/themes/_generator/definitions/reshaped";
+import transform from "@/themes/_generator/transform";
+import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions";
 
 import { transformToTailwind } from "./tailwind";
 
-import type { PassedThemeDefinition } from "themes/_generator/tokens/types";
-import type * as T from "themes/_generator/types";
+import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types";
+import type * as T from "@/themes/_generator/types";
 
 const transformDefinition = (
 	name: string,
diff --git a/packages/reshaped/src/cli/theming/reshaped.config.ts b/packages/reshaped/src/cli/theming/reshaped.config.ts
index 7a3bcd26..d52c705b 100644
--- a/packages/reshaped/src/cli/theming/reshaped.config.ts
+++ b/packages/reshaped/src/cli/theming/reshaped.config.ts
@@ -1,8 +1,8 @@
-import figmaDefinition from "themes/_generator/definitions/figma";
-import reshapedDefinition from "themes/_generator/definitions/reshaped";
-import slateDefinition from "themes/_generator/definitions/slate";
+import figmaDefinition from "@/themes/_generator/definitions/figma";
+import reshapedDefinition from "@/themes/_generator/definitions/reshaped";
+import slateDefinition from "@/themes/_generator/definitions/slate";
 
-import type { ReshapedConfig } from "types/config";
+import type { ReshapedConfig } from "@/types/config";
 
 const config: ReshapedConfig = {
 	themes: {
diff --git a/packages/reshaped/src/cli/theming/tailwind.ts b/packages/reshaped/src/cli/theming/tailwind.ts
index 71c6293d..5c386c65 100644
--- a/packages/reshaped/src/cli/theming/tailwind.ts
+++ b/packages/reshaped/src/cli/theming/tailwind.ts
@@ -1,11 +1,11 @@
 /**
  * Transform JS theme defintion to Tailwind 4 CSS definition
  */
-import reshapedDefinition from "themes/_generator/definitions/reshaped";
-import mergeDefinitions from "themes/_generator/utilities/mergeDefinitions";
-import { camelToKebab } from "utilities/string";
+import reshapedDefinition from "@/themes/_generator/definitions/reshaped";
+import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions";
+import { camelToKebab } from "@/utilities/string";
 
-import type { GeneratedThemeDefinition, ThemeDefinition } from "themes/_generator/tokens/types";
+import type { GeneratedThemeDefinition, ThemeDefinition } from "@/themes/_generator/tokens/types";
 
 export const transformToTailwind = (theme?: GeneratedThemeDefinition) => {
 	const variables: Record<string, string> = {};
diff --git a/packages/reshaped/src/components/Accordion/Accordion.types.ts b/packages/reshaped/src/components/Accordion/Accordion.types.ts
index 22ce34ca..44082935 100644
--- a/packages/reshaped/src/components/Accordion/Accordion.types.ts
+++ b/packages/reshaped/src/components/Accordion/Accordion.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { IconProps } from "components/Icon";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type BaseProps = {
 	/** Expand / collapse icon size in units */
diff --git a/packages/reshaped/src/components/Accordion/AccordionContent.tsx b/packages/reshaped/src/components/Accordion/AccordionContent.tsx
index b1c569bd..98c8bb48 100644
--- a/packages/reshaped/src/components/Accordion/AccordionContent.tsx
+++ b/packages/reshaped/src/components/Accordion/AccordionContent.tsx
@@ -2,8 +2,8 @@
 
 import React from "react";
 
-import Expandable from "components/_private/Expandable";
-import View from "components/View";
+import Expandable from "@/components/_private/Expandable";
+import View from "@/components/View";
 
 import AccordionContext from "./Accordion.context";
 
diff --git a/packages/reshaped/src/components/Accordion/AccordionControlled.tsx b/packages/reshaped/src/components/Accordion/AccordionControlled.tsx
index 9419504d..542ed23b 100644
--- a/packages/reshaped/src/components/Accordion/AccordionControlled.tsx
+++ b/packages/reshaped/src/components/Accordion/AccordionControlled.tsx
@@ -3,7 +3,7 @@
 import { classNames, useHandlerRef } from "@reshaped/headless";
 import React from "react";
 
-import useElementId from "hooks/useElementId";
+import useElementId from "@/hooks/useElementId";
 
 import AccordionContext from "./Accordion.context";
 import * as T from "./Accordion.types";
diff --git a/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx b/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx
index 576be592..cf19c5fc 100644
--- a/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx
+++ b/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx
@@ -3,10 +3,10 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import Actionable from "components/Actionable";
-import Icon from "components/Icon";
-import View from "components/View";
-import IconChevronDown from "icons/ChevronDown";
+import Actionable from "@/components/Actionable";
+import Icon from "@/components/Icon";
+import View from "@/components/View";
+import IconChevronDown from "@/icons/ChevronDown";
 
 import AccordionContext from "./Accordion.context";
 import s from "./Accordion.module.css";
diff --git a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx b/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx
index e90be531..e6dbe0ae 100644
--- a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx
+++ b/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { userEvent, expect, fn, Mock } from "storybook/test";
 
-import Accordion from "components/Accordion";
-import Button from "components/Button";
-import View from "components/View";
-import { Placeholder } from "utilities/storybook";
+import Accordion from "@/components/Accordion";
+import Button from "@/components/Button";
+import View from "@/components/View";
+import { Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Accordion",
diff --git a/packages/reshaped/src/components/ActionBar/ActionBar.tsx b/packages/reshaped/src/components/ActionBar/ActionBar.tsx
index 047470f9..a441c8fa 100644
--- a/packages/reshaped/src/components/ActionBar/ActionBar.tsx
+++ b/packages/reshaped/src/components/ActionBar/ActionBar.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@reshaped/headless";
 
-import View from "components/View";
-import { responsiveVariables } from "utilities/props";
+import View from "@/components/View";
+import { responsiveVariables } from "@/utilities/props";
 
 import s from "./ActionBar.module.css";
 
diff --git a/packages/reshaped/src/components/ActionBar/ActionBar.types.ts b/packages/reshaped/src/components/ActionBar/ActionBar.types.ts
index 0475120d..519a5a5e 100644
--- a/packages/reshaped/src/components/ActionBar/ActionBar.types.ts
+++ b/packages/reshaped/src/components/ActionBar/ActionBar.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ViewProps } from "components/View";
+import type { ViewProps } from "@/components/View";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
 	/** Show or hide the component */
diff --git a/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx b/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx
index 8a6ddf87..dee8c7de 100644
--- a/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx
+++ b/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx
@@ -2,10 +2,10 @@ import { useToggle } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import ActionBar from "components/ActionBar";
-import Button from "components/Button";
-import View from "components/View";
-import { Placeholder, Example } from "utilities/storybook";
+import ActionBar from "@/components/ActionBar";
+import Button from "@/components/Button";
+import View from "@/components/View";
+import { Placeholder, Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/ActionBar",
diff --git a/packages/reshaped/src/components/Actionable/Actionable.tsx b/packages/reshaped/src/components/Actionable/Actionable.tsx
index 4951da44..a448a6a9 100644
--- a/packages/reshaped/src/components/Actionable/Actionable.tsx
+++ b/packages/reshaped/src/components/Actionable/Actionable.tsx
@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 
-import UnstyledActionable, { type ActionableRef as UnstyledActionableRef } from "core/Actionable";
+import UnstyledActionable, { type ActionableRef as UnstyledActionableRef } from "@/core/Actionable";
 
 import s from "./Actionable.module.css";
 
diff --git a/packages/reshaped/src/components/Actionable/Actionable.types.ts b/packages/reshaped/src/components/Actionable/Actionable.types.ts
index cd70acdb..49595334 100644
--- a/packages/reshaped/src/components/Actionable/Actionable.types.ts
+++ b/packages/reshaped/src/components/Actionable/Actionable.types.ts
@@ -1,4 +1,4 @@
-import type { ActionableProps as UnstyledActionableProps } from "core/Actionable";
+import type { ActionableProps as UnstyledActionableProps } from "@/core/Actionable";
 
 export type Props = UnstyledActionableProps & {
 	/** Enable a minimum required touch hitbox */
diff --git a/packages/reshaped/src/components/Actionable/index.ts b/packages/reshaped/src/components/Actionable/index.ts
index 40487500..b7f27671 100644
--- a/packages/reshaped/src/components/Actionable/index.ts
+++ b/packages/reshaped/src/components/Actionable/index.ts
@@ -1,4 +1,4 @@
 export { default } from "./Actionable";
 export type { Props as ActionableProps } from "./Actionable.types";
 
-export type { ActionableRef } from "core/Actionable";
+export type { ActionableRef } from "@/core/Actionable";
diff --git a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx b/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx
index 282ea6ed..5028e42b 100644
--- a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx
+++ b/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { userEvent, expect, fn } from "storybook/test";
 
-import Actionable from "components/Actionable";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Actionable from "@/components/Actionable";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Actionable",
diff --git a/packages/reshaped/src/components/Alert/Alert.tsx b/packages/reshaped/src/components/Alert/Alert.tsx
index 145fc6a7..2bf3ebd5 100644
--- a/packages/reshaped/src/components/Alert/Alert.tsx
+++ b/packages/reshaped/src/components/Alert/Alert.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "components/Icon";
-import Text from "components/Text";
-import View from "components/View";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import View from "@/components/View";
 
 import s from "./Alert.module.css";
 import * as T from "./Alert.types";
diff --git a/packages/reshaped/src/components/Alert/Alert.types.ts b/packages/reshaped/src/components/Alert/Alert.types.ts
index 88baf72c..18eb3dad 100644
--- a/packages/reshaped/src/components/Alert/Alert.types.ts
+++ b/packages/reshaped/src/components/Alert/Alert.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { IconProps } from "components/Icon";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** SVG component for the icon */
diff --git a/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx b/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx
index 3d920fe7..3ebdf6e1 100644
--- a/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx
+++ b/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Alert from "components/Alert";
-import Link from "components/Link";
-import IconZap from "icons/Zap";
-import { Example, Placeholder } from "utilities/storybook";
+import Alert from "@/components/Alert";
+import Link from "@/components/Link";
+import IconZap from "@/icons/Zap";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Alert",
diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx
index c16b0f40..1a4c4e13 100644
--- a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx
@@ -3,16 +3,16 @@
 import { useIsomorphicLayoutEffect, useHotkeys, useHandlerRef } from "@reshaped/headless";
 import React from "react";
 
-import DropdownMenu from "components/DropdownMenu";
-import TextField from "components/TextField";
-import * as keys from "constants/keys";
-import useElementId from "hooks/useElementId";
+import DropdownMenu from "@/components/DropdownMenu";
+import TextField from "@/components/TextField";
+import * as keys from "@/constants/keys";
+import useElementId from "@/hooks/useElementId";
 
 import s from "./Autocomplete.module.css";
 import * as T from "./Autocomplete.types";
 
-import type { MenuItemProps } from "components/MenuItem";
-import type { TextFieldProps } from "components/TextField";
+import type { MenuItemProps } from "@/components/MenuItem";
+import type { TextFieldProps } from "@/components/TextField";
 
 const AutocompleteContext = React.createContext({} as T.Context);
 
diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts
index 8bdecf73..a4a18b9d 100644
--- a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts
+++ b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts
@@ -1,6 +1,6 @@
-import type { DropdownMenuProps, DropdownMenuInstance } from "components/DropdownMenu";
-import type { MenuItemProps } from "components/MenuItem";
-import type { TextFieldProps } from "components/TextField";
+import type { DropdownMenuProps, DropdownMenuInstance } from "@/components/DropdownMenu";
+import type { MenuItemProps } from "@/components/MenuItem";
+import type { TextFieldProps } from "@/components/TextField";
 
 type SelectArgs = {
 	/** Value that will be passed to the input on selection */
diff --git a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx b/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx
index ef57321a..7068f94e 100644
--- a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx
+++ b/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx
@@ -3,11 +3,11 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { fn, expect, Mock, within, waitFor, userEvent, fireEvent } from "storybook/test";
 
-import Autocomplete from "components/Autocomplete";
-import Badge from "components/Badge";
-import FormControl from "components/FormControl";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import Autocomplete from "@/components/Autocomplete";
+import Badge from "@/components/Badge";
+import FormControl from "@/components/FormControl";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Autocomplete",
diff --git a/packages/reshaped/src/components/Avatar/Avatar.tsx b/packages/reshaped/src/components/Avatar/Avatar.tsx
index 3a38c2f7..e8961c96 100644
--- a/packages/reshaped/src/components/Avatar/Avatar.tsx
+++ b/packages/reshaped/src/components/Avatar/Avatar.tsx
@@ -1,10 +1,10 @@
 import { classNames } from "@reshaped/headless";
 
-import Icon from "components/Icon";
-import Image, { type ImageProps } from "components/Image";
-import View from "components/View";
-import { resolveMixin } from "styles/mixin";
-import { responsivePropDependency } from "utilities/props";
+import Icon from "@/components/Icon";
+import Image, { type ImageProps } from "@/components/Image";
+import View from "@/components/View";
+import { resolveMixin } from "@/styles/mixin";
+import { responsivePropDependency } from "@/utilities/props";
 
 import s from "./Avatar.module.css";
 
diff --git a/packages/reshaped/src/components/Avatar/Avatar.types.ts b/packages/reshaped/src/components/Avatar/Avatar.types.ts
index f8d8f660..4c5235e7 100644
--- a/packages/reshaped/src/components/Avatar/Avatar.types.ts
+++ b/packages/reshaped/src/components/Avatar/Avatar.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { IconProps } from "components/Icon";
-import type * as G from "types/global";
+import type { IconProps } from "@/components/Icon";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Image URL */
diff --git a/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx b/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx
index 1ad6202b..e742c01a 100644
--- a/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx
+++ b/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx
@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { expect, fn, Mock, waitFor } from "storybook/test";
 
-import Avatar from "components/Avatar";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Avatar from "@/components/Avatar";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Avatar",
diff --git a/packages/reshaped/src/components/Badge/Badge.tsx b/packages/reshaped/src/components/Badge/Badge.tsx
index ea1122a2..36330e51 100644
--- a/packages/reshaped/src/components/Badge/Badge.tsx
+++ b/packages/reshaped/src/components/Badge/Badge.tsx
@@ -1,10 +1,10 @@
 import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 
-import Actionable, { type ActionableProps, type ActionableRef } from "components/Actionable";
-import Icon from "components/Icon";
-import Text from "components/Text";
-import IconClose from "icons/Close";
+import Actionable, { type ActionableProps, type ActionableRef } from "@/components/Actionable";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import IconClose from "@/icons/Close";
 
 import s from "./Badge.module.css";
 
diff --git a/packages/reshaped/src/components/Badge/Badge.types.ts b/packages/reshaped/src/components/Badge/Badge.types.ts
index dfdc4ae7..e3f8b676 100644
--- a/packages/reshaped/src/components/Badge/Badge.types.ts
+++ b/packages/reshaped/src/components/Badge/Badge.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ActionableProps } from "components/Actionable";
-import type { IconProps } from "components/Icon";
+import type { ActionableProps } from "@/components/Actionable";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
 
 type BaseProps = {
diff --git a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx
index 58a5b705..65b83a99 100644
--- a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx
+++ b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx
@@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Avatar from "components/Avatar";
-import Badge from "components/Badge";
-import Button from "components/Button";
-import Icon from "components/Icon";
-import View from "components/View";
-import IconCheckmark from "icons/Checkmark";
-import IconChevronRight from "icons/ChevronRight";
-import { Example } from "utilities/storybook";
+import Avatar from "@/components/Avatar";
+import Badge from "@/components/Badge";
+import Button from "@/components/Button";
+import Icon from "@/components/Icon";
+import View from "@/components/View";
+import IconCheckmark from "@/icons/Checkmark";
+import IconChevronRight from "@/icons/ChevronRight";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Badge",
diff --git a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx
index 7930c2fa..80b68220 100644
--- a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -3,12 +3,12 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import Button from "components/Button";
-import Icon from "components/Icon";
-import Text from "components/Text";
-import View from "components/View";
-import IconChevronRight from "icons/ChevronRight";
-import IconDotsHorizontal from "icons/DotsHorizontal";
+import Button from "@/components/Button";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconChevronRight from "@/icons/ChevronRight";
+import IconDotsHorizontal from "@/icons/DotsHorizontal";
 
 import * as T from "./Breadcrumbs.types";
 
diff --git a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts
index 0d011105..f9c83ed5 100644
--- a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts
+++ b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { LinkProps } from "components/Link";
+import type { LinkProps } from "@/components/Link";
 import type React from "react";
 
 export type Props = {
diff --git a/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx
index 554c67f7..83106d0e 100644
--- a/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx
+++ b/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,5 +1,5 @@
-import Link from "components/Link";
-import Text from "components/Text";
+import Link from "@/components/Link";
+import Text from "@/components/Text";
 
 import type * as T from "./Breadcrumbs.types";
 
diff --git a/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx b/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx
index 278a8f31..edd0b349 100644
--- a/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx
+++ b/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Badge from "components/Badge";
-import Breadcrumbs from "components/Breadcrumbs";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Badge from "@/components/Badge";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Breadcrumbs",
diff --git a/packages/reshaped/src/components/Button/Button.tsx b/packages/reshaped/src/components/Button/Button.tsx
index 2285a740..917c8d78 100644
--- a/packages/reshaped/src/components/Button/Button.tsx
+++ b/packages/reshaped/src/components/Button/Button.tsx
@@ -1,10 +1,10 @@
 import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 
-import Actionable, { type ActionableRef } from "components/Actionable";
-import Icon from "components/Icon";
-import Loader from "components/Loader";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import Actionable, { type ActionableRef } from "@/components/Actionable";
+import Icon from "@/components/Icon";
+import Loader from "@/components/Loader";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./Button.module.css";
 
diff --git a/packages/reshaped/src/components/Button/Button.types.ts b/packages/reshaped/src/components/Button/Button.types.ts
index 1498ee84..3d329ebf 100644
--- a/packages/reshaped/src/components/Button/Button.types.ts
+++ b/packages/reshaped/src/components/Button/Button.types.ts
@@ -1,9 +1,9 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { AlignerProps as BaseAlignerProps } from "components/_private/Aligner";
-import type { ActionableProps } from "components/Actionable";
-import type { IconProps } from "components/Icon";
+import type { AlignerProps as BaseAlignerProps } from "@/components/_private/Aligner";
+import type { ActionableProps } from "@/components/Actionable";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Size = "xlarge" | "large" | "medium" | "small";
 
diff --git a/packages/reshaped/src/components/Button/ButtonAligner.tsx b/packages/reshaped/src/components/Button/ButtonAligner.tsx
index 2e832656..b1c89768 100644
--- a/packages/reshaped/src/components/Button/ButtonAligner.tsx
+++ b/packages/reshaped/src/components/Button/ButtonAligner.tsx
@@ -1,4 +1,4 @@
-import Aligner from "components/_private/Aligner";
+import Aligner from "@/components/_private/Aligner";
 
 import s from "./Button.module.css";
 
diff --git a/packages/reshaped/src/components/Button/tests/Button.stories.tsx b/packages/reshaped/src/components/Button/tests/Button.stories.tsx
index c3ac08b5..5f1f0efe 100644
--- a/packages/reshaped/src/components/Button/tests/Button.stories.tsx
+++ b/packages/reshaped/src/components/Button/tests/Button.stories.tsx
@@ -1,13 +1,13 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Avatar from "components/Avatar";
-import Button from "components/Button";
-import Hotkey from "components/Hotkey";
-import Image from "components/Image";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example, Placeholder } from "utilities/storybook";
+import Avatar from "@/components/Avatar";
+import Button from "@/components/Button";
+import Hotkey from "@/components/Hotkey";
+import Image from "@/components/Image";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Button",
diff --git a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx
index 158a895a..0247d8cd 100644
--- a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx
+++ b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx
@@ -2,8 +2,8 @@
 
 import React from "react";
 
-import View from "components/View";
-import { onNextFrame } from "utilities/animation";
+import View from "@/components/View";
+import { onNextFrame } from "@/utilities/animation";
 
 import {
 	setMonthToPrevious,
diff --git a/packages/reshaped/src/components/Calendar/CalendarControls.tsx b/packages/reshaped/src/components/Calendar/CalendarControls.tsx
index 357abeb4..ffb4aab3 100644
--- a/packages/reshaped/src/components/Calendar/CalendarControls.tsx
+++ b/packages/reshaped/src/components/Calendar/CalendarControls.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 
-import Button from "components/Button";
-import Hidden from "components/Hidden";
-import HiddenVisually from "components/HiddenVisually";
-import Text from "components/Text";
-import View from "components/View";
-import IconChevronLeft from "icons/ChevronLeft";
-import IconChevronRight from "icons/ChevronRight";
-import { onNextFrame } from "utilities/animation";
+import Button from "@/components/Button";
+import Hidden from "@/components/Hidden";
+import HiddenVisually from "@/components/HiddenVisually";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconChevronLeft from "@/icons/ChevronLeft";
+import IconChevronRight from "@/icons/ChevronRight";
+import { onNextFrame } from "@/utilities/animation";
 
 import s from "./Calendar.module.css";
 
diff --git a/packages/reshaped/src/components/Calendar/CalendarDate.tsx b/packages/reshaped/src/components/Calendar/CalendarDate.tsx
index a2729a52..14b3e368 100644
--- a/packages/reshaped/src/components/Calendar/CalendarDate.tsx
+++ b/packages/reshaped/src/components/Calendar/CalendarDate.tsx
@@ -2,7 +2,7 @@
 
 import { classNames } from "@reshaped/headless";
 
-import Actionable from "components/Actionable";
+import Actionable from "@/components/Actionable";
 
 import s from "./Calendar.module.css";
 import { getLocalISODate } from "./Calendar.utils";
diff --git a/packages/reshaped/src/components/Calendar/CalendarYear.tsx b/packages/reshaped/src/components/Calendar/CalendarYear.tsx
index 7f800b10..8f1face7 100644
--- a/packages/reshaped/src/components/Calendar/CalendarYear.tsx
+++ b/packages/reshaped/src/components/Calendar/CalendarYear.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import Actionable from "components/Actionable";
-import { onNextFrame } from "utilities/animation";
+import Actionable from "@/components/Actionable";
+import { onNextFrame } from "@/utilities/animation";
 
 import s from "./Calendar.module.css";
 import { getMonthNames } from "./Calendar.utils";
diff --git a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx
index da6e9cb1..f6c10e71 100644
--- a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx
+++ b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { fn, expect, userEvent, within, type Mock, waitFor } from "storybook/test";
 
-import Calendar from "components/Calendar";
-import Text from "components/Text";
-import { Example } from "utilities/storybook";
+import Calendar from "@/components/Calendar";
+import Text from "@/components/Text";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Calendar",
diff --git a/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts b/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts
index 48a973ba..5d1d58d8 100644
--- a/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts
+++ b/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts
@@ -1,7 +1,7 @@
 import { useHotkeys } from "@reshaped/headless";
 import React from "react";
 
-import * as keys from "constants/keys";
+import * as keys from "@/constants/keys";
 
 import { getFocusableDates } from "./Calendar.utils";
 
diff --git a/packages/reshaped/src/components/Card/Card.tsx b/packages/reshaped/src/components/Card/Card.tsx
index 6a9e6dae..685c779e 100644
--- a/packages/reshaped/src/components/Card/Card.tsx
+++ b/packages/reshaped/src/components/Card/Card.tsx
@@ -1,8 +1,8 @@
 import { classNames } from "@reshaped/headless";
 import React, { forwardRef } from "react";
 
-import Actionable from "components/Actionable";
-import { resolveMixin } from "styles/mixin";
+import Actionable from "@/components/Actionable";
+import { resolveMixin } from "@/styles/mixin";
 
 import s from "./Card.module.css";
 
diff --git a/packages/reshaped/src/components/Card/Card.types.ts b/packages/reshaped/src/components/Card/Card.types.ts
index 4107cb10..c874111e 100644
--- a/packages/reshaped/src/components/Card/Card.types.ts
+++ b/packages/reshaped/src/components/Card/Card.types.ts
@@ -1,8 +1,8 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ActionableProps } from "components/Actionable";
-import type { ViewProps } from "components/View";
+import type { ActionableProps } from "@/components/Actionable";
+import type { ViewProps } from "@/components/View";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
 	/** Component padding, base unit multiplier */
diff --git a/packages/reshaped/src/components/Card/tests/Card.stories.tsx b/packages/reshaped/src/components/Card/tests/Card.stories.tsx
index aea1fb01..61e99d0b 100644
--- a/packages/reshaped/src/components/Card/tests/Card.stories.tsx
+++ b/packages/reshaped/src/components/Card/tests/Card.stories.tsx
@@ -2,8 +2,8 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Card from "components/Card";
-import { Example, Placeholder } from "utilities/storybook";
+import Card from "@/components/Card";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Card",
diff --git a/packages/reshaped/src/components/Carousel/Carousel.tsx b/packages/reshaped/src/components/Carousel/Carousel.tsx
index 906b2b38..209151b7 100644
--- a/packages/reshaped/src/components/Carousel/Carousel.tsx
+++ b/packages/reshaped/src/components/Carousel/Carousel.tsx
@@ -4,14 +4,14 @@ import { classNames, useIsomorphicLayoutEffect, useRTL } from "@reshaped/headles
 import { rafThrottle } from "@reshaped/headless/internal";
 import React from "react";
 
-import View from "components/View";
-import { responsiveVariables, responsiveClassNames } from "utilities/props";
+import View from "@/components/View";
+import { responsiveVariables, responsiveClassNames } from "@/utilities/props";
 
 import s from "./Carousel.module.css";
 import * as T from "./Carousel.types";
 import CarouselControl from "./CarouselControl";
 
-import type { ActionableRef } from "components/Actionable";
+import type { ActionableRef } from "@/components/Actionable";
 
 const Carousel: React.FC<T.Props> = (props) => {
 	const {
diff --git a/packages/reshaped/src/components/Carousel/Carousel.types.ts b/packages/reshaped/src/components/Carousel/Carousel.types.ts
index 08368530..c687c6ae 100644
--- a/packages/reshaped/src/components/Carousel/Carousel.types.ts
+++ b/packages/reshaped/src/components/Carousel/Carousel.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ActionableRef } from "components/Actionable";
+import type { ActionableRef } from "@/components/Actionable";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Instance =
 	| {
diff --git a/packages/reshaped/src/components/Carousel/CarouselControl.tsx b/packages/reshaped/src/components/Carousel/CarouselControl.tsx
index c7520e6d..59495cbe 100644
--- a/packages/reshaped/src/components/Carousel/CarouselControl.tsx
+++ b/packages/reshaped/src/components/Carousel/CarouselControl.tsx
@@ -3,14 +3,14 @@
 import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import { forwardRef, useState } from "react";
 
-import Button from "components/Button";
-import IconChevronLeft from "icons/ChevronLeft";
-import IconChevronRight from "icons/ChevronRight";
+import Button from "@/components/Button";
+import IconChevronLeft from "@/icons/ChevronLeft";
+import IconChevronRight from "@/icons/ChevronRight";
 
 import s from "./Carousel.module.css";
 import * as T from "./Carousel.types";
 
-import type { ActionableRef } from "components/Actionable";
+import type { ActionableRef } from "@/components/Actionable";
 
 const CarouselControl = forwardRef<ActionableRef, T.ControlProps>((props, ref) => {
 	const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } =
diff --git a/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx b/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx
index f48a19f8..5b2d2bb2 100644
--- a/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx
+++ b/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx
@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, waitFor } from "storybook/test";
 
-import Button from "components/Button";
-import Carousel, { type CarouselInstanceRef } from "components/Carousel";
-import View from "components/View";
-import { Example, Placeholder } from "utilities/storybook";
+import Button from "@/components/Button";
+import Carousel, { type CarouselInstanceRef } from "@/components/Carousel";
+import View from "@/components/View";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Carousel",
diff --git a/packages/reshaped/src/components/Checkbox/Checkbox.tsx b/packages/reshaped/src/components/Checkbox/Checkbox.tsx
index 45e777d1..f150b621 100644
--- a/packages/reshaped/src/components/Checkbox/Checkbox.tsx
+++ b/packages/reshaped/src/components/Checkbox/Checkbox.tsx
@@ -3,13 +3,13 @@
 import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 
-import { useCheckboxGroup } from "components/CheckboxGroup";
-import { useFormControl } from "components/FormControl";
-import HiddenInput from "components/HiddenInput";
-import Icon from "components/Icon";
-import Text from "components/Text";
-import IconCheckmark from "icons/Checkmark";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { useCheckboxGroup } from "@/components/CheckboxGroup";
+import { useFormControl } from "@/components/FormControl";
+import HiddenInput from "@/components/HiddenInput";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import IconCheckmark from "@/icons/Checkmark";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./Checkbox.module.css";
 
diff --git a/packages/reshaped/src/components/Checkbox/Checkbox.types.ts b/packages/reshaped/src/components/Checkbox/Checkbox.types.ts
index 67ff56ad..ea5ca965 100644
--- a/packages/reshaped/src/components/Checkbox/Checkbox.types.ts
+++ b/packages/reshaped/src/components/Checkbox/Checkbox.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Node for inserting the label */
diff --git a/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx b/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx
index 685a204d..4f369c63 100644
--- a/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx
+++ b/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Checkbox from "components/Checkbox";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Checkbox from "@/components/Checkbox";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Checkbox",
diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts
index 9275e4aa..f0b11966 100644
--- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts
+++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts
@@ -1,6 +1,6 @@
-import type { CheckboxProps } from "components/Checkbox";
+import type { CheckboxProps } from "@/components/Checkbox";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Component id attribute */
diff --git a/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx b/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx
index b3b807be..1f29d5dd 100644
--- a/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx
+++ b/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Checkbox from "components/Checkbox";
-import CheckboxGroup from "components/CheckboxGroup";
-import View from "components/View";
+import Checkbox from "@/components/Checkbox";
+import CheckboxGroup from "@/components/CheckboxGroup";
+import View from "@/components/View";
 
 export default {
 	title: "Components/CheckboxGroup",
diff --git a/packages/reshaped/src/components/Container/Container.tsx b/packages/reshaped/src/components/Container/Container.tsx
index 09415d79..80494356 100644
--- a/packages/reshaped/src/components/Container/Container.tsx
+++ b/packages/reshaped/src/components/Container/Container.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import View from "components/View";
+import View from "@/components/View";
 
 import s from "./Container.module.css";
 
diff --git a/packages/reshaped/src/components/Container/Container.types.ts b/packages/reshaped/src/components/Container/Container.types.ts
index 6df4092c..e9c060f8 100644
--- a/packages/reshaped/src/components/Container/Container.types.ts
+++ b/packages/reshaped/src/components/Container/Container.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ViewProps } from "components/View";
+import type { ViewProps } from "@/components/View";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
 	/** Component inline padding */
diff --git a/packages/reshaped/src/components/Container/tests/Container.stories.tsx b/packages/reshaped/src/components/Container/tests/Container.stories.tsx
index f5870948..90f00108 100644
--- a/packages/reshaped/src/components/Container/tests/Container.stories.tsx
+++ b/packages/reshaped/src/components/Container/tests/Container.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Container from "components/Container";
-import { Example, Placeholder } from "utilities/storybook";
+import Container from "@/components/Container";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Container",
diff --git a/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx b/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx
index dac23b5a..9053dca8 100644
--- a/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx
@@ -3,7 +3,7 @@
 import { useHandlerRef, useScrollLock } from "@reshaped/headless";
 import React from "react";
 
-import DropdownMenu from "components/DropdownMenu";
+import DropdownMenu from "@/components/DropdownMenu";
 
 import s from "./ContextMenu.module.css";
 
diff --git a/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts b/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts
index 509a0612..f7e46c20 100644
--- a/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts
+++ b/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts
@@ -1,3 +1,3 @@
-import type { DropdownMenuProps } from "components/DropdownMenu";
+import type { DropdownMenuProps } from "@/components/DropdownMenu";
 
 export type Props = Omit<DropdownMenuProps, "active" | "defaultActive">;
diff --git a/packages/reshaped/src/components/ContextMenu/index.ts b/packages/reshaped/src/components/ContextMenu/index.ts
index 82d16ee9..9bd72a0a 100644
--- a/packages/reshaped/src/components/ContextMenu/index.ts
+++ b/packages/reshaped/src/components/ContextMenu/index.ts
@@ -1,4 +1,4 @@
-import DropdownMenu from "components/DropdownMenu";
+import DropdownMenu from "@/components/DropdownMenu";
 
 import ContextMenu from "./ContextMenu";
 
diff --git a/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx b/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx
index e7a45dc5..160e0e52 100644
--- a/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx
+++ b/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import ContextMenu from "components/ContextMenu";
-import View from "components/View";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import ContextMenu from "@/components/ContextMenu";
+import View from "@/components/View";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/ContextMenu",
diff --git a/packages/reshaped/src/components/Dismissible/Dismissible.tsx b/packages/reshaped/src/components/Dismissible/Dismissible.tsx
index 4eeab6a7..df8d3e17 100644
--- a/packages/reshaped/src/components/Dismissible/Dismissible.tsx
+++ b/packages/reshaped/src/components/Dismissible/Dismissible.tsx
@@ -2,8 +2,8 @@
 
 import { classNames } from "@reshaped/headless";
 
-import Button from "components/Button";
-import IconClose from "icons/Close";
+import Button from "@/components/Button";
+import IconClose from "@/icons/Close";
 
 import s from "./Dismissible.module.css";
 
diff --git a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx
index f24ac56e..85e72686 100644
--- a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx
+++ b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { within, expect, userEvent, fn } from "storybook/test";
 
-import Dismissible from "components/Dismissible";
-import Image from "components/Image";
-import View from "components/View";
-import { Example, Placeholder } from "utilities/storybook";
+import Dismissible from "@/components/Dismissible";
+import Image from "@/components/Image";
+import View from "@/components/View";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Dismissible",
diff --git a/packages/reshaped/src/components/Divider/Divider.tsx b/packages/reshaped/src/components/Divider/Divider.tsx
index a8861577..b5007c52 100644
--- a/packages/reshaped/src/components/Divider/Divider.tsx
+++ b/packages/reshaped/src/components/Divider/Divider.tsx
@@ -1,7 +1,7 @@
 import { classNames, type StyleAttribute } from "@reshaped/headless";
 
-import Text from "components/Text";
-import { responsiveClassNames } from "utilities/props";
+import Text from "@/components/Text";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./Divider.module.css";
 
diff --git a/packages/reshaped/src/components/Divider/Divider.types.ts b/packages/reshaped/src/components/Divider/Divider.types.ts
index 696e933e..d72c93b1 100644
--- a/packages/reshaped/src/components/Divider/Divider.types.ts
+++ b/packages/reshaped/src/components/Divider/Divider.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Change component to take no space, useful for using it as a border in components like Tabs */
diff --git a/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx b/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx
index 68af2d38..32e7aa36 100644
--- a/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx
+++ b/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Divider from "components/Divider";
-import View from "components/View";
-import { Example, Placeholder } from "utilities/storybook";
+import Divider from "@/components/Divider";
+import View from "@/components/View";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Divider",
diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx
index 7ff1157b..d7e8de3c 100644
--- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx
@@ -3,12 +3,12 @@
 import { classNames, useHotkeys, useRTL } from "@reshaped/headless";
 import React from "react";
 
-import { useFlyoutContext } from "components/Flyout";
-import Icon from "components/Icon";
-import MenuItem from "components/MenuItem";
-import Popover from "components/Popover";
-import * as keys from "constants/keys";
-import IconChevronRight from "icons/ChevronRight";
+import { useFlyoutContext } from "@/components/Flyout";
+import Icon from "@/components/Icon";
+import MenuItem from "@/components/MenuItem";
+import Popover from "@/components/Popover";
+import * as keys from "@/constants/keys";
+import IconChevronRight from "@/icons/ChevronRight";
 
 import s from "./DropdownMenu.module.css";
 
diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts
index 66dd7ace..2883633e 100644
--- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts
+++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts
@@ -1,6 +1,6 @@
-import type { FlyoutContentProps } from "components/Flyout";
-import type { MenuItemProps } from "components/MenuItem";
-import type { PopoverProps, PopoverInstance } from "components/Popover";
+import type { FlyoutContentProps } from "@/components/Flyout";
+import type { MenuItemProps } from "@/components/MenuItem";
+import type { PopoverProps, PopoverInstance } from "@/components/Popover";
 import type React from "react";
 
 export type Instance = PopoverInstance;
diff --git a/packages/reshaped/src/components/DropdownMenu/index.ts b/packages/reshaped/src/components/DropdownMenu/index.ts
index 21b2c006..ac7e526f 100644
--- a/packages/reshaped/src/components/DropdownMenu/index.ts
+++ b/packages/reshaped/src/components/DropdownMenu/index.ts
@@ -1,4 +1,4 @@
-import Popover from "components/Popover";
+import Popover from "@/components/Popover";
 
 import DropdownMenu, {
 	DropdownMenuContent,
diff --git a/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx b/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx
index 2cb96c4f..426b848d 100644
--- a/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx
+++ b/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx
@@ -1,14 +1,14 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import Button from "components/Button";
-import DropdownMenu from "components/DropdownMenu";
-import Theme from "components/Theme";
-import { useTheme } from "components/Theme/useTheme";
-import View from "components/View";
-import IconCheckmark from "icons/Checkmark";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import DropdownMenu from "@/components/DropdownMenu";
+import Theme from "@/components/Theme";
+import { useTheme } from "@/components/Theme/useTheme";
+import View from "@/components/View";
+import IconCheckmark from "@/icons/Checkmark";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/DropdownMenu",
diff --git a/packages/reshaped/src/components/FileUpload/FileUpload.tsx b/packages/reshaped/src/components/FileUpload/FileUpload.tsx
index 8bbaa18f..215aca54 100644
--- a/packages/reshaped/src/components/FileUpload/FileUpload.tsx
+++ b/packages/reshaped/src/components/FileUpload/FileUpload.tsx
@@ -3,8 +3,8 @@
 import { classNames, useToggle } from "@reshaped/headless";
 import React from "react";
 
-import HiddenVisually from "components/HiddenVisually";
-import View from "components/View";
+import HiddenVisually from "@/components/HiddenVisually";
+import View from "@/components/View";
 
 import s from "./FileUpload.module.css";
 
diff --git a/packages/reshaped/src/components/FileUpload/FileUpload.types.ts b/packages/reshaped/src/components/FileUpload/FileUpload.types.ts
index d032551e..1f7ceca0 100644
--- a/packages/reshaped/src/components/FileUpload/FileUpload.types.ts
+++ b/packages/reshaped/src/components/FileUpload/FileUpload.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ViewProps } from "components/View";
+import type { ViewProps } from "@/components/View";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Name of the input element */
diff --git a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx
index 5be889c8..ad509e19 100644
--- a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx
+++ b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx
@@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, userEvent, fn } from "storybook/test";
 
-import Button from "components/Button";
-import FileUpload from "components/FileUpload";
-import Icon from "components/Icon";
-import Image from "components/Image";
-import Link from "components/Link";
-import View from "components/View";
-import IconMic from "icons/Mic";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import FileUpload from "@/components/FileUpload";
+import Icon from "@/components/Icon";
+import Image from "@/components/Image";
+import Link from "@/components/Link";
+import View from "@/components/View";
+import IconMic from "@/icons/Mic";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/FileUpload",
diff --git a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx
index 41d5fb10..8b451e66 100644
--- a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx
+++ b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx
@@ -3,7 +3,7 @@
 import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 
-import Portal from "components/_private/Portal";
+import Portal from "@/components/_private/Portal";
 
 import { useFlyoutContext, ContentProvider } from "./Flyout.context";
 import s from "./Flyout.module.css";
diff --git a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx
index 4be0bdbd..a0214ab2 100644
--- a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx
+++ b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx
@@ -14,10 +14,10 @@ import {
 } from "@reshaped/headless/internal";
 import React from "react";
 
-import useIsDismissible from "hooks/_private/useIsDismissible";
-import usePrevious from "hooks/_private/usePrevious";
-import useElementId from "hooks/useElementId";
-import { checkTransitions } from "utilities/animation";
+import useIsDismissible from "@/hooks/_private/useIsDismissible";
+import usePrevious from "@/hooks/_private/usePrevious";
+import useElementId from "@/hooks/useElementId";
+import { checkTransitions } from "@/utilities/animation";
 
 import * as timeouts from "./Flyout.constants";
 import {
diff --git a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx
index f48150e0..80d28802 100644
--- a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx
+++ b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx
@@ -3,17 +3,17 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { userEvent, waitFor, within, expect, fn } from "storybook/test";
 
-import Button from "components/Button";
-import Flyout, { FlyoutInstance, FlyoutProps } from "components/Flyout";
-import Modal from "components/Modal";
-import Reshaped from "components/Reshaped";
-import Select from "components/Select";
-import Switch from "components/Switch";
-import TextField from "components/TextField";
-import Theme from "components/Theme";
-import View from "components/View";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Flyout, { FlyoutInstance, FlyoutProps } from "@/components/Flyout";
+import Modal from "@/components/Modal";
+import Reshaped from "@/components/Reshaped";
+import Select from "@/components/Select";
+import Switch from "@/components/Switch";
+import TextField from "@/components/TextField";
+import Theme from "@/components/Theme";
+import View from "@/components/View";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default { title: "Utility components/Flyout" };
 
diff --git a/packages/reshaped/src/components/FormControl/FormControl.tsx b/packages/reshaped/src/components/FormControl/FormControl.tsx
index 7831e3a1..da4cb11e 100644
--- a/packages/reshaped/src/components/FormControl/FormControl.tsx
+++ b/packages/reshaped/src/components/FormControl/FormControl.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import useElementId from "hooks/useElementId";
+import useElementId from "@/hooks/useElementId";
 
 import { Provider } from "./FormControl.context";
 import { getCaptionId } from "./FormControl.utilities";
diff --git a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx
index 3d871fd2..db4d2f7e 100644
--- a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx
+++ b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Text from "components/Text";
+import Text from "@/components/Text";
 
 import { useFormControlPrivate } from "./FormControl.context";
 import s from "./FormControl.module.css";
diff --git a/packages/reshaped/src/components/FormControl/FormControlLabel.tsx b/packages/reshaped/src/components/FormControl/FormControlLabel.tsx
index c10f6dcb..e3738ebd 100644
--- a/packages/reshaped/src/components/FormControl/FormControlLabel.tsx
+++ b/packages/reshaped/src/components/FormControl/FormControlLabel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Text from "components/Text";
+import Text from "@/components/Text";
 
 import { useFormControlPrivate } from "./FormControl.context";
 import s from "./FormControl.module.css";
diff --git a/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx b/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx
index 89ded75d..1ab36a9e 100644
--- a/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx
+++ b/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import FormControl from "components/FormControl";
-import Radio from "components/Radio";
-import RadioGroup from "components/RadioGroup";
-import TextField from "components/TextField";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import FormControl from "@/components/FormControl";
+import Radio from "@/components/Radio";
+import RadioGroup from "@/components/RadioGroup";
+import TextField from "@/components/TextField";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/FormControl",
diff --git a/packages/reshaped/src/components/Grid/Grid.tsx b/packages/reshaped/src/components/Grid/Grid.tsx
index 5a48255f..dd49eb7f 100644
--- a/packages/reshaped/src/components/Grid/Grid.tsx
+++ b/packages/reshaped/src/components/Grid/Grid.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@reshaped/headless";
 
-import { resolveMixin } from "styles/mixin";
-import { responsiveVariables, responsivePropDependency } from "utilities/props";
+import { resolveMixin } from "@/styles/mixin";
+import { responsiveVariables, responsivePropDependency } from "@/utilities/props";
 
 import s from "./Grid.module.css";
 
diff --git a/packages/reshaped/src/components/Grid/Grid.types.ts b/packages/reshaped/src/components/Grid/Grid.types.ts
index df0a22aa..f0cabefe 100644
--- a/packages/reshaped/src/components/Grid/Grid.types.ts
+++ b/packages/reshaped/src/components/Grid/Grid.types.ts
@@ -1,8 +1,8 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Property } from "csstype";
 import type React from "react";
-import type * as TStyles from "styles/types";
-import type * as G from "types/global";
+import type * as TStyles from "@/styles/types";
+import type * as G from "@/types/global";
 
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
 	/** Gap between grid items */
diff --git a/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx b/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx
index 4a14c041..f3fbde31 100644
--- a/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx
+++ b/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Grid from "components/Grid";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Grid from "@/components/Grid";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Grid",
diff --git a/packages/reshaped/src/components/Hidden/Hidden.tsx b/packages/reshaped/src/components/Hidden/Hidden.tsx
index 9a5bd4e5..ee946c33 100644
--- a/packages/reshaped/src/components/Hidden/Hidden.tsx
+++ b/packages/reshaped/src/components/Hidden/Hidden.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import { responsiveClassNames } from "utilities/props";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./Hidden.module.css";
 
diff --git a/packages/reshaped/src/components/Hidden/Hidden.types.ts b/packages/reshaped/src/components/Hidden/Hidden.types.ts
index a1525cac..cd9367e7 100644
--- a/packages/reshaped/src/components/Hidden/Hidden.types.ts
+++ b/packages/reshaped/src/components/Hidden/Hidden.types.ts
@@ -1,5 +1,5 @@
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Pick at which viewport sizes to hide the children*/
diff --git a/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx b/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx
index 9f6ba400..3d9709ba 100644
--- a/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx
+++ b/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Hidden from "components/Hidden";
-import { Example } from "utilities/storybook";
+import Hidden from "@/components/Hidden";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Hidden",
diff --git a/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx b/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx
index 2b2029b8..e4d9e4d4 100644
--- a/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx
+++ b/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx
@@ -1,8 +1,8 @@
 import { classNames } from "@reshaped/headless";
 
-import { useCheckboxGroup } from "components/CheckboxGroup";
-import { useFormControl } from "components/FormControl";
-import { useRadioGroup } from "components/RadioGroup";
+import { useCheckboxGroup } from "@/components/CheckboxGroup";
+import { useFormControl } from "@/components/FormControl";
+import { useRadioGroup } from "@/components/RadioGroup";
 
 import s from "./HiddenInput.module.css";
 
diff --git a/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts b/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts
index 929814ce..dcda1753 100644
--- a/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts
+++ b/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Name of the input element */
diff --git a/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx b/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx
index 9b29960c..8f68dba3 100644
--- a/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx
+++ b/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx
@@ -2,13 +2,13 @@ import { StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Badge from "components/Badge";
-import CheckboxGroup from "components/CheckboxGroup";
-import FormControl from "components/FormControl";
-import HiddenInput from "components/HiddenInput";
-import RadioGroup from "components/RadioGroup";
-import View from "components/View";
-import Example from "utilities/storybook/Example";
+import Badge from "@/components/Badge";
+import CheckboxGroup from "@/components/CheckboxGroup";
+import FormControl from "@/components/FormControl";
+import HiddenInput from "@/components/HiddenInput";
+import RadioGroup from "@/components/RadioGroup";
+import View from "@/components/View";
+import Example from "@/utilities/storybook/Example";
 
 export default {
 	title: "Utility components/HiddenInput",
diff --git a/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx b/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx
index bc331446..8f1dee5d 100644
--- a/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx
+++ b/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import HiddenVisually from "components/HiddenVisually";
-import { Example } from "utilities/storybook";
+import HiddenVisually from "@/components/HiddenVisually";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/HiddenVisually",
diff --git a/packages/reshaped/src/components/Hotkey/Hotkey.tsx b/packages/reshaped/src/components/Hotkey/Hotkey.tsx
index f087e963..f00fb9e4 100644
--- a/packages/reshaped/src/components/Hotkey/Hotkey.tsx
+++ b/packages/reshaped/src/components/Hotkey/Hotkey.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import Text from "components/Text";
+import Text from "@/components/Text";
 
 import s from "./Hotkey.module.css";
 
diff --git a/packages/reshaped/src/components/Hotkey/tests/Hotkey.stories.tsx b/packages/reshaped/src/components/Hotkey/tests/Hotkey.stories.tsx
index 0cbc1dd4..345df398 100644
--- a/packages/reshaped/src/components/Hotkey/tests/Hotkey.stories.tsx
+++ b/packages/reshaped/src/components/Hotkey/tests/Hotkey.stories.tsx
@@ -2,9 +2,9 @@ import { useHotkeys } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import TextField from "components/TextField";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import TextField from "@/components/TextField";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 import Hotkey from "../Hotkey";
 
diff --git a/packages/reshaped/src/components/Icon/Icon.tsx b/packages/reshaped/src/components/Icon/Icon.tsx
index 92c52000..a556122f 100644
--- a/packages/reshaped/src/components/Icon/Icon.tsx
+++ b/packages/reshaped/src/components/Icon/Icon.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { resolveMixin } from "styles/mixin";
+import { resolveMixin } from "@/styles/mixin";
 
 import s from "./Icon.module.css";
 
diff --git a/packages/reshaped/src/components/Icon/Icon.types.ts b/packages/reshaped/src/components/Icon/Icon.types.ts
index 4947a055..0aadbfb0 100644
--- a/packages/reshaped/src/components/Icon/Icon.types.ts
+++ b/packages/reshaped/src/components/Icon/Icon.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Icon svg component or node */
diff --git a/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx b/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx
index e45e58cb..32ec688a 100644
--- a/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx
+++ b/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Icon from "components/Icon";
-import Text from "components/Text";
-import View from "components/View";
-import IconMic from "icons/Mic";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconMic from "@/icons/Mic";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Icon",
diff --git a/packages/reshaped/src/components/Image/Image.tsx b/packages/reshaped/src/components/Image/Image.tsx
index c85db4c3..44e1bef1 100644
--- a/packages/reshaped/src/components/Image/Image.tsx
+++ b/packages/reshaped/src/components/Image/Image.tsx
@@ -3,7 +3,7 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { resolveMixin } from "styles/mixin";
+import { resolveMixin } from "@/styles/mixin";
 
 import s from "./Image.module.css";
 import * as T from "./Image.types";
diff --git a/packages/reshaped/src/components/Image/Image.types.ts b/packages/reshaped/src/components/Image/Image.types.ts
index 524b02fa..d2debb94 100644
--- a/packages/reshaped/src/components/Image/Image.types.ts
+++ b/packages/reshaped/src/components/Image/Image.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as TStyles from "styles/types";
-import type * as G from "types/global";
+import type * as TStyles from "@/styles/types";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Image URL */
diff --git a/packages/reshaped/src/components/Image/tests/Image.stories.tsx b/packages/reshaped/src/components/Image/tests/Image.stories.tsx
index 881a6760..0507f341 100644
--- a/packages/reshaped/src/components/Image/tests/Image.stories.tsx
+++ b/packages/reshaped/src/components/Image/tests/Image.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, Mock, waitFor } from "storybook/test";
 
-import Icon from "components/Icon";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Icon from "@/components/Icon";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 import Image from "../Image";
 
diff --git a/packages/reshaped/src/components/Link/Link.tsx b/packages/reshaped/src/components/Link/Link.tsx
index 157e6fa2..95450a4e 100644
--- a/packages/reshaped/src/components/Link/Link.tsx
+++ b/packages/reshaped/src/components/Link/Link.tsx
@@ -1,8 +1,8 @@
 import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 
-import Actionable, { type ActionableRef } from "components/Actionable";
-import Icon from "components/Icon";
+import Actionable, { type ActionableRef } from "@/components/Actionable";
+import Icon from "@/components/Icon";
 
 import s from "./Link.module.css";
 
diff --git a/packages/reshaped/src/components/Link/Link.types.ts b/packages/reshaped/src/components/Link/Link.types.ts
index ab84d1c9..cf4641e5 100644
--- a/packages/reshaped/src/components/Link/Link.types.ts
+++ b/packages/reshaped/src/components/Link/Link.types.ts
@@ -1,5 +1,5 @@
-import type { ActionableProps } from "components/Actionable";
-import type { IconProps } from "components/Icon";
+import type { ActionableProps } from "@/components/Actionable";
+import type { IconProps } from "@/components/Icon";
 
 export type Props = Pick<
 	ActionableProps,
diff --git a/packages/reshaped/src/components/Link/tests/Link.stories.tsx b/packages/reshaped/src/components/Link/tests/Link.stories.tsx
index 21c8fe94..8bc9d2ba 100644
--- a/packages/reshaped/src/components/Link/tests/Link.stories.tsx
+++ b/packages/reshaped/src/components/Link/tests/Link.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Link from "components/Link";
-import Text from "components/Text";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Link from "@/components/Link";
+import Text from "@/components/Text";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Link",
diff --git a/packages/reshaped/src/components/Loader/Loader.tsx b/packages/reshaped/src/components/Loader/Loader.tsx
index d0d063e9..db103ab5 100644
--- a/packages/reshaped/src/components/Loader/Loader.tsx
+++ b/packages/reshaped/src/components/Loader/Loader.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import { responsiveClassNames } from "utilities/props";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./Loader.module.css";
 
diff --git a/packages/reshaped/src/components/Loader/Loader.types.ts b/packages/reshaped/src/components/Loader/Loader.types.ts
index 23a0dc4f..db6e9f77 100644
--- a/packages/reshaped/src/components/Loader/Loader.types.ts
+++ b/packages/reshaped/src/components/Loader/Loader.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Component size */
diff --git a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx
index ad77659d..f14ee377 100644
--- a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx
+++ b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Loader from "components/Loader";
-import { Example } from "utilities/storybook";
+import Loader from "@/components/Loader";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Loader",
diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.tsx b/packages/reshaped/src/components/MenuItem/MenuItem.tsx
index 8355a362..2bb691c4 100644
--- a/packages/reshaped/src/components/MenuItem/MenuItem.tsx
+++ b/packages/reshaped/src/components/MenuItem/MenuItem.tsx
@@ -1,10 +1,10 @@
 import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 
-import Actionable, { type ActionableRef } from "components/Actionable";
-import Icon from "components/Icon";
-import View from "components/View";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import Actionable, { type ActionableRef } from "@/components/Actionable";
+import Icon from "@/components/Icon";
+import View from "@/components/View";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./MenuItem.module.css";
 
diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.types.ts b/packages/reshaped/src/components/MenuItem/MenuItem.types.ts
index f7e1ca9f..79635c92 100644
--- a/packages/reshaped/src/components/MenuItem/MenuItem.types.ts
+++ b/packages/reshaped/src/components/MenuItem/MenuItem.types.ts
@@ -1,8 +1,8 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ActionableProps } from "components/Actionable";
-import type { IconProps } from "components/Icon";
+import type { ActionableProps } from "@/components/Actionable";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Size = "small" | "medium" | "large";
 
diff --git a/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx b/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx
index 0e7d076c..45b80984 100644
--- a/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx
+++ b/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx
@@ -1,4 +1,4 @@
-import Aligner, { type AlignerProps } from "components/_private/Aligner";
+import Aligner, { type AlignerProps } from "@/components/_private/Aligner";
 
 import s from "./MenuItem.module.css";
 
diff --git a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx
index ae127fbc..862f3f34 100644
--- a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx
+++ b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Hotkey from "components/Hotkey";
-import MenuItem from "components/MenuItem";
-import Text from "components/Text";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example, Placeholder } from "utilities/storybook";
+import Hotkey from "@/components/Hotkey";
+import MenuItem from "@/components/MenuItem";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/MenuItem",
diff --git a/packages/reshaped/src/components/Modal/Modal.tsx b/packages/reshaped/src/components/Modal/Modal.tsx
index d24eff4d..5af03db5 100644
--- a/packages/reshaped/src/components/Modal/Modal.tsx
+++ b/packages/reshaped/src/components/Modal/Modal.tsx
@@ -4,12 +4,12 @@ import { classNames, useHandlerRef } from "@reshaped/headless";
 import { enableScroll, disableScroll } from "@reshaped/headless/internal";
 import React from "react";
 
-import Overlay from "components/Overlay";
-import Text from "components/Text";
-import useElementId from "hooks/useElementId";
-import useResponsiveClientValue from "hooks/useResponsiveClientValue";
-import { resolveMixin } from "styles/mixin";
-import { responsiveVariables, responsiveClassNames } from "utilities/props";
+import Overlay from "@/components/Overlay";
+import Text from "@/components/Text";
+import useElementId from "@/hooks/useElementId";
+import useResponsiveClientValue from "@/hooks/useResponsiveClientValue";
+import { resolveMixin } from "@/styles/mixin";
+import { responsiveVariables, responsiveClassNames } from "@/utilities/props";
 
 import s from "./Modal.module.css";
 
diff --git a/packages/reshaped/src/components/Modal/Modal.types.ts b/packages/reshaped/src/components/Modal/Modal.types.ts
index 0fa30c54..d828c003 100644
--- a/packages/reshaped/src/components/Modal/Modal.types.ts
+++ b/packages/reshaped/src/components/Modal/Modal.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { OverlayProps, OverlayCloseReason } from "components/Overlay";
+import type { OverlayProps, OverlayCloseReason } from "@/components/Overlay";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Context = {
 	id: string;
diff --git a/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx b/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx
index 14c29884..4c4d4b02 100644
--- a/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx
+++ b/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx
@@ -3,16 +3,16 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import Button from "components/Button";
-import Dismissible from "components/Dismissible";
-import DropdownMenu from "components/DropdownMenu";
-import Modal, { type ModalProps } from "components/Modal";
-import Radio from "components/Radio";
-import Switch from "components/Switch";
-import TextField from "components/TextField";
-import View from "components/View";
-import { sleep } from "utilities/helpers";
-import { Example, Placeholder } from "utilities/storybook";
+import Button from "@/components/Button";
+import Dismissible from "@/components/Dismissible";
+import DropdownMenu from "@/components/DropdownMenu";
+import Modal, { type ModalProps } from "@/components/Modal";
+import Radio from "@/components/Radio";
+import Switch from "@/components/Switch";
+import TextField from "@/components/TextField";
+import View from "@/components/View";
+import { sleep } from "@/utilities/helpers";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Modal",
diff --git a/packages/reshaped/src/components/NumberField/NumberField.types.ts b/packages/reshaped/src/components/NumberField/NumberField.types.ts
index bc3cb10a..ec44b888 100644
--- a/packages/reshaped/src/components/NumberField/NumberField.types.ts
+++ b/packages/reshaped/src/components/NumberField/NumberField.types.ts
@@ -1,5 +1,5 @@
-import type { TextFieldBaseProps } from "components/TextField";
-import type * as G from "types/global";
+import type { TextFieldBaseProps } from "@/components/TextField";
+import type * as G from "@/types/global";
 
 export type BaseProps = Omit<
 	TextFieldBaseProps,
diff --git a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx
index 53893652..5c1a8a10 100644
--- a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx
+++ b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx
@@ -3,17 +3,17 @@
 import { useHotkeys, useHandlerRef } from "@reshaped/headless";
 import React from "react";
 
-import Actionable from "components/Actionable";
-import { useFormControl } from "components/FormControl";
-import Icon from "components/Icon";
-import TextField, { TextFieldProps } from "components/TextField";
-import * as keys from "constants/keys";
-import useElementId from "hooks/useElementId";
-import IconChevronDown from "icons/ChevronDown";
-import IconChevronUp from "icons/ChevronUp";
-import IconMinus from "icons/Minus";
-import IconPlus from "icons/Plus";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import Actionable from "@/components/Actionable";
+import { useFormControl } from "@/components/FormControl";
+import Icon from "@/components/Icon";
+import TextField, { TextFieldProps } from "@/components/TextField";
+import * as keys from "@/constants/keys";
+import useElementId from "@/hooks/useElementId";
+import IconChevronDown from "@/icons/ChevronDown";
+import IconChevronUp from "@/icons/ChevronUp";
+import IconMinus from "@/icons/Minus";
+import IconPlus from "@/icons/Plus";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./NumberField.module.css";
 
diff --git a/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx b/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx
index 0dea82e1..0370457c 100644
--- a/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx
+++ b/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, Mock, userEvent } from "storybook/test";
 
-import FormControl from "components/FormControl";
-import NumberField from "components/NumberField";
-import { Example } from "utilities/storybook";
+import FormControl from "@/components/FormControl";
+import NumberField from "@/components/NumberField";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/NumberField",
diff --git a/packages/reshaped/src/components/Overlay/Overlay.tsx b/packages/reshaped/src/components/Overlay/Overlay.tsx
index c166b38f..a0190739 100644
--- a/packages/reshaped/src/components/Overlay/Overlay.tsx
+++ b/packages/reshaped/src/components/Overlay/Overlay.tsx
@@ -12,9 +12,9 @@ import { classNames } from "@reshaped/headless";
 import { type FocusableElement } from "@reshaped/headless/internal";
 import React from "react";
 
-import Portal from "components/_private/Portal";
-import useIsDismissible from "hooks/_private/useIsDismissible";
-import { onNextFrame } from "utilities/animation";
+import Portal from "@/components/_private/Portal";
+import useIsDismissible from "@/hooks/_private/useIsDismissible";
+import { onNextFrame } from "@/utilities/animation";
 
 import s from "./Overlay.module.css";
 
diff --git a/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx b/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx
index b18c6bd5..ab00774c 100644
--- a/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx
+++ b/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx
@@ -3,10 +3,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import Button from "components/Button";
-import Overlay from "components/Overlay";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Overlay from "@/components/Overlay";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Overlay",
diff --git a/packages/reshaped/src/components/Pagination/PaginationControlled.tsx b/packages/reshaped/src/components/Pagination/PaginationControlled.tsx
index 89afe31c..d81d5047 100644
--- a/packages/reshaped/src/components/Pagination/PaginationControlled.tsx
+++ b/packages/reshaped/src/components/Pagination/PaginationControlled.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import Button from "components/Button";
-import View from "components/View";
-import IconChevronLeft from "icons/ChevronLeft";
-import IconChevronRight from "icons/ChevronRight";
-import { range } from "utilities/helpers";
+import Button from "@/components/Button";
+import View from "@/components/View";
+import IconChevronLeft from "@/icons/ChevronLeft";
+import IconChevronRight from "@/icons/ChevronRight";
+import { range } from "@/utilities/helpers";
 
 import s from "./Pagination.module.css";
 
diff --git a/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx b/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx
index 363561d3..acc32501 100644
--- a/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx
+++ b/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, within } from "storybook/test";
 
-import Pagination from "components/Pagination";
-import { Example } from "utilities/storybook";
+import Pagination from "@/components/Pagination";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Pagination",
diff --git a/packages/reshaped/src/components/PinField/PinField.types.ts b/packages/reshaped/src/components/PinField/PinField.types.ts
index 74619382..a802bded 100644
--- a/packages/reshaped/src/components/PinField/PinField.types.ts
+++ b/packages/reshaped/src/components/PinField/PinField.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Size = "small" | "medium" | "large" | "xlarge";
 
diff --git a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx
index 2f4c1b30..7df98409 100644
--- a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx
+++ b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx
@@ -3,12 +3,12 @@
 import { useHotkeys } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import Text from "components/Text";
-import View from "components/View";
-import * as keys from "constants/keys";
-import { onNextFrame } from "utilities/animation";
-import { responsivePropDependency } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import * as keys from "@/constants/keys";
+import { onNextFrame } from "@/utilities/animation";
+import { responsivePropDependency } from "@/utilities/props";
 
 import {
 	regExpNumericChar,
diff --git a/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx b/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx
index bb98e2b3..2036a4a3 100644
--- a/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx
+++ b/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, waitFor } from "storybook/test";
 
-import FormControl from "components/FormControl";
-import PinField from "components/PinField";
-import { Example } from "utilities/storybook";
+import FormControl from "@/components/FormControl";
+import PinField from "@/components/PinField";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/PinField",
diff --git a/packages/reshaped/src/components/Popover/Popover.tsx b/packages/reshaped/src/components/Popover/Popover.tsx
index 15fdac08..4453561e 100644
--- a/packages/reshaped/src/components/Popover/Popover.tsx
+++ b/packages/reshaped/src/components/Popover/Popover.tsx
@@ -1,8 +1,8 @@
 import { classNames } from "@reshaped/headless";
 
-import Dismissible, { type DismissibleProps } from "components/Dismissible";
-import Flyout, { useFlyoutContext, type FlyoutProps } from "components/Flyout";
-import { resolveMixin } from "styles/mixin";
+import Dismissible, { type DismissibleProps } from "@/components/Dismissible";
+import Flyout, { useFlyoutContext, type FlyoutProps } from "@/components/Flyout";
+import { resolveMixin } from "@/styles/mixin";
 
 import s from "./Popover.module.css";
 
diff --git a/packages/reshaped/src/components/Popover/Popover.types.ts b/packages/reshaped/src/components/Popover/Popover.types.ts
index a985e808..a4bc73db 100644
--- a/packages/reshaped/src/components/Popover/Popover.types.ts
+++ b/packages/reshaped/src/components/Popover/Popover.types.ts
@@ -1,4 +1,4 @@
-import type { FlyoutProps, FlyoutInstance } from "components/Flyout";
+import type { FlyoutProps, FlyoutInstance } from "@/components/Flyout";
 import type React from "react";
 
 export type Instance = FlyoutInstance;
diff --git a/packages/reshaped/src/components/Popover/index.ts b/packages/reshaped/src/components/Popover/index.ts
index ad012e57..81595667 100644
--- a/packages/reshaped/src/components/Popover/index.ts
+++ b/packages/reshaped/src/components/Popover/index.ts
@@ -1,4 +1,4 @@
-import Flyout from "components/Flyout";
+import Flyout from "@/components/Flyout";
 
 import Popover, { PopoverDismissible } from "./Popover";
 
diff --git a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx
index 198156b9..37e598b0 100644
--- a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx
+++ b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx
@@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite";
 import { useState, useId } from "react";
 import { expect, fn, userEvent, within, waitFor } from "storybook/test";
 
-import Button from "components/Button";
-import MenuItem from "components/MenuItem";
-import Popover, { type PopoverProps } from "components/Popover";
-import ScrollArea from "components/ScrollArea";
-import Tooltip from "components/Tooltip";
-import View from "components/View";
-import { sleep } from "utilities/helpers";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import MenuItem from "@/components/MenuItem";
+import Popover, { type PopoverProps } from "@/components/Popover";
+import ScrollArea from "@/components/ScrollArea";
+import Tooltip from "@/components/Tooltip";
+import View from "@/components/View";
+import { sleep } from "@/utilities/helpers";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Popover",
diff --git a/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx b/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx
index 43bde510..0887676b 100644
--- a/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx
+++ b/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx
@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect } from "storybook/test";
 
-import Button from "components/Button";
-import Progress from "components/Progress";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Progress from "@/components/Progress";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Progress",
diff --git a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx
index eeafea3b..ca0be467 100644
--- a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx
+++ b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx
@@ -2,12 +2,12 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect } from "storybook/test";
 
-import Button from "components/Button";
-import ProgressIndicator from "components/ProgressIndicator";
-import Scrim from "components/Scrim";
-import Text from "components/Text";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import ProgressIndicator from "@/components/ProgressIndicator";
+import Scrim from "@/components/Scrim";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/ProgressIndicator",
diff --git a/packages/reshaped/src/components/Radio/Radio.tsx b/packages/reshaped/src/components/Radio/Radio.tsx
index 8abd8aaa..a2a533d6 100644
--- a/packages/reshaped/src/components/Radio/Radio.tsx
+++ b/packages/reshaped/src/components/Radio/Radio.tsx
@@ -3,11 +3,11 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import HiddenInput from "components/HiddenInput";
-import { useRadioGroup } from "components/RadioGroup";
-import Text from "components/Text";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import HiddenInput from "@/components/HiddenInput";
+import { useRadioGroup } from "@/components/RadioGroup";
+import Text from "@/components/Text";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./Radio.module.css";
 
diff --git a/packages/reshaped/src/components/Radio/Radio.types.ts b/packages/reshaped/src/components/Radio/Radio.types.ts
index 7ee86be5..6991cb04 100644
--- a/packages/reshaped/src/components/Radio/Radio.types.ts
+++ b/packages/reshaped/src/components/Radio/Radio.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Node for inserting children */
diff --git a/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx b/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx
index db030574..128edb58 100644
--- a/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx
+++ b/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Radio from "components/Radio";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Radio from "@/components/Radio";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Radio",
diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts b/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts
index 4f4c04c8..93ebadc8 100644
--- a/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts
+++ b/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { RadioProps } from "components/Radio";
+import type { RadioProps } from "@/components/Radio";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Unique identifier for the radio group */
diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx b/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx
index e53004f4..54cf8311 100644
--- a/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx
+++ b/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx
@@ -3,7 +3,7 @@
 import Context from "./RadioGroup.context";
 
 import type * as T from "./RadioGroup.types";
-import type * as TRadio from "components/Radio/Radio.types";
+import type * as TRadio from "@/components/Radio/Radio.types";
 
 const RadioGroupControlled: React.FC<T.ControlledProps> = (props) => {
 	const { onChange, name, disabled, value, children, hasError } = props;
diff --git a/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx b/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx
index 9afc0e17..19c488c4 100644
--- a/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx
+++ b/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Radio from "components/Radio";
-import RadioGroup from "components/RadioGroup";
+import Radio from "@/components/Radio";
+import RadioGroup from "@/components/RadioGroup";
 
 export default {
 	title: "Components/RadioGroup",
diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.tsx b/packages/reshaped/src/components/Reshaped/Reshaped.tsx
index 1e5c9cbe..1c836e7c 100644
--- a/packages/reshaped/src/components/Reshaped/Reshaped.tsx
+++ b/packages/reshaped/src/components/Reshaped/Reshaped.tsx
@@ -3,10 +3,10 @@
 import { Reshaped as HeadlessReshaped, classNames } from "@reshaped/headless";
 import React from "react";
 
-import { GlobalColorMode, PrivateTheme } from "components/Theme";
-import { useGlobalColorMode } from "components/Theme/useTheme";
-import { ToastProvider } from "components/Toast";
-import { SingletonViewportProvider } from "hooks/_private/useSingletonViewport";
+import { GlobalColorMode, PrivateTheme } from "@/components/Theme";
+import { useGlobalColorMode } from "@/components/Theme/useTheme";
+import { ToastProvider } from "@/components/Toast";
+import { SingletonViewportProvider } from "@/hooks/_private/useSingletonViewport";
 
 import s from "./Reshaped.module.css";
 
diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.types.ts b/packages/reshaped/src/components/Reshaped/Reshaped.types.ts
index c49fe52f..207ebff8 100644
--- a/packages/reshaped/src/components/Reshaped/Reshaped.types.ts
+++ b/packages/reshaped/src/components/Reshaped/Reshaped.types.ts
@@ -1,8 +1,8 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { GlobalColorModeProps, ThemeProps } from "components/Theme";
-import type { ToastProviderProps } from "components/Toast";
+import type { GlobalColorModeProps, ThemeProps } from "@/components/Theme";
+import type { ToastProviderProps } from "@/components/Toast";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Node for inserting children */
diff --git a/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx b/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx
index 74fa352d..38b1f145 100644
--- a/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx
+++ b/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx
@@ -2,12 +2,12 @@ import { StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import { useTheme } from "components/Theme";
+import Button from "@/components/Button";
+import { useTheme } from "@/components/Theme";
 
 import Reshaped from "../Reshaped";
 
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export default {
 	title: "Utility components/Reshaped",
diff --git a/packages/reshaped/src/components/Resizable/Resizable.tsx b/packages/reshaped/src/components/Resizable/Resizable.tsx
index 0958747c..e5271add 100644
--- a/packages/reshaped/src/components/Resizable/Resizable.tsx
+++ b/packages/reshaped/src/components/Resizable/Resizable.tsx
@@ -3,7 +3,7 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import View from "components/View";
+import View from "@/components/View";
 
 import s from "./Resizable.module.css";
 import { ResizableHandleContext } from "./ResizableHandle";
diff --git a/packages/reshaped/src/components/Resizable/Resizable.types.ts b/packages/reshaped/src/components/Resizable/Resizable.types.ts
index 81041334..868a8d1e 100644
--- a/packages/reshaped/src/components/Resizable/Resizable.types.ts
+++ b/packages/reshaped/src/components/Resizable/Resizable.types.ts
@@ -1,5 +1,5 @@
-import type { ViewProps } from "components/View";
-import type { UseDragCallbackArgs } from "hooks/_private/useDrag";
+import type { ViewProps } from "@/components/View";
+import type { UseDragCallbackArgs } from "@/hooks/_private/useDrag";
 import type React from "react";
 
 export type Props = {
diff --git a/packages/reshaped/src/components/Resizable/ResizableHandle.tsx b/packages/reshaped/src/components/Resizable/ResizableHandle.tsx
index 373131e4..a31226e5 100644
--- a/packages/reshaped/src/components/Resizable/ResizableHandle.tsx
+++ b/packages/reshaped/src/components/Resizable/ResizableHandle.tsx
@@ -3,8 +3,8 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import View from "components/View";
-import useDrag from "hooks/_private/useDrag";
+import View from "@/components/View";
+import useDrag from "@/hooks/_private/useDrag";
 
 import s from "./Resizable.module.css";
 
diff --git a/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx b/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx
index 81443e6c..d78fabf7 100644
--- a/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx
+++ b/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Button from "components/Button";
-import Resizable from "components/Resizable";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Resizable from "@/components/Resizable";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Resizable",
diff --git a/packages/reshaped/src/components/Scrim/Scrim.tsx b/packages/reshaped/src/components/Scrim/Scrim.tsx
index 010265c7..61f58f10 100644
--- a/packages/reshaped/src/components/Scrim/Scrim.tsx
+++ b/packages/reshaped/src/components/Scrim/Scrim.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import View from "components/View";
+import View from "@/components/View";
 
 import s from "./Scrim.module.css";
 
diff --git a/packages/reshaped/src/components/Scrim/Scrim.types.ts b/packages/reshaped/src/components/Scrim/Scrim.types.ts
index 76308ecc..df1503a8 100644
--- a/packages/reshaped/src/components/Scrim/Scrim.types.ts
+++ b/packages/reshaped/src/components/Scrim/Scrim.types.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ViewProps } from "components/View";
+import type { ViewProps } from "@/components/View";
 
 export type Props = {
 	/** Node for inserting content */
diff --git a/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx b/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx
index 96b5bc05..f2496733 100644
--- a/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx
+++ b/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx
@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Badge from "components/Badge";
-import Scrim from "components/Scrim";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Badge from "@/components/Badge";
+import Scrim from "@/components/Scrim";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Scrim",
diff --git a/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx b/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx
index 13ef020e..63dc8d82 100644
--- a/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx
+++ b/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx
@@ -4,7 +4,7 @@ import { classNames, useIsomorphicLayoutEffect, useHandlerRef } from "@reshaped/
 import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React, { forwardRef } from "react";
 
-import { resolveMixin } from "styles/mixin";
+import { resolveMixin } from "@/styles/mixin";
 
 import s from "./ScrollArea.module.css";
 
diff --git a/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts b/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts
index 1e7f6fd3..ded65fb4 100644
--- a/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts
+++ b/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Coordinates } from "@reshaped/headless/internal";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Node for inserting content */
diff --git a/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx b/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx
index 0c4101f0..adb48a56 100644
--- a/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx
+++ b/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx
@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { userEvent, expect, waitFor, fn, Mock } from "storybook/test";
 
-import Button from "components/Button";
-import ScrollArea from "components/ScrollArea";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import ScrollArea from "@/components/ScrollArea";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/ScrollArea",
diff --git a/packages/reshaped/src/components/Select/Select.types.ts b/packages/reshaped/src/components/Select/Select.types.ts
index 190a038f..333ea583 100644
--- a/packages/reshaped/src/components/Select/Select.types.ts
+++ b/packages/reshaped/src/components/Select/Select.types.ts
@@ -1,11 +1,11 @@
 import React from "react";
 
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ActionableProps } from "components/Actionable";
-import type { DropdownMenuProps } from "components/DropdownMenu";
-import type { IconProps } from "components/Icon";
-import type { MenuItemProps } from "components/MenuItem";
-import type * as G from "types/global";
+import type { ActionableProps } from "@/components/Actionable";
+import type { DropdownMenuProps } from "@/components/DropdownMenu";
+import type { IconProps } from "@/components/Icon";
+import type { MenuItemProps } from "@/components/MenuItem";
+import type * as G from "@/types/global";
 
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 
diff --git a/packages/reshaped/src/components/Select/SelectCustomControlled.tsx b/packages/reshaped/src/components/Select/SelectCustomControlled.tsx
index f011ce62..5ed71a3f 100644
--- a/packages/reshaped/src/components/Select/SelectCustomControlled.tsx
+++ b/packages/reshaped/src/components/Select/SelectCustomControlled.tsx
@@ -2,11 +2,11 @@
 
 import React from "react";
 
-import DropdownMenu from "components/DropdownMenu";
-import Icon from "components/Icon";
-import View from "components/View";
-import CheckmarkIcon from "icons/Checkmark";
-import { responsivePropDependency } from "utilities/props";
+import DropdownMenu from "@/components/DropdownMenu";
+import Icon from "@/components/Icon";
+import View from "@/components/View";
+import CheckmarkIcon from "@/icons/Checkmark";
+import { responsivePropDependency } from "@/utilities/props";
 
 import SelectGroup from "./SelectGroup";
 import SelectOption from "./SelectOption";
diff --git a/packages/reshaped/src/components/Select/SelectEndContent.tsx b/packages/reshaped/src/components/Select/SelectEndContent.tsx
index d478ed3b..4c44effa 100644
--- a/packages/reshaped/src/components/Select/SelectEndContent.tsx
+++ b/packages/reshaped/src/components/Select/SelectEndContent.tsx
@@ -1,6 +1,6 @@
-import Icon from "components/Icon";
-import IconArrow from "icons/ChevronVertical";
-import { responsivePropDependency } from "utilities/props";
+import Icon from "@/components/Icon";
+import IconArrow from "@/icons/ChevronVertical";
+import { responsivePropDependency } from "@/utilities/props";
 
 import s from "./Select.module.css";
 
diff --git a/packages/reshaped/src/components/Select/SelectGroup.tsx b/packages/reshaped/src/components/Select/SelectGroup.tsx
index 81bda7cf..a0d189dc 100644
--- a/packages/reshaped/src/components/Select/SelectGroup.tsx
+++ b/packages/reshaped/src/components/Select/SelectGroup.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import Text from "components/Text";
-import View from "components/View";
+import Text from "@/components/Text";
+import View from "@/components/View";
 
 import s from "./Select.module.css";
 
diff --git a/packages/reshaped/src/components/Select/SelectOption.tsx b/packages/reshaped/src/components/Select/SelectOption.tsx
index a0e2ab5f..9e4e8060 100644
--- a/packages/reshaped/src/components/Select/SelectOption.tsx
+++ b/packages/reshaped/src/components/Select/SelectOption.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import DropdownMenu from "components/DropdownMenu";
+import DropdownMenu from "@/components/DropdownMenu";
 
 import s from "./Select.module.css";
 
diff --git a/packages/reshaped/src/components/Select/SelectRoot.tsx b/packages/reshaped/src/components/Select/SelectRoot.tsx
index b1ee8d2c..3696484a 100644
--- a/packages/reshaped/src/components/Select/SelectRoot.tsx
+++ b/packages/reshaped/src/components/Select/SelectRoot.tsx
@@ -3,9 +3,9 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import useElementId from "hooks/useElementId";
-import { responsiveClassNames } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import useElementId from "@/hooks/useElementId";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./Select.module.css";
 
diff --git a/packages/reshaped/src/components/Select/SelectStartContent.tsx b/packages/reshaped/src/components/Select/SelectStartContent.tsx
index 094074b0..e450d9f7 100644
--- a/packages/reshaped/src/components/Select/SelectStartContent.tsx
+++ b/packages/reshaped/src/components/Select/SelectStartContent.tsx
@@ -1,5 +1,5 @@
-import Icon from "components/Icon";
-import { responsivePropDependency } from "utilities/props";
+import Icon from "@/components/Icon";
+import { responsivePropDependency } from "@/utilities/props";
 
 import s from "./Select.module.css";
 
diff --git a/packages/reshaped/src/components/Select/SelectTrigger.tsx b/packages/reshaped/src/components/Select/SelectTrigger.tsx
index 50bea105..85728f8b 100644
--- a/packages/reshaped/src/components/Select/SelectTrigger.tsx
+++ b/packages/reshaped/src/components/Select/SelectTrigger.tsx
@@ -2,8 +2,8 @@
 
 import React from "react";
 
-import Actionable from "components/Actionable";
-import Text from "components/Text";
+import Actionable from "@/components/Actionable";
+import Text from "@/components/Text";
 
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent";
diff --git a/packages/reshaped/src/components/Select/tests/Select.stories.tsx b/packages/reshaped/src/components/Select/tests/Select.stories.tsx
index 989f619b..153fd08c 100644
--- a/packages/reshaped/src/components/Select/tests/Select.stories.tsx
+++ b/packages/reshaped/src/components/Select/tests/Select.stories.tsx
@@ -3,14 +3,14 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, Mock, userEvent, within } from "storybook/test";
 
-import Badge from "components/Badge";
-import FormControl from "components/FormControl";
-import MenuItem from "components/MenuItem";
-import Modal from "components/Modal";
-import Select, { SelectProps } from "components/Select";
-import Text from "components/Text";
-import IconZap from "icons/Zap";
-import { Example, Placeholder } from "utilities/storybook";
+import Badge from "@/components/Badge";
+import FormControl from "@/components/FormControl";
+import MenuItem from "@/components/MenuItem";
+import Modal from "@/components/Modal";
+import Select, { SelectProps } from "@/components/Select";
+import Text from "@/components/Text";
+import IconZap from "@/icons/Zap";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Select",
diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.tsx b/packages/reshaped/src/components/Skeleton/Skeleton.tsx
index 919f77b5..2e1d3632 100644
--- a/packages/reshaped/src/components/Skeleton/Skeleton.tsx
+++ b/packages/reshaped/src/components/Skeleton/Skeleton.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/headless";
 
-import View from "components/View";
+import View from "@/components/View";
 
 import s from "./Skeleton.module.css";
 import * as T from "./Skeleton.types";
diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.types.ts b/packages/reshaped/src/components/Skeleton/Skeleton.types.ts
index 5ed19b4a..e2931b42 100644
--- a/packages/reshaped/src/components/Skeleton/Skeleton.types.ts
+++ b/packages/reshaped/src/components/Skeleton/Skeleton.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { ViewProps } from "components/View";
+import type { ViewProps } from "@/components/View";
 
 export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
 	/** Additional classname for the root element */
diff --git a/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx b/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx
index 99bb1688..b59b12b1 100644
--- a/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx
+++ b/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Skeleton from "components/Skeleton";
-import { Example } from "utilities/storybook";
+import Skeleton from "@/components/Skeleton";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Skeleton",
diff --git a/packages/reshaped/src/components/Slider/SliderControlled.tsx b/packages/reshaped/src/components/Slider/SliderControlled.tsx
index aba7b2a2..c1f65f19 100644
--- a/packages/reshaped/src/components/Slider/SliderControlled.tsx
+++ b/packages/reshaped/src/components/Slider/SliderControlled.tsx
@@ -4,8 +4,8 @@ import { classNames, useRTL, useHandlerRef } from "@reshaped/headless";
 import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import useElementId from "hooks/useElementId";
+import { useFormControl } from "@/components/FormControl";
+import useElementId from "@/hooks/useElementId";
 
 import s from "./Slider.module.css";
 import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities";
diff --git a/packages/reshaped/src/components/Slider/SliderThumb.tsx b/packages/reshaped/src/components/Slider/SliderThumb.tsx
index 0244397b..e6823f4e 100644
--- a/packages/reshaped/src/components/Slider/SliderThumb.tsx
+++ b/packages/reshaped/src/components/Slider/SliderThumb.tsx
@@ -3,8 +3,8 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import Text from "components/Text";
-import Theme from "components/Theme";
+import Text from "@/components/Text";
+import Theme from "@/components/Theme";
 
 import s from "./Slider.module.css";
 import { getPrecision } from "./Slider.utilities";
diff --git a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx
index bdafa5f8..78872a82 100644
--- a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx
+++ b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx
@@ -3,10 +3,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fireEvent, fn, Mock } from "storybook/test";
 
-import Modal from "components/Modal";
-import Slider from "components/Slider";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Modal from "@/components/Modal";
+import Slider from "@/components/Slider";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Slider",
diff --git a/packages/reshaped/src/components/Stepper/Stepper.tsx b/packages/reshaped/src/components/Stepper/Stepper.tsx
index 6876c085..a2276353 100644
--- a/packages/reshaped/src/components/Stepper/Stepper.tsx
+++ b/packages/reshaped/src/components/Stepper/Stepper.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 
-import Expandable from "components/_private/Expandable";
-import Divider from "components/Divider";
-import Hidden from "components/Hidden";
-import Icon from "components/Icon";
-import Text from "components/Text";
-import View from "components/View";
-import IconCheckmark from "icons/Checkmark";
-import { responsivePropDependency } from "utilities/props";
+import Expandable from "@/components/_private/Expandable";
+import Divider from "@/components/Divider";
+import Hidden from "@/components/Hidden";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconCheckmark from "@/icons/Checkmark";
+import { responsivePropDependency } from "@/utilities/props";
 
 import s from "./Stepper.module.css";
 
diff --git a/packages/reshaped/src/components/Stepper/Stepper.types.ts b/packages/reshaped/src/components/Stepper/Stepper.types.ts
index 3b70bbe4..551d7b0b 100644
--- a/packages/reshaped/src/components/Stepper/Stepper.types.ts
+++ b/packages/reshaped/src/components/Stepper/Stepper.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Props = {
 	/** Id of the item to display as active */
diff --git a/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx b/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx
index 693eb975..8963bc6e 100644
--- a/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx
+++ b/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx
@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect } from "storybook/test";
 
-import Button from "components/Button";
-import Stepper from "components/Stepper";
-import View from "components/View";
-import { Example, Placeholder } from "utilities/storybook";
+import Button from "@/components/Button";
+import Stepper from "@/components/Stepper";
+import View from "@/components/View";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Stepper",
diff --git a/packages/reshaped/src/components/Switch/Switch.tsx b/packages/reshaped/src/components/Switch/Switch.tsx
index 8270779e..a778699a 100644
--- a/packages/reshaped/src/components/Switch/Switch.tsx
+++ b/packages/reshaped/src/components/Switch/Switch.tsx
@@ -3,10 +3,10 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import Text from "components/Text";
-import useElementId from "hooks/useElementId";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import Text from "@/components/Text";
+import useElementId from "@/hooks/useElementId";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./Switch.module.css";
 
diff --git a/packages/reshaped/src/components/Switch/Switch.types.ts b/packages/reshaped/src/components/Switch/Switch.types.ts
index 6c3fb2bc..79e2d95e 100644
--- a/packages/reshaped/src/components/Switch/Switch.types.ts
+++ b/packages/reshaped/src/components/Switch/Switch.types.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type BaseProps = {
 	/** Node for inserting children */
diff --git a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx
index 9b126dde..91f3f220 100644
--- a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx
+++ b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx
@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Switch from "components/Switch";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Switch from "@/components/Switch";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Switch",
diff --git a/packages/reshaped/src/components/Table/Table.tsx b/packages/reshaped/src/components/Table/Table.tsx
index 4f69139f..d263457f 100644
--- a/packages/reshaped/src/components/Table/Table.tsx
+++ b/packages/reshaped/src/components/Table/Table.tsx
@@ -3,9 +3,9 @@
 import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 
-import useFadeSide from "hooks/_private/useFadeSide";
-import { resolveMixin } from "styles/mixin";
-import { responsiveVariables } from "utilities/props";
+import useFadeSide from "@/hooks/_private/useFadeSide";
+import { resolveMixin } from "@/styles/mixin";
+import { responsiveVariables } from "@/utilities/props";
 
 import s from "./Table.module.css";
 
diff --git a/packages/reshaped/src/components/Table/tests/Table.stories.tsx b/packages/reshaped/src/components/Table/tests/Table.stories.tsx
index acb3a004..433fe26f 100644
--- a/packages/reshaped/src/components/Table/tests/Table.stories.tsx
+++ b/packages/reshaped/src/components/Table/tests/Table.stories.tsx
@@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect } from "storybook/test";
 
-import Card from "components/Card";
-import Checkbox from "components/Checkbox";
-import Table from "components/Table";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Card from "@/components/Card";
+import Checkbox from "@/components/Checkbox";
+import Table from "@/components/Table";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Table",
diff --git a/packages/reshaped/src/components/Tabs/Tabs.types.ts b/packages/reshaped/src/components/Tabs/Tabs.types.ts
index f65ab41d..93d92b91 100644
--- a/packages/reshaped/src/components/Tabs/Tabs.types.ts
+++ b/packages/reshaped/src/components/Tabs/Tabs.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { IconProps } from "components/Icon";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
 
 export type SelectionState = {
diff --git a/packages/reshaped/src/components/Tabs/TabsControlled.tsx b/packages/reshaped/src/components/Tabs/TabsControlled.tsx
index a4eacd54..0919c7da 100644
--- a/packages/reshaped/src/components/Tabs/TabsControlled.tsx
+++ b/packages/reshaped/src/components/Tabs/TabsControlled.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import useElementId from "hooks/useElementId";
+import useElementId from "@/hooks/useElementId";
 
 import { TabsProvider } from "./TabsContext";
 
diff --git a/packages/reshaped/src/components/Tabs/TabsItem.tsx b/packages/reshaped/src/components/Tabs/TabsItem.tsx
index e405a826..bfd7abe0 100644
--- a/packages/reshaped/src/components/Tabs/TabsItem.tsx
+++ b/packages/reshaped/src/components/Tabs/TabsItem.tsx
@@ -4,10 +4,10 @@ import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import { findParent } from "@reshaped/headless/internal";
 import React from "react";
 
-import Actionable, { type ActionableRef } from "components/Actionable";
-import HiddenInput from "components/HiddenInput";
-import Icon from "components/Icon";
-import Text from "components/Text";
+import Actionable, { type ActionableRef } from "@/components/Actionable";
+import HiddenInput from "@/components/HiddenInput";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
 
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext";
diff --git a/packages/reshaped/src/components/Tabs/TabsList.tsx b/packages/reshaped/src/components/Tabs/TabsList.tsx
index d1c245d9..6a4c2d1d 100644
--- a/packages/reshaped/src/components/Tabs/TabsList.tsx
+++ b/packages/reshaped/src/components/Tabs/TabsList.tsx
@@ -8,11 +8,11 @@ import {
 } from "@reshaped/headless";
 import React from "react";
 
-import Actionable from "components/Actionable";
-import Icon from "components/Icon";
-import useFadeSide from "hooks/_private/useFadeSide";
-import IconChevronLeft from "icons/ChevronLeft";
-import IconChevronRight from "icons/ChevronRight";
+import Actionable from "@/components/Actionable";
+import Icon from "@/components/Icon";
+import useFadeSide from "@/hooks/_private/useFadeSide";
+import IconChevronLeft from "@/icons/ChevronLeft";
+import IconChevronRight from "@/icons/ChevronRight";
 
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext";
diff --git a/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx b/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx
index c49ffb57..9d85e9b3 100644
--- a/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx
+++ b/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx
@@ -2,13 +2,13 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import Button from "components/Button";
-import ScrollArea from "components/ScrollArea";
-import Tabs from "components/Tabs";
-import Text from "components/Text";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import ScrollArea from "@/components/ScrollArea";
+import Tabs from "@/components/Tabs";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Tabs",
diff --git a/packages/reshaped/src/components/Text/Text.tsx b/packages/reshaped/src/components/Text/Text.tsx
index b8aac8f3..42588900 100644
--- a/packages/reshaped/src/components/Text/Text.tsx
+++ b/packages/reshaped/src/components/Text/Text.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@reshaped/headless";
 
-import { resolveMixin } from "styles/mixin";
-import { responsiveClassNames } from "utilities/props";
+import { resolveMixin } from "@/styles/mixin";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./Text.module.css";
 
diff --git a/packages/reshaped/src/components/Text/Text.types.ts b/packages/reshaped/src/components/Text/Text.types.ts
index 3e14e35b..acb08951 100644
--- a/packages/reshaped/src/components/Text/Text.types.ts
+++ b/packages/reshaped/src/components/Text/Text.types.ts
@@ -1,6 +1,6 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export type Variant =
 	| "title-1"
diff --git a/packages/reshaped/src/components/Text/tests/Text.stories.tsx b/packages/reshaped/src/components/Text/tests/Text.stories.tsx
index c992e37f..613fac44 100644
--- a/packages/reshaped/src/components/Text/tests/Text.stories.tsx
+++ b/packages/reshaped/src/components/Text/tests/Text.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Text from "components/Text";
-import { Example } from "utilities/storybook";
+import Text from "@/components/Text";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Text",
diff --git a/packages/reshaped/src/components/TextArea/TextArea.tsx b/packages/reshaped/src/components/TextArea/TextArea.tsx
index dca3516b..b9de53a1 100644
--- a/packages/reshaped/src/components/TextArea/TextArea.tsx
+++ b/packages/reshaped/src/components/TextArea/TextArea.tsx
@@ -3,9 +3,9 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import useElementId from "hooks/useElementId";
-import { responsiveClassNames } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import useElementId from "@/hooks/useElementId";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./TextArea.module.css";
 
diff --git a/packages/reshaped/src/components/TextArea/TextArea.types.ts b/packages/reshaped/src/components/TextArea/TextArea.types.ts
index 18f1609d..fc717885 100644
--- a/packages/reshaped/src/components/TextArea/TextArea.types.ts
+++ b/packages/reshaped/src/components/TextArea/TextArea.types.ts
@@ -1,8 +1,8 @@
 import React from "react";
 
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { FormControlProps } from "components/FormControl";
-import type * as G from "types/global";
+import type { FormControlProps } from "@/components/FormControl";
+import type * as G from "@/types/global";
 
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 
diff --git a/packages/reshaped/src/components/TextArea/index.ts b/packages/reshaped/src/components/TextArea/index.ts
index 4550c05e..abf456b8 100644
--- a/packages/reshaped/src/components/TextArea/index.ts
+++ b/packages/reshaped/src/components/TextArea/index.ts
@@ -1,4 +1,4 @@
-import Aligner from "components/_private/Aligner";
+import Aligner from "@/components/_private/Aligner";
 
 import TextArea from "./TextArea";
 
diff --git a/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx b/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx
index 2dcedc45..9755ffac 100644
--- a/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx
+++ b/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import FormControl from "components/FormControl";
-import Text from "components/Text";
-import TextArea from "components/TextArea";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import FormControl from "@/components/FormControl";
+import Text from "@/components/Text";
+import TextArea from "@/components/TextArea";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/TextArea",
diff --git a/packages/reshaped/src/components/TextField/TextField.tsx b/packages/reshaped/src/components/TextField/TextField.tsx
index edf0d875..b1a37ed8 100644
--- a/packages/reshaped/src/components/TextField/TextField.tsx
+++ b/packages/reshaped/src/components/TextField/TextField.tsx
@@ -3,10 +3,10 @@
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { useFormControl } from "components/FormControl";
-import Icon from "components/Icon";
-import useElementId from "hooks/useElementId";
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { useFormControl } from "@/components/FormControl";
+import Icon from "@/components/Icon";
+import useElementId from "@/hooks/useElementId";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 import s from "./TextField.module.css";
 
diff --git a/packages/reshaped/src/components/TextField/TextField.types.ts b/packages/reshaped/src/components/TextField/TextField.types.ts
index 620ebee9..f0581a30 100644
--- a/packages/reshaped/src/components/TextField/TextField.types.ts
+++ b/packages/reshaped/src/components/TextField/TextField.types.ts
@@ -1,8 +1,8 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { FormControlProps } from "components/FormControl";
-import type { IconProps } from "components/Icon";
+import type { FormControlProps } from "@/components/FormControl";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 
diff --git a/packages/reshaped/src/components/TextField/index.ts b/packages/reshaped/src/components/TextField/index.ts
index 8a5aced8..d0aac12b 100644
--- a/packages/reshaped/src/components/TextField/index.ts
+++ b/packages/reshaped/src/components/TextField/index.ts
@@ -1,4 +1,4 @@
-import Aligner from "components/_private/Aligner";
+import Aligner from "@/components/_private/Aligner";
 
 import TextField from "./TextField";
 
diff --git a/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx b/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx
index f3a706f3..541229e3 100644
--- a/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx
+++ b/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx
@@ -1,16 +1,16 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Badge from "components/Badge";
-import Button from "components/Button";
-import Divider from "components/Divider";
-import FormControl from "components/FormControl";
-import Select from "components/Select";
-import Text from "components/Text";
-import TextField from "components/TextField";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example, Placeholder } from "utilities/storybook";
+import Badge from "@/components/Badge";
+import Button from "@/components/Button";
+import Divider from "@/components/Divider";
+import FormControl from "@/components/FormControl";
+import Select from "@/components/Select";
+import Text from "@/components/Text";
+import TextField from "@/components/TextField";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/TextField",
diff --git a/packages/reshaped/src/components/Theme/GlobalColorMode.tsx b/packages/reshaped/src/components/Theme/GlobalColorMode.tsx
index 6cd52223..be98a99f 100644
--- a/packages/reshaped/src/components/Theme/GlobalColorMode.tsx
+++ b/packages/reshaped/src/components/Theme/GlobalColorMode.tsx
@@ -3,14 +3,14 @@
 import { useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 
-import { enableTransitions, disableTransitions, onNextFrame } from "utilities/animation";
+import { enableTransitions, disableTransitions, onNextFrame } from "@/utilities/animation";
 
 import { GlobalColorModeContext } from "./Theme.context";
 import { getRootThemeEl } from "./Theme.utilities";
 import { useGlobalColorMode } from "./useTheme";
 
 import type * as T from "./Theme.types";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 const GlobalColorMode: React.FC<T.GlobalColorModeProps> = (props) => {
 	const { defaultMode, mode: passedMode, scopeRef, children } = props;
diff --git a/packages/reshaped/src/components/Theme/Theme.tsx b/packages/reshaped/src/components/Theme/Theme.tsx
index 02de409a..0ce82617 100644
--- a/packages/reshaped/src/components/Theme/Theme.tsx
+++ b/packages/reshaped/src/components/Theme/Theme.tsx
@@ -30,8 +30,6 @@ export const PrivateTheme: React.FC<T.PrivateProps> = (props) => {
 	const usedColorMode = colorMode === "inverted" ? invertedColorMode : colorMode || parentColorMode;
 	const rootClassNames = classNames(s.root, className);
 
-	console.log(defaultName, "defaultName2");
-
 	const setRootTheme: T.ThemeContextData["setRootTheme"] = React.useCallback(
 		(theme) => {
 			if (isRootProvider) {
diff --git a/packages/reshaped/src/components/Theme/Theme.types.ts b/packages/reshaped/src/components/Theme/Theme.types.ts
index ae4a10ca..b73fae5e 100644
--- a/packages/reshaped/src/components/Theme/Theme.types.ts
+++ b/packages/reshaped/src/components/Theme/Theme.types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import * as G from "types/global";
+import * as G from "@/types/global";
 
 import type { ClassName } from "@reshaped/headless";
 
diff --git a/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx b/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx
index 3bb925e1..b93fc7fd 100644
--- a/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx
+++ b/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx
@@ -1,13 +1,13 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import Card from "components/Card";
-import MenuItem from "components/MenuItem";
-import Popover from "components/Popover";
-import Theme, { useTheme } from "components/Theme";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Card from "@/components/Card";
+import MenuItem from "@/components/MenuItem";
+import Popover from "@/components/Popover";
+import Theme, { useTheme } from "@/components/Theme";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/Theme",
diff --git a/packages/reshaped/src/components/Timeline/Timeline.tsx b/packages/reshaped/src/components/Timeline/Timeline.tsx
index 8a051432..fec0911d 100644
--- a/packages/reshaped/src/components/Timeline/Timeline.tsx
+++ b/packages/reshaped/src/components/Timeline/Timeline.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 
-import View from "components/View";
+import View from "@/components/View";
 
 import s from "./Timeline.module.css";
 
diff --git a/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx b/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx
index f149bdce..9e0d5a18 100644
--- a/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx
+++ b/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx
@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Timeline from "components/Timeline";
-import { Example, Placeholder } from "utilities/storybook";
+import Timeline from "@/components/Timeline";
+import { Example, Placeholder } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Timeline",
diff --git a/packages/reshaped/src/components/Toast/Toast.tsx b/packages/reshaped/src/components/Toast/Toast.tsx
index cdaf13c6..2f15bf88 100644
--- a/packages/reshaped/src/components/Toast/Toast.tsx
+++ b/packages/reshaped/src/components/Toast/Toast.tsx
@@ -2,11 +2,11 @@
 
 import React from "react";
 
-import Button, { type ButtonProps } from "components/Button";
-import Icon from "components/Icon";
-import Text from "components/Text";
-import Theme from "components/Theme";
-import View, { type ViewProps } from "components/View";
+import Button, { type ButtonProps } from "@/components/Button";
+import Icon from "@/components/Icon";
+import Text from "@/components/Text";
+import Theme from "@/components/Theme";
+import View, { type ViewProps } from "@/components/View";
 
 import s from "./Toast.module.css";
 
diff --git a/packages/reshaped/src/components/Toast/Toast.types.ts b/packages/reshaped/src/components/Toast/Toast.types.ts
index 5e239cf8..ca74f354 100644
--- a/packages/reshaped/src/components/Toast/Toast.types.ts
+++ b/packages/reshaped/src/components/Toast/Toast.types.ts
@@ -1,5 +1,5 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
-import type { IconProps } from "components/Icon";
+import type { IconProps } from "@/components/Icon";
 import type React from "react";
 
 export type Status = "entering" | "entered" | "exited";
diff --git a/packages/reshaped/src/components/Toast/ToastContainer.tsx b/packages/reshaped/src/components/Toast/ToastContainer.tsx
index d3a9775e..98c43e32 100644
--- a/packages/reshaped/src/components/Toast/ToastContainer.tsx
+++ b/packages/reshaped/src/components/Toast/ToastContainer.tsx
@@ -4,7 +4,7 @@ import { TrapFocus, classNames } from "@reshaped/headless";
 import { checkKeyboardMode } from "@reshaped/headless/internal";
 import React from "react";
 
-import { onNextFrame } from "utilities/animation";
+import { onNextFrame } from "@/utilities/animation";
 
 import Toast from "./Toast";
 import { timeouts } from "./Toast.constants";
diff --git a/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx b/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx
index 7f978ccc..dd2528e2 100644
--- a/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx
+++ b/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx
@@ -1,14 +1,14 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
 
-import Button from "components/Button";
-import Dismissible from "components/Dismissible";
-import Image from "components/Image";
-import Text from "components/Text";
-import { useToast, ToastProvider } from "components/Toast";
-import View from "components/View";
-import IconZap from "icons/Zap";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Dismissible from "@/components/Dismissible";
+import Image from "@/components/Image";
+import Text from "@/components/Text";
+import { useToast, ToastProvider } from "@/components/Toast";
+import View from "@/components/View";
+import IconZap from "@/icons/Zap";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Toast",
diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts b/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts
index b6ca088e..00cdfd08 100644
--- a/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts
+++ b/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts
@@ -1,4 +1,4 @@
-import type { ButtonProps } from "components/Button";
+import type { ButtonProps } from "@/components/Button";
 
 type BaseProps = Omit<ButtonProps, "variant" | "highlighted"> & {
 	/** Component render variant
diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx b/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx
index 4b939901..ffc0cb97 100644
--- a/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx
+++ b/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Button, { ButtonProps } from "components/Button";
-import { useToggleButtonGroup } from "components/ToggleButtonGroup";
+import Button, { ButtonProps } from "@/components/Button";
+import { useToggleButtonGroup } from "@/components/ToggleButtonGroup";
 
 import type * as T from "./ToggleButton.types";
 
diff --git a/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx b/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx
index 60d64356..706c52ac 100644
--- a/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx
+++ b/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx
@@ -1,7 +1,7 @@
 import { type StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, type Mock } from "storybook/test";
 
-import { Example } from "utilities/storybook";
+import { Example } from "@/utilities/storybook";
 
 import ToggleButton from "../ToggleButton";
 
diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts
index 4e311bbc..ac611d99 100644
--- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts
+++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts
@@ -1,5 +1,5 @@
-import type { ButtonGroupProps } from "components/Button";
-import type { ToggleButtonProps } from "components/ToggleButton";
+import type { ButtonGroupProps } from "@/components/Button";
+import type { ToggleButtonProps } from "@/components/ToggleButton";
 import type React from "react";
 
 type BaseProps = {
diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx
index 251cc162..d46a72dd 100644
--- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx
+++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx
@@ -3,7 +3,7 @@
 import { useKeyboardArrowNavigation } from "@reshaped/headless";
 import React from "react";
 
-import Button from "components/Button";
+import Button from "@/components/Button";
 
 import Context from "./ToggleButtonGroup.context";
 
diff --git a/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx b/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx
index b0b31fbb..b3f3d837 100644
--- a/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx
+++ b/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, Mock, userEvent } from "storybook/test";
 
-import ToggleButton from "components/ToggleButton";
-import ToggleButtonGroup from "components/ToggleButtonGroup";
-import IconCheckmark from "icons/Checkmark";
-import IconMinus from "icons/Minus";
-import IconPlus from "icons/Plus";
-import { Example } from "utilities/storybook";
+import ToggleButton from "@/components/ToggleButton";
+import ToggleButtonGroup from "@/components/ToggleButtonGroup";
+import IconCheckmark from "@/icons/Checkmark";
+import IconMinus from "@/icons/Minus";
+import IconPlus from "@/icons/Plus";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/ToggleButtonGroup",
diff --git a/packages/reshaped/src/components/Tooltip/Tooltip.tsx b/packages/reshaped/src/components/Tooltip/Tooltip.tsx
index 2af32b9c..7390607b 100644
--- a/packages/reshaped/src/components/Tooltip/Tooltip.tsx
+++ b/packages/reshaped/src/components/Tooltip/Tooltip.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import Flyout from "components/Flyout";
-import Text from "components/Text";
-import Theme from "components/Theme";
+import Flyout from "@/components/Flyout";
+import Text from "@/components/Text";
+import Theme from "@/components/Theme";
 
 import s from "./Tooltip.module.css";
 
diff --git a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts
index 2e54be12..c2ab97ec 100644
--- a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts
+++ b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { FlyoutProps, FlyoutTriggerAttributes } from "components/Flyout";
+import type { FlyoutProps, FlyoutTriggerAttributes } from "@/components/Flyout";
 
 export type Props = Pick<
 	FlyoutProps,
diff --git a/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx b/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx
index 167c90e2..0fb2fff3 100644
--- a/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx
+++ b/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx
@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import Button from "components/Button";
-import Popover from "components/Popover";
-import Tooltip, { TooltipProps } from "components/Tooltip";
-import View from "components/View";
-import useResponsiveClientValue from "hooks/useResponsiveClientValue";
-import { Example } from "utilities/storybook";
+import Button from "@/components/Button";
+import Popover from "@/components/Popover";
+import Tooltip, { TooltipProps } from "@/components/Tooltip";
+import View from "@/components/View";
+import useResponsiveClientValue from "@/hooks/useResponsiveClientValue";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Components/Tooltip",
diff --git a/packages/reshaped/src/components/View/View.tsx b/packages/reshaped/src/components/View/View.tsx
index e464a003..119bc380 100644
--- a/packages/reshaped/src/components/View/View.tsx
+++ b/packages/reshaped/src/components/View/View.tsx
@@ -1,15 +1,15 @@
 import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 
-import Divider, { type DividerProps } from "components/Divider";
-import Hidden from "components/Hidden";
-import { resolveMixin } from "styles/mixin";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import Divider, { type DividerProps } from "@/components/Divider";
+import Hidden from "@/components/Hidden";
+import { resolveMixin } from "@/styles/mixin";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./View.module.css";
 
 import type * as T from "./View.types";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 export const ViewItem = <As extends keyof React.JSX.IntrinsicElements = "div">(
 	props: T.ItemProps<As>
diff --git a/packages/reshaped/src/components/View/View.types.ts b/packages/reshaped/src/components/View/View.types.ts
index 9d8839bf..37786fcd 100644
--- a/packages/reshaped/src/components/View/View.types.ts
+++ b/packages/reshaped/src/components/View/View.types.ts
@@ -1,7 +1,7 @@
 import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as TStyles from "styles/types";
-import type * as G from "types/global";
+import type * as TStyles from "@/styles/types";
+import type * as G from "@/types/global";
 
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
diff --git a/packages/reshaped/src/components/View/tests/View.stories.tsx b/packages/reshaped/src/components/View/tests/View.stories.tsx
index 8c967165..8b690a17 100644
--- a/packages/reshaped/src/components/View/tests/View.stories.tsx
+++ b/packages/reshaped/src/components/View/tests/View.stories.tsx
@@ -3,15 +3,15 @@ import { StoryObj } from "@storybook/react-vite";
 import React, { useEffect, useState } from "react";
 import { expect } from "storybook/test";
 
-import Avatar from "components/Avatar";
-import Button from "components/Button";
-import Hidden from "components/Hidden";
-import MenuItem from "components/MenuItem";
-import Tabs from "components/Tabs";
-import Text from "components/Text";
-import View, { type ViewProps } from "components/View";
-import IconPlus from "icons/Plus";
-import { Placeholder, Example } from "utilities/storybook";
+import Avatar from "@/components/Avatar";
+import Button from "@/components/Button";
+import Hidden from "@/components/Hidden";
+import MenuItem from "@/components/MenuItem";
+import Tabs from "@/components/Tabs";
+import Text from "@/components/Text";
+import View, { type ViewProps } from "@/components/View";
+import IconPlus from "@/icons/Plus";
+import { Placeholder, Example } from "@/utilities/storybook";
 
 export default {
 	title: "Utility components/View",
diff --git a/packages/reshaped/src/components/_private/Expandable/Expandable.tsx b/packages/reshaped/src/components/_private/Expandable/Expandable.tsx
index 24dbc85a..8e3df23f 100644
--- a/packages/reshaped/src/components/_private/Expandable/Expandable.tsx
+++ b/packages/reshaped/src/components/_private/Expandable/Expandable.tsx
@@ -4,7 +4,7 @@ import { useIsomorphicLayoutEffect } from "@reshaped/headless";
 import { classNames } from "@reshaped/headless";
 import React from "react";
 
-import { onNextFrame } from "utilities/animation";
+import { onNextFrame } from "@/utilities/animation";
 
 import s from "./Expandable.module.css";
 import * as T from "./Expandable.types";
diff --git a/packages/reshaped/src/components/_private/Portal/Portal.tsx b/packages/reshaped/src/components/_private/Portal/Portal.tsx
index c7a4d260..1a7dee41 100644
--- a/packages/reshaped/src/components/_private/Portal/Portal.tsx
+++ b/packages/reshaped/src/components/_private/Portal/Portal.tsx
@@ -4,7 +4,7 @@ import { useIsomorphicLayoutEffect, useToggle } from "@reshaped/headless";
 import React from "react";
 import ReactDOM from "react-dom";
 
-import Theme from "components/Theme";
+import Theme from "@/components/Theme";
 
 import s from "./Portal.module.css";
 
diff --git a/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx b/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx
index a60bed70..13a55e6a 100644
--- a/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx
+++ b/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import Portal from "components/_private/Portal";
+import Portal from "@/components/_private/Portal";
 
 export default { title: "Internal/Portal" };
 
diff --git a/packages/reshaped/src/config/tailwind.ts b/packages/reshaped/src/config/tailwind.ts
index f92e36f5..d77546e2 100644
--- a/packages/reshaped/src/config/tailwind.ts
+++ b/packages/reshaped/src/config/tailwind.ts
@@ -1,10 +1,10 @@
-import { bgWithDynamicForeground } from "themes/_generator/constants";
-import reshapedDefinition from "themes/_generator/definitions/reshaped";
-import mergeDefinitions from "themes/_generator/utilities/mergeDefinitions";
-import { camelToKebab } from "utilities/string";
+import { bgWithDynamicForeground } from "@/themes/_generator/constants";
+import reshapedDefinition from "@/themes/_generator/definitions/reshaped";
+import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions";
+import { camelToKebab } from "@/utilities/string";
 
-import type { Name as ColorName } from "themes/_generator/tokens/color/color.types";
-import type { ThemeDefinition } from "themes/_generator/tokens/types";
+import type { Name as ColorName } from "@/themes/_generator/tokens/color/color.types";
+import type { ThemeDefinition } from "@/themes/_generator/tokens/types";
 
 export const getTheme = (theme?: ThemeDefinition) => {
 	const config: Record<
diff --git a/packages/reshaped/src/core/Actionable/Actionable.tsx b/packages/reshaped/src/core/Actionable/Actionable.tsx
index ab6f390b..1f0e4f1c 100644
--- a/packages/reshaped/src/core/Actionable/Actionable.tsx
+++ b/packages/reshaped/src/core/Actionable/Actionable.tsx
@@ -3,7 +3,7 @@
 import { classNames } from "@reshaped/headless";
 import React, { forwardRef } from "react";
 
-import * as keys from "constants/keys";
+import * as keys from "@/constants/keys";
 
 import type * as T from "./Actionable.types";
 
diff --git a/packages/reshaped/src/hooks/_private/useDrag.ts b/packages/reshaped/src/hooks/_private/useDrag.ts
index 1a1908fe..479be43d 100644
--- a/packages/reshaped/src/hooks/_private/useDrag.ts
+++ b/packages/reshaped/src/hooks/_private/useDrag.ts
@@ -4,7 +4,7 @@ import { useHotkeys, useHandlerRef, useToggle } from "@reshaped/headless";
 import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React from "react";
 
-import * as keys from "constants/keys";
+import * as keys from "@/constants/keys";
 
 export type UseDragCallbackArgs = { x: number; y: number; triggerX: number; triggerY: number };
 
diff --git a/packages/reshaped/src/hooks/_private/useIsDismissible.ts b/packages/reshaped/src/hooks/_private/useIsDismissible.ts
index b7cc3d23..f6b23be3 100644
--- a/packages/reshaped/src/hooks/_private/useIsDismissible.ts
+++ b/packages/reshaped/src/hooks/_private/useIsDismissible.ts
@@ -5,7 +5,7 @@
 
 import React from "react";
 
-import useElementId from "hooks/useElementId";
+import useElementId from "@/hooks/useElementId";
 
 type Ref = React.RefObject<HTMLElement | null>;
 type QueueItem = { triggerRef?: Ref; contentRef: Ref; parentId: string | null };
diff --git a/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx b/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx
index cd0f3560..0a9aedfb 100644
--- a/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx
+++ b/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx
@@ -3,9 +3,9 @@
 import { useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 
-import defaultBreakpoints from "constants/breakpoints";
+import defaultBreakpoints from "@/constants/breakpoints";
 
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 const SingletonViewportContext = React.createContext<{
 	viewport: G.Viewport;
diff --git a/packages/reshaped/src/hooks/tests/useDrag.stories.tsx b/packages/reshaped/src/hooks/tests/useDrag.stories.tsx
index 8bce977d..b51c3464 100644
--- a/packages/reshaped/src/hooks/tests/useDrag.stories.tsx
+++ b/packages/reshaped/src/hooks/tests/useDrag.stories.tsx
@@ -3,9 +3,9 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { fireEvent, fn, expect } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
-import useDrag from "hooks/_private/useDrag";
+import Button from "@/components/Button";
+import View from "@/components/View";
+import useDrag from "@/hooks/_private/useDrag";
 
 export default {
 	title: "Internal/useDrag",
diff --git a/packages/reshaped/src/hooks/tests/useElementId.stories.tsx b/packages/reshaped/src/hooks/tests/useElementId.stories.tsx
index 987d66db..9a0e4557 100644
--- a/packages/reshaped/src/hooks/tests/useElementId.stories.tsx
+++ b/packages/reshaped/src/hooks/tests/useElementId.stories.tsx
@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, waitFor } from "storybook/test";
 
-import useElementId from "hooks/useElementId";
+import useElementId from "@/hooks/useElementId";
 
 export default {
 	title: "Hooks/useElementId",
diff --git a/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx b/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx
index 60245df1..77161f6e 100644
--- a/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx
+++ b/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx
@@ -1,5 +1,5 @@
-import View, { type ViewProps } from "components/View";
-import useResponsiveClientValue from "hooks/useResponsiveClientValue";
+import View, { type ViewProps } from "@/components/View";
+import useResponsiveClientValue from "@/hooks/useResponsiveClientValue";
 
 export default {
 	title: "Hooks/useResponsiveClientValue",
diff --git a/packages/reshaped/src/hooks/useResponsiveClientValue.ts b/packages/reshaped/src/hooks/useResponsiveClientValue.ts
index b84b080c..c694219e 100644
--- a/packages/reshaped/src/hooks/useResponsiveClientValue.ts
+++ b/packages/reshaped/src/hooks/useResponsiveClientValue.ts
@@ -2,9 +2,9 @@
 
 import { useMemo } from "react";
 
-import useViewport from "hooks/useViewport";
+import useViewport from "@/hooks/useViewport";
 
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 const useResponsiveClientValue = <T>(value: G.Responsive<T>): T | undefined => {
 	const viewport = useViewport();
diff --git a/packages/reshaped/src/hooks/useViewport.ts b/packages/reshaped/src/hooks/useViewport.ts
index 69730ecb..8cdc9a60 100644
--- a/packages/reshaped/src/hooks/useViewport.ts
+++ b/packages/reshaped/src/hooks/useViewport.ts
@@ -1,4 +1,4 @@
-import useSingletonViewport from "hooks/_private/useSingletonViewport";
+import useSingletonViewport from "@/hooks/_private/useSingletonViewport";
 
 const useViewport = () => {
 	const { viewport } = useSingletonViewport();
diff --git a/packages/reshaped/src/index.ts b/packages/reshaped/src/index.ts
index a801babe..59b0ccef 100644
--- a/packages/reshaped/src/index.ts
+++ b/packages/reshaped/src/index.ts
@@ -1,112 +1,112 @@
 /**
  * Components
  */
-export { default as ActionBar } from "components/ActionBar";
-export type { ActionBarProps } from "components/ActionBar";
+export { default as ActionBar } from "@/components/ActionBar";
+export type { ActionBarProps } from "@/components/ActionBar";
 
-export { default as Alert } from "components/Alert";
-export type { AlertProps } from "components/Alert";
+export { default as Alert } from "@/components/Alert";
+export type { AlertProps } from "@/components/Alert";
 
-export { default as Autocomplete } from "components/Autocomplete";
-export type { AutocompleteProps, AutocompleteInstance } from "components/Autocomplete";
+export { default as Autocomplete } from "@/components/Autocomplete";
+export type { AutocompleteProps, AutocompleteInstance } from "@/components/Autocomplete";
 
-export { default as Avatar } from "components/Avatar";
-export type { AvatarProps } from "components/Avatar";
+export { default as Avatar } from "@/components/Avatar";
+export type { AvatarProps } from "@/components/Avatar";
 
-export { default as Badge } from "components/Badge";
-export type { BadgeProps } from "components/Badge";
+export { default as Badge } from "@/components/Badge";
+export type { BadgeProps } from "@/components/Badge";
 
-export { default as Button } from "components/Button";
-export type { ButtonProps, ButtonAlignerProps, ButtonGroupProps } from "components/Button";
+export { default as Button } from "@/components/Button";
+export type { ButtonProps, ButtonAlignerProps, ButtonGroupProps } from "@/components/Button";
 
-export { default as Breadcrumbs } from "components/Breadcrumbs";
-export type { BreadcrumbsProps } from "components/Breadcrumbs";
+export { default as Breadcrumbs } from "@/components/Breadcrumbs";
+export type { BreadcrumbsProps } from "@/components/Breadcrumbs";
 
-export { default as Calendar } from "components/Calendar";
-export type { CalendarProps } from "components/Calendar";
+export { default as Calendar } from "@/components/Calendar";
+export type { CalendarProps } from "@/components/Calendar";
 
-export { default as Card } from "components/Card";
-export type { CardProps } from "components/Card";
+export { default as Card } from "@/components/Card";
+export type { CardProps } from "@/components/Card";
 
-export { default as Carousel } from "components/Carousel";
-export type { CarouselProps, CarouselInstanceRef, CarouselInstance } from "components/Carousel";
+export { default as Carousel } from "@/components/Carousel";
+export type { CarouselProps, CarouselInstanceRef, CarouselInstance } from "@/components/Carousel";
 
-export { default as Checkbox } from "components/Checkbox";
-export type { CheckboxProps } from "components/Checkbox";
+export { default as Checkbox } from "@/components/Checkbox";
+export type { CheckboxProps } from "@/components/Checkbox";
 
-export { default as CheckboxGroup } from "components/CheckboxGroup";
-export type { CheckboxGroupProps } from "components/CheckboxGroup";
+export { default as CheckboxGroup } from "@/components/CheckboxGroup";
+export type { CheckboxGroupProps } from "@/components/CheckboxGroup";
 
-export { default as ContextMenu } from "components/ContextMenu";
-export type { ContextMenuProps } from "components/ContextMenu";
+export { default as ContextMenu } from "@/components/ContextMenu";
+export type { ContextMenuProps } from "@/components/ContextMenu";
 
-export { default as Divider } from "components/Divider";
-export type { DividerProps } from "components/Divider";
+export { default as Divider } from "@/components/Divider";
+export type { DividerProps } from "@/components/Divider";
 
-export { default as DropdownMenu } from "components/DropdownMenu";
-export type { DropdownMenuProps, DropdownMenuInstance } from "components/DropdownMenu";
+export { default as DropdownMenu } from "@/components/DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuInstance } from "@/components/DropdownMenu";
 
-export { default as FileUpload } from "components/FileUpload";
-export type { FileUploadProps } from "components/FileUpload";
+export { default as FileUpload } from "@/components/FileUpload";
+export type { FileUploadProps } from "@/components/FileUpload";
 
-export { default as Hotkey } from "components/Hotkey";
-export type { HotkeyProps } from "components/Hotkey";
+export { default as Hotkey } from "@/components/Hotkey";
+export type { HotkeyProps } from "@/components/Hotkey";
 
-export { default as Link } from "components/Link";
-export type { LinkProps } from "components/Link";
+export { default as Link } from "@/components/Link";
+export type { LinkProps } from "@/components/Link";
 
-export { default as Loader } from "components/Loader";
-export type { LoaderProps } from "components/Loader";
+export { default as Loader } from "@/components/Loader";
+export type { LoaderProps } from "@/components/Loader";
 
-export { default as MenuItem } from "components/MenuItem";
-export type { MenuItemProps } from "components/MenuItem";
+export { default as MenuItem } from "@/components/MenuItem";
+export type { MenuItemProps } from "@/components/MenuItem";
 
-export { default as Modal } from "components/Modal";
-export type { ModalProps } from "components/Modal";
+export { default as Modal } from "@/components/Modal";
+export type { ModalProps } from "@/components/Modal";
 
-export { default as NumberField } from "components/NumberField";
-export type { NumberFieldProps } from "components/NumberField";
+export { default as NumberField } from "@/components/NumberField";
+export type { NumberFieldProps } from "@/components/NumberField";
 
-export { default as Pagination } from "components/Pagination";
-export type { PaginationProps } from "components/Pagination";
+export { default as Pagination } from "@/components/Pagination";
+export type { PaginationProps } from "@/components/Pagination";
 
-export { default as PinField } from "components/PinField";
-export type { PinFieldProps } from "components/PinField";
+export { default as PinField } from "@/components/PinField";
+export type { PinFieldProps } from "@/components/PinField";
 
-export { default as Popover } from "components/Popover";
-export type { PopoverProps, PopoverInstance } from "components/Popover";
+export { default as Popover } from "@/components/Popover";
+export type { PopoverProps, PopoverInstance } from "@/components/Popover";
 
-export { default as Progress } from "components/Progress";
-export type { ProgressProps } from "components/Progress";
+export { default as Progress } from "@/components/Progress";
+export type { ProgressProps } from "@/components/Progress";
 
-export { default as ProgressIndicator } from "components/ProgressIndicator";
-export type { ProgressIndicatorProps } from "components/ProgressIndicator";
+export { default as ProgressIndicator } from "@/components/ProgressIndicator";
+export type { ProgressIndicatorProps } from "@/components/ProgressIndicator";
 
-export { default as Radio } from "components/Radio";
-export type { RadioProps } from "components/Radio";
+export { default as Radio } from "@/components/Radio";
+export type { RadioProps } from "@/components/Radio";
 
-export { default as RadioGroup } from "components/RadioGroup";
-export type { RadioGroupProps } from "components/RadioGroup";
+export { default as RadioGroup } from "@/components/RadioGroup";
+export type { RadioGroupProps } from "@/components/RadioGroup";
 
-export { default as Scrim } from "components/Scrim";
-export type { ScrimProps } from "components/Scrim";
+export { default as Scrim } from "@/components/Scrim";
+export type { ScrimProps } from "@/components/Scrim";
 
-export { default as Select } from "components/Select";
-export type { SelectProps } from "components/Select";
+export { default as Select } from "@/components/Select";
+export type { SelectProps } from "@/components/Select";
 
-export { default as Skeleton } from "components/Skeleton";
-export type { SkeletonProps } from "components/Skeleton";
+export { default as Skeleton } from "@/components/Skeleton";
+export type { SkeletonProps } from "@/components/Skeleton";
 
-export { default as Slider } from "components/Slider";
-export type { SliderProps } from "components/Slider";
+export { default as Slider } from "@/components/Slider";
+export type { SliderProps } from "@/components/Slider";
 
-export { default as Stepper } from "components/Stepper";
-export type { StepperProps } from "components/Stepper";
+export { default as Stepper } from "@/components/Stepper";
+export type { StepperProps } from "@/components/Stepper";
 
-export { default as Switch } from "components/Switch";
-export type { SwitchProps } from "components/Switch";
+export { default as Switch } from "@/components/Switch";
+export type { SwitchProps } from "@/components/Switch";
 
-export { default as Table } from "components/Table";
+export { default as Table } from "@/components/Table";
 export type {
 	TableProps,
 	TableBodyProps,
@@ -114,92 +114,92 @@ export type {
 	TableHeadingProps,
 	TableCellProps,
 	TableRowProps,
-} from "components/Table";
+} from "@/components/Table";
 
-export { default as Tabs } from "components/Tabs";
-export type { TabsProps } from "components/Tabs";
+export { default as Tabs } from "@/components/Tabs";
+export type { TabsProps } from "@/components/Tabs";
 
-export { default as TextArea } from "components/TextArea";
-export type { TextAreaProps } from "components/TextArea";
+export { default as TextArea } from "@/components/TextArea";
+export type { TextAreaProps } from "@/components/TextArea";
 
-export { default as TextField } from "components/TextField";
-export type { TextFieldProps } from "components/TextField";
+export { default as TextField } from "@/components/TextField";
+export type { TextFieldProps } from "@/components/TextField";
 
-export { default as Timeline } from "components/Timeline";
-export type { TimelineProps, TimelineItemProps } from "components/Timeline";
+export { default as Timeline } from "@/components/Timeline";
+export type { TimelineProps, TimelineItemProps } from "@/components/Timeline";
 
-export { useToast, ToastProvider } from "components/Toast";
-export type { ToastProps, ToastProviderProps, ToastShowProps } from "components/Toast";
+export { useToast, ToastProvider } from "@/components/Toast";
+export type { ToastProps, ToastProviderProps, ToastShowProps } from "@/components/Toast";
 
-export { default as ToggleButton } from "components/ToggleButton";
-export type { ToggleButtonProps } from "components/ToggleButton";
+export { default as ToggleButton } from "@/components/ToggleButton";
+export type { ToggleButtonProps } from "@/components/ToggleButton";
 
-export { default as ToggleButtonGroup } from "components/ToggleButtonGroup";
-export type { ToggleButtonGroupProps } from "components/ToggleButtonGroup";
+export { default as ToggleButtonGroup } from "@/components/ToggleButtonGroup";
+export type { ToggleButtonGroupProps } from "@/components/ToggleButtonGroup";
 
-export { default as Tooltip } from "components/Tooltip";
-export type { TooltipProps } from "components/Tooltip";
+export { default as Tooltip } from "@/components/Tooltip";
+export type { TooltipProps } from "@/components/Tooltip";
 
 /**
  * Utility components
  */
-export { default as Reshaped } from "components/Reshaped";
-export type { ReshapedProps } from "components/Reshaped";
+export { default as Reshaped } from "@/components/Reshaped";
+export type { ReshapedProps } from "@/components/Reshaped";
 
-export { default as Accordion } from "components/Accordion";
-export type { AccordionProps } from "components/Accordion";
+export { default as Accordion } from "@/components/Accordion";
+export type { AccordionProps } from "@/components/Accordion";
 
-export { default as Actionable } from "components/Actionable";
-export type { ActionableProps, ActionableRef } from "components/Actionable";
+export { default as Actionable } from "@/components/Actionable";
+export type { ActionableProps, ActionableRef } from "@/components/Actionable";
 
-export { default as Container } from "components/Container";
-export type { ContainerProps } from "components/Container";
+export { default as Container } from "@/components/Container";
+export type { ContainerProps } from "@/components/Container";
 
-export { default as Dismissible } from "components/Dismissible";
-export type { DismissibleProps } from "components/Dismissible";
+export { default as Dismissible } from "@/components/Dismissible";
+export type { DismissibleProps } from "@/components/Dismissible";
 
-export { default as Flyout } from "components/Flyout";
-export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "components/Flyout";
+export { default as Flyout } from "@/components/Flyout";
+export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "@/components/Flyout";
 
-export { default as FormControl } from "components/FormControl";
-export type { FormControlProps } from "components/FormControl";
+export { default as FormControl } from "@/components/FormControl";
+export type { FormControlProps } from "@/components/FormControl";
 
-export { default as Grid } from "components/Grid";
-export type { GridProps, GridItemProps } from "components/Grid";
+export { default as Grid } from "@/components/Grid";
+export type { GridProps, GridItemProps } from "@/components/Grid";
 
-export { default as Hidden } from "components/Hidden";
-export type { HiddenProps } from "components/Hidden";
+export { default as Hidden } from "@/components/Hidden";
+export type { HiddenProps } from "@/components/Hidden";
 
-export { default as HiddenInput } from "components/HiddenInput";
-export type { HiddenInputProps } from "components/HiddenInput";
+export { default as HiddenInput } from "@/components/HiddenInput";
+export type { HiddenInputProps } from "@/components/HiddenInput";
 
-export { default as HiddenVisually } from "components/HiddenVisually";
-export type { HiddenVisuallyProps } from "components/HiddenVisually";
+export { default as HiddenVisually } from "@/components/HiddenVisually";
+export type { HiddenVisuallyProps } from "@/components/HiddenVisually";
 
-export { default as Icon } from "components/Icon";
-export type { IconProps } from "components/Icon";
+export { default as Icon } from "@/components/Icon";
+export type { IconProps } from "@/components/Icon";
 
-export { default as Image } from "components/Image";
-export type { ImageProps } from "components/Image";
+export { default as Image } from "@/components/Image";
+export type { ImageProps } from "@/components/Image";
 
-export { default as Overlay } from "components/Overlay";
-export type { OverlayProps } from "components/Overlay";
+export { default as Overlay } from "@/components/Overlay";
+export type { OverlayProps } from "@/components/Overlay";
 
-export { default as Resizable } from "components/Resizable";
+export { default as Resizable } from "@/components/Resizable";
 export type {
 	ResizableProps,
 	ResizableItemProps,
 	ResizableHandleProps,
-} from "components/Resizable";
+} from "@/components/Resizable";
 
-export { default as ScrollArea } from "components/ScrollArea";
-export type { ScrollAreaProps } from "components/ScrollArea";
+export { default as ScrollArea } from "@/components/ScrollArea";
+export type { ScrollAreaProps } from "@/components/ScrollArea";
 
-export { default as Text } from "components/Text";
-export type { TextProps } from "components/Text";
+export { default as Text } from "@/components/Text";
+export type { TextProps } from "@/components/Text";
 
-export { default as View } from "components/View";
-export type { ViewProps, ViewItemProps } from "components/View";
+export { default as View } from "@/components/View";
+export type { ViewProps, ViewItemProps } from "@/components/View";
 
 /**
  * Hooks
@@ -216,24 +216,24 @@ export {
 	useToggle,
 } from "@reshaped/headless";
 
-export { useFormControl } from "components/FormControl";
-export { default as Theme, useTheme, type ThemeProps } from "components/Theme";
-export { default as useResponsiveClientValue } from "hooks/useResponsiveClientValue";
+export { useFormControl } from "@/components/FormControl";
+export { default as Theme, useTheme, type ThemeProps } from "@/components/Theme";
+export { default as useResponsiveClientValue } from "@/hooks/useResponsiveClientValue";
 
 /**
  * Utility functions
  */
-export { responsivePropDependency } from "utilities/props";
+export { responsivePropDependency } from "@/utilities/props";
 export { TrapFocus, classNames } from "@reshaped/headless";
 
 /**
  * Types
  */
 export type { Attributes } from "@reshaped/headless";
-export type { ReshapedConfig } from "types/config";
-export type { Responsive, ColorMode } from "types/global";
+export type { ReshapedConfig } from "@/types/config";
+export type { Responsive, ColorMode } from "@/types/global";
 
 /**
  * Dev utilities
  */
-export { default as Placeholder } from "utilities/storybook/Placeholder";
+export { default as Placeholder } from "@/utilities/storybook/Placeholder";
diff --git a/packages/reshaped/src/styles/mixin.ts b/packages/reshaped/src/styles/mixin.ts
index 90fb3693..6f4c7ab7 100644
--- a/packages/reshaped/src/styles/mixin.ts
+++ b/packages/reshaped/src/styles/mixin.ts
@@ -1,6 +1,6 @@
-import align from "styles/resolvers/align";
-import aspectRatio from "styles/resolvers/aspectRatio";
-import bleed from "styles/resolvers/bleed";
+import align from "@/styles/resolvers/align";
+import aspectRatio from "@/styles/resolvers/aspectRatio";
+import bleed from "@/styles/resolvers/bleed";
 import border, {
 	borderColor,
 	borderTop,
@@ -9,8 +9,8 @@ import border, {
 	borderEnd,
 	borderInline,
 	borderBlock,
-} from "styles/resolvers/border";
-import height from "styles/resolvers/height";
+} from "@/styles/resolvers/border";
+import height from "@/styles/resolvers/height";
 import inset, {
 	insetTop,
 	insetBottom,
@@ -18,12 +18,12 @@ import inset, {
 	insetEnd,
 	insetInline,
 	insetBlock,
-} from "styles/resolvers/inset";
-import justify from "styles/resolvers/justify";
-import maxHeight from "styles/resolvers/maxHeight";
-import maxWidth from "styles/resolvers/maxWidth";
-import minHeight from "styles/resolvers/minHeight";
-import minWidth from "styles/resolvers/minWidth";
+} from "@/styles/resolvers/inset";
+import justify from "@/styles/resolvers/justify";
+import maxHeight from "@/styles/resolvers/maxHeight";
+import maxWidth from "@/styles/resolvers/maxWidth";
+import minHeight from "@/styles/resolvers/minHeight";
+import minWidth from "@/styles/resolvers/minWidth";
 import padding, {
 	paddingTop,
 	paddingBottom,
@@ -31,14 +31,14 @@ import padding, {
 	paddingEnd,
 	paddingInline,
 	paddingBlock,
-} from "styles/resolvers/padding";
-import position from "styles/resolvers/position";
-import radius from "styles/resolvers/radius";
-import textAlign from "styles/resolvers/textAlign";
-import width from "styles/resolvers/width";
+} from "@/styles/resolvers/padding";
+import position from "@/styles/resolvers/position";
+import radius from "@/styles/resolvers/radius";
+import textAlign from "@/styles/resolvers/textAlign";
+import width from "@/styles/resolvers/width";
 
 import type { ClassName } from "@reshaped/headless";
-import type { Mixin } from "styles/types";
+import type { Mixin } from "@/styles/types";
 
 const mixinMap = {
 	align,
diff --git a/packages/reshaped/src/styles/resolvers/align/index.ts b/packages/reshaped/src/styles/resolvers/align/index.ts
index 8c69702c..d291833d 100644
--- a/packages/reshaped/src/styles/resolvers/align/index.ts
+++ b/packages/reshaped/src/styles/resolvers/align/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./align.css";
 
 const align: T.StyleResolver<T.Align> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts b/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts
index 7a0ca8b8..aecb0e59 100644
--- a/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts
+++ b/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./aspectRatio.css";
 
 const aspectRatio: T.StyleResolver<T.AspectRatio> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/bleed/index.ts b/packages/reshaped/src/styles/resolvers/bleed/index.ts
index 4db04b21..0bb5a344 100644
--- a/packages/reshaped/src/styles/resolvers/bleed/index.ts
+++ b/packages/reshaped/src/styles/resolvers/bleed/index.ts
@@ -1,9 +1,9 @@
-import * as T from "styles/types";
+import * as T from "@/styles/types";
 import {
 	responsiveClassNames,
 	responsiveVariables,
 	responsivePropDependency,
-} from "utilities/props";
+} from "@/utilities/props";
 
 import s from "./bleed.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/border/index.ts b/packages/reshaped/src/styles/resolvers/border/index.ts
index c01ee431..74aae624 100644
--- a/packages/reshaped/src/styles/resolvers/border/index.ts
+++ b/packages/reshaped/src/styles/resolvers/border/index.ts
@@ -1,9 +1,9 @@
-import * as T from "styles/types";
+import * as T from "@/styles/types";
 import {
 	responsiveClassNames,
 	responsivePropDependency,
 	responsiveVariables,
-} from "utilities/props";
+} from "@/utilities/props";
 
 import s from "./border.module.css";
 import "./borderWidth.css";
diff --git a/packages/reshaped/src/styles/resolvers/height/index.ts b/packages/reshaped/src/styles/resolvers/height/index.ts
index 69969d51..a643e2ec 100644
--- a/packages/reshaped/src/styles/resolvers/height/index.ts
+++ b/packages/reshaped/src/styles/resolvers/height/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./height.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/inset/index.ts b/packages/reshaped/src/styles/resolvers/inset/index.ts
index d833568c..c898650d 100644
--- a/packages/reshaped/src/styles/resolvers/inset/index.ts
+++ b/packages/reshaped/src/styles/resolvers/inset/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./inset.css";
 
 const inset: T.StyleResolver<T.Inset> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/justify/index.ts b/packages/reshaped/src/styles/resolvers/justify/index.ts
index 39a5d5ae..b6dd3f8d 100644
--- a/packages/reshaped/src/styles/resolvers/justify/index.ts
+++ b/packages/reshaped/src/styles/resolvers/justify/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./justify.css";
 
 const justify: T.StyleResolver<T.Justify> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/margin/index.ts b/packages/reshaped/src/styles/resolvers/margin/index.ts
index 068b48d9..273b2d37 100644
--- a/packages/reshaped/src/styles/resolvers/margin/index.ts
+++ b/packages/reshaped/src/styles/resolvers/margin/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./margin.css";
 
 const margin: T.StyleResolver<T.Margin> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/maxHeight/index.ts b/packages/reshaped/src/styles/resolvers/maxHeight/index.ts
index a7fe5384..3bb2e568 100644
--- a/packages/reshaped/src/styles/resolvers/maxHeight/index.ts
+++ b/packages/reshaped/src/styles/resolvers/maxHeight/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./maxHeight.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/maxWidth/index.ts b/packages/reshaped/src/styles/resolvers/maxWidth/index.ts
index fa2f44ff..100e41fe 100644
--- a/packages/reshaped/src/styles/resolvers/maxWidth/index.ts
+++ b/packages/reshaped/src/styles/resolvers/maxWidth/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./maxWidth.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/minHeight/index.ts b/packages/reshaped/src/styles/resolvers/minHeight/index.ts
index 44319114..b335ae6a 100644
--- a/packages/reshaped/src/styles/resolvers/minHeight/index.ts
+++ b/packages/reshaped/src/styles/resolvers/minHeight/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./minHeight.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/minWidth/index.ts b/packages/reshaped/src/styles/resolvers/minWidth/index.ts
index 04e3fcd7..4b8efbf1 100644
--- a/packages/reshaped/src/styles/resolvers/minWidth/index.ts
+++ b/packages/reshaped/src/styles/resolvers/minWidth/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./minWidth.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/padding/index.ts b/packages/reshaped/src/styles/resolvers/padding/index.ts
index 57c91d71..464d96a5 100644
--- a/packages/reshaped/src/styles/resolvers/padding/index.ts
+++ b/packages/reshaped/src/styles/resolvers/padding/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./padding.css";
 
 const padding: T.StyleResolver<T.Padding> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/position/index.ts b/packages/reshaped/src/styles/resolvers/position/index.ts
index 75a971d3..117912d2 100644
--- a/packages/reshaped/src/styles/resolvers/position/index.ts
+++ b/packages/reshaped/src/styles/resolvers/position/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./position.css";
 
 const position: T.StyleResolver<T.Position> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/radius/index.ts b/packages/reshaped/src/styles/resolvers/radius/index.ts
index 6076cf17..a80acd19 100644
--- a/packages/reshaped/src/styles/resolvers/radius/index.ts
+++ b/packages/reshaped/src/styles/resolvers/radius/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames } from "@/utilities/props";
 
 import s from "./radius.module.css";
 
diff --git a/packages/reshaped/src/styles/resolvers/textAlign/index.ts b/packages/reshaped/src/styles/resolvers/textAlign/index.ts
index 028098e4..652fe56c 100644
--- a/packages/reshaped/src/styles/resolvers/textAlign/index.ts
+++ b/packages/reshaped/src/styles/resolvers/textAlign/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveVariables } from "@/utilities/props";
 import "./textAlign.css";
 
 const textAlign: T.StyleResolver<T.TextAlign> = (value) => {
diff --git a/packages/reshaped/src/styles/resolvers/width/index.ts b/packages/reshaped/src/styles/resolvers/width/index.ts
index 668eaf29..9cfc0675 100644
--- a/packages/reshaped/src/styles/resolvers/width/index.ts
+++ b/packages/reshaped/src/styles/resolvers/width/index.ts
@@ -1,5 +1,5 @@
-import * as T from "styles/types";
-import { responsiveClassNames, responsiveVariables } from "utilities/props";
+import * as T from "@/styles/types";
+import { responsiveClassNames, responsiveVariables } from "@/utilities/props";
 
 import s from "./width.module.css";
 
diff --git a/packages/reshaped/src/styles/types.ts b/packages/reshaped/src/styles/types.ts
index 9c5cee29..388f106e 100644
--- a/packages/reshaped/src/styles/types.ts
+++ b/packages/reshaped/src/styles/types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import * as G from "types/global";
+import * as G from "@/types/global";
 
 import type { ClassName } from "@reshaped/headless";
 
diff --git a/packages/reshaped/src/tests/ShadowDOM.stories.tsx b/packages/reshaped/src/tests/ShadowDOM.stories.tsx
index 7f02aee4..06787789 100644
--- a/packages/reshaped/src/tests/ShadowDOM.stories.tsx
+++ b/packages/reshaped/src/tests/ShadowDOM.stories.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState, useRef, forwardRef } from "react";
 import root from "react-shadow";
 
-import Autocomplete, { type AutocompleteProps } from "components/Autocomplete";
-import Button from "components/Button";
-import DropdownMenu from "components/DropdownMenu";
-import Reshaped from "components/Reshaped";
-import Select from "components/Select";
-import Tooltip from "components/Tooltip";
-import View from "components/View";
-import { Example } from "utilities/storybook";
+import Autocomplete, { type AutocompleteProps } from "@/components/Autocomplete";
+import Button from "@/components/Button";
+import DropdownMenu from "@/components/DropdownMenu";
+import Reshaped from "@/components/Reshaped";
+import Select from "@/components/Select";
+import Tooltip from "@/components/Tooltip";
+import View from "@/components/View";
+import { Example } from "@/utilities/storybook";
 
 export default {
 	title: "Internal/ShadowDOM",
diff --git a/packages/reshaped/src/tests/ThemesPlayground.tsx b/packages/reshaped/src/tests/ThemesPlayground.tsx
index 993a24f2..20e3bc45 100644
--- a/packages/reshaped/src/tests/ThemesPlayground.tsx
+++ b/packages/reshaped/src/tests/ThemesPlayground.tsx
@@ -1,27 +1,27 @@
 import { useToggle } from "@reshaped/headless";
 import React from "react";
 
-import Alert from "components/Alert";
-import Avatar from "components/Avatar";
-import Badge from "components/Badge";
-import Button from "components/Button";
-import Card from "components/Card";
-import Checkbox from "components/Checkbox";
-import CheckboxGroup from "components/CheckboxGroup";
-import Divider from "components/Divider";
-import DropdownMenu from "components/DropdownMenu";
-import FormControl from "components/FormControl";
-import Grid from "components/Grid";
-import Image from "components/Image";
-import Link from "components/Link";
-import Switch from "components/Switch";
-import Table from "components/Table";
-import Text from "components/Text";
-import TextField from "components/TextField";
-import View, { ViewProps } from "components/View";
-import IconChevronDown from "icons/ChevronDown";
-import IconChevronRight from "icons/ChevronRight";
-import IconZap from "icons/Zap";
+import Alert from "@/components/Alert";
+import Avatar from "@/components/Avatar";
+import Badge from "@/components/Badge";
+import Button from "@/components/Button";
+import Card from "@/components/Card";
+import Checkbox from "@/components/Checkbox";
+import CheckboxGroup from "@/components/CheckboxGroup";
+import Divider from "@/components/Divider";
+import DropdownMenu from "@/components/DropdownMenu";
+import FormControl from "@/components/FormControl";
+import Grid from "@/components/Grid";
+import Image from "@/components/Image";
+import Link from "@/components/Link";
+import Switch from "@/components/Switch";
+import Table from "@/components/Table";
+import Text from "@/components/Text";
+import TextField from "@/components/TextField";
+import View, { ViewProps } from "@/components/View";
+import IconChevronDown from "@/icons/ChevronDown";
+import IconChevronRight from "@/icons/ChevronRight";
+import IconZap from "@/icons/Zap";
 
 const Color = (props: Pick<ViewProps, "backgroundColor" | "borderColor" | "children">) => {
 	return (
diff --git a/packages/reshaped/src/tests/themes.stories.tsx b/packages/reshaped/src/tests/themes.stories.tsx
index 96483de3..32b67bfe 100644
--- a/packages/reshaped/src/tests/themes.stories.tsx
+++ b/packages/reshaped/src/tests/themes.stories.tsx
@@ -1,20 +1,20 @@
 import { useLayoutEffect, useState } from "react";
 
-import Actionable from "components/Actionable";
-import Alert from "components/Alert";
-import Avatar from "components/Avatar";
-import Badge from "components/Badge";
-import Button from "components/Button";
-import Card from "components/Card";
-import DropdownMenu from "components/DropdownMenu";
-import Link from "components/Link";
-import Switch from "components/Switch";
-import Text from "components/Text";
-import TextField from "components/TextField";
-import Theme, { useTheme } from "components/Theme";
-import View from "components/View";
-import IconZap from "icons/Mic";
-import { Example } from "utilities/storybook";
+import Actionable from "@/components/Actionable";
+import Alert from "@/components/Alert";
+import Avatar from "@/components/Avatar";
+import Badge from "@/components/Badge";
+import Button from "@/components/Button";
+import Card from "@/components/Card";
+import DropdownMenu from "@/components/DropdownMenu";
+import Link from "@/components/Link";
+import Switch from "@/components/Switch";
+import Text from "@/components/Text";
+import TextField from "@/components/TextField";
+import Theme, { useTheme } from "@/components/Theme";
+import View from "@/components/View";
+import IconZap from "@/icons/Mic";
+import { Example } from "@/utilities/storybook";
 
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "themes";
 
diff --git a/packages/reshaped/src/tests/themingWithDefinition.ts b/packages/reshaped/src/tests/themingWithDefinition.ts
index f540e630..5a4af7f9 100644
--- a/packages/reshaped/src/tests/themingWithDefinition.ts
+++ b/packages/reshaped/src/tests/themingWithDefinition.ts
@@ -1,6 +1,6 @@
 /**
  * File importing theming client to test its bundle size
  */
-import * as themes from "themes/index";
+import * as themes from "@/themes/index";
 
 console.log(themes);
diff --git a/packages/reshaped/src/tests/themingWithoutDefinition.ts b/packages/reshaped/src/tests/themingWithoutDefinition.ts
index 759d6719..09640e7a 100644
--- a/packages/reshaped/src/tests/themingWithoutDefinition.ts
+++ b/packages/reshaped/src/tests/themingWithoutDefinition.ts
@@ -1,6 +1,6 @@
 /**
  * File importing theming client to test its bundle size
  */
-import { getThemeCSS, generateThemeColors } from "themes/index";
+import { getThemeCSS, generateThemeColors } from "@/themes/index";
 
 console.log({ getThemeCSS, generateThemeColors });
diff --git a/packages/reshaped/src/themes/_generator/constants.ts b/packages/reshaped/src/themes/_generator/constants.ts
index 2404a473..beaac935 100644
--- a/packages/reshaped/src/themes/_generator/constants.ts
+++ b/packages/reshaped/src/themes/_generator/constants.ts
@@ -1,4 +1,4 @@
-import type { Name } from "themes/_generator/tokens/color/color.types";
+import type { Name } from "@/themes/_generator/tokens/color/color.types";
 
 export const bgWithDynamicForeground: Name[] = [
 	"backgroundNeutral",
diff --git a/packages/reshaped/src/themes/_generator/definitions/reshaped.ts b/packages/reshaped/src/themes/_generator/definitions/reshaped.ts
index 16f81cfe..ec0b7679 100644
--- a/packages/reshaped/src/themes/_generator/definitions/reshaped.ts
+++ b/packages/reshaped/src/themes/_generator/definitions/reshaped.ts
@@ -1,4 +1,4 @@
-import breakpoints from "constants/breakpoints";
+import breakpoints from "@/constants/breakpoints";
 
 import type { ThemeDefinition } from "../tokens/types";
 
diff --git a/packages/reshaped/src/themes/_generator/definitions/slate.ts b/packages/reshaped/src/themes/_generator/definitions/slate.ts
index 3bcd3709..52e6c570 100644
--- a/packages/reshaped/src/themes/_generator/definitions/slate.ts
+++ b/packages/reshaped/src/themes/_generator/definitions/slate.ts
@@ -1,8 +1,8 @@
-import generateColors from "themes/_generator/tokens/color/utilities/generateColors";
+import generateColors from "@/themes/_generator/tokens/color/utilities/generateColors";
 
 import reshapedDefinition from "./reshaped";
 
-import type { PassedThemeDefinition } from "themes/_generator/tokens/types";
+import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types";
 
 const theme: PassedThemeDefinition = {
 	...reshapedDefinition,
diff --git a/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts b/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts
index fcfe3165..c02743c3 100644
--- a/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts
+++ b/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts
@@ -1,4 +1,4 @@
-import { PrivateOptions } from "themes/_generator/types";
+import { PrivateOptions } from "@/themes/_generator/types";
 
 import type * as T from "./color.types";
 import type { Transformer, TransformedToken } from "../types";
diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts b/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts
index cc245b4c..e285f074 100644
--- a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts
+++ b/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts
@@ -10,7 +10,7 @@ import {
 
 import { hexToOklch, tokenToOklchToken } from "./convert";
 
-import type { PassedThemeDefinition } from "themes/_generator/tokens/types";
+import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types";
 
 const parseColor = (color: HexColor | PassedToken) => {
 	const isString = typeof color === "string";
diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts b/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts
index bd54bf62..e46c0011 100644
--- a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts
+++ b/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts
@@ -1,4 +1,4 @@
-import { capitalize } from "utilities/string";
+import { capitalize } from "@/utilities/string";
 
 import { bgWithDynamicForeground } from "../../../constants";
 import { PassedThemeDefinition } from "../../types";
diff --git a/packages/reshaped/src/themes/_generator/tokens/css.ts b/packages/reshaped/src/themes/_generator/tokens/css.ts
index e8b65463..53bb9fbb 100644
--- a/packages/reshaped/src/themes/_generator/tokens/css.ts
+++ b/packages/reshaped/src/themes/_generator/tokens/css.ts
@@ -1,4 +1,4 @@
-import { camelToKebab } from "utilities/string";
+import { camelToKebab } from "@/utilities/string";
 
 import type * as T from "../tokens/types";
 
diff --git a/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts b/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts
index f29cc247..d35d5f2d 100644
--- a/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts
+++ b/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts
@@ -1,8 +1,8 @@
 import type {
 	GeneratedThemeDefinition,
 	PassedThemeDefinition,
-} from "themes/_generator/tokens/types";
-import type { GeneratedName as GeneratedUnitName } from "themes/_generator/tokens/unit/unit.types";
+} from "@/themes/_generator/tokens/types";
+import type { GeneratedName as GeneratedUnitName } from "@/themes/_generator/tokens/unit/unit.types";
 
 export const generateUnits = (definition: PassedThemeDefinition) => {
 	const result: Partial<GeneratedThemeDefinition["unit"]> = {};
diff --git a/packages/reshaped/src/themes/_generator/types.ts b/packages/reshaped/src/themes/_generator/types.ts
index 9e43ece2..df2e909e 100644
--- a/packages/reshaped/src/themes/_generator/types.ts
+++ b/packages/reshaped/src/themes/_generator/types.ts
@@ -1,4 +1,4 @@
-import type { ReshapedConfig } from "types/config";
+import type { ReshapedConfig } from "@/types/config";
 
 export type PartialDeep<T> = {
 	[K in keyof T]?: {
diff --git a/packages/reshaped/src/themes/index.ts b/packages/reshaped/src/themes/index.ts
index e9585fe8..308a10a1 100644
--- a/packages/reshaped/src/themes/index.ts
+++ b/packages/reshaped/src/themes/index.ts
@@ -1,29 +1,29 @@
-import transform from "themes/_generator/transform";
+import transform from "@/themes/_generator/transform";
 
-import type { PassedThemeDefinition } from "themes/_generator/tokens/types";
-import type * as T from "themes/_generator/types";
+import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types";
+import type * as T from "@/themes/_generator/types";
 
 /**
  * Exported types
  */
-export type { ThemeDefinition } from "themes/_generator/tokens/types";
-export type { Name as ColorTokenName } from "themes/_generator/tokens/color/color.types";
-export type { Name as DurationTokenName } from "themes/_generator/tokens/duration/duration.types";
-export type { Name as EasingTokenName } from "themes/_generator/tokens/easing/easing.types";
-export type { Name as FontTokenName } from "themes/_generator/tokens/font/font.types";
-export type { Name as FontFamilyTokenName } from "themes/_generator/tokens/fontFamily/fontFamily.types";
-export type { Name as FontWeightTokenName } from "themes/_generator/tokens/fontWeight/fontWeight.types";
-export type { Name as RadiusTokenName } from "themes/_generator/tokens/radius/radius.types";
-export type { Name as ShadowTokenName } from "themes/_generator/tokens/shadow/shadow.types";
-export type { GeneratedName as UnitTokenName } from "themes/_generator/tokens/unit/unit.types";
-export type { Name as ViewportTokenName } from "themes/_generator/tokens/viewport/viewport.types";
+export type { ThemeDefinition } from "@/themes/_generator/tokens/types";
+export type { Name as ColorTokenName } from "@/themes/_generator/tokens/color/color.types";
+export type { Name as DurationTokenName } from "@/themes/_generator/tokens/duration/duration.types";
+export type { Name as EasingTokenName } from "@/themes/_generator/tokens/easing/easing.types";
+export type { Name as FontTokenName } from "@/themes/_generator/tokens/font/font.types";
+export type { Name as FontFamilyTokenName } from "@/themes/_generator/tokens/fontFamily/fontFamily.types";
+export type { Name as FontWeightTokenName } from "@/themes/_generator/tokens/fontWeight/fontWeight.types";
+export type { Name as RadiusTokenName } from "@/themes/_generator/tokens/radius/radius.types";
+export type { Name as ShadowTokenName } from "@/themes/_generator/tokens/shadow/shadow.types";
+export type { GeneratedName as UnitTokenName } from "@/themes/_generator/tokens/unit/unit.types";
+export type { Name as ViewportTokenName } from "@/themes/_generator/tokens/viewport/viewport.types";
 
 /**
  * Exported runtime code
  */
-export { default as baseThemeDefinition } from "themes/_generator/definitions/reshaped";
-export { default as generateThemeColors } from "themes/_generator/tokens/color/utilities/generateColors";
-export { default as transform } from "themes/_generator/transform";
+export { default as baseThemeDefinition } from "@/themes/_generator/definitions/reshaped";
+export { default as generateThemeColors } from "@/themes/_generator/tokens/color/utilities/generateColors";
+export { default as transform } from "@/themes/_generator/transform";
 
 export const getThemeCSS = (
 	name: string,
diff --git a/packages/reshaped/src/types/config.ts b/packages/reshaped/src/types/config.ts
index 2c3b3155..3c47fe53 100644
--- a/packages/reshaped/src/types/config.ts
+++ b/packages/reshaped/src/types/config.ts
@@ -1,5 +1,5 @@
-import type { HexColor, Hue, OklchColor } from "themes/_generator/tokens/color/color.types";
-import type { PassedThemeDefinition } from "themes/_generator/tokens/types";
+import type { HexColor, Hue, OklchColor } from "@/themes/_generator/tokens/color/color.types";
+import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types";
 
 export type ReshapedConfig = {
 	themes?: Record<string, PassedThemeDefinition>;
diff --git a/packages/reshaped/src/utilities/props.ts b/packages/reshaped/src/utilities/props.ts
index 608ba123..1dd47639 100644
--- a/packages/reshaped/src/utilities/props.ts
+++ b/packages/reshaped/src/utilities/props.ts
@@ -1,5 +1,5 @@
 import type { CSSVariable } from "@reshaped/headless";
-import type * as G from "types/global";
+import type * as G from "@/types/global";
 
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
diff --git a/packages/reshaped/src/utilities/storybook/Example.tsx b/packages/reshaped/src/utilities/storybook/Example.tsx
index d4218c9e..cb235808 100644
--- a/packages/reshaped/src/utilities/storybook/Example.tsx
+++ b/packages/reshaped/src/utilities/storybook/Example.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import Text from "components/Text";
-import View from "components/View";
+import Text from "@/components/Text";
+import View from "@/components/View";
 
 type Props = {
 	title?: string | string[];
diff --git a/packages/reshaped/src/utilities/tests/props.test.ts b/packages/reshaped/src/utilities/tests/props.test.ts
index bc4fa44b..c74369e4 100644
--- a/packages/reshaped/src/utilities/tests/props.test.ts
+++ b/packages/reshaped/src/utilities/tests/props.test.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect } from "vitest";
 
-import { responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { responsiveClassNames, responsivePropDependency } from "@/utilities/props";
 
 describe("Utilities/Props/responsiveClassNames", () => {
 	const s = { "--size-small": "small", "--size-medium--l": "medium" };
diff --git a/packages/reshaped/tsconfig.esm.json b/packages/reshaped/tsconfig.esm.json
index 4f654aeb..01d6342e 100644
--- a/packages/reshaped/tsconfig.esm.json
+++ b/packages/reshaped/tsconfig.esm.json
@@ -1,14 +1,15 @@
 {
-	"extends": "./tsconfig.json",
+	"extends": "../../tsconfig.json",
 	"compilerOptions": {
-		"outDir": "dist",
+		"outDir": "./dist",
 		"baseUrl": "./src",
 		"rootDir": "./src",
 		"target": "ES2022",
 		"module": "ESNext",
 		"moduleResolution": "Bundler",
-		"paths": { "*": ["*"] }
+		"paths": { "@/*": ["./*"] }
 	},
+	"include": ["src/**/*"],
 	"exclude": [
 		"node_modules",
 		"dist",
diff --git a/packages/reshaped/tsconfig.json b/packages/reshaped/tsconfig.json
index 4033e1d8..f8a3b983 100644
--- a/packages/reshaped/tsconfig.json
+++ b/packages/reshaped/tsconfig.json
@@ -4,7 +4,8 @@
 		"outDir": "./dist",
 		"baseUrl": "./src",
 		"rootDir": "./src",
-		"paths": { "*": ["*"] }
+		"moduleResolution": "Bundler",
+		"paths": { "@/*": ["./*"] }
 	},
 	"exclude": ["node_modules", "dist", "tools", "./commitlint.config.ts"]
 }
diff --git a/packages/reshaped/tsconfig.stories.json b/packages/reshaped/tsconfig.stories.json
index 5bc63a56..70674026 100644
--- a/packages/reshaped/tsconfig.stories.json
+++ b/packages/reshaped/tsconfig.stories.json
@@ -5,7 +5,7 @@
 		"outDir": "./dist",
 		"rootDir": "./src",
 		"baseUrl": "./src",
-		"paths": { "*": ["*"] },
+		"paths": { "@/*": ["./*"] },
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext"
 	},