@transferwise/components 0.0.0-experimental-9956441 → 0.0.0-experimental-f2cd6e1

package/build/divider/Divider.js

@@ -8,12 +8,12 @@ const Divider = ({
   className,
   isContent = false,
   testId,
-  variant = 'section',
+  level = 'section',
   ...props
 }) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
+  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
   const commonProps = {
-    className: clsx.clsx('wds-Divider', variantClass, className),
+    className: clsx.clsx('wds-Divider', levelClass, className),
     'data-testid': testId
   };
   const divProps = {

package/build/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  variant?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,SAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,cAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}
+{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  level?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  level = 'section',\n  ...props\n}) => {\n  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', levelClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;;;AAsCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,KAAK,CAAE,CAAA,GAAG,EAAE,CAAA;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,SAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,cAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}

package/build/divider/Divider.mjs

@@ -6,12 +6,12 @@ const Divider = ({
   className,
   isContent = false,
   testId,
-  variant = 'section',
+  level = 'section',
   ...props
 }) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
+  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
   const commonProps = {
-    className: clsx('wds-Divider', variantClass, className),
+    className: clsx('wds-Divider', levelClass, className),
     'data-testid': testId
   };
   const divProps = {

package/build/divider/Divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  variant?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}
+{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  level?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  level = 'section',\n  ...props\n}) => {\n  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', levelClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AAsCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,KAAK,CAAE,CAAA,GAAG,EAAE,CAAA;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}

package/build/types/divider/Divider.d.ts

@@ -19,9 +19,14 @@ export interface DividerProps {
      * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
      * @default 'section'
      */
-    variant?: 'section' | 'subsection' | 'content';
+    level?: 'section' | 'subsection' | 'content';
 }
 /**
+ * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role="presentation">`.
+ * @param {string} [className] - Optional class names for adding custom styling to the divider.
+ * @param {string} [testId] - Provides a `data-testid` for testing frameworks.
+ * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.
+ *
  * @see {@link Divider} for further information.
  * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
  */

package/build/types/divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAChD;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAoB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAC9C;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAoB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9956441",
+  "version": "0.0.0-experimental-f2cd6e1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,8 +94,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.22.0",
     "@wise/components-theming": "1.6.1",
+    "@transferwise/neptune-css": "14.22.0",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/divider/Divider.accessibility.docs.mdx

@@ -35,18 +35,18 @@ Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break
 
 <br />
 
-## Variants
+## Levels
 
-The Divider supports variants like “section”, “subsection”, or “content” to visually change the separation style:
+The Divider supports levels like “section”, “subsection”, or “content” to visually change the separation style:
 
 <Source
   dark
   code={`
-// A few variant examples
+// A few level examples
 <>
-  <Divider variant="section" />
-  <Divider variant="subsection" />
-  <Divider variant="content" />
+  <Divider level="section" />
+  <Divider level="subsection" />
+  <Divider level="content" />
 </>
 `}
 />

package/src/divider/Divider.spec.tsx

@@ -47,16 +47,16 @@ describe('Divider', () => {
     expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
   });
 
-  it('should apply the "content" variant styling', () => {
-    const props: DividerProps = { variant: 'content' };
+  it('should apply the "content" level styling', () => {
+    const props: DividerProps = { level: 'content' };
     expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--content');
 
     rerenderDivider(props);
     expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider', 'wds-Divider--content');
   });
 
-  it('should apply the "subsection" variant styling', () => {
-    const props: DividerProps = { variant: 'subsection' };
+  it('should apply the "subsection" level styling', () => {
+    const props: DividerProps = { level: 'subsection' };
     expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
 
     rerenderDivider(props);

package/src/divider/Divider.story.tsx

@@ -15,14 +15,14 @@ const withContainer = (Story: any) => (
  * Not all stories need access to all controls as it causes unnecessary UI noise.
  */
 const hideControls = (args: string[]) => {
-  const hidden = ['variant', 'as', 'className', 'testId', ...args];
+  const hidden = ['level', 'as', 'className', 'testId', ...args];
 
   return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
 };
 
 /**
  * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
- * Variants allow customization for different visual separation needs.
+ * levels allow customization for different visual separation needs.
  *
  * For more details, please refer to the [design documentation](https://wise.design/components/divider).
  *
@@ -37,10 +37,10 @@ const meta: Meta<typeof Divider> = {
     actions: { argTypesRegex: null },
   },
   argTypes: {
-    variant: {
+    level: {
       control: 'select',
       options: ['section', 'subsection', 'content'],
-      description: 'Choose the Divider variant.',
+      description: 'Choose the Divider level.',
       table: {
         category: 'Appearance',
         type: { summary: 'string' },
@@ -75,7 +75,7 @@ const meta: Meta<typeof Divider> = {
     isContent: false,
     className: '',
     testId: '',
-    variant: 'section',
+    level: 'section',
   },
 };
 export default meta;
@@ -84,7 +84,7 @@ type Story = StoryObj<typeof Divider>;
 
 export const Playground: Story = {
   args: {
-    variant: 'section',
+    level: 'section',
   },
   tags: ['!autodocs'],
 };
@@ -94,12 +94,12 @@ export const Playground: Story = {
  * each designed to visually separate or group content. <br />
  * [Design documentation](https://wise.design/components/divider)
  */
-export const Variant: Story = {
+export const Level: Story = {
   argTypes: {
     ...hideControls(['testId', 'className', 'isContent']),
   },
   args: {
-    variant: 'section',
+    level: 'section',
   },
 };
 
@@ -108,7 +108,7 @@ export const Variant: Story = {
  */
 export const ContentDivider: Story = {
   argTypes: {
-    ...hideControls(['variant', 'testId', 'className']),
+    ...hideControls(['level', 'testId', 'className']),
   },
   args: {
     isContent: true,
@@ -119,14 +119,14 @@ export const AllVariants: Story = {
   render: function Render() {
     return (
       <>
-        <Divider variant="section" />
-        <Divider variant="subsection" />
-        <Divider variant="content" />
+        <Divider level="section" />
+        <Divider level="subsection" />
+        <Divider level="content" />
       </>
     );
   },
   argTypes: {
-    ...hideControls(['variant', 'testId', 'className', 'isContent']),
+    ...hideControls(['level', 'testId', 'className', 'isContent']),
   },
   tags: ['!autodocs'],
 };

package/src/divider/Divider.tsx

@@ -24,10 +24,15 @@ export interface DividerProps {
    * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
    * @default 'section'
    */
-  variant?: 'section' | 'subsection' | 'content';
+  level?: 'section' | 'subsection' | 'content';
 }
 
 /**
+ * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role="presentation">`.
+ * @param {string} [className] - Optional class names for adding custom styling to the divider.
+ * @param {string} [testId] - Provides a `data-testid` for testing frameworks.
+ * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.
+ *
  * @see {@link Divider} for further information.
  * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
  */
@@ -35,13 +40,13 @@ const Divider: FunctionComponent<DividerProps> = ({
   className,
   isContent = false,
   testId,
-  variant = 'section',
+  level = 'section',
   ...props
 }) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
+  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
 
   const commonProps = {
-    className: clsx('wds-Divider', variantClass, className),
+    className: clsx('wds-Divider', levelClass, className),
     'data-testid': testId,
   };