@okshaun/components 0.5.8 → 1.0.1

package/dist/specs/conditions.json

@@ -0,0 +1,1901 @@
+{
+  "type": "conditions",
+  "data": [
+    {
+      "name": "_hover",
+      "value": "&:is(:hover, [data-hover=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _hover: '4' } })",
+        "css({ margin: '2', _hover: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _hover: '4' }} />",
+        "<Box margin=\"2\" _hover={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_focus",
+      "value": "&:is(:focus, [data-focus=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _focus: '4' } })",
+        "css({ margin: '2', _focus: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _focus: '4' }} />",
+        "<Box margin=\"2\" _focus={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_focusWithin",
+      "value": "&:focus-within",
+      "functionExamples": [
+        "css({ margin: { base: '2', _focusWithin: '4' } })",
+        "css({ margin: '2', _focusWithin: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _focusWithin: '4' }} />",
+        "<Box margin=\"2\" _focusWithin={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_focusVisible",
+      "value": "&:is(:focus-visible, [data-focus-visible=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _focusVisible: '4' } })",
+        "css({ margin: '2', _focusVisible: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _focusVisible: '4' }} />",
+        "<Box margin=\"2\" _focusVisible={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_disabled",
+      "value": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _disabled: '4' } })",
+        "css({ margin: '2', _disabled: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _disabled: '4' }} />",
+        "<Box margin=\"2\" _disabled={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_active",
+      "value": "&:is(:active, [data-active=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _active: '4' } })",
+        "css({ margin: '2', _active: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _active: '4' }} />",
+        "<Box margin=\"2\" _active={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_visited",
+      "value": "&:visited",
+      "functionExamples": [
+        "css({ margin: { base: '2', _visited: '4' } })",
+        "css({ margin: '2', _visited: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _visited: '4' }} />",
+        "<Box margin=\"2\" _visited={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_target",
+      "value": "&:target",
+      "functionExamples": [
+        "css({ margin: { base: '2', _target: '4' } })",
+        "css({ margin: '2', _target: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _target: '4' }} />",
+        "<Box margin=\"2\" _target={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_readOnly",
+      "value": "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _readOnly: '4' } })",
+        "css({ margin: '2', _readOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _readOnly: '4' }} />",
+        "<Box margin=\"2\" _readOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_readWrite",
+      "value": "&:read-write",
+      "functionExamples": [
+        "css({ margin: { base: '2', _readWrite: '4' } })",
+        "css({ margin: '2', _readWrite: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _readWrite: '4' }} />",
+        "<Box margin=\"2\" _readWrite={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_empty",
+      "value": "&:is(:empty, [data-empty])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _empty: '4' } })",
+        "css({ margin: '2', _empty: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _empty: '4' }} />",
+        "<Box margin=\"2\" _empty={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_checked",
+      "value": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _checked: '4' } })",
+        "css({ margin: '2', _checked: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _checked: '4' }} />",
+        "<Box margin=\"2\" _checked={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_enabled",
+      "value": "&:enabled",
+      "functionExamples": [
+        "css({ margin: { base: '2', _enabled: '4' } })",
+        "css({ margin: '2', _enabled: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _enabled: '4' }} />",
+        "<Box margin=\"2\" _enabled={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_expanded",
+      "value": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _expanded: '4' } })",
+        "css({ margin: '2', _expanded: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _expanded: '4' }} />",
+        "<Box margin=\"2\" _expanded={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_highlighted",
+      "value": "&[data-highlighted]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _highlighted: '4' } })",
+        "css({ margin: '2', _highlighted: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _highlighted: '4' }} />",
+        "<Box margin=\"2\" _highlighted={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_complete",
+      "value": "&[data-complete]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _complete: '4' } })",
+        "css({ margin: '2', _complete: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _complete: '4' }} />",
+        "<Box margin=\"2\" _complete={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_incomplete",
+      "value": "&[data-incomplete]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _incomplete: '4' } })",
+        "css({ margin: '2', _incomplete: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _incomplete: '4' }} />",
+        "<Box margin=\"2\" _incomplete={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_dragging",
+      "value": "&[data-dragging]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _dragging: '4' } })",
+        "css({ margin: '2', _dragging: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _dragging: '4' }} />",
+        "<Box margin=\"2\" _dragging={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_before",
+      "value": "&::before",
+      "functionExamples": [
+        "css({ margin: { base: '2', _before: '4' } })",
+        "css({ margin: '2', _before: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _before: '4' }} />",
+        "<Box margin=\"2\" _before={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_after",
+      "value": "&::after",
+      "functionExamples": [
+        "css({ margin: { base: '2', _after: '4' } })",
+        "css({ margin: '2', _after: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _after: '4' }} />",
+        "<Box margin=\"2\" _after={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_firstLetter",
+      "value": "&::first-letter",
+      "functionExamples": [
+        "css({ margin: { base: '2', _firstLetter: '4' } })",
+        "css({ margin: '2', _firstLetter: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _firstLetter: '4' }} />",
+        "<Box margin=\"2\" _firstLetter={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_firstLine",
+      "value": "&::first-line",
+      "functionExamples": [
+        "css({ margin: { base: '2', _firstLine: '4' } })",
+        "css({ margin: '2', _firstLine: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _firstLine: '4' }} />",
+        "<Box margin=\"2\" _firstLine={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_marker",
+      "value": "&::marker, &::-webkit-details-marker",
+      "functionExamples": [
+        "css({ margin: { base: '2', _marker: '4' } })",
+        "css({ margin: '2', _marker: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _marker: '4' }} />",
+        "<Box margin=\"2\" _marker={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_selection",
+      "value": "&::selection",
+      "functionExamples": [
+        "css({ margin: { base: '2', _selection: '4' } })",
+        "css({ margin: '2', _selection: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _selection: '4' }} />",
+        "<Box margin=\"2\" _selection={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_file",
+      "value": "&::file-selector-button",
+      "functionExamples": [
+        "css({ margin: { base: '2', _file: '4' } })",
+        "css({ margin: '2', _file: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _file: '4' }} />",
+        "<Box margin=\"2\" _file={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_backdrop",
+      "value": "&::backdrop",
+      "functionExamples": [
+        "css({ margin: { base: '2', _backdrop: '4' } })",
+        "css({ margin: '2', _backdrop: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _backdrop: '4' }} />",
+        "<Box margin=\"2\" _backdrop={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_first",
+      "value": "&:first-child",
+      "functionExamples": [
+        "css({ margin: { base: '2', _first: '4' } })",
+        "css({ margin: '2', _first: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _first: '4' }} />",
+        "<Box margin=\"2\" _first={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_last",
+      "value": "&:last-child",
+      "functionExamples": [
+        "css({ margin: { base: '2', _last: '4' } })",
+        "css({ margin: '2', _last: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _last: '4' }} />",
+        "<Box margin=\"2\" _last={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_only",
+      "value": "&:only-child",
+      "functionExamples": [
+        "css({ margin: { base: '2', _only: '4' } })",
+        "css({ margin: '2', _only: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _only: '4' }} />",
+        "<Box margin=\"2\" _only={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_even",
+      "value": "&:nth-child(even)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _even: '4' } })",
+        "css({ margin: '2', _even: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _even: '4' }} />",
+        "<Box margin=\"2\" _even={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_odd",
+      "value": "&:nth-child(odd)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _odd: '4' } })",
+        "css({ margin: '2', _odd: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _odd: '4' }} />",
+        "<Box margin=\"2\" _odd={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_firstOfType",
+      "value": "&:first-of-type",
+      "functionExamples": [
+        "css({ margin: { base: '2', _firstOfType: '4' } })",
+        "css({ margin: '2', _firstOfType: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _firstOfType: '4' }} />",
+        "<Box margin=\"2\" _firstOfType={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_lastOfType",
+      "value": "&:last-of-type",
+      "functionExamples": [
+        "css({ margin: { base: '2', _lastOfType: '4' } })",
+        "css({ margin: '2', _lastOfType: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _lastOfType: '4' }} />",
+        "<Box margin=\"2\" _lastOfType={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_onlyOfType",
+      "value": "&:only-of-type",
+      "functionExamples": [
+        "css({ margin: { base: '2', _onlyOfType: '4' } })",
+        "css({ margin: '2', _onlyOfType: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _onlyOfType: '4' }} />",
+        "<Box margin=\"2\" _onlyOfType={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerFocus",
+      "value": ".peer:is(:focus, [data-focus]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerFocus: '4' } })",
+        "css({ margin: '2', _peerFocus: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerFocus: '4' }} />",
+        "<Box margin=\"2\" _peerFocus={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerHover",
+      "value": ".peer:is(:hover, [data-hover]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerHover: '4' } })",
+        "css({ margin: '2', _peerHover: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerHover: '4' }} />",
+        "<Box margin=\"2\" _peerHover={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerActive",
+      "value": ".peer:is(:active, [data-active]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerActive: '4' } })",
+        "css({ margin: '2', _peerActive: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerActive: '4' }} />",
+        "<Box margin=\"2\" _peerActive={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerFocusWithin",
+      "value": ".peer:focus-within ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerFocusWithin: '4' } })",
+        "css({ margin: '2', _peerFocusWithin: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerFocusWithin: '4' }} />",
+        "<Box margin=\"2\" _peerFocusWithin={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerFocusVisible",
+      "value": ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerFocusVisible: '4' } })",
+        "css({ margin: '2', _peerFocusVisible: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerFocusVisible: '4' }} />",
+        "<Box margin=\"2\" _peerFocusVisible={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerDisabled",
+      "value": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerDisabled: '4' } })",
+        "css({ margin: '2', _peerDisabled: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerDisabled: '4' }} />",
+        "<Box margin=\"2\" _peerDisabled={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerChecked",
+      "value": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerChecked: '4' } })",
+        "css({ margin: '2', _peerChecked: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerChecked: '4' }} />",
+        "<Box margin=\"2\" _peerChecked={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerInvalid",
+      "value": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerInvalid: '4' } })",
+        "css({ margin: '2', _peerInvalid: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerInvalid: '4' }} />",
+        "<Box margin=\"2\" _peerInvalid={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerExpanded",
+      "value": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerExpanded: '4' } })",
+        "css({ margin: '2', _peerExpanded: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerExpanded: '4' }} />",
+        "<Box margin=\"2\" _peerExpanded={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_peerPlaceholderShown",
+      "value": ".peer:placeholder-shown ~ &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _peerPlaceholderShown: '4' } })",
+        "css({ margin: '2', _peerPlaceholderShown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _peerPlaceholderShown: '4' }} />",
+        "<Box margin=\"2\" _peerPlaceholderShown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupFocus",
+      "value": ".group:is(:focus, [data-focus]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupFocus: '4' } })",
+        "css({ margin: '2', _groupFocus: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupFocus: '4' }} />",
+        "<Box margin=\"2\" _groupFocus={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupHover",
+      "value": ".group:is(:hover, [data-hover]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupHover: '4' } })",
+        "css({ margin: '2', _groupHover: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupHover: '4' }} />",
+        "<Box margin=\"2\" _groupHover={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupActive",
+      "value": ".group:is(:active, [data-active]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupActive: '4' } })",
+        "css({ margin: '2', _groupActive: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupActive: '4' }} />",
+        "<Box margin=\"2\" _groupActive={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupFocusWithin",
+      "value": ".group:focus-within &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupFocusWithin: '4' } })",
+        "css({ margin: '2', _groupFocusWithin: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupFocusWithin: '4' }} />",
+        "<Box margin=\"2\" _groupFocusWithin={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupFocusVisible",
+      "value": ".group:is(:focus-visible, [data-focus-visible]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupFocusVisible: '4' } })",
+        "css({ margin: '2', _groupFocusVisible: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupFocusVisible: '4' }} />",
+        "<Box margin=\"2\" _groupFocusVisible={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupDisabled",
+      "value": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupDisabled: '4' } })",
+        "css({ margin: '2', _groupDisabled: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupDisabled: '4' }} />",
+        "<Box margin=\"2\" _groupDisabled={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupChecked",
+      "value": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupChecked: '4' } })",
+        "css({ margin: '2', _groupChecked: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupChecked: '4' }} />",
+        "<Box margin=\"2\" _groupChecked={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupExpanded",
+      "value": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupExpanded: '4' } })",
+        "css({ margin: '2', _groupExpanded: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupExpanded: '4' }} />",
+        "<Box margin=\"2\" _groupExpanded={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_groupInvalid",
+      "value": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _groupInvalid: '4' } })",
+        "css({ margin: '2', _groupInvalid: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _groupInvalid: '4' }} />",
+        "<Box margin=\"2\" _groupInvalid={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_indeterminate",
+      "value": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _indeterminate: '4' } })",
+        "css({ margin: '2', _indeterminate: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _indeterminate: '4' }} />",
+        "<Box margin=\"2\" _indeterminate={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_required",
+      "value": "&:is(:required, [data-required], [aria-required=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _required: '4' } })",
+        "css({ margin: '2', _required: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _required: '4' }} />",
+        "<Box margin=\"2\" _required={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_valid",
+      "value": "&:is(:valid, [data-valid])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _valid: '4' } })",
+        "css({ margin: '2', _valid: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _valid: '4' }} />",
+        "<Box margin=\"2\" _valid={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_invalid",
+      "value": "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _invalid: '4' } })",
+        "css({ margin: '2', _invalid: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _invalid: '4' }} />",
+        "<Box margin=\"2\" _invalid={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_autofill",
+      "value": "&:autofill",
+      "functionExamples": [
+        "css({ margin: { base: '2', _autofill: '4' } })",
+        "css({ margin: '2', _autofill: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _autofill: '4' }} />",
+        "<Box margin=\"2\" _autofill={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_inRange",
+      "value": "&:is(:in-range, [data-in-range])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _inRange: '4' } })",
+        "css({ margin: '2', _inRange: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _inRange: '4' }} />",
+        "<Box margin=\"2\" _inRange={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_outOfRange",
+      "value": "&:is(:out-of-range, [data-outside-range])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _outOfRange: '4' } })",
+        "css({ margin: '2', _outOfRange: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _outOfRange: '4' }} />",
+        "<Box margin=\"2\" _outOfRange={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_placeholder",
+      "value": "&::placeholder, &[data-placeholder]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _placeholder: '4' } })",
+        "css({ margin: '2', _placeholder: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _placeholder: '4' }} />",
+        "<Box margin=\"2\" _placeholder={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_placeholderShown",
+      "value": "&:is(:placeholder-shown, [data-placeholder-shown])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _placeholderShown: '4' } })",
+        "css({ margin: '2', _placeholderShown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _placeholderShown: '4' }} />",
+        "<Box margin=\"2\" _placeholderShown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_pressed",
+      "value": "&:is([aria-pressed=true], [data-pressed])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _pressed: '4' } })",
+        "css({ margin: '2', _pressed: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _pressed: '4' }} />",
+        "<Box margin=\"2\" _pressed={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_selected",
+      "value": "&:is([aria-selected=true], [data-selected=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _selected: '4' } })",
+        "css({ margin: '2', _selected: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _selected: '4' }} />",
+        "<Box margin=\"2\" _selected={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_grabbed",
+      "value": "&:is([aria-grabbed=true], [data-grabbed])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _grabbed: '4' } })",
+        "css({ margin: '2', _grabbed: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _grabbed: '4' }} />",
+        "<Box margin=\"2\" _grabbed={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_underValue",
+      "value": "&[data-state=under-value]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _underValue: '4' } })",
+        "css({ margin: '2', _underValue: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _underValue: '4' }} />",
+        "<Box margin=\"2\" _underValue={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_overValue",
+      "value": "&[data-state=over-value]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _overValue: '4' } })",
+        "css({ margin: '2', _overValue: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _overValue: '4' }} />",
+        "<Box margin=\"2\" _overValue={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_atValue",
+      "value": "&[data-state=at-value]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _atValue: '4' } })",
+        "css({ margin: '2', _atValue: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _atValue: '4' }} />",
+        "<Box margin=\"2\" _atValue={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_default",
+      "value": "&:default",
+      "functionExamples": [
+        "css({ margin: { base: '2', _default: '4' } })",
+        "css({ margin: '2', _default: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _default: '4' }} />",
+        "<Box margin=\"2\" _default={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_optional",
+      "value": "&:optional",
+      "functionExamples": [
+        "css({ margin: { base: '2', _optional: '4' } })",
+        "css({ margin: '2', _optional: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _optional: '4' }} />",
+        "<Box margin=\"2\" _optional={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_open",
+      "value": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _open: '4' } })",
+        "css({ margin: '2', _open: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _open: '4' }} />",
+        "<Box margin=\"2\" _open={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_closed",
+      "value": "&:is([closed], [data-closed], [data-state=\"closed\"])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _closed: '4' } })",
+        "css({ margin: '2', _closed: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _closed: '4' }} />",
+        "<Box margin=\"2\" _closed={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_fullscreen",
+      "value": "&:is(:fullscreen, [data-fullscreen])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _fullscreen: '4' } })",
+        "css({ margin: '2', _fullscreen: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _fullscreen: '4' }} />",
+        "<Box margin=\"2\" _fullscreen={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_loading",
+      "value": "&:is([data-loading], [aria-busy=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _loading: '4' } })",
+        "css({ margin: '2', _loading: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _loading: '4' }} />",
+        "<Box margin=\"2\" _loading={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_hidden",
+      "value": "&:is([hidden], [data-hidden])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _hidden: '4' } })",
+        "css({ margin: '2', _hidden: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _hidden: '4' }} />",
+        "<Box margin=\"2\" _hidden={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_current",
+      "value": "&:is([aria-current=true], [data-current])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _current: '4' } })",
+        "css({ margin: '2', _current: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _current: '4' }} />",
+        "<Box margin=\"2\" _current={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_currentPage",
+      "value": "&[aria-current=page]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _currentPage: '4' } })",
+        "css({ margin: '2', _currentPage: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _currentPage: '4' }} />",
+        "<Box margin=\"2\" _currentPage={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_currentStep",
+      "value": "&[aria-current=step]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _currentStep: '4' } })",
+        "css({ margin: '2', _currentStep: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _currentStep: '4' }} />",
+        "<Box margin=\"2\" _currentStep={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_today",
+      "value": "&:is([data-today])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _today: '4' } })",
+        "css({ margin: '2', _today: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _today: '4' }} />",
+        "<Box margin=\"2\" _today={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_unavailable",
+      "value": "&[data-unavailable]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _unavailable: '4' } })",
+        "css({ margin: '2', _unavailable: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _unavailable: '4' }} />",
+        "<Box margin=\"2\" _unavailable={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_rangeStart",
+      "value": "&[data-range-start]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _rangeStart: '4' } })",
+        "css({ margin: '2', _rangeStart: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _rangeStart: '4' }} />",
+        "<Box margin=\"2\" _rangeStart={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_rangeEnd",
+      "value": "&[data-range-end]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _rangeEnd: '4' } })",
+        "css({ margin: '2', _rangeEnd: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _rangeEnd: '4' }} />",
+        "<Box margin=\"2\" _rangeEnd={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_now",
+      "value": "&[data-now]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _now: '4' } })",
+        "css({ margin: '2', _now: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _now: '4' }} />",
+        "<Box margin=\"2\" _now={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_topmost",
+      "value": "&[data-topmost]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _topmost: '4' } })",
+        "css({ margin: '2', _topmost: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _topmost: '4' }} />",
+        "<Box margin=\"2\" _topmost={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_motionReduce",
+      "value": "@media (prefers-reduced-motion: reduce)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _motionReduce: '4' } })",
+        "css({ margin: '2', _motionReduce: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _motionReduce: '4' }} />",
+        "<Box margin=\"2\" _motionReduce={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_motionSafe",
+      "value": "@media (prefers-reduced-motion: no-preference)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _motionSafe: '4' } })",
+        "css({ margin: '2', _motionSafe: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _motionSafe: '4' }} />",
+        "<Box margin=\"2\" _motionSafe={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_print",
+      "value": "@media print",
+      "functionExamples": [
+        "css({ margin: { base: '2', _print: '4' } })",
+        "css({ margin: '2', _print: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _print: '4' }} />",
+        "<Box margin=\"2\" _print={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_landscape",
+      "value": "@media (orientation: landscape)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _landscape: '4' } })",
+        "css({ margin: '2', _landscape: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _landscape: '4' }} />",
+        "<Box margin=\"2\" _landscape={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_portrait",
+      "value": "@media (orientation: portrait)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _portrait: '4' } })",
+        "css({ margin: '2', _portrait: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _portrait: '4' }} />",
+        "<Box margin=\"2\" _portrait={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_dark",
+      "value": ".dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _dark: '4' } })",
+        "css({ margin: '2', _dark: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _dark: '4' }} />",
+        "<Box margin=\"2\" _dark={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_light",
+      "value": ".light &, &:is([data-color-mode=light] *), [data-color-mode=light] &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _light: '4' } })",
+        "css({ margin: '2', _light: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _light: '4' }} />",
+        "<Box margin=\"2\" _light={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_osDark",
+      "value": "@media (prefers-color-scheme: dark)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _osDark: '4' } })",
+        "css({ margin: '2', _osDark: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _osDark: '4' }} />",
+        "<Box margin=\"2\" _osDark={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_osLight",
+      "value": "@media (prefers-color-scheme: light)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _osLight: '4' } })",
+        "css({ margin: '2', _osLight: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _osLight: '4' }} />",
+        "<Box margin=\"2\" _osLight={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_highContrast",
+      "value": "@media (forced-colors: active)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _highContrast: '4' } })",
+        "css({ margin: '2', _highContrast: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _highContrast: '4' }} />",
+        "<Box margin=\"2\" _highContrast={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_lessContrast",
+      "value": "@media (prefers-contrast: less)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _lessContrast: '4' } })",
+        "css({ margin: '2', _lessContrast: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _lessContrast: '4' }} />",
+        "<Box margin=\"2\" _lessContrast={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_moreContrast",
+      "value": "@media (prefers-contrast: more)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _moreContrast: '4' } })",
+        "css({ margin: '2', _moreContrast: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _moreContrast: '4' }} />",
+        "<Box margin=\"2\" _moreContrast={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_ltr",
+      "value": ":where([dir=ltr], :dir(ltr)) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _ltr: '4' } })",
+        "css({ margin: '2', _ltr: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _ltr: '4' }} />",
+        "<Box margin=\"2\" _ltr={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_rtl",
+      "value": ":where([dir=rtl], :dir(rtl)) &",
+      "functionExamples": [
+        "css({ margin: { base: '2', _rtl: '4' } })",
+        "css({ margin: '2', _rtl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _rtl: '4' }} />",
+        "<Box margin=\"2\" _rtl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_scrollbar",
+      "value": "&::-webkit-scrollbar",
+      "functionExamples": [
+        "css({ margin: { base: '2', _scrollbar: '4' } })",
+        "css({ margin: '2', _scrollbar: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _scrollbar: '4' }} />",
+        "<Box margin=\"2\" _scrollbar={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_scrollbarThumb",
+      "value": "&::-webkit-scrollbar-thumb",
+      "functionExamples": [
+        "css({ margin: { base: '2', _scrollbarThumb: '4' } })",
+        "css({ margin: '2', _scrollbarThumb: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _scrollbarThumb: '4' }} />",
+        "<Box margin=\"2\" _scrollbarThumb={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_scrollbarTrack",
+      "value": "&::-webkit-scrollbar-track",
+      "functionExamples": [
+        "css({ margin: { base: '2', _scrollbarTrack: '4' } })",
+        "css({ margin: '2', _scrollbarTrack: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _scrollbarTrack: '4' }} />",
+        "<Box margin=\"2\" _scrollbarTrack={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_horizontal",
+      "value": "&[data-orientation=horizontal]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _horizontal: '4' } })",
+        "css({ margin: '2', _horizontal: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _horizontal: '4' }} />",
+        "<Box margin=\"2\" _horizontal={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_vertical",
+      "value": "&[data-orientation=vertical]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _vertical: '4' } })",
+        "css({ margin: '2', _vertical: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _vertical: '4' }} />",
+        "<Box margin=\"2\" _vertical={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_icon",
+      "value": "& :where(svg)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _icon: '4' } })",
+        "css({ margin: '2', _icon: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _icon: '4' }} />",
+        "<Box margin=\"2\" _icon={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_starting",
+      "value": "@starting-style",
+      "functionExamples": [
+        "css({ margin: { base: '2', _starting: '4' } })",
+        "css({ margin: '2', _starting: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _starting: '4' }} />",
+        "<Box margin=\"2\" _starting={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_noscript",
+      "value": "@media (scripting: none)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _noscript: '4' } })",
+        "css({ margin: '2', _noscript: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _noscript: '4' }} />",
+        "<Box margin=\"2\" _noscript={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_invertedColors",
+      "value": "@media (inverted-colors: inverted)",
+      "functionExamples": [
+        "css({ margin: { base: '2', _invertedColors: '4' } })",
+        "css({ margin: '2', _invertedColors: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _invertedColors: '4' }} />",
+        "<Box margin=\"2\" _invertedColors={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_deleted",
+      "value": "&:is(:deleted, [deleted], [data-deleted=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _deleted: '4' } })",
+        "css({ margin: '2', _deleted: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _deleted: '4' }} />",
+        "<Box margin=\"2\" _deleted={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_collapsed",
+      "value": "&:is([aria-collapsed=true], [data-collapsed], [data-state=\"collapsed\"])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _collapsed: '4' } })",
+        "css({ margin: '2', _collapsed: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _collapsed: '4' }} />",
+        "<Box margin=\"2\" _collapsed={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_utility",
+      "value": "&[data-utility=true]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _utility: '4' } })",
+        "css({ margin: '2', _utility: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _utility: '4' }} />",
+        "<Box margin=\"2\" _utility={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_error",
+      "value": "&:is([data-error], [data-error=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _error: '4' } })",
+        "css({ margin: '2', _error: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _error: '4' }} />",
+        "<Box margin=\"2\" _error={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "_paused",
+      "value": "&:is([data-paused=true])",
+      "functionExamples": [
+        "css({ margin: { base: '2', _paused: '4' } })",
+        "css({ margin: '2', _paused: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _paused: '4' }} />",
+        "<Box margin=\"2\" _paused={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xs",
+      "value": "@media screen and (min-width: 30rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xs: '4' } })",
+        "css({ margin: '2', xs: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xs: '4' }} />",
+        "<Box margin=\"2\" xs={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsOnly",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 39.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsOnly: '4' } })",
+        "css({ margin: '2', xsOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsOnly: '4' }} />",
+        "<Box margin=\"2\" xsOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsDown",
+      "value": "@media screen and (max-width: 29.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsDown: '4' } })",
+        "css({ margin: '2', xsDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsDown: '4' }} />",
+        "<Box margin=\"2\" xsDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "sm",
+      "value": "@media screen and (min-width: 40rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', sm: '4' } })",
+        "css({ margin: '2', sm: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', sm: '4' }} />",
+        "<Box margin=\"2\" sm={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smOnly",
+      "value": "@media screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smOnly: '4' } })",
+        "css({ margin: '2', smOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smOnly: '4' }} />",
+        "<Box margin=\"2\" smOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smDown",
+      "value": "@media screen and (max-width: 39.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smDown: '4' } })",
+        "css({ margin: '2', smDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smDown: '4' }} />",
+        "<Box margin=\"2\" smDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "md",
+      "value": "@media screen and (min-width: 48rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', md: '4' } })",
+        "css({ margin: '2', md: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', md: '4' }} />",
+        "<Box margin=\"2\" md={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "mdOnly",
+      "value": "@media screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', mdOnly: '4' } })",
+        "css({ margin: '2', mdOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', mdOnly: '4' }} />",
+        "<Box margin=\"2\" mdOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "mdDown",
+      "value": "@media screen and (max-width: 47.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', mdDown: '4' } })",
+        "css({ margin: '2', mdDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', mdDown: '4' }} />",
+        "<Box margin=\"2\" mdDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "lg",
+      "value": "@media screen and (min-width: 64rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', lg: '4' } })",
+        "css({ margin: '2', lg: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', lg: '4' }} />",
+        "<Box margin=\"2\" lg={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "lgOnly",
+      "value": "@media screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', lgOnly: '4' } })",
+        "css({ margin: '2', lgOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', lgOnly: '4' }} />",
+        "<Box margin=\"2\" lgOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "lgDown",
+      "value": "@media screen and (max-width: 63.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', lgDown: '4' } })",
+        "css({ margin: '2', lgDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', lgDown: '4' }} />",
+        "<Box margin=\"2\" lgDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xl",
+      "value": "@media screen and (min-width: 80rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xl: '4' } })",
+        "css({ margin: '2', xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xl: '4' }} />",
+        "<Box margin=\"2\" xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xlOnly",
+      "value": "@media screen and (min-width: 80rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xlOnly: '4' } })",
+        "css({ margin: '2', xlOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xlOnly: '4' }} />",
+        "<Box margin=\"2\" xlOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xlDown",
+      "value": "@media screen and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xlDown: '4' } })",
+        "css({ margin: '2', xlDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xlDown: '4' }} />",
+        "<Box margin=\"2\" xlDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "2xl",
+      "value": "@media screen and (min-width: 96rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', 2xl: '4' } })",
+        "css({ margin: '2', 2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', 2xl: '4' }} />",
+        "<Box margin=\"2\" 2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "2xlOnly",
+      "value": "@media screen and (min-width: 96rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', 2xlOnly: '4' } })",
+        "css({ margin: '2', 2xlOnly: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', 2xlOnly: '4' }} />",
+        "<Box margin=\"2\" 2xlOnly={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "2xlDown",
+      "value": "@media screen and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', 2xlDown: '4' } })",
+        "css({ margin: '2', 2xlDown: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', 2xlDown: '4' }} />",
+        "<Box margin=\"2\" 2xlDown={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsToSm",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 39.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsToSm: '4' } })",
+        "css({ margin: '2', xsToSm: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsToSm: '4' }} />",
+        "<Box margin=\"2\" xsToSm={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsToMd",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 47.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsToMd: '4' } })",
+        "css({ margin: '2', xsToMd: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsToMd: '4' }} />",
+        "<Box margin=\"2\" xsToMd={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsToLg",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 63.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsToLg: '4' } })",
+        "css({ margin: '2', xsToLg: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsToLg: '4' }} />",
+        "<Box margin=\"2\" xsToLg={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsToXl",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsToXl: '4' } })",
+        "css({ margin: '2', xsToXl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsToXl: '4' }} />",
+        "<Box margin=\"2\" xsToXl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xsTo2xl",
+      "value": "@media screen and (min-width: 30rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xsTo2xl: '4' } })",
+        "css({ margin: '2', xsTo2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xsTo2xl: '4' }} />",
+        "<Box margin=\"2\" xsTo2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smToMd",
+      "value": "@media screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smToMd: '4' } })",
+        "css({ margin: '2', smToMd: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smToMd: '4' }} />",
+        "<Box margin=\"2\" smToMd={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smToLg",
+      "value": "@media screen and (min-width: 40rem) and (max-width: 63.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smToLg: '4' } })",
+        "css({ margin: '2', smToLg: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smToLg: '4' }} />",
+        "<Box margin=\"2\" smToLg={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smToXl",
+      "value": "@media screen and (min-width: 40rem) and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smToXl: '4' } })",
+        "css({ margin: '2', smToXl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smToXl: '4' }} />",
+        "<Box margin=\"2\" smToXl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "smTo2xl",
+      "value": "@media screen and (min-width: 40rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', smTo2xl: '4' } })",
+        "css({ margin: '2', smTo2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', smTo2xl: '4' }} />",
+        "<Box margin=\"2\" smTo2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "mdToLg",
+      "value": "@media screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', mdToLg: '4' } })",
+        "css({ margin: '2', mdToLg: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', mdToLg: '4' }} />",
+        "<Box margin=\"2\" mdToLg={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "mdToXl",
+      "value": "@media screen and (min-width: 48rem) and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', mdToXl: '4' } })",
+        "css({ margin: '2', mdToXl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', mdToXl: '4' }} />",
+        "<Box margin=\"2\" mdToXl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "mdTo2xl",
+      "value": "@media screen and (min-width: 48rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', mdTo2xl: '4' } })",
+        "css({ margin: '2', mdTo2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', mdTo2xl: '4' }} />",
+        "<Box margin=\"2\" mdTo2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "lgToXl",
+      "value": "@media screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', lgToXl: '4' } })",
+        "css({ margin: '2', lgToXl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', lgToXl: '4' }} />",
+        "<Box margin=\"2\" lgToXl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "lgTo2xl",
+      "value": "@media screen and (min-width: 64rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', lgTo2xl: '4' } })",
+        "css({ margin: '2', lgTo2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', lgTo2xl: '4' }} />",
+        "<Box margin=\"2\" lgTo2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "xlTo2xl",
+      "value": "@media screen and (min-width: 80rem) and (max-width: 95.9975rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', xlTo2xl: '4' } })",
+        "css({ margin: '2', xlTo2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', xlTo2xl: '4' }} />",
+        "<Box margin=\"2\" xlTo2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/2xs",
+      "value": "@container  (min-width: 16rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/2xs: '4' } })",
+        "css({ margin: '2', @/2xs: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/2xs: '4' }} />",
+        "<Box margin=\"2\" @/2xs={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/xs",
+      "value": "@container  (min-width: 20rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/xs: '4' } })",
+        "css({ margin: '2', @/xs: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/xs: '4' }} />",
+        "<Box margin=\"2\" @/xs={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/sm",
+      "value": "@container  (min-width: 24rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/sm: '4' } })",
+        "css({ margin: '2', @/sm: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/sm: '4' }} />",
+        "<Box margin=\"2\" @/sm={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/md",
+      "value": "@container  (min-width: 28rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/md: '4' } })",
+        "css({ margin: '2', @/md: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/md: '4' }} />",
+        "<Box margin=\"2\" @/md={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/lg",
+      "value": "@container  (min-width: 32rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/lg: '4' } })",
+        "css({ margin: '2', @/lg: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/lg: '4' }} />",
+        "<Box margin=\"2\" @/lg={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/xl",
+      "value": "@container  (min-width: 36rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/xl: '4' } })",
+        "css({ margin: '2', @/xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/xl: '4' }} />",
+        "<Box margin=\"2\" @/xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/2xl",
+      "value": "@container  (min-width: 42rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/2xl: '4' } })",
+        "css({ margin: '2', @/2xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/2xl: '4' }} />",
+        "<Box margin=\"2\" @/2xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/3xl",
+      "value": "@container  (min-width: 48rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/3xl: '4' } })",
+        "css({ margin: '2', @/3xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/3xl: '4' }} />",
+        "<Box margin=\"2\" @/3xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/4xl",
+      "value": "@container  (min-width: 56rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/4xl: '4' } })",
+        "css({ margin: '2', @/4xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/4xl: '4' }} />",
+        "<Box margin=\"2\" @/4xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/5xl",
+      "value": "@container  (min-width: 64rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/5xl: '4' } })",
+        "css({ margin: '2', @/5xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/5xl: '4' }} />",
+        "<Box margin=\"2\" @/5xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/6xl",
+      "value": "@container  (min-width: 72rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/6xl: '4' } })",
+        "css({ margin: '2', @/6xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/6xl: '4' }} />",
+        "<Box margin=\"2\" @/6xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/7xl",
+      "value": "@container  (min-width: 80rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/7xl: '4' } })",
+        "css({ margin: '2', @/7xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/7xl: '4' }} />",
+        "<Box margin=\"2\" @/7xl={{ margin: '4' }} />"
+      ]
+    },
+    {
+      "name": "@/8xl",
+      "value": "@container  (min-width: 90rem)",
+      "functionExamples": [
+        "css({ margin: { base: '2', @/8xl: '4' } })",
+        "css({ margin: '2', @/8xl: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', @/8xl: '4' }} />",
+        "<Box margin=\"2\" @/8xl={{ margin: '4' }} />"
+      ]
+    }
+  ]
+}