@transferwise/components 46.136.1 → 46.137.0

package/build/common/hooks/useContainerSize.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+
+/**
+ * Hook that returns a ref and a boolean indicating if the container
+ * has a width >= the specified breakpoint.
+ *
+ * Useful for synchronizing React state with CSS container queries.
+ *
+ * Uses content-box measurements to match CSS container query behavior
+ * (excludes padding and border).
+ *
+ * @param breakpoint - Minimum width in pixels
+ * @returns [ref, isAboveBreakpoint] tuple
+ */
+function useContainerSize(breakpoint) {
+  const ref = React.useRef(null);
+  const [isAboveBreakpoint, setIsAboveBreakpoint] = React.useState(false);
+  useResizeObserver.useResizeObserver(ref, entry => {
+    // Use contentRect.width to match CSS container query box model (content-box)
+    const inlineSize = entry.contentRect.width;
+    setIsAboveBreakpoint(inlineSize >= breakpoint);
+  }, 'content-box');
+  return [ref, isAboveBreakpoint];
+}
+
+exports.useContainerSize = useContainerSize;
+//# sourceMappingURL=useContainerSize.js.map

package/build/common/hooks/useContainerSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerSize.js","sources":["../../../src/common/hooks/useContainerSize.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useResizeObserver } from './useResizeObserver';\n\n/**\n * Hook that returns a ref and a boolean indicating if the container\n * has a width >= the specified breakpoint.\n *\n * Useful for synchronizing React state with CSS container queries.\n *\n * Uses content-box measurements to match CSS container query behavior\n * (excludes padding and border).\n *\n * @param breakpoint - Minimum width in pixels\n * @returns [ref, isAboveBreakpoint] tuple\n */\nexport function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);\n\n  useResizeObserver(\n    ref,\n    (entry) => {\n      // Use contentRect.width to match CSS container query box model (content-box)\n      const inlineSize = entry.contentRect.width;\n      setIsAboveBreakpoint(inlineSize >= breakpoint);\n    },\n    'content-box',\n  );\n\n  return [ref, isAboveBreakpoint];\n}\n"],"names":["useContainerSize","breakpoint","ref","useRef","isAboveBreakpoint","setIsAboveBreakpoint","useState","useResizeObserver","entry","inlineSize","contentRect","width"],"mappings":";;;;;AAIA;;;;;;;;;;;AAWG;AACG,SAAUA,gBAAgBA,CAACC,UAAkB,EAAA;AACjD,EAAA,MAAMC,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjEC,EAAAA,mCAAiB,CACfL,GAAG,EACFM,KAAK,IAAI;AACR;AACA,IAAA,MAAMC,UAAU,GAAGD,KAAK,CAACE,WAAW,CAACC,KAAK;AAC1CN,IAAAA,oBAAoB,CAACI,UAAU,IAAIR,UAAU,CAAC;EAChD,CAAC,EACD,aAAa,CACd;AAED,EAAA,OAAO,CAACC,GAAG,EAAEE,iBAAiB,CAAC;AACjC;;;;"}

package/build/common/hooks/useContainerSize.mjs

@@ -0,0 +1,28 @@
+import { useRef, useState } from 'react';
+import { useResizeObserver } from './useResizeObserver.mjs';
+
+/**
+ * Hook that returns a ref and a boolean indicating if the container
+ * has a width >= the specified breakpoint.
+ *
+ * Useful for synchronizing React state with CSS container queries.
+ *
+ * Uses content-box measurements to match CSS container query behavior
+ * (excludes padding and border).
+ *
+ * @param breakpoint - Minimum width in pixels
+ * @returns [ref, isAboveBreakpoint] tuple
+ */
+function useContainerSize(breakpoint) {
+  const ref = useRef(null);
+  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
+  useResizeObserver(ref, entry => {
+    // Use contentRect.width to match CSS container query box model (content-box)
+    const inlineSize = entry.contentRect.width;
+    setIsAboveBreakpoint(inlineSize >= breakpoint);
+  }, 'content-box');
+  return [ref, isAboveBreakpoint];
+}
+
+export { useContainerSize };
+//# sourceMappingURL=useContainerSize.mjs.map

package/build/common/hooks/useContainerSize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerSize.mjs","sources":["../../../src/common/hooks/useContainerSize.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useResizeObserver } from './useResizeObserver';\n\n/**\n * Hook that returns a ref and a boolean indicating if the container\n * has a width >= the specified breakpoint.\n *\n * Useful for synchronizing React state with CSS container queries.\n *\n * Uses content-box measurements to match CSS container query behavior\n * (excludes padding and border).\n *\n * @param breakpoint - Minimum width in pixels\n * @returns [ref, isAboveBreakpoint] tuple\n */\nexport function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);\n\n  useResizeObserver(\n    ref,\n    (entry) => {\n      // Use contentRect.width to match CSS container query box model (content-box)\n      const inlineSize = entry.contentRect.width;\n      setIsAboveBreakpoint(inlineSize >= breakpoint);\n    },\n    'content-box',\n  );\n\n  return [ref, isAboveBreakpoint];\n}\n"],"names":["useContainerSize","breakpoint","ref","useRef","isAboveBreakpoint","setIsAboveBreakpoint","useState","useResizeObserver","entry","inlineSize","contentRect","width"],"mappings":";;;AAIA;;;;;;;;;;;AAWG;AACG,SAAUA,gBAAgBA,CAACC,UAAkB,EAAA;AACjD,EAAA,MAAMC,GAAG,GAAGC,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAEjEC,EAAAA,iBAAiB,CACfL,GAAG,EACFM,KAAK,IAAI;AACR;AACA,IAAA,MAAMC,UAAU,GAAGD,KAAK,CAACE,WAAW,CAACC,KAAK;AAC1CN,IAAAA,oBAAoB,CAACI,UAAU,IAAIR,UAAU,CAAC;EAChD,CAAC,EACD,aAAa,CACd;AAED,EAAA,OAAO,CAACC,GAAG,EAAEE,iBAAiB,CAAC;AACjC;;;;"}

package/build/common/hooks/useResizeObserver.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var useEffectEvent = require('./useEffectEvent.js');
 
-function useResizeObserver(ref, callback) {
+function useResizeObserver(ref, callback, box = 'border-box') {
   const handleCallback = useEffectEvent.useEffectEvent(callback);
   React.useEffect(() => {
     if (ref.current != null) {
@@ -11,14 +11,14 @@ function useResizeObserver(ref, callback) {
         handleCallback(entry);
       });
       resizeObserver.observe(ref.current, {
-        box: 'border-box'
+        box
       });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref]);
+  }, [handleCallback, ref, box]);
 }
 
 exports.useResizeObserver = useResizeObserver;

package/build/common/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box: 'border-box' });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref]);\n}\n"],"names":["useResizeObserver","ref","callback","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","box","disconnect"],"mappings":";;;;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAAA;AAE9C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACF,QAAQ,CAAC;AAC/CG,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIJ,GAAG,CAACK,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACT,GAAG,CAACK,OAAO,EAAE;AAAEK,QAAAA,GAAG,EAAE;AAAY,OAAE,CAAC;AAC1D,MAAA,OAAO,MAAK;QACVJ,cAAc,CAACK,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;AACjB,EAAA,CAAC,EAAE,CAACT,cAAc,EAAEF,GAAG,CAAC,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n  box: ResizeObserverBoxOptions = 'border-box',\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref, box]);\n}\n"],"names":["useResizeObserver","ref","callback","box","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","disconnect"],"mappings":";;;;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAC9CC,MAAgC,YAAY,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/CI,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,GAAG,CAACM,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACV,GAAG,CAACM,OAAO,EAAE;AAAEJ,QAAAA;AAAG,OAAE,CAAC;AAC5C,MAAA,OAAO,MAAK;QACVK,cAAc,CAACI,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;EACjB,CAAC,EAAE,CAACR,cAAc,EAAEH,GAAG,EAAEE,GAAG,CAAC,CAAC;AAChC;;;;"}

package/build/common/hooks/useResizeObserver.mjs

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useEffectEvent } from './useEffectEvent.mjs';
 
-function useResizeObserver(ref, callback) {
+function useResizeObserver(ref, callback, box = 'border-box') {
   const handleCallback = useEffectEvent(callback);
   useEffect(() => {
     if (ref.current != null) {
@@ -9,14 +9,14 @@ function useResizeObserver(ref, callback) {
         handleCallback(entry);
       });
       resizeObserver.observe(ref.current, {
-        box: 'border-box'
+        box
       });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref]);
+  }, [handleCallback, ref, box]);
 }
 
 export { useResizeObserver };

package/build/common/hooks/useResizeObserver.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.mjs","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box: 'border-box' });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref]);\n}\n"],"names":["useResizeObserver","ref","callback","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","box","disconnect"],"mappings":";;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAAA;AAE9C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACF,QAAQ,CAAC;AAC/CG,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIJ,GAAG,CAACK,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACT,GAAG,CAACK,OAAO,EAAE;AAAEK,QAAAA,GAAG,EAAE;AAAY,OAAE,CAAC;AAC1D,MAAA,OAAO,MAAK;QACVJ,cAAc,CAACK,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;AACjB,EAAA,CAAC,EAAE,CAACT,cAAc,EAAEF,GAAG,CAAC,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useResizeObserver.mjs","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n  box: ResizeObserverBoxOptions = 'border-box',\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref, box]);\n}\n"],"names":["useResizeObserver","ref","callback","box","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","disconnect"],"mappings":";;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAC9CC,MAAgC,YAAY,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/CI,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIL,GAAG,CAACM,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACV,GAAG,CAACM,OAAO,EAAE;AAAEJ,QAAAA;AAAG,OAAE,CAAC;AAC5C,MAAA,OAAO,MAAK;QACVK,cAAc,CAACI,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;EACjB,CAAC,EAAE,CAACR,cAAc,EAAEH,GAAG,EAAEE,GAAG,CAAC,CAAC;AAChC;;;;"}

package/build/criticalBanner/CriticalCommsBanner.js

@@ -68,6 +68,9 @@ const iconBySentiment = {
     })
   })
 };
+/**
+ * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
+ */
 function CriticalCommsBanner({
   title,
   subtitle,

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"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    target?: HTMLAnchorElement['target'];\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={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\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","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,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;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"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    target?: HTMLAnchorElement['target'];\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\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\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={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\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","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,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;;AAEG;AACH,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;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,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

@@ -64,6 +64,9 @@ const iconBySentiment = {
     })
   })
 };
+/**
+ * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
+ */
 function CriticalCommsBanner({
   title,
   subtitle,

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"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    target?: HTMLAnchorElement['target'];\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={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\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","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,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;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"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    target?: HTMLAnchorElement['target'];\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\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\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={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\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","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,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;;AAEG;AACH,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;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/field/Field.js

@@ -27,17 +27,18 @@ require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
-require('../statusIcon/StatusIcon.js');
 require('../body/Body.js');
 require('../button/Button.resolver.js');
+require('../prompt/PrimitivePrompt/PrimitivePrompt.js');
 require('../badge/Badge.js');
 require('@wise/art');
+require('../statusIcon/StatusIcon.js');
 require('@transferwise/neptune-validation');
 require('../provider/direction/DirectionProvider.js');
-require('../sentimentSurface/SentimentSurface.js');
 require('../primitives/PrimitiveButton/PrimitiveButton.js');
 require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../link/Link.messages.js');
+require('../prompt/common/Expander/Expander.messages.js');
 var contexts = require('../inputs/contexts.js');
 var Label = require('../label/Label.js');
 

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/field/Field.mjs

@@ -25,17 +25,18 @@ import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
-import '../statusIcon/StatusIcon.mjs';
 import '../body/Body.mjs';
 import '../button/Button.resolver.mjs';
+import '../prompt/PrimitivePrompt/PrimitivePrompt.mjs';
 import '../badge/Badge.mjs';
 import '@wise/art';
+import '../statusIcon/StatusIcon.mjs';
 import '@transferwise/neptune-validation';
 import '../provider/direction/DirectionProvider.mjs';
-import '../sentimentSurface/SentimentSurface.mjs';
 import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
 import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../link/Link.messages.mjs';
+import '../prompt/common/Expander/Expander.messages.mjs';
 import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
 import { Label as LabelNamespace } from '../label/Label.mjs';
 

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.js

@@ -20,6 +20,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.Expander.collapseAriaLabel": "Collapse",
+	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -16,6 +16,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.Expander.collapseAriaLabel": "Collapse",
+	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.js

@@ -55,6 +55,7 @@ var InlineAlert = require('./inlineAlert/InlineAlert.js');
 var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
 var ActionPrompt = require('./prompt/ActionPrompt/ActionPrompt.js');
 var InfoPrompt = require('./prompt/InfoPrompt/InfoPrompt.js');
+var CriticalBanner = require('./prompt/CriticalBanner/CriticalBanner.js');
 var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
 var Input = require('./inputs/Input.js');
 var InputGroup = require('./inputs/InputGroup.js');
@@ -223,6 +224,7 @@ exports.InlineAlert = InlineAlert.default;
 exports.InlinePrompt = InlinePrompt.InlinePrompt;
 exports.ActionPrompt = ActionPrompt.ActionPrompt;
 exports.InfoPrompt = InfoPrompt.InfoPrompt;
+exports.CriticalBanner = CriticalBanner.CriticalBanner;
 exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
 exports.Input = Input.Input;
 exports.InputGroup = InputGroup.InputGroup;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -53,6 +53,7 @@ export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
 export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
 export { ActionPrompt } from './prompt/ActionPrompt/ActionPrompt.mjs';
 export { InfoPrompt } from './prompt/InfoPrompt/InfoPrompt.mjs';
+export { CriticalBanner } from './prompt/CriticalBanner/CriticalBanner.mjs';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
 export { Input } from './inputs/Input.mjs';
 export { InputGroup } from './inputs/InputGroup.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.js

@@ -28,17 +28,18 @@ require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ListItemContext = require('../ListItemContext.js');
 var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
-require('../../statusIcon/StatusIcon.js');
 require('../../body/Body.js');
 require('../../button/Button.resolver.js');
+require('../../prompt/PrimitivePrompt/PrimitivePrompt.js');
 require('../../badge/Badge.js');
 require('@wise/art');
+require('../../statusIcon/StatusIcon.js');
 require('@transferwise/neptune-validation');
 require('../../provider/direction/DirectionProvider.js');
-require('../../sentimentSurface/SentimentSurface.js');
 require('../../primitives/PrimitiveButton/PrimitiveButton.js');
 require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../../link/Link.messages.js');
+require('../../prompt/common/Expander/Expander.messages.js');
 
 const Prompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -26,17 +26,18 @@ import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { ListItemContext } from '../ListItemContext.mjs';
 import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
-import '../../statusIcon/StatusIcon.mjs';
 import '../../body/Body.mjs';
 import '../../button/Button.resolver.mjs';
+import '../../prompt/PrimitivePrompt/PrimitivePrompt.mjs';
 import '../../badge/Badge.mjs';
 import '@wise/art';
+import '../../statusIcon/StatusIcon.mjs';
 import '@transferwise/neptune-validation';
 import '../../provider/direction/DirectionProvider.mjs';
-import '../../sentimentSurface/SentimentSurface.mjs';
 import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
 import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../../link/Link.messages.mjs';
+import '../../prompt/common/Expander/Expander.messages.mjs';
 
 const Prompt = ({
   sentiment = Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}