@transferwise/components 46.106.0 → 46.107.0

package/build/actionOption/ActionOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n  AriaLabelProperty,\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n  | PriorityPrimary\n  | PrioritySecondary\n  | PriorityTertiary\n  | 'secondary-send';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  additionalContent?: React.ReactNode;\n  action: React.ReactNode;\n  priority?: ActionOptionPriority;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps &\n  AriaLabelProperty;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  additionalContent,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n  'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: clsx('tw-action-option', className),\n    isContainerAligned,\n    additionalContent,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    if (ariaLabel) {\n      return ariaLabel;\n    }\n\n    const generatedLabels: string[] = [];\n\n    if (typeof title === 'string') {\n      generatedLabels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      generatedLabels.push(action);\n    }\n\n    return generatedLabels.join(', ') || undefined;\n  };\n\n  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n    switch (priority) {\n      case 'primary':\n        return 'primary';\n      case 'secondary':\n        return 'secondary-neutral';\n      case 'tertiary':\n        return 'tertiary';\n      case 'secondary-send':\n        return 'secondary';\n      default:\n        return 'primary';\n    }\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Button\n          v2\n          size=\"sm\"\n          priority={mapPriority(priority)}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </Button>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,uBAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n  AriaLabelProperty,\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n  | PriorityPrimary\n  | PrioritySecondary\n  | PriorityTertiary\n  | 'secondary-send';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  additionalContent?: React.ReactNode;\n  action: React.ReactNode;\n  priority?: ActionOptionPriority;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps &\n  AriaLabelProperty;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  additionalContent,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n  'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: clsx('tw-action-option', className),\n    isContainerAligned,\n    additionalContent,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    if (ariaLabel) {\n      return ariaLabel;\n    }\n\n    const generatedLabels: string[] = [];\n\n    if (typeof title === 'string') {\n      generatedLabels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      generatedLabels.push(action);\n    }\n\n    return generatedLabels.join(', ') || undefined;\n  };\n\n  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n    switch (priority) {\n      case 'primary':\n        return 'primary';\n      case 'secondary':\n        return 'secondary-neutral';\n      case 'tertiary':\n        return 'tertiary';\n      case 'secondary-send':\n        return 'secondary';\n      default:\n        return 'primary';\n    }\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Button\n          v2\n          size=\"sm\"\n          priority={mapPriority(priority)}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </Button>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,uBAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}

package/build/actionOption/ActionOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n  AriaLabelProperty,\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n  | PriorityPrimary\n  | PrioritySecondary\n  | PriorityTertiary\n  | 'secondary-send';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  additionalContent?: React.ReactNode;\n  action: React.ReactNode;\n  priority?: ActionOptionPriority;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps &\n  AriaLabelProperty;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  additionalContent,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n  'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: clsx('tw-action-option', className),\n    isContainerAligned,\n    additionalContent,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    if (ariaLabel) {\n      return ariaLabel;\n    }\n\n    const generatedLabels: string[] = [];\n\n    if (typeof title === 'string') {\n      generatedLabels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      generatedLabels.push(action);\n    }\n\n    return generatedLabels.join(', ') || undefined;\n  };\n\n  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n    switch (priority) {\n      case 'primary':\n        return 'primary';\n      case 'secondary':\n        return 'secondary-neutral';\n      case 'tertiary':\n        return 'tertiary';\n      case 'secondary-send':\n        return 'secondary';\n      default:\n        return 'primary';\n    }\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Button\n          v2\n          size=\"sm\"\n          priority={mapPriority(priority)}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </Button>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n  AriaLabelProperty,\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n  | PriorityPrimary\n  | PrioritySecondary\n  | PriorityTertiary\n  | 'secondary-send';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  additionalContent?: React.ReactNode;\n  action: React.ReactNode;\n  priority?: ActionOptionPriority;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps &\n  AriaLabelProperty;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  additionalContent,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n  'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: clsx('tw-action-option', className),\n    isContainerAligned,\n    additionalContent,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    if (ariaLabel) {\n      return ariaLabel;\n    }\n\n    const generatedLabels: string[] = [];\n\n    if (typeof title === 'string') {\n      generatedLabels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      generatedLabels.push(action);\n    }\n\n    return generatedLabels.join(', ') || undefined;\n  };\n\n  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n    switch (priority) {\n      case 'primary':\n        return 'primary';\n      case 'secondary':\n        return 'secondary-neutral';\n      case 'tertiary':\n        return 'tertiary';\n      case 'secondary-send':\n        return 'secondary';\n      default:\n        return 'primary';\n    }\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Button\n          v2\n          size=\"sm\"\n          priority={mapPriority(priority)}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </Button>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}

package/build/checkboxOption/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n  /**\n   * The checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * Function to call when the checkbox option is clicked\n   */\n  onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n  ({ checked, disabled, onChange, ...rest }, reference) => {\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        disabled={disabled}\n        button={\n          <CheckboxButton\n            checked={checked}\n            disabled={disabled}\n            onChange={() => onChange?.(!checked)}\n          />\n        }\n      />\n    );\n  },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;;;;;AAiBA,MAAMA,cAAc,gBAAGC,gBAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,cAAA,CAACI,sBAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
+{"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n  /**\n   * The checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * Function to call when the checkbox option is clicked\n   */\n  onChange?: (value: boolean) => void;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n  ({ checked, disabled, onChange, ...rest }, reference) => {\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        disabled={disabled}\n        button={\n          <CheckboxButton\n            checked={checked}\n            disabled={disabled}\n            onChange={() => onChange?.(!checked)}\n          />\n        }\n      />\n    );\n  },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;;;;;AAyBA,MAAMA,cAAc,gBAAGC,gBAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,cAAA,CAACI,sBAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}

package/build/checkboxOption/CheckboxOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.mjs","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n  /**\n   * The checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * Function to call when the checkbox option is clicked\n   */\n  onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n  ({ checked, disabled, onChange, ...rest }, reference) => {\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        disabled={disabled}\n        button={\n          <CheckboxButton\n            checked={checked}\n            disabled={disabled}\n            onChange={() => onChange?.(!checked)}\n          />\n        }\n      />\n    );\n  },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;AAiBA,MAAMA,cAAc,gBAAGC,UAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,GAAA,CAACI,cAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
+{"version":3,"file":"CheckboxOption.mjs","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n  /**\n   * The checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * Function to call when the checkbox option is clicked\n   */\n  onChange?: (value: boolean) => void;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n  ({ checked, disabled, onChange, ...rest }, reference) => {\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        disabled={disabled}\n        button={\n          <CheckboxButton\n            checked={checked}\n            disabled={disabled}\n            onChange={() => onChange?.(!checked)}\n          />\n        }\n      />\n    );\n  },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;AAyBA,MAAMA,cAAc,gBAAGC,UAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,GAAA,CAACI,cAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}

package/build/legacylistItem/LegacyListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
+{"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}

package/build/legacylistItem/LegacyListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
+{"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}

package/build/listItem/ListItem.js

@@ -152,7 +152,10 @@ const ListItem = ({
       }, className),
       id: id,
       "aria-disabled": disabled,
-      children: [spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
+      style: {
+        '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined
+      },
+      children: [isFullyInteractive && spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
         "aria-hidden": "true",
         className: "wds-list-item-spotlight__border",
         children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
@@ -172,9 +175,7 @@ const ListItem = ({
           className: "wds-list-item-body",
           style: valueColumnWidth ? gridColumnsStyle : undefined,
           children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-            className: clsx.clsx({
-              'wds-list-item-body-center': title && !subtitle
-            }),
+            className: "wds-list-item-titles",
             children: (() => {
               const titles = [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                 id: ids.title,
@@ -193,8 +194,7 @@ const ListItem = ({
             })()
           }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
             className: clsx.clsx('wds-list-item-value', {
-              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
-              'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
+              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
             }),
             children: (() => {
               const values = [];
@@ -218,7 +218,8 @@ const ListItem = ({
           })]
         }), control === null ? null : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
           className: clsx.clsx('wds-list-item-control-wrapper', {
-            'wds-list-item-button-control': controlType === 'button'
+            'wds-list-item-button-control': controlType === 'button',
+            'wds-list-item-button-control--hasPrompt': controlType === 'button' && Boolean(prompt)
           }),
           style: {
             '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
@@ -231,7 +232,6 @@ const ListItem = ({
 };
 function View({
   children,
-  subtitle,
   additionalInfo,
   prompt,
   disabled,

package/build/listItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  disabled?: boolean;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n      (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted },\n      mediaSize,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt);\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n      >\n        {spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span\n              className={clsx({\n                'wds-list-item-body-center': title && !subtitle,\n              })}\n            >\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                  'wds-list-item-body-center':\n                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n  children,\n  subtitle,\n  additionalInfo,\n  prompt,\n  disabled,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => (\n    <>\n      {additionalInfo}\n      {prompt}\n    </>\n  );\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view d-flex flex-row', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  disabled?: boolean;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n      (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted },\n      mediaSize,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt);\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => (\n    <>\n      {additionalInfo}\n      {prompt}\n    </>\n  );\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view d-flex flex-row', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}

package/build/listItem/ListItem.mjs

@@ -148,7 +148,10 @@ const ListItem = ({
       }, className),
       id: id,
       "aria-disabled": disabled,
-      children: [spotlight === 'inactive' && /*#__PURE__*/jsx("svg", {
+      style: {
+        '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined
+      },
+      children: [isFullyInteractive && spotlight === 'inactive' && /*#__PURE__*/jsx("svg", {
         "aria-hidden": "true",
         className: "wds-list-item-spotlight__border",
         children: /*#__PURE__*/jsx("rect", {})
@@ -168,9 +171,7 @@ const ListItem = ({
           className: "wds-list-item-body",
           style: valueColumnWidth ? gridColumnsStyle : undefined,
           children: [/*#__PURE__*/jsx("span", {
-            className: clsx({
-              'wds-list-item-body-center': title && !subtitle
-            }),
+            className: "wds-list-item-titles",
             children: (() => {
               const titles = [/*#__PURE__*/jsx(Body, {
                 id: ids.title,
@@ -189,8 +190,7 @@ const ListItem = ({
             })()
           }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsx("span", {
             className: clsx('wds-list-item-value', {
-              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
-              'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
+              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
             }),
             children: (() => {
               const values = [];
@@ -214,7 +214,8 @@ const ListItem = ({
           })]
         }), control === null ? null : /*#__PURE__*/jsx(Body, {
           className: clsx('wds-list-item-control-wrapper', {
-            'wds-list-item-button-control': controlType === 'button'
+            'wds-list-item-button-control': controlType === 'button',
+            'wds-list-item-button-control--hasPrompt': controlType === 'button' && Boolean(prompt)
           }),
           style: {
             '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
@@ -227,7 +228,6 @@ const ListItem = ({
 };
 function View({
   children,
-  subtitle,
   additionalInfo,
   prompt,
   disabled,

package/build/listItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  disabled?: boolean;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n      (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted },\n      mediaSize,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt);\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n      >\n        {spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span\n              className={clsx({\n                'wds-list-item-body-center': title && !subtitle,\n              })}\n            >\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                  'wds-list-item-body-center':\n                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n  children,\n  subtitle,\n  additionalInfo,\n  prompt,\n  disabled,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => (\n    <>\n      {additionalInfo}\n      {prompt}\n    </>\n  );\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view d-flex flex-row', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
+{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  disabled?: boolean;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n      (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted },\n      mediaSize,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt);\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => (\n    <>\n      {additionalInfo}\n      {prompt}\n    </>\n  );\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view d-flex flex-row', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}

package/build/main.css

@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -3017,6 +3021,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
 .wds-list-item-prompt {
   grid-area: prompt;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;

package/build/navigationOption/NavigationOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/navigationOption/NavigationOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/navigationOptionsList/NavigationOptionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAOA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
+{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\n/**\n * @deprecated Please use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}