refactor(docs): replace @ably/ui cn + heights utils with local copies

Add local src/utilities/cn.ts (clsx + tailwind-merge) and src/utilities/heights.ts,
and repoint the 33 cn + 4 heights import sites off @ably/ui/core/utils/* (DX-1128).

clsx and tailwind-merge were only present transitively via @ably/ui; they are now
direct dependencies so cn keeps resolving once @ably/ui is removed. cn mirrors the
upstream implementation (twMerge(clsx(inputs))) so class-merging behaviour is
unchanged.

Refs: DX-1128

Author: jamiehenson

package.json

@@ -58,6 +58,7 @@
     "@types/prop-types": "^15.7.4",
     "cheerio": "^1.0.0-rc.10",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dompurify": "^3.4.0",
     "fast-glob": "^3.3.3",
     "front-matter": "^4.0.2",
@@ -96,6 +97,7 @@
     "react-medium-image-zoom": "^5.4.1",
     "react-select": "^5.7.0",
     "remark-gfm": "^1.0.0",
+    "tailwind-merge": "^2.5.5",
     "typescript": "^4.6.3",
     "use-keyboard-shortcut": "^1.1.6",
     "util": "^0.12.4"

src/components/ButtonWithTooltip/ButtonWithTooltip.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, MouseEvent, useState, useRef } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { button, tooltipClass, isVisible, notificationClass } from './ButtonWithTooltip.module.css';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {

src/components/CodeEditor/Chrome.tsx

@@ -1,4 +1,4 @@
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import React from 'react';
 import { SmallMenuLabel } from 'src/components/Menu/Label';
 import APIKeyIndicator from 'src/components/blocks/software/Code/ApiKeyIndicator';

src/components/Examples/ExamplesCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Icon from '@ably/ui/core/Icon';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 const ExamplesCheckbox = ({
   label,

src/components/Examples/ExamplesFilter.tsx

@@ -4,7 +4,7 @@ import Icon from '@ably/ui/core/Icon';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
 import Button from '@ably/ui/core/Button';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Badge from '@ably/ui/core/Badge';
 import ExamplesCheckbox from './ExamplesCheckbox';
 import { SelectedFilters } from './ExamplesContent';

src/components/Examples/ExamplesGrid.tsx

@@ -3,7 +3,7 @@ import Badge from '@ably/ui/core/Badge';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { Image, ImageProps } from '../Image';
 import { DEFAULT_EXAMPLE_LANGUAGES } from '../../data/examples/';
 import { Example } from '../../data/examples/types';

src/components/Examples/ExamplesRenderer.tsx

@@ -8,7 +8,7 @@ import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-ke
 import { IconName } from '@ably/ui/core/Icon/types';
 import SegmentedControl from '@ably/ui/core/SegmentedControl';
 import dotGrid from './images/dot-grid.svg';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { getRandomChannelName } from '../../utilities/get-random-channel-name';
 // Shared tsconfig for proper ES2020+ transpilation in Sandpack
 import examplesTsConfig from '../../../examples/tsconfig.json';

src/components/Homepage/PlatformAndProducts.tsx

@@ -1,5 +1,5 @@
 import ProductTile from '@ably/ui/core/ProductTile';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { Image, ImageProps, getImageFromList } from 'src/components/Image';
 import type { PlatformProductsSectionData, PlatformCardData } from 'src/data/content/types';
 import { navigate } from '../Link';

src/components/Layout/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
 import Icon from '@ably/ui/core/Icon';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { hierarchicalKey } from './utils/nav';
 
 const linkStyles =

src/components/Layout/CopyForLLM.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from '@reach/router';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import { track } from '@ably/ui/core/insights';