diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 02b94dfca..88c27633a 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -19,12 +19,13 @@ function handleColor(color: string | undefined) {
   return vars.$color[type][value] ?? undefined;
 }
 
-function handleSpacing(spacing: string | undefined) {
-  if (!spacing) {
+function handleDimension(dimension: string | undefined) {
+  if (!dimension) {
     return undefined;
   }
+  const [type, value] = dimension.split(".");
   // @ts-ignore
-  return vars.$dimension[spacing] ?? vars.$horizontalSpacing[spacing] ?? undefined;
+  return vars.$dimension[dimension] ?? vars.$dimension[type][value] ?? undefined;
 }
 
 function handleSize(size: string | undefined) {
@@ -211,14 +212,14 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
           "--seed-box-height": handleSize(height),
           "--seed-box-min-height": handleSize(minHeight),
           "--seed-box-max-height": handleSize(maxHeight),
-          "--seed-box-padding": handleSpacing(padding),
-          "--seed-box-padding-x": handleSpacing(paddingX),
-          "--seed-box-padding-y": handleSpacing(paddingY),
-          "--seed-box-padding-top": handleSpacing(paddingTop),
-          "--seed-box-padding-right": handleSpacing(paddingRight),
-          "--seed-box-padding-bottom": handleSpacing(paddingBottom),
-          "--seed-box-padding-left": handleSpacing(paddingLeft),
-          "--seed-box-gap": handleSpacing(gap),
+          "--seed-box-padding": handleDimension(padding),
+          "--seed-box-padding-x": handleDimension(paddingX),
+          "--seed-box-padding-y": handleDimension(paddingY),
+          "--seed-box-padding-top": handleDimension(paddingTop),
+          "--seed-box-padding-right": handleDimension(paddingRight),
+          "--seed-box-padding-bottom": handleDimension(paddingBottom),
+          "--seed-box-padding-left": handleDimension(paddingLeft),
+          "--seed-box-gap": handleDimension(gap),
           "--seed-box-display": display,
           "--seed-box-position": position,
           "--seed-box-overflow-x": overflowX,
diff --git a/packages/vars/lib/unit.d.ts b/packages/vars/lib/unit.d.ts
deleted file mode 100644
index 31b942c33..000000000
--- a/packages/vars/lib/unit.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export declare const s0_5 = "var(--seed-v3-unit-s0_5)";
-export declare const s1 = "var(--seed-v3-unit-s1)";
-export declare const s1_5 = "var(--seed-v3-unit-s1_5)";
-export declare const s2 = "var(--seed-v3-unit-s2)";
-export declare const s2_5 = "var(--seed-v3-unit-s2_5)";
-export declare const s3 = "var(--seed-v3-unit-s3)";
-export declare const s3_5 = "var(--seed-v3-unit-s3_5)";
-export declare const s4 = "var(--seed-v3-unit-s4)";
-export declare const s4_5 = "var(--seed-v3-unit-s4_5)";
-export declare const s5 = "var(--seed-v3-unit-s5)";
-export declare const s6 = "var(--seed-v3-unit-s6)";
-export declare const s7 = "var(--seed-v3-unit-s7)";
-export declare const s8 = "var(--seed-v3-unit-s8)";
-export declare const s9 = "var(--seed-v3-unit-s9)";
-export declare const s10 = "var(--seed-v3-unit-s10)";
-export declare const s12 = "var(--seed-v3-unit-s12)";
-export declare const s13 = "var(--seed-v3-unit-s13)";
-export declare const s14 = "var(--seed-v3-unit-s14)";
-export declare const s16 = "var(--seed-v3-unit-s16)";
\ No newline at end of file
diff --git a/packages/vars/lib/unit.mjs b/packages/vars/lib/unit.mjs
deleted file mode 100644
index c1b72cd7b..000000000
--- a/packages/vars/lib/unit.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-export const s0_5 = "var(--seed-v3-unit-s0_5)";
-export const s1 = "var(--seed-v3-unit-s1)";
-export const s1_5 = "var(--seed-v3-unit-s1_5)";
-export const s2 = "var(--seed-v3-unit-s2)";
-export const s2_5 = "var(--seed-v3-unit-s2_5)";
-export const s3 = "var(--seed-v3-unit-s3)";
-export const s3_5 = "var(--seed-v3-unit-s3_5)";
-export const s4 = "var(--seed-v3-unit-s4)";
-export const s4_5 = "var(--seed-v3-unit-s4_5)";
-export const s5 = "var(--seed-v3-unit-s5)";
-export const s6 = "var(--seed-v3-unit-s6)";
-export const s7 = "var(--seed-v3-unit-s7)";
-export const s8 = "var(--seed-v3-unit-s8)";
-export const s9 = "var(--seed-v3-unit-s9)";
-export const s10 = "var(--seed-v3-unit-s10)";
-export const s12 = "var(--seed-v3-unit-s12)";
-export const s13 = "var(--seed-v3-unit-s13)";
-export const s14 = "var(--seed-v3-unit-s14)";
-export const s16 = "var(--seed-v3-unit-s16)";
\ No newline at end of file
diff --git a/packages/vars/lib/vars.mjs b/packages/vars/lib/vars.mjs
index f3e09b0c3..753abff68 100644
--- a/packages/vars/lib/vars.mjs
+++ b/packages/vars/lib/vars.mjs
@@ -6,4 +6,4 @@ export * as $gradient from "./gradient.mjs";
 export * as $lineHeight from "./line-height.mjs";
 export * as $radius from "./radius.mjs";
 export * as $timingFunction from "./timing-function.mjs";
-export * as $dimension from "./unit.mjs";
+export * as $dimension from "./dimension.mjs";