Fix escape hash clash (#1949)

* Fix escape hash clash

* chore: add changeset

* chore: add tests

.changeset/gentle-jars-draw.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/shared': patch
+---
+
+Fix issue where `[]` escape hatch clashed with named grid lines

packages/shared/__tests__/arbitrary-value.test.ts

@@ -0,0 +1,41 @@
+import { describe, test, expect } from 'vitest'
+import { getArbitraryValue } from '../src'
+
+describe('arbitrary className', () => {
+  test('simple', () => {
+    expect(getArbitraryValue('[#3B00B9]')).toMatchInlineSnapshot('"#3B00B9"')
+    expect(getArbitraryValue('[123px]')).toMatchInlineSnapshot('"123px"')
+  })
+
+  test('named grid lines', () => {
+    expect(
+      getArbitraryValue(`
+    [full-start]
+      minmax(16px, 1fr)
+        [breakout-start]
+          minmax(0, 16px)
+            [content-start]
+              minmax(min-content, 1024px)
+            [content-end]
+          minmax(0, 16px)
+        [breakout-end]
+      minmax(16px, 1fr)
+    [full-end]
+  `),
+    ).toMatchInlineSnapshot(`
+      "
+          [full-start]
+            minmax(16px, 1fr)
+              [breakout-start]
+                minmax(0, 16px)
+                  [content-start]
+                    minmax(min-content, 1024px)
+                  [content-end]
+                minmax(0, 16px)
+              [breakout-end]
+            minmax(16px, 1fr)
+          [full-end]
+        "
+    `)
+  })
+})

packages/shared/src/arbitrary-value.ts

@@ -2,7 +2,25 @@ export const getArbitraryValue = (value: string) => {
   if (!value) return value
 
   if (value[0] === '[' && value[value.length - 1] === ']') {
-    return value.slice(1, -1)
+    const innerValue = value.slice(1, -1)
+    let bracketCount = 0
+
+    for (let i = 0; i < innerValue.length; i++) {
+      if (innerValue[i] === '[') {
+        bracketCount++
+      } else if (innerValue[i] === ']') {
+        if (bracketCount === 0) {
+          // Unmatched closing bracket found
+          return value
+        }
+        bracketCount--
+      }
+    }
+
+    if (bracketCount === 0) {
+      // All brackets are balanced
+      return innerValue
+    }
   }
 
   return value