@transferwise/components 0.0.0-experimental-8d0974a → 0.0.0-experimental-53b8447

package/build/avatarWrapper/AvatarWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
+{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}

package/build/avatarWrapper/AvatarWrapper.mjs

@@ -4,10 +4,12 @@ import { AvatarType } from '../avatar/avatarTypes.mjs';
 import Avatar from '../avatar/Avatar.mjs';
 import Badge from '../badge/Badge.mjs';
 import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import '@wise/art';
+import 'clsx';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { ProfileType } from '../common/propsValues/profileType.mjs';
-import { getInitials } from '../common/initials.mjs';
 import { Size } from '../common/propsValues/size.mjs';
+import { getInitials } from '../common/initials.mjs';
 
 const OptionalBadge = ({
   url,
@@ -43,6 +45,9 @@ const OptionalBadge = ({
     children: children
   });
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,

package/build/avatarWrapper/AvatarWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
+{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}

package/build/badge/Badge.js

@@ -12,13 +12,19 @@ const mapLegacySize = {
   [String(size.Size.MEDIUM)]: 16,
   [String(size.Size.LARGE)]: 24
 };
+// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
+// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
+/**
+ * @deprecated Use `<AvatarView badge={..} />` instead.
+ */
 const Badge = ({
   badge,
   className = undefined,
   size: sizeProp = size.Size.SMALL,
   border = theme.Theme.LIGHT,
   'aria-label': ariaLabel,
-  children
+  children,
+  style
 }) => {
   // medium is deprecated, so we map it to small
   const size$1 = sizeProp === size.Size.MEDIUM ? size.Size.SMALL : sizeProp;
@@ -29,6 +35,7 @@ const Badge = ({
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "aria-label": ariaLabel,
     className: classes,
+    style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "tw-badge__children",
       children: children

package/build/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,cAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes} style={style}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;;;AAgCA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAE/C;AACA;AACA;;AAEG;AACGC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf;AACA,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAK,cAAA,CAACC,MAAM,EAAA;AAACZ,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACa,SAAS,EAAA,IAAA;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/badge/Badge.mjs

@@ -10,13 +10,19 @@ const mapLegacySize = {
   [String(Size.MEDIUM)]: 16,
   [String(Size.LARGE)]: 24
 };
+// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
+// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
+/**
+ * @deprecated Use `<AvatarView badge={..} />` instead.
+ */
 const Badge = ({
   badge,
   className = undefined,
   size: sizeProp = Size.SMALL,
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
-  children
+  children,
+  style
 }) => {
   // medium is deprecated, so we map it to small
   const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
@@ -27,6 +33,7 @@ const Badge = ({
   return /*#__PURE__*/jsxs("div", {
     "aria-label": ariaLabel,
     className: classes,
+    style: style,
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-badge__children",
       children: children

package/build/badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,GAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes} style={style}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;AAgCA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAE/C;AACA;AACA;;AAEG;AACGC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf;AACA,EAAA,MAAMP,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAK,GAAA,CAACC,MAAM,EAAA;AAACZ,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACa,SAAS,EAAA,IAAA;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/badge/BadgeAssets.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var art = require('@wise/art');
+var Circle = require('../common/circle/Circle.js');
+var Image = require('../image/Image.js');
+var icons = require('@transferwise/icons');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+
+function BadgeAssets({
+  status,
+  flagCode,
+  imgSrc,
+  icon = null,
+  type = 'action',
+  size: sizeProp
+}) {
+  // map to old size (sm, lg) to new ones (numeric)
+  const size$1 = sizeProp === size.Size.LARGE ? 24 : 16;
+  if (status) {
+    return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+      sentiment: status,
+      size: size$1
+    });
+  }
+  if (flagCode) {
+    return /*#__PURE__*/jsxRuntime.jsx(Circle, {
+      size: size$1,
+      fixedSize: true,
+      enableBorder: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
+        code: flagCode,
+        intrinsicSize: size$1
+      })
+    });
+  }
+  if (imgSrc) {
+    return /*#__PURE__*/jsxRuntime.jsx(Circle, {
+      size: size$1,
+      fixedSize: true,
+      enableBorder: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+        src: imgSrc,
+        alt: ""
+      })
+    });
+  }
+  if (['action', 'reference'].includes(type)) {
+    return /*#__PURE__*/jsxRuntime.jsx(Circle, {
+      size: size$1,
+      fixedSize: true,
+      style: {
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
+      },
+      children: icon ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {})
+    });
+  }
+  return null;
+}
+
+module.exports = BadgeAssets;
+//# sourceMappingURL=BadgeAssets.js.map

package/build/badge/BadgeAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle, { CircleProps } from '../common/circle';\nimport Image from '../image';\nimport type { BadgeProps } from './Badge';\nimport { Plus } from '@transferwise/icons';\nimport { Size } from '../common';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference';\n  size?: BadgeProps['size'];\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size: sizeProp,\n}: Props) {\n  // map to old size (sm, lg) to new ones (numeric)\n  const size: CircleProps['size'] = sizeProp === Size.LARGE ? 24 : 16;\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","sizeProp","Size","LARGE","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;;;;AAoBwB,SAAAA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,IAAI,EAAEC,QAAAA;AACA,CAAA,EAAA;AACN;EACA,MAAMD,MAAI,GAAwBC,QAAQ,KAAKC,SAAI,CAACC,KAAK,GAAG,EAAE,GAAG,EAAE,CAAA;AACnE,EAAA,IAAIR,MAAM,EAAE;IACV,oBAAOS,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,MAAO;AAACK,MAAAA,IAAI,EAAEA,MAAAA;AAAK,MAAG,CAAA;AACtD,GAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEQ,cAAA,CAACG,MAAM,EAAA;AAACP,MAAAA,IAAI,EAAEA,MAAK;MAACQ,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEhB,QAAS;AAACiB,QAAAA,aAAa,EAAEb,MAAAA;OACvC,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEO,cAAA,CAACG,MAAM,EAAA;AAACP,MAAAA,IAAI,EAAEA,MAAK;MAACQ,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAElB,MAAO;AAACmB,QAAAA,GAAG,EAAC,EAAA;OAC1B,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAAClB,IAAI,CAAC,EAAE;IAC1C,oBACEK,cAAA,CAACG,MAAM,EAAA;AACLP,MAAAA,IAAI,EAAEA,MAAK;MACXQ,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbpB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAA;OACN;AAAAW,MAAAA,QAAA,EAEDZ,IAAI,iBAAIM,cAAA,CAACgB,UAAI;AAAG,KACX,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/build/badge/BadgeAssets.mjs

@@ -0,0 +1,61 @@
+import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import { Flag } from '@wise/art';
+import Circle from '../common/circle/Circle.mjs';
+import Image from '../image/Image.mjs';
+import { Plus } from '@transferwise/icons';
+import { jsx } from 'react/jsx-runtime';
+import { Size } from '../common/propsValues/size.mjs';
+
+function BadgeAssets({
+  status,
+  flagCode,
+  imgSrc,
+  icon = null,
+  type = 'action',
+  size: sizeProp
+}) {
+  // map to old size (sm, lg) to new ones (numeric)
+  const size = sizeProp === Size.LARGE ? 24 : 16;
+  if (status) {
+    return /*#__PURE__*/jsx(StatusIcon, {
+      sentiment: status,
+      size: size
+    });
+  }
+  if (flagCode) {
+    return /*#__PURE__*/jsx(Circle, {
+      size: size,
+      fixedSize: true,
+      enableBorder: true,
+      children: /*#__PURE__*/jsx(Flag, {
+        code: flagCode,
+        intrinsicSize: size
+      })
+    });
+  }
+  if (imgSrc) {
+    return /*#__PURE__*/jsx(Circle, {
+      size: size,
+      fixedSize: true,
+      enableBorder: true,
+      children: /*#__PURE__*/jsx(Image, {
+        src: imgSrc,
+        alt: ""
+      })
+    });
+  }
+  if (['action', 'reference'].includes(type)) {
+    return /*#__PURE__*/jsx(Circle, {
+      size: size,
+      fixedSize: true,
+      style: {
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
+      },
+      children: icon ?? /*#__PURE__*/jsx(Plus, {})
+    });
+  }
+  return null;
+}
+
+export { BadgeAssets as default };
+//# sourceMappingURL=BadgeAssets.mjs.map

package/build/badge/BadgeAssets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle, { CircleProps } from '../common/circle';\nimport Image from '../image';\nimport type { BadgeProps } from './Badge';\nimport { Plus } from '@transferwise/icons';\nimport { Size } from '../common';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference';\n  size?: BadgeProps['size'];\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size: sizeProp,\n}: Props) {\n  // map to old size (sm, lg) to new ones (numeric)\n  const size: CircleProps['size'] = sizeProp === Size.LARGE ? 24 : 16;\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","sizeProp","Size","LARGE","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;;AAoBwB,SAAAA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,IAAI,EAAEC,QAAAA;AACA,CAAA,EAAA;AACN;EACA,MAAMD,IAAI,GAAwBC,QAAQ,KAAKC,IAAI,CAACC,KAAK,GAAG,EAAE,GAAG,EAAE,CAAA;AACnE,EAAA,IAAIR,MAAM,EAAE;IACV,oBAAOS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,MAAO;AAACK,MAAAA,IAAI,EAAEA,IAAAA;AAAK,MAAG,CAAA;AACtD,GAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEQ,GAAA,CAACG,MAAM,EAAA;AAACP,MAAAA,IAAI,EAAEA,IAAK;MAACQ,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEhB,QAAS;AAACiB,QAAAA,aAAa,EAAEb,IAAAA;OACvC,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEO,GAAA,CAACG,MAAM,EAAA;AAACP,MAAAA,IAAI,EAAEA,IAAK;MAACQ,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAElB,MAAO;AAACmB,QAAAA,GAAG,EAAC,EAAA;OAC1B,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAAClB,IAAI,CAAC,EAAE;IAC1C,oBACEK,GAAA,CAACG,MAAM,EAAA;AACLP,MAAAA,IAAI,EAAEA,IAAK;MACXQ,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbpB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAA;OACN;AAAAW,MAAAA,QAAA,EAEDZ,IAAI,iBAAIM,GAAA,CAACgB,IAAI;AAAG,KACX,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/build/common/circle/Circle.js

@@ -4,11 +4,33 @@ var React = require('react');
 var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
+/**
+ * circle like components have custom font styles
+ */
+const MAP_FONT_SIZE = {
+  16: 8,
+  24: 12,
+  32: 14,
+  40: 18,
+  48: 22,
+  56: 26,
+  72: 30
+};
 const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   as: Element = 'div',
   children,
   size = 48,
   fixedSize = false,
+  enableBorder = false,
   className,
   style,
   ...props
@@ -17,10 +39,14 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': `${MAP_ICON_SIZE[size]}px`,
+      '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,
+      ...style
     },
-    className: clsx.clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
+    className: clsx.clsx('np-circle', {
+      'np-circle-border': enableBorder
+    }, 'd-flex align-items-center justify-content-center', className),
     children: children
   });
 });

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAqBA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom font styles\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size': `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAyBA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED;;AAEG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACT,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;AAChE,MAAA,oBAAoB,EAAE,CAAGP,EAAAA,aAAa,CAACO,IAAI,CAAC,CAAI,EAAA,CAAA;AAChD,MAAA,oBAAoB,EAAE,CAAGN,EAAAA,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChD,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAEK,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEN,YAAAA;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs

@@ -2,11 +2,33 @@ import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
+/**
+ * circle like components have custom font styles
+ */
+const MAP_FONT_SIZE = {
+  16: 8,
+  24: 12,
+  32: 14,
+  40: 18,
+  48: 22,
+  56: 26,
+  72: 30
+};
 const Circle = /*#__PURE__*/forwardRef(function Circle({
   as: Element = 'div',
   children,
   size = 48,
   fixedSize = false,
+  enableBorder = false,
   className,
   style,
   ...props
@@ -15,10 +37,14 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': `${MAP_ICON_SIZE[size]}px`,
+      '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,
+      ...style
     },
-    className: clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
+    className: clsx('np-circle', {
+      'np-circle-border': enableBorder
+    }, 'd-flex align-items-center justify-content-center', className),
     children: children
   });
 });

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAqBA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom font styles\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size': `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAyBA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED;;AAEG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACT,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;AAChE,MAAA,oBAAoB,EAAE,CAAGP,EAAAA,aAAa,CAACO,IAAI,CAAC,CAAI,EAAA,CAAA;AAChD,MAAA,oBAAoB,EAAE,CAAGN,EAAAA,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChD,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAEK,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEN,YAAAA;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/dateLookup/DateLookup.js

@@ -5,7 +5,6 @@ var React = require('react');
 require('@transferwise/formatting');
 var moveToWithinRange = require('../common/dateUtils/moveToWithinRange/moveToWithinRange.js');
 var isWithinRange = require('../common/dateUtils/isWithinRange/isWithinRange.js');
-var getDateView = require('../common/dateUtils/getDateView/getDateView.js');
 var contexts = require('../inputs/contexts.js');
 var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
 var DateTrigger = require('./dateTrigger/DateTrigger.js');
@@ -36,14 +35,13 @@ class DateLookup extends React.PureComponent {
   dropdown = /*#__PURE__*/React.createRef();
   constructor(props) {
     super(props);
-    const dateView = getDateView.returnDateView(props.value, props.min, props.max);
     this.state = {
       selectedDate: getStartOfDay.getStartOfDay(props.value),
       originalDate: null,
       min: getStartOfDay.getStartOfDay(props.min),
       max: getStartOfDay.getStartOfDay(props.max),
-      viewMonth: dateView.getMonth(),
-      viewYear: dateView.getFullYear(),
+      viewMonth: (props.value || new Date()).getMonth(),
+      viewYear: (props.value || new Date()).getFullYear(),
       open: false,
       mode: 'day',
       isMobile: false
@@ -64,7 +62,7 @@ class DateLookup extends React.PureComponent {
         props.onChange(moveToWithinRange.moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewDateThatIsWithinRange = getDateView.returnDateView(selectedDate, min, max);
+      const viewDateThatIsWithinRange = selectedDate || (min || max) && moveToWithinRange.moveToWithinRange(new Date(), min, max) || new Date();
       const viewMonth = viewDateThatIsWithinRange.getMonth();
       const viewYear = viewDateThatIsWithinRange.getFullYear();
       return {
@@ -189,7 +187,9 @@ class DateLookup extends React.PureComponent {
     } else {
       date = getStartOfDay.getStartOfDay(new Date());
     }
-    date &&= moveToWithinRange.moveToWithinRange(date, min, max);
+    if (date) {
+      date = moveToWithinRange.moveToWithinRange(date, min, max);
+    }
     if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }