@transferwise/components 0.0.0-experimental-0c9f5bb → 0.0.0-experimental-238cf3d

package/build/logo/Logo.js

@@ -3,59 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-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 logoAssets = require('./logo-assets.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 = {}));
 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).
@@ -64,40 +37,22 @@ const logoAssets = {
  */
 function Logo({
   className,
-  type = 'WISE',
-  lockup = false,
-  secondary = false,
-  display = 'responsive',
-  'aria-label': ariaLabel
+  inverse,
+  type = 'WISE'
 }) {
-  const isScreenSm = !useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
-  const compact = display === 'compact' || display === 'responsive' && isScreenSm;
-  const assetName = compact ? 'FastFlag' : getAssetName(type, lockup, secondary);
-  const Asset = logoAssets[assetName];
-  const {
-    width,
-    height
-  } = logoAssets$1.logoAssetsDimensions[assetName];
-  return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: clsx.clsx('np-logo', className),
+  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],
     role: "img",
-    "aria-label": ariaLabel ?? labelByType[type],
-    style: {
-      '--wds-logo-width': `${width}px`,
-      '--wds-logo-height': `${height}px`
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Asset, {})
+    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"
+    })]
   });
 }
-function getAssetName(type, lockup, secondary) {
-  if (type === 'WISE_BUSINESS' && lockup) {
-    return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
-  }
-  if (type === 'WISE_PLATFORM' && lockup) {
-    return secondary ? '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  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 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   * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n   * @default false\n   */\n  lockup?: boolean;\n  /**\n   * Use the stacked (two-line) logo variant. Requires `lockup` to be true.\n   * @default false\n   */\n  secondary?: boolean;\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  lockup = false,\n  secondary = false,\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, lockup, secondary);\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}`, lockup: boolean, secondary: boolean): LogoAssetName {\n  if (type === 'WISE_BUSINESS' && lockup) {\n    return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n  }\n  if (type === 'WISE_PLATFORM' && lockup) {\n    return secondary ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","lockup","secondary","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBYA;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;AAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,mBAAW,KAAXA,mBAAW,GAAA,EAAA,CAAA,CAAA;AA4CvB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;YAC3DC,qBAAQ;YACRC,qBAAQ;uBACRC,gCAAmB;yBACnBC,kCAAqB;uBACrBC,gCAAmB;AACnBC,yBAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;AAEjF,EAAA,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACX,IAAI,EAAEC,MAAM,EAAEC,SAAS,CAAC;AAC9E,EAAA,MAAMU,KAAK,GAAGrB,UAAU,CAACmB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,iCAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,cAAA,CAAA,MAAA,EAAA;AACEjB,IAAAA,SAAS,EAAEkB,SAAI,CAAC,SAAS,EAAElB,SAAS,CAAE;AACtCmB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIjB,WAAW,CAACa,IAAI,CAAE;AAC3CmB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,cAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACX,IAAmB,EAAEC,MAAe,EAAEC,SAAkB,EAAA;AAC5E,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
+{"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;;;;"}

package/build/logo/Logo.mjs

@@ -1,57 +1,30 @@
 import { clsx } from 'clsx';
-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';
+import { LogoFlagPlatformInverse, LogoFlagPlatform, LogoFlagInverse, LogoFlag, LogoWisePlatformInverse, LogoWisePlatform, LogoWiseInverse, LogoWise } from './logo-assets.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+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 = {}));
 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).
@@ -60,40 +33,22 @@ const logoAssets = {
  */
 function Logo({
   className,
-  type = 'WISE',
-  lockup = false,
-  secondary = false,
-  display = 'responsive',
-  'aria-label': ariaLabel
+  inverse,
+  type = 'WISE'
 }) {
-  const isScreenSm = !useScreenSize(Breakpoint.SMALL);
-  const compact = display === 'compact' || display === 'responsive' && isScreenSm;
-  const assetName = compact ? 'FastFlag' : getAssetName(type, lockup, secondary);
-  const Asset = logoAssets[assetName];
-  const {
-    width,
-    height
-  } = logoAssetsDimensions[assetName];
-  return /*#__PURE__*/jsx("span", {
-    className: clsx('np-logo', className),
+  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],
     role: "img",
-    "aria-label": ariaLabel ?? labelByType[type],
-    style: {
-      '--wds-logo-width': `${width}px`,
-      '--wds-logo-height': `${height}px`
-    },
-    children: /*#__PURE__*/jsx(Asset, {})
+    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"
+    })]
   });
 }
-function getAssetName(type, lockup, secondary) {
-  if (type === 'WISE_BUSINESS' && lockup) {
-    return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
-  }
-  if (type === 'WISE_PLATFORM' && lockup) {
-    return secondary ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
-  }
-  return 'WiseLogo';
-}
 
-export { LogoDisplay, LogoType, Logo as default };
+export { 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  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 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   * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n   * @default false\n   */\n  lockup?: boolean;\n  /**\n   * Use the stacked (two-line) logo variant. Requires `lockup` to be true.\n   * @default false\n   */\n  secondary?: boolean;\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  lockup = false,\n  secondary = false,\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, lockup, secondary);\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}`, lockup: boolean, secondary: boolean): LogoAssetName {\n  if (type === 'WISE_BUSINESS' && lockup) {\n    return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n  }\n  if (type === 'WISE_PLATFORM' && lockup) {\n    return secondary ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","lockup","secondary","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBYA;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;IAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,WAAW,KAAXA,WAAW,GAAA,EAAA,CAAA,CAAA;AA4CvB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;EAC3DC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;AACnBC,EAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;AAEjF,EAAA,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACX,IAAI,EAAEC,MAAM,EAAEC,SAAS,CAAC;AAC9E,EAAA,MAAMU,KAAK,GAAGrB,UAAU,CAACmB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,oBAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,GAAA,CAAA,MAAA,EAAA;AACEjB,IAAAA,SAAS,EAAEkB,IAAI,CAAC,SAAS,EAAElB,SAAS,CAAE;AACtCmB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIjB,WAAW,CAACa,IAAI,CAAE;AAC3CmB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,GAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACX,IAAmB,EAAEC,MAAe,EAAEC,SAAkB,EAAA;AAC5E,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
+{"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;;;;"}