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

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

@@ -17,8 +17,8 @@ Import: `import { Slider } from '@neo4j-ndl/react'`
 | `minValue` | `number` |  | `0` | The minimum value possible to choose |
 | `onChange` | `((value: number) => void) \| ((value: [number, number]) => void)` | ✅ |  | Callback function triggered when the slider value(s) changes. The function parameter varies depending on the slider type, for single slider, it is a number and for range slider, it is an array of two numbers. |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
-| `showSteps` | `boolean` |  | `false` | Whether to display visual indicators for each step in the slider |
-| `showValues` | `boolean` |  | `false` | Whether to display a tooltip with the current value when the slider is being dragged |
+| `shouldShowSteps` | `boolean` |  | `false` | Whether to display visual indicators for each step in the slider |
+| `shouldShowValues` | `boolean` |  | `false` | Whether to display a tooltip with the current value when the slider is being dragged |
 | `step` | `number` |  | `1` | Determines the step size that will be added or removed from the current value when moving the slider button |
 | `type` | `'range' \| 'single'` |  | `single` | Type of the slider |
 | `value` | `number` | ✅ |  | Current value of the single slider. **Only required when the type is 'single'**. |
@@ -76,8 +76,8 @@ const Component = () => {
       onChange={(newValue) => {
         console.info('onChange', newValue);
       }}
-      showSteps
-      showValues
+      shouldShowSteps
+      shouldShowValues
     />
   );
 };
@@ -125,8 +125,8 @@ const Component = () => {
       maxValue={200}
       step={10}
       isDisabled={false}
-      showSteps={true}
-      showValues={true}
+      shouldShowSteps={true}
+      shouldShowValues={true}
     />
   );
 };
@@ -148,7 +148,7 @@ const Component = () => {
       onChange={(newValue) => {
         console.info('onChange', newValue);
       }}
-      showSteps
+      shouldShowSteps
     />
   );
 };
@@ -170,7 +170,7 @@ const Component = () => {
       onChange={(newValue) => {
         console.info('onChange', newValue);
       }}
-      showValues
+      shouldShowValues
     />
   );
 };
@@ -195,8 +195,8 @@ const Component = () => {
       maxValue={200}
       isDisabled={false}
       step={10}
-      showSteps={true}
-      showValues={true}
+      shouldShowSteps={true}
+      shouldShowValues={true}
       inputProps={{ 'aria-valuetext': 'percent' }}
     />
   );
@@ -272,7 +272,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <TextInput
         label="Slider value"
         helpText={`Enter a value between ${MIN_VALUE} and ${MAX_VALUE}`}
@@ -295,8 +295,8 @@ const Component = () => {
         minValue={MIN_VALUE}
         maxValue={MAX_VALUE}
         step={STEP}
-        showSteps
-        showValues
+        shouldShowSteps
+        shouldShowValues
         isDisabled={hasError}
         inputProps={{
           'aria-valuetext': `${value} out of ${MAX_VALUE}`,

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

@@ -13,12 +13,12 @@ Import: `import { Spotlight } from '@neo4j-ndl/react'`
 | `actions` | `ReactNode` |  |  | The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. |
 | `beforeActions` | `ReactNode` |  |  | A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour |
 | `children` | `ReactNode` |  |  | Children should be Spotlight subcomponents |
-| `closeOnClickOutside` | `boolean` |  | `false` | If the popover should close when the user clicks outside of it |
 | `initialFocus` | `number \| RefObject<HTMLElement \| null>` |  |  | Which element to initially focus. |
 | `onClose` | `((action: SpotlightCloseAction) => void)` |  |  | A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either "clickOutside" or "escapeKeyDown") |
 | `onOpen` | `(() => void)` |  |  | Callback function called when the spotlight is opened |
 | `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. |
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+| `shouldCloseOnClickOutside` | `boolean` |  | `false` | If the popover should close when the user clicks outside of it |
 | `target` | `string` | ✅ |  | The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to |
 
 ### Spotlight.Body
@@ -102,15 +102,15 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64 n-h-[100px]">
+    <div className="flex justify-center gap-token-64 h-[100px]">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
-      <div className="n-left-[auto] n-top-[110px] n-fixed">
+      <div className="left-[auto] top-[110px] fixed">
         <SpotlightTarget
           id={targetId}
           hasPulse={!props.isChromatic}
-          asChild
+          shouldRenderAsChild
           indicatorVariant="border"
           indicatorPlacement="middle-middle"
         >
@@ -175,7 +175,7 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <FilledButton onClick={() => setIsModalOpen(true)}>
         Open Dialog
       </FilledButton>
@@ -185,21 +185,21 @@ const Component = (props: { isChromatic: boolean }) => {
         className={themeClassName}
       >
         <Dialog.Header>Using Spotlight inside a dialog</Dialog.Header>
-        <Dialog.Content className="n-flex n-flex-col n-gap-token-32">
+        <Dialog.Content className="flex flex-col gap-token-32">
           <Typography variant="body-medium">
             Spotlight and SpotlightTarget should behave automatically correct
             when used inside a dialog. If positioning is not on top of
             everything, you might want to override the
             <code>--spotlight-z-index</code> css variable.
           </Typography>
-          <div className="n-flex n-justify-center n-gap-token-64">
+          <div className="flex justify-center gap-token-64">
             <FilledButton onClick={() => setActiveSpotlight(targetId)}>
               Activate Spotlight
             </FilledButton>
             <SpotlightTarget
               id={targetId}
               hasPulse={!props.isChromatic}
-              asChild
+              shouldRenderAsChild
               indicatorVariant="border"
             >
               <FilledButton onClick={() => alert('Target button clicked')}>
@@ -270,7 +270,7 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-h-[500px] n-flex">
+    <div className="h-[500px] flex">
       <SideNavigation isExpanded={true} ariaLabel="Main side navigation">
         <SideNavigation.CategoryHeader>AuraDB</SideNavigation.CategoryHeader>
         <SideNavigation.ListItem>
@@ -301,7 +301,7 @@ const Component = (props: { isChromatic: boolean }) => {
             borderRadius={4}
             indicatorVariant="point"
             indicatorPlacement="top-right"
-            asChild
+            shouldRenderAsChild
           >
             <SideNavigation.NavItem
               onClick={() => handleClick('aura-db-javascript')}
@@ -326,7 +326,7 @@ const Component = (props: { isChromatic: boolean }) => {
           />
         </SideNavigation.ListItem>
       </SideNavigation>
-      <div className="n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16">
+      <div className="w-full h-full flex flex-col items-center justify-center rounded-md p-token-16">
         <FilledButton onClick={() => setActiveSpotlight(targetId)}>
           Activate Spotlight
         </FilledButton>
@@ -380,7 +380,7 @@ const Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {
   const targetId = `test-target-${themeClassName}`;
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-10">
+    <div className="flex justify-center gap-token-10">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
@@ -397,13 +397,13 @@ const Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {
           <Tabs.Tab id="1">Tab 2</Tabs.Tab>
           <Tabs.Tab id="2">Tab 3</Tabs.Tab>
         </Tabs>
-        <Tabs.TabPanel className="n-p-token-4" value={tabsValue} tabId="0">
+        <Tabs.TabPanel className="p-token-4" value={tabsValue} tabId="0">
           <Typography variant="body-medium">Tab 1 content</Typography>
         </Tabs.TabPanel>
-        <Tabs.TabPanel className="n-p-token-4" value={tabsValue} tabId="1">
+        <Tabs.TabPanel className="p-token-4" value={tabsValue} tabId="1">
           <Typography variant="body-medium">Tab 2 content</Typography>
         </Tabs.TabPanel>
-        <Tabs.TabPanel className="n-p-token-4" value={tabsValue} tabId="2">
+        <Tabs.TabPanel className="p-token-4" value={tabsValue} tabId="2">
           <Typography variant="body-medium">Tab 3 content</Typography>
         </Tabs.TabPanel>
       </div>
@@ -452,23 +452,35 @@ const Component = () => {
   const { setActiveSpotlight } = useSpotlightContext();
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <OutlinedButton
         onClick={() => setActiveSpotlight(`test-target-1-${themeClassName}`)}
       >
         Start tour
       </OutlinedButton>
-      <SpotlightTarget id={`test-target-1-${themeClassName}`} hasPulse asChild>
+      <SpotlightTarget
+        id={`test-target-1-${themeClassName}`}
+        hasPulse
+        shouldRenderAsChild
+      >
         <FilledButton onClick={() => alert('Target 1 clicked')}>
           Target 1
         </FilledButton>
       </SpotlightTarget>
-      <SpotlightTarget id={`test-target-2-${themeClassName}`} hasPulse asChild>
+      <SpotlightTarget
+        id={`test-target-2-${themeClassName}`}
+        hasPulse
+        shouldRenderAsChild
+      >
         <FilledButton onClick={() => alert('Target 2 clicked')}>
           Target 2
         </FilledButton>
       </SpotlightTarget>
-      <SpotlightTarget id={`test-target-3-${themeClassName}`} hasPulse asChild>
+      <SpotlightTarget
+        id={`test-target-3-${themeClassName}`}
+        hasPulse
+        shouldRenderAsChild
+      >
         <FilledButton onClick={() => alert('Target 3 clicked')}>
           Target 3
         </FilledButton>
@@ -552,7 +564,7 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
@@ -560,7 +572,7 @@ const Component = (props: { isChromatic: boolean }) => {
         id={targetId}
         hasPulse={!props.isChromatic}
         indicatorVariant="border"
-        asChild
+        shouldRenderAsChild
       >
         <TextButton onClick={() => alert('Target button clicked')}>
           Target
@@ -623,11 +635,15 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
-      <SpotlightTarget id={targetId} hasPulse={!props.isChromatic} asChild>
+      <SpotlightTarget
+        id={targetId}
+        hasPulse={!props.isChromatic}
+        shouldRenderAsChild
+      >
         <TextButton onClick={() => alert('Target button clicked')}>
           Target
         </TextButton>
@@ -690,7 +706,7 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
@@ -698,7 +714,7 @@ const Component = (props: { isChromatic: boolean }) => {
         id={targetId}
         hasPulse={!props.isChromatic}
         indicatorVariant="border"
-        asChild
+        shouldRenderAsChild
       >
         <TextButton onClick={() => alert('Target button clicked')}>
           Target
@@ -758,14 +774,14 @@ const Component = (props: { isChromatic: boolean }) => {
   }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
 
   return (
-    <div className="n-flex n-justify-center n-gap-token-64">
+    <div className="flex justify-center gap-token-64">
       <FilledButton onClick={() => setActiveSpotlight(targetId)}>
         Activate Spotlight
       </FilledButton>
       <SpotlightTarget
         id={targetId}
         hasPulse={!props.isChromatic}
-        asChild
+        shouldRenderAsChild
         indicatorVariant="point"
         indicatorPlacement="top-right"
       >

package/skills/ndl-react/components/status-indicator.md

@@ -30,24 +30,24 @@ import { StatusIndicator, Typography } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
-      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+    <div className="flex gap-token-16">
+      <div className="flex flex-col items-center gap-token-8">
         <StatusIndicator variant="unknown" />
         <Typography variant="label">Unknown</Typography>
       </div>
-      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+      <div className="flex flex-col items-center gap-token-8">
         <StatusIndicator variant="success" />
         <Typography variant="label">Success</Typography>
       </div>
-      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+      <div className="flex flex-col items-center gap-token-8">
         <StatusIndicator variant="info" />
         <Typography variant="label">Info</Typography>
       </div>
-      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+      <div className="flex flex-col items-center gap-token-8">
         <StatusIndicator variant="warning" />
         <Typography variant="label">Warning</Typography>
       </div>
-      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+      <div className="flex flex-col items-center gap-token-8">
         <StatusIndicator variant="danger" />
         <Typography variant="label">Danger</Typography>
       </div>

package/skills/ndl-react/components/status-label.md

@@ -43,7 +43,7 @@ import { StatusLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16 n-flex-wrap">
+    <div className="flex gap-token-16 flex-wrap">
       <StatusLabel variant="default">Default</StatusLabel>
       <StatusLabel variant="info">Info</StatusLabel>
       <StatusLabel variant="success">Success</StatusLabel>
@@ -66,7 +66,7 @@ import { StatusLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16 n-flex-wrap">
+    <div className="flex gap-token-16 flex-wrap">
       <StatusLabel fill="filled">Filled</StatusLabel>
       <StatusLabel fill="outlined">Outlined</StatusLabel>
       <StatusLabel fill="semi-filled">Semi-filled</StatusLabel>
@@ -89,7 +89,7 @@ import { StatusLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center">
+    <div className="grid grid-cols-6 grid-rows-2 gap-token-16 items-center justify-items-center">
       <StatusLabel variant="default" hasIcon>
         Default
       </StatusLabel>

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

@@ -37,6 +37,7 @@ Import: `import { Tabs } from '@neo4j-ndl/react'`
 | `isDisabled` | `boolean` |  | `false` | Whether the tab is disabled |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |
+| `trailingContent` | `ReactNode` |  |  | Trailing content that will be rendered after the tab content. Badges belong here. |
 
 When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.
 
@@ -73,7 +74,7 @@ const Component = () => {
 
   return (
     <div>
-      <Tabs value={value} onChange={setValue} className="n-mb-token-8">
+      <Tabs value={value} onChange={setValue} className="mb-token-8">
         <Tabs.Tab id="0">Tab 1</Tabs.Tab>
         <Tabs.Tab id="1">Tab 2</Tabs.Tab>
         <Tabs.Tab id="2">Tab 3</Tabs.Tab>
@@ -109,10 +110,10 @@ const Component = () => {
 
   return (
     <div>
-      <Tabs value={value} onChange={setValue} className="n-mb-token-8">
+      <Tabs value={value} onChange={setValue} className="mb-token-8">
         <Tabs.Tab id="0">Tab 1</Tabs.Tab>
-        <Tabs.Tab id="1">
-          Tab 2 <Tabs.Badge>5</Tabs.Badge>
+        <Tabs.Tab id="1" trailingContent={<Tabs.Badge>5</Tabs.Badge>}>
+          Tab 2
         </Tabs.Tab>
         <Tabs.Tab id="2">Tab 3</Tabs.Tab>
       </Tabs>
@@ -147,7 +148,7 @@ const Component = () => {
 
   return (
     <div>
-      <Tabs value={value} onChange={setValue} className="n-mb-token-8">
+      <Tabs value={value} onChange={setValue} className="mb-token-8">
         <Tabs.Tab id="0">Tab 1</Tabs.Tab>
         <Tabs.Tab id="1">Tab 2</Tabs.Tab>
         <Tabs.Tab id="2" isDisabled={true}>
@@ -185,14 +186,14 @@ const Component = () => {
   const [filledValue, setFilledValue] = useState<TabValues>('0');
 
   return (
-    <div className="n-flex n-gap-token-8">
-      <div className="n-flex n-flex-col n-gap-token-32">
+    <div className="flex gap-token-8">
+      <div className="flex flex-col gap-token-32">
         <Typography variant="label">Underline (Default)</Typography>
         <div>
           <Tabs
             value={underlineValue}
             onChange={setUnderlineValue}
-            className="n-mb-token-8"
+            className="mb-token-8"
           >
             <Tabs.Tab id="0">Tab 1</Tabs.Tab>
             <Tabs.Tab id="1">Tab 2</Tabs.Tab>
@@ -210,14 +211,14 @@ const Component = () => {
         </div>
       </div>
 
-      <div className="n-flex n-flex-col n-gap-token-8">
+      <div className="flex flex-col gap-token-8">
         <Typography variant="label">Filled</Typography>
         <div>
           <Tabs
             value={filledValue}
             onChange={setFilledValue}
             fill="filled"
-            className="n-mb-token-8"
+            className="mb-token-8"
           >
             <Tabs.Tab id="0">Tab 1</Tabs.Tab>
             <Tabs.Tab id="1">Tab 2</Tabs.Tab>
@@ -253,8 +254,8 @@ const Component = () => {
   const [value, setValue] = useState<string>('0');
 
   return (
-    <div className="n-w-80">
-      <Tabs value={value} onChange={setValue} className="n-mb-token-8">
+    <div className="w-80">
+      <Tabs value={value} onChange={setValue} className="mb-token-8">
         <Tabs.Tab id="0">Tab 1</Tabs.Tab>
         <Tabs.Tab id="1">Tab 2</Tabs.Tab>
         <Tabs.Tab id="2">Tab 3</Tabs.Tab>
@@ -320,15 +321,15 @@ const Component = () => {
   const [largeValue, setLargeValue] = useState<TabValues>('0');
 
   return (
-    <div className="n-flex n-gap-token-8">
-      <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex gap-token-8">
+      <div className="flex flex-col gap-token-8">
         <Typography variant="label">Small Size</Typography>
-        <div className="n-w-fit">
+        <div className="w-fit">
           <Tabs
             value={smallValue}
             onChange={setSmallValue}
             size="small"
-            className="n-mb-token-8"
+            className="mb-token-8"
           >
             <Tabs.Tab id="0">Tab 1</Tabs.Tab>
             <Tabs.Tab id="1">Tab 2</Tabs.Tab>
@@ -352,13 +353,13 @@ const Component = () => {
         </div>
       </div>
 
-      <div className="n-flex n-flex-col n-gap-token-8">
+      <div className="flex flex-col gap-token-8">
         <Typography variant="label">Large Size (Default)</Typography>
         <Tabs
           value={largeValue}
           onChange={setLargeValue}
           size="large"
-          className="n-mb-token-8"
+          className="mb-token-8"
         >
           <Tabs.Tab id="0">Tab 1</Tabs.Tab>
           <Tabs.Tab id="1">Tab 2</Tabs.Tab>
@@ -400,8 +401,8 @@ const Component = () => {
   const [value, setValue] = useState<TabValues>('database');
 
   return (
-    <div className="n-mt-5">
-      <Tabs value={value} onChange={setValue} className="n-mb-token-8">
+    <div className="mt-5">
+      <Tabs value={value} onChange={setValue} className="mb-token-8">
         <Tabs.Tab id="database" description="Database">
           <CircleStackIconOutline />
         </Tabs.Tab>

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

@@ -29,7 +29,7 @@ import { Tag } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16 n-items-start">
+    <div className="flex gap-token-16 items-start">
       <Tag
         size="small"
         onClick={() => {
@@ -70,7 +70,7 @@ import { Tag } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Tag
         type="default"
         onClick={() => {

package/skills/ndl-react/components/text-area.md

@@ -168,7 +168,7 @@ import { TextArea } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-6">
+    <div className="flex gap-6">
       <TextArea label="Small text area" size="small" />
       <TextArea label="Medium text area" size="medium" />
       <TextArea label="Large text area" size="large" />

package/skills/ndl-react/components/text-input.md

@@ -257,7 +257,7 @@ import { CalendarDaysIconOutline } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <TextInput
         label="Default loading"
         isLoading
@@ -327,9 +327,9 @@ import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
   return (
     <TextInput
+      showRequiredOrOptionalLabel
       label="Label"
       helpText="Help text"
-      showRequiredOrOptionalLabel
       htmlAttributes={{ id: 'text-input' }}
     />
   );
@@ -426,7 +426,7 @@ import { TextInput } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <TextInput
         label="Small Input"
         size="small"