@transferwise/components 0.0.0-experimental-9956441 → 0.0.0-experimental-47c6fe8

package/src/dateLookup/dateHeader/DateHeader.tsx

@@ -1,13 +1,13 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import Chevron from '../../chevron';
-import { Position, Size, Typography } from '../../common';
+import { Typography } from '../../common';
 import { useLayout } from '../../common/hooks';
 import Title from '../../title';
 import messages from '../DateLookup.messages';
-
-const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
+import Button from '../../button/Button';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
+import IconButton from '../../iconButton';
 
 interface DateHeaderProps {
   label?: string;
@@ -29,44 +29,42 @@ const DateHeader: React.FC<DateHeaderProps> = ({
   return (
     <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
       <div className="pull-left-single-direction">
-        <button
-          type="button"
-          className={`d-inline-flex ${buttonClasses}`}
+        <IconButton
+          size={40}
+          priority="minimal"
+          className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
           onClick={onPreviousClick}
         >
-          <Chevron
-            orientation={Position.LEFT}
-            className="left-single-direction"
-            size={Size.MEDIUM}
-          />
-        </button>
+          <ChevronLeft className="left-single-direction" />
+        </IconButton>
       </div>
       {label && (
         <Title type={Typography.TITLE_BODY} className="tw-date-lookup-header-current-container">
-          <button
+          <Button
+            v2
+            size="md"
             type="button"
-            className={`tw-date-lookup-header-current ${buttonClasses}`}
+            priority="tertiary"
+            className="tw-date-lookup-header-current"
             aria-label={intl.formatMessage(messages.goTo20YearView)}
+            addonEnd={{ type: 'icon', value: <ChevronDown /> }}
             onClick={onLabelClick}
           >
             {label}
-          </button>
+          </Button>
         </Title>
       )}
       <div className="pull-right-single-direction">
-        <button
-          type="button"
-          className={`d-inline-flex ${buttonClasses}`}
+        <IconButton
+          size={40}
+          className="d-inline-flex"
           aria-label={`${useIntl().formatMessage(messages.next)} ${dateMode}`}
+          priority="minimal"
           onClick={onNextClick}
         >
-          <Chevron
-            orientation={Position.RIGHT}
-            className="right-single-direction"
-            size={Size.MEDIUM}
-          />
-        </button>
+          <ChevronRight className="right-single-direction" />
+        </IconButton>
       </div>
     </div>
   );

package/src/i18n/nl.json

@@ -0,0 +1,73 @@
+{
+  "neptune.Button.loadingAriaLabel": "laden",
+  "neptune.Chips.ariaLabel": "{choice} wissen",
+  "neptune.ClearButton.ariaLabel": "Wissen",
+  "neptune.CloseButton.ariaLabel": "Sluiten",
+  "neptune.DateInput.day.label": "Dag",
+  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.month.label": "Maand",
+  "neptune.DateInput.year.label": "Jaar",
+  "neptune.DateInput.year.placeholder": "JJJJ",
+  "neptune.DateLookup.day": "dag",
+  "neptune.DateLookup.goTo20YearView": "Naar 20-jaarsoverzicht",
+  "neptune.DateLookup.month": "maand",
+  "neptune.DateLookup.next": "volgende",
+  "neptune.DateLookup.previous": "vorige",
+  "neptune.DateLookup.selected": "geselecteerd",
+  "neptune.DateLookup.twentyYears": "20 jaar",
+  "neptune.DateLookup.year": "jaar",
+  "neptune.FlowNavigation.back": "terug naar vorige stap",
+  "neptune.Info.ariaLabel": "Meer informatie",
+  "neptune.Label.optional": "(Optioneel)",
+  "neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
+  "neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
+  "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
+  "neptune.Select.searchPlaceholder": "Zoeken...",
+  "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
+  "neptune.SelectOption.action.label": "Kiezen",
+  "neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
+  "neptune.StatusIcon.iconLabel.error": "Fout:",
+  "neptune.StatusIcon.iconLabel.information": "Informatie:",
+  "neptune.StatusIcon.iconLabel.pending": "In behandeling:",
+  "neptune.StatusIcon.iconLabel.success": "Gelukt:",
+  "neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
+  "neptune.Summary.statusDone": "Item klaar",
+  "neptune.Summary.statusNotDone": "Item te doen",
+  "neptune.Summary.statusPending": "Item in behandeling",
+  "neptune.Table.actionHeader": "Actie",
+  "neptune.Table.emptyData": "Geen resultaten gevonden",
+  "neptune.Table.loaded": "Tabelgegevens zijn geladen",
+  "neptune.Table.loading": "Tabelgegevens worden geladen",
+  "neptune.Table.refreshPage": "Pagina vernieuwen",
+  "neptune.Upload.csButtonText": "Nog een bestand uploaden?",
+  "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
+  "neptune.Upload.csSuccessText": "Uploaden voltooid!",
+  "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
+  "neptune.Upload.psButtonText": "Annuleren",
+  "neptune.Upload.psProcessingText": "Uploaden...",
+  "neptune.Upload.retry": "Opnieuw proberen",
+  "neptune.Upload.usButtonText": "Of selecteer een bestand",
+  "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
+  "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
+  "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
+  "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",
+  "neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
+  "neptune.UploadButton.uploadFile": "Bestand uploaden",
+  "neptune.UploadButton.uploadFiles": "Bestanden uploaden",
+  "neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
+  "neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
+  "neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
+  "neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",
+  "neptune.UploadInput.fileIsTooLarge": "Bestand is te groot",
+  "neptune.UploadInput.fileTypeNotSupported": "Bestandstype niet ondersteund",
+  "neptune.UploadInput.maximumFilesAlreadyUploaded": "Deze upload is mislukt omdat we maar {maxFilesAllowed} bestanden tegelijk kunnen accepteren.",
+  "neptune.UploadItem.deleting": "Verwijderen...",
+  "neptune.UploadItem.removeFile": "Bestand {filename} verwijderen",
+  "neptune.UploadItem.uploaded": "Geüpload",
+  "neptune.UploadItem.uploadedFile": "Geüpload bestand",
+  "neptune.UploadItem.uploading": "Uploaden...",
+  "neptune.UploadItem.uploadingFailed": "Uploaden mislukt"
+}

package/src/index.ts

@@ -31,7 +31,6 @@ export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
-export type { DividerProps } from './divider';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -144,7 +143,6 @@ export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';
 export { default as Display } from './display';
-export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';

package/src/main.css

@@ -2009,11 +2009,6 @@ button.np-option {
 .np-theme-personal .tw-date-lookup-menu td {
   border: none;
 }
-.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
-.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
 .np-date-trigger {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2286,30 +2281,6 @@ button.np-option {
     padding: var(--size-24);
   }
 }
-.wds-Divider {
-  --Divider-border-width: var(--size-4);
-  --Divider-border-color: var(--color-border-neutral);
-  --Divider-border-style: solid;
-  --Divider-dash-length: var(--size-4);
-  --Divider-dash-spacing: var(--size-4);
-  border-top: 4px solid rgba(0,0,0,0.10196);
-  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  height: 4px;
-  height: var(--Divider-border-width);
-  width: 100%;
-}
-.wds-Divider--content {
-  border-top: none;
-  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
-  height: var(--Divider-border-width);
-}
-.wds-Divider--content,
-.wds-Divider--subsection {
-  --Divider-border-width: 1px;
-}
 .np-dropfade,
 .np-dropfade-enter {
   opacity: 0;

package/src/main.less

@@ -30,7 +30,6 @@
 @import "./definitionList/DefinitionList.less";
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
-@import "./divider/Divider.less";
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";

package/build/divider/Divider.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-const Divider = ({
-  className,
-  isContent = false,
-  testId,
-  variant = 'section',
-  ...props
-}) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
-  const commonProps = {
-    className: clsx.clsx('wds-Divider', variantClass, className),
-    'data-testid': testId
-  };
-  const divProps = {
-    ...commonProps,
-    role: 'presentation'
-  };
-  return isContent ? /*#__PURE__*/jsxRuntime.jsx("hr", {
-    ...commonProps,
-    ...props
-  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-    ...divProps,
-    ...props
-  });
-};
-
-module.exports = Divider;
-//# sourceMappingURL=Divider.js.map

package/build/divider/Divider.js.map

@@ -1 +0,0 @@
-{"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;;;;"}

package/build/divider/Divider.mjs

@@ -1,31 +0,0 @@
-import { clsx } from 'clsx';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-
-const Divider = ({
-  className,
-  isContent = false,
-  testId,
-  variant = 'section',
-  ...props
-}) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
-  const commonProps = {
-    className: clsx('wds-Divider', variantClass, className),
-    'data-testid': testId
-  };
-  const divProps = {
-    ...commonProps,
-    role: 'presentation'
-  };
-  return isContent ? /*#__PURE__*/jsx("hr", {
-    ...commonProps,
-    ...props
-  }) : /*#__PURE__*/jsx("div", {
-    ...divProps,
-    ...props
-  });
-};
-
-export { Divider as default };
-//# sourceMappingURL=Divider.mjs.map

package/build/divider/Divider.mjs.map

@@ -1 +0,0 @@
-{"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;;;;"}

package/build/styles/divider/Divider.css

@@ -1,24 +0,0 @@
-.wds-Divider {
-  --Divider-border-width: var(--size-4);
-  --Divider-border-color: var(--color-border-neutral);
-  --Divider-border-style: solid;
-  --Divider-dash-length: var(--size-4);
-  --Divider-dash-spacing: var(--size-4);
-  border-top: 4px solid rgba(0,0,0,0.10196);
-  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  height: 4px;
-  height: var(--Divider-border-width);
-  width: 100%;
-}
-.wds-Divider--content {
-  border-top: none;
-  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
-  height: var(--Divider-border-width);
-}
-.wds-Divider--content,
-.wds-Divider--subsection {
-  --Divider-border-width: 1px;
-}

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

@@ -1,30 +0,0 @@
-import { FunctionComponent } from 'react';
-export interface DividerProps {
-    /**
-     * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
-     * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
-     * @default false
-     */
-    isContent?: boolean;
-    /**
-     * Appends additional class names to style the `Divider`.
-     */
-    className?: string;
-    /**
-     * Provides a `data-testid` attribute for testing.
-     */
-    testId?: string;
-    /**
-     * Alters the visual style of the divider, accommodating different types
-     * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
-     * @default 'section'
-     */
-    variant?: 'section' | 'subsection' | 'content';
-}
-/**
- * @see {@link Divider} for further information.
- * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
- */
-declare const Divider: FunctionComponent<DividerProps>;
-export default Divider;
-//# sourceMappingURL=Divider.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,3 +0,0 @@
-export { default } from './Divider';
-export type { DividerProps } from './Divider';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

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

@@ -1,61 +0,0 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
-import { NavigationOption } from '..';
-import { Bulb } from '@transferwise/icons';
-
-<Meta title="Layouts/Divider/Accessibility" />
-
-# Accessibility
-
-A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
-
-<NavigationOption
-  media={<Bulb size={24} />}
-  title="Design guidance"
-  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
-  href="https://wise.design/components/divider"
-/>
-
-<br />
-<br />
-
-## Using `<hr />` vs `<div />`
-
-By default, our Divider is rendered as `<div role="presentation" />`. However, you can optionally set `isContent` to true, which many screen readers interpret as a “separator.”
-
-<Source dark code={`
-// By default: non-semantic divider
-<Divider isContent={false} />
-
-// Alternatively, to provide a semantic HR:
-
-<Divider isContent={true} />
-`}/>
-
-Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break or separation has occurred. However, sometimes you may not want an audible separation. In that case, using `<div>` (which omits semantic meaning) might be preferable.
-
-<br />
-
-## Variants
-
-The Divider supports variants like “section”, “subsection”, or “content” to visually change the separation style:
-
-<Source
-  dark
-  code={`
-// A few variant examples
-<>
-  <Divider variant="section" />
-  <Divider variant="subsection" />
-  <Divider variant="content" />
-</>
-`}
-/>
-
-Screen readers generally ignore these visual styling changes unless you explicitly provide more context (e.g., additional text or heading tags).
-
-<br />
-
-**Additional resources:**
-
-1. [WAI-ARIA Authoring Practices: Separator Role](https://www.w3.org/TR/wai-aria-practices-1.2/#separator)
-2. [MDN Web Docs: &lt;hr /&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)

package/src/divider/Divider.css

@@ -1,24 +0,0 @@
-.wds-Divider {
-  --Divider-border-width: var(--size-4);
-  --Divider-border-color: var(--color-border-neutral);
-  --Divider-border-style: solid;
-  --Divider-dash-length: var(--size-4);
-  --Divider-dash-spacing: var(--size-4);
-  border-top: 4px solid rgba(0,0,0,0.10196);
-  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  height: 4px;
-  height: var(--Divider-border-width);
-  width: 100%;
-}
-.wds-Divider--content {
-  border-top: none;
-  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
-  height: var(--Divider-border-width);
-}
-.wds-Divider--content,
-.wds-Divider--subsection {
-  --Divider-border-width: 1px;
-}

package/src/divider/Divider.less

@@ -1,31 +0,0 @@
-.wds-Divider {
-    --Divider-border-width: var(--size-4);
-    --Divider-border-color: var(--color-border-neutral);
-    --Divider-border-style: solid;
-    --Divider-dash-length: var(--size-4);
-    --Divider-dash-spacing: var(--size-4);
-
-    border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-    height: var(--Divider-border-width);
-    width: 100%;
-
-    &--content {
-        border-top: none;
-        background: repeating-linear-gradient(
-            to right,
-            var(--Divider-border-color),
-            var(--Divider-border-color) var(--Divider-dash-length),
-            transparent var(--Divider-dash-length),
-            transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing))
-        );
-        height: var(--Divider-border-width);
-    }
-
-    &--content,
-    &--subsection {
-        --Divider-border-width: 1px;
-    }
-}

package/src/divider/Divider.spec.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import Divider, { DividerProps } from './Divider';
-
-describe('Divider', () => {
-  const defaultProps: DividerProps = {
-    testId: 'test-divider',
-  };
-
-  let rerenderDivider: (props?: DividerProps) => void;
-
-  beforeEach(() => {
-    const { rerender } = render(<Divider {...defaultProps} />);
-    rerenderDivider = (props?: DividerProps) => {
-      rerender(<Divider {...defaultProps} {...props} />);
-    };
-  });
-
-  const renderDivider = (props: Partial<DividerProps> = {}) => {
-    return render(<Divider {...props} />);
-  };
-
-  it('should render the Divider component', () => {
-    expect(screen.getByTestId('test-divider')).toBeInTheDocument();
-    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider');
-  });
-
-  it('should render as a semantic <hr> when `isContent` is true', () => {
-    const props: DividerProps = { isContent: true };
-    rerenderDivider(props);
-
-    expect(screen.getByTestId('test-divider')).not.toHaveAttribute('role', 'presentation');
-  });
-
-  it('should render as a non-semantic <div> when `isContent` is false', () => {
-    const props: DividerProps = { isContent: false };
-    rerenderDivider(props);
-
-    expect(screen.getByTestId('test-divider')).toHaveAttribute('role', 'presentation');
-  });
-
-  it('should apply custom class names when provided', () => {
-    const props: DividerProps = { className: 'custom-class' };
-    expect(screen.getByTestId('test-divider')).not.toHaveClass('custom-class');
-
-    rerenderDivider(props);
-    expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
-  });
-
-  it('should apply the "content" variant styling', () => {
-    const props: DividerProps = { variant: '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' };
-    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
-
-    rerenderDivider(props);
-    expect(screen.getByTestId('test-divider')).toHaveClass(
-      'wds-Divider',
-      'wds-Divider--subsection',
-    );
-  });
-});