Fix console errors in the documentation (#552)

apps/docs/app/ui/components/propTable/PropTable.tsx

@@ -109,17 +109,37 @@ export default async function PropTable({ component }: PropTableProps) {
     const { groups } = await getComponentProps(component);
     const formattedGroups = await formatGroup(groups);
 
+    const mergedObject = formattedGroups.reduce((acc, current) => {
+        for (const [key, value] of Object.entries(current)) {
+            if (acc[key]) {
+                acc[key] = acc[key].concat(value);
+            } else {
+                acc[key] = value;
+            }
+        }
+
+        return acc;
+    }, {});
+
+    const mergedArray = Object.entries(mergedObject).map(([key, value]) => ({
+        [key]: value
+    }));
+
     return (
         <>
-            {formattedGroups.map(group => {
+            {mergedArray.map(group => {
                 const [key] = Object.keys(group);
                 const isEmpty = group[key].length === 0;
 
+                if (isEmpty) {
+                    return null;
+                }
+
                 return (
                     <Fragment key={key}>
                         {key === "default" ?
                             <PropTableRender items={group[key]} /> :
-                            !isEmpty && <Collapsible className="hd-props-table__section"
+                            <Collapsible className="hd-props-table__section"
                                 key={key}
                                 title={<Title level={4}>
                                     {capitalize(key)}

apps/docs/app/ui/components/simpleTable/SimpleTable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 
 interface SimpleTableProps {
@@ -7,7 +9,7 @@ interface SimpleTableProps {
     lastColumnAlignment?: "left" | "right";
 }
 
-export default async function SimpleTable({ "aria-label": ariaLabel, headers, data, lastColumnAlignment }: SimpleTableProps) {
+export default function SimpleTable({ "aria-label": ariaLabel, headers, data, lastColumnAlignment }: SimpleTableProps) {
     return (
         <table aria-label={ariaLabel} className="hd-table">
             <thead>

apps/docs/content/components/collections/TagGroup.mdx

@@ -62,7 +62,7 @@ A tag can be disabled using the `isDisabled` prop.
 
 <Example src="tag/docs/tag/disabled" />
 
-### Invalid
+### Invalid Tag
 
 If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message.
 
@@ -113,7 +113,7 @@ Using the `renderEmptyState` prop, you can customize the empty state message whe
 
 <Example src="tag/docs/tagGroup/empty" />
 
-### Invalid
+### Invalid TagGroup
 
 A tag can be set as invalid using the `isInvalid` prop.
 

packages/components/src/tag/docs/tag/count.tsx

@@ -3,15 +3,15 @@ import { Badge, Tag, TagGroup, Text } from "@hopper-ui/components";
 export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
-            <Tag id="designer" size="sm">
+            <Tag id="designer" size="sm" textValue="Designer">
                 <Text>Designer</Text>
                 <Badge>12</Badge>
             </Tag>
-            <Tag id="developer" size="md">
+            <Tag id="developer" size="md" textValue="Developer">
                 <Text>Developer</Text>
                 <Badge variant="subdued">100</Badge>
             </Tag>
-            <Tag id="manager" size="lg">
+            <Tag id="manager" size="lg" textValue="Manager">
                 <Text>Manager</Text>
                 <Badge>99+</Badge>
             </Tag>

packages/components/src/tag/docs/tag/icons.tsx

@@ -4,19 +4,19 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
-            <Tag id="developer" size="sm">
+            <Tag id="developer" size="sm" textValue="Developer">
                 <SparklesIcon />
                 <Text>Developer</Text>
             </Tag>
-            <Tag id="designer" size="md">
+            <Tag id="designer" size="md" textValue="Designer">
                 <Text>Designer</Text>
                 <IconList>
                     <SparklesIcon />
                     <SparklesIcon />
                     <SparklesIcon />
                 </IconList>
             </Tag>
-            <Tag id="manager" size="lg">
+            <Tag id="manager" size="lg" textValue="Manager">
                 <Text>Manager</Text>
                 <IconList>
                     <SparklesIcon />

packages/icons/docs/preview.tsx

@@ -1,10 +1,8 @@
 import { createIcon } from "@hopper-ui/icons";
 
-import CustomIcon16 from "./src/sparkles-16.svg";
-import CustomIcon24 from "./src/sparkles-24.svg";
-import CustomIcon32 from "./src/sparkles-32.svg";
+import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
 
-const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon");
+const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 
 export default function Example() {
     return (

packages/icons/docs/sizes.tsx

@@ -1,11 +1,9 @@
 import { Inline } from "@hopper-ui/components";
 import { createIcon } from "@hopper-ui/icons";
 
-import CustomIcon16 from "./src/sparkles-16.svg";
-import CustomIcon24 from "./src/sparkles-24.svg";
-import CustomIcon32 from "./src/sparkles-32.svg";
+import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
 
-const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon");
+const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 
 export default function Example() {
     return (

packages/icons/docs/src/Sparkles16.tsx

@@ -0,0 +1,6 @@
+import { forwardRef, type SVGProps } from "react";
+
+export const Sparkles16 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+    // eslint-disable-next-line max-len
+    <svg {...props} ref={ref} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fillRule="evenodd" d="M5.518.998c.329 0 .62.215.716.53l.913 2.958 2.425 1.077a.75.75 0 0 1 0 1.37L7.147 8.012l-.913 2.958a.75.75 0 0 1-1.433 0l-.912-2.958-2.426-1.077a.75.75 0 0 1 0-1.371L3.89 4.486l.91-2.959a.75.75 0 0 1 .717-.529m0 3.296-.297.96a.75.75 0 0 1-.412.464l-1.193.53 1.193.53a.75.75 0 0 1 .412.465l.297.96.296-.96a.75.75 0 0 1 .412-.465l1.193-.53-1.193-.53a.75.75 0 0 1-.412-.464zM9.5 3.748a.75.75 0 0 1 .75-.75h1.25v-1.25a.75.75 0 0 1 1.5 0v1.25h1.25a.75.75 0 0 1 0 1.5H13v1.25a.75.75 0 0 1-1.5 0v-1.25h-1.25a.75.75 0 0 1-.75-.75M8 12.25a.75.75 0 0 1 .75-.75H10v-1.25a.75.75 0 0 1 1.5 0v1.25h1.25a.75.75 0 0 1 0 1.5H11.5v1.25a.75.75 0 1 1-1.5 0V13H8.75a.75.75 0 0 1-.75-.75" /></svg>
+));

packages/icons/docs/src/Sparkles24.tsx

@@ -0,0 +1,7 @@
+import { forwardRef, type SVGProps } from "react";
+
+
+export const Sparkles24 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+    // eslint-disable-next-line max-len
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props} ref={ref}><path fillRule="evenodd" d="M17 3a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 17 3m-7.996.002a.75.75 0 0 1 .72.542l1.325 4.602 3.527 1.678a.75.75 0 0 1 0 1.355l-3.527 1.678-1.324 4.602a.75.75 0 0 1-1.442 0L6.96 12.857l-3.527-1.678a.75.75 0 0 1 0-1.355L6.96 8.146l1.324-4.602a.75.75 0 0 1 .72-.542m0 3.461-.697 2.423a.75.75 0 0 1-.399.47L5.5 10.502l2.408 1.146a.75.75 0 0 1 .399.47l.697 2.422.697-2.423a.75.75 0 0 1 .399-.47l2.408-1.145L10.1 9.356a.75.75 0 0 1-.399-.47zM17.75 8.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0zM13 7a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 13 7m5.75-.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5zM15 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 15 13m.75 5.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0zM11 17a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 11 17m5.75-.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5z" /></svg>
+));

packages/icons/docs/src/Sparkles32.tsx

@@ -0,0 +1,7 @@
+import { forwardRef, type SVGProps } from "react";
+
+
+export const Sparkles32 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+    // eslint-disable-next-line max-len
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props} ref={ref}><path fillRule="evenodd" d="M12.5 4a1 1 0 0 1 .956.705l1.891 6.135 5.059 2.246a1 1 0 0 1 0 1.828l-5.059 2.246-1.891 6.135a1 1 0 0 1-1.912 0L9.653 17.16l-5.059-2.246a1 1 0 0 1 0-1.828l5.059-2.246 1.891-6.135A1 1 0 0 1 12.5 4m0 4.394-1.07 3.47a1 1 0 0 1-.55.62L7.464 14l3.416 1.517a1 1 0 0 1 .55.62l1.07 3.47 1.07-3.47a1 1 0 0 1 .55-.62L17.536 14l-3.416-1.517a1 1 0 0 1-.55-.62zM18 9a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7-1a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm-2-4a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1m1 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0zm-8 12a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7-1a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm-2-4a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1m1 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0z" /></svg>
+));

packages/icons/docs/src/index.ts

@@ -0,0 +1,3 @@
+export { Sparkles16 } from "./Sparkles16.tsx";
+export { Sparkles24 } from "./Sparkles24.tsx";
+export { Sparkles32 } from "./Sparkles32.tsx";

packages/icons/docs/styling.tsx

@@ -1,10 +1,8 @@
 import { createIcon } from "@hopper-ui/icons";
 
-import CustomIcon16 from "./src/sparkles-16.svg";
-import CustomIcon24 from "./src/sparkles-24.svg";
-import CustomIcon32 from "./src/sparkles-32.svg";
+import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
 
-const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon");
+const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 
 export default function Example() {
     return (