docs(icon): 📝 update all icons layout responsive

Author: navin-moorthy

pages/docs/components/primitives/box.mdx

@@ -2,13 +2,12 @@ import {
   ComponentLinks,
   PropsTable,
   InteractiveCodeblock,
-  Codeblock,
 } from "@/components/index";
 
 # Box
 
 Box is the most abstract component on top of which all other AdaptUI components
-are built. It uses reakit's [Role](https://reakit.io/docs/role/) component
+are built. It uses Arikits's [Role](https://reakit.io/docs/role/) component
 internally.
 
 <ComponentLinks github="box" story="primitives-box" />
@@ -27,13 +26,13 @@ import { Box } from "@adaptui/react-tailwind";
 
 ## `As` prop
 
-By using the `as` prop you can control which element should be rendered, if you
-are using typescript Box is fully typesafe too.
+By using the `as` prop, you can control which element should be rendered. If you
+are using typescript, Box is fully typesafe too.
 
-You can either pass string elements or pass ReactNodes to the as prop.
+You can either pass string elements or pass `ReactNode` to the `as` prop.
 
-Follows all the Reakit composition rules
-[Reakit Composition Docs](https://reakit.io/docs/composition/)
+Follows all the Ariakits composition rules
+[Arikits Composition Docs](https://reakit.io/docs/composition/)
 
 <Codeblock live noInline>
 
@@ -105,16 +104,16 @@ import { Box } from "@adaptui/react-tailwind";
 export const App = (props) => {
   return (
     <Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
-      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
-        <Box as="dt" className="text-sm font-medium text-gray-500 truncate">
+      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
+        <Box as="dt" className="text-sm font-medium text-gray-600 truncate">
           Total Subscribers
         </Box>
         <Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
           71,897
         </Box>
       </Box>
-      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
-        <Box as="dt" className="text-sm font-medium text-gray-500 truncate">
+      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
+        <Box as="dt" className="text-sm font-medium text-gray-600 truncate">
           Avg. Open Rate
         </Box>
         <Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">

pages/docs/components/primitives/button.mdx

@@ -8,15 +8,15 @@ import {
 # Button
 
 The Button component can be used to trigger various kinds of user events such as
-such as submitting a form, opening a dialog, canceling an action, or performing
-a delete operation.
+submitting a form, opening a dialog, canceling an action, or performing a delete
+operation.
 
 <ComponentLinks github="button" theme="button" story="primitives-button" />
 
 ## Imports
 
 ```jsx
-import { Button } from "@adaptui/react-tailwind";
+import { Button, CloseButton } from "@adaptui/react-tailwind";
 ```
 
 - **Button:** The button which has prefix/suffix icons support, variants & size.

pages/docs/components/primitives/icon.mdx

@@ -38,7 +38,7 @@ If no children is provided Icon will render a fallback icon.
 import { Icon } from "@adaptui/react-tailwind";
 
 export const App = (props) => {
-  return <Icon />;
+  return <Icon className="text-gray-800" />;
 };
 ```
 
@@ -70,7 +70,7 @@ export const App = props => {
     ),
   });
 
-  return <CheckIcon />;
+  return <CheckIcon className="text-gray-800" />;
 };
 ```
 
@@ -83,7 +83,7 @@ export const App = props => {
 ```
 export const App = props => {
   return (
-    <div className="inline-grid grid-cols-6 place-items-center gap-4 text-5xl">
+    <div className="grid grid-cols-4 sm:grid-cols-8 gap-4 place-items-center text-2xl sm:text-4xl text-black-900">
       <SlotIcon />
       <CaretDownIcon />
       <CaretLeftIcon />