@neo4j-ndl/react 4.25.7 → 5.0.0-alpha.0.3d763f7

package/skills/ndl-react/components/next/tree-view.md

@@ -38,9 +38,9 @@ The available selection modes are:
 | `actionMenuItems` | `ReactNode` |  |  | ReactNode containing Menu.Item elements to render in an action menu. When provided, an action button is rendered. |
 | `actionMenuProps` | `MenuProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>` |  |  | Props forwarded to the Menu sub-components (anchorRef, onClose). |
 | `children` | `ReactNode` |  |  | Nested TreeView.Item or TreeView.SkeletonItem elements rendered as sub-items in a collapsible group. |
-| `defaultExpanded` | `boolean` |  | `false` | Default expansion for uncontrolled items |
 | `hasChildren` | `boolean` |  |  | Whether the item has children. Decides if the item should render a chevron for expansion. Needed for lazy loading. |
 | `id` | `string` |  |  | Identifies the item. Required when the tree manages selection via `selectedIds`. |
+| `isDefaultExpanded` | `boolean` |  | `false` | Default expansion for uncontrolled items |
 | `isDisabled` | `boolean` |  |  | Whether the item is disabled |
 | `isExpanded` | `boolean` |  |  | Whether the item is expanded. Makes the item controlled. |
 | `isIndeterminate` | `boolean` |  |  | Whether the item is in an indeterminate state. Only meaningful in multi-select mode for parent nodes. |
@@ -371,7 +371,7 @@ const Component = () => {
       key={node.id}
       id={node.id}
       title={node.title}
-      defaultExpanded
+      isDefaultExpanded
       leadingVisual={
         node.children === undefined ? (
           <DocumentIconOutline />
@@ -763,14 +763,14 @@ const Component = () => {
         id="documents"
         title="Documents"
         hasChildren
-        defaultExpanded
+        isDefaultExpanded
         leadingVisual={<FolderIconSolid />}
       >
         <TreeView.Item
           id="work"
           title="Work"
           hasChildren
-          defaultExpanded
+          isDefaultExpanded
           leadingVisual={<FolderIconSolid />}
         >
           <TreeView.Item
@@ -1008,7 +1008,7 @@ const Component = () => {
         key={node.id}
         id={node.id}
         title={node.title}
-        defaultExpanded
+        isDefaultExpanded
         isIndeterminate={
           node.children !== undefined &&
           selectedLeafCount > 0 &&
@@ -1147,7 +1147,7 @@ const Component = () => {
         onSelectedChange={() => setSelected('production')}
         leadingVisual={<DatabaseSignalIcon />}
         trailingContent={
-          <CheckCircleIconSolid className="n-size-5 n-text-success-bg-status" />
+          <CheckCircleIconSolid className="size-5 text-success-bg-status" />
         }
         actionMenuItems={
           <>
@@ -1158,9 +1158,9 @@ const Component = () => {
         }
         tooltipContent={
           <>
-            <span className="n-font-semibold">Production</span>
-            <span className="n-flex n-items-center n-gap-token-4 n-mt-token-8">
-              <CheckCircleIconSolid className="n-size-5 n-text-success-bg-status" />
+            <span className="font-semibold">Production</span>
+            <span className="flex items-center gap-token-4 mt-token-8">
+              <CheckCircleIconSolid className="size-5 text-success-bg-status" />
               : Endorsed
             </span>
           </>
@@ -1172,14 +1172,14 @@ const Component = () => {
         onSelectedChange={() => setSelected('development')}
         leadingVisual={<DatabaseSignalIcon />}
         trailingContent={
-          <AppearanceIcon className="n-size-5 n-text-warning-bg-status" />
+          <AppearanceIcon className="size-5 text-warning-bg-status" />
         }
         tooltipContent={
           <>
-            <span className="n-font-semibold">Development</span>
-            <span className="n-flex n-items-center n-gap-token-4 n-mt-token-8">
-              <AppearanceIcon className="n-size-5 n-text-warning-bg-status" />:
-              In development
+            <span className="font-semibold">Development</span>
+            <span className="flex items-center gap-token-4 mt-token-8">
+              <AppearanceIcon className="size-5 text-warning-bg-status" />: In
+              development
             </span>
           </>
         }
@@ -1216,7 +1216,7 @@ const Component = () => {
         onSelectedChange={() => setSelected('production')}
         leadingVisual={<DatabaseSignalIcon />}
         trailingContent={
-          <CheckCircleIconSolid className="n-size-5 n-text-success-bg-status" />
+          <CheckCircleIconSolid className="size-5 text-success-bg-status" />
         }
         actionMenuItems={
           <>
@@ -1232,7 +1232,7 @@ const Component = () => {
         onSelectedChange={() => setSelected('development')}
         leadingVisual={<DatabaseSignalIcon />}
         trailingContent={
-          <AppearanceIcon className="n-size-5 n-text-warning-bg-status" />
+          <AppearanceIcon className="size-5 text-warning-bg-status" />
         }
       />
     </TreeView>
@@ -1257,8 +1257,8 @@ const Component = () => {
   return (
     <TreeView ariaLabel="File explorer">
       <TreeView.Item
+        isDefaultExpanded
         title="Documents (expanded by default)"
-        defaultExpanded={true}
         leadingVisual={<FolderIconSolid />}
       >
         <TreeView.Item title="Work" leadingVisual={<FolderIconSolid />}>
@@ -1285,7 +1285,7 @@ const Component = () => {
       <TreeView.Item
         title="Images (collapsed by default)"
         leadingVisual={<FolderIconSolid />}
-        defaultExpanded={false}
+        isDefaultExpanded={false}
       >
         <TreeView.Item
           title="Photo.jpg"

package/skills/ndl-react/components/popover.md

@@ -11,9 +11,8 @@ Import: `import { Popover } from '@neo4j-ndl/react'`
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `anchorElement` | `Element \| null` |  |  | Can be used if the anchor should be separated from the trigger. Note: to visually separate the anchor from the trigger, use the Popover.Anchor component instead. |
-| `anchorPosition` | `{ x: number; y: number; }` |  |  | If the anchorPosition is provided the anchorElement will be ignored |
+| `anchorPosition` | `AnchorPosition` |  |  | If the anchorPosition is provided the anchorElement will be ignored |
 | `children` | `ReactNode` |  |  | The content of the popover |
-| `closeOnClickOutside` | `boolean` |  | `true` | If the popover should close when the user clicks outside of it |
 | `hasAnchorPortal` | `boolean` |  |  | Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. |
 | `initialFocus` | `number \| RefObject<HTMLElement \| null>` |  |  | Which element to initially focus. |
 | `isOpen` | `boolean` |  |  | if the popover is open |
@@ -21,9 +20,10 @@ Import: `import { Popover } from '@neo4j-ndl/react'`
 | `offset` | `OffsetOptions` |  |  | can take either a number, an object or a function. Full documentation here:  https://floating-ui.com/docs/offset |
 | `onOpenChange` | `((isOpen: boolean, event?: Event) => void)` |  |  | Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. |
 | `placement` | `'bottom-end-bottom-start' \| 'bottom-end-top-end' \| 'bottom-middle-top-middle' \| 'bottom-start-bottom-end' \| 'bottom-start-top-start' \| 'middle-end-middle-start' \| 'middle-start-middle-end' \| 'top-end-bottom-end' \| 'top-end-top-start' \| 'top-middle-bottom-middle' \| 'top-start-bottom-start' \| 'top-start-top-end'` |  |  | The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element. |
-| `role` | `'alertdialog' \| 'dialog' \| 'grid' \| 'listbox' \| 'menu' \| 'tooltip' \| 'tree'` |  |  | The role of the popover. @deprecated - This prop will be removed in v5. |
+| `role` | `'alertdialog' \| 'dialog' \| 'grid' \| 'listbox' \| 'menu' \| 'tooltip' \| 'tree'` |  |  | The role of the popover. |
 | `shouldCaptureFocus` | `boolean` |  | `false` | If the popover should constrain the focus inside the popover while open |
-| `shouldCloseOnFocusOut` | `boolean` |  |  | If the popover should close when focus moves outside of it, for example when tabbing away or focusing another element. Defaults to the value of `closeOnClickOutside`. Has no effect when `shouldCaptureFocus` is true, since focus cannot leave the popover. |
+| `shouldCloseOnClickOutside` | `boolean` |  | `true` | If the popover should close when the user clicks outside of it |
+| `shouldCloseOnFocusOut` | `boolean` |  |  | If the popover should close when focus moves outside of it, for example when tabbing away or focusing another element. Defaults to the value of `shouldCloseOnClickOutside`. Has no effect when `shouldCaptureFocus` is true, since focus cannot leave the popover. |
 | `shouldConstrainSize` | `boolean` |  |  | When true, limits the popover's max-height and max-width to the available viewport space. The consumer is responsible for adding overflow handling (e.g. overflow-y: auto) to the content. |
 | `strategy` | `'absolute' \| 'fixed'` |  |  | The strategy of the popover. Fixed should be used when the popover is inside a Dialog. |
 
@@ -56,7 +56,7 @@ Import: `import { Popover } from '@neo4j-ndl/react'`
 
 When used with a toggle button, the button should have aria-expanded (true when open, false when closed), aria-haspopup set to the role of the popover, and aria-controls set to the id of the popover.
 
-By default, a popover that doesn't capture focus closes when focus moves outside of it. Setting `closeOnClickOutside` or `shouldCloseOnFocusOut` to false keeps it open while keyboard users tab through the rest of the page. Make sure it doesn't hide the focused element (WCAG 2.4.11), and give users a way to close it, for example with the Escape key or a close button.
+By default, a popover that doesn't capture focus closes when focus moves outside of it. Setting `shouldCloseOnClickOutside` or `shouldCloseOnFocusOut` to false keeps it open while keyboard users tab through the rest of the page. Make sure it doesn't hide the focused element (WCAG 2.4.11), and give users a way to close it, for example with the Escape key or a close button.
 
 ## Examples
 
@@ -73,9 +73,7 @@ const Component = () => {
       <Popover.Trigger hasButtonWrapper>
         <FilledButton>Open Popover</FilledButton>
       </Popover.Trigger>
-      <Popover.Content className="n-p-token-16">
-        Popover content
-      </Popover.Content>
+      <Popover.Content className="p-token-16">Popover content</Popover.Content>
     </Popover>
   );
 };
@@ -105,9 +103,7 @@ const Component = () => {
           Open Popover
         </FilledButton>
       </Popover.Trigger>
-      <Popover.Content className="n-p-token-16">
-        Popover content
-      </Popover.Content>
+      <Popover.Content className="p-token-16">Popover content</Popover.Content>
     </Popover>
   );
 };
@@ -166,12 +162,12 @@ const Component = () => {
   );
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-32 n-items-center">
+    <div className="flex flex-col gap-token-32 items-center">
       <Popover offset={offsetTranslation[selectedPosition]}>
         <Popover.Trigger hasButtonWrapper>
           <FilledButton>Open Popover</FilledButton>
         </Popover.Trigger>
-        <Popover.Content className="n-p-token-16">
+        <Popover.Content className="p-token-16">
           Popover content
         </Popover.Content>
       </Popover>
@@ -208,7 +204,7 @@ const Component = () => {
   const [isDialogOpen, setDialogOpen] = useState(false);
   const closeDialog = () => setDialogOpen(false);
   return (
-    <div className="n-flex n-justify-center">
+    <div className="flex justify-center">
       <FilledButton onClick={() => setDialogOpen(true)}>
         Open Dialog
       </FilledButton>
@@ -217,9 +213,9 @@ const Component = () => {
         <Dialog.Content>
           <Popover>
             <Popover.Trigger hasButtonWrapper>
-              <FilledButton className="n-mx-auto">Open Popover</FilledButton>
+              <FilledButton className="mx-auto">Open Popover</FilledButton>
             </Popover.Trigger>
-            <Popover.Content className="n-p-token-16">
+            <Popover.Content className="p-token-16">
               Custom Popover content
             </Popover.Content>
           </Popover>
@@ -245,9 +241,7 @@ const Component = () => {
       <Popover.Trigger>
         <div>Open Popover</div>
       </Popover.Trigger>
-      <Popover.Content className="n-p-token-16">
-        Popover content
-      </Popover.Content>
+      <Popover.Content className="p-token-16">Popover content</Popover.Content>
     </Popover>
   );
 };
@@ -266,7 +260,7 @@ import { useState } from 'react';
 const Component = () => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <div className="n-flex n-justify-between n-w-full">
+    <div className="flex justify-between w-full">
       <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
         <Popover.Anchor>
           <div>Anchor Element</div>
@@ -276,7 +270,7 @@ const Component = () => {
             Click to open popover
           </FilledButton>
         </Popover.Trigger>
-        <Popover.Content className="n-p-token-16">
+        <Popover.Content className="p-token-16">
           Popover content
         </Popover.Content>
       </Popover>

package/skills/ndl-react/components/progress-bar.md

@@ -61,7 +61,7 @@ import { ProgressBar } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <ProgressBar value={75} size="small" heading="Small" />
       <ProgressBar value={75} size="large" heading="Large" />
     </div>

package/skills/ndl-react/components/radio.md

@@ -95,7 +95,7 @@ import { Radio } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-12">
+    <div className="flex flex-col gap-token-12">
       <Radio label="Radio label" isDisabled />
       <Radio label="Radio label" isDisabled isChecked />
     </div>
@@ -142,7 +142,7 @@ import { Radio } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-max-w-32">
+    <div className="max-w-32">
       <Radio label="This is a long label that will overflow" />
     </div>
   );

package/skills/ndl-react/components/read-only-tag.md

@@ -41,7 +41,7 @@ import { ReadOnlyTag } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <ReadOnlyTag color="1">Categorical color 1</ReadOnlyTag>
       <ReadOnlyTag color="2">Categorical color 2</ReadOnlyTag>
       <ReadOnlyTag color="3">Categorical color 3</ReadOnlyTag>
@@ -66,7 +66,7 @@ import { ReadOnlyTag } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-row n-gap-token-8">
+    <div className="flex flex-row gap-token-8">
       <ReadOnlyTag size="x-small">X-Small</ReadOnlyTag>
       <ReadOnlyTag size="small">Small</ReadOnlyTag>
       <ReadOnlyTag size="medium">Medium</ReadOnlyTag>

package/skills/ndl-react/components/segmented-control.md

@@ -164,7 +164,7 @@ const Component = () => {
   const [selectedLarge, setSelectedLarge] = useState('large1');
 
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <SegmentedControl
         selected={selectedSmall}
         onChange={setSelectedSmall}

package/skills/ndl-react/components/select-icon-button.md

@@ -52,20 +52,20 @@ import { SelectIcon } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+    <div className="flex flex-col gap-token-16">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton description="Select" size="small" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
         <Typography variant="label"> Small</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton description="Select" size="medium" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
         <Typography variant="label"> Medium</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton description="Select" size="large" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
@@ -88,8 +88,8 @@ import { SelectIcon } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+    <div className="flex flex-col gap-token-16">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton
           description="Select"
           size="small"
@@ -100,13 +100,13 @@ const Component = () => {
         </SelectIconButton>
         <Typography variant="label"> Disabled</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton description="Select" size="small" isOpen={true}>
           <SelectIcon />
         </SelectIconButton>
         <Typography variant="label"> Active</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <SelectIconButton
           description="Select"
           size="small"

package/skills/ndl-react/components/select.md

@@ -165,7 +165,7 @@ const Component = (props: React.ComponentProps<typeof Select>) => {
   );
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex flex-col gap-token-8">
       <Select
         label="Label"
         type="select"
@@ -238,9 +238,9 @@ const Component = (props: React.ComponentProps<typeof Select>) => {
   return (
     <Select
       label={
-        <div className="n-flex n-flex-row n-gap-token-4 n-h-7 n-items-center">
+        <div className="flex flex-row gap-token-4 h-7 items-center">
           Custom JSX element
-          <QuestionMarkCircleIconOutline className="n-h-token-16" />
+          <QuestionMarkCircleIconOutline className="h-token-16" />
         </div>
       }
       helpText="You can have a custom label with JSX code 😱"
@@ -365,7 +365,7 @@ const Component = (props: React.ComponentProps<typeof Select>) => {
   return (
     <div
       ref={ref}
-      className="n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px]"
+      className="flex flex-col items-center justify-center relative h-[500px]"
     >
       <FilledButton size="medium" onClick={() => setIsOpen(true)}>
         Open Dialog
@@ -377,7 +377,7 @@ const Component = (props: React.ComponentProps<typeof Select>) => {
         aria-label="Dialog"
       >
         <Dialog.Header>Using Select inside a dialog</Dialog.Header>
-        <Dialog.Description className="n-flex n-flex-col n-gap-token-32">
+        <Dialog.Description className="flex flex-col gap-token-32">
           <Typography variant="body-medium">
             To use select inside a dialog and avoid the cut-off, you need to use
             the property <code>menuPosition: &quot;fixed&quot;</code> inside the{' '}
@@ -416,7 +416,7 @@ const EXAMPLE_OPTIONS = [
 
 const Component = (props: React.ComponentProps<typeof Select>) => {
   return (
-    <div className="n-flex n-gap-token-16 n-pt-token-64">
+    <div className="flex gap-token-16 pt-token-64">
       <Select
         label="Automatic menu placement"
         type="select"
@@ -499,7 +499,7 @@ const EXAMPLE_OPTIONS = [
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <Select
         label="Required"
         type="select"
@@ -540,7 +540,7 @@ const EXAMPLE_OPTIONS = [
 
 const Component = (props: React.ComponentProps<typeof Select>) => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Select
         label="Small"
         type="select"

package/skills/ndl-react/components/selectable-tag.md

@@ -54,7 +54,7 @@ import { SelectableTag } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-8 n-items-center">
+    <div className="flex gap-token-8 items-center">
       <SelectableTag isSelected={false} isDisabled onClick={() => null}>
         Disabled unselected tag
       </SelectableTag>
@@ -80,7 +80,7 @@ const Component = () => {
   const [selected, setSelected] = useState<Record<string, boolean>>({});
 
   return (
-    <div className="n-flex n-flex-row n-gap-token-8">
+    <div className="flex flex-row gap-token-8">
       <SelectableTag
         size="x-small"
         isSelected={selected['x-small'] ?? false}

package/skills/ndl-react/components/side-navigation.md

@@ -92,7 +92,7 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default">
       <SideNavigation
         ariaLabel="Main side navigation"
         isExpanded={isExpanded}
@@ -187,17 +187,17 @@ const Component = () => {
           </SideNavigation.CategoryItem>
         </SideNavigation.ListItem>
       </SideNavigation>
-      <div className="n-h-full n-w-full">
-        <div className="n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto">
-          <div className="n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center">
+      <div className="h-full w-full">
+        <div className="flex flex-col p-8 w-full max-w-[1024px] mx-auto">
+          <div className="flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center">
             <Typography variant="title-4">Side Nav with Badges</Typography>
             <Typography variant="body-medium">
               Badges can be used to indicate that there are actions that need
               attention from the user on the specific page. The badge can have
               three different types of severity:
-              <b className="n-text-primary-text"> info</b>,
-              <b className="n-text-warning-text"> warning</b> and
-              <b className="n-text-danger-text"> danger</b>.
+              <b className="text-primary-text"> info</b>,
+              <b className="text-warning-text"> warning</b> and
+              <b className="text-danger-text"> danger</b>.
               <br />
               <br />
               The badge on a <b>CategoryItem</b> should be the type of the
@@ -236,7 +236,7 @@ const Component = () => {
   const [active, setActive] = useState<string | null>(null);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default">
       <SideNavigation
         isExpanded={false}
         shouldOverlayOnInteraction={false}
@@ -317,9 +317,9 @@ const Component = () => {
           />
         </SideNavigation.ListItem>
       </SideNavigation>
-      <div className="n-h-full n-w-full">
-        <div className="n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto">
-          <div className="n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center">
+      <div className="h-full w-full">
+        <div className="flex flex-col p-8 w-full max-w-[1024px] mx-auto">
+          <div className="flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center">
             <Typography variant="title-4">Compact Side Nav</Typography>
             <Typography variant="body-medium">
               When using a compact side nav you must make sure to set a
@@ -360,7 +360,7 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default">
       <SideNavigation
         isExpanded={isExpanded}
         shouldOverlayOnInteraction={true}
@@ -446,9 +446,9 @@ const Component = () => {
         </SideNavigation.ListItem>
       </SideNavigation>
 
-      <div className="n-h-full n-w-full">
-        <div className="n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto">
-          <div className="n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center">
+      <div className="h-full w-full">
+        <div className="flex flex-col p-8 w-full max-w-[1024px] mx-auto">
+          <div className="flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center">
             <Typography variant="title-4">Default Side Nav</Typography>
             <Typography variant="body-medium">
               This is the default behavior for a side nav. It expands on hover,
@@ -488,7 +488,7 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default overflow-hidden">
       <SideNavigation
         isExpanded={isExpanded}
         shouldOverlayOnInteraction={true}
@@ -634,9 +634,9 @@ const Component = () => {
           />
         </SideNavigation.ListItem>
       </SideNavigation>
-      <div className="n-h-full n-w-full">
-        <div className="n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto">
-          <div className="n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center">
+      <div className="h-full w-full">
+        <div className="flex flex-col p-8 w-full max-w-[1024px] mx-auto">
+          <div className="flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center">
             <Typography variant="title-4">Secondary Side Nav</Typography>
             <Typography variant="body-medium">
               If a page requires its own navigation, you can use a secondary

package/skills/ndl-react/components/skeleton.md

@@ -30,7 +30,7 @@ import { Skeleton } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-4">
+    <div className="flex flex-col gap-4">
       <Skeleton height="50px" width="100%" />
       <Skeleton height="30px" width="80%" />
       <Skeleton height="20px" width="60%" />
@@ -50,7 +50,7 @@ import { Skeleton } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-4 n-items-center">
+    <div className="flex gap-4 items-center">
       <Skeleton shape="circular" height="50px" width="50px" />
       <Skeleton shape="circular" height="40px" width="40px" />
       <Skeleton shape="circular" height="30px" width="30px" />
@@ -70,9 +70,9 @@ import { Skeleton, TextButton, Typography } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-row n-gap-2">
-      <div className="n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2">
-        <div className="n-bg-neutral-bg-default n-flex n-items-center n-justify-center n-h-36 n-rounded-2xl n-mb-4">
+    <div className="flex flex-row gap-2">
+      <div className="flex flex-col gap-2 bg-neutral-bg-weak shadow-light-raised w-72 rounded-2xl p-2">
+        <div className="bg-neutral-bg-default flex items-center justify-center h-36 rounded-2xl mb-4">
           <svg
             width="48"
             height="48"
@@ -198,24 +198,24 @@ const Component = () => {
         <Typography variant="body-medium">
           Customer success stories across industries
         </Typography>
-        <TextButton className="n-w-fit">Go to case studies</TextButton>
+        <TextButton className="w-fit">Go to case studies</TextButton>
       </div>
-      <div className="n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2">
+      <div className="flex flex-col gap-2 bg-neutral-bg-weak shadow-light-raised w-72 rounded-2xl p-2">
         <Skeleton
           shape="rectangular"
-          className="n-w-full n-h-36 n-rounded-2xl n-mb-4"
+          className="w-full h-36 rounded-2xl mb-4"
           onBackground="weak"
         />
-        <div className="n-flex n-flex-col n-gap-2">
+        <div className="flex flex-col gap-2">
           <Skeleton
             shape="rectangular"
-            className="n-w-full"
+            className="w-full"
             onBackground="weak"
             width="80%"
           >
             <Typography variant="title-3">Customer stories</Typography>
           </Skeleton>
-          <Skeleton className="n-w-full" onBackground="weak" width="60%">
+          <Skeleton className="w-full" onBackground="weak" width="60%">
             <Typography variant="body-medium">Customer</Typography>
           </Skeleton>
         </div>
@@ -236,7 +236,7 @@ import { Skeleton, Typography } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-4">
+    <div className="flex flex-col gap-4">
       <Skeleton>
         <Typography variant="display">Large display text</Typography>
       </Skeleton>
@@ -259,7 +259,7 @@ import { Skeleton, Typography } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-4">
+    <div className="flex flex-col gap-4">
       <Skeleton shape="rectangular">
         <Typography variant="body-medium">
           This text determines the skeleton width