@transferwise/components 46.71.5 → 46.71.7

package/build/actionButton/ActionButton.js

@@ -16,7 +16,7 @@ const ActionButton = /*#__PURE__*/React.forwardRef(({
 }, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
   ref: reference,
   type: "button",
-  className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
   disabled: disabled,
   onClick: onClick,
   ...rest,

package/build/actionButton/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","SECONDARY"],"mappings":";;;;;;;AAaA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;AACbZ,EAAAA,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,EACrEd,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
+{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;AAaA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

package/build/actionButton/ActionButton.mjs

@@ -14,7 +14,7 @@ const ActionButton = /*#__PURE__*/forwardRef(({
 }, reference) => /*#__PURE__*/jsx("button", {
   ref: reference,
   type: "button",
-  className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
   disabled: disabled,
   onClick: onClick,
   ...rest,

package/build/actionButton/ActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","SECONDARY"],"mappings":";;;;;AAaA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;AACbZ,EAAAA,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,EACrEd,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
+{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;AAaA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

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 ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\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?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\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}: 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    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\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","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;AAqBMA,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;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,SAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\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?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\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}: 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    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\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","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;AA2BMA,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;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,SAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;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 ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\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?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\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}: 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    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\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","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAqBMA,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;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,IAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {\n  CommonProps,\n  Priority,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\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?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\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}: 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    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\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","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AA2BMA,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;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,IAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/main.css

@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/build/styles/actionButton/ActionButton.css

@@ -32,6 +32,10 @@
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -39,6 +43,9 @@
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -48,6 +55,10 @@
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/build/styles/main.css

@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/build/typeahead/util/highlight.js

@@ -6,13 +6,25 @@ function Highlight({
   className,
   value,
   query
+}) {
+  const content = /*#__PURE__*/jsxRuntime.jsx(HighlightContent, {
+    value: value,
+    query: query
+  });
+  return className ? /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: className,
+    children: content
+  }) : content;
+}
+function HighlightContent({
+  value,
+  query
 }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
-      return /*#__PURE__*/jsxRuntime.jsxs("span", {
-        className: className,
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
           children: value.slice(highlightStart, highlightEnd)
         }), value.slice(Math.max(0, highlightEnd))]

package/build/typeahead/util/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <span className={className}>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </span>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;;;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;EACC,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,eAAA,CAAA,MAAA,EAAA;AAAMT,QAAAA,SAAS,EAAEA,SAAU;AAAAU,QAAAA,QAAA,GACxBT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,cAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}
+{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  const content = <HighlightContent value={value} query={query} />;\n  return className ? <span className={className}>{content}</span> : content;\n}\n\nfunction HighlightContent({ value, query }: { value: string; query: string }) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","content","_jsx","HighlightContent","children","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","slice","Math","max"],"mappings":";;;;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;AACC,EAAA,MAAMC,OAAO,gBAAGC,cAAA,CAACC,gBAAgB,EAAA;AAACJ,IAAAA,KAAK,EAAEA,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,IAAG,CAAA;EAChE,OAAOF,SAAS,gBAAGI,cAAA,CAAA,MAAA,EAAA;AAAMJ,IAAAA,SAAS,EAAEA,SAAU;AAAAM,IAAAA,QAAA,EAAEH,OAAAA;GAAc,CAAC,GAAGA,OAAO,CAAA;AAC3E,CAAA;AAEA,SAASE,gBAAgBA,CAAC;EAAEJ,KAAK;AAAEC,EAAAA,KAAAA;AAAyC,CAAA,EAAA;EAC1E,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMK,cAAc,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACC,OAAO,CAACP,KAAK,CAACQ,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGL,KAAK,CAACQ,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,eAAA,CAAAC,mBAAA,EAAA;AAAAR,QAAAA,QAAA,GACGL,KAAK,CAACc,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CH,cAAA,CAAA,QAAA,EAAA;AAAAE,UAAAA,QAAA,EAASL,KAAK,CAACc,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACV,KAAK,CAACc,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAOV,KAAK,CAAA;AACd;;;;"}

package/build/typeahead/util/highlight.mjs

@@ -1,16 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Highlight({
   className,
   value,
   query
+}) {
+  const content = /*#__PURE__*/jsx(HighlightContent, {
+    value: value,
+    query: query
+  });
+  return className ? /*#__PURE__*/jsx("span", {
+    className: className,
+    children: content
+  }) : content;
+}
+function HighlightContent({
+  value,
+  query
 }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
-      return /*#__PURE__*/jsxs("span", {
-        className: className,
+      return /*#__PURE__*/jsxs(Fragment, {
         children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
           children: value.slice(highlightStart, highlightEnd)
         }), value.slice(Math.max(0, highlightEnd))]

package/build/typeahead/util/highlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <span className={className}>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </span>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;EACC,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,IAAA,CAAA,MAAA,EAAA;AAAMT,QAAAA,SAAS,EAAEA,SAAU;AAAAU,QAAAA,QAAA,GACxBT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,GAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}
+{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  const content = <HighlightContent value={value} query={query} />;\n  return className ? <span className={className}>{content}</span> : content;\n}\n\nfunction HighlightContent({ value, query }: { value: string; query: string }) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","content","_jsx","HighlightContent","children","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","slice","Math","max"],"mappings":";;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;AACC,EAAA,MAAMC,OAAO,gBAAGC,GAAA,CAACC,gBAAgB,EAAA;AAACJ,IAAAA,KAAK,EAAEA,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,IAAG,CAAA;EAChE,OAAOF,SAAS,gBAAGI,GAAA,CAAA,MAAA,EAAA;AAAMJ,IAAAA,SAAS,EAAEA,SAAU;AAAAM,IAAAA,QAAA,EAAEH,OAAAA;GAAc,CAAC,GAAGA,OAAO,CAAA;AAC3E,CAAA;AAEA,SAASE,gBAAgBA,CAAC;EAAEJ,KAAK;AAAEC,EAAAA,KAAAA;AAAyC,CAAA,EAAA;EAC1E,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMK,cAAc,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACC,OAAO,CAACP,KAAK,CAACQ,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGL,KAAK,CAACQ,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,IAAA,CAAAC,QAAA,EAAA;AAAAR,QAAAA,QAAA,GACGL,KAAK,CAACc,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CH,GAAA,CAAA,QAAA,EAAA;AAAAE,UAAAA,QAAA,EAASL,KAAK,CAACc,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACV,KAAK,CAACc,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAOV,KAAK,CAAA;AACd;;;;"}

package/build/types/actionButton/ActionButton.d.ts

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes } from 'react';
-import { PriorityPrimary, PrioritySecondary } from '../common';
+import { PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 export type ActionButtonProps = {
-    priority?: PriorityPrimary | PrioritySecondary;
+    priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
     /**
      * @deprecated use `children` instead
      */
     text?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 declare const ActionButton: import("react").ForwardRefExoticComponent<{
-    priority?: PriorityPrimary | PrioritySecondary;
+    priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
     /**
      * @deprecated use `children` instead
      */

package/build/types/actionButton/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC;IAC/C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,QAAA,MAAM,YAAY;eAPL,eAAe,GAAG,iBAAiB;IAC9C;;OAEG;WACI,MAAM;+FAgCd,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,QAAA,MAAM,YAAY;eAPL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAoCd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/actionOption/ActionOption.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, PriorityPrimary, PrioritySecondary } from '../common';
+import { CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 export type ActionOptionProps = {
     complex?: boolean;
     content?: React.ReactNode;
@@ -8,7 +8,7 @@ export type ActionOptionProps = {
     onClick: () => void;
     title: React.ReactNode;
     action: React.ReactNode;
-    priority?: PriorityPrimary | PrioritySecondary;
+    priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
     showMediaCircle?: boolean;
     isContainerAligned?: boolean;
     as?: React.ElementType;

package/build/types/actionOption/ActionOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAY,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAGnB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/typeahead/util/highlight.d.ts

@@ -2,5 +2,5 @@ export default function Highlight({ className, value, query, }: {
     className?: string;
     value: string;
     query: string;
-}): string | import("react").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=highlight.d.ts.map

package/build/types/typeahead/util/highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,wCAeA"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,+BAGA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.71.5",
+  "version": "46.71.7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/actionButton/ActionButton.css

@@ -32,6 +32,10 @@
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -39,6 +43,9 @@
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -48,6 +55,10 @@
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/src/actionButton/ActionButton.less

@@ -24,6 +24,11 @@
     color: var(--color-interactive-primary);
   }
 
+  &.btn-priority-3 {
+    background-color: transparent !important;
+    color: var(--color-interactive-primary);
+  }
+
   &:not(:disabled) {
     &:hover {
       background-color: var(--color-interactive-accent-hover);
@@ -31,6 +36,10 @@
       &.btn-priority-2 {
         background-color: var(--color-background-neutral-hover);
       }
+
+      &.btn-priority-3 {
+        color: var(--color-interactive-primary-hover);
+      }
     }
 
     &:active {
@@ -41,6 +50,11 @@
       &.btn-priority-2 {
         background-color: var(--color-background-neutral-active);
       }
+
+      &.btn-priority-3 {
+        color: var(--color-interactive-primary-active);
+        background-color: var(--color-background-screen-active) !important;
+      }
     }
 
     &:focus {

package/src/actionButton/ActionButton.story.tsx

@@ -16,21 +16,32 @@ type Story = StoryObj<typeof ActionButton>;
 export const Basic: Story = storyConfig(
   {
     render: (args) => (
-      <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
-        <ActionButton priority="primary" {...args}>
-          Primary label
-        </ActionButton>
-        <ActionButton priority="secondary" {...args}>
-          Secondary label
-        </ActionButton>
-        <ActionButton priority="primary" {...args} style={{ display: 'flex', gap: '0.4rem' }}>
-          <Settings />
-          Primary label
-        </ActionButton>
-        <ActionButton priority="secondary" {...args} style={{ display: 'flex', gap: '0.4rem' }}>
-          <Settings />
-          Secondary label
-        </ActionButton>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+        <div>
+          <ActionButton priority="primary" {...args}>
+            Primary label
+          </ActionButton>
+          <ActionButton priority="secondary" {...args}>
+            Secondary label
+          </ActionButton>
+          <ActionButton priority="tertiary" {...args}>
+            Tertiary label
+          </ActionButton>
+        </div>
+        <div>
+          <ActionButton priority="primary" {...args}>
+            <Settings />
+            Primary label
+          </ActionButton>
+          <ActionButton priority="secondary" {...args}>
+            <Settings />
+            Secondary label
+          </ActionButton>
+          <ActionButton priority="tertiary" {...args}>
+            <Settings />
+            Tertiary label
+          </ActionButton>
+        </div>
       </div>
     ),
   },

package/src/actionButton/ActionButton.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 
-import { Priority, PriorityPrimary, PrioritySecondary } from '../common';
+import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 
 export type ActionButtonProps = {
-  priority?: PriorityPrimary | PrioritySecondary;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   /**
    * @deprecated use `children` instead
    */
@@ -30,7 +30,11 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
       className={clsx(
         'np-action-btn',
         'np-text-body-default-bold',
-        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',
+        priority === Priority.TERTIARY
+          ? 'btn-priority-3'
+          : priority === Priority.SECONDARY
+            ? 'btn-priority-2'
+            : 'btn-priority-1',
         className,
       )}
       disabled={disabled}

package/src/actionOption/ActionOption.story.tsx

@@ -25,10 +25,14 @@ export const Basic: Story = {
   render: (args) => <ActionOption {...args} />,
 };
 
-export const WithSecondarypriority: Story = {
+export const WithSecondaryPriority: Story = {
   render: (args) => <ActionOption priority="secondary" {...args} />,
 };
 
+export const WithTertiaryPriority: Story = {
+  render: (args) => <ActionOption priority="tertiary" {...args} />,
+};
+
 export const WithContainerContent: Story = {
   render: (args) => (
     <>

package/src/actionOption/ActionOption.tsx

@@ -1,7 +1,13 @@
 import { clsx } from 'clsx';
 
 import ActionButton from '../actionButton';
-import { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';
+import {
+  CommonProps,
+  Priority,
+  PriorityPrimary,
+  PrioritySecondary,
+  PriorityTertiary,
+} from '../common';
 import Option from '../common/Option';
 
 export type ActionOptionProps = {
@@ -13,7 +19,7 @@ export type ActionOptionProps = {
   onClick: () => void;
   title: React.ReactNode;
   action: React.ReactNode;
-  priority?: PriorityPrimary | PrioritySecondary;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;
   as?: React.ElementType;

package/src/main.css

@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { fakeEvent } from '../../common/fakeEvents';
 
@@ -11,7 +11,7 @@ describe('Typeahead Option', () => {
 
   const labelHighlight = () => component.find(Highlight);
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
+  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
   const dropdownItem = () => component.find('.dropdown-item');
 
   beforeEach(() => {
@@ -21,13 +21,13 @@ describe('Typeahead Option', () => {
       },
     };
 
-    component = shallow(<TypeaheadOption {...props} />);
+    component = mount(<TypeaheadOption {...props} />);
   });
 
   it('renders a label', () => {
     const label = 'test';
     component.setProps({ option: { label } });
-    expect(labelHighlight().dive().text()).toStrictEqual(label);
+    expect(labelHighlight().text()).toStrictEqual(label);
   });
 
   it('renders a note', () => {
@@ -41,10 +41,11 @@ describe('Typeahead Option', () => {
     const label = 'test';
     const secondary = 'test note';
     component.setProps({ option: { label, secondary } });
-    expect(secondaryTextHighlight().dive().text()).toStrictEqual(secondary);
+    expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
   });
 
   it('highlights when selected', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });
@@ -53,6 +54,7 @@ describe('Typeahead Option', () => {
   });
 
   it('expect aria-selected to be true', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });

package/src/typeahead/util/highlight.tsx

@@ -7,16 +7,21 @@ export default function Highlight({
   value: string;
   query: string;
 }) {
+  const content = <HighlightContent value={value} query={query} />;
+  return className ? <span className={className}>{content}</span> : content;
+}
+
+function HighlightContent({ value, query }: { value: string; query: string }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <span className={className}>
+        <>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </span>
+        </>
       );
     }
   }