@transferwise/components 46.136.1 → 46.137.0

package/build/logo/Logo.js

@@ -3,32 +3,65 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-var logoAssets = require('./logo-assets.js');
+var logoAssets$1 = require('./logo-assets.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+var breakpoint = require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/formatting');
+require('@transferwise/icons');
+require('react');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var useScreenSize = require('../common/hooks/useScreenSize.js');
 
-const svgPaths = {
-  WISE: logoAssets.LogoWise,
-  WISE_BUSINESS: logoAssets.LogoWise,
-  WISE_INVERSE: logoAssets.LogoWiseInverse,
-  WISE_BUSINESS_INVERSE: logoAssets.LogoWiseInverse,
-  WISE_PLATFORM: logoAssets.LogoWisePlatform,
-  WISE_PLATFORM_INVERSE: logoAssets.LogoWisePlatformInverse,
-  WISE_FLAG: logoAssets.LogoFlag,
-  WISE_FLAG_INVERSE: logoAssets.LogoFlagInverse,
-  WISE_FLAG_PLATFORM: logoAssets.LogoFlagPlatform,
-  WISE_FLAG_PLATFORM_INVERSE: logoAssets.LogoFlagPlatformInverse
-};
 exports.LogoType = void 0;
 (function (LogoType) {
   LogoType["WISE"] = "WISE";
   LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
   LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
 })(exports.LogoType || (exports.LogoType = {}));
+exports.LogoDisplay = void 0;
+(function (LogoDisplay) {
+  LogoDisplay["RESPONSIVE"] = "responsive";
+  LogoDisplay["COMPACT"] = "compact";
+  LogoDisplay["FULL"] = "full";
+})(exports.LogoDisplay || (exports.LogoDisplay = {}));
+exports.LogoFormat = void 0;
+(function (LogoFormat) {
+  LogoFormat["DEFAULT"] = "default";
+  LogoFormat["PRIMARY_LOCKUP"] = "primary-lockup";
+  LogoFormat["SECONDARY_LOCKUP"] = "secondary-lockup";
+})(exports.LogoFormat || (exports.LogoFormat = {}));
 const labelByType = {
   WISE: 'Wise',
   WISE_BUSINESS: 'Wise Business',
   WISE_PLATFORM: 'Wise Platform'
 };
+const logoAssets = {
+  FastFlag: logoAssets$1.FastFlag,
+  WiseLogo: logoAssets$1.WiseLogo,
+  WiseBusinessPrimary: logoAssets$1.WiseBusinessPrimary,
+  WiseBusinessSecondary: logoAssets$1.WiseBusinessSecondary,
+  WisePlatformPrimary: logoAssets$1.WisePlatformPrimary,
+  WisePlatformSecondary: logoAssets$1.WisePlatformSecondary
+};
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
  * and the full wordmark on ≥576px (small breakpoint and above).
@@ -37,22 +70,41 @@ const labelByType = {
  */
 function Logo({
   className,
-  inverse,
-  type = 'WISE'
+  type = 'WISE',
+  format = 'default',
+  display = 'responsive',
+  'aria-label': ariaLabel
 }) {
-  const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
-  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    "aria-label": labelByType[type],
+  const isScreenSm = !useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
+  const compact = display === 'compact' || display === 'responsive' && isScreenSm;
+  const assetName = compact ? 'FastFlag' : getAssetName(type, format);
+  const Asset = logoAssets[assetName];
+  const {
+    width,
+    height
+  } = logoAssets$1.logoAssetsDimensions[assetName];
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: clsx.clsx('np-logo', className),
     role: "img",
-    className: clsx.clsx(className, 'np-logo'),
-    children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
-      className: "np-logo-svg np-logo-svg--size-sm"
-    }), /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
-      className: "np-logo-svg np-logo-svg--size-md"
-    })]
+    "aria-label": ariaLabel ?? labelByType[type],
+    style: {
+      '--wds-logo-width': `${width}px`,
+      '--wds-logo-height': `${height}px`
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Asset, {})
   });
 }
+function getAssetName(type, format) {
+  if (format !== 'default') {
+    if (type === 'WISE_BUSINESS') {
+      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
+    }
+    if (type === 'WISE_PLATFORM') {
+      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
+    }
+  }
+  return 'WiseLogo';
+}
 
 exports.default = Logo;
 //# sourceMappingURL=Logo.js.map

package/build/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const { width, height } = logoAssetsDimensions[assetName];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":"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"}

package/build/logo/Logo.mjs

@@ -1,30 +1,63 @@
 import { clsx } from 'clsx';
-import { LogoFlagPlatformInverse, LogoFlagPlatform, LogoFlagInverse, LogoFlag, LogoWisePlatformInverse, LogoWisePlatform, LogoWiseInverse, LogoWise } from './logo-assets.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { logoAssetsDimensions, WisePlatformSecondary, WisePlatformPrimary, WiseBusinessSecondary, WiseBusinessPrimary, WiseLogo, FastFlag } from './logo-assets.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
+import '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/formatting';
+import '@transferwise/icons';
+import 'react';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
 
-const svgPaths = {
-  WISE: LogoWise,
-  WISE_BUSINESS: LogoWise,
-  WISE_INVERSE: LogoWiseInverse,
-  WISE_BUSINESS_INVERSE: LogoWiseInverse,
-  WISE_PLATFORM: LogoWisePlatform,
-  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,
-  WISE_FLAG: LogoFlag,
-  WISE_FLAG_INVERSE: LogoFlagInverse,
-  WISE_FLAG_PLATFORM: LogoFlagPlatform,
-  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse
-};
 var LogoType;
 (function (LogoType) {
   LogoType["WISE"] = "WISE";
   LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
   LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
 })(LogoType || (LogoType = {}));
+var LogoDisplay;
+(function (LogoDisplay) {
+  LogoDisplay["RESPONSIVE"] = "responsive";
+  LogoDisplay["COMPACT"] = "compact";
+  LogoDisplay["FULL"] = "full";
+})(LogoDisplay || (LogoDisplay = {}));
+var LogoFormat;
+(function (LogoFormat) {
+  LogoFormat["DEFAULT"] = "default";
+  LogoFormat["PRIMARY_LOCKUP"] = "primary-lockup";
+  LogoFormat["SECONDARY_LOCKUP"] = "secondary-lockup";
+})(LogoFormat || (LogoFormat = {}));
 const labelByType = {
   WISE: 'Wise',
   WISE_BUSINESS: 'Wise Business',
   WISE_PLATFORM: 'Wise Platform'
 };
+const logoAssets = {
+  FastFlag,
+  WiseLogo,
+  WiseBusinessPrimary,
+  WiseBusinessSecondary,
+  WisePlatformPrimary,
+  WisePlatformSecondary
+};
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
  * and the full wordmark on ≥576px (small breakpoint and above).
@@ -33,22 +66,41 @@ const labelByType = {
  */
 function Logo({
   className,
-  inverse,
-  type = 'WISE'
+  type = 'WISE',
+  format = 'default',
+  display = 'responsive',
+  'aria-label': ariaLabel
 }) {
-  const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
-  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  return /*#__PURE__*/jsxs("span", {
-    "aria-label": labelByType[type],
+  const isScreenSm = !useScreenSize(Breakpoint.SMALL);
+  const compact = display === 'compact' || display === 'responsive' && isScreenSm;
+  const assetName = compact ? 'FastFlag' : getAssetName(type, format);
+  const Asset = logoAssets[assetName];
+  const {
+    width,
+    height
+  } = logoAssetsDimensions[assetName];
+  return /*#__PURE__*/jsx("span", {
+    className: clsx('np-logo', className),
     role: "img",
-    className: clsx(className, 'np-logo'),
-    children: [/*#__PURE__*/jsx(LogoSm, {
-      className: "np-logo-svg np-logo-svg--size-sm"
-    }), /*#__PURE__*/jsx(LogoMd, {
-      className: "np-logo-svg np-logo-svg--size-md"
-    })]
+    "aria-label": ariaLabel ?? labelByType[type],
+    style: {
+      '--wds-logo-width': `${width}px`,
+      '--wds-logo-height': `${height}px`
+    },
+    children: /*#__PURE__*/jsx(Asset, {})
   });
 }
+function getAssetName(type, format) {
+  if (format !== 'default') {
+    if (type === 'WISE_BUSINESS') {
+      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
+    }
+    if (type === 'WISE_PLATFORM') {
+      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
+    }
+  }
+  return 'WiseLogo';
+}
 
-export { LogoType, Logo as default };
+export { LogoDisplay, LogoFormat, LogoType, Logo as default };
 //# sourceMappingURL=Logo.mjs.map

package/build/logo/Logo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const { width, height } = logoAssetsDimensions[assetName];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":"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"}