@transferwise/components 46.142.0 → 46.143.1

package/build/logo/Logo.mjs

@@ -2,8 +2,8 @@ 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 { Breakpoint } from '@transferwise/neptune-tokens';
 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';
@@ -60,7 +60,7 @@ const logoAssets = {
 };
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥576px (small breakpoint and above).
+ * and the full wordmark on ≥600px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */

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 enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\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   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\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  size = 24,\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 sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\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","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}
+{"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 type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\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   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\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 ≥600px (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  size = 24,\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 sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\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","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}