diff --git a/.eslintrc.yml b/.eslintrc.yml
index 3085e0c73..cf94e21da 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -23,8 +23,11 @@ overrides:
       rules:
           no-restricted-imports:
               - error
-              - name: '@vanilla-extract/css'
-                message: This package should only be imported in css files
+              - patterns:
+                    - group:
+                          - '@vanilla-extract/css'
+                          - '**/sprinkles.css'
+                      message: This package should only be imported in css files
 rules:
     import/extensions:
         - error
diff --git a/src/box.tsx b/src/box.tsx
index 11c33b6e1..351ccdc8e 100644
--- a/src/box.tsx
+++ b/src/box.tsx
@@ -19,6 +19,10 @@ type Props = {
     paddingRight?: ByBreakpoint<PadSize>;
     as?: React.ComponentType<any> | string;
     children?: React.ReactNode;
+    /**
+     * @deprecated this component is meant to be used only to add padding.
+     * Consider using a div (or similar) instead if you need to add extra styles
+     */
     className?: string;
     role?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */