@rarui/components 1.18.0 → 1.20.0

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.17.0",
+  "version": "1.19.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -3317,113 +3317,116 @@
       "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/layout/box) for more details.",
       "attributes": [
         {
-          "name": "background-color",
-          "description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$brand\",\n  \"lg\": \"$brand-hover\",\n  \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
+          "name": "gap",
+          "description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "$background"
-            },
-            {
-              "name": "$brand"
+              "name": "$2xl"
             },
             {
-              "name": "$brand-hover"
+              "name": "$2xs"
             },
             {
-              "name": "$brand-press"
+              "name": "$3xl"
             },
             {
-              "name": "$brand-subdued"
+              "name": "$3xs"
             },
             {
-              "name": "$disabled"
+              "name": "$4xl"
             },
             {
-              "name": "$error"
+              "name": "$4xs"
             },
             {
-              "name": "$error-hover"
+              "name": "$5xl"
             },
             {
-              "name": "$error-press"
+              "name": "$6xl"
             },
             {
-              "name": "$error-subdued"
+              "name": "$7xl"
             },
             {
-              "name": "$hover"
+              "name": "$8xl"
             },
             {
-              "name": "$info"
+              "name": "$lg"
             },
             {
-              "name": "$info-hover"
+              "name": "$md"
             },
             {
-              "name": "$info-press"
+              "name": "$none"
             },
             {
-              "name": "$info-subdued"
+              "name": "$s"
             },
             {
-              "name": "$invert"
+              "name": "$xl"
             },
             {
-              "name": "$invert-disabled"
-            },
+              "name": "$xs"
+            }
+          ]
+        },
+        {
+          "name": "grid-gap",
+          "description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
             {
-              "name": "$invert-hover"
+              "name": "$2xl"
             },
             {
-              "name": "$invert-press"
+              "name": "$2xs"
             },
             {
-              "name": "$invert-secondary"
+              "name": "$3xl"
             },
             {
-              "name": "$overlay"
+              "name": "$3xs"
             },
             {
-              "name": "$press"
+              "name": "$4xl"
             },
             {
-              "name": "$primary"
+              "name": "$4xs"
             },
             {
-              "name": "$secondary"
+              "name": "$5xl"
             },
             {
-              "name": "$success"
+              "name": "$6xl"
             },
             {
-              "name": "$success-hover"
+              "name": "$7xl"
             },
             {
-              "name": "$success-press"
+              "name": "$8xl"
             },
             {
-              "name": "$success-subdued"
+              "name": "$lg"
             },
             {
-              "name": "$transparent"
+              "name": "$md"
             },
             {
-              "name": "$warning"
+              "name": "$none"
             },
             {
-              "name": "$warning-hover"
+              "name": "$s"
             },
             {
-              "name": "$warning-press"
+              "name": "$xl"
             },
             {
-              "name": "$warning-subdued"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "fill",
-          "description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$brand\",\n  \"lg\": \"$brand-hover\",\n  \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
+          "name": "background-color",
+          "description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$brand\",\n  \"lg\": \"$brand-hover\",\n  \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
           "values": [
             {
               "name": "$background"
@@ -3440,9 +3443,6 @@
             {
               "name": "$brand-subdued"
             },
-            {
-              "name": "$currentColor"
-            },
             {
               "name": "$disabled"
             },
@@ -3530,8 +3530,8 @@
           ]
         },
         {
-          "name": "border-color",
-          "description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$disabled\",\n  \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
+          "name": "color",
+          "description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$currentColor\",\n  \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
           "values": [
             {
               "name": "$brand"
@@ -3540,10 +3540,10 @@
               "name": "$brand-alt"
             },
             {
-              "name": "$disabled"
+              "name": "$currentColor"
             },
             {
-              "name": "$divider"
+              "name": "$disabled"
             },
             {
               "name": "$error"
@@ -3558,34 +3558,58 @@
               "name": "$invert-disabled"
             },
             {
-              "name": "$primary"
+              "name": "$invert-secondary"
             },
             {
-              "name": "$secondary"
+              "name": "$on-brand"
             },
             {
-              "name": "$subdued"
+              "name": "$on-error"
             },
             {
-              "name": "$success"
+              "name": "$on-info"
             },
             {
-              "name": "$transparent"
+              "name": "$on-success"
+            },
+            {
+              "name": "$on-warning"
+            },
+            {
+              "name": "$primary"
+            },
+            {
+              "name": "$secondary"
+            },
+            {
+              "name": "$success"
             },
             {
               "name": "$warning"
+            },
+            {
+              "name": "$warning-alt"
             }
           ]
         },
         {
-          "name": "color",
-          "description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$currentColor\",\n  \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
+          "name": "fill",
+          "description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$brand\",\n  \"lg\": \"$brand-hover\",\n  \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
           "values": [
+            {
+              "name": "$background"
+            },
             {
               "name": "$brand"
             },
             {
-              "name": "$brand-alt"
+              "name": "$brand-hover"
+            },
+            {
+              "name": "$brand-press"
+            },
+            {
+              "name": "$brand-subdued"
             },
             {
               "name": "$currentColor"
@@ -3596,32 +3620,50 @@
             {
               "name": "$error"
             },
+            {
+              "name": "$error-hover"
+            },
+            {
+              "name": "$error-press"
+            },
+            {
+              "name": "$error-subdued"
+            },
+            {
+              "name": "$hover"
+            },
             {
               "name": "$info"
             },
             {
-              "name": "$invert"
+              "name": "$info-hover"
             },
             {
-              "name": "$invert-disabled"
+              "name": "$info-press"
             },
             {
-              "name": "$invert-secondary"
+              "name": "$info-subdued"
             },
             {
-              "name": "$on-brand"
+              "name": "$invert"
             },
             {
-              "name": "$on-error"
+              "name": "$invert-disabled"
             },
             {
-              "name": "$on-info"
+              "name": "$invert-hover"
             },
             {
-              "name": "$on-success"
+              "name": "$invert-press"
             },
             {
-              "name": "$on-warning"
+              "name": "$invert-secondary"
+            },
+            {
+              "name": "$overlay"
+            },
+            {
+              "name": "$press"
             },
             {
               "name": "$primary"
@@ -3632,11 +3674,29 @@
             {
               "name": "$success"
             },
+            {
+              "name": "$success-hover"
+            },
+            {
+              "name": "$success-press"
+            },
+            {
+              "name": "$success-subdued"
+            },
+            {
+              "name": "$transparent"
+            },
             {
               "name": "$warning"
             },
             {
-              "name": "$warning-alt"
+              "name": "$warning-hover"
+            },
+            {
+              "name": "$warning-press"
+            },
+            {
+              "name": "$warning-subdued"
             }
           ]
         },
@@ -3956,93 +4016,189 @@
           ]
         },
         {
-          "name": "box-shadow",
-          "description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bottom-1\",\n  \"md\": \"$bottom-2\",\n  \"lg\": \"$bottom-3\",\n  \"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
+          "name": "border-width-x",
+          "description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$3\",\n  \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
           "values": [
             {
-              "name": "$bottom-1"
+              "name": "$1"
             },
             {
-              "name": "$bottom-2"
+              "name": "$2"
             },
             {
-              "name": "$bottom-3"
+              "name": "$3"
             },
             {
-              "name": "$bottom-4"
+              "name": "$4"
             },
             {
-              "name": "$bottom-5"
+              "name": "$5"
             },
             {
               "name": "$none"
+            }
+          ]
+        },
+        {
+          "name": "border-width-y",
+          "description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$3\",\n  \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
+          "values": [
+            {
+              "name": "$1"
             },
             {
-              "name": "$top-1"
+              "name": "$2"
             },
             {
-              "name": "$top-2"
+              "name": "$3"
             },
             {
-              "name": "$top-3"
+              "name": "$4"
             },
             {
-              "name": "$top-4"
+              "name": "$5"
             },
             {
-              "name": "$top-5"
+              "name": "$none"
             }
           ]
         },
         {
-          "name": "padding",
-          "description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "border-color",
+          "description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$disabled\",\n  \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
           "values": [
             {
-              "name": "$2xl"
-            },
-            {
-              "name": "$2xs"
+              "name": "$brand"
             },
             {
-              "name": "$3xl"
+              "name": "$brand-alt"
             },
             {
-              "name": "$3xs"
+              "name": "$disabled"
             },
             {
-              "name": "$4xl"
+              "name": "$divider"
             },
             {
-              "name": "$4xs"
+              "name": "$error"
             },
             {
-              "name": "$5xl"
+              "name": "$info"
             },
             {
-              "name": "$6xl"
+              "name": "$invert"
             },
             {
-              "name": "$7xl"
+              "name": "$invert-disabled"
             },
             {
-              "name": "$8xl"
+              "name": "$primary"
             },
             {
-              "name": "$lg"
+              "name": "$secondary"
             },
             {
-              "name": "$md"
+              "name": "$subdued"
             },
             {
-              "name": "$none"
+              "name": "$success"
             },
             {
-              "name": "$s"
+              "name": "$transparent"
             },
             {
-              "name": "$xl"
-            },
+              "name": "$warning"
+            }
+          ]
+        },
+        {
+          "name": "box-shadow",
+          "description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bottom-1\",\n  \"md\": \"$bottom-2\",\n  \"lg\": \"$bottom-3\",\n  \"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
+          "values": [
+            {
+              "name": "$bottom-1"
+            },
+            {
+              "name": "$bottom-2"
+            },
+            {
+              "name": "$bottom-3"
+            },
+            {
+              "name": "$bottom-4"
+            },
+            {
+              "name": "$bottom-5"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$top-1"
+            },
+            {
+              "name": "$top-2"
+            },
+            {
+              "name": "$top-3"
+            },
+            {
+              "name": "$top-4"
+            },
+            {
+              "name": "$top-5"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
+            {
+              "name": "$2xl"
+            },
+            {
+              "name": "$2xs"
+            },
+            {
+              "name": "$3xl"
+            },
+            {
+              "name": "$3xs"
+            },
+            {
+              "name": "$4xl"
+            },
+            {
+              "name": "$4xs"
+            },
+            {
+              "name": "$5xl"
+            },
+            {
+              "name": "$6xl"
+            },
+            {
+              "name": "$7xl"
+            },
+            {
+              "name": "$8xl"
+            },
+            {
+              "name": "$lg"
+            },
+            {
+              "name": "$md"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
             {
               "name": "$xs"
             }
@@ -4550,8 +4706,41 @@
           ]
         },
         {
-          "name": "gap",
-          "description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "p",
+          "description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -4604,8 +4793,8 @@
           ]
         },
         {
-          "name": "grid-gap",
-          "description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "pl",
+          "description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -4658,2499 +4847,2702 @@
           ]
         },
         {
-          "name": "z-index",
-          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "name": "pr",
+          "description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "$100"
+              "name": "$2xl"
             },
             {
-              "name": "$200"
+              "name": "$2xs"
             },
             {
-              "name": "$300"
+              "name": "$3xl"
             },
             {
-              "name": "$400"
+              "name": "$3xs"
             },
             {
-              "name": "$500"
+              "name": "$4xl"
             },
             {
-              "name": "$600"
+              "name": "$4xs"
             },
             {
-              "name": "$700"
+              "name": "$5xl"
             },
             {
-              "name": "$800"
+              "name": "$6xl"
             },
             {
-              "name": "$900"
-            }
-          ]
-        },
-        {
-          "name": "line-height",
-          "default": "base",
-          "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body-l\",\n  \"md\": \"$body-m\",\n  \"lg\": \"$body-s\",\n  \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
-          "values": [
+              "name": "$7xl"
+            },
             {
-              "name": "$body-l"
+              "name": "$8xl"
             },
             {
-              "name": "$body-m"
+              "name": "$lg"
             },
             {
-              "name": "$body-s"
+              "name": "$md"
             },
             {
-              "name": "$body-xl"
+              "name": "$none"
             },
             {
-              "name": "$body-xs"
+              "name": "$s"
             },
             {
-              "name": "$body-xxs"
+              "name": "$xl"
             },
             {
-              "name": "$button-l"
+              "name": "$xs"
+            }
+          ]
+        },
+        {
+          "name": "pt",
+          "description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
+            {
+              "name": "$2xl"
             },
             {
-              "name": "$button-m"
+              "name": "$2xs"
             },
             {
-              "name": "$button-s"
+              "name": "$3xl"
             },
             {
-              "name": "$heading-hero"
+              "name": "$3xs"
             },
             {
-              "name": "$heading-l"
+              "name": "$4xl"
             },
             {
-              "name": "$heading-m"
+              "name": "$4xs"
             },
             {
-              "name": "$heading-s"
+              "name": "$5xl"
             },
             {
-              "name": "$heading-xl"
+              "name": "$6xl"
             },
             {
-              "name": "$heading-xs"
+              "name": "$7xl"
             },
             {
-              "name": "$label-l"
+              "name": "$8xl"
             },
             {
-              "name": "$label-m"
+              "name": "$lg"
             },
             {
-              "name": "$label-s"
-            }
-          ]
-        },
-        {
-          "name": "font-weight",
-          "description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
-          "values": [
+              "name": "$md"
+            },
             {
-              "name": "$bold"
+              "name": "$none"
             },
             {
-              "name": "$medium"
+              "name": "$s"
             },
             {
-              "name": "$regular"
+              "name": "$xl"
             },
             {
-              "name": "$semiBold"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "font-size",
-          "description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body-l\",\n  \"md\": \"$body-m\",\n  \"lg\": \"$body-s\",\n  \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
+          "name": "pb",
+          "description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "$body-l"
+              "name": "$2xl"
             },
             {
-              "name": "$body-m"
+              "name": "$2xs"
             },
             {
-              "name": "$body-s"
+              "name": "$3xl"
             },
             {
-              "name": "$body-xl"
+              "name": "$3xs"
             },
             {
-              "name": "$body-xs"
+              "name": "$4xl"
             },
             {
-              "name": "$body-xxs"
+              "name": "$4xs"
             },
             {
-              "name": "$button-l"
+              "name": "$5xl"
             },
             {
-              "name": "$button-m"
+              "name": "$6xl"
             },
             {
-              "name": "$button-s"
+              "name": "$7xl"
             },
             {
-              "name": "$heading-hero"
+              "name": "$8xl"
             },
             {
-              "name": "$heading-l"
+              "name": "$lg"
             },
             {
-              "name": "$heading-m"
+              "name": "$md"
             },
             {
-              "name": "$heading-s"
+              "name": "$none"
             },
             {
-              "name": "$heading-xl"
-            },
-            {
-              "name": "$heading-xs"
-            },
-            {
-              "name": "$label-l"
+              "name": "$s"
             },
             {
-              "name": "$label-m"
+              "name": "$xl"
             },
             {
-              "name": "$label-s"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "font-family",
-          "description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body\",\n  \"md\": \"$button\",\n  \"lg\": \"$heading\",\n  \"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
+          "name": "px",
+          "description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "$body"
+              "name": "$2xl"
             },
             {
-              "name": "$button"
+              "name": "$2xs"
             },
             {
-              "name": "$heading"
-            }
-          ]
-        },
-        {
-          "name": "width",
-          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
-          "values": [
+              "name": "$3xl"
+            },
             {
-              "name": "auto"
+              "name": "$3xs"
             },
             {
-              "name": "fit-content"
+              "name": "$4xl"
             },
             {
-              "name": "intrinsic"
+              "name": "$4xs"
             },
             {
-              "name": "max-content"
+              "name": "$5xl"
             },
             {
-              "name": "min-content"
+              "name": "$6xl"
             },
             {
-              "name": "min-intrinsic"
+              "name": "$7xl"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "height",
-          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
-          "values": [
+              "name": "$8xl"
+            },
             {
-              "name": "auto"
+              "name": "$lg"
             },
             {
-              "name": "fit-content"
+              "name": "$md"
             },
             {
-              "name": "max-content"
+              "name": "$none"
             },
             {
-              "name": "min-content"
+              "name": "$s"
             },
             {
-              "name": "stretch"
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "max-width",
-          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "py",
+          "description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "fit-content"
+              "name": "$2xl"
             },
             {
-              "name": "intrinsic"
+              "name": "$2xs"
             },
             {
-              "name": "max-content"
+              "name": "$3xl"
             },
             {
-              "name": "min-content"
+              "name": "$3xs"
             },
             {
-              "name": "none"
+              "name": "$4xl"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "max-height",
-          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
-          "values": [
+              "name": "$4xs"
+            },
             {
-              "name": "fit-content"
+              "name": "$5xl"
             },
             {
-              "name": "intrinsic"
+              "name": "$6xl"
             },
             {
-              "name": "max-content"
+              "name": "$7xl"
             },
             {
-              "name": "min-content"
+              "name": "$8xl"
             },
             {
-              "name": "none"
+              "name": "$lg"
             },
             {
-              "name": "stretch"
+              "name": "$md"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "min-width",
-          "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "name": "padding-x",
+          "description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "auto"
+              "name": "$2xl"
             },
             {
-              "name": "fit-content"
+              "name": "$2xs"
             },
             {
-              "name": "intrinsic"
+              "name": "$3xl"
             },
             {
-              "name": "max-content"
+              "name": "$3xs"
             },
             {
-              "name": "min-content"
+              "name": "$4xl"
             },
             {
-              "name": "min-intrinsic"
+              "name": "$4xs"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "min-height",
-          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
-          "values": [
+              "name": "$5xl"
+            },
             {
-              "name": "auto"
+              "name": "$6xl"
             },
             {
-              "name": "fit-content"
+              "name": "$7xl"
             },
             {
-              "name": "intrinsic"
+              "name": "$8xl"
             },
             {
-              "name": "max-content"
+              "name": "$lg"
             },
             {
-              "name": "min-content"
+              "name": "$md"
             },
             {
-              "name": "stretch"
+              "name": "$none"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "bottom",
-          "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "left",
-          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "right",
-          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "top",
-          "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "flex",
-          "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "padding-y",
+          "description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "auto"
+              "name": "$2xl"
             },
             {
-              "name": "content"
+              "name": "$2xs"
             },
             {
-              "name": "fit-content"
+              "name": "$3xl"
             },
             {
-              "name": "max-content"
+              "name": "$3xs"
             },
             {
-              "name": "min-content"
+              "name": "$4xl"
             },
             {
-              "name": "none"
+              "name": "$4xs"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "grid-template-areas",
-          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
-          "values": []
-        },
-        {
-          "name": "grid-template-columns",
-          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
-          "values": [
+              "name": "$5xl"
+            },
             {
-              "name": "auto"
+              "name": "$6xl"
             },
             {
-              "name": "max-content"
+              "name": "$7xl"
             },
             {
-              "name": "min-content"
+              "name": "$8xl"
             },
             {
-              "name": "none"
+              "name": "$lg"
             },
             {
-              "name": "subgrid"
+              "name": "$md"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "grid-template-rows",
-          "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
+          "name": "m",
+          "description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "auto"
+              "name": "$2xl"
             },
             {
-              "name": "max-content"
+              "name": "$2xs"
             },
             {
-              "name": "min-content"
+              "name": "$3xl"
             },
             {
-              "name": "none"
+              "name": "$3xs"
             },
             {
-              "name": "subgrid"
-            }
-          ]
-        },
-        {
-          "name": "grid-area",
-          "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
-          "values": []
-        },
-        {
-          "name": "flex-shrink",
-          "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
-          "values": []
-        },
-        {
-          "name": "flex-grow",
-          "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
-          "values": []
-        },
-        {
-          "name": "order",
-          "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
-          "values": []
-        },
-        {
-          "name": "transition-delay",
-          "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
-          "type": "string"
-        },
-        {
-          "name": "transition-property",
-          "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"none\",\n  \"lg\": \"all\",\n  \"xl\": \"none\"\n}\n```\n\n- all\n- none",
-          "values": [
-            {
-              "name": "all"
-            },
-            {
-              "name": "none"
-            }
-          ]
-        },
-        {
-          "name": "background-image",
-          "description": "The **`background-image`** CSS property sets one or more background images on an element.\n\n\n**Initial value**: `none`",
-          "values": []
-        },
-        {
-          "name": "background-position",
-          "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"left\",\n  \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
-          "values": [
-            {
-              "name": "bottom"
+              "name": "$4xl"
             },
             {
-              "name": "center"
+              "name": "$4xs"
             },
             {
-              "name": "left"
+              "name": "$5xl"
             },
             {
-              "name": "right"
+              "name": "$6xl"
             },
             {
-              "name": "top"
-            }
-          ]
-        },
-        {
-          "name": "background-position-x",
-          "description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"left\",\n  \"lg\": \"right\",\n  \"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
-          "values": [
-            {
-              "name": "center"
+              "name": "$7xl"
             },
             {
-              "name": "left"
+              "name": "$8xl"
             },
             {
-              "name": "right"
+              "name": "$auto"
             },
             {
-              "name": "x-end"
+              "name": "$lg"
             },
             {
-              "name": "x-start"
-            }
-          ]
-        },
-        {
-          "name": "background-position-y",
-          "description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"top\",\n  \"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
-          "values": [
-            {
-              "name": "bottom"
+              "name": "$md"
             },
             {
-              "name": "center"
+              "name": "$none"
             },
             {
-              "name": "top"
+              "name": "$s"
             },
             {
-              "name": "y-end"
+              "name": "$xl"
             },
             {
-              "name": "y-start"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "background-blend-mode",
-          "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"color\",\n  \"md\": \"color-burn\",\n  \"lg\": \"color-dodge\",\n  \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
+          "name": "mr",
+          "description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "color"
+              "name": "$2xl"
             },
             {
-              "name": "color-burn"
+              "name": "$2xs"
             },
             {
-              "name": "color-dodge"
+              "name": "$3xl"
             },
             {
-              "name": "darken"
+              "name": "$3xs"
             },
             {
-              "name": "difference"
+              "name": "$4xl"
             },
             {
-              "name": "exclusion"
+              "name": "$4xs"
             },
             {
-              "name": "hard-light"
+              "name": "$5xl"
             },
             {
-              "name": "hue"
+              "name": "$6xl"
             },
             {
-              "name": "lighten"
+              "name": "$7xl"
             },
             {
-              "name": "luminosity"
+              "name": "$8xl"
             },
             {
-              "name": "multiply"
+              "name": "$auto"
             },
             {
-              "name": "normal"
+              "name": "$lg"
             },
             {
-              "name": "overlay"
+              "name": "$md"
             },
             {
-              "name": "saturation"
+              "name": "$none"
             },
             {
-              "name": "screen"
+              "name": "$s"
             },
             {
-              "name": "soft-light"
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "background-repeat",
-          "description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"no-repeat\",\n  \"md\": \"repeat\",\n  \"lg\": \"repeat-x\",\n  \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
+          "name": "ml",
+          "description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "no-repeat"
-            },
-            {
-              "name": "repeat"
-            },
-            {
-              "name": "repeat-x"
+              "name": "$2xl"
             },
             {
-              "name": "repeat-y"
+              "name": "$2xs"
             },
             {
-              "name": "round"
+              "name": "$3xl"
             },
             {
-              "name": "space"
-            }
-          ]
-        },
-        {
-          "name": "background-size",
-          "description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"contain\",\n  \"lg\": \"cover\",\n  \"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
-          "values": [
-            {
-              "name": "auto"
+              "name": "$3xs"
             },
             {
-              "name": "contain"
+              "name": "$4xl"
             },
             {
-              "name": "cover"
-            }
-          ]
-        },
-        {
-          "name": "display",
-          "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"block\",\n  \"md\": \"contents\",\n  \"lg\": \"flex\",\n  \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
-          "values": [
-            {
-              "name": "block"
+              "name": "$4xs"
             },
             {
-              "name": "contents"
+              "name": "$5xl"
             },
             {
-              "name": "flex"
+              "name": "$6xl"
             },
             {
-              "name": "flow"
+              "name": "$7xl"
             },
             {
-              "name": "flow-root"
+              "name": "$8xl"
             },
             {
-              "name": "grid"
+              "name": "$auto"
             },
             {
-              "name": "inline"
+              "name": "$lg"
             },
             {
-              "name": "inline-block"
+              "name": "$md"
             },
             {
-              "name": "inline-flex"
+              "name": "$none"
             },
             {
-              "name": "inline-grid"
+              "name": "$s"
             },
             {
-              "name": "inline-list-item"
+              "name": "$xl"
             },
             {
-              "name": "inline-table"
-            },
+              "name": "$xs"
+            }
+          ]
+        },
+        {
+          "name": "mt",
+          "description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
             {
-              "name": "list-item"
+              "name": "$2xl"
             },
             {
-              "name": "none"
+              "name": "$2xs"
             },
             {
-              "name": "ruby"
+              "name": "$3xl"
             },
             {
-              "name": "ruby-base"
+              "name": "$3xs"
             },
             {
-              "name": "ruby-base-container"
+              "name": "$4xl"
             },
             {
-              "name": "ruby-text"
+              "name": "$4xs"
             },
             {
-              "name": "ruby-text-container"
+              "name": "$5xl"
             },
             {
-              "name": "run-in"
+              "name": "$6xl"
             },
             {
-              "name": "table"
+              "name": "$7xl"
             },
             {
-              "name": "table-caption"
+              "name": "$8xl"
             },
             {
-              "name": "table-cell"
+              "name": "$auto"
             },
             {
-              "name": "table-column"
+              "name": "$lg"
             },
             {
-              "name": "table-column-group"
+              "name": "$md"
             },
             {
-              "name": "table-footer-group"
+              "name": "$none"
             },
             {
-              "name": "table-header-group"
+              "name": "$s"
             },
             {
-              "name": "table-row"
+              "name": "$xl"
             },
             {
-              "name": "table-row-group"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "flex-direction",
-          "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"row\",\n  \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
+          "name": "mb",
+          "description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "column"
+              "name": "$2xl"
             },
             {
-              "name": "column-reverse"
+              "name": "$2xs"
             },
             {
-              "name": "row"
+              "name": "$3xl"
             },
             {
-              "name": "row-reverse"
-            }
-          ]
-        },
-        {
-          "name": "flex-wrap",
-          "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"nowrap\",\n  \"md\": \"wrap\",\n  \"lg\": \"wrap-reverse\",\n  \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
-          "values": [
+              "name": "$3xs"
+            },
             {
-              "name": "nowrap"
+              "name": "$4xl"
             },
             {
-              "name": "wrap"
+              "name": "$4xs"
             },
             {
-              "name": "wrap-reverse"
-            }
-          ]
-        },
-        {
-          "name": "flex-basis",
-          "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
-          "values": [
-            {
-              "name": "auto"
-            },
-            {
-              "name": "content"
+              "name": "$5xl"
             },
             {
-              "name": "fit-content"
+              "name": "$6xl"
             },
             {
-              "name": "max-content"
+              "name": "$7xl"
             },
             {
-              "name": "min-content"
+              "name": "$8xl"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "flex-flow",
-          "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
-          "values": [
-            {
-              "name": "column"
+              "name": "$auto"
             },
             {
-              "name": "column-reverse"
+              "name": "$lg"
             },
             {
-              "name": "nowrap"
+              "name": "$md"
             },
             {
-              "name": "row"
+              "name": "$none"
             },
             {
-              "name": "row-reverse"
+              "name": "$s"
             },
             {
-              "name": "wrap"
+              "name": "$xl"
             },
             {
-              "name": "wrap-reverse"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "justify-content",
-          "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"flex-end\",\n  \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
+          "name": "mx",
+          "description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "center"
+              "name": "$2xl"
             },
             {
-              "name": "end"
+              "name": "$2xs"
             },
             {
-              "name": "flex-end"
+              "name": "$3xl"
             },
             {
-              "name": "flex-start"
+              "name": "$3xs"
             },
             {
-              "name": "left"
+              "name": "$4xl"
             },
             {
-              "name": "normal"
+              "name": "$4xs"
             },
             {
-              "name": "right"
+              "name": "$5xl"
             },
             {
-              "name": "space-around"
+              "name": "$6xl"
             },
             {
-              "name": "space-between"
+              "name": "$7xl"
             },
             {
-              "name": "space-evenly"
+              "name": "$8xl"
             },
             {
-              "name": "start"
+              "name": "$auto"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "justify-items",
-          "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
-          "values": [
-            {
-              "name": "baseline"
+              "name": "$lg"
             },
             {
-              "name": "center"
+              "name": "$md"
             },
             {
-              "name": "end"
+              "name": "$none"
             },
             {
-              "name": "flex-end"
+              "name": "$s"
             },
             {
-              "name": "flex-start"
+              "name": "$xl"
             },
             {
-              "name": "left"
-            },
+              "name": "$xs"
+            }
+          ]
+        },
+        {
+          "name": "my",
+          "description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
             {
-              "name": "legacy"
+              "name": "$2xl"
             },
             {
-              "name": "normal"
+              "name": "$2xs"
             },
             {
-              "name": "right"
+              "name": "$3xl"
             },
             {
-              "name": "self-end"
+              "name": "$3xs"
             },
             {
-              "name": "self-start"
+              "name": "$4xl"
             },
             {
-              "name": "start"
+              "name": "$4xs"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "align-content",
-          "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
-          "values": [
-            {
-              "name": "baseline"
+              "name": "$5xl"
             },
             {
-              "name": "center"
+              "name": "$6xl"
             },
             {
-              "name": "end"
+              "name": "$7xl"
             },
             {
-              "name": "flex-end"
+              "name": "$8xl"
             },
             {
-              "name": "flex-start"
+              "name": "$auto"
             },
             {
-              "name": "normal"
+              "name": "$lg"
             },
             {
-              "name": "space-around"
+              "name": "$md"
             },
             {
-              "name": "space-between"
+              "name": "$none"
             },
             {
-              "name": "space-evenly"
+              "name": "$s"
             },
             {
-              "name": "start"
+              "name": "$xl"
             },
             {
-              "name": "stretch"
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "align-items",
-          "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
+          "name": "margin-x",
+          "description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
-              "name": "baseline"
+              "name": "$2xl"
             },
             {
-              "name": "center"
+              "name": "$2xs"
             },
             {
-              "name": "end"
+              "name": "$3xl"
             },
             {
-              "name": "flex-end"
+              "name": "$3xs"
             },
             {
-              "name": "flex-start"
+              "name": "$4xl"
             },
             {
-              "name": "normal"
+              "name": "$4xs"
             },
             {
-              "name": "self-end"
+              "name": "$5xl"
             },
             {
-              "name": "self-start"
+              "name": "$6xl"
             },
             {
-              "name": "start"
+              "name": "$7xl"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "align-self",
-          "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"baseline\",\n  \"lg\": \"center\",\n  \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
-          "values": [
+              "name": "$8xl"
+            },
             {
-              "name": "auto"
+              "name": "$auto"
             },
             {
-              "name": "baseline"
+              "name": "$lg"
             },
             {
-              "name": "center"
+              "name": "$md"
             },
             {
-              "name": "end"
+              "name": "$none"
             },
             {
-              "name": "flex-end"
+              "name": "$s"
             },
             {
-              "name": "flex-start"
+              "name": "$xl"
             },
             {
-              "name": "normal"
+              "name": "$xs"
+            }
+          ]
+        },
+        {
+          "name": "margin-y",
+          "description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "values": [
+            {
+              "name": "$2xl"
             },
             {
-              "name": "self-end"
+              "name": "$2xs"
             },
             {
-              "name": "self-start"
+              "name": "$3xl"
             },
             {
-              "name": "start"
+              "name": "$3xs"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "pointer-events",
-          "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"auto\",\n  \"lg\": \"fill\",\n  \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
-          "values": [
+              "name": "$4xl"
+            },
             {
-              "name": "all"
+              "name": "$4xs"
             },
             {
-              "name": "auto"
+              "name": "$5xl"
             },
             {
-              "name": "fill"
+              "name": "$6xl"
             },
             {
-              "name": "inherit"
+              "name": "$7xl"
             },
             {
-              "name": "none"
+              "name": "$8xl"
             },
             {
-              "name": "painted"
+              "name": "$auto"
             },
             {
-              "name": "stroke"
+              "name": "$lg"
             },
             {
-              "name": "visible"
+              "name": "$md"
             },
             {
-              "name": "visibleFill"
+              "name": "$none"
             },
             {
-              "name": "visiblePainted"
+              "name": "$s"
             },
             {
-              "name": "visibleStroke"
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
             }
           ]
         },
         {
-          "name": "position",
-          "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"absolute\",\n  \"md\": \"fixed\",\n  \"lg\": \"relative\",\n  \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
+          "name": "font-family",
+          "description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body\",\n  \"md\": \"$button\",\n  \"lg\": \"$heading\",\n  \"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
           "values": [
             {
-              "name": "absolute"
-            },
-            {
-              "name": "fixed"
-            },
-            {
-              "name": "relative"
+              "name": "$body"
             },
             {
-              "name": "static"
+              "name": "$button"
             },
             {
-              "name": "sticky"
+              "name": "$heading"
             }
           ]
         },
         {
-          "name": "border-style",
-          "description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"dashed\",\n  \"md\": \"dotted\",\n  \"lg\": \"double\",\n  \"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
+          "name": "font-size",
+          "description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body-l\",\n  \"md\": \"$body-m\",\n  \"lg\": \"$body-s\",\n  \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
           "values": [
             {
-              "name": "dashed"
+              "name": "$body-l"
             },
             {
-              "name": "dotted"
+              "name": "$body-m"
             },
             {
-              "name": "double"
+              "name": "$body-s"
             },
             {
-              "name": "groove"
+              "name": "$body-xl"
             },
             {
-              "name": "hidden"
+              "name": "$body-xs"
             },
             {
-              "name": "inset"
+              "name": "$body-xxs"
             },
             {
-              "name": "none"
+              "name": "$button-l"
             },
             {
-              "name": "outset"
+              "name": "$button-m"
             },
             {
-              "name": "ridge"
+              "name": "$button-s"
             },
             {
-              "name": "solid"
+              "name": "$heading-hero"
+            },
+            {
+              "name": "$heading-l"
+            },
+            {
+              "name": "$heading-m"
+            },
+            {
+              "name": "$heading-s"
+            },
+            {
+              "name": "$heading-xl"
+            },
+            {
+              "name": "$heading-xs"
+            },
+            {
+              "name": "$label-l"
+            },
+            {
+              "name": "$label-m"
+            },
+            {
+              "name": "$label-s"
             }
           ]
         },
         {
-          "name": "box-sizing",
-          "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"border-box\",\n  \"md\": \"content-box\",\n  \"lg\": \"border-box\",\n  \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
+          "name": "font-weight",
+          "description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
           "values": [
             {
-              "name": "border-box"
+              "name": "$bold"
             },
             {
-              "name": "content-box"
+              "name": "$medium"
+            },
+            {
+              "name": "$regular"
+            },
+            {
+              "name": "$semiBold"
             }
           ]
         },
         {
-          "name": "cursor",
-          "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"alias\",\n  \"md\": \"all-scroll\",\n  \"lg\": \"auto\",\n  \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
+          "name": "line-height",
+          "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$body-l\",\n  \"md\": \"$body-m\",\n  \"lg\": \"$body-s\",\n  \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
           "values": [
             {
-              "name": "alias"
+              "name": "$body-l"
             },
             {
-              "name": "all-scroll"
+              "name": "$body-m"
             },
             {
-              "name": "auto"
+              "name": "$body-s"
             },
             {
-              "name": "cell"
+              "name": "$body-xl"
             },
             {
-              "name": "col-resize"
+              "name": "$body-xs"
             },
             {
-              "name": "context-menu"
+              "name": "$body-xxs"
             },
             {
-              "name": "copy"
+              "name": "$button-l"
             },
             {
-              "name": "crosshair"
+              "name": "$button-m"
             },
             {
-              "name": "default"
+              "name": "$button-s"
             },
             {
-              "name": "e-resize"
+              "name": "$heading-hero"
             },
             {
-              "name": "ew-resize"
+              "name": "$heading-l"
             },
             {
-              "name": "grab"
+              "name": "$heading-m"
             },
             {
-              "name": "grabbing"
+              "name": "$heading-s"
             },
             {
-              "name": "help"
+              "name": "$heading-xl"
             },
             {
-              "name": "move"
+              "name": "$heading-xs"
             },
             {
-              "name": "n-resize"
+              "name": "$label-l"
             },
             {
-              "name": "ne-resize"
+              "name": "$label-m"
             },
             {
-              "name": "nesw-resize"
+              "name": "$label-s"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "no-drop"
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "min-intrinsic"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "height",
+          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
             },
             {
               "name": "none"
             },
             {
-              "name": "not-allowed"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-height",
+          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
             },
             {
-              "name": "ns-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "nw-resize"
+              "name": "max-content"
             },
             {
-              "name": "nwse-resize"
+              "name": "min-content"
             },
             {
-              "name": "pointer"
+              "name": "none"
             },
             {
-              "name": "progress"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "min-width",
+          "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "row-resize"
+              "name": "fit-content"
             },
             {
-              "name": "s-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "se-resize"
+              "name": "max-content"
             },
             {
-              "name": "sw-resize"
+              "name": "min-content"
             },
             {
-              "name": "text"
+              "name": "min-intrinsic"
             },
             {
-              "name": "vertical-text"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "min-height",
+          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "w-resize"
+              "name": "fit-content"
             },
             {
-              "name": "wait"
+              "name": "intrinsic"
             },
             {
-              "name": "zoom-in"
+              "name": "max-content"
             },
             {
-              "name": "zoom-out"
+              "name": "min-content"
+            },
+            {
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "overflow",
-          "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
+          "name": "bottom",
+          "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "left",
+          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "right",
+          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "top",
+          "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "grid-template-areas",
+          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
+          "values": []
+        },
+        {
+          "name": "grid-template-columns",
+          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "clip"
+              "name": "max-content"
             },
             {
-              "name": "hidden"
+              "name": "min-content"
             },
             {
-              "name": "scroll"
+              "name": "none"
             },
             {
-              "name": "visible"
+              "name": "subgrid"
             }
           ]
         },
         {
-          "name": "overflow-x",
-          "description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
+          "name": "grid-template-rows",
+          "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "clip"
+              "name": "max-content"
             },
             {
-              "name": "hidden"
+              "name": "min-content"
             },
             {
-              "name": "scroll"
+              "name": "none"
             },
             {
-              "name": "visible"
+              "name": "subgrid"
             }
           ]
         },
         {
-          "name": "overflow-y",
-          "description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
+          "name": "flex-shrink",
+          "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
+          "values": []
+        },
+        {
+          "name": "flex-grow",
+          "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
+          "values": []
+        },
+        {
+          "name": "order",
+          "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
+          "values": []
+        },
+        {
+          "name": "transition-delay",
+          "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
+          "type": "string"
+        },
+        {
+          "name": "transition-property",
+          "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"none\",\n  \"lg\": \"all\",\n  \"xl\": \"none\"\n}\n```\n\n- all\n- none",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "background-image",
+          "description": "The **`background-image`** CSS property sets one or more background images on an element.\n\n\n**Initial value**: `none`",
+          "values": []
+        },
+        {
+          "name": "background-position-x",
+          "description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"left\",\n  \"lg\": \"right\",\n  \"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "x-end"
+            },
+            {
+              "name": "x-start"
+            }
+          ]
+        },
+        {
+          "name": "background-position-y",
+          "description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"top\",\n  \"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "y-end"
+            },
+            {
+              "name": "y-start"
+            }
+          ]
+        },
+        {
+          "name": "background-blend-mode",
+          "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"color\",\n  \"md\": \"color-burn\",\n  \"lg\": \"color-dodge\",\n  \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
+          "values": [
+            {
+              "name": "color"
+            },
+            {
+              "name": "color-burn"
+            },
+            {
+              "name": "color-dodge"
+            },
+            {
+              "name": "darken"
+            },
+            {
+              "name": "difference"
+            },
+            {
+              "name": "exclusion"
+            },
+            {
+              "name": "hard-light"
+            },
+            {
+              "name": "hue"
+            },
+            {
+              "name": "lighten"
+            },
+            {
+              "name": "luminosity"
+            },
+            {
+              "name": "multiply"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "overlay"
+            },
+            {
+              "name": "saturation"
+            },
+            {
+              "name": "screen"
+            },
+            {
+              "name": "soft-light"
+            }
+          ]
+        },
+        {
+          "name": "background-repeat",
+          "description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"no-repeat\",\n  \"md\": \"repeat\",\n  \"lg\": \"repeat-x\",\n  \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
+          "values": [
+            {
+              "name": "no-repeat"
+            },
+            {
+              "name": "repeat"
+            },
+            {
+              "name": "repeat-x"
+            },
+            {
+              "name": "repeat-y"
+            },
+            {
+              "name": "round"
+            },
+            {
+              "name": "space"
+            }
+          ]
+        },
+        {
+          "name": "background-size",
+          "description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"contain\",\n  \"lg\": \"cover\",\n  \"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "clip"
-            },
-            {
-              "name": "hidden"
-            },
-            {
-              "name": "scroll"
+              "name": "contain"
             },
             {
-              "name": "visible"
+              "name": "cover"
             }
           ]
         },
         {
-          "name": "transition-timing-function",
-          "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"ease\",\n  \"md\": \"ease-in\",\n  \"lg\": \"ease-in-out\",\n  \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
+          "name": "display",
+          "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"block\",\n  \"md\": \"contents\",\n  \"lg\": \"flex\",\n  \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
           "values": [
             {
-              "name": "ease"
+              "name": "block"
             },
             {
-              "name": "ease-in"
+              "name": "contents"
             },
             {
-              "name": "ease-in-out"
+              "name": "flex"
             },
             {
-              "name": "ease-out"
+              "name": "flow"
             },
             {
-              "name": "linear"
+              "name": "flow-root"
             },
             {
-              "name": "step-end"
+              "name": "grid"
             },
             {
-              "name": "step-start"
-            }
-          ]
-        },
-        {
-          "name": "text-decoration",
-          "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"blink\",\n  \"lg\": \"dashed\",\n  \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
-          "values": [
+              "name": "inline"
+            },
             {
-              "name": "auto"
+              "name": "inline-block"
             },
             {
-              "name": "blink"
+              "name": "inline-flex"
             },
             {
-              "name": "dashed"
+              "name": "inline-grid"
             },
             {
-              "name": "dotted"
+              "name": "inline-list-item"
             },
             {
-              "name": "double"
+              "name": "inline-table"
             },
             {
-              "name": "from-font"
+              "name": "list-item"
             },
             {
-              "name": "grammar-error"
+              "name": "none"
             },
             {
-              "name": "line-through"
+              "name": "ruby"
             },
             {
-              "name": "none"
+              "name": "ruby-base"
             },
             {
-              "name": "overline"
+              "name": "ruby-base-container"
             },
             {
-              "name": "solid"
+              "name": "ruby-text"
             },
             {
-              "name": "spelling-error"
+              "name": "ruby-text-container"
             },
             {
-              "name": "underline"
+              "name": "run-in"
             },
             {
-              "name": "wavy"
-            }
-          ]
-        },
-        {
-          "name": "text-align",
-          "description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"justify\",\n  \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
-          "values": [
+              "name": "table"
+            },
             {
-              "name": "center"
+              "name": "table-caption"
             },
             {
-              "name": "end"
+              "name": "table-cell"
             },
             {
-              "name": "justify"
+              "name": "table-column"
             },
             {
-              "name": "left"
+              "name": "table-column-group"
             },
             {
-              "name": "match-parent"
+              "name": "table-footer-group"
             },
             {
-              "name": "right"
+              "name": "table-header-group"
             },
             {
-              "name": "start"
+              "name": "table-row"
+            },
+            {
+              "name": "table-row-group"
             }
           ]
         },
         {
-          "name": "opacity",
-          "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
-          "values": []
-        },
-        {
-          "name": "vertical-align",
-          "description": "The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.\n\n\n**Initial value**: `baseline`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"bottom\",\n  \"lg\": \"middle\",\n  \"xl\": \"sub\"\n}\n```\n\n- baseline\n- bottom\n- middle\n- sub\n- super\n- text-bottom\n- text-top\n- top",
+          "name": "flex-direction",
+          "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"row\",\n  \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
           "values": [
             {
-              "name": "baseline"
-            },
-            {
-              "name": "bottom"
+              "name": "column"
             },
             {
-              "name": "middle"
+              "name": "column-reverse"
             },
             {
-              "name": "sub"
+              "name": "row"
             },
             {
-              "name": "super"
-            },
+              "name": "row-reverse"
+            }
+          ]
+        },
+        {
+          "name": "flex-wrap",
+          "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"nowrap\",\n  \"md\": \"wrap\",\n  \"lg\": \"wrap-reverse\",\n  \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
+          "values": [
             {
-              "name": "text-bottom"
+              "name": "nowrap"
             },
             {
-              "name": "text-top"
+              "name": "wrap"
             },
             {
-              "name": "top"
+              "name": "wrap-reverse"
             }
           ]
         },
         {
-          "name": "white-space",
-          "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-spaces\",\n  \"md\": \"normal\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
+          "name": "flex-basis",
+          "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
           "values": [
             {
-              "name": "break-spaces"
+              "name": "auto"
             },
             {
-              "name": "normal"
+              "name": "content"
             },
             {
-              "name": "nowrap"
+              "name": "fit-content"
             },
             {
-              "name": "pre"
+              "name": "max-content"
             },
             {
-              "name": "pre-line"
+              "name": "min-content"
             },
             {
-              "name": "pre-wrap"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "border-width-x",
-          "description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$3\",\n  \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
+          "name": "justify-content",
+          "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"flex-end\",\n  \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
           "values": [
             {
-              "name": "$1"
+              "name": "center"
             },
             {
-              "name": "$2"
+              "name": "end"
             },
             {
-              "name": "$3"
+              "name": "flex-end"
             },
             {
-              "name": "$4"
+              "name": "flex-start"
             },
             {
-              "name": "$5"
+              "name": "left"
             },
             {
-              "name": "$none"
-            }
-          ]
-        },
-        {
-          "name": "border-width-y",
-          "description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$3\",\n  \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
-          "values": [
+              "name": "normal"
+            },
             {
-              "name": "$1"
+              "name": "right"
             },
             {
-              "name": "$2"
+              "name": "space-around"
             },
             {
-              "name": "$3"
+              "name": "space-between"
             },
             {
-              "name": "$4"
+              "name": "space-evenly"
             },
             {
-              "name": "$5"
+              "name": "start"
             },
             {
-              "name": "$none"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "padding-x",
-          "description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "justify-items",
+          "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
           "values": [
             {
-              "name": "$2xl"
+              "name": "baseline"
             },
             {
-              "name": "$2xs"
+              "name": "center"
             },
             {
-              "name": "$3xl"
+              "name": "end"
             },
             {
-              "name": "$3xs"
+              "name": "flex-end"
             },
             {
-              "name": "$4xl"
+              "name": "flex-start"
             },
             {
-              "name": "$4xs"
+              "name": "left"
             },
             {
-              "name": "$5xl"
+              "name": "legacy"
             },
             {
-              "name": "$6xl"
+              "name": "normal"
             },
             {
-              "name": "$7xl"
+              "name": "right"
             },
             {
-              "name": "$8xl"
+              "name": "self-end"
             },
             {
-              "name": "$lg"
+              "name": "self-start"
             },
             {
-              "name": "$md"
+              "name": "start"
             },
             {
-              "name": "$none"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "align-content",
+          "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
+          "values": [
+            {
+              "name": "baseline"
             },
             {
-              "name": "$s"
+              "name": "center"
             },
             {
-              "name": "$xl"
+              "name": "end"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "padding-y",
-          "description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "flex-end"
+            },
             {
-              "name": "$2xl"
+              "name": "flex-start"
             },
             {
-              "name": "$2xs"
+              "name": "normal"
             },
             {
-              "name": "$3xl"
+              "name": "space-around"
             },
             {
-              "name": "$3xs"
+              "name": "space-between"
             },
             {
-              "name": "$4xl"
+              "name": "space-evenly"
             },
             {
-              "name": "$4xs"
+              "name": "start"
             },
             {
-              "name": "$5xl"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "align-items",
+          "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
+          "values": [
+            {
+              "name": "baseline"
             },
             {
-              "name": "$6xl"
+              "name": "center"
             },
             {
-              "name": "$7xl"
+              "name": "end"
             },
             {
-              "name": "$8xl"
+              "name": "flex-end"
             },
             {
-              "name": "$lg"
+              "name": "flex-start"
             },
             {
-              "name": "$md"
+              "name": "normal"
             },
             {
-              "name": "$none"
+              "name": "self-end"
             },
             {
-              "name": "$s"
+              "name": "self-start"
             },
             {
-              "name": "$xl"
+              "name": "start"
             },
             {
-              "name": "$xs"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "p",
-          "description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "align-self",
+          "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"baseline\",\n  \"lg\": \"center\",\n  \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
           "values": [
             {
-              "name": "$2xl"
-            },
-            {
-              "name": "$2xs"
-            },
-            {
-              "name": "$3xl"
-            },
-            {
-              "name": "$3xs"
-            },
-            {
-              "name": "$4xl"
-            },
-            {
-              "name": "$4xs"
+              "name": "auto"
             },
             {
-              "name": "$5xl"
+              "name": "baseline"
             },
             {
-              "name": "$6xl"
+              "name": "center"
             },
             {
-              "name": "$7xl"
+              "name": "end"
             },
             {
-              "name": "$8xl"
+              "name": "flex-end"
             },
             {
-              "name": "$lg"
+              "name": "flex-start"
             },
             {
-              "name": "$md"
+              "name": "normal"
             },
             {
-              "name": "$none"
+              "name": "self-end"
             },
             {
-              "name": "$s"
+              "name": "self-start"
             },
             {
-              "name": "$xl"
+              "name": "start"
             },
             {
-              "name": "$xs"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "pl",
-          "description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "pointer-events",
+          "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"auto\",\n  \"lg\": \"fill\",\n  \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
           "values": [
             {
-              "name": "$2xl"
+              "name": "all"
             },
             {
-              "name": "$2xs"
+              "name": "auto"
             },
             {
-              "name": "$3xl"
+              "name": "fill"
             },
             {
-              "name": "$3xs"
+              "name": "inherit"
             },
             {
-              "name": "$4xl"
+              "name": "none"
             },
             {
-              "name": "$4xs"
+              "name": "painted"
             },
             {
-              "name": "$5xl"
+              "name": "stroke"
             },
             {
-              "name": "$6xl"
+              "name": "visible"
             },
             {
-              "name": "$7xl"
+              "name": "visibleFill"
             },
             {
-              "name": "$8xl"
+              "name": "visiblePainted"
             },
             {
-              "name": "$lg"
+              "name": "visibleStroke"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"absolute\",\n  \"md\": \"fixed\",\n  \"lg\": \"relative\",\n  \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
+          "values": [
+            {
+              "name": "absolute"
             },
             {
-              "name": "$md"
+              "name": "fixed"
             },
             {
-              "name": "$none"
+              "name": "relative"
             },
             {
-              "name": "$s"
+              "name": "static"
             },
             {
-              "name": "$xl"
+              "name": "sticky"
+            }
+          ]
+        },
+        {
+          "name": "box-sizing",
+          "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"border-box\",\n  \"md\": \"content-box\",\n  \"lg\": \"border-box\",\n  \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
+          "values": [
+            {
+              "name": "border-box"
             },
             {
-              "name": "$xs"
+              "name": "content-box"
             }
           ]
         },
         {
-          "name": "pr",
-          "description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "cursor",
+          "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"alias\",\n  \"md\": \"all-scroll\",\n  \"lg\": \"auto\",\n  \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
           "values": [
             {
-              "name": "$2xl"
+              "name": "alias"
             },
             {
-              "name": "$2xs"
+              "name": "all-scroll"
             },
             {
-              "name": "$3xl"
+              "name": "auto"
             },
             {
-              "name": "$3xs"
+              "name": "cell"
             },
             {
-              "name": "$4xl"
+              "name": "col-resize"
             },
             {
-              "name": "$4xs"
+              "name": "context-menu"
             },
             {
-              "name": "$5xl"
+              "name": "copy"
             },
             {
-              "name": "$6xl"
+              "name": "crosshair"
             },
             {
-              "name": "$7xl"
+              "name": "default"
             },
             {
-              "name": "$8xl"
+              "name": "e-resize"
             },
             {
-              "name": "$lg"
+              "name": "ew-resize"
             },
             {
-              "name": "$md"
+              "name": "grab"
             },
             {
-              "name": "$none"
+              "name": "grabbing"
             },
             {
-              "name": "$s"
+              "name": "help"
             },
             {
-              "name": "$xl"
+              "name": "move"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "pt",
-          "description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "n-resize"
+            },
             {
-              "name": "$2xl"
+              "name": "ne-resize"
             },
             {
-              "name": "$2xs"
+              "name": "nesw-resize"
             },
             {
-              "name": "$3xl"
+              "name": "no-drop"
             },
             {
-              "name": "$3xs"
+              "name": "none"
             },
             {
-              "name": "$4xl"
+              "name": "not-allowed"
             },
             {
-              "name": "$4xs"
+              "name": "ns-resize"
             },
             {
-              "name": "$5xl"
+              "name": "nw-resize"
             },
             {
-              "name": "$6xl"
+              "name": "nwse-resize"
             },
             {
-              "name": "$7xl"
+              "name": "pointer"
             },
             {
-              "name": "$8xl"
+              "name": "progress"
             },
             {
-              "name": "$lg"
+              "name": "row-resize"
             },
             {
-              "name": "$md"
+              "name": "s-resize"
             },
             {
-              "name": "$none"
+              "name": "se-resize"
             },
             {
-              "name": "$s"
+              "name": "sw-resize"
             },
             {
-              "name": "$xl"
+              "name": "text"
             },
             {
-              "name": "$xs"
+              "name": "vertical-text"
+            },
+            {
+              "name": "w-resize"
+            },
+            {
+              "name": "wait"
+            },
+            {
+              "name": "zoom-in"
+            },
+            {
+              "name": "zoom-out"
             }
           ]
         },
         {
-          "name": "pb",
-          "description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "overflow-x",
+          "description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
           "values": [
             {
-              "name": "$2xl"
+              "name": "auto"
             },
             {
-              "name": "$2xs"
+              "name": "clip"
             },
             {
-              "name": "$3xl"
+              "name": "hidden"
             },
             {
-              "name": "$3xs"
+              "name": "scroll"
             },
             {
-              "name": "$4xl"
-            },
+              "name": "visible"
+            }
+          ]
+        },
+        {
+          "name": "overflow-y",
+          "description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
+          "values": [
             {
-              "name": "$4xs"
+              "name": "auto"
             },
             {
-              "name": "$5xl"
+              "name": "clip"
             },
             {
-              "name": "$6xl"
+              "name": "hidden"
             },
             {
-              "name": "$7xl"
+              "name": "scroll"
             },
             {
-              "name": "$8xl"
+              "name": "visible"
+            }
+          ]
+        },
+        {
+          "name": "transition-timing-function",
+          "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"ease\",\n  \"md\": \"ease-in\",\n  \"lg\": \"ease-in-out\",\n  \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
+          "values": [
+            {
+              "name": "ease"
             },
             {
-              "name": "$lg"
+              "name": "ease-in"
             },
             {
-              "name": "$md"
+              "name": "ease-in-out"
             },
             {
-              "name": "$none"
+              "name": "ease-out"
             },
             {
-              "name": "$s"
+              "name": "linear"
             },
             {
-              "name": "$xl"
+              "name": "step-end"
             },
             {
-              "name": "$xs"
+              "name": "step-start"
             }
           ]
         },
         {
-          "name": "px",
-          "description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "text-align",
+          "description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"justify\",\n  \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
           "values": [
             {
-              "name": "$2xl"
-            },
-            {
-              "name": "$2xs"
+              "name": "center"
             },
             {
-              "name": "$3xl"
+              "name": "end"
             },
             {
-              "name": "$3xs"
+              "name": "justify"
             },
             {
-              "name": "$4xl"
+              "name": "left"
             },
             {
-              "name": "$4xs"
+              "name": "match-parent"
             },
             {
-              "name": "$5xl"
+              "name": "right"
             },
             {
-              "name": "$6xl"
-            },
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "opacity",
+          "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
+          "values": []
+        },
+        {
+          "name": "vertical-align",
+          "description": "The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.\n\n\n**Initial value**: `baseline`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"bottom\",\n  \"lg\": \"middle\",\n  \"xl\": \"sub\"\n}\n```\n\n- baseline\n- bottom\n- middle\n- sub\n- super\n- text-bottom\n- text-top\n- top",
+          "values": [
             {
-              "name": "$7xl"
+              "name": "baseline"
             },
             {
-              "name": "$8xl"
+              "name": "bottom"
             },
             {
-              "name": "$lg"
+              "name": "middle"
             },
             {
-              "name": "$md"
+              "name": "sub"
             },
             {
-              "name": "$none"
+              "name": "super"
             },
             {
-              "name": "$s"
+              "name": "text-bottom"
             },
             {
-              "name": "$xl"
+              "name": "text-top"
             },
             {
-              "name": "$xs"
+              "name": "top"
             }
           ]
         },
         {
-          "name": "py",
-          "description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "white-space",
+          "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-spaces\",\n  \"md\": \"normal\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
           "values": [
             {
-              "name": "$2xl"
+              "name": "break-spaces"
             },
             {
-              "name": "$2xs"
+              "name": "normal"
             },
             {
-              "name": "$3xl"
+              "name": "nowrap"
             },
             {
-              "name": "$3xs"
+              "name": "pre"
             },
             {
-              "name": "$4xl"
+              "name": "pre-line"
             },
             {
-              "name": "$4xs"
+              "name": "pre-wrap"
+            }
+          ]
+        },
+        {
+          "name": "flex",
+          "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "$5xl"
+              "name": "content"
             },
             {
-              "name": "$6xl"
+              "name": "fit-content"
             },
             {
-              "name": "$7xl"
+              "name": "max-content"
             },
             {
-              "name": "$8xl"
+              "name": "min-content"
             },
             {
-              "name": "$lg"
+              "name": "none"
             },
             {
-              "name": "$md"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "grid-area",
+          "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
+          "values": []
+        },
+        {
+          "name": "background-position",
+          "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"left\",\n  \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
+          "values": [
+            {
+              "name": "bottom"
             },
             {
-              "name": "$none"
+              "name": "center"
             },
             {
-              "name": "$s"
+              "name": "left"
             },
             {
-              "name": "$xl"
+              "name": "right"
             },
             {
-              "name": "$xs"
+              "name": "top"
             }
           ]
         },
         {
-          "name": "margin-x",
-          "description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "flex-flow",
+          "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
           "values": [
             {
-              "name": "$2xl"
+              "name": "column"
             },
             {
-              "name": "$2xs"
+              "name": "column-reverse"
             },
             {
-              "name": "$3xl"
+              "name": "nowrap"
             },
             {
-              "name": "$3xs"
+              "name": "row"
             },
             {
-              "name": "$4xl"
+              "name": "row-reverse"
             },
             {
-              "name": "$4xs"
+              "name": "wrap"
             },
             {
-              "name": "$5xl"
-            },
+              "name": "wrap-reverse"
+            }
+          ]
+        },
+        {
+          "name": "border-style",
+          "description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"dashed\",\n  \"md\": \"dotted\",\n  \"lg\": \"double\",\n  \"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
+          "values": [
             {
-              "name": "$6xl"
+              "name": "dashed"
             },
             {
-              "name": "$7xl"
+              "name": "dotted"
             },
             {
-              "name": "$8xl"
+              "name": "double"
             },
             {
-              "name": "$auto"
+              "name": "groove"
             },
             {
-              "name": "$lg"
+              "name": "hidden"
             },
             {
-              "name": "$md"
+              "name": "inset"
             },
             {
-              "name": "$none"
+              "name": "none"
             },
             {
-              "name": "$s"
+              "name": "outset"
             },
             {
-              "name": "$xl"
+              "name": "ridge"
             },
             {
-              "name": "$xs"
+              "name": "solid"
             }
           ]
         },
         {
-          "name": "margin-y",
-          "description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "overflow",
+          "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
           "values": [
             {
-              "name": "$2xl"
+              "name": "auto"
             },
             {
-              "name": "$2xs"
+              "name": "clip"
             },
             {
-              "name": "$3xl"
+              "name": "hidden"
             },
             {
-              "name": "$3xs"
+              "name": "scroll"
             },
             {
-              "name": "$4xl"
+              "name": "visible"
+            }
+          ]
+        },
+        {
+          "name": "text-decoration",
+          "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"blink\",\n  \"lg\": \"dashed\",\n  \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "$4xs"
+              "name": "blink"
             },
             {
-              "name": "$5xl"
+              "name": "dashed"
             },
             {
-              "name": "$6xl"
+              "name": "dotted"
             },
             {
-              "name": "$7xl"
+              "name": "double"
             },
             {
-              "name": "$8xl"
+              "name": "from-font"
             },
             {
-              "name": "$auto"
+              "name": "grammar-error"
             },
             {
-              "name": "$lg"
+              "name": "line-through"
             },
             {
-              "name": "$md"
+              "name": "none"
             },
             {
-              "name": "$none"
+              "name": "overline"
             },
             {
-              "name": "$s"
+              "name": "solid"
             },
             {
-              "name": "$xl"
+              "name": "spelling-error"
             },
             {
-              "name": "$xs"
+              "name": "underline"
+            },
+            {
+              "name": "wavy"
             }
           ]
         },
         {
-          "name": "m",
-          "description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
+          "name": "as",
+          "default": "div",
+          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-box\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr",
+          "type": "string",
           "values": [
             {
-              "name": "$2xl"
-            },
-            {
-              "name": "$2xs"
-            },
-            {
-              "name": "$3xl"
-            },
-            {
-              "name": "$3xs"
-            },
-            {
-              "name": "$4xl"
-            },
-            {
-              "name": "$4xs"
+              "name": "a"
             },
             {
-              "name": "$5xl"
+              "name": "abbr"
             },
             {
-              "name": "$6xl"
+              "name": "address"
             },
             {
-              "name": "$7xl"
+              "name": "area"
             },
             {
-              "name": "$8xl"
+              "name": "article"
             },
             {
-              "name": "$auto"
+              "name": "aside"
             },
             {
-              "name": "$lg"
+              "name": "audio"
             },
             {
-              "name": "$md"
+              "name": "b"
             },
             {
-              "name": "$none"
+              "name": "base"
             },
             {
-              "name": "$s"
+              "name": "bdi"
             },
             {
-              "name": "$xl"
+              "name": "bdo"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "mr",
-          "description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
-            {
-              "name": "$2xl"
+              "name": "blockquote"
             },
             {
-              "name": "$2xs"
+              "name": "body"
             },
             {
-              "name": "$3xl"
+              "name": "br"
             },
             {
-              "name": "$3xs"
+              "name": "button"
             },
             {
-              "name": "$4xl"
+              "name": "canvas"
             },
             {
-              "name": "$4xs"
+              "name": "caption"
             },
             {
-              "name": "$5xl"
+              "name": "cite"
             },
             {
-              "name": "$6xl"
+              "name": "code"
             },
             {
-              "name": "$7xl"
+              "name": "col"
             },
             {
-              "name": "$8xl"
+              "name": "colgroup"
             },
             {
-              "name": "$auto"
+              "name": "data"
             },
             {
-              "name": "$lg"
+              "name": "datalist"
             },
             {
-              "name": "$md"
+              "name": "dd"
             },
             {
-              "name": "$none"
+              "name": "del"
             },
             {
-              "name": "$s"
+              "name": "details"
             },
             {
-              "name": "$xl"
+              "name": "dfn"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "ml",
-          "description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "dialog"
+            },
             {
-              "name": "$2xl"
+              "name": "div",
+              "description": "(default)"
             },
             {
-              "name": "$2xs"
+              "name": "dl"
             },
             {
-              "name": "$3xl"
+              "name": "dt"
             },
             {
-              "name": "$3xs"
+              "name": "em"
             },
             {
-              "name": "$4xl"
+              "name": "embed"
             },
             {
-              "name": "$4xs"
+              "name": "fieldset"
             },
             {
-              "name": "$5xl"
+              "name": "figcaption"
             },
             {
-              "name": "$6xl"
+              "name": "figure"
             },
             {
-              "name": "$7xl"
+              "name": "footer"
             },
             {
-              "name": "$8xl"
+              "name": "form"
             },
             {
-              "name": "$auto"
+              "name": "h1"
             },
             {
-              "name": "$lg"
+              "name": "h2"
             },
             {
-              "name": "$md"
+              "name": "h3"
             },
             {
-              "name": "$none"
+              "name": "h4"
             },
             {
-              "name": "$s"
+              "name": "h5"
             },
             {
-              "name": "$xl"
+              "name": "h6"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "mt",
-          "description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "head"
+            },
             {
-              "name": "$2xl"
+              "name": "header"
             },
             {
-              "name": "$2xs"
+              "name": "hgroup"
             },
             {
-              "name": "$3xl"
+              "name": "hr"
             },
             {
-              "name": "$3xs"
+              "name": "html"
             },
             {
-              "name": "$4xl"
+              "name": "i"
             },
             {
-              "name": "$4xs"
+              "name": "iframe"
             },
             {
-              "name": "$5xl"
+              "name": "img"
             },
             {
-              "name": "$6xl"
+              "name": "input"
             },
             {
-              "name": "$7xl"
+              "name": "ins"
             },
             {
-              "name": "$8xl"
+              "name": "kbd"
             },
             {
-              "name": "$auto"
+              "name": "label"
             },
             {
-              "name": "$lg"
+              "name": "legend"
             },
             {
-              "name": "$md"
+              "name": "li"
             },
             {
-              "name": "$none"
+              "name": "link"
             },
             {
-              "name": "$s"
+              "name": "main"
             },
             {
-              "name": "$xl"
+              "name": "map"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "mb",
-          "description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "mark"
+            },
             {
-              "name": "$2xl"
+              "name": "menu"
             },
             {
-              "name": "$2xs"
+              "name": "meta"
             },
             {
-              "name": "$3xl"
+              "name": "meter"
             },
             {
-              "name": "$3xs"
+              "name": "nav"
             },
             {
-              "name": "$4xl"
+              "name": "noscript"
             },
             {
-              "name": "$4xs"
+              "name": "object"
             },
             {
-              "name": "$5xl"
+              "name": "ol"
             },
             {
-              "name": "$6xl"
+              "name": "optgroup"
             },
             {
-              "name": "$7xl"
+              "name": "option"
             },
             {
-              "name": "$8xl"
+              "name": "output"
             },
             {
-              "name": "$auto"
+              "name": "p"
             },
             {
-              "name": "$lg"
+              "name": "picture"
             },
             {
-              "name": "$md"
+              "name": "pre"
             },
             {
-              "name": "$none"
+              "name": "progress"
             },
             {
-              "name": "$s"
+              "name": "q"
             },
             {
-              "name": "$xl"
+              "name": "rarui-box"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "mx",
-          "description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "rp"
+            },
             {
-              "name": "$2xl"
+              "name": "rt"
             },
             {
-              "name": "$2xs"
+              "name": "ruby"
             },
             {
-              "name": "$3xl"
+              "name": "s"
             },
             {
-              "name": "$3xs"
+              "name": "samp"
             },
             {
-              "name": "$4xl"
+              "name": "script"
             },
             {
-              "name": "$4xs"
+              "name": "section"
             },
             {
-              "name": "$5xl"
+              "name": "select"
             },
             {
-              "name": "$6xl"
+              "name": "slot"
             },
             {
-              "name": "$7xl"
+              "name": "small"
             },
             {
-              "name": "$8xl"
+              "name": "source"
             },
             {
-              "name": "$auto"
+              "name": "span"
             },
             {
-              "name": "$lg"
+              "name": "strong"
             },
             {
-              "name": "$md"
+              "name": "style"
             },
             {
-              "name": "$none"
+              "name": "sub"
             },
             {
-              "name": "$s"
+              "name": "summary"
             },
             {
-              "name": "$xl"
+              "name": "sup"
             },
             {
-              "name": "$xs"
-            }
-          ]
-        },
-        {
-          "name": "my",
-          "description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$2xl\",\n  \"md\": \"$2xs\",\n  \"lg\": \"$3xl\",\n  \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
-          "values": [
+              "name": "table"
+            },
             {
-              "name": "$2xl"
+              "name": "tbody"
             },
             {
-              "name": "$2xs"
+              "name": "td"
             },
             {
-              "name": "$3xl"
+              "name": "template"
             },
             {
-              "name": "$3xs"
+              "name": "textarea"
             },
             {
-              "name": "$4xl"
+              "name": "tfoot"
             },
             {
-              "name": "$4xs"
+              "name": "th"
             },
             {
-              "name": "$5xl"
+              "name": "thead"
             },
             {
-              "name": "$6xl"
+              "name": "time"
             },
             {
-              "name": "$7xl"
+              "name": "title"
             },
             {
-              "name": "$8xl"
+              "name": "tr"
             },
             {
-              "name": "$auto"
+              "name": "track"
             },
             {
-              "name": "$lg"
+              "name": "u"
             },
             {
-              "name": "$md"
+              "name": "ul"
             },
             {
-              "name": "$none"
+              "name": "var"
             },
             {
-              "name": "$s"
+              "name": "video"
             },
             {
-              "name": "$xl"
+              "name": "wbr"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-breadcrumb",
+      "description": "## Rarui Breadcrumb\n---\nComponente de navegação hierárquica que permite aos usuários navegar através de uma estrutura de páginas.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb) for more details.",
+      "attributes": [
+        {
+          "name": "items-after-truncate",
+          "default": 10,
+          "description": "Especifica o número de itens do breadcrumb a serem exibidos após o truncamento.\nÚtil para gerenciar a exibição de listas longas de breadcrumb.",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "rarui-breadcrumb-item",
+      "description": "## Rarui BreadcrumbItem\n---\nItem individual do breadcrumb que pode ser renderizado como link ou botão.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb-item) for more details.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Nome do item do breadcrumb exibido como texto.",
+          "type": "string"
+        },
+        {
+          "name": "active",
+          "description": "Indicates whether the breadcrumb item is currently active.\nAn active item is typically styled differently to show that it represents the current page.",
+          "type": "boolean"
+        },
+        {
+          "name": "href",
+          "description": "URL de destino quando o item for um link.",
+          "type": "string"
+        },
+        {
+          "name": "as",
+          "default": "button",
+          "description": "Tipo de elemento a ser renderizado.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
             },
             {
-              "name": "$xs"
+              "name": "button",
+              "description": "(default)"
             }
           ]
         }
@@ -7283,6 +7675,107 @@
         }
       ]
     },
+    {
+      "name": "rarui-side-navigation-item",
+      "description": "## Rarui SideNavigationItem\n---\nA navigation item component for use within SideNavigation.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Determines if the item is active or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "level",
+          "description": "Determines the level of nesting for the item.\n\n- 0\n- 1\n- 2",
+          "type": "number",
+          "values": [
+            {
+              "name": 0
+            },
+            {
+              "name": 1
+            },
+            {
+              "name": 2
+            }
+          ]
+        },
+        {
+          "name": "as",
+          "default": "button",
+          "description": "The HTML element type to render.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-side-navigation",
+      "description": "## Rarui SideNavigation\n---\nA navigation component that supports collapsible content with nested items.\n\n### Slots\n- **Default slot**: Content for nested navigation items\n- **leading-start**: Content to display at the start (e.g., icons)\n- **leading-end**: Content to display at the end (e.g., custom icons)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Title of the sideNavigation",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "Description of the sideNavigation.",
+          "type": "string"
+        },
+        {
+          "name": "active",
+          "default": false,
+          "description": "Whether the navigation item is in active state.",
+          "type": "boolean"
+        },
+        {
+          "name": "level",
+          "description": "Determines the level of nesting for the item.\n\n- 0\n- 1\n- 2",
+          "type": "number",
+          "values": [
+            {
+              "name": 0
+            },
+            {
+              "name": 1
+            },
+            {
+              "name": 2
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Whether the navigation item is disabled.",
+          "type": "boolean"
+        },
+        {
+          "name": "as",
+          "default": "button",
+          "description": "The HTML element type to render.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-tabs",
       "description": "## Rarui Tabs\n---\nThe Tabs are used to switch between different display modes or pages.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/tabs) for more details.",