chore(docs): Updated UI Reference (automated) (#9726)

Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com>

www/apps/ui/src/components/colors.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { Copy, clx } from "@medusajs/ui"
 import React from "react"
-import { useColorMode } from "docs-ui"
+import { CopyButton, useColorMode } from "docs-ui"
 import { colors as allColors } from "../config/colors"
+import { clx } from "@medusajs/ui"
 
 type Color = {
   name: string
@@ -154,12 +154,12 @@ const Colors = () => {
           <hr className="mb-4" />
           <div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-4 gap-y-10 sm:grid-cols-3 ">
             {colors.map((colour) => (
-              <Copy
-                content={cssVarToTailwindClass(colour.name)}
+              <CopyButton
+                text={cssVarToTailwindClass(colour.name)}
                 key={`colours-section-${section}-${colour.name}`}
               >
                 <ColorBlock colour={colour} />
-              </Copy>
+              </CopyButton>
             ))}
           </div>
         </div>

www/apps/ui/src/components/hook-table.tsx

@@ -1,9 +1,8 @@
 import { InformationCircleSolid } from "@medusajs/icons"
-import { Tooltip } from "@medusajs/ui"
 
 import { HookData, HookDataMap } from "@/types/hooks"
 import { EnumType, FunctionType, ObjectType } from "@/types/props"
-import { InlineCode, Table } from "docs-ui"
+import { InlineCode, Table, Tooltip } from "docs-ui"
 
 const HookTable = ({ props }: { props: HookDataMap }) => {
   return (
@@ -66,9 +65,8 @@ const Row = ({ value, type, description }: HookData) => {
         )}
         {isObject(type) && (
           <Tooltip
-            content={<pre>{type.shape}</pre>}
-            className="font-mono"
-            maxWidth={500}
+            tooltipChildren={<pre>{type.shape}</pre>}
+            className="font-mono max-w-[500px]"
           >
             <div className="flex items-center gap-x-1">
               <span>{type.name}</span>
@@ -78,9 +76,8 @@ const Row = ({ value, type, description }: HookData) => {
         )}
         {isFunction(type) && (
           <Tooltip
-            content={<pre>{type.signature}</pre>}
-            className="font-mono"
-            maxWidth={500}
+            tooltipChildren={<pre>{type.signature}</pre>}
+            className="font-mono max-w-[500px]"
           >
             <div className="flex items-center gap-x-1">
               <span>function</span>

www/apps/ui/src/components/props-table.tsx

@@ -1,11 +1,10 @@
 "use client"
 
 import { InformationCircleSolid } from "@medusajs/icons"
-import { Tooltip } from "@medusajs/ui"
 
 import { PropData, PropDataMap, PropSpecType } from "@/types/props"
 import { useCallback, useMemo } from "react"
-import { InlineCode, MarkdownContent, Table } from "docs-ui"
+import { InlineCode, MarkdownContent, Table, Tooltip } from "docs-ui"
 
 type PropTableProps = {
   props: PropDataMap
@@ -133,7 +132,7 @@ const Row = ({
           <InlineCode>{propName}</InlineCode>
           {description && (
             <Tooltip
-              content={
+              tooltipChildren={
                 <MarkdownContent
                   allowedElements={["a", "code"]}
                   unwrapDisallowed={true}
@@ -154,7 +153,7 @@ const Row = ({
               {index > 0 && <span>|</span>}
               {typeNode.tooltipContent && (
                 <Tooltip
-                  content={<pre>{typeNode.tooltipContent}</pre>}
+                  tooltipChildren={<pre>{typeNode.tooltipContent}</pre>}
                   className="font-mono !max-w-none"
                 >
                   <div className="flex items-center gap-x-1">