@transferwise/components 0.0.0-experimental-696128b → 0.0.0-experimental-328f2cc

package/build/button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n  AnchorElementProps,\n  ButtonReferenceType,\n  ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      iconStart: IconStart,\n      iconEnd: IconEnd,\n      avatars,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span className=\"wds-Button-label\" aria-hidden={loading}>\n          {size === 'lg' ? (\n            children\n          ) : (\n            <>\n              {size === 'md' && avatars && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n                </span>\n              )}\n              {!avatars && IconStart && (\n                <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n              )}\n              {children}\n              {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if (href || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAcA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,GAAG,QAAQ;EACbC,QAAQ;EACRC,SAAS;AACTC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,SAAS,EAAEC,SAAS;AACpBC,EAAAA,OAAO,EAAEC,OAAO;EAChBC,OAAO;AACP;AACAC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;EACbC,EAAE;EACF,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,UAAU,GAAGC,IAAI,CACrB,YAAY,EACZ;IACE,CAAC,CAAA,iBAAA,CAAmB,GAAGL,KAAK;IAC5B,CAAC,CAAA,oBAAA,CAAsB,GAAGV,QAAQ;AAClC,IAAA,CAAC,qBAAqB,GAAGS,OAAAA;AAC1B,GAAA,EACD,CAAe,YAAA,EAAA;AAAEO,IAAAA,EAAE,EAAE,OAAO;AAAEC,IAAAA,EAAE,EAAE,QAAQ;AAAEC,IAAAA,EAAE,EAAE,OAAA;AAAO,GAAE,CAACpB,IAAI,CAAC,CAAA,CAAE,EACjE,CAAeG,YAAAA,EAAAA,QAAQ,CAAE,CAAA,EACzB,CAAeC,YAAAA,EAAAA,SAAS,CAAE,CAAA,EAC1BL,SAAS,CACV,CAAA;AAED,EAAA,MAAMsB,iBAAiB,GAAGJ,IAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGN,OAAAA;AAClC,GAAA,CAAC,CAAA;AAEF,EAAA,MAAMW,OAAO,gBACXC,IAAA,CAACC,IAAI,EAAA;AACH3B,IAAAA,EAAE,EAAC,MAAM;IACTa,IAAI,EAAEV,IAAI,KAAK,IAAI,GAAGyB,UAAU,CAACC,iBAAiB,GAAGD,UAAU,CAACE,eAAgB;AAChF5B,IAAAA,SAAS,EAAEsB,iBAAkB;AAAAvB,IAAAA,QAAA,EAE5Ba,CAAAA,OAAO,iBACNiB,GAAA,CAACC,gBAAgB,EAAA;AACf7B,MAAAA,IAAI,EAAEA,IAAI,KAAK,IAAI,GAAG,KAAK,GAAG,IAAK;AACnCD,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAY,EAAA,yBAAA;KAAyB,CAExC,eACD6B,GAAA,CAAA,MAAA,EAAA;AAAM7B,MAAAA,SAAS,EAAC,kBAAkB;AAAC,MAAA,aAAA,EAAaY,OAAQ;MAAAb,QAAA,EACrDE,IAAI,KAAK,IAAI,GACZF,QAAQ,gBAERyB,IAAA,CAAAO,QAAA,EAAA;AAAAhC,QAAAA,QAAA,GACGE,IAAI,KAAK,IAAI,IAAIS,OAAO,iBACvBmB,GAAA,CAAA,MAAA,EAAA;AAAM7B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,eAClC8B,GAAA,CAACG,YAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;AAACvB,YAAAA,OAAO,EAAEA,OAAQ;AAACT,YAAAA,IAAI,EAAE,EAAA;WACjE,CAAA;SAAM,CACP,EACA,CAACS,OAAO,IAAIH,SAAS,iBACpBsB,GAAA,CAACtB,SAAS,EAAA;AAACP,UAAAA,SAAS,EAAC,wCAAA;SAAwC,CAC9D,EACAD,QAAQ,EACRU,OAAO,iBAAIoB,GAAA,CAACpB,OAAO,EAAA;AAACT,UAAAA,SAAS,EAAC,sCAAA;AAAsC,SAAA,CAAG,CAAA;OAC1E,CAAA;AACD,KACG,CACR,CAAA;AAAA,GAAM,CACP,CAAA;AAED,EAAA,IAAIE,IAAI,IAAIJ,EAAE,KAAK,GAAG,EAAE;IACtB,oBACE+B,GAAA,CAACK,eAAe,EAAA;AACdlB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAAa;AAClBb,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAEiB,UAAW;AACtBd,MAAAA,QAAQ,EAAEA,QAAS;AAAAJ,MAAAA,QAAA,EAElBwB,OAAAA;AAAO,KACO,CAAC,CAAA;AAEtB,GAAA;EAEA,oBACEM,GAAA,CAACM,eAAe,EAAA;AACdnB,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAAa;AAClBf,IAAAA,SAAS,EAAEiB,UAAW;AACtBd,IAAAA,QAAQ,EAAEA,QAAS;AACnBS,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,IAAI,EAAEA,IAAK;AAAAZ,IAAAA,QAAA,EAEVwB,OAAAA;AAAO,GACO,CAAC,CAAA;AAEtB,CAAC;;;;"}
+{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  block?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n    htmlType?: 'submit' | 'reset' | 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n    as?: 'a';\n  };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n  (\n    {\n      as: component,\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      onClick,\n      ...rest\n    }: Props,\n    reference,\n  ) => {\n    const intl = useIntl();\n\n    logDeprecationNotices({ size, type });\n\n    const newType = establishNewType(type);\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = clsx(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n        disabled,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled,\n        'aria-disabled': loading,\n        type: htmlType,\n      };\n    } else {\n      props = {\n        ...rest,\n        'aria-disabled': loading,\n      } as AnchorProps;\n    }\n\n    /**\n     * Ensures that the button cannot be activated in loading or disabled mode,\n     * when `aria-disabled` might be used over the `disabled` HTML attribute\n     */\n    const handleClick =\n      (handler: Props['onClick']) =>\n      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n        if (disabled || loading) {\n          event.preventDefault();\n        } else if (typeof handler === 'function') {\n          handler(event);\n        }\n      };\n\n    return (\n      <Element\n        ref={reference}\n        className={classes}\n        onClick={handleClick(onClick)}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-busy={loading}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && (\n          <ProcessIndicator\n            size={processIndicatorSize()}\n            className=\"btn-loader\"\n            data-testid=\"ButtonProgressIndicator\"\n          />\n        )}\n      </Element>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}

package/build/criticalBanner/CriticalCommsBanner.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var avatarTypes = require('../avatar/avatarTypes.js');
 var Avatar = require('../avatar/Avatar.js');
 var Body = require('../body/Body.js');
-var Button_resolver = require('../button/Button.resolver.js');
+var Button = require('../button/Button.js');
 require('../common/theme.js');
 require('../common/direction.js');
 var control = require('../common/propsValues/control.js');
@@ -69,7 +69,7 @@ function CriticalCommsBanner({
           })]
         }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "critical-comms--cta",
-          children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
             block: isModern,
             size: size.Size.SMALL,
             type: control.ControlType.NEGATIVE,

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  const { isModern } = useTheme();\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <div className=\"critical-comms-body\">\n        <Avatar\n          size={Size.MEDIUM}\n          type={AvatarType.ICON}\n          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n          backgroundColor={\n            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n          }\n        >\n          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n        </Avatar>\n        <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n            <Title\n              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n              className=\"critical-comms--title\"\n            >\n              {title}\n            </Title>\n            <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n          </div>\n          {action ? (\n            <div className=\"critical-comms--cta\">\n              <Button\n                block={isModern}\n                size={Size.SMALL}\n                type={ControlType.NEGATIVE}\n                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n                className=\"cta-btn\"\n                onClick={() => {\n                  if (action) {\n                    window.location.href = action.href;\n                  }\n                }}\n              >\n                {action.label}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,eAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  const { isModern } = useTheme();\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <div className=\"critical-comms-body\">\n        <Avatar\n          size={Size.MEDIUM}\n          type={AvatarType.ICON}\n          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n          backgroundColor={\n            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n          }\n        >\n          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n        </Avatar>\n        <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n            <Title\n              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n              className=\"critical-comms--title\"\n            >\n              {title}\n            </Title>\n            <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n          </div>\n          {action ? (\n            <div className=\"critical-comms--cta\">\n              <Button\n                block={isModern}\n                size={Size.SMALL}\n                type={ControlType.NEGATIVE}\n                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n                className=\"cta-btn\"\n                onClick={() => {\n                  if (action) {\n                    window.location.href = action.href;\n                  }\n                }}\n              >\n                {action.label}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,MAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { AvatarType } from '../avatar/avatarTypes.mjs';
 import Avatar from '../avatar/Avatar.mjs';
 import Body from '../body/Body.mjs';
-import Button from '../button/Button.resolver.mjs';
+import Button from '../button/Button.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import { ControlType, Priority } from '../common/propsValues/control.mjs';

package/build/header/Header.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-var Button_resolver = require('../button/Button.resolver.js');
+var Button = require('../button/Button.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -46,7 +46,7 @@ const HeaderAction = ({
       children: action.text
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
     className: "np-header__button",
     priority: "tertiary",
     size: "sm",

package/build/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n  /**\n   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n  /**\n   * Override the heading element rendered for the title, useful to specify the semantics of your header.\n   *\n   * @default \"h5\"\n   */\n  as?: Heading | 'legend';\n  title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n  const props = {\n    'aria-label': action['aria-label'],\n  };\n\n  if ('href' in action) {\n    return (\n      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <Button\n      className=\"np-header__button\"\n      priority=\"tertiary\"\n      size=\"sm\"\n      onClick={action.onClick}\n      {...props}\n    >\n      {action.text}\n    </Button>\n  );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        type={Typography.TITLE_GROUP}\n        className={clsx('np-header', 'np-header__title', className)}\n      >\n        {title}\n      </Title>\n    );\n  }\n\n  if (as === 'legend') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Legends should be the first child in a fieldset, and this is not possible when including an action',\n    );\n  }\n\n  return (\n    <div className={clsx('np-header', className)}>\n      <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n        {title}\n      </Title>\n      <HeaderAction action={action} />\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,eAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n  /**\n   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n  /**\n   * Override the heading element rendered for the title, useful to specify the semantics of your header.\n   *\n   * @default \"h5\"\n   */\n  as?: Heading | 'legend';\n  title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n  const props = {\n    'aria-label': action['aria-label'],\n  };\n\n  if ('href' in action) {\n    return (\n      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <Button\n      className=\"np-header__button\"\n      priority=\"tertiary\"\n      size=\"sm\"\n      onClick={action.onClick}\n      {...props}\n    >\n      {action.text}\n    </Button>\n  );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        type={Typography.TITLE_GROUP}\n        className={clsx('np-header', 'np-header__title', className)}\n      >\n        {title}\n      </Title>\n    );\n  }\n\n  if (as === 'legend') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Legends should be the first child in a fieldset, and this is not possible when including an action',\n    );\n  }\n\n  return (\n    <div className={clsx('np-header', className)}>\n      <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n        {title}\n      </Title>\n      <HeaderAction action={action} />\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}

package/build/header/Header.mjs

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import Button from '../button/Button.resolver.mjs';
+import Button from '../button/Button.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';

package/build/index.js

@@ -21,7 +21,7 @@ require('react/jsx-runtime');
 var Image = require('./image/Image.js');
 require('@transferwise/icons');
 var Body = require('./body/Body.js');
-var Button_resolver = require('./button/Button.resolver.js');
+var Button = require('./button/Button.js');
 var IconButton = require('./iconButton/IconButton.js');
 var Carousel = require('./carousel/Carousel.js');
 var Card = require('./card/Card.js');
@@ -106,6 +106,7 @@ var Tooltip = require('./tooltip/Tooltip.js');
 var Typeahead = require('./typeahead/Typeahead.js');
 var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
+var Table = require('./table/Table.js');
 require('@transferwise/neptune-validation');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
@@ -164,7 +165,7 @@ Object.defineProperty(exports, "Breakpoint", {
 });
 exports.Image = Image.default;
 exports.Body = Body;
-exports.Button = Button_resolver;
+exports.Button = Button;
 exports.IconButton = IconButton;
 exports.Carousel = Carousel;
 exports.Card = Card;
@@ -271,6 +272,7 @@ Object.defineProperty(exports, "UploadStep", {
 	get: function () { return Upload.UploadStep; }
 });
 exports.UploadInput = UploadInput;
+exports.Table = Table;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 exports.useScreenSize = useScreenSize.useScreenSize;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -19,7 +19,7 @@ import 'react/jsx-runtime';
 export { default as Image } from './image/Image.mjs';
 import '@transferwise/icons';
 export { default as Body } from './body/Body.mjs';
-export { default as Button } from './button/Button.resolver.mjs';
+export { default as Button } from './button/Button.mjs';
 export { default as IconButton } from './iconButton/IconButton.mjs';
 export { default as Carousel } from './carousel/Carousel.mjs';
 export { default as Card } from './card/Card.mjs';
@@ -104,6 +104,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
 export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
+export { default as Table } from './table/Table.mjs';
 import '@transferwise/neptune-validation';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/link/Link.js

@@ -3,8 +3,6 @@
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
 var reactIntl = require('react-intl');
-require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
-var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
 var Link_messages = require('./Link.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -18,17 +16,14 @@ const Link = ({
   onClick,
   ...props
 }) => {
+  const isBlank = target === '_blank';
   const {
     formatMessage
   } = reactIntl.useIntl();
-  const isBlank = target === '_blank';
-  const classNames = clsx.clsx('np-link', 'd-inline-flex', {
-    [`np-text-${type}`]: type
-  }, className);
-  return /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor, {
+  return /*#__PURE__*/jsxRuntime.jsxs("a", {
     href: href,
     target: target,
-    className: classNames,
+    className: clsx.clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
     "aria-label": ariaLabel,
     rel: isBlank ? 'noreferrer' : undefined,
     onClick: onClick,

package/build/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const { formatMessage } = useIntl();\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n    },\n    className,\n  );\n\n  return (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,eAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
+{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,SAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}

package/build/link/Link.mjs

@@ -1,8 +1,6 @@
 import { NavigateAway } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
-import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
 import messages from './Link.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -16,17 +14,14 @@ const Link = ({
   onClick,
   ...props
 }) => {
+  const isBlank = target === '_blank';
   const {
     formatMessage
   } = useIntl();
-  const isBlank = target === '_blank';
-  const classNames = clsx('np-link', 'd-inline-flex', {
-    [`np-text-${type}`]: type
-  }, className);
-  return /*#__PURE__*/jsxs(PrimitiveAnchor, {
+  return /*#__PURE__*/jsxs("a", {
     href: href,
     target: target,
-    className: classNames,
+    className: clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
     "aria-label": ariaLabel,
     rel: isBlank ? 'noreferrer' : undefined,
     onClick: onClick,

package/build/link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const { formatMessage } = useIntl();\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n    },\n    className,\n  );\n\n  return (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,IAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
+{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,IAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}

package/build/main.css

@@ -518,20 +518,13 @@ div.critical-comms .critical-comms-body {
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
-[dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
-[dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-left: 0;
-  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-}
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -543,9 +536,6 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
-[dir="rtl"] .np-avatar-layout-horizontal-child {
-  margin-right: calc(var(--np-avatar-offset) * -1);
-}
 .np-icon-button {
   border: none;
 }
@@ -716,218 +706,6 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-}
-.wds-Button:hover {
-  background-color: var(--Button-background-hover);
-}
-.wds-Button:active {
-  background-color: var(--Button-background-active);
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button.wds-Button--disabled:hover,
-.wds-Button:disabled:hover,
-.wds-Button.wds-Button--disabled:active,
-.wds-Button:disabled:active {
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-background-hover);
-  --Button-background-active: var(--Button-secondary-background-active);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-background-hover);
-  --Button-background-active: var(--Button-tertiary-background-active);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-background-hover);
-  --Button-background-active: var(--Button-minimal-background-active);
-  --Button-color: var(--Button-minimal-color);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-thickness: 1px;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-background-hover);
-  --Button-background-active: var(--Button-primary-negative-background-active);
-  --Button-color: var(--Button-primary-negative-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-background-hover);
-  --Button-background-active: var(--Button-secondary-negative-background-active);
-  --Button-color: var(--Button-secondary-negative-color);
-}
-.wds-Button--large {
-  padding: var(--Button-large-padding);
-}
-.wds-Button--medium {
-  padding: var(--Button-medium-padding);
-}
-.wds-Button--medium:has(.wds-Button-avatars) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--medium:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--medium .wds-Button-icon--start {
-  margin-inline-end: var(--Button-label-gap);
-}
-.wds-Button--small {
-  padding: var(--Button-small-padding);
-}
-.wds-Button--small:has(.wds-Button-icon--start) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--small:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-content {
-  position: relative;
-}
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--Button-label-gap);
-  position: relative;
-}
-.wds-Button-loader {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
-}
-/* RTL Styles */
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
-  transform: rotate(180deg);
-}
-[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
-  transform: rotate(180deg);
-}
-/* Avatar border transparency */
-/* dark buttons get 20% transparency, light buttons get 12% */
-.wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
-}
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-}
-.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-}
-.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -3911,6 +3689,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -8px;
+  margin-top: 8px;
+  position: absolute;
+  width: 123px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -8px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;