@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

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

@@ -70,100 +70,6 @@ const Component = () => {
 export default Component;
 ```
 
-### All
-
-```tsx
-import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-
-import { IconButton, Typography } from '@neo4j-ndl/react';
-import { ArrowDownTrayIconOutline } from '@neo4j-ndl/react/icons';
-
-const Component = () => {
-  return (
-    <div className="n-grid n-grid-cols-[auto_auto_auto_auto] n-gap-token-32 n-place-items-center n-w-fit">
-      {/* size row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Size
-      </Typography>
-      <IconButton description="Size example" size="small">
-        Small
-      </IconButton>
-      <IconButton description="Size example" size="medium">
-        Medium
-      </IconButton>
-      <IconButton description="Size example" size="large">
-        Large
-      </IconButton>
-
-      {/* tone row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Tone
-      </Typography>
-      <IconButton description="Grouped example" tone="default">
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <IconButton description="Grouped example" tone="danger">
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-
-      {/* isDisabled Row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Disabled
-      </Typography>
-      <IconButton description="Disabled example" isDisabled>
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-
-      {/* isLoading Row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Loading
-      </Typography>
-      <IconButton description="Loading example" isLoading>
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-
-      {/* isFloating row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Floating
-      </Typography>
-      <IconButton description="Floating example" isFloating>
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-
-      {/* isGrouped row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Grouped
-      </Typography>
-      <IconButton description="Grouped example" isGrouped>
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-
-      {/* isActive row */}
-      <Typography variant="subheading-small" className="n-justify-self-end">
-        Active
-      </Typography>
-      <IconButton description="Active example" isActive>
-        <ArrowDownTrayIconOutline />
-      </IconButton>
-      <div></div>
-      <div></div>
-    </div>
-  );
-};
-
-export default Component;
-```
-
 ### Disabled
 
 ```tsx
@@ -193,8 +99,8 @@ import { MagnifyingGlassIconOutline } 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">
         <CleanIconButton
           description="Search"
           descriptionKbdProps={{ keys: ['B'], modifierKeys: ['meta'] }}
@@ -239,20 +145,20 @@ import { MagnifyingGlassIconOutline } 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">
         <CleanIconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
         <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">
         <CleanIconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
         <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">
         <CleanIconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
@@ -275,14 +181,14 @@ import { MagnifyingGlassIconOutline } 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">
         <CleanIconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
         <Typography variant="label">Default</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">
         <CleanIconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>

package/skills/ndl-react/components/clipboard-button.md

@@ -117,7 +117,7 @@ import { ClipboardButton } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <ClipboardButton textToCopy="This is the text to copy" size="small" />
       <ClipboardButton textToCopy="This is the text to copy" size="medium" />
       <ClipboardButton textToCopy="This is the text to copy" size="large" />

package/skills/ndl-react/components/code-block.md

@@ -11,13 +11,12 @@ Import: `import { CodeBlock } from '@neo4j-ndl/react'`
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `actions` | `(IconButtonButtonProps & { as?: "button"; } & BaseProps<"button">)[]` |  |  |  |
-| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `code` | `string` | ✅ |  |  |
 | `heading` | `ReactNode` |  |  |  |
 | `isDisabled` | `boolean` |  |  |  |
 | `language` | `'asciidoc' \| 'bash' \| 'c' \| 'csharp' \| 'css-extras' \| 'css' \| 'cypher' \| 'docker' \| 'go' \| 'graphql' \| 'java' \| 'javadoc' \| 'javascript' \| 'json' \| 'jsx' \| 'kotlin' \| 'php' \| 'python' \| 'regex' \| 'rust' \| 'sql' \| 'text' \| 'typescript' \| 'xml' \| 'yaml'` | ✅ |  |  |
 | `maxHeight` | `number` |  |  |  |
-| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 | `shouldShowLineNumbers` | `boolean` |  |  |  |
 | `theme` | `'base16-ateliersulphurpool.light' \| 'coy' \| 'duotone-light' \| 'ghcolors' \| 'ndl-code-dark' \| 'ndl-code-light' \| 'prism' \| 'solarizedlight' \| 'vs'` |  |  |  |
 
@@ -62,14 +61,14 @@ const Component = () => {
       actions={[
         {
           children: (
-            <Square2StackIconOutline className="n-text-neutral-text-icon" />
+            <Square2StackIconOutline className="text-neutral-text-icon" />
           ),
           description: 'copy',
           htmlAttributes: { title: 'copy' },
           onClick: () => alert('This should not trigger when disabled'),
         },
         {
-          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
+          children: <PlayCircleIconOutline className="text-primary-icon" />,
           description: 'run',
           htmlAttributes: { title: 'run' },
           onClick: () => alert('This should not trigger when disabled'),
@@ -107,14 +106,14 @@ const Component = () => {
       actions={[
         {
           children: (
-            <Square2StackIconOutline className="n-text-neutral-text-icon" />
+            <Square2StackIconOutline className="text-neutral-text-icon" />
           ),
           description: 'copy',
           htmlAttributes: { title: 'copy' },
           onClick: () => alert('copied'),
         },
         {
-          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
+          children: <PlayCircleIconOutline className="text-primary-icon" />,
           description: 'run',
           htmlAttributes: { title: 'run' },
           onClick: () => alert('running'),
@@ -139,7 +138,7 @@ import { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex flex-col gap-token-8">
       <CodeBlock
         code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}
         language="typescript"
@@ -212,14 +211,14 @@ const Component = () => {
       actions={[
         {
           children: (
-            <Square2StackIconOutline className="n-text-neutral-text-icon" />
+            <Square2StackIconOutline className="text-neutral-text-icon" />
           ),
           description: 'copy',
           htmlAttributes: { title: 'copy' },
           onClick: () => alert('Code copied to clipboard!'),
         },
         {
-          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
+          children: <PlayCircleIconOutline className="text-primary-icon" />,
           description: 'run',
           htmlAttributes: { title: 'run' },
           onClick: () => alert('Running code...'),

package/skills/ndl-react/components/color-picker.md

@@ -128,7 +128,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-flex n-items-center n-justify-centern-w-full">
+    <div className="flex items-center justify-centern-w-full">
       <FilledButton
         onClick={handleClick}
         htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -137,7 +137,7 @@ const Component = () => {
       </FilledButton>
       <Dialog onClose={handleClose} isOpen={isOpen}>
         <Dialog.Header>Header</Dialog.Header>
-        <Dialog.Content className="n-max-h-96 n-overflow-y-auto">
+        <Dialog.Content className="max-h-96 overflow-y-auto">
           <ColorPicker
             color={color}
             onChange={(newColor) => setColor(newColor.rgb)}
@@ -165,7 +165,7 @@ const Component = () => {
       <Popover.Trigger hasButtonWrapper>
         <FilledButton>Open Popover</FilledButton>
       </Popover.Trigger>
-      <Popover.Content className="n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64">
+      <Popover.Content className="overflow-y-auto overflow-x-hidden p-4 max-h-64">
         Popover content
         <ColorPicker
           color="#ff0000"

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

@@ -336,7 +336,7 @@ const Component = () => {
   const [searchValue, setSearchValue] = useState('');
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   return (
-    <div className="n-flex n-gap-token-2 n-items-center">
+    <div className="flex gap-token-2 items-center">
       <TextArea
         ref={textAreaRef}
         label="Command input"
@@ -424,7 +424,7 @@ const options = [
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-4">
+    <div className="flex flex-col gap-token-4">
       <Combobox
         label="Project"
         placeholder="Select project"
@@ -519,7 +519,7 @@ const Component = () => {
   }, [hasOpened, searchValue]);
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-4">
+    <div className="flex flex-col gap-token-4">
       <Combobox
         label="Products"
         // The consumer supplies already-filtered options, so internal
@@ -537,7 +537,7 @@ const Component = () => {
         isLoading={isLoading}
         searchPlaceholder="Search products"
       />
-      <Typography variant="body-small" className="n-text-neutral-text-weak">
+      <Typography variant="body-small" className="text-neutral-text-weak">
         The consumer clears, fetches, and filters options after a short delay.
         The loading state is shown while each request is in flight.
       </Typography>
@@ -840,7 +840,7 @@ const options = [
 ];
 
 const Component = () => (
-  <div className="n-flex n-flex-col n-items-start n-gap-token-16">
+  <div className="flex flex-col items-start gap-token-16">
     <Combobox
       label="Disabled single select"
       defaultValue={options[0]}
@@ -875,7 +875,7 @@ const options = [
 ];
 
 const Component = () => (
-  <div className="n-w-full">
+  <div className="w-full">
     <Combobox
       label="Product"
       helpText="This combobox fills the width of its parent."
@@ -937,7 +937,7 @@ const options = [
 ];
 
 const Component = () => (
-  <div className="n-flex n-flex-col n-gap-token-4">
+  <div className="flex flex-col gap-token-4">
     <Typography variant="body-medium">Filter results by product</Typography>
     <Combobox
       label="Product"
@@ -1055,13 +1055,13 @@ const Component = () => (
     <Popover.Trigger hasButtonWrapper>
       <FilledButton>Open popover</FilledButton>
     </Popover.Trigger>
-    <Popover.Content className="n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16">
-      <div className="n-flex n-flex-col n-gap-token-16">
+    <Popover.Content className="max-h-[240px] w-[400px] overflow-y-auto p-token-16">
+      <div className="flex flex-col gap-token-16">
         <Typography variant="body-medium">
           Scroll this popover while the combobox panel is open to verify that it
           remains anchored and is not clipped by the overflow container.
         </Typography>
-        <div className="n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" />
+        <div className="h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" />
         <Combobox
           label="Product"
           helpText="The combobox panel is independently portaled above this popover."
@@ -1069,7 +1069,7 @@ const Component = () => (
           options={options}
           searchPlaceholder="Search products"
         />
-        <div className="n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" />
+        <div className="h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" />
       </div>
     </Popover.Content>
   </Popover>
@@ -1112,7 +1112,7 @@ const Component = () => {
             <Popover.Trigger hasButtonWrapper>
               <FilledButton>Open popover</FilledButton>
             </Popover.Trigger>
-            <Popover.Content className="n-w-[400px] n-p-token-16">
+            <Popover.Content className="w-[400px] p-token-16">
               <Combobox
                 label="Product"
                 errorText="This error styling should inherit the dialog theme."
@@ -1299,7 +1299,7 @@ const Component = () => {
 
   return (
     <form
-      className="n-flex n-max-w-xl n-flex-col n-gap-token-6"
+      className="flex max-w-xl flex-col gap-token-6"
       onSubmit={handleSubmit}
     >
       <Combobox
@@ -1318,7 +1318,7 @@ const Component = () => {
         defaultValue={[environments[0], environments[1]]}
         isMulti
       />
-      <div className="n-flex n-flex-wrap n-gap-token-2">
+      <div className="flex flex-wrap gap-token-2">
         <FilledButton type="submit">Submit</FilledButton>
         <OutlinedButton type="reset">Reset</OutlinedButton>
         <TextButton type="button" onClick={() => triggerRef.current?.focus()}>
@@ -1327,7 +1327,7 @@ const Component = () => {
       </div>
       <div aria-live="polite">
         <Typography variant="body-medium">Submitted form data</Typography>
-        <pre className="n-mt-token-2">
+        <pre className="mt-token-2">
           {submittedValues.length > 0
             ? submittedValues.join('\n')
             : 'Submit the form to inspect its values.'}
@@ -1377,11 +1377,11 @@ const options = [
 ];
 
 const Component = () => (
-  <div className="n-flex n-flex-col n-gap-token-16">
+  <div className="flex flex-col gap-token-16">
     {(['small', 'medium', 'large'] as const).map((size) => (
-      <div className="n-flex n-flex-col n-gap-token-4" key={size}>
-        <p className="n-capitalize">{size}</p>
-        <div className="n-flex n-flex-wrap n-items-start n-gap-token-16">
+      <div className="flex flex-col gap-token-4" key={size}>
+        <p className="capitalize">{size}</p>
+        <div className="flex flex-wrap items-start gap-token-16">
           <Combobox
             label={`${size} single-select`}
             defaultValue={options[0]}
@@ -1461,7 +1461,7 @@ const options = [
 ];
 
 const Component = () => (
-  <div className="n-flex n-flex-col n-gap-token-16">
+  <div className="flex flex-col gap-token-16">
     <Combobox
       label="Product"
       helpText="Pick the product the ticket is about."

package/skills/ndl-react/components/conditional-wrap.md

@@ -28,7 +28,7 @@ const Component = () => {
   const [shouldWrap, setShouldWrap] = useState(false);
 
   return (
-    <div className="n-flex n-flex-col n-gap-6">
+    <div className="flex flex-col gap-6">
       <Switch
         isChecked={shouldWrap}
         onChange={() => setShouldWrap(!shouldWrap)}

package/skills/ndl-react/components/data-grid.md

@@ -20,7 +20,7 @@ Import: `import { DataGrid } from '@neo4j-ndl/react'`
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 | `rootProps` | `HtmlAttributes<"div">` |  |  | @deprecated Use htmlAttributes, className and style on the root element instead |
 | `skeletonProps` | `(SkeletonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  |  |
-| `styleRules` | `{ apply: { color?: { value: string; isDisabled?: boolean; }; colorRange?: { maxColor: string; maxValue: number \| bigint \| { bigint: string; } \| { datetime: string; } \| { ...; } \| { ...; }; ... 5 more ...; midValue?: number \| ... 5 more ... \| undefined; } \| undefined; textColor?: { ...; } \| un...` |  |  | Rule-based conditional styling for cells and rows. |
+| `styleRules` | `DataGridStyleRule[]` |  |  | Rule-based conditional styling for cells and rows. |
 | `styleRuleValueConverters` | `DataGridStyleRuleValueConverters` |  |  | Per-column converters that teach the style-rule engine how to interpret complex cell values. |
 | `styling` | `Partial<{ hasZebraStriping: boolean; borderStyle: "all-sides" \| "horizontal" \| "vertical" \| "none"; headerStyle: "filled" \| "clean"; hasHoverEffects: boolean; isCompact: boolean; }>` |  | `{}` |  |
 | `tableInstance` | `Table<T>` | ✅ |  | Table instance created from `useTable` |
@@ -282,7 +282,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={true}
         tableInstance={table}
@@ -367,7 +367,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={false}
         tableInstance={table}
@@ -458,11 +458,11 @@ const Component = () => {
   });
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex flex-col gap-token-8">
       <Typography
         variant="body-medium"
         as="div"
-        className="n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16"
+        className="flex flex-col gap-token-8 p-token-24 pb-token-16"
       >
         <div>Current container height: 400px</div>
         <div>Try updating height with Storybook&apos; s story controls👇</div>
@@ -474,7 +474,7 @@ const Component = () => {
         }}
       >
         <DataGrid
-          className="n-h-full"
+          className="h-full"
           isResizable={true}
           tableInstance={table}
           components={{
@@ -678,7 +678,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={false}
         tableInstance={table}
@@ -751,7 +751,7 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
     return (
       <div
         data-testid={`ndl-actions-cell-row-${row.index}`}
-        className="n-flex n-flex-row n-gap-token-8"
+        className="flex flex-row gap-token-8"
       >
         <Select
           ariaLabel={`actions-select-row-${row.index}`}
@@ -956,12 +956,12 @@ const Component = () => {
 
   // DataGrid code
   return (
-    <div className="n-w-full">
-      <div className="n-flex n-justify-center">
+    <div className="w-full">
+      <div className="flex justify-center">
         <FilledButton onClick={handleClick}>Open Dialog</FilledButton>
       </div>
       <Dialog
-        className="n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg"
+        className="p-token-8 bg-neutral-10 max-w-max rounded-lg"
         htmlAttributes={{
           id: 'default-menu',
         }}
@@ -1059,7 +1059,7 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
     return (
       <div
         data-testid={`ndl-actions-cell-row-${row.index}`}
-        className="n-flex n-flex-row n-gap-token-8"
+        className="flex flex-row gap-token-8"
       >
         <IconButton
           description="Megaphone"
@@ -1356,7 +1356,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32">
+    <div className="h-[1000px] w-full bg-primary-bg-weak p-token-32">
       <Leva isRoot />
       <DataGrid
         isResizable={true}
@@ -1503,7 +1503,7 @@ const Component = () => {
   const isAutoResizingColumns = true;
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         components={{
           Navigation: null,
@@ -1595,7 +1595,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={true}
         tableInstance={table}
@@ -1684,7 +1684,7 @@ const Component = ({
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid<TestDataFormat>
         isResizable={true}
         tableInstance={table}
@@ -1886,7 +1886,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={false}
         tableInstance={table}
@@ -2216,7 +2216,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={false}
         isKeyboardNavigable={false}
@@ -2416,7 +2416,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={false}
         tableInstance={table}
@@ -2541,7 +2541,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full">
+    <div className="w-full">
       <DataGrid
         components={{
           BodyRow: CustomBodyRow,
@@ -2628,7 +2628,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={true}
         tableInstance={table}
@@ -2714,7 +2714,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isResizable={true}
         tableInstance={table}
@@ -2954,8 +2954,8 @@ const Component = () => {
         const isInactive = info.getValue() === 'inactive';
 
         const warningHelpText = (
-          <span className="n-flex n-items-center n-gap-token-2 n-text-warning-text">
-            <ExclamationTriangleIconSolid className="n-size-token-16 n-text-warning-icon" />
+          <span className="flex items-center gap-token-2 text-warning-text">
+            <ExclamationTriangleIconSolid className="size-token-16 text-warning-icon" />
             Inactive users cannot sign in
           </span>
         );
@@ -3011,7 +3011,7 @@ const Component = () => {
   });
 
   return (
-    <div className="n-w-full n-bg-light-neutral-text-weakest">
+    <div className="w-full bg-light-neutral-text-weakest">
       <DataGrid
         isKeyboardNavigable={true}
         isResizable={true}
@@ -3082,7 +3082,7 @@ const BodyCurryingFunction =
     const items = rowVirtualizer.getVirtualItems();
 
     return (
-      <div ref={ref} className="n-overflow-auto n-h-[290px]">
+      <div ref={ref} className="overflow-auto h-[290px]">
         <DataGrid.Body
           {...props}
           className={className}
@@ -3192,7 +3192,7 @@ const Component = () => {
 
   return (
     <div
-      className="n-w-full n-bg-light-neutral-text-weakest"
+      className="w-full bg-light-neutral-text-weakest"
       style={{ height: '400px' }}
     >
       <DataGrid
@@ -3204,7 +3204,7 @@ const Component = () => {
         isResizable={false}
         tableInstance={table}
         rootProps={{
-          className: 'n-h-full',
+          className: 'h-full',
         }}
       />
     </div>

package/skills/ndl-react/components/date-picker.md

@@ -217,7 +217,7 @@ const Component = () => {
   return (
     <Dialog isOpen={true} aria-label="Dialog">
       <Dialog.Header>Using Date Picker 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">
         <DatePicker
           timePickerProps={{
             timeInterval: 20,
@@ -262,12 +262,12 @@ const Component = () => {
       <Dialog.Header>
         Using Date Picker inside a popover in 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">
         <Popover>
           <Popover.Trigger hasButtonWrapper>
             <FilledButton>Open Popover</FilledButton>
           </Popover.Trigger>
-          <Popover.Content className="n-p-token-16">
+          <Popover.Content className="p-token-16">
             <DatePicker
               reactDatePickerProps={{
                 onChange: handleOnChange,