@transferwise/components 0.0.0-experimental-371ff27 → 0.0.0-experimental-8496ab9

package/build/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:48 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:48 GMT
  */
 
 .np-theme-personal {
@@ -394,7 +394,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -644,7 +644,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -894,7 +894,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:48 GMT
  */
 
 .np-theme-personal--dark {
@@ -1144,7 +1144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-platform {
@@ -1328,7 +1328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1512,7 +1512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-business {
@@ -1697,7 +1697,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-business--dark {
@@ -1882,7 +1882,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2067,7 +2067,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 06 May 2026 17:52:54 GMT
+ * Generated on Wed, 06 May 2026 21:47:49 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4596,7 +4596,7 @@ a.text-inverse:focus {
   content: none;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal {
     --delta: 2;
     --size-4: calc(4px / var(--delta));
@@ -13974,7 +13974,7 @@ li > a > .currency-flag:first-child {
   color: var(--color-content-secondary);
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;
@@ -21202,7 +21202,7 @@ button.close {
   padding-right: initial;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .media-right,
   .media-left {
     padding-left: 32px;
@@ -21446,7 +21446,7 @@ button.close {
   }
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .modal-sm {
     width: 300px;
     margin: 32px auto;
@@ -22767,13 +22767,13 @@ button.popover-close {
   }
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .popover-promotion .popover-image {
     width: 80%;
   }
 }
 
-@media (min-width: 320px) and (max-width: 1159.98px) {
+@media (min-width: 320.02px) and (max-width: 1159.98px) {
   .popover-promotion .popover-image {
     width: 60%;
   }
@@ -26367,7 +26367,7 @@ a[data-toggle="tooltip"] {
   border-bottom: 1px solid var(--color-border-neutral);
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }
@@ -26454,7 +26454,7 @@ a[data-toggle="tooltip"] {
   border: none;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-action-btn {
     height: 40px;
     height: var(--size-40);
@@ -27457,14 +27457,14 @@ a[data-toggle="tooltip"] {
   cursor: default;
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-card--has-icon .np-card__content {
     padding: 24px 72px;
     padding: var(--size-24) var(--size-72);
   }
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin: 0 72px;
     margin: 0 var(--size-72);
@@ -27773,7 +27773,7 @@ a[data-toggle="tooltip"] {
   transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-chip {
     height: 40px;
     height: var(--size-40);
@@ -27928,7 +27928,7 @@ a[data-toggle="tooltip"] {
   padding-right: var(--size-24);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
     padding-right: 48px;
     padding-right: var(--size-48);
@@ -28235,7 +28235,7 @@ a[data-toggle="tooltip"] {
   transition: background-color 0.1s ease;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button {
     height: 64px;
     height: var(--size-64);
@@ -28252,7 +28252,7 @@ a[data-toggle="tooltip"] {
   flex-shrink: 0;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-small {
     height: 48px;
     height: var(--size-48);
@@ -28269,7 +28269,7 @@ a[data-toggle="tooltip"] {
   flex-shrink: 0;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--large {
     height: 80px;
     height: var(--size-80);
@@ -28286,7 +28286,7 @@ a[data-toggle="tooltip"] {
   flex-shrink: 0;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-large {
     height: 96px;
     height: var(--size-96);
@@ -28388,7 +28388,7 @@ button.np-option {
   line-height: var(--size-48);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-option .circle-sm {
     width: 96px;
     width: var(--size-96);
@@ -28434,7 +28434,7 @@ button.np-option {
   max-width: fit-content;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);
@@ -28579,7 +28579,7 @@ button.np-option {
   padding: var(--size-4);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .tw-date-lookup-calendar > tbody > tr > td {
     padding: 0;
   }
@@ -28605,7 +28605,7 @@ button.np-option {
   color: var(--color-content-primary);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .tw-date-lookup-calendar > tbody > tr > td button {
     padding: 0;
   }
@@ -28897,7 +28897,7 @@ button.np-option {
   padding: var(--size-24);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-drawer .np-drawer-header {
     padding: 16px;
     padding: var(--size-16);
@@ -29301,7 +29301,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: var(--size-32) !important;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
@@ -29319,7 +29319,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: var(--size-48) !important;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
@@ -31066,7 +31066,7 @@ button.np-link {
   }
 }
 
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .tw-modal-dialog.tw-modal-sm {
     width: 300px;
   }
@@ -31094,7 +31094,7 @@ button.np-link {
 
 @media (min-width: 1160px) {
   .tw-modal-dialog.tw-modal-xl {
-    width: 2000px;
+    width: 1000px;
   }
 }
 
@@ -32122,28 +32122,28 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper {
     padding-top: 4px;
     padding-top: var(--size-4);
   }
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
     padding-top: 8px;
     padding-top: var(--size-8);
   }
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
     padding-top: 8px;
     padding-top: var(--size-8);
   }
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
     padding-top: 12px;
     padding-top: var(--size-12);
@@ -32259,7 +32259,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-top: 3px;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .wds-critical-banner__text-wrapper {
     padding-top: 0;
   }
@@ -33897,7 +33897,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin: 150px auto;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-table-cell .tw-loader {
     margin-top: 70px;
     margin-bottom: 70px;
@@ -34314,7 +34314,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-right: var(--size-16);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
     padding-right: 32px;
     padding-right: var(--size-32);
@@ -34543,7 +34543,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   flex: 1;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-upload-input__item .np-upload-input__item-content {
     padding-right: 64px;
     padding-right: var(--size-64);
@@ -34588,7 +34588,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   top: var(--buttonTopRightOffset);
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-upload-input__item .np-upload-input__item-action {
     --iconSize: var(--size-48);
     --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
@@ -34689,7 +34689,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   left: 0;
 }
 
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-upload-input__item .np-upload-input-errors > li {
     padding-left: 32px;
     padding-left: var(--size-32);

package/build/statusIcon/StatusIcon.js

@@ -83,7 +83,7 @@ const StatusIcon = ({
     Icon,
     defaultIconLabel
   } = iconMetaBySentiment[sentiment$1];
-  const isTinyViewport = useMedia.useMedia(`(width < ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
+  const isTinyViewport = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
     size: isTinyViewport && size < 40 ? 32 : size,

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(width < ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -79,7 +79,7 @@ const StatusIcon = ({
     Icon,
     defaultIconLabel
   } = iconMetaBySentiment[sentiment];
-  const isTinyViewport = useMedia(`(width < ${Breakpoint.EXTRA_SMALL}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return /*#__PURE__*/jsx(Circle, {
     size: isTinyViewport && size < 40 ? 32 : size,

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(width < ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/styles/accordion/Accordion.css

@@ -18,7 +18,7 @@
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }

package/build/styles/actionButton/ActionButton.css

@@ -21,7 +21,7 @@
   border-radius: var(--radius-large);
   border: none;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-action-btn {
     height: 40px;
     height: var(--size-40);

package/build/styles/card/Card.css

@@ -24,13 +24,13 @@
 .np-card--inactive .decision {
   cursor: default;
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-card--has-icon .np-card__content {
     padding: 24px 72px;
     padding: var(--size-24) var(--size-72);
   }
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin: 0 72px;
     margin: 0 var(--size-72);

package/build/styles/chips/Chip.css

@@ -14,7 +14,7 @@
   padding: 0 var(--size-12);
   transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-chip {
     height: 40px;
     height: var(--size-40);
@@ -141,7 +141,7 @@
   padding-right: 24px;
   padding-right: var(--size-24);
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
     padding-right: 48px;
     padding-right: var(--size-48);

package/build/styles/common/Option/Option.css

@@ -68,7 +68,7 @@ button.np-option {
   line-height: 48px;
   line-height: var(--size-48);
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-option .circle-sm {
     width: 96px;
     width: var(--size-96);
@@ -109,7 +109,7 @@ button.np-option {
   max-width: -moz-fit-content;
   max-width: fit-content;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);

package/build/styles/common/closeButton/CloseButton.css

@@ -31,7 +31,7 @@
   border-radius: var(--radius-full);
   transition: background-color 0.1s ease;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button {
     height: 64px;
     height: var(--size-64);
@@ -46,7 +46,7 @@
   width: var(--size-24);
   flex-shrink: 0;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-small {
     height: 48px;
     height: var(--size-48);
@@ -61,7 +61,7 @@
   width: var(--size-40);
   flex-shrink: 0;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--large {
     height: 80px;
     height: var(--size-80);
@@ -76,7 +76,7 @@
   width: var(--size-48);
   flex-shrink: 0;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-large {
     height: 96px;
     height: var(--size-96);

package/build/styles/css/accordion.css

@@ -137,7 +137,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;
@@ -210,7 +210,7 @@
   padding-right: 0;
   padding-right: initial;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .media-right,
   .media-left {
     padding-left: 32px;

package/build/styles/css/decision.css

@@ -102,7 +102,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/build/styles/css/media.css

@@ -39,7 +39,7 @@
   padding-right: 0;
   padding-right: initial;
 }
-@media (max-width: 319.98px) {
+@media (max-width: 320px) {
   .media-right,
   .media-left {
     padding-left: 32px;

package/build/styles/css/modals.css

@@ -171,7 +171,7 @@
     margin: 32px 24px;
   }
 }
-@media (min-width: 320px) {
+@media (min-width: 320.02px) {
   .modal-sm {
     width: 300px;
     margin: 32px auto;