@rarui/components 1.3.0 → 1.4.0

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-rc.3",
+  "version": "1.1.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -29,6 +29,7 @@
     },
     {
       "name": "rarui-badge",
+      "description": "## Rarui Badge\n---\nThe Badge components are only used to transmit dynamic information, such as a connection or status.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.",
       "attributes": [
         {
           "name": "appearance",
@@ -93,10 +94,133 @@
         }
       ]
     },
+    {
+      "name": "rarui-divider",
+      "description": "## Rarui Divider\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "The direction of the Divider.\n\n- horizontal\n- vertical",
+          "type": "string",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The **`size`** CSS property sets an element's area.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "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",
+          "values": [
+            {
+              "name": "$dashed"
+            },
+            {
+              "name": "$solid"
+            }
+          ]
+        },
+        {
+          "name": "thickness",
+          "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",
+          "values": [
+            {
+              "name": "$1"
+            },
+            {
+              "name": "$2"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "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",
+          "values": [
+            {
+              "name": "$brand"
+            },
+            {
+              "name": "$brand-alt"
+            },
+            {
+              "name": "$disabled"
+            },
+            {
+              "name": "$divider"
+            },
+            {
+              "name": "$error"
+            },
+            {
+              "name": "$info"
+            },
+            {
+              "name": "$invert"
+            },
+            {
+              "name": "$invert-disabled"
+            },
+            {
+              "name": "$primary"
+            },
+            {
+              "name": "$secondary"
+            },
+            {
+              "name": "$subdued"
+            },
+            {
+              "name": "$success"
+            },
+            {
+              "name": "$transparent"
+            },
+            {
+              "name": "$warning"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-text",
       "description": "## Rarui Text\n---\nText is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
       "attributes": [
+        {
+          "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",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "min-intrinsic"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
         {
           "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",
@@ -160,6 +284,30 @@
             }
           ]
         },
+        {
+          "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",
+          "values": [
+            {
+              "name": "$l"
+            },
+            {
+              "name": "$m"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
+            },
+            {
+              "name": "$xxs"
+            }
+          ]
+        },
         {
           "name": "font-weight",
           "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",
@@ -204,53 +352,89 @@
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "$l"
+              "name": "center"
             },
             {
-              "name": "$m"
+              "name": "end"
             },
             {
-              "name": "$s"
+              "name": "justify"
             },
             {
-              "name": "$xl"
+              "name": "left"
             },
             {
-              "name": "$xs"
+              "name": "match-parent"
             },
             {
-              "name": "$xxs"
+              "name": "right"
+            },
+            {
+              "name": "start"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "center"
+              "name": "clip"
             },
             {
-              "name": "end"
+              "name": "ellipsis"
+            }
+          ]
+        },
+        {
+          "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",
+          "values": [
+            {
+              "name": "capitalize"
             },
             {
-              "name": "justify"
+              "name": "full-size-kana"
             },
             {
-              "name": "left"
+              "name": "full-width"
             },
             {
-              "name": "match-parent"
+              "name": "lowercase"
             },
             {
-              "name": "right"
+              "name": "none"
             },
             {
-              "name": "start"
+              "name": "uppercase"
+            }
+          ]
+        },
+        {
+          "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",
+          "values": [
+            {
+              "name": "break-spaces"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "nowrap"
+            },
+            {
+              "name": "pre"
+            },
+            {
+              "name": "pre-line"
+            },
+            {
+              "name": "pre-wrap"
             }
           ]
         },
@@ -273,26 +457,28 @@
           ]
         },
         {
-          "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",
+          "name": "line-clamp",
+          "description": "The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.",
+          "type": "number"
+        },
+        {
+          "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",
           "values": [
             {
-              "name": "capitalize"
-            },
-            {
-              "name": "full-size-kana"
+              "name": "auto"
             },
             {
-              "name": "full-width"
+              "name": "clip"
             },
             {
-              "name": "lowercase"
+              "name": "hidden"
             },
             {
-              "name": "none"
+              "name": "scroll"
             },
             {
-              "name": "uppercase"
+              "name": "visible"
             }
           ]
         },
@@ -343,119 +529,30 @@
               "name": "wavy"
             }
           ]
-        },
+        }
+      ]
+    },
+    {
+      "name": "rarui-title",
+      "description": "## Rarui Title\n---\nTilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
+      "attributes": [
         {
-          "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",
+          "name": "as",
+          "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6",
+          "type": "string",
           "values": [
             {
-              "name": "clip"
+              "name": "h1",
+              "description": "(default)"
             },
             {
-              "name": "ellipsis"
-            }
-          ]
-        },
-        {
-          "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",
-          "values": [
-            {
-              "name": "auto"
+              "name": "h2"
             },
             {
-              "name": "fit-content"
+              "name": "h3"
             },
             {
-              "name": "intrinsic"
-            },
-            {
-              "name": "max-content"
-            },
-            {
-              "name": "min-content"
-            },
-            {
-              "name": "min-intrinsic"
-            },
-            {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "overflow",
-          "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\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",
-          "values": [
-            {
-              "name": "auto"
-            },
-            {
-              "name": "clip"
-            },
-            {
-              "name": "hidden"
-            },
-            {
-              "name": "scroll"
-            },
-            {
-              "name": "visible"
-            }
-          ]
-        },
-        {
-          "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",
-          "values": [
-            {
-              "name": "break-spaces"
-            },
-            {
-              "name": "normal"
-            },
-            {
-              "name": "nowrap"
-            },
-            {
-              "name": "pre"
-            },
-            {
-              "name": "pre-line"
-            },
-            {
-              "name": "pre-wrap"
-            }
-          ]
-        },
-        {
-          "name": "line-clamp",
-          "description": "The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.",
-          "type": "number"
-        }
-      ]
-    },
-    {
-      "name": "rarui-title",
-      "description": "## Rarui Title\n---\nTilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
-      "attributes": [
-        {
-          "name": "as",
-          "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6",
-          "type": "string",
-          "values": [
-            {
-              "name": "h1",
-              "description": "(default)"
-            },
-            {
-              "name": "h2"
-            },
-            {
-              "name": "h3"
-            },
-            {
-              "name": "h4"
+              "name": "h4"
             },
             {
               "name": "h5"
@@ -697,476 +794,492 @@
       ]
     },
     {
-      "name": "rarui-button",
+      "name": "rarui-skeleton",
+      "description": "## Rarui Divider\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
       "attributes": [
         {
-          "name": "disabled",
-          "description": "Disables the button, disallowing user interaction.",
-          "type": "boolean"
+          "name": "data-testid",
+          "description": "This is an attribute used to identify a DOM node for testing purposes.",
+          "type": "string"
         },
         {
-          "name": "full",
-          "description": "Specifies whether the button should take up the full width of its container.\nThis variant is useful when you want to make a button span the entire width of its parent container.",
-          "type": "boolean"
+          "name": "border-radius",
+          "description": "The borderRadius property sets the skeleton.",
+          "values": []
         },
         {
-          "name": "appearance",
-          "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
-          "type": "string",
+          "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",
           "values": [
             {
-              "name": "brand"
-            },
-            {
-              "name": "danger"
+              "name": "auto"
             },
             {
-              "name": "inverted"
+              "name": "fit-content"
             },
             {
-              "name": "neutral"
+              "name": "intrinsic"
             },
             {
-              "name": "success"
+              "name": "max-content"
             },
             {
-              "name": "warning"
-            }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "Defines the size of the button component.\n\n- large\n- medium\n- small",
-          "type": "string",
-          "values": [
-            {
-              "name": "large",
-              "description": "(default)"
+              "name": "min-content"
             },
             {
-              "name": "medium"
+              "name": "min-intrinsic"
             },
             {
-              "name": "small"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "variant",
-          "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal",
-          "type": "string",
+          "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",
           "values": [
             {
-              "name": "outlined"
+              "name": "auto"
             },
             {
-              "name": "solid"
+              "name": "fit-content"
             },
             {
-              "name": "text"
+              "name": "max-content"
             },
             {
-              "name": "tonal"
+              "name": "min-content"
+            },
+            {
+              "name": "stretch"
             }
           ]
-        }
-      ]
-    },
-    {
-      "name": "rarui-box",
-      "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",
-      "attributes": [
+        },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "$brand"
-            },
-            {
-              "name": "$brand-alt"
-            },
-            {
-              "name": "$currentColor"
-            },
-            {
-              "name": "$disabled"
-            },
-            {
-              "name": "$error"
-            },
-            {
-              "name": "$info"
-            },
-            {
-              "name": "$invert"
-            },
-            {
-              "name": "$invert-disabled"
+              "name": "fit-content"
             },
             {
-              "name": "$invert-secondary"
+              "name": "intrinsic"
             },
             {
-              "name": "$on-brand"
+              "name": "max-content"
             },
             {
-              "name": "$on-error"
+              "name": "min-content"
             },
             {
-              "name": "$on-info"
+              "name": "none"
             },
             {
-              "name": "$on-success"
-            },
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\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",
+          "values": [
             {
-              "name": "$on-warning"
+              "name": "fit-content"
             },
             {
-              "name": "$primary"
+              "name": "intrinsic"
             },
             {
-              "name": "$secondary"
+              "name": "max-content"
             },
             {
-              "name": "$success"
+              "name": "min-content"
             },
             {
-              "name": "$warning"
+              "name": "none"
             },
             {
-              "name": "$warning-alt"
+              "name": "stretch"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "$bold"
+              "name": "auto"
             },
             {
-              "name": "$medium"
+              "name": "fit-content"
             },
             {
-              "name": "$regular"
+              "name": "intrinsic"
             },
             {
-              "name": "$semiBold"
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "line-height",
-          "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\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",
+          "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",
           "values": [
             {
-              "name": "$body-l"
-            },
-            {
-              "name": "$body-m"
-            },
-            {
-              "name": "$body-s"
+              "name": "auto"
             },
             {
-              "name": "$body-xl"
+              "name": "fit-content"
             },
             {
-              "name": "$body-xs"
+              "name": "intrinsic"
             },
             {
-              "name": "$body-xxs"
+              "name": "max-content"
             },
             {
-              "name": "$button-l"
+              "name": "min-content"
             },
             {
-              "name": "$button-m"
+              "name": "min-intrinsic"
             },
             {
-              "name": "$button-s"
-            },
+              "name": "stretch"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-button",
+      "description": "## Rarui 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",
+          "description": "Disables the button, disallowing user interaction.",
+          "type": "boolean"
+        },
+        {
+          "name": "full",
+          "description": "Specifies whether the button should take up the full width of its container.\nThis variant is useful when you want to make a button span the entire width of its parent container.",
+          "type": "boolean"
+        },
+        {
+          "name": "appearance",
+          "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
+          "type": "string",
+          "values": [
             {
-              "name": "$heading-hero"
+              "name": "brand"
             },
             {
-              "name": "$heading-l"
+              "name": "danger"
             },
             {
-              "name": "$heading-m"
+              "name": "inverted"
             },
             {
-              "name": "$heading-s"
+              "name": "neutral"
             },
             {
-              "name": "$heading-xl"
+              "name": "success"
             },
             {
-              "name": "$heading-xs"
-            },
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the button component.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
             {
-              "name": "$label-l"
+              "name": "large",
+              "description": "(default)"
             },
             {
-              "name": "$label-m"
+              "name": "medium"
             },
             {
-              "name": "$label-s"
+              "name": "small"
             }
           ]
         },
         {
-          "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",
+          "name": "variant",
+          "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal",
+          "type": "string",
           "values": [
             {
-              "name": "$2xl"
+              "name": "outlined"
             },
             {
-              "name": "$2xs"
+              "name": "solid"
             },
             {
-              "name": "$3xl"
+              "name": "text"
             },
             {
-              "name": "$3xs"
+              "name": "tonal"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-box",
+      "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",
+      "attributes": [
+        {
+          "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",
+          "values": [
+            {
+              "name": "$brand"
             },
             {
-              "name": "$4xl"
+              "name": "$brand-alt"
             },
             {
-              "name": "$4xs"
+              "name": "$disabled"
             },
             {
-              "name": "$5xl"
+              "name": "$divider"
             },
             {
-              "name": "$6xl"
+              "name": "$error"
             },
             {
-              "name": "$7xl"
+              "name": "$info"
             },
             {
-              "name": "$8xl"
+              "name": "$invert"
             },
             {
-              "name": "$auto"
+              "name": "$invert-disabled"
             },
             {
-              "name": "$lg"
+              "name": "$primary"
             },
             {
-              "name": "$md"
+              "name": "$secondary"
             },
             {
-              "name": "$none"
+              "name": "$subdued"
             },
             {
-              "name": "$s"
+              "name": "$success"
             },
             {
-              "name": "$xl"
+              "name": "$transparent"
             },
             {
-              "name": "$xs"
+              "name": "$warning"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "$body-l"
-            },
-            {
-              "name": "$body-m"
-            },
-            {
-              "name": "$body-s"
+              "name": "dashed"
             },
             {
-              "name": "$body-xl"
+              "name": "dotted"
             },
             {
-              "name": "$body-xs"
+              "name": "double"
             },
             {
-              "name": "$body-xxs"
+              "name": "groove"
             },
             {
-              "name": "$button-l"
+              "name": "hidden"
             },
             {
-              "name": "$button-m"
+              "name": "inset"
             },
             {
-              "name": "$button-s"
+              "name": "none"
             },
             {
-              "name": "$heading-hero"
+              "name": "outset"
             },
             {
-              "name": "$heading-l"
+              "name": "ridge"
             },
             {
-              "name": "$heading-m"
-            },
+              "name": "solid"
+            }
+          ]
+        },
+        {
+          "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",
+          "values": [
             {
-              "name": "$heading-s"
+              "name": "$1"
             },
             {
-              "name": "$heading-xl"
+              "name": "$2"
             },
             {
-              "name": "$heading-xs"
+              "name": "$3"
             },
             {
-              "name": "$label-l"
+              "name": "$4"
             },
             {
-              "name": "$label-m"
+              "name": "$5"
             },
             {
-              "name": "$label-s"
+              "name": "$none"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "center"
-            },
-            {
-              "name": "end"
+              "name": "$1"
             },
             {
-              "name": "justify"
+              "name": "$2"
             },
             {
-              "name": "left"
+              "name": "$3"
             },
             {
-              "name": "match-parent"
+              "name": "$4"
             },
             {
-              "name": "right"
+              "name": "$5"
             },
             {
-              "name": "start"
+              "name": "$none"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "blink"
-            },
-            {
-              "name": "dashed"
-            },
-            {
-              "name": "dotted"
+              "name": "fit-content"
             },
             {
-              "name": "double"
+              "name": "intrinsic"
             },
             {
-              "name": "from-font"
+              "name": "max-content"
             },
             {
-              "name": "grammar-error"
+              "name": "min-content"
             },
             {
-              "name": "line-through"
+              "name": "min-intrinsic"
             },
             {
-              "name": "none"
-            },
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "height",
+          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\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",
+          "values": [
             {
-              "name": "overline"
+              "name": "auto"
             },
             {
-              "name": "solid"
+              "name": "fit-content"
             },
             {
-              "name": "spelling-error"
+              "name": "max-content"
             },
             {
-              "name": "underline"
+              "name": "min-content"
             },
             {
-              "name": "wavy"
+              "name": "stretch"
             }
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
-              "name": "auto"
+              "name": "$brand"
+            },
+            {
+              "name": "$brand-alt"
+            },
+            {
+              "name": "$currentColor"
+            },
+            {
+              "name": "$disabled"
+            },
+            {
+              "name": "$error"
+            },
+            {
+              "name": "$info"
+            },
+            {
+              "name": "$invert"
             },
             {
-              "name": "fit-content"
+              "name": "$invert-disabled"
             },
             {
-              "name": "intrinsic"
+              "name": "$invert-secondary"
             },
             {
-              "name": "max-content"
+              "name": "$on-brand"
             },
             {
-              "name": "min-content"
+              "name": "$on-error"
             },
             {
-              "name": "min-intrinsic"
+              "name": "$on-info"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "overflow",
-          "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\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",
-          "values": [
+              "name": "$on-success"
+            },
             {
-              "name": "auto"
+              "name": "$on-warning"
             },
             {
-              "name": "clip"
+              "name": "$primary"
             },
             {
-              "name": "hidden"
+              "name": "$secondary"
             },
             {
-              "name": "scroll"
+              "name": "$success"
             },
             {
-              "name": "visible"
+              "name": "$warning"
+            },
+            {
+              "name": "$warning-alt"
             }
           ]
         },
-        {
-          "name": "left",
-          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "right",
-          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
         {
           "name": "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",
@@ -1628,30 +1741,6 @@
             }
           ]
         },
-        {
-          "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",
-          "values": [
-            {
-              "name": "$1"
-            },
-            {
-              "name": "$2"
-            },
-            {
-              "name": "$3"
-            },
-            {
-              "name": "$4"
-            },
-            {
-              "name": "$5"
-            },
-            {
-              "name": "$none"
-            }
-          ]
-        },
         {
           "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",
@@ -1754,30 +1843,6 @@
             }
           ]
         },
-        {
-          "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",
-          "values": [
-            {
-              "name": "$1"
-            },
-            {
-              "name": "$2"
-            },
-            {
-              "name": "$3"
-            },
-            {
-              "name": "$4"
-            },
-            {
-              "name": "$5"
-            },
-            {
-              "name": "$none"
-            }
-          ]
-        },
         {
           "name": "bottom",
           "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
@@ -2124,34 +2189,91 @@
           ]
         },
         {
-          "name": "grid-template-areas",
-          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
-          "values": []
-        },
-        {
-          "name": "grid-template-columns",
-          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\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",
+          "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",
           "values": [
             {
-              "name": "auto"
+              "name": "$body-l"
             },
             {
-              "name": "max-content"
+              "name": "$body-m"
             },
             {
-              "name": "min-content"
+              "name": "$body-s"
             },
             {
-              "name": "none"
+              "name": "$body-xl"
             },
             {
-              "name": "subgrid"
+              "name": "$body-xs"
+            },
+            {
+              "name": "$body-xxs"
+            },
+            {
+              "name": "$button-l"
+            },
+            {
+              "name": "$button-m"
+            },
+            {
+              "name": "$button-s"
+            },
+            {
+              "name": "$heading-hero"
+            },
+            {
+              "name": "$heading-l"
+            },
+            {
+              "name": "$heading-m"
+            },
+            {
+              "name": "$heading-s"
+            },
+            {
+              "name": "$heading-xl"
+            },
+            {
+              "name": "$heading-xs"
+            },
+            {
+              "name": "$label-l"
+            },
+            {
+              "name": "$label-m"
+            },
+            {
+              "name": "$label-s"
             }
           ]
         },
         {
-          "name": "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",
+          "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",
+          "values": [
+            {
+              "name": "$bold"
+            },
+            {
+              "name": "$medium"
+            },
+            {
+              "name": "$regular"
+            },
+            {
+              "name": "$semiBold"
+            }
+          ]
+        },
+        {
+          "name": "grid-template-areas",
+          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
+          "values": []
+        },
+        {
+          "name": "grid-template-columns",
+          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\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",
           "values": [
             {
               "name": "auto"
@@ -2171,15 +2293,12 @@
           ]
         },
         {
-          "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",
+          "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",
           "values": [
             {
               "name": "auto"
             },
-            {
-              "name": "fit-content"
-            },
             {
               "name": "max-content"
             },
@@ -2187,7 +2306,10 @@
               "name": "min-content"
             },
             {
-              "name": "stretch"
+              "name": "none"
+            },
+            {
+              "name": "subgrid"
             }
           ]
         },
@@ -2256,25 +2378,90 @@
               "name": "left"
             },
             {
-              "name": "legacy"
+              "name": "legacy"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "self-end"
+            },
+            {
+              "name": "self-start"
+            },
+            {
+              "name": "start"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "left",
+          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "line-height",
+          "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\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",
+          "values": [
+            {
+              "name": "$body-l"
+            },
+            {
+              "name": "$body-m"
+            },
+            {
+              "name": "$body-s"
+            },
+            {
+              "name": "$body-xl"
+            },
+            {
+              "name": "$body-xs"
+            },
+            {
+              "name": "$body-xxs"
+            },
+            {
+              "name": "$button-l"
+            },
+            {
+              "name": "$button-m"
+            },
+            {
+              "name": "$button-s"
+            },
+            {
+              "name": "$heading-hero"
+            },
+            {
+              "name": "$heading-l"
+            },
+            {
+              "name": "$heading-m"
             },
             {
-              "name": "normal"
+              "name": "$heading-s"
             },
             {
-              "name": "right"
+              "name": "$heading-xl"
             },
             {
-              "name": "self-end"
+              "name": "$heading-xs"
             },
             {
-              "name": "self-start"
+              "name": "$label-l"
             },
             {
-              "name": "start"
+              "name": "$label-m"
             },
             {
-              "name": "stretch"
+              "name": "$label-s"
             }
           ]
         },
@@ -2933,6 +3120,38 @@
             }
           ]
         },
+        {
+          "name": "right",
+          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "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",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "justify"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "match-parent"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
         {
           "name": "top",
           "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
@@ -3036,54 +3255,6 @@
             }
           ]
         },
-        {
-          "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",
-          "values": [
-            {
-              "name": "$brand"
-            },
-            {
-              "name": "$brand-alt"
-            },
-            {
-              "name": "$disabled"
-            },
-            {
-              "name": "$divider"
-            },
-            {
-              "name": "$error"
-            },
-            {
-              "name": "$info"
-            },
-            {
-              "name": "$invert"
-            },
-            {
-              "name": "$invert-disabled"
-            },
-            {
-              "name": "$primary"
-            },
-            {
-              "name": "$secondary"
-            },
-            {
-              "name": "$subdued"
-            },
-            {
-              "name": "$success"
-            },
-            {
-              "name": "$transparent"
-            },
-            {
-              "name": "$warning"
-            }
-          ]
-        },
         {
           "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",
@@ -3123,42 +3294,6 @@
             }
           ]
         },
-        {
-          "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",
-          "values": [
-            {
-              "name": "dashed"
-            },
-            {
-              "name": "dotted"
-            },
-            {
-              "name": "double"
-            },
-            {
-              "name": "groove"
-            },
-            {
-              "name": "hidden"
-            },
-            {
-              "name": "inset"
-            },
-            {
-              "name": "none"
-            },
-            {
-              "name": "outset"
-            },
-            {
-              "name": "ridge"
-            },
-            {
-              "name": "solid"
-            }
-          ]
-        },
         {
           "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",
@@ -3353,6 +3488,27 @@
             }
           ]
         },
+        {
+          "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",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "clip"
+            },
+            {
+              "name": "hidden"
+            },
+            {
+              "name": "scroll"
+            },
+            {
+              "name": "visible"
+            }
+          ]
+        },
         {
           "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",
@@ -3407,6 +3563,54 @@
             }
           ]
         },
+        {
+          "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",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "blink"
+            },
+            {
+              "name": "dashed"
+            },
+            {
+              "name": "dotted"
+            },
+            {
+              "name": "double"
+            },
+            {
+              "name": "from-font"
+            },
+            {
+              "name": "grammar-error"
+            },
+            {
+              "name": "line-through"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "overline"
+            },
+            {
+              "name": "solid"
+            },
+            {
+              "name": "spelling-error"
+            },
+            {
+              "name": "underline"
+            },
+            {
+              "name": "wavy"
+            }
+          ]
+        },
         {
           "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",
@@ -3515,6 +3719,63 @@
             }
           ]
         },
+        {
+          "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",
+          "values": [
+            {
+              "name": "$2xl"
+            },
+            {
+              "name": "$2xs"
+            },
+            {
+              "name": "$3xl"
+            },
+            {
+              "name": "$3xs"
+            },
+            {
+              "name": "$4xl"
+            },
+            {
+              "name": "$4xs"
+            },
+            {
+              "name": "$5xl"
+            },
+            {
+              "name": "$6xl"
+            },
+            {
+              "name": "$7xl"
+            },
+            {
+              "name": "$8xl"
+            },
+            {
+              "name": "$auto"
+            },
+            {
+              "name": "$lg"
+            },
+            {
+              "name": "$md"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$s"
+            },
+            {
+              "name": "$xl"
+            },
+            {
+              "name": "$xs"
+            }
+          ]
+        },
         {
           "name": "grid-gap",
           "description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\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",
@@ -4563,6 +4824,7 @@
     },
     {
       "name": "rarui-tabs",
+      "description": "## Rarui Tabs\n---\nThe Tabs are used to switch between different display modes or pages.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/tabs) for more details.",
       "attributes": [
         {
           "name": "pre-selected-tab",