From 6dd3540995c02595ef0a40fc0708c6f389ef982d Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Thu, 3 Oct 2024 19:02:59 +0200
Subject: [PATCH] add eslint rule and deprecate className in box

---
 .eslintrc.yml | 7 +++++--
 src/box.tsx   | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 3085e0c736..cf94e21da0 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 11c33b6e1b..351ccdc8e1 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" */