fix(card): reset only recent element styles

docs: update icons styles

components/card/__tests__/__snapshots__/footer.test.tsx.snap

@@ -6,6 +6,14 @@ exports[`Card Footer should render correctly 1`] = `
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
+        }
       </style></div><footer class=\\"auto-margin \\">footer<style>
         footer {
           padding: 8pt 16pt;
@@ -45,14 +53,6 @@ exports[`Card Footer should render correctly 1`] = `
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }

components/card/card-content.tsx

@@ -26,6 +26,14 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({
           width: 100%;
           padding: ${theme.layout.gap} ${theme.layout.gap};
         }
+        
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
+        }
       `}</style>
     </div>
   )

components/card/card.tsx

@@ -69,14 +69,6 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
           box-shadow: ${hoverShadow};
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }

lib/components/displays/icons.tsx

@@ -8,6 +8,9 @@ const Icons: React.FC = () => {
   const icons = Object.entries(Icon).filter(
     ([name]) => !query || name.toLowerCase().includes(query.toLowerCase())
   )
+  const clickHandler = (name: string) => {
+    console.log(name)
+  }
 
   return (
     <>
@@ -16,11 +19,9 @@ const Icons: React.FC = () => {
         <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
         <div className="icons-grid">
           {icons.map(([name, Component]) => (
-            <div className="icon-item" key={name}>
+            <div className="icon-item" key={name} onClick={() => clickHandler(name)}>
               <Component />
-              <Text type="secondary" small>
-                {name}
-              </Text>
+              <Text type="secondary" small>{name}</Text>
             </div>
           ))}
         </div>
@@ -40,6 +41,7 @@ const Icons: React.FC = () => {
           display: flex;
           flex-wrap: wrap;
           margin-top: 8pt;
+          justify-content: space-around;
         }
 
         .icon-item {
@@ -48,13 +50,32 @@ const Icons: React.FC = () => {
           align-items: center;
           justify-content: space-evenly;
           flex-grow: 0;
-          flex-basis: 25%;
+          flex-basis: 125px;
           min-width: 0px;
-          height: 100px;
+          height: 95px;
+          margin: 12px 5px;
+          border-radius: ${theme.layout.radius};
+          box-sizing: border-box;
+          cursor: pointer;
+          user-select: none;
+          transition: all 150ms ease-in-out;
         }
+        
+        .icon-item > :global(small) {
+          display: inline-block;
+          width: 90%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .icon-item:hover {
+          box-shadow: ${theme.expressiveness.shadowMedium};
+        }
+        
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .icon-item {
-            flex-basis: 33%;
+            flex-basis: 30%;
           }
         }
       `}</style>

lib/components/icons/logo.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { useTheme } from 'components/index'
 
-
-
-export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...props }) => {
+export const LogoIcon: React.FC<React.SVGAttributes<any>> = ({ ...props }) => {
   const theme = useTheme()
   return (
     <svg width="25" viewBox="0 0 114 100" fill="none" {...props}>
@@ -25,6 +23,6 @@ export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...pro
       `}</style>
     </svg>
   )
-})
+}
 
-export default LogoIcon
+export default React.memo(LogoIcon)

lib/data/metadata-en-us.json

@@ -0,0 +1 @@
+[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]

pages/en-us/components/icons.mdx

@@ -52,10 +52,17 @@ Display semantic vector graphics in SVG format.
 />
 
 <Playground
-  title="Size"
-  scope={{ Github }}
+  title="Sizes"
+  scope={{ Github, Spacer }}
   code={`
-<Github size={36} />
+<>
+  <Github size={16} /> <Spacer inline x={.35} />
+  <Github size={20} /> <Spacer inline x={.35} />
+  <Github size={24} /> <Spacer inline x={.35} />
+  <Github size={28} /> <Spacer inline x={.35} />
+  <Github size={32} /> <Spacer inline x={.35} />
+  <Github size={36} />
+</>
 `}
 />