@transferwise/components 46.129.0 → 46.130.0

package/build/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}

package/build/card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}

package/build/common/{card/Card.js → baseCard/BaseCard.js}

@@ -8,7 +8,7 @@ var CloseButton = require('../closeButton/CloseButton.js');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const Card = /*#__PURE__*/React.forwardRef(({
+const BaseCard = /*#__PURE__*/React.forwardRef(({
   className,
   children = null,
   id,
@@ -41,7 +41,7 @@ const Card = /*#__PURE__*/React.forwardRef(({
     }), children]
   });
 });
-Card.displayName = 'Card';
+BaseCard.displayName = 'Card';
 
-exports.default = Card;
-//# sourceMappingURL=Card.js.map
+exports.default = BaseCard;
+//# sourceMappingURL=BaseCard.js.map

package/build/common/baseCard/BaseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCard.js","sources":["../../../src/common/baseCard/BaseCard.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface BaseCardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * BaseCard component.\n *\n * A BaseCard is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <BaseCard>\n *   <p>Hello World!</p>\n * </BaseCard>\n */\nconst BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nBaseCard.displayName = 'Card';\n\nexport default BaseCard;\n"],"names":["BaseCard","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,QAAQ,gBAAGC,gBAAU,CACzB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,QAAQ,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/{card/Card.mjs → baseCard/BaseCard.mjs}

@@ -4,7 +4,7 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
 import { stopPropagation } from '../domHelpers/documentIosClick.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const Card = /*#__PURE__*/forwardRef(({
+const BaseCard = /*#__PURE__*/forwardRef(({
   className,
   children = null,
   id,
@@ -37,7 +37,7 @@ const Card = /*#__PURE__*/forwardRef(({
     }), children]
   });
 });
-Card.displayName = 'Card';
+BaseCard.displayName = 'Card';
 
-export { Card as default };
-//# sourceMappingURL=Card.mjs.map
+export { BaseCard as default };
+//# sourceMappingURL=BaseCard.mjs.map

package/build/common/baseCard/BaseCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCard.mjs","sources":["../../../src/common/baseCard/BaseCard.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface BaseCardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * BaseCard component.\n *\n * A BaseCard is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <BaseCard>\n *   <p>Hello World!</p>\n * </BaseCard>\n */\nconst BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nBaseCard.displayName = 'Card';\n\nexport default BaseCard;\n"],"names":["BaseCard","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,QAAQ,gBAAGC,UAAU,CACzB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,QAAQ,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/criticalBanner/CriticalCommsBanner.js

@@ -2,17 +2,81 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Alert = require('../alert/Alert.js');
+var icons = require('@transferwise/icons');
 var clsx = require('clsx');
+var Alert = require('../alert/Alert.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+var sentiment = require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('react');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var Circle = require('../common/circle/Circle.js');
+var SentimentSurface = require('../sentimentSurface/SentimentSurface.js');
 
+const makeSurface = sentiment => {
+  const Surface = props => /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
+    as: "span",
+    emphasis: "elevated",
+    sentiment: sentiment,
+    ...props
+  });
+  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
+  return Surface;
+};
+const iconBySentiment = {
+  [sentiment.Sentiment.NEGATIVE]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
+    as: makeSurface(sentiment.Sentiment.NEGATIVE),
+    size: 32,
+    className: "status-circle negative",
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
+      className: "status-icon light"
+    })
+  }),
+  [sentiment.Sentiment.WARNING]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
+    as: makeSurface(sentiment.Sentiment.WARNING),
+    size: 32,
+    className: "status-circle warning",
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
+      className: "status-icon dark"
+    })
+  }),
+  [sentiment.Sentiment.NEUTRAL]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
+    as: makeSurface(sentiment.Sentiment.NEUTRAL),
+    size: 32,
+    className: "status-circle neutral",
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.ClockBorderless, {
+      className: "status-icon dark"
+    })
+  })
+};
 function CriticalCommsBanner({
   title,
   subtitle,
   action,
+  sentiment: sentiment$1 = sentiment.Sentiment.NEGATIVE,
   className
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
+    sentiment: sentiment$1,
+    emphasis: "elevated",
     className: clsx.clsx('critical-comms', className),
     children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
       title: title,
@@ -23,7 +87,8 @@ function CriticalCommsBanner({
         text: action?.label
       },
       className: className,
-      type: "warning"
+      type: sentiment$1,
+      icon: iconBySentiment[sentiment$1]
     })
   });
 }

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;;;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,SAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,cAAA,CAACG,aAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -1,16 +1,80 @@
-import Alert from '../alert/Alert.mjs';
+import { ClockBorderless, Alert } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import Alert$1 from '../alert/Alert.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import { Sentiment } from '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import 'react';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
+import Circle from '../common/circle/Circle.mjs';
+import SentimentSurface from '../sentimentSurface/SentimentSurface.mjs';
 
+const makeSurface = sentiment => {
+  const Surface = props => /*#__PURE__*/jsx(SentimentSurface, {
+    as: "span",
+    emphasis: "elevated",
+    sentiment: sentiment,
+    ...props
+  });
+  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
+  return Surface;
+};
+const iconBySentiment = {
+  [Sentiment.NEGATIVE]: /*#__PURE__*/jsx(Circle, {
+    as: makeSurface(Sentiment.NEGATIVE),
+    size: 32,
+    className: "status-circle negative",
+    children: /*#__PURE__*/jsx(Alert, {
+      className: "status-icon light"
+    })
+  }),
+  [Sentiment.WARNING]: /*#__PURE__*/jsx(Circle, {
+    as: makeSurface(Sentiment.WARNING),
+    size: 32,
+    className: "status-circle warning",
+    children: /*#__PURE__*/jsx(Alert, {
+      className: "status-icon dark"
+    })
+  }),
+  [Sentiment.NEUTRAL]: /*#__PURE__*/jsx(Circle, {
+    as: makeSurface(Sentiment.NEUTRAL),
+    size: 32,
+    className: "status-circle neutral",
+    children: /*#__PURE__*/jsx(ClockBorderless, {
+      className: "status-icon dark"
+    })
+  })
+};
 function CriticalCommsBanner({
   title,
   subtitle,
   action,
+  sentiment = Sentiment.NEGATIVE,
   className
 }) {
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx(SentimentSurface, {
+    sentiment: sentiment,
+    emphasis: "elevated",
     className: clsx('critical-comms', className),
-    children: /*#__PURE__*/jsx(Alert, {
+    children: /*#__PURE__*/jsx(Alert$1, {
       title: title,
       message: subtitle,
       action: {
@@ -19,7 +83,8 @@ function CriticalCommsBanner({
         text: action?.label
       },
       className: className,
-      type: "warning"
+      type: sentiment,
+      icon: iconBySentiment[sentiment]
     })
   });
 }

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,IAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,GAAA,CAACG,KAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/index.js

@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
 var Button_resolver = require('./button/Button.resolver.js');
 var IconButton = require('./iconButton/IconButton.js');
 var Carousel = require('./carousel/Carousel.js');
-var Card$1 = require('./card/Card.js');
+var Card = require('./card/Card.js');
 var Checkbox = require('./checkbox/Checkbox.js');
 var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
 var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
 var CircularButton = require('./circularButton/CircularButton.js');
 var Option = require('./common/Option/Option.js');
 var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
-var Card = require('./common/card/Card.js');
+var BaseCard = require('./common/baseCard/BaseCard.js');
 var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
 var DateInput = require('./dateInput/DateInput.js');
 var DateLookup = require('./dateLookup/DateLookup.js');
@@ -173,7 +173,7 @@ exports.Body = Body.default;
 exports.Button = Button_resolver.default;
 exports.IconButton = IconButton.default;
 exports.Carousel = Carousel.default;
-exports.Card = Card$1.default;
+exports.Card = Card.default;
 exports.Checkbox = Checkbox.default;
 exports.CheckboxButton = CheckboxButton.default;
 exports.CheckboxOption = CheckboxOption.default;
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
 exports.CircularButton = CircularButton.default;
 exports.Option = Option.default;
 exports.BottomSheet = BottomSheet.default;
-exports.BaseCard = Card.default;
+exports.BaseCard = BaseCard.default;
 exports.CriticalCommsBanner = CriticalCommsBanner.default;
 exports.DateInput = DateInput.default;
 exports.DateLookup = DateLookup.default;

package/build/index.mjs

@@ -31,7 +31,7 @@ export { default as Chip } from './chips/Chip.mjs';
 export { default as CircularButton } from './circularButton/CircularButton.mjs';
 export { default as Option } from './common/Option/Option.mjs';
 export { default as BottomSheet } from './common/bottomSheet/BottomSheet.mjs';
-export { default as BaseCard } from './common/card/Card.mjs';
+export { default as BaseCard } from './common/baseCard/BaseCard.mjs';
 export { default as CriticalCommsBanner } from './criticalBanner/CriticalCommsBanner.mjs';
 export { default as DateInput } from './dateInput/DateInput.mjs';
 export { default as DateLookup } from './dateLookup/DateLookup.mjs';

package/build/main.css

@@ -485,37 +485,55 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
+}
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);
@@ -1969,6 +1987,55 @@
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }
+/* @define Card */
+.np-Card {
+  --Card-background-color: var(--color-background-neutral);
+  --Card-border-radius: var(--size-32);
+  --Card-flex-gap: var(--size-16);
+  --Card-padding: var(--size-24);
+  --Card-closeButton-position: var(--size-16);
+  --Card-max-width: initial;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--Card-background-color);
+  border-radius: 32px;
+  border-radius: var(--Card-border-radius);
+  gap: 16px;
+  gap: var(--Card-flex-gap);
+  padding: 24px;
+  padding: var(--Card-padding);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .np-Card {
+    max-width: var(--Card-max-width);
+  }
+}
+.np-Card.is-disabled .np-Card-closeButton {
+  cursor: not-allowed;
+}
+.np-theme-personal--dark .np-Card {
+  --Card-background-color: var(--color-background-elevated);
+}
+.np-Card-closeButton {
+  position: absolute;
+  z-index: 100;
+  top: var(--Card-closeButton-position);
+  right: var(--Card-closeButton-position);
+}
+[dir="rtl"] .np-Card-closeButton {
+  left: var(--Card-closeButton-position);
+  right: auto;
+}
+.np-Card--small {
+  --Card-border-radius: var(--size-16);
+  --Card-closeButton-position: var(--size-8);
+  --Card-padding: var(--size-16);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -2022,55 +2089,6 @@
   padding: 0 16px 16px;
   padding: 0 var(--size-16) var(--size-16);
 }
-/* @define Card */
-.np-Card {
-  --Card-background-color: var(--color-background-neutral);
-  --Card-border-radius: var(--size-32);
-  --Card-flex-gap: var(--size-16);
-  --Card-padding: var(--size-24);
-  --Card-closeButton-position: var(--size-16);
-  --Card-max-width: initial;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--Card-background-color);
-  border-radius: 32px;
-  border-radius: var(--Card-border-radius);
-  gap: 16px;
-  gap: var(--Card-flex-gap);
-  padding: 24px;
-  padding: var(--Card-padding);
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-@media (min-width: 576px) {
-  .np-Card {
-    max-width: var(--Card-max-width);
-  }
-}
-.np-Card.is-disabled .np-Card-closeButton {
-  cursor: not-allowed;
-}
-.np-theme-personal--dark .np-Card {
-  --Card-background-color: var(--color-background-elevated);
-}
-.np-Card-closeButton {
-  position: absolute;
-  z-index: 100;
-  top: var(--Card-closeButton-position);
-  right: var(--Card-closeButton-position);
-}
-[dir="rtl"] .np-Card-closeButton {
-  left: var(--Card-closeButton-position);
-  right: auto;
-}
-.np-Card--small {
-  --Card-border-radius: var(--size-16);
-  --Card-closeButton-position: var(--size-8);
-  --Card-padding: var(--size-16);
-}
 .np-close-button {
   transition: color 0.15s ease-in-out;
   color: #00a2dd;
@@ -3692,7 +3710,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/build/promoCard/PromoCard.js

@@ -28,7 +28,7 @@ require('../common/fileType.js');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Card = require('../common/card/Card.js');
+var BaseCard = require('../common/baseCard/BaseCard.js');
 var Display = require('../display/Display.js');
 var Image = require('../image/Image.js');
 var Title = require('../title/Title.js');
@@ -175,7 +175,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Card.default, {
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseCard.default, {
     ...commonProps,
     ...checkedProps,
     ...props,