From a9673022914f8d9546ddd4f25b33a91d1db0b8dc Mon Sep 17 00:00:00 2001
From: Andrei S <andrey_overdose@mail.ru>
Date: Fri, 6 Mar 2026 10:52:09 +0400
Subject: [PATCH] fix: update position property whitelist

---
 src/components/box/Box.stories.tsx | 14 ++++++++++++++
 tailwind.config.ts                 | 30 +++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/box/Box.stories.tsx b/src/components/box/Box.stories.tsx
index 50063cb..914aa0f 100644
--- a/src/components/box/Box.stories.tsx
+++ b/src/components/box/Box.stories.tsx
@@ -602,3 +602,17 @@ export const CustomList: Story = {
     );
   },
 };
+
+export const DeviceDependingPositioning: Story = {
+  render() {
+    return (
+      <Box
+        d={{ position: { type: "fixed", top: "100px" } }}
+        md={{ position: { type: "relative", top: "auto" } }}
+        position={{ type: "absolute", top: 10, left: 10 }}
+      >
+        Position Test
+      </Box>
+    );
+  },
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2b61a8a..de46861 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,11 +74,31 @@ const generatePosition = (): Array<string> => {
     "md:right-[var(--mdPositionRight)]",
     "md:bottom-[var(--mdPositionBottom)]",
     "md:z-[var(--mdPositionZ)]",
-    "d:top-[var(--dPositionTop)]",
-    "d:left-[var(--dPositionLeft)]",
-    "d:right-[var(--dPositionRight)]",
-    "d:bottom-[var(--dPositionBottom)]",
-    "d:z-[var(--dPositionZ)]",
+    "md:top-auto",
+    "md:left-auto",
+    "md:right-auto",
+    "md:bottom-auto",
+    "md:absolute",
+    "md:fixed",
+    "md:relative",
+    "md:sticky",
+    "md:static",
+    "md:inherit",
+    "lg:top-[var(--dPositionTop)]",
+    "lg:left-[var(--dPositionLeft)]",
+    "lg:right-[var(--dPositionRight)]",
+    "lg:bottom-[var(--dPositionBottom)]",
+    "lg:z-[var(--dPositionZ)]",
+    "lg:top-auto",
+    "lg:left-auto",
+    "lg:right-auto",
+    "lg:bottom-auto",
+    "lg:absolute",
+    "lg:fixed",
+    "lg:relative",
+    "lg:sticky",
+    "lg:static",
+    "lg:inherit",
   ];
 };
 const generateCursorClasses = (): Array<string> => {