@transferwise/components 0.0.0-experimental-43c52b9 → 0.0.0-experimental-ef0cf2e

package/build/logo/Logo.js

@@ -29,6 +29,12 @@ const labelByType = {
   WISE_BUSINESS: 'Wise Business',
   WISE_PLATFORM: 'Wise Platform'
 };
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 function Logo({
   className,
   inverse,

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  /** If true, will use dark colours for dark on light theme */\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\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;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,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  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

@@ -25,6 +25,12 @@ const labelByType = {
   WISE_BUSINESS: 'Wise Business',
   WISE_PLATFORM: 'Wise Platform'
 };
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 function Logo({
   className,
   inverse,

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  /** If true, will use dark colours for dark on light theme */\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\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;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,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  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;;;;"}

package/build/main.css

@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/build/styles/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -531,7 +531,7 @@
   flex-direction: column;
   justify-content: center;
 }
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/build/styles/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }

package/build/styles/main.css

@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/build/types/logo/Logo.d.ts

@@ -6,7 +6,10 @@ export declare enum LogoType {
 export interface LogoProps {
     /** Extra classes applied to Logo */
     className?: string;
-    /** If true, will use dark colours for dark on light theme */
+    /**
+     * Renders a light-coloured version suited for dark backgrounds.
+     * @default false
+     */
     inverse?: boolean;
     /**
      * What type of logo to display
@@ -14,5 +17,11 @@ export interface LogoProps {
      */
     type?: `${LogoType}`;
 }
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type }: LogoProps): import("react").JSX.Element;
 //# sourceMappingURL=Logo.d.ts.map

package/build/types/logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-43c52b9",
+  "version": "0.0.0-experimental-ef0cf2e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -531,7 +531,7 @@
   flex-direction: column;
   justify-content: center;
 }
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/src/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }

package/src/listItem/ListItem.grid.less

@@ -14,8 +14,7 @@
       }
     }
 
-    // 308px+
-    @container (min-width: unit(@wds-list-item-cq-max + 0.1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -170,8 +169,9 @@
       }
     }
 
-    // 240+ to 308px
-    @container (min-width: unit(@wds-list-item-cq-min + 0.1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
+    // LESS struggles with ranged container queries so
+    // we need to escape the interpolated expression.
+    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -406,8 +406,7 @@
       }
     }
 
-    // 0 to 240px
-    @container (max-width: unit(@wds-list-item-cq-min, px)) {
+    @container (width <= @wds-list-item-cq-min) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }

package/src/listItem/ListItem.less

@@ -189,7 +189,7 @@
     flex-direction: column;
     justify-content: center;
 
-    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       min-height: var(--wds-list-item-value-min-height, 100%);
     }
   }

package/src/listItem/ListItem.vars.less

@@ -7,5 +7,5 @@
 // `packages/components/src/listItem/constants.ts`
 //
 // @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
-@wds-list-item-cq-min: 240;
-@wds-list-item-cq-max: 308;
+@wds-list-item-cq-min: 240px;
+@wds-list-item-cq-max: 308px;

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -225,3 +225,58 @@ export const ImageAlignment: StoryObj<PreviewStoryArgs> = {
     );
   },
 };
+
+// Our container queries left 1px gap between breakpoint definitions.
+// This test makes sure that LI placed in a parent of {width} still
+// works fine, where: {breakpoint} < {width} < {breakpoint} + 1px
+export const SubPixelWidths: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  render: (args: PreviewStoryArgs) => {
+    const [props] = getPropsForPreview(args);
+
+    return (
+      <>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MIN + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MIN + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-min + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MAX + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MAX + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-max + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+      </>
+    );
+  },
+};

package/src/logo/Logo.story.tsx

@@ -2,36 +2,196 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
 
-export default {
+/**
+ * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
+ */
+const meta: Meta<typeof Logo> = {
   component: Logo,
   title: 'Content/Logo',
-  render: () => {
-    return (
-      <>
-        <div>
+  args: {
+    type: 'WISE',
+    inverse: false,
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: Object.values(LogoType),
+    },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Logo>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  render: (args) => (
+    <div
+      style={{
+        padding: '2rem',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      <Logo {...args} />
+    </div>
+  ),
+};
+
+/**
+ * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
+ * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
+ */
+export const Types: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '3rem',
+        alignItems: 'center',
+        padding: '2rem',
+        borderRadius: '8px',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} type={type} />
+          <span
+            style={{
+              fontSize: '12px',
+              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
+            }}
+          >
+            {type}
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" />
+<Logo type="WISE_BUSINESS" />
+<Logo type="WISE_PLATFORM" />`,
+      },
+    },
+  },
+};
+
+/**
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ */
+export const Responsive: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'< 576px (flag only)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} />
-            </div>
+            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
+              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
+              <span className="responsive-sm">
+                <Logo type={type} />
+              </span>
+            </span>
           ))}
         </div>
-        <div className="bg--dark">
+      </div>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'\u2265 576px (full wordmark)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} inverse />
-            </div>
+            <Logo key={type} type={type} />
           ))}
         </div>
-      </>
-    );
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
   },
-} satisfies Meta<typeof Logo>;
-
-type Story = StoryObj<typeof Logo>;
+};
 
-export const Basic: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
+/**
+ * All logo types on a dark background using the `inverse` prop, which renders a
+ * light-coloured version suited for dark surfaces.
+ */
+export const Inverse: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          gap: '3rem',
+          alignItems: 'center',
+          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
+          padding: '2rem',
+          borderRadius: '8px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <>
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo type={type} inverse />
+          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+        </div>
+      ))}
+    </>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" inverse />
+<Logo type="WISE_BUSINESS" inverse />
+<Logo type="WISE_PLATFORM" inverse />`,
+      },
+    },
   },
 };

package/src/logo/Logo.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Logo from '.';
+
+import Logo, { LogoType } from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Logo> = {
@@ -7,14 +8,46 @@ const meta: Meta<typeof Logo> = {
   tags: ['!autodocs', '!manifest'],
   title: 'Content/Logo/Tests',
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Logo>;
 
-export const Mobile: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
-  },
-  ...withVariantConfig(['mobile']),
+const AllVariants = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} />
+      ))}
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        gap: '2rem',
+        alignItems: 'center',
+        backgroundColor: 'var(--color-content-primary)',
+        padding: '1rem',
+        borderRadius: '8px',
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} inverse />
+      ))}
+    </div>
+  </div>
+);
+
+export const Variants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+export const RTL: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['rtl']),
+};
+
+export const Zoom400: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['400%']),
 };

package/src/logo/Logo.tsx

@@ -33,7 +33,10 @@ export enum LogoType {
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
-  /** If true, will use dark colours for dark on light theme */
+  /**
+   * Renders a light-coloured version suited for dark backgrounds.
+   * @default false
+   */
   inverse?: boolean;
   /**
    * What type of logo to display
@@ -48,6 +51,12 @@ const labelByType = {
   WISE_PLATFORM: 'Wise Platform',
 } satisfies Record<`${LogoType}`, string>;
 
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
     svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];

package/src/main.css

@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 308.1px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/src/listItem/_stories/ListItemTest.story.tsx

@@ -1,67 +0,0 @@
-import List from '../../list';
-
-import { ListItem, type ListItemProps } from '../ListItem';
-import {
-  InfoCircle,
-  Documents,
-  Warning,
-  Home,
-  Globe,
-  People,
-  Link as LinkIcon,
-} from '@transferwise/icons';
-
-export default {
-  title: 'Aidan',
-};
-
-export const Testing = {
-  render: () => {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--size-4)',
-          flexDirection: 'row',
-          width: '689px',
-          //   border: '1px solid black',
-        }}
-      >
-        <div
-          style={{
-            flex: 1,
-          }}
-        >
-          <div
-            style={{
-              border: '1px solid var(--color-border-neutral)',
-              borderRadius: 'var(--radius-medium)',
-              padding: 'var(--size-16)',
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <ListItem
-              title="System maintenance"
-              subtitle="Scheduled downtime"
-              inverted
-              control={
-                <ListItem.IconButton partiallyInteractive>
-                  <InfoCircle />
-                </ListItem.IconButton>
-              }
-            />
-          </div>
-        </div>
-
-        <div
-          style={{
-            flex: 1,
-          }}
-        >
-          <span>a</span>
-        </div>
-      </div>
-    );
-  },
-};