@transferwise/components 0.0.0-experimental-b77dac7 → 0.0.0-experimental-fa3aa98

package/src/main.css

@@ -27269,46 +27269,12 @@ a[data-toggle="tooltip"] {
   pointer-events: auto;
 }
 
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  border: none;
-  background-color: inherit;
-}
-
-.tw-date-lookup-calendar thead {
-  background-color: transparent;
-  background-color: initial;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-
-.tw-date-lookup-calendar > tbody > tr > td {
-  border: none;
-  padding: 4px;
-  padding: var(--size-4);
-}
-
-@media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td {
-    padding: 0;
-  }
-}
-
-.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
-  padding: 1px;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td button {
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
-  color: #0097c7;
-  color: var(--color-content-accent);
   border: transparent;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -27320,12 +27286,92 @@ a[data-toggle="tooltip"] {
 }
 
 @media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td button {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
     padding: 0;
   }
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
+.wds-Calendar__option--day:focus,
+.wds-Calendar__option--month:focus,
+.wds-Calendar__option--year:focus {
+  background-color: var(--color-background-screen-hover);
+}
+
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+
+.wds-Calendar__option--day {
   height: 40px;
   height: var(--size-40);
   border-radius: 9999px;
@@ -27340,19 +27386,53 @@ a[data-toggle="tooltip"] {
   justify-content: center;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+.wds-Calendar__option--day.today {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  padding: 4px;
+  padding: var(--size-4);
+}
+
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td {
+    padding: 0;
+  }
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:has(.wds-Calendar__option--day) {
+  padding: 1px;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus:not(.disabled):not([aria-disabled="true"]),
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-background-screen-hover);
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active:not([aria-disabled="true"]) {
   background-color: var(--color-interactive-primary);
   color: var(--color-interactive-contrast);
 }
@@ -28611,36 +28691,6 @@ button.np-option {
     margin-bottom: 8px;
     margin-bottom: var(--size-8);
   }
-  .tw-definition-list.tw-definition-list--horizontal-right-aligned {
-    display: grid;
-    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
-    grid-column-gap: 52px;
-    grid-column-gap: var(--size-52);
-    -moz-column-gap: 52px;
-         column-gap: 52px;
-    -moz-column-gap: var(--size-52);
-         column-gap: var(--size-52);
-    justify-content: space-between;
-  }
-  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
-  }
-  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
-    max-width: none;
-    min-width: 0;
-    word-wrap: anywhere;
-    margin-right: 0;
-  }
-  [dir="rtl"] .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
-    margin-left: 0;
-    margin-right: 0;
-    margin-right: initial;
-  }
-  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dd {
-    min-width: 0;
-  }
 }
 
 .np-theme-personal .tw-definition-list dt {

package/build/Calendar/tableLink/TableLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,yBAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,yBAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/Calendar/tableLink/TableLink.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/types/Calendar/tableLink/TableLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/TableLink.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,GAAI,gFAUhB,cAAc,gCA8ChB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/Calendar/tableLink/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/src/DefinitionList/_stories/DefinitionList.test.story.tsx

@@ -1,168 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { expect } from 'storybook/test';
-
-import { Layout } from '../../common';
-
-import DefinitionList, { type DefinitionListDefinition } from '..';
-
-const longValues = {
-  amount: '1,234,567.89 GBP from your Wise Business account ending in 4821',
-  arrival: 'Tuesday, 14 July 2026 at 18:30 Eastern European Summer Time',
-  method: 'Business account ending in 4821 · Manual bank transfer',
-  recipients: 'Thirty-two recipients across twelve destination currencies',
-};
-
-const longTitles = {
-  amount: "Total amount we'll convert before sending this batch payment",
-  arrival: 'Estimated arrival time for all recipients in this batch',
-  method: 'Payment method used to fund this batch transfer',
-  recipients: 'Number of recipients included in this batch payment',
-};
-
-const longTitlesLongValues: DefinitionListDefinition[] = [
-  { key: 'amount', title: longTitles.amount, value: longValues.amount },
-  { key: 'arrival', title: longTitles.arrival, value: longValues.arrival },
-  { key: 'method', title: longTitles.method, value: longValues.method },
-  { key: 'recipients', title: longTitles.recipients, value: longValues.recipients },
-];
-
-const longTitlesShortValues: DefinitionListDefinition[] = [
-  { key: 'amount', title: longTitles.amount, value: '1,234.56 GBP' },
-  { key: 'arrival', title: longTitles.arrival, value: 'Today' },
-  { key: 'method', title: longTitles.method, value: 'Bank transfer' },
-  { key: 'recipients', title: longTitles.recipients, value: '32' },
-];
-
-const shortTitlesLongValues: DefinitionListDefinition[] = [
-  { key: 'amount', title: 'Amount', value: longValues.amount },
-  { key: 'arrival', title: 'Arrival', value: longValues.arrival },
-  { key: 'method', title: 'Method', value: longValues.method },
-  { key: 'recipients', title: 'Recipients', value: longValues.recipients },
-];
-
-const mixedContentLengths: DefinitionListDefinition[] = [
-  { key: 'ticket-regression', title: "Total amount we'll convert", value: '1,234.56 GBP' },
-  { key: 'short-short', title: 'Fees', value: '12.34 GBP' },
-  { key: 'long-short', title: longTitles.arrival, value: 'Today' },
-  { key: 'short-long', title: 'Method', value: longValues.method },
-  { key: 'long-long', title: longTitles.recipients, value: longValues.recipients },
-  {
-    key: 'styled-content',
-    title: <strong>Current available balance before this payment</strong>,
-    value: <strong>98,765.43 GBP</strong>,
-  },
-];
-
-type TestCaseProps = {
-  definitions: DefinitionListDefinition[];
-  label: string;
-  width?: number;
-};
-
-const TestCase = ({ definitions, label, width = 640 }: TestCaseProps) => (
-  <section style={{ maxWidth: '100%', width }}>
-    <h2 style={{ fontSize: 16, margin: '0 0 var(--size-16)' }}>{label}</h2>
-    <DefinitionList definitions={definitions} layout={Layout.HORIZONTAL_RIGHT_ALIGNED} />
-  </section>
-);
-
-const meta = {
-  component: DefinitionList,
-  parameters: { controls: { disable: true } },
-  tags: ['!autodocs', '!manifest'],
-  title: 'Typography/DefinitionList/Tests',
-} satisfies Meta<typeof DefinitionList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const assertSharedColumnBoundary = async (canvasElement: HTMLElement) => {
-  const lists = [
-    ...canvasElement.querySelectorAll<HTMLElement>('.tw-definition-list--horizontal-right-aligned'),
-  ];
-
-  await expect(lists.length).toBeGreaterThan(0);
-
-  for (const list of lists) {
-    const rows = [...list.querySelectorAll<HTMLElement>('.tw-definition-list__item')];
-    const columns = rows.map((row) => ({
-      row,
-      title: row.querySelector<HTMLElement>('dt'),
-      value: row.querySelector<HTMLElement>('dd'),
-    }));
-
-    await expect(columns.every(({ title, value }) => title && value)).toBe(true);
-
-    const horizontalColumns = columns.filter(({ row }) =>
-      ['flex', 'grid'].includes(getComputedStyle(row).display),
-    );
-
-    if (horizontalColumns.length > 0) {
-      const titleRects = horizontalColumns.map(({ title }) => title?.getBoundingClientRect());
-      const valueRects = horizontalColumns.map(({ value }) => value?.getBoundingClientRect());
-      const isRtl = getComputedStyle(list).direction === 'rtl';
-
-      if (isRtl) {
-        const valueColumnEnd = Math.max(...valueRects.map((rect) => rect?.right ?? 0));
-        const titleColumnStart = Math.min(
-          ...titleRects.map((rect) => rect?.left ?? Number.POSITIVE_INFINITY),
-        );
-
-        await expect(valueColumnEnd).toBeLessThanOrEqual(titleColumnStart + 1);
-        await expect(titleColumnStart - valueColumnEnd).toBeGreaterThanOrEqual(51);
-      } else {
-        const titleColumnEnd = Math.max(...titleRects.map((rect) => rect?.right ?? 0));
-        const valueColumnStart = Math.min(
-          ...valueRects.map((rect) => rect?.left ?? Number.POSITIVE_INFINITY),
-        );
-
-        await expect(titleColumnEnd).toBeLessThanOrEqual(valueColumnStart + 1);
-        await expect(valueColumnStart - titleColumnEnd).toBeGreaterThanOrEqual(51);
-      }
-    } else {
-      for (const { title, value } of columns) {
-        if (title && value) {
-          const titleEnd = title.getBoundingClientRect().bottom;
-          const valueStart = value.getBoundingClientRect().top;
-
-          await expect(titleEnd).toBeLessThanOrEqual(valueStart + 1);
-        }
-      }
-    }
-
-    for (const { title, value } of columns) {
-      if (title && value) {
-        await expect(title.scrollWidth).toBeLessThanOrEqual(title.clientWidth);
-        await expect(value.scrollWidth).toBeLessThanOrEqual(value.clientWidth);
-      }
-    }
-  }
-};
-
-const verifySharedColumnBoundary: NonNullable<Story['play']> = async ({ canvasElement, step }) => {
-  await step('titles and values stay inside separate shared columns', async () => {
-    await assertSharedColumnBoundary(canvasElement);
-  });
-};
-
-export const HORIZONTAL_RIGHT_ALIGNED: Story = {
-  name: 'HORIZONTAL_RIGHT_ALIGNED',
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
-      <TestCase
-        definitions={longTitlesLongValues}
-        label="Long titles with long values"
-        width={720}
-      />
-      <TestCase definitions={shortTitlesLongValues} label="All short titles with long values" />
-      <TestCase definitions={longTitlesShortValues} label="All long titles with short values" />
-      <TestCase
-        definitions={mixedContentLengths}
-        label="Mixed title and value lengths"
-        width={520}
-      />
-    </div>
-  ),
-  play: verifySharedColumnBoundary,
-};