@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-ca51404

package/src/main.css

@@ -518,18 +518,10 @@ 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) - 2px);
   height: var(--np-avatar-layout-size);
@@ -543,79 +535,81 @@ 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;
 }
 .np-icon-button-tertiary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-neutral-hover);
+  background-color: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-neutral-active);
+  background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  --Button-color: var(--color-interactive-control);
-  --Button-background: var(--color-interactive-accent);
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-accent-hover);
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-accent-active);
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
-  --Button-color: var(--color-contrast-overlay);
-  --Button-background: var(--color-sentiment-negative-primary);
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-primary-hover);
+  background-color: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-primary-active);
+  background-color: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-screen);
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-screen-hover);
+  background-color: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-screen-active);
+  background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-interactive-neutral);
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-neutral-hover);
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-neutral-active);
+  background-color: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
-  --Button-color: var(--color-sentiment-negative-primary);
-  --Button-background: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
+  background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  background-color: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
   color: var(--color-white);
@@ -711,259 +705,6 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
-  --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-padding: var(--size-8) var(--size-12);
-  --Button-border-radius: var(--radius-full);
-  --Button-font-size: var(--font-size-16);
-  --Button-line-height: var(--size-24);
-  --Button-font-weight: var(--font-weight-semi-bold);
-  --Button-letter-spacing: -0.011em;
-  --Button-size-small-padding: 5px var(--size-12);
-  --Button-size-medium-padding: var(--size-8) var(--size-12);
-  --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --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-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
-  --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);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--bright-green {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  font-weight: 600;
-  font-weight: var(--Button-font-weight);
-  font-size: 1rem;
-  font-size: var(--Button-font-size);
-  letter-spacing: -0.011em;
-  letter-spacing: var(--Button-letter-spacing);
-  line-height: 24px;
-  line-height: var(--Button-line-height);
-  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: #00a2dd;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: 9999px;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  padding: 8px 12px;
-  padding: var(--Button-padding);
-}
-.wds-Button:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:hover {
-  background-color: #008fc9;
-  background-color: var(--Button-background-hover);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:active {
-  background-color: #0081ba;
-  background-color: var(--Button-background-active);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button:disabled:hover,
-.wds-Button:disabled:active {
-  background-color: #00a2dd;
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-hover-background);
-  --Button-background-active: var(--Button-secondary-active-background);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-hover-background);
-  --Button-background-active: var(--Button-tertiary-active-background);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--right {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-hover-background);
-  --Button-background-active: var(--Button-minimal-active-background);
-  --Button-color: var(--Button-minimal-color);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-Button--minimal:hover,
-.wds-Button--minimal:hover:active {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-hover-background);
-  --Button-background-active: var(--Button-primary-negative-active-background);
-  --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-hover-background);
-  --Button-background-active: var(--Button-secondary-negative-active-background);
-  --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
-}
-.wds-Button--small {
-  --Button-padding: var(--Button-size-small-padding);
-  --Button-line-height: 22px;
-  --Button-font-size: var(--font-size-14);
-  --Button-letter-spacing: -0.006em;
-}
-.wds-Button--small .wds-Button-icon--left {
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-[dir="rtl"] .wds-Button--small .wds-Button-icon--left {
-  margin-right: 0;
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-.wds-Button--medium {
-  --Button-padding: var(--Button-size-medium-padding);
-}
-.wds-Button--large {
-  --Button-padding: var(--Button-size-large-padding);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-  margin-right: 5px;
-  margin-left: calc(4px * -1);
-  margin-left: calc(var(--size-4) * -1);
-}
-[dir="rtl"] .wds-Button-avatars {
-  margin-right: 0;
-  margin-left: 5px;
-}
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-icon--left {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-}
-[dir="rtl"] .wds-Button-icon--left {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.wds-Button-icon--right {
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-[dir="rtl"] .wds-Button-icon--right {
-  margin-left: 0;
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-.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;
-  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);
-}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/src/main.less

@@ -7,8 +7,7 @@
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
-@import "./button/LegacyButton/Button.less";
-@import "./button/Button/less/Button.less";
+@import "./button/Button.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";

package/src/nudge/Nudge.tsx

@@ -154,7 +154,7 @@ const Nudge = ({
           </Body>
           {link && (
             <Link
-              href={href ?? '#'}
+              href={href}
               type={Typography.LINK_LARGE}
               className="wds-nudge-link"
               onClick={onClick}

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import PrimitiveAnchor from '../src';
+import PrimitiveAnchor from '..';
 
 export default {
   component: PrimitiveAnchor,

package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import PrimitiveAnchor from '../src';
+import PrimitiveAnchor from '..';
 
 describe('PrimitiveAnchor', () => {
   const defaultProps = {

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import PrimitiveButton from '../src';
+import PrimitiveButton from '..';
 
 export default {
   component: PrimitiveButton,

package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx

@@ -1,5 +1,6 @@
-import { screen } from '@testing-library/react';
-import PrimitiveButton from '../src';
+import { fireEvent, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import PrimitiveButton from '..';
 import messages from '../../../i18n/commonMessages/Button.messages';
 import { render } from '../../../test-utils';
 

package/src/test-utils/index.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, FC } from 'react';
 import { render, renderHook } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
 import { userEvent } from '@testing-library/user-event';
 
 import { Provider } from '..';

package/build/button/Button/src/Button.js

@@ -1,93 +0,0 @@
-'use strict';
-
-var React = require('react');
-var clsx = require('clsx');
-var PrimitiveButton = require('../../../primitives/PrimitiveButton/src/PrimitiveButton.js');
-var PrimitiveAnchor = require('../../../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
-var ProcessIndicator = require('../../../processIndicator/ProcessIndicator.js');
-var AvatarView = require('../../../avatarView/AvatarView.js');
-var AvatarLayout = require('../../../avatarLayout/AvatarLayout.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const Button = /*#__PURE__*/React.forwardRef(({
-  as = 'button',
-  children,
-  className,
-  size = 'md',
-  href,
-  priority = 'primary',
-  appearance = 'default',
-  iconLeft: LeftIcon,
-  iconRight: RightIcon,
-  avatars,
-  type = 'button',
-  loading = false,
-  block = false,
-  ...props
-}, ref) => {
-  const sizeClass = React.useMemo(() => {
-    return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
-  }, [size]);
-  const classNames = clsx.clsx({
-    [`wds-Button`]: as === 'a',
-    [`wds-Button--block`]: block,
-    [`wds-Button--${sizeClass}`]: size,
-    [`wds-Button--${priority}`]: priority,
-    [`wds-Button--${appearance}`]: appearance
-  }, className);
-  const contentClassNames = clsx.clsx('wds-Button-content', {
-    [`wds-Button-content--loading`]: loading
-  });
-  const content = /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: contentClassNames,
-    children: [loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
-      size: "xs",
-      className: "wds-Button-loader",
-      "data-testid": "button-loader-indicator"
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "wds-Button-label",
-      "aria-hidden": loading,
-      children: size === 'lg' ? children : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [size === 'md' && avatars && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wds-Button-avatars",
-          children: avatars.length === 1 ? /*#__PURE__*/jsxRuntime.jsx(AvatarView, {
-            size: 24,
-            ...avatars[0],
-            children: avatars[0]?.asset
-          }) : /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
-            orientation: "horizontal",
-            avatars: avatars,
-            size: 24
-          })
-        }), !avatars && LeftIcon && /*#__PURE__*/jsxRuntime.jsx(LeftIcon, {
-          className: "wds-Button-icon wds-Button-icon--left"
-        }), children, RightIcon && /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
-          className: "wds-Button-icon wds-Button-icon--right"
-        })]
-      })
-    })]
-  });
-  if (as === 'a') {
-    return /*#__PURE__*/jsxRuntime.jsx(PrimitiveAnchor, {
-      ref: ref,
-      ...props,
-      href: href,
-      className: classNames,
-      disabled: props.disabled,
-      children: content
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(PrimitiveButton, {
-    ref: ref,
-    ...props,
-    className: classNames,
-    disabled: props.disabled,
-    loading: loading,
-    type: type,
-    children: content
-  });
-});
-Button.displayName = 'Button';
-
-module.exports = Button;
-//# sourceMappingURL=Button.js.map

package/build/button/Button/src/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/button/Button/src/Button.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { clsx } from 'clsx';\nimport type { ButtonProps } from './Button.types';\nimport PrimitiveButton from '../../../primitives/PrimitiveButton';\nimport PrimitiveAnchor from '../../../primitives/PrimitiveAnchor';\nimport ProcessIndicator from '../../../processIndicator/ProcessIndicator';\nimport AvatarView from '../../../avatarView/AvatarView';\nimport AvatarLayout from '../../../avatarLayout/AvatarLayout';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'md',\n      href,\n      priority = 'primary',\n      appearance = 'default',\n      iconLeft: LeftIcon,\n      iconRight: RightIcon,\n      avatars,\n      type = 'button',\n      loading = false,\n      block = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const sizeClass = useMemo(() => {\n      return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';\n    }, [size]);\n\n    const classNames = clsx(\n      {\n        [`wds-Button`]: as === 'a',\n        [`wds-Button--block`]: block,\n        [`wds-Button--${sizeClass}`]: size,\n        [`wds-Button--${priority}`]: priority,\n        [`wds-Button--${appearance}`]: appearance,\n      },\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <span className={contentClassNames}>\n        {loading && (\n          <ProcessIndicator\n            size=\"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                  {avatars.length === 1 ? (\n                    <AvatarView size={24} {...avatars[0]}>\n                      {avatars[0]?.asset}\n                    </AvatarView>\n                  ) : (\n                    <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n                  )}\n                </span>\n              )}\n              {!avatars && LeftIcon && (\n                <LeftIcon className=\"wds-Button-icon wds-Button-icon--left\" />\n              )}\n              {children}\n              {RightIcon && <RightIcon className=\"wds-Button-icon wds-Button-icon--right\" />}\n            </>\n          )}\n        </span>\n      </span>\n    );\n\n    if (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={props.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={props.disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","priority","appearance","iconLeft","LeftIcon","iconRight","RightIcon","avatars","type","loading","block","props","ref","sizeClass","useMemo","classNames","clsx","contentClassNames","content","_jsxs","_jsx","ProcessIndicator","_Fragment","length","AvatarView","asset","AvatarLayout","orientation","PrimitiveAnchor","disabled","PrimitiveButton","displayName"],"mappings":"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"}

package/build/button/Button/src/Button.mjs

@@ -1,91 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-import { clsx } from 'clsx';
-import PrimitiveButton from '../../../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
-import PrimitiveAnchor from '../../../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
-import ProcessIndicator from '../../../processIndicator/ProcessIndicator.mjs';
-import AvatarView from '../../../avatarView/AvatarView.mjs';
-import AvatarLayout from '../../../avatarLayout/AvatarLayout.mjs';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-const Button = /*#__PURE__*/forwardRef(({
-  as = 'button',
-  children,
-  className,
-  size = 'md',
-  href,
-  priority = 'primary',
-  appearance = 'default',
-  iconLeft: LeftIcon,
-  iconRight: RightIcon,
-  avatars,
-  type = 'button',
-  loading = false,
-  block = false,
-  ...props
-}, ref) => {
-  const sizeClass = useMemo(() => {
-    return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
-  }, [size]);
-  const classNames = clsx({
-    [`wds-Button`]: as === 'a',
-    [`wds-Button--block`]: block,
-    [`wds-Button--${sizeClass}`]: size,
-    [`wds-Button--${priority}`]: priority,
-    [`wds-Button--${appearance}`]: appearance
-  }, className);
-  const contentClassNames = clsx('wds-Button-content', {
-    [`wds-Button-content--loading`]: loading
-  });
-  const content = /*#__PURE__*/jsxs("span", {
-    className: contentClassNames,
-    children: [loading && /*#__PURE__*/jsx(ProcessIndicator, {
-      size: "xs",
-      className: "wds-Button-loader",
-      "data-testid": "button-loader-indicator"
-    }), /*#__PURE__*/jsx("span", {
-      className: "wds-Button-label",
-      "aria-hidden": loading,
-      children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
-        children: [size === 'md' && avatars && /*#__PURE__*/jsx("span", {
-          className: "wds-Button-avatars",
-          children: avatars.length === 1 ? /*#__PURE__*/jsx(AvatarView, {
-            size: 24,
-            ...avatars[0],
-            children: avatars[0]?.asset
-          }) : /*#__PURE__*/jsx(AvatarLayout, {
-            orientation: "horizontal",
-            avatars: avatars,
-            size: 24
-          })
-        }), !avatars && LeftIcon && /*#__PURE__*/jsx(LeftIcon, {
-          className: "wds-Button-icon wds-Button-icon--left"
-        }), children, RightIcon && /*#__PURE__*/jsx(RightIcon, {
-          className: "wds-Button-icon wds-Button-icon--right"
-        })]
-      })
-    })]
-  });
-  if (as === 'a') {
-    return /*#__PURE__*/jsx(PrimitiveAnchor, {
-      ref: ref,
-      ...props,
-      href: href,
-      className: classNames,
-      disabled: props.disabled,
-      children: content
-    });
-  }
-  return /*#__PURE__*/jsx(PrimitiveButton, {
-    ref: ref,
-    ...props,
-    className: classNames,
-    disabled: props.disabled,
-    loading: loading,
-    type: type,
-    children: content
-  });
-});
-Button.displayName = 'Button';
-
-export { Button as default };
-//# sourceMappingURL=Button.mjs.map