@transferwise/components 46.92.0 → 46.93.0

package/build/actionOption/ActionOption.js

@@ -36,6 +36,7 @@ const ActionOption = ({
   media,
   title,
   content,
+  additionalContent,
   complex,
   className,
   showMediaAtAllSizes,
@@ -54,6 +55,7 @@ const ActionOption = ({
     showMediaCircle,
     className: clsx.clsx('tw-action-option', className),
     isContainerAligned,
+    additionalContent,
     as
   };
   const getAriaLabel = () => {

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  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  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    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","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,eAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCMA,MAAAA,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,SAAAA;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,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEwB,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,eAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYe,EAAAA,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/actionOption/ActionOption.mjs

@@ -34,6 +34,7 @@ const ActionOption = ({
   media,
   title,
   content,
+  additionalContent,
   complex,
   className,
   showMediaAtAllSizes,
@@ -52,6 +53,7 @@ const ActionOption = ({
     showMediaCircle,
     className: clsx('tw-action-option', className),
     isContainerAligned,
+    additionalContent,
     as
   };
   const getAriaLabel = () => {

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  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  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    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","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCMA,MAAAA,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,SAAAA;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,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;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,YAAYe,EAAAA,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/common/Option/Option.js

@@ -5,6 +5,7 @@ var React = require('react');
 var Body = require('../../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+/* eslint-disable react/display-name */
 const Option = /*#__PURE__*/React.forwardRef(({
   media = '',
   title,
@@ -19,10 +20,11 @@ const Option = /*#__PURE__*/React.forwardRef(({
   showMediaAtAllSizes,
   showMediaCircle = true,
   isContainerAligned = false,
+  additionalContent,
   ...rest
 }, reference) => {
   const Element = component ?? 'label';
-  return /*#__PURE__*/jsxRuntime.jsx(Element, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     ...rest,
     ref: reference,
     className: clsx.clsx('np-option', className, {
@@ -33,8 +35,8 @@ const Option = /*#__PURE__*/React.forwardRef(({
       'np-option__container-aligned': isContainerAligned
     }),
     disabled: disabled && Element === 'button',
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "media",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('media'),
       children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "media-left",
         children: showMediaCircle ? /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -65,7 +67,10 @@ const Option = /*#__PURE__*/React.forwardRef(({
         className: "media-right",
         children: button
       })]
-    })
+    }), additionalContent ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-option-additional-content",
+      children: [" ", additionalContent, " "]
+    }) : null]
   });
 });
 

package/build/common/Option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n  'aria-controls'?: string;\n  media?: ReactNode;\n  name?: string;\n  htmlFor?: string;\n  title: ReactNode;\n  content?: ReactNode;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  as?: ElementType;\n  disabled?: boolean;\n  button?: ReactNode;\n  decision?: boolean;\n  complex?: boolean;\n  inverseMediaCircle?: boolean;\n  className?: string;\n  showMediaAtAllSizes?: boolean;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n  as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n  (\n    {\n      media = '',\n      title,\n      content,\n      as: component,\n      button,\n      decision = true,\n      disabled = false,\n      complex,\n      inverseMediaCircle = true,\n      className,\n      showMediaAtAllSizes,\n      showMediaCircle = true,\n      isContainerAligned = false,\n      ...rest\n    },\n    reference,\n  ) => {\n    const Element = component ?? 'label';\n\n    return (\n      <Element\n        {...rest}\n        ref={reference}\n        className={clsx('np-option', className, {\n          'decision-complex': complex,\n          decision,\n          disabled,\n          'np-option__sm-media': showMediaAtAllSizes,\n          'np-option__container-aligned': isContainerAligned,\n        })}\n        disabled={disabled && Element === 'button'}\n      >\n        <div className=\"media\">\n          {media && (\n            <div className=\"media-left\">\n              {showMediaCircle ? (\n                <div\n                  className={clsx('circle circle-sm text-primary', {\n                    'circle-inverse': inverseMediaCircle,\n                  })}\n                >\n                  {media}\n                </div>\n              ) : (\n                <div className=\"np-option__no-media-circle\">{media}</div>\n              )}\n            </div>\n          )}\n          <div className=\"media-body\">\n            {/* @ts-expect-error div can have role and aria-lavel props */}\n            <Body\n              type=\"body-large-bold\"\n              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n              // so we enable header semantics via `role` and `aria-level` attrs\n              role=\"heading\"\n              aria-level=\"4\"\n              className=\"text-primary np-option__title\"\n            >\n              {title}\n            </Body>\n            {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n          </div>\n          <div className=\"media-right\">{button}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","rest","reference","Element","_jsx","ref","clsx","children","_jsxs","Body","type","role"],"mappings":";;;;;;;AAoCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1B,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGZ,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEa,cAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfL,IAAAA,SAAS,EAAES,SAAI,CAAC,WAAW,EAAET,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIS,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,eAE3CC,eAAA,CAAA,KAAA,EAAA;AAAKX,MAAAA,SAAS,EAAC,OAAO;MAAAU,QAAA,EAAA,CACnBpB,KAAK,iBACJiB,cAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EACxBR,eAAe,gBACdK,cAAA,CAAA,KAAA,EAAA;AACEP,UAAAA,SAAS,EAAES,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEV,kBAAAA;AACnB,WAAA,CAAE;AAAAW,UAAAA,QAAA,EAEFpB,KAAAA;SACE,CAAC,gBAENiB,cAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,4BAA4B;AAAAU,UAAAA,QAAA,EAAEpB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDqB,eAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EAAA,cAEzBH,cAAA,CAACK,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC,iBAAA;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdd,UAAAA,SAAS,EAAC,+BAA+B;AAAAU,UAAAA,QAAA,EAExCnB,KAAAA;AAAK,SACF,CACN,EAACC,OAAO,iBAAIe,cAAA,CAACK,IAAI,EAAA;AAACZ,UAAAA,SAAS,EAAC,yBAAyB;AAAAU,UAAAA,QAAA,EAAElB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAe,cAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,aAAa;AAAAU,QAAAA,QAAA,EAAEf,MAAAA;AAAM,OAAM,CAC5C,CAAA;KAAK,CAAA;AACP,GAAS,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n  'aria-controls'?: string;\n  media?: ReactNode;\n  name?: string;\n  htmlFor?: string;\n  title: ReactNode;\n  content?: ReactNode;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  as?: ElementType;\n  disabled?: boolean;\n  button?: ReactNode;\n  decision?: boolean;\n  complex?: boolean;\n  inverseMediaCircle?: boolean;\n  className?: string;\n  showMediaAtAllSizes?: boolean;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n  as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n  (\n    {\n      media = '',\n      title,\n      content,\n      as: component,\n      button,\n      decision = true,\n      disabled = false,\n      complex,\n      inverseMediaCircle = true,\n      className,\n      showMediaAtAllSizes,\n      showMediaCircle = true,\n      isContainerAligned = false,\n      additionalContent,\n      ...rest\n    },\n    reference,\n  ) => {\n    const Element = component ?? 'label';\n\n    return (\n      <Element\n        {...rest}\n        ref={reference}\n        className={clsx('np-option', className, {\n          'decision-complex': complex,\n          decision,\n          disabled,\n          'np-option__sm-media': showMediaAtAllSizes,\n          'np-option__container-aligned': isContainerAligned,\n        })}\n        disabled={disabled && Element === 'button'}\n      >\n        <div className={clsx('media')}>\n          {media && (\n            <div className=\"media-left\">\n              {showMediaCircle ? (\n                <div\n                  className={clsx('circle circle-sm text-primary', {\n                    'circle-inverse': inverseMediaCircle,\n                  })}\n                >\n                  {media}\n                </div>\n              ) : (\n                <div className=\"np-option__no-media-circle\">{media}</div>\n              )}\n            </div>\n          )}\n          <div className=\"media-body\">\n            {/* @ts-expect-error div can have role and aria-lavel props */}\n            <Body\n              type=\"body-large-bold\"\n              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n              // so we enable header semantics via `role` and `aria-level` attrs\n              role=\"heading\"\n              aria-level=\"4\"\n              className=\"text-primary np-option__title\"\n            >\n              {title}\n            </Body>\n            {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n          </div>\n          <div className=\"media-right\">{button}</div>\n        </div>\n        {additionalContent ? (\n          <div className=\"np-option-additional-content\"> {additionalContent} </div>\n        ) : null}\n      </Element>\n    );\n  },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX,kBAAAA;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB,KAAAA;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC,iBAAA;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB,KAAAA;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,cAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAoB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB,MAAAA;AAAM,OAAM,CAC5C,CAAA;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBI,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAE,CAAA,GAAA,EAACP,iBAAiB,EAAE,GAAA,CAAA;KAAK,CAAC,GACvE,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/common/Option/Option.mjs

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import Body from '../../body/Body.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+/* eslint-disable react/display-name */
 const Option = /*#__PURE__*/forwardRef(({
   media = '',
   title,
@@ -17,10 +18,11 @@ const Option = /*#__PURE__*/forwardRef(({
   showMediaAtAllSizes,
   showMediaCircle = true,
   isContainerAligned = false,
+  additionalContent,
   ...rest
 }, reference) => {
   const Element = component ?? 'label';
-  return /*#__PURE__*/jsx(Element, {
+  return /*#__PURE__*/jsxs(Element, {
     ...rest,
     ref: reference,
     className: clsx('np-option', className, {
@@ -31,8 +33,8 @@ const Option = /*#__PURE__*/forwardRef(({
       'np-option__container-aligned': isContainerAligned
     }),
     disabled: disabled && Element === 'button',
-    children: /*#__PURE__*/jsxs("div", {
-      className: "media",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: clsx('media'),
       children: [media && /*#__PURE__*/jsx("div", {
         className: "media-left",
         children: showMediaCircle ? /*#__PURE__*/jsx("div", {
@@ -63,7 +65,10 @@ const Option = /*#__PURE__*/forwardRef(({
         className: "media-right",
         children: button
       })]
-    })
+    }), additionalContent ? /*#__PURE__*/jsxs("div", {
+      className: "np-option-additional-content",
+      children: [" ", additionalContent, " "]
+    }) : null]
   });
 });
 

package/build/common/Option/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n  'aria-controls'?: string;\n  media?: ReactNode;\n  name?: string;\n  htmlFor?: string;\n  title: ReactNode;\n  content?: ReactNode;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  as?: ElementType;\n  disabled?: boolean;\n  button?: ReactNode;\n  decision?: boolean;\n  complex?: boolean;\n  inverseMediaCircle?: boolean;\n  className?: string;\n  showMediaAtAllSizes?: boolean;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n  as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n  (\n    {\n      media = '',\n      title,\n      content,\n      as: component,\n      button,\n      decision = true,\n      disabled = false,\n      complex,\n      inverseMediaCircle = true,\n      className,\n      showMediaAtAllSizes,\n      showMediaCircle = true,\n      isContainerAligned = false,\n      ...rest\n    },\n    reference,\n  ) => {\n    const Element = component ?? 'label';\n\n    return (\n      <Element\n        {...rest}\n        ref={reference}\n        className={clsx('np-option', className, {\n          'decision-complex': complex,\n          decision,\n          disabled,\n          'np-option__sm-media': showMediaAtAllSizes,\n          'np-option__container-aligned': isContainerAligned,\n        })}\n        disabled={disabled && Element === 'button'}\n      >\n        <div className=\"media\">\n          {media && (\n            <div className=\"media-left\">\n              {showMediaCircle ? (\n                <div\n                  className={clsx('circle circle-sm text-primary', {\n                    'circle-inverse': inverseMediaCircle,\n                  })}\n                >\n                  {media}\n                </div>\n              ) : (\n                <div className=\"np-option__no-media-circle\">{media}</div>\n              )}\n            </div>\n          )}\n          <div className=\"media-body\">\n            {/* @ts-expect-error div can have role and aria-lavel props */}\n            <Body\n              type=\"body-large-bold\"\n              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n              // so we enable header semantics via `role` and `aria-level` attrs\n              role=\"heading\"\n              aria-level=\"4\"\n              className=\"text-primary np-option__title\"\n            >\n              {title}\n            </Body>\n            {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n          </div>\n          <div className=\"media-right\">{button}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","rest","reference","Element","_jsx","ref","clsx","children","_jsxs","Body","type","role"],"mappings":";;;;;AAoCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1B,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGZ,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEa,GAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfL,IAAAA,SAAS,EAAES,IAAI,CAAC,WAAW,EAAET,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIS,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,eAE3CC,IAAA,CAAA,KAAA,EAAA;AAAKX,MAAAA,SAAS,EAAC,OAAO;MAAAU,QAAA,EAAA,CACnBpB,KAAK,iBACJiB,GAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EACxBR,eAAe,gBACdK,GAAA,CAAA,KAAA,EAAA;AACEP,UAAAA,SAAS,EAAES,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEV,kBAAAA;AACnB,WAAA,CAAE;AAAAW,UAAAA,QAAA,EAEFpB,KAAAA;SACE,CAAC,gBAENiB,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,4BAA4B;AAAAU,UAAAA,QAAA,EAAEpB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDqB,IAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EAAA,cAEzBH,GAAA,CAACK,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC,iBAAA;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdd,UAAAA,SAAS,EAAC,+BAA+B;AAAAU,UAAAA,QAAA,EAExCnB,KAAAA;AAAK,SACF,CACN,EAACC,OAAO,iBAAIe,GAAA,CAACK,IAAI,EAAA;AAACZ,UAAAA,SAAS,EAAC,yBAAyB;AAAAU,UAAAA,QAAA,EAAElB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAe,GAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,aAAa;AAAAU,QAAAA,QAAA,EAAEf,MAAAA;AAAM,OAAM,CAC5C,CAAA;KAAK,CAAA;AACP,GAAS,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n  'aria-controls'?: string;\n  media?: ReactNode;\n  name?: string;\n  htmlFor?: string;\n  title: ReactNode;\n  content?: ReactNode;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  as?: ElementType;\n  disabled?: boolean;\n  button?: ReactNode;\n  decision?: boolean;\n  complex?: boolean;\n  inverseMediaCircle?: boolean;\n  className?: string;\n  showMediaAtAllSizes?: boolean;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n  as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n  (\n    {\n      media = '',\n      title,\n      content,\n      as: component,\n      button,\n      decision = true,\n      disabled = false,\n      complex,\n      inverseMediaCircle = true,\n      className,\n      showMediaAtAllSizes,\n      showMediaCircle = true,\n      isContainerAligned = false,\n      additionalContent,\n      ...rest\n    },\n    reference,\n  ) => {\n    const Element = component ?? 'label';\n\n    return (\n      <Element\n        {...rest}\n        ref={reference}\n        className={clsx('np-option', className, {\n          'decision-complex': complex,\n          decision,\n          disabled,\n          'np-option__sm-media': showMediaAtAllSizes,\n          'np-option__container-aligned': isContainerAligned,\n        })}\n        disabled={disabled && Element === 'button'}\n      >\n        <div className={clsx('media')}>\n          {media && (\n            <div className=\"media-left\">\n              {showMediaCircle ? (\n                <div\n                  className={clsx('circle circle-sm text-primary', {\n                    'circle-inverse': inverseMediaCircle,\n                  })}\n                >\n                  {media}\n                </div>\n              ) : (\n                <div className=\"np-option__no-media-circle\">{media}</div>\n              )}\n            </div>\n          )}\n          <div className=\"media-body\">\n            {/* @ts-expect-error div can have role and aria-lavel props */}\n            <Body\n              type=\"body-large-bold\"\n              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n              // so we enable header semantics via `role` and `aria-level` attrs\n              role=\"heading\"\n              aria-level=\"4\"\n              className=\"text-primary np-option__title\"\n            >\n              {title}\n            </Body>\n            {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n          </div>\n          <div className=\"media-right\">{button}</div>\n        </div>\n        {additionalContent ? (\n          <div className=\"np-option-additional-content\"> {additionalContent} </div>\n        ) : null}\n      </Element>\n    );\n  },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEc,IAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,IAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,GAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX,kBAAAA;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB,KAAAA;SACE,CAAC,gBAENsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDkB,IAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC,iBAAA;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB,KAAAA;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,GAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAoB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB,MAAAA;AAAM,OAAM,CAC5C,CAAA;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBI,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAE,CAAA,GAAA,EAACP,iBAAiB,EAAE,GAAA,CAAA;KAAK,CAAC,GACvE,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/dateLookup/dateTrigger/DateTrigger.js

@@ -22,12 +22,15 @@ require('../../common/propsValues/variant.js');
 require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
-var CloseButton = require('../../common/closeButton/CloseButton.js');
-var DateTrigger_messages = require('./DateTrigger.messages.js');
+var icons = require('@transferwise/icons');
+require('clsx');
 var React = require('react');
+require('../../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var DateTrigger_messages = require('./DateTrigger.messages.js');
 var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 var Body = require('../../body/Body.js');
-var jsxRuntime = require('react/jsx-runtime');
+var IconButton = require('../../iconButton/IconButton.js');
 
 const DateTrigger = ({
   selectedDate,
@@ -84,15 +87,17 @@ const DateTrigger = ({
         className: "clearfix"
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "input-group-addon",
-        children: /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+        children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+          size: 32,
+          priority: "minimal",
           className: `clear-btn clear-btn--${size$1}`,
           "aria-label": `${formatMessage(DateTrigger_messages.ariaLabel)} ${label}`,
-          size: size.Size.SMALL,
           onClick: event => {
             event.stopPropagation();
             event.preventDefault();
             onClear();
-          }
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
         })
       })]
     }) : null]

package/build/dateLookup/dateTrigger/DateTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
+{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <IconButton\n              size={32}\n              priority=\"minimal\"\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              onClick={(event) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            >\n              <Cross />\n            </IconButton>\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","IconButton","priority","messages","ariaLabel","event","stopPropagation","preventDefault","Cross"],"mappings":"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"}

package/build/dateLookup/dateTrigger/DateTrigger.mjs

@@ -20,12 +20,15 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
-import dateTriggerMessages from './DateTrigger.messages.mjs';
+import { Cross } from '@transferwise/icons';
+import 'clsx';
 import { useId, useContext } from 'react';
+import '../../common/closeButton/CloseButton.messages.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import dateTriggerMessages from './DateTrigger.messages.mjs';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 import Body from '../../body/Body.mjs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import IconButton from '../../iconButton/IconButton.mjs';
 
 const DateTrigger = ({
   selectedDate,
@@ -82,15 +85,17 @@ const DateTrigger = ({
         className: "clearfix"
       }), /*#__PURE__*/jsx("span", {
         className: "input-group-addon",
-        children: /*#__PURE__*/jsx(CloseButton, {
+        children: /*#__PURE__*/jsx(IconButton, {
+          size: 32,
+          priority: "minimal",
           className: `clear-btn clear-btn--${size}`,
           "aria-label": `${formatMessage(dateTriggerMessages.ariaLabel)} ${label}`,
-          size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
             event.preventDefault();
             onClear();
-          }
+          },
+          children: /*#__PURE__*/jsx(Cross, {})
         })
       })]
     }) : null]

package/build/dateLookup/dateTrigger/DateTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
+{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <IconButton\n              size={32}\n              priority=\"minimal\"\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              onClick={(event) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            >\n              <Cross />\n            </IconButton>\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","IconButton","priority","messages","ariaLabel","event","stopPropagation","preventDefault","Cross"],"mappings":"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"}

package/build/definitionList/DefinitionList.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var clsx = require('clsx');
-var ActionButton = require('../actionButton/ActionButton.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -26,6 +25,7 @@ require('react');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var Button_resolver = require('../button/Button.resolver.js');
 
 const isLayoutHorizontal = layout => layout === layouts.Layout.HORIZONTAL_LEFT_ALIGNED || layout === layouts.Layout.HORIZONTAL_RIGHT_ALIGNED || layout === layouts.Layout.HORIZONTAL_JUSTIFIED;
 const getAlignmentClasses = (layout, action) => {
@@ -75,8 +75,10 @@ function DefinitionList({
           children: value
         }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: clsx.clsx(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-          children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
-            className: "tw-definition-list__button",
+          children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+            as: "button",
+            size: "sm",
+            v2: true,
             onClick: action.onClick,
             children: action.label
           })

package/build/definitionList/DefinitionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n                    {action.label}\n                  </ActionButton>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
+{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

package/build/definitionList/DefinitionList.mjs

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import ActionButton from '../actionButton/ActionButton.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
@@ -24,6 +23,7 @@ import 'react';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '../button/Button.resolver.mjs';
 
 const isLayoutHorizontal = layout => layout === Layout.HORIZONTAL_LEFT_ALIGNED || layout === Layout.HORIZONTAL_RIGHT_ALIGNED || layout === Layout.HORIZONTAL_JUSTIFIED;
 const getAlignmentClasses = (layout, action) => {
@@ -73,8 +73,10 @@ function DefinitionList({
           children: value
         }), action ? /*#__PURE__*/jsx("div", {
           className: clsx(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-          children: /*#__PURE__*/jsx(ActionButton, {
-            className: "tw-definition-list__button",
+          children: /*#__PURE__*/jsx(Button, {
+            as: "button",
+            size: "sm",
+            v2: true,
             onClick: action.onClick,
             children: action.label
           })

package/build/definitionList/DefinitionList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n                    {action.label}\n                  </ActionButton>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,kBAAkB,GAAIC,MAA4B,IACtDA,MAAM,KAAKC,MAAM,CAACC,uBAAuB,IACzCF,MAAM,KAAKC,MAAM,CAACE,wBAAwB,IAC1CH,MAAM,KAAKC,MAAM,CAACG,oBAAoB,CAAA;AAExC,MAAMC,mBAAmB,GAAGA,CAC1BL,MAA4B,EAC5BM,MAA0C,KACxC;AACF,EAAA,MAAMC,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAA;AAE1B,EAAA,IAAID,MAAM,EAAE;AACV,IAAA,IAAIP,kBAAkB,CAACC,MAAM,CAAC,EAAE;AAC9BO,MAAAA,OAAO,CAACC,IAAI,CAAC,oBAAoB,CAAC,CAAA;AACpC,KAAC,MAAM;AACLD,MAAAA,OAAO,CAACC,IAAI,CAAC,mBAAmB,CAAC,CAAA;AACnC,KAAA;AACF,GAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,MAAM,CAACE,wBAAwB,EAAE;AAC9CI,IAAAA,OAAO,CAACC,IAAI,CAAC,yDAAyD,CAAC,CAAA;AACzE,GAAC,MAAM;AACLD,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,CAAC,CAAA;AACzC,GAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,MAAM,CAACG,oBAAoB,EAAE;AAC1CG,IAAAA,OAAO,CAACC,IAAI,CAAC,iBAAiB,CAAC,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOD,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAME,kBAAkB,GAAG,EAA+C,CAAA;AAElD,SAAAC,cAAcA,CAAC;AACrCC,EAAAA,WAAW,GAAGF,kBAAkB;AAChCT,EAAAA,MAAM,GAAG,qBAAqB;AAC9BY,EAAAA,KAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE;AAC5C,MAAA,YAAY,EAAEH,KAAK;AACnB,MAAA,aAAa,EAAEZ,MAAM,KAAKC,MAAM,CAACe,mBAAmB;AACpD,MAAA,sDAAsD,EACpDhB,MAAM,KAAKC,MAAM,CAACgB,mBAAmB;MACvC,4CAA4C,EAAElB,kBAAkB,CAACC,MAAM,CAAA;AACxE,KAAA,CAAE;AAAAkB,IAAAA,QAAA,EAEFP,WAAW,CACTQ,MAAM,CAAEC,UAAU,IAAKA,UAAU,CAAC,CAClCC,GAAG,CAAC,CAAC;MAAEf,MAAM;MAAEgB,KAAK;MAAEC,KAAK;AAAEC,MAAAA,GAAAA;AAAG,KAAE,kBACjCC,IAAA,CAAA,KAAA,EAAA;AAAeX,MAAAA,SAAS,EAAC,0BAA0B;AAAAI,MAAAA,QAAA,gBACjDL,GAAA,CAAA,IAAA,EAAA;AAAAK,QAAAA,QAAA,EAAKI,KAAAA;OAAU,CACf,eAAAG,IAAA,CAAA,IAAA,EAAA;QAAIX,SAAS,EAAEC,IAAI,CAAC,GAAGV,mBAAmB,CAACL,MAAM,EAAEM,MAAM,CAAC,CAAE;AAAAY,QAAAA,QAAA,gBAC1DL,GAAA,CAAA,KAAA,EAAA;AAAAK,UAAAA,QAAA,EAAMK,KAAAA;AAAK,SAAM,CACjB,EAACjB,MAAM,gBACLO,GAAA,CAAA,KAAA,EAAA;AACEC,UAAAA,SAAS,EAAEC,IAAI,CACbhB,kBAAkB,CAACC,MAAM,CAAC,GAAG,OAAO,GAAG,OAAO,EAC9C,4BAA4B,CAC5B;UAAAkB,QAAA,eAEFL,GAAA,CAACa,YAAY,EAAA;AAACZ,YAAAA,SAAS,EAAC,4BAA4B;YAACa,OAAO,EAAErB,MAAM,CAACqB,OAAQ;YAAAT,QAAA,EAC1EZ,MAAM,CAACsB,KAAAA;WACI,CAAA;SACX,CAAC,GACJ,IAAI,CAAA;AAAA,OACN,CACN,CAAA;AAAA,KAAA,EAjBUJ,GAiBL,CACN,CAAA;AAAC,GACF,CAAC,CAAA;AAET;;;;"}
+{"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

package/build/main.css

@@ -1770,6 +1770,28 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-theme-personal .np-option-additional-content {
+  margin-left: 80px;
+  margin-left: var(--size-80);
+  margin-right: 16px;
+  margin-right: var(--size-16);
+  margin-top: -10px;
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+@media (max-width: 480px) {
+  .np-theme-personal .np-option-additional-content {
+    margin-left: 16px;
+    margin-left: var(--size-16);
+  }
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-option-additional-content {
+    margin-top: -3px;
+  }
+}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -2003,55 +2025,24 @@ button.np-option {
   padding-left: var(--size-16);
 }
 .clear-btn {
-  transition: color 0.15s ease-in-out;
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
   position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  right: 16px;
-  right: var(--size-16);
-}
-[dir="rtl"] .clear-btn {
-  left: 16px;
-  left: var(--size-16);
-  right: auto;
-  right: initial;
-}
-.np-theme-personal .clear-btn {
   top: 8px;
   top: var(--size-8);
   right: 8px;
   right: var(--size-8);
 }
-[dir="rtl"] .np-theme-personal .clear-btn {
+[dir="rtl"] .clear-btn {
   left: 8px;
   left: var(--size-8);
   right: auto;
   right: initial;
 }
 .clear-btn--sm {
-  top: 8px;
-  top: var(--size-8);
-}
-.np-theme-personal .clear-btn--sm {
   top: 0;
 }
 .clear-btn--lg {
-  top: 28px;
-}
-.np-theme-personal .clear-btn--lg {
   top: 20px;
 }
-.clear-btn:not(.disabled):not(:disabled):hover,
-.clear-btn:not(.disabled):not(:disabled):focus {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.clear-btn:not(.disabled):not(:disabled):active {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}
 .np-decision .decision {
   display: flex;
 }