@rarui/components 1.8.0 → 1.10.0

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-rc.1",
+  "version": "1.9.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -128,7 +128,7 @@
         {
           "name": "type",
           "default": "solid",
-          "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$dashed\",\n\"md\": \"$solid\",\n\"lg\": \"$dashed\",\n\"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
+          "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\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\": \"$solid\",\n  \"lg\": \"$dashed\",\n  \"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
           "values": [
             {
               "name": "$dashed"
@@ -141,7 +141,7 @@
         {
           "name": "thickness",
           "default": "$1",
-          "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$1\",\n\"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
+          "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\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\": \"$1\",\n  \"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
           "values": [
             {
               "name": "$1",
@@ -155,7 +155,7 @@
         {
           "name": "color",
           "default": "$divider",
-          "description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\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",
+          "description": "The **`color`** CSS property sets an element's color.\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": "$brand"
@@ -209,7 +209,7 @@
       "attributes": [
         {
           "name": "color",
-          "description": "The color property sets the icon.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\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",
+          "description": "The color property sets the icon.\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"
@@ -272,7 +272,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "alias"
@@ -383,6 +383,975 @@
               "name": "zoom-out"
             }
           ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the icon to be rendered (must be in the @rarui/icons package).\n\n- add-circle-filled\n- add-circle-outlined\n- alarm-filled\n- alarm-outlined\n- alternate-email\n- archive-all-filled\n- archive-all-outlined\n- archive-filled\n- archive-in-filled\n- archive-in-outlined\n- archive-outlined\n- arrow-alt-down\n- arrow-alt-left\n- arrow-alt-right\n- arrow-alt-up\n- arrow-circle-down-filled\n- arrow-circle-down-outlined\n- arrow-circle-up-filled\n- arrow-circle-up-outlined\n- arrow-circled-down-circle-outlined\n- arrow-circled-down-filled\n- arrow-circled-up-circle-outlined\n- arrow-direction-down-up\n- arrow-direction-left-right\n- arrow-direction-right-left\n- arrow-direction-up-down\n- arrow-directions\n- arrow-down\n- arrow-down-left\n- arrow-down-right\n- arrow-first-page\n- arrow-last-page\n- arrow-left\n- arrow-line-down\n- arrow-line-left\n- arrow-line-long-down\n- arrow-line-long-left\n- arrow-line-long-right\n- arrow-line-long-up\n- arrow-line-right\n- arrow-line-up\n- arrow-right\n- arrow-subdirectory-left\n- arrow-subdirectory-right\n- arrow-trending-down\n- arrow-trending-up\n- arrow-up\n- arrow-up-left\n- arrow-up-right\n- attachment\n- backspace\n- backspace-outlined\n- barley\n- barley-off\n- bolt-circle-filled\n- bolt-circle-outlined\n- bookmark-filled\n- bookmark-outlined\n- calendar-date-range-filled\n- calendar-date-range-outlined\n- calendar-event-filled\n- calendar-event-outlined\n- calendar-filled\n- calendar-outlined\n- camera-filled\n- camera-outlined\n- camera-shutter-filled\n- camera-shutter-outlined\n- cancel-circle-filled\n- cancel-circle-outlined\n- car-filled\n- car-outlined\n- chart-bars-filled\n- chart-bars-outlined\n- chat-bubble-filled\n- chat-bubble-outlined\n- chat-message-filled\n- chat-message-outlined\n- check\n- check-circle-filled\n- check-circle-outlined\n- check-small\n- chevron-big-down\n- chevron-big-left\n- chevron-big-right\n- chevron-big-up\n- chevron-down\n- chevron-left\n- chevron-right\n- chevron-up\n- clock-filled\n- clock-outlined\n- close\n- cloud-filled\n- cloud-outlined\n- contact-support-filled\n- contact-support-outlined\n- content-copy-filled\n- content-copy-outlined\n- content-paste-filled\n- content-paste-outlined\n- conversation-filled\n- conversation-outlined\n- copyright-filled\n- copyright-outlined\n- credit-card-filled\n- credit-card-outlined\n- danger-filled\n- danger-outlined\n- dashboard-filled\n- dashboard-outlined\n- document-filled\n- document-outlined\n- document-text-filled\n- document-text-outlined\n- download-filled\n- download-outlined\n- eco-filled\n- eco-outlined\n- edit-filled\n- edit-outlined\n- euro-symbol\n- exit-fullscreen\n- eye-filled\n- eye-off-filled\n- eye-off-outlined\n- eye-outlined\n- facebook-filled\n- facebook-outlined\n- file-copy-filled\n- file-copy-outlined\n- filter-alt-filled\n- filter-alt-outlined\n- filter-list\n- fingerprint\n- flag-filled\n- flag-outlined\n- flag-tour-filled\n- flag-tour-outlined\n- flower-filled\n- flower-outlined\n- folder-filled\n- folder-list-filled\n- folder-list-outlined\n- folder-open\n- folder-outlined\n- fruit-apple-filled\n- fruit-apple-outlined\n- fullscreen-filled\n- fullscreen-outlined\n- google\n- google-play\n- headphones-filled\n- headphones-outlined\n- heart-filled\n- heart-outlined\n- help-filled\n- help-outlined\n- history\n- home-filled\n- home-outlined\n- image-filled\n- image-outlined\n- info-circle-filled\n- info-circle-outlined\n- instagram\n- instagram-outlined\n- label-filled\n- label-important-filled\n- label-important-outlined\n- label-outlined\n- language\n- lightbulb-filled\n- lightbulb-outlined\n- link\n- linkedin-filled\n- linkedin-outlined\n- loader\n- loading\n- lock-filled\n- lock-open-filled\n- lock-open-outlined\n- lock-outlined\n- login\n- logout\n- mail-filled\n- mail-open-filled\n- mail-open-outlined\n- mail-outlined\n- menu\n- menu-large\n- microphone-filled\n- microphone-outlined\n- minus\n- money-filled\n- money-outlined\n- mood-bad\n- mood-bad-outlined\n- mood-filled\n- mood-outlined\n- more-horiz\n- more-vert\n- music-note-filled\n- music-note-outlined\n- notification-filled\n- notification-outlined\n- open-in-new\n- package\n- package-outlined\n- pause-filled\n- pause-outlined\n- pets-filled\n- pets-outlined\n- phone-call-filled\n- phone-call-outlined\n- phone-filled\n- phone-outlined\n- pin-filled\n- pin-outlined\n- play-arrow-filled\n- play-arrow-outlined\n- play-circle-filled\n- play-circle-outlined\n- plus\n- power-settings-new\n- printer-filled\n- printer-outlined\n- push-pin-filled\n- push-pin-outlined\n- receipt-filled\n- receipt-outlined\n- recycle\n- redeem\n- redo\n- refresh\n- refresh-alt\n- remove\n- remove-circle-filled\n- remove-circle-outlined\n- repeat\n- reply\n- save-alt\n- screen-outlined\n- search\n- send-filled\n- send-outlined\n- sentiment-dissatisfied-filled\n- sentiment-dissatisfied-outlined\n- sentiment-neutral-filled\n- sentiment-neutral-outlined\n- sentiment-satisfied-filled\n- sentiment-satisfied-outlined\n- sentiment-very-dissatisfied-filled\n- sentiment-very-dissatisfied-outlined\n- sentiment-very-satisfied-filled\n- sentiment-very-satisfied-outlined\n- settings-filled\n- settings-outlined\n- share-filled\n- share-outlined\n- shopping-bag-filled\n- shopping-bag-outlined\n- shopping-cart-add\n- shopping-cart-filled\n- shopping-cart-outlined\n- sprout\n- sprout-outline-outlined\n- star-filled\n- star-outlined\n- stay-primary-portrait\n- storefront\n- tag-filled\n- tag-outlined\n- textsms-filled\n- textsms-outlined\n- thumb-down-filled\n- thumb-down-outlined\n- thumb-up-filled\n- thumb-up-outlined\n- tiktok\n- toc\n- trash-filled\n- trash-outlined\n- truck-filled\n- truck-outlined\n- tune\n- twitter\n- undo\n- upload-filled\n- upload-outlined\n- user-circle-filled\n- user-circle-outlined\n- user-filled\n- user-outlined\n- user-square-filled\n- user-square-outlined\n- users-filled\n- users-outlined\n- view-grid-filled\n- view-grid-outlined\n- view-list-filled\n- view-list-outlined\n- warning-bubble-filled\n- warning-bubble-outlined\n- warning-filled\n- warning-outlined\n- whatsapp-filled\n- whatsapp-outlined\n- work-filled\n- work-outlined\n- wysiwyg-filled\n- youtube-filled\n- youtube-outlined\n- zoom-in\n- zoom-out\n\n(Required)",
+          "type": "string",
+          "values": [
+            {
+              "name": "add-circle-filled"
+            },
+            {
+              "name": "add-circle-outlined"
+            },
+            {
+              "name": "alarm-filled"
+            },
+            {
+              "name": "alarm-outlined"
+            },
+            {
+              "name": "alternate-email"
+            },
+            {
+              "name": "archive-all-filled"
+            },
+            {
+              "name": "archive-all-outlined"
+            },
+            {
+              "name": "archive-filled"
+            },
+            {
+              "name": "archive-in-filled"
+            },
+            {
+              "name": "archive-in-outlined"
+            },
+            {
+              "name": "archive-outlined"
+            },
+            {
+              "name": "arrow-alt-down"
+            },
+            {
+              "name": "arrow-alt-left"
+            },
+            {
+              "name": "arrow-alt-right"
+            },
+            {
+              "name": "arrow-alt-up"
+            },
+            {
+              "name": "arrow-circle-down-filled"
+            },
+            {
+              "name": "arrow-circle-down-outlined"
+            },
+            {
+              "name": "arrow-circle-up-filled"
+            },
+            {
+              "name": "arrow-circle-up-outlined"
+            },
+            {
+              "name": "arrow-circled-down-circle-outlined"
+            },
+            {
+              "name": "arrow-circled-down-filled"
+            },
+            {
+              "name": "arrow-circled-up-circle-outlined"
+            },
+            {
+              "name": "arrow-direction-down-up"
+            },
+            {
+              "name": "arrow-direction-left-right"
+            },
+            {
+              "name": "arrow-direction-right-left"
+            },
+            {
+              "name": "arrow-direction-up-down"
+            },
+            {
+              "name": "arrow-directions"
+            },
+            {
+              "name": "arrow-down"
+            },
+            {
+              "name": "arrow-down-left"
+            },
+            {
+              "name": "arrow-down-right"
+            },
+            {
+              "name": "arrow-first-page"
+            },
+            {
+              "name": "arrow-last-page"
+            },
+            {
+              "name": "arrow-left"
+            },
+            {
+              "name": "arrow-line-down"
+            },
+            {
+              "name": "arrow-line-left"
+            },
+            {
+              "name": "arrow-line-long-down"
+            },
+            {
+              "name": "arrow-line-long-left"
+            },
+            {
+              "name": "arrow-line-long-right"
+            },
+            {
+              "name": "arrow-line-long-up"
+            },
+            {
+              "name": "arrow-line-right"
+            },
+            {
+              "name": "arrow-line-up"
+            },
+            {
+              "name": "arrow-right"
+            },
+            {
+              "name": "arrow-subdirectory-left"
+            },
+            {
+              "name": "arrow-subdirectory-right"
+            },
+            {
+              "name": "arrow-trending-down"
+            },
+            {
+              "name": "arrow-trending-up"
+            },
+            {
+              "name": "arrow-up"
+            },
+            {
+              "name": "arrow-up-left"
+            },
+            {
+              "name": "arrow-up-right"
+            },
+            {
+              "name": "attachment"
+            },
+            {
+              "name": "backspace"
+            },
+            {
+              "name": "backspace-outlined"
+            },
+            {
+              "name": "barley"
+            },
+            {
+              "name": "barley-off"
+            },
+            {
+              "name": "bolt-circle-filled"
+            },
+            {
+              "name": "bolt-circle-outlined"
+            },
+            {
+              "name": "bookmark-filled"
+            },
+            {
+              "name": "bookmark-outlined"
+            },
+            {
+              "name": "calendar-date-range-filled"
+            },
+            {
+              "name": "calendar-date-range-outlined"
+            },
+            {
+              "name": "calendar-event-filled"
+            },
+            {
+              "name": "calendar-event-outlined"
+            },
+            {
+              "name": "calendar-filled"
+            },
+            {
+              "name": "calendar-outlined"
+            },
+            {
+              "name": "camera-filled"
+            },
+            {
+              "name": "camera-outlined"
+            },
+            {
+              "name": "camera-shutter-filled"
+            },
+            {
+              "name": "camera-shutter-outlined"
+            },
+            {
+              "name": "cancel-circle-filled"
+            },
+            {
+              "name": "cancel-circle-outlined"
+            },
+            {
+              "name": "car-filled"
+            },
+            {
+              "name": "car-outlined"
+            },
+            {
+              "name": "chart-bars-filled"
+            },
+            {
+              "name": "chart-bars-outlined"
+            },
+            {
+              "name": "chat-bubble-filled"
+            },
+            {
+              "name": "chat-bubble-outlined"
+            },
+            {
+              "name": "chat-message-filled"
+            },
+            {
+              "name": "chat-message-outlined"
+            },
+            {
+              "name": "check"
+            },
+            {
+              "name": "check-circle-filled"
+            },
+            {
+              "name": "check-circle-outlined"
+            },
+            {
+              "name": "check-small"
+            },
+            {
+              "name": "chevron-big-down"
+            },
+            {
+              "name": "chevron-big-left"
+            },
+            {
+              "name": "chevron-big-right"
+            },
+            {
+              "name": "chevron-big-up"
+            },
+            {
+              "name": "chevron-down"
+            },
+            {
+              "name": "chevron-left"
+            },
+            {
+              "name": "chevron-right"
+            },
+            {
+              "name": "chevron-up"
+            },
+            {
+              "name": "clock-filled"
+            },
+            {
+              "name": "clock-outlined"
+            },
+            {
+              "name": "close"
+            },
+            {
+              "name": "cloud-filled"
+            },
+            {
+              "name": "cloud-outlined"
+            },
+            {
+              "name": "contact-support-filled"
+            },
+            {
+              "name": "contact-support-outlined"
+            },
+            {
+              "name": "content-copy-filled"
+            },
+            {
+              "name": "content-copy-outlined"
+            },
+            {
+              "name": "content-paste-filled"
+            },
+            {
+              "name": "content-paste-outlined"
+            },
+            {
+              "name": "conversation-filled"
+            },
+            {
+              "name": "conversation-outlined"
+            },
+            {
+              "name": "copyright-filled"
+            },
+            {
+              "name": "copyright-outlined"
+            },
+            {
+              "name": "credit-card-filled"
+            },
+            {
+              "name": "credit-card-outlined"
+            },
+            {
+              "name": "danger-filled"
+            },
+            {
+              "name": "danger-outlined"
+            },
+            {
+              "name": "dashboard-filled"
+            },
+            {
+              "name": "dashboard-outlined"
+            },
+            {
+              "name": "document-filled"
+            },
+            {
+              "name": "document-outlined"
+            },
+            {
+              "name": "document-text-filled"
+            },
+            {
+              "name": "document-text-outlined"
+            },
+            {
+              "name": "download-filled"
+            },
+            {
+              "name": "download-outlined"
+            },
+            {
+              "name": "eco-filled"
+            },
+            {
+              "name": "eco-outlined"
+            },
+            {
+              "name": "edit-filled"
+            },
+            {
+              "name": "edit-outlined"
+            },
+            {
+              "name": "euro-symbol"
+            },
+            {
+              "name": "exit-fullscreen"
+            },
+            {
+              "name": "eye-filled"
+            },
+            {
+              "name": "eye-off-filled"
+            },
+            {
+              "name": "eye-off-outlined"
+            },
+            {
+              "name": "eye-outlined"
+            },
+            {
+              "name": "facebook-filled"
+            },
+            {
+              "name": "facebook-outlined"
+            },
+            {
+              "name": "file-copy-filled"
+            },
+            {
+              "name": "file-copy-outlined"
+            },
+            {
+              "name": "filter-alt-filled"
+            },
+            {
+              "name": "filter-alt-outlined"
+            },
+            {
+              "name": "filter-list"
+            },
+            {
+              "name": "fingerprint"
+            },
+            {
+              "name": "flag-filled"
+            },
+            {
+              "name": "flag-outlined"
+            },
+            {
+              "name": "flag-tour-filled"
+            },
+            {
+              "name": "flag-tour-outlined"
+            },
+            {
+              "name": "flower-filled"
+            },
+            {
+              "name": "flower-outlined"
+            },
+            {
+              "name": "folder-filled"
+            },
+            {
+              "name": "folder-list-filled"
+            },
+            {
+              "name": "folder-list-outlined"
+            },
+            {
+              "name": "folder-open"
+            },
+            {
+              "name": "folder-outlined"
+            },
+            {
+              "name": "fruit-apple-filled"
+            },
+            {
+              "name": "fruit-apple-outlined"
+            },
+            {
+              "name": "fullscreen-filled"
+            },
+            {
+              "name": "fullscreen-outlined"
+            },
+            {
+              "name": "google"
+            },
+            {
+              "name": "google-play"
+            },
+            {
+              "name": "headphones-filled"
+            },
+            {
+              "name": "headphones-outlined"
+            },
+            {
+              "name": "heart-filled"
+            },
+            {
+              "name": "heart-outlined"
+            },
+            {
+              "name": "help-filled"
+            },
+            {
+              "name": "help-outlined"
+            },
+            {
+              "name": "history"
+            },
+            {
+              "name": "home-filled"
+            },
+            {
+              "name": "home-outlined"
+            },
+            {
+              "name": "image-filled"
+            },
+            {
+              "name": "image-outlined"
+            },
+            {
+              "name": "info-circle-filled"
+            },
+            {
+              "name": "info-circle-outlined"
+            },
+            {
+              "name": "instagram"
+            },
+            {
+              "name": "instagram-outlined"
+            },
+            {
+              "name": "label-filled"
+            },
+            {
+              "name": "label-important-filled"
+            },
+            {
+              "name": "label-important-outlined"
+            },
+            {
+              "name": "label-outlined"
+            },
+            {
+              "name": "language"
+            },
+            {
+              "name": "lightbulb-filled"
+            },
+            {
+              "name": "lightbulb-outlined"
+            },
+            {
+              "name": "link"
+            },
+            {
+              "name": "linkedin-filled"
+            },
+            {
+              "name": "linkedin-outlined"
+            },
+            {
+              "name": "loader"
+            },
+            {
+              "name": "loading"
+            },
+            {
+              "name": "lock-filled"
+            },
+            {
+              "name": "lock-open-filled"
+            },
+            {
+              "name": "lock-open-outlined"
+            },
+            {
+              "name": "lock-outlined"
+            },
+            {
+              "name": "login"
+            },
+            {
+              "name": "logout"
+            },
+            {
+              "name": "mail-filled"
+            },
+            {
+              "name": "mail-open-filled"
+            },
+            {
+              "name": "mail-open-outlined"
+            },
+            {
+              "name": "mail-outlined"
+            },
+            {
+              "name": "menu"
+            },
+            {
+              "name": "menu-large"
+            },
+            {
+              "name": "microphone-filled"
+            },
+            {
+              "name": "microphone-outlined"
+            },
+            {
+              "name": "minus"
+            },
+            {
+              "name": "money-filled"
+            },
+            {
+              "name": "money-outlined"
+            },
+            {
+              "name": "mood-bad"
+            },
+            {
+              "name": "mood-bad-outlined"
+            },
+            {
+              "name": "mood-filled"
+            },
+            {
+              "name": "mood-outlined"
+            },
+            {
+              "name": "more-horiz"
+            },
+            {
+              "name": "more-vert"
+            },
+            {
+              "name": "music-note-filled"
+            },
+            {
+              "name": "music-note-outlined"
+            },
+            {
+              "name": "notification-filled"
+            },
+            {
+              "name": "notification-outlined"
+            },
+            {
+              "name": "open-in-new"
+            },
+            {
+              "name": "package"
+            },
+            {
+              "name": "package-outlined"
+            },
+            {
+              "name": "pause-filled"
+            },
+            {
+              "name": "pause-outlined"
+            },
+            {
+              "name": "pets-filled"
+            },
+            {
+              "name": "pets-outlined"
+            },
+            {
+              "name": "phone-call-filled"
+            },
+            {
+              "name": "phone-call-outlined"
+            },
+            {
+              "name": "phone-filled"
+            },
+            {
+              "name": "phone-outlined"
+            },
+            {
+              "name": "pin-filled"
+            },
+            {
+              "name": "pin-outlined"
+            },
+            {
+              "name": "play-arrow-filled"
+            },
+            {
+              "name": "play-arrow-outlined"
+            },
+            {
+              "name": "play-circle-filled"
+            },
+            {
+              "name": "play-circle-outlined"
+            },
+            {
+              "name": "plus"
+            },
+            {
+              "name": "power-settings-new"
+            },
+            {
+              "name": "printer-filled"
+            },
+            {
+              "name": "printer-outlined"
+            },
+            {
+              "name": "push-pin-filled"
+            },
+            {
+              "name": "push-pin-outlined"
+            },
+            {
+              "name": "receipt-filled"
+            },
+            {
+              "name": "receipt-outlined"
+            },
+            {
+              "name": "recycle"
+            },
+            {
+              "name": "redeem"
+            },
+            {
+              "name": "redo"
+            },
+            {
+              "name": "refresh"
+            },
+            {
+              "name": "refresh-alt"
+            },
+            {
+              "name": "remove"
+            },
+            {
+              "name": "remove-circle-filled"
+            },
+            {
+              "name": "remove-circle-outlined"
+            },
+            {
+              "name": "repeat"
+            },
+            {
+              "name": "reply"
+            },
+            {
+              "name": "save-alt"
+            },
+            {
+              "name": "screen-outlined"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "send-filled"
+            },
+            {
+              "name": "send-outlined"
+            },
+            {
+              "name": "sentiment-dissatisfied-filled"
+            },
+            {
+              "name": "sentiment-dissatisfied-outlined"
+            },
+            {
+              "name": "sentiment-neutral-filled"
+            },
+            {
+              "name": "sentiment-neutral-outlined"
+            },
+            {
+              "name": "sentiment-satisfied-filled"
+            },
+            {
+              "name": "sentiment-satisfied-outlined"
+            },
+            {
+              "name": "sentiment-very-dissatisfied-filled"
+            },
+            {
+              "name": "sentiment-very-dissatisfied-outlined"
+            },
+            {
+              "name": "sentiment-very-satisfied-filled"
+            },
+            {
+              "name": "sentiment-very-satisfied-outlined"
+            },
+            {
+              "name": "settings-filled"
+            },
+            {
+              "name": "settings-outlined"
+            },
+            {
+              "name": "share-filled"
+            },
+            {
+              "name": "share-outlined"
+            },
+            {
+              "name": "shopping-bag-filled"
+            },
+            {
+              "name": "shopping-bag-outlined"
+            },
+            {
+              "name": "shopping-cart-add"
+            },
+            {
+              "name": "shopping-cart-filled"
+            },
+            {
+              "name": "shopping-cart-outlined"
+            },
+            {
+              "name": "sprout"
+            },
+            {
+              "name": "sprout-outline-outlined"
+            },
+            {
+              "name": "star-filled"
+            },
+            {
+              "name": "star-outlined"
+            },
+            {
+              "name": "stay-primary-portrait"
+            },
+            {
+              "name": "storefront"
+            },
+            {
+              "name": "tag-filled"
+            },
+            {
+              "name": "tag-outlined"
+            },
+            {
+              "name": "textsms-filled"
+            },
+            {
+              "name": "textsms-outlined"
+            },
+            {
+              "name": "thumb-down-filled"
+            },
+            {
+              "name": "thumb-down-outlined"
+            },
+            {
+              "name": "thumb-up-filled"
+            },
+            {
+              "name": "thumb-up-outlined"
+            },
+            {
+              "name": "tiktok"
+            },
+            {
+              "name": "toc"
+            },
+            {
+              "name": "trash-filled"
+            },
+            {
+              "name": "trash-outlined"
+            },
+            {
+              "name": "truck-filled"
+            },
+            {
+              "name": "truck-outlined"
+            },
+            {
+              "name": "tune"
+            },
+            {
+              "name": "twitter"
+            },
+            {
+              "name": "undo"
+            },
+            {
+              "name": "upload-filled"
+            },
+            {
+              "name": "upload-outlined"
+            },
+            {
+              "name": "user-circle-filled"
+            },
+            {
+              "name": "user-circle-outlined"
+            },
+            {
+              "name": "user-filled"
+            },
+            {
+              "name": "user-outlined"
+            },
+            {
+              "name": "user-square-filled"
+            },
+            {
+              "name": "user-square-outlined"
+            },
+            {
+              "name": "users-filled"
+            },
+            {
+              "name": "users-outlined"
+            },
+            {
+              "name": "view-grid-filled"
+            },
+            {
+              "name": "view-grid-outlined"
+            },
+            {
+              "name": "view-list-filled"
+            },
+            {
+              "name": "view-list-outlined"
+            },
+            {
+              "name": "warning-bubble-filled"
+            },
+            {
+              "name": "warning-bubble-outlined"
+            },
+            {
+              "name": "warning-filled"
+            },
+            {
+              "name": "warning-outlined"
+            },
+            {
+              "name": "whatsapp-filled"
+            },
+            {
+              "name": "whatsapp-outlined"
+            },
+            {
+              "name": "work-filled"
+            },
+            {
+              "name": "work-outlined"
+            },
+            {
+              "name": "wysiwyg-filled"
+            },
+            {
+              "name": "youtube-filled"
+            },
+            {
+              "name": "youtube-outlined"
+            },
+            {
+              "name": "zoom-in"
+            },
+            {
+              "name": "zoom-out"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Icon size, can be 'small' |'medium' |'large' or a number.\n\n- large\n- medium\n- small",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
         }
       ]
     },
@@ -392,7 +1361,7 @@
       "attributes": [
         {
           "name": "color",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\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",
+          "description": "The color property is used to set the color of the title.\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"
@@ -456,7 +1425,7 @@
         {
           "name": "font-weight",
           "default": "$regular",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\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",
+          "description": "The color property is used to set the color of the title.\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": "$bold"
@@ -475,7 +1444,7 @@
         },
         {
           "name": "line-height",
-          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$l\",\n\"md\": \"$m\",\n\"lg\": \"$s\",\n\"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
+          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
           "values": [
             {
               "name": "$l"
@@ -499,7 +1468,7 @@
         },
         {
           "name": "font-size",
-          "description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$l\",\n\"md\": \"$m\",\n\"lg\": \"$s\",\n\"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
+          "description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
           "values": [
             {
               "name": "$l"
@@ -523,7 +1492,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "center"
@@ -550,7 +1519,7 @@
         },
         {
           "name": "word-break",
-          "description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"break-all\",\n\"md\": \"break-word\",\n\"lg\": \"keep-all\",\n\"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
+          "description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-all\",\n  \"md\": \"break-word\",\n  \"lg\": \"keep-all\",\n  \"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
           "values": [
             {
               "name": "break-all"
@@ -568,7 +1537,7 @@
         },
         {
           "name": "text-transform",
-          "description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"capitalize\",\n\"md\": \"full-size-kana\",\n\"lg\": \"full-width\",\n\"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
+          "description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"capitalize\",\n  \"md\": \"full-size-kana\",\n  \"lg\": \"full-width\",\n  \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
           "values": [
             {
               "name": "capitalize"
@@ -592,7 +1561,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -640,7 +1609,7 @@
         },
         {
           "name": "text-overflow",
-          "description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"clip\",\n\"md\": \"ellipsis\",\n\"lg\": \"clip\",\n\"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
+          "description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"clip\",\n  \"md\": \"ellipsis\",\n  \"lg\": \"clip\",\n  \"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
           "values": [
             {
               "name": "clip"
@@ -652,7 +1621,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -679,7 +1648,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "auto"
@@ -700,7 +1669,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "break-spaces"
@@ -762,7 +1731,7 @@
         },
         {
           "name": "color",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\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",
+          "description": "The color property is used to set the color of the title.\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"
@@ -826,7 +1795,7 @@
         {
           "name": "font-weight",
           "default": "$regular",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\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",
+          "description": "The color property is used to set the color of the title.\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": "$bold"
@@ -845,7 +1814,7 @@
         },
         {
           "name": "font-size",
-          "description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$hero\",\n\"md\": \"$l\",\n\"lg\": \"$m\",\n\"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
+          "description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$hero\",\n  \"md\": \"$l\",\n  \"lg\": \"$m\",\n  \"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
           "values": [
             {
               "name": "$hero"
@@ -869,7 +1838,7 @@
         },
         {
           "name": "line-height",
-          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$hero\",\n\"md\": \"$l\",\n\"lg\": \"$m\",\n\"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
+          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$hero\",\n  \"md\": \"$l\",\n  \"lg\": \"$m\",\n  \"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
           "values": [
             {
               "name": "$hero"
@@ -893,7 +1862,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "center"
@@ -920,7 +1889,7 @@
         },
         {
           "name": "text-transform",
-          "description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"capitalize\",\n\"md\": \"full-size-kana\",\n\"lg\": \"full-width\",\n\"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
+          "description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"capitalize\",\n  \"md\": \"full-size-kana\",\n  \"lg\": \"full-width\",\n  \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
           "values": [
             {
               "name": "capitalize"
@@ -944,7 +1913,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1204,7 +2173,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1231,7 +2200,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1252,7 +2221,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1276,7 +2245,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1300,7 +2269,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1327,7 +2296,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1491,6 +2460,175 @@
         }
       ]
     },
+    {
+      "name": "rarui-chip",
+      "description": "## Rarui Chip\n---\nChip component helps people enter information, make selections, filter content or trigger actions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
+      "attributes": [
+        {
+          "name": "closeable",
+          "default": false,
+          "description": "Displays a delete icon and adds user interaction.",
+          "type": "boolean"
+        },
+        {
+          "name": "padding",
+          "description": "The padding properties are used to generate space around an chip's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$medium\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$medium\",\n  \"md\": \"$small\",\n  \"lg\": \"$medium\",\n  \"xl\": \"$small\"\n}\n```\n\n- $medium\n- $small",
+          "values": [
+            {
+              "name": "$medium"
+            },
+            {
+              "name": "$small"
+            }
+          ]
+        },
+        {
+          "name": "text-transform",
+          "description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"capitalize\",\n  \"md\": \"full-size-kana\",\n  \"lg\": \"full-width\",\n  \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
+          "values": [
+            {
+              "name": "capitalize"
+            },
+            {
+              "name": "full-size-kana"
+            },
+            {
+              "name": "full-width"
+            },
+            {
+              "name": "lowercase"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "uppercase"
+            }
+          ]
+        },
+        {
+          "name": "pill",
+          "default": false,
+          "description": "Specifies whether the chip will be displayed in the pill shape",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "default": false,
+          "description": "Specifies whether the chip is selected",
+          "type": "boolean"
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Specifies the size of the chip\n\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "text-overflow",
+          "default": false,
+          "description": "Specifies whether to handle text overflow within the chip.\nWhen true, overflowing text is typically truncated with an ellipsis.",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Disables the chip, disallowing user interaction.",
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "rarui-icon-button",
+      "description": "## Rarui Icon Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Disables the button, disallowing user interaction.",
+          "type": "boolean"
+        },
+        {
+          "name": "appearance",
+          "default": "brand",
+          "description": "Determines the visual style of the icon button, influencing its color scheme and appearance.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
+          "type": "string",
+          "values": [
+            {
+              "name": "brand",
+              "description": "(default)"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Defines the size of the icon button component.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "- ghost\n- outlined\n- solid\n- tonal",
+          "type": "string",
+          "values": [
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "outlined"
+            },
+            {
+              "name": "solid"
+            },
+            {
+              "name": "tonal"
+            }
+          ]
+        },
+        {
+          "name": "rounded",
+          "default": false,
+          "description": "Defines if the button should have rounded edges.\n\n- `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.\n- `false` (default): The button will have standard edges or defined by the component style.",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "rarui-radio-button",
       "description": "## Rarui Radio Button\n---\nRadio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.",
@@ -1573,7 +2711,7 @@
       "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\nOr an object like:\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",
+          "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"
@@ -1678,7 +2816,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1786,7 +2924,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$brand"
@@ -1834,7 +2972,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -1897,7 +3035,7 @@
         },
         {
           "name": "border-radius",
-          "description": "The borderRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
+          "description": "The borderRadius property rounds the corners of an box's outer border edge.\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\": \"$button\",\n  \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -1936,7 +3074,7 @@
         },
         {
           "name": "border-top-left-radius",
-          "description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
+          "description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\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\": \"$button\",\n  \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -1975,7 +3113,7 @@
         },
         {
           "name": "border-top-right-radius",
-          "description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
+          "description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\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\": \"$button\",\n  \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -2014,7 +3152,7 @@
         },
         {
           "name": "border-bottom-left-radius",
-          "description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
+          "description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\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\": \"$button\",\n  \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -2053,7 +3191,7 @@
         },
         {
           "name": "border-bottom-right-radius",
-          "description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
+          "description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\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\": \"$button\",\n  \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -2092,7 +3230,7 @@
         },
         {
           "name": "border-width",
-          "description": "The borderWidth property sets the width of an box's border.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\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",
+          "description": "The borderWidth property sets the width of an box's border.\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"
@@ -2116,7 +3254,7 @@
         },
         {
           "name": "border-top-width",
-          "description": "The borderTopWidth property defines the width of the border at the top of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\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",
+          "description": "The borderTopWidth property defines the width of the border at the top of a box.\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"
@@ -2140,7 +3278,7 @@
         },
         {
           "name": "border-bottom-width",
-          "description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\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",
+          "description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\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"
@@ -2164,7 +3302,7 @@
         },
         {
           "name": "border-left-width",
-          "description": "The borderLeftWidth property defines the width of the border at the left of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\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",
+          "description": "The borderLeftWidth property defines the width of the border at the left of a box.\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"
@@ -2188,7 +3326,7 @@
         },
         {
           "name": "border-right-width",
-          "description": "The borderRightWidth property defines the width of the border at the right of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\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",
+          "description": "The borderRightWidth property defines the width of the border at the right of a box.\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"
@@ -2212,7 +3350,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -2251,7 +3389,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -2305,7 +3443,7 @@
         },
         {
           "name": "padding-top",
-          "description": "The paddingTop 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\nOr an object like:\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",
+          "description": "The paddingTop 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"
@@ -2359,7 +3497,7 @@
         },
         {
           "name": "padding-bottom",
-          "description": "The paddingBottom property sets the height of the padding area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\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",
+          "description": "The paddingBottom property sets the height of the padding 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- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
           "values": [
             {
               "name": "$2xl"
@@ -2413,7 +3551,7 @@
         },
         {
           "name": "padding-left",
-          "description": "The paddingLeft 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\nOr an object like:\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",
+          "description": "The paddingLeft 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"
@@ -2467,7 +3605,7 @@
         },
         {
           "name": "padding-right",
-          "description": "The paddingLeft 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\nOr an object like:\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",
+          "description": "The paddingLeft 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": "$2xl"
@@ -2521,7 +3659,7 @@
         },
         {
           "name": "margin",
-          "description": "The margin 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\nOr an object like:\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",
+          "description": "The margin 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": "$2xl"
@@ -2578,7 +3716,7 @@
         },
         {
           "name": "margin-top",
-          "description": "The marginTop 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\nOr an object like:\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",
+          "description": "The marginTop 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": "$2xl"
@@ -2635,7 +3773,7 @@
         },
         {
           "name": "margin-bottom",
-          "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -2692,7 +3830,7 @@
         },
         {
           "name": "margin-left",
-          "description": "The marginLeft 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\nOr an object like:\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",
+          "description": "The marginLeft 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": "$2xl"
@@ -2749,7 +3887,7 @@
         },
         {
           "name": "margin-right",
-          "description": "The marginRight 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\nOr an object like:\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",
+          "description": "The marginRight 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"
@@ -2806,7 +3944,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -2860,7 +3998,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -2914,7 +4052,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -2948,7 +4086,7 @@
         {
           "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\nOr an object like:\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",
+          "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": "$body-l"
@@ -3008,7 +4146,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$bold"
@@ -3026,7 +4164,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$body-l"
@@ -3086,7 +4224,7 @@
         },
         {
           "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\nOr an object like:\n```\n{\n\"xs\": \"$body\",\n\"md\": \"$button\",\n\"lg\": \"$heading\",\n\"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
+          "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": "$body"
@@ -3101,7 +4239,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3128,7 +4266,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3149,7 +4287,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3173,7 +4311,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3197,7 +4335,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3224,7 +4362,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3268,7 +4406,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3300,7 +4438,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3321,7 +4459,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3367,7 +4505,7 @@
         },
         {
           "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\nOr an object like:\n```\n{\n\"xs\": \"all\",\n\"md\": \"none\",\n\"lg\": \"all\",\n\"xl\": \"none\"\n}\n```\n\n- all\n- none",
+          "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"
@@ -3384,7 +4522,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3405,7 +4543,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3426,7 +4564,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3447,7 +4585,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3501,7 +4639,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3525,7 +4663,7 @@
         },
         {
           "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\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"contain\",\n\"lg\": \"cover\",\n\"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
+          "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"
@@ -3540,7 +4678,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3633,7 +4771,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "column"
@@ -3651,7 +4789,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "nowrap"
@@ -3666,7 +4804,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3690,7 +4828,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3717,7 +4855,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "center"
@@ -3759,7 +4897,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3804,7 +4942,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3843,7 +4981,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3879,7 +5017,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "auto"
@@ -3918,7 +5056,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "all"
@@ -3957,7 +5095,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -3978,7 +5116,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "dashed"
@@ -4014,7 +5152,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4026,7 +5164,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "alias"
@@ -4140,7 +5278,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "auto"
@@ -4161,7 +5299,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "auto"
@@ -4182,7 +5320,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "auto"
@@ -4203,7 +5341,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4230,7 +5368,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4278,7 +5416,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "center"
@@ -4310,7 +5448,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$1"
@@ -4334,7 +5472,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4358,7 +5496,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4412,7 +5550,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4466,7 +5604,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4520,7 +5658,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4574,7 +5712,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4628,7 +5766,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4682,7 +5820,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4736,7 +5874,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4790,7 +5928,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4844,7 +5982,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -4901,7 +6039,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -4958,7 +6096,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5015,7 +6153,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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"
@@ -5072,7 +6210,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5129,7 +6267,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5186,7 +6324,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5243,7 +6381,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5300,7 +6438,7 @@
         },
         {
           "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\nOr an object like:\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",
+          "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": "$2xl"
@@ -5423,7 +6561,7 @@
         {
           "name": "background-color",
           "default": "$primary",
-          "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$background\",\n\"md\": \"$primary\",\n\"lg\": \"$secondary\",\n\"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
+          "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\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\": \"$primary\",\n  \"lg\": \"$secondary\",\n  \"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
           "values": [
             {
               "name": "$background"