@neo4j-ndl/react 4.21.2-alpha.c774957.15.1 → 4.22.0

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

@@ -55,19 +55,19 @@ const Component = () => {
         <SelectIconButton description="Select" size="small" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Small</Typography>
+        <Typography variant="label"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="medium" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Medium</Typography>
+        <Typography variant="label"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="large" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Large</Typography>
+        <Typography variant="label"> Large</Typography>
       </div>
     </div>
   );
@@ -96,13 +96,13 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Disabled</Typography>
+        <Typography variant="label"> Disabled</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="small" isOpen={true}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Active</Typography>
+        <Typography variant="label"> Active</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton
@@ -114,7 +114,7 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="title-4"> Loading</Typography>
+        <Typography variant="label"> Loading</Typography>
       </div>
     </div>
   );

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

@@ -31,23 +31,23 @@ const Component = () => {
     <div className="n-flex n-gap-token-16">
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="unknown" />
-        <Typography variant="title-4">Unknown</Typography>
+        <Typography variant="label">Unknown</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="success" />
-        <Typography variant="title-4">Success</Typography>
+        <Typography variant="label">Success</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="info" />
-        <Typography variant="title-4">Info</Typography>
+        <Typography variant="label">Info</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="warning" />
-        <Typography variant="title-4">Warning</Typography>
+        <Typography variant="label">Warning</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="danger" />
-        <Typography variant="title-4">Danger</Typography>
+        <Typography variant="label">Danger</Typography>
       </div>
     </div>
   );

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

@@ -185,7 +185,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-32">
-        <Typography variant="title-4">Underline (Default)</Typography>
+        <Typography variant="label">Underline (Default)</Typography>
         <div>
           <Tabs
             value={underlineValue}
@@ -209,7 +209,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="title-4">Filled</Typography>
+        <Typography variant="label">Filled</Typography>
         <div>
           <Tabs
             value={filledValue}
@@ -320,7 +320,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="title-4">Small Size</Typography>
+        <Typography variant="label">Small Size</Typography>
         <div className="n-w-fit">
           <Tabs
             value={smallValue}
@@ -351,7 +351,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="title-4">Large Size (Default)</Typography>
+        <Typography variant="label">Large Size (Default)</Typography>
         <Tabs
           value={largeValue}
           onChange={setLargeValue}

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

@@ -11,7 +11,7 @@ Import: `import { Typography } from '@neo4j-ndl/react'`
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` |  |  | Content displayed inside the component |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
-| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text.  `label` is deprecated: it is identical to `title-4`, which should be used instead. |
+| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text. |
 
 ## Examples