@transferwise/components 0.0.0-experimental-53c607c → 0.0.0-experimental-b002e6f

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,9 +535,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,264 +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 .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --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 .wds-Button {
-  --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.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: #00a2dd;
-  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--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-background-hover);
-  --Button-background-active: var(--Button-primary-negative-background-active);
-  --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-background-hover);
-  --Button-background-active: var(--Button-secondary-negative-background-active);
-  --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--start {
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
-  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--start {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-}
-[dir="rtl"] .wds-Button-icon--start {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.wds-Button-icon--end {
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-[dir="rtl"] .wds-Button-icon--end {
-  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,7 +7,6 @@
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
-@import "./button/LegacyButton.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.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/src/PrimitiveAnchor.tsx

@@ -30,7 +30,13 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
     },
     ref,
   ) => {
-    const anchorClasses = clsx(className);
+    const anchorClasses = clsx(
+      'wds-Anchor',
+      {
+        'wds-Anchor--disabled': disabled,
+      },
+      className,
+    );
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLAnchorElement>) => {

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 = {
@@ -27,6 +27,7 @@ describe('PrimitiveAnchor', () => {
     renderAnchor(props);
 
     const link = screen.getByRole('link');
+    expect(link).toHaveClass('wds-Anchor');
     expect(link).toHaveClass('custom-class');
   });
 
@@ -40,6 +41,7 @@ describe('PrimitiveAnchor', () => {
 
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('aria-disabled', 'true');
+    expect(link).toHaveClass('wds-Anchor--disabled');
     expect(link).not.toHaveAttribute('href', 'https://example.com');
   });
 

package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx

@@ -35,7 +35,14 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
     ref,
   ) => {
     const intl = useIntl();
-    const classNames = clsx(className);
+    const classNames = clsx(
+      'wds-Button',
+      {
+        'wds-Button--disabled': disabled,
+        'wds-Button--loading': loading,
+      },
+      className,
+    );
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {

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';
 
@@ -35,6 +36,7 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button');
     expect(button).toHaveClass('custom-class');
   });
 
@@ -47,6 +49,7 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button--disabled');
     expect(button).toBeDisabled();
   });
 

package/src/select/Select.tsx

@@ -573,7 +573,6 @@ export default function Select({
         aria-controls={listboxId}
         aria-expanded={open}
         onClick={handleOnClick}
-        // @ts-expect-error Spread types may only be created from object types.
         {...buttonProps}
       >
         {selected ? (

package/src/slidingPanel/SlidingPanel.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '../test-utils';
+import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
+
+describe('SlidingPanel', () => {
+  const initialProps: SlidingPanelProps = {
+    open: true,
+    children: <div data-testid="content">Content</div>,
+    testId: 'wrapper',
+  };
+
+  const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
+    render(<SlidingPanel {...initialProps} {...overrides} />);
+
+  describe('open', () => {
+    it('should respect open=false', () => {
+      customRender({ open: false });
+      expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
+    });
+
+    it('should respect open=true', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+  });
+
+  describe('position', () => {
+    it(`should default to 'left'`, () => {
+      customRender();
+      expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
+    });
+
+    (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
+      describe(position, () => {
+        it(`should add the classname`, () => {
+          customRender({ position });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
+        });
+
+        it(`should add the classname for 'showSlidingPanelBorder'`, () => {
+          customRender({ position, showSlidingPanelBorder: true });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
+        });
+      });
+    });
+  });
+
+  it('should render children', () => {
+    customRender();
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    const className = 'customClass';
+    customRender({ className });
+    expect(screen.getByTestId('wrapper')).toHaveClass(className);
+  });
+
+  describe('slidingPanelPositionFixed', () => {
+    it('should not be fixed by default', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
+    });
+
+    it('should respect slidingPanelPositionFixed=true', () => {
+      customRender({ slidingPanelPositionFixed: true });
+      expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
+    });
+  });
+});

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.resolver.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var React = require('react');
-var LegacyButton = require('./LegacyButton.js');
-var Button$1 = require('./Button.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const mapProps = props => {
-  const {
-    priority,
-    size,
-    type,
-    as,
-    ...newProps
-  } = props;
-  const priorityMapping = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal'
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary'
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary'
-    }
-  };
-  const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
-  const mappedAppearance = type === 'negative' ? 'negative' : null;
-  const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
-  return {
-    ...newProps,
-    size: size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
-    priority: mappedPriority,
-    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
-    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
-    href: as === 'a' ? props.href || '' : null
-  };
-};
-const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    useNewButton,
-    as,
-    ...rest
-  } = props;
-  if (useNewButton) {
-    const mappedProps = mapProps(props);
-    return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-      ...mappedProps,
-      ref: ref,
-      as: as
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(LegacyButton, {
-    ...rest,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-
-module.exports = Button;
-//# sourceMappingURL=Button.resolver.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n  | 'accent'\n  | 'negative'\n  | 'positive'\n  | 'primary'\n  | 'pay'\n  | 'secondary'\n  | 'danger'\n  | 'link'\n  | null\n  | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n  href?: string;\n  target?: string;\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n  | (Omit<LegacyButtonProps, 'ref'> &\n      CommonButtonProps & {\n        priority?: LegacyButtonProps['priority'];\n        type?: LegacyButtonType;\n        htmlType?: string;\n        useNewButton?: false;\n      })\n  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &\n      CommonButtonProps & {\n        priority?: NewButtonProps['priority'];\n        type?: NewButtonType;\n        useNewButton: true;\n      });\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n  const { priority, size, type, as, ...newProps } = props;\n\n  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n    accent: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'minimal',\n    },\n    positive: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'tertiary',\n    },\n    negative: {\n      primary: 'primary',\n      secondary: 'secondary',\n      tertiary: 'secondary',\n    },\n  };\n\n  const mappedPriority =\n    type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;\n  const mappedAppearance = type === 'negative' ? 'negative' : null;\n\n  const legacyButtonTypes: LegacyButtonType[] = [\n    'accent',\n    'negative',\n    'positive',\n    'primary',\n    'pay',\n    'secondary',\n    'danger',\n    'link',\n  ];\n\n  return {\n    ...newProps,\n    size:\n      size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n    priority: mappedPriority,\n    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),\n    type:\n      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,\n    href: as === 'a' ? props.href || '' : null,\n  } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {\n  const { useNewButton, as, ...rest } = props;\n\n  if (useNewButton) {\n    const mappedProps = mapProps(props as LegacyButtonProps);\n    return (\n      <NewButton\n        {...mappedProps}\n        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n        as={as}\n      />\n    );\n  }\n\n  return (\n    <LegacyButton\n      {...(rest as LegacyButtonProps)}\n      ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n    />\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","mappedAppearance","legacyButtonTypes","appearance","includes","htmlType","href","Button","forwardRef","ref","useNewButton","rest","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAwCA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAI,IAAI,CAAA;EACrF,MAAMa,gBAAgB,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,IAAI,CAAA;AAEhE,EAAA,MAAMY,iBAAiB,GAAuB,CAC5C,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,OAAO;AACL,IAAA,GAAGV,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAEF,gBAAgB,KAAK,YAAY,IAAId,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAG,IAAI,CAAC;AACjFb,IAAAA,IAAI,EACFA,IAAI,IAAI,CAACY,iBAAiB,CAACE,QAAQ,CAACd,IAAwB,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACkB,QAAQ,IAAI,IAAI;IAC/FC,IAAI,EAAEf,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACmB,IAAI,IAAI,EAAE,GAAG,IAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAEKC,MAAAA,MAAM,gBAAGC,gBAAU,CAAqD,CAACrB,KAAK,EAAEsB,GAAG,KAAI;EAC3F,MAAM;IAAEC,YAAY;IAAEnB,EAAE;IAAE,GAAGoB,IAAAA;AAAI,GAAE,GAAGxB,KAAK,CAAA;AAE3C,EAAA,IAAIuB,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAG1B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBACE0B,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GACJF,WAAW;AACfH,MAAAA,GAAG,EAAEA,GAAwD;AAC7DlB,MAAAA,EAAE,EAAEA,EAAAA;AAAG,KACP,CAAA,CAAA;AAEN,GAAA;EAEA,oBACEsB,cAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GACNJ,IAA0B;AAC/BF,IAAAA,GAAG,EAAEA,GAAAA;AAAwD,GAAA,CAC7D,CAAA;AAEN,CAAC,EAAC;AAEFF,MAAM,CAACS,WAAW,GAAG,QAAQ;;;;"}

package/build/button/Button.resolver.mjs

@@ -1,65 +0,0 @@
-import { forwardRef } from 'react';
-import LegacyButton from './LegacyButton.mjs';
-import Button$1 from './Button.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const mapProps = props => {
-  const {
-    priority,
-    size,
-    type,
-    as,
-    ...newProps
-  } = props;
-  const priorityMapping = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal'
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary'
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary'
-    }
-  };
-  const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
-  const mappedAppearance = type === 'negative' ? 'negative' : null;
-  const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
-  return {
-    ...newProps,
-    size: size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
-    priority: mappedPriority,
-    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
-    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
-    href: as === 'a' ? props.href || '' : null
-  };
-};
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    useNewButton,
-    as,
-    ...rest
-  } = props;
-  if (useNewButton) {
-    const mappedProps = mapProps(props);
-    return /*#__PURE__*/jsx(Button$1, {
-      ...mappedProps,
-      ref: ref,
-      as: as
-    });
-  }
-  return /*#__PURE__*/jsx(LegacyButton, {
-    ...rest,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-
-export { Button as default };
-//# sourceMappingURL=Button.resolver.mjs.map

package/build/button/Button.resolver.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n  | 'accent'\n  | 'negative'\n  | 'positive'\n  | 'primary'\n  | 'pay'\n  | 'secondary'\n  | 'danger'\n  | 'link'\n  | null\n  | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n  href?: string;\n  target?: string;\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n  | (Omit<LegacyButtonProps, 'ref'> &\n      CommonButtonProps & {\n        priority?: LegacyButtonProps['priority'];\n        type?: LegacyButtonType;\n        htmlType?: string;\n        useNewButton?: false;\n      })\n  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &\n      CommonButtonProps & {\n        priority?: NewButtonProps['priority'];\n        type?: NewButtonType;\n        useNewButton: true;\n      });\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n  const { priority, size, type, as, ...newProps } = props;\n\n  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n    accent: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'minimal',\n    },\n    positive: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'tertiary',\n    },\n    negative: {\n      primary: 'primary',\n      secondary: 'secondary',\n      tertiary: 'secondary',\n    },\n  };\n\n  const mappedPriority =\n    type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;\n  const mappedAppearance = type === 'negative' ? 'negative' : null;\n\n  const legacyButtonTypes: LegacyButtonType[] = [\n    'accent',\n    'negative',\n    'positive',\n    'primary',\n    'pay',\n    'secondary',\n    'danger',\n    'link',\n  ];\n\n  return {\n    ...newProps,\n    size:\n      size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n    priority: mappedPriority,\n    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),\n    type:\n      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,\n    href: as === 'a' ? props.href || '' : null,\n  } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {\n  const { useNewButton, as, ...rest } = props;\n\n  if (useNewButton) {\n    const mappedProps = mapProps(props as LegacyButtonProps);\n    return (\n      <NewButton\n        {...mappedProps}\n        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n        as={as}\n      />\n    );\n  }\n\n  return (\n    <LegacyButton\n      {...(rest as LegacyButtonProps)}\n      ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n    />\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","mappedAppearance","legacyButtonTypes","appearance","includes","htmlType","href","Button","forwardRef","ref","useNewButton","rest","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAwCA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAI,IAAI,CAAA;EACrF,MAAMa,gBAAgB,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,IAAI,CAAA;AAEhE,EAAA,MAAMY,iBAAiB,GAAuB,CAC5C,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,OAAO;AACL,IAAA,GAAGV,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAEF,gBAAgB,KAAK,YAAY,IAAId,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAG,IAAI,CAAC;AACjFb,IAAAA,IAAI,EACFA,IAAI,IAAI,CAACY,iBAAiB,CAACE,QAAQ,CAACd,IAAwB,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACkB,QAAQ,IAAI,IAAI;IAC/FC,IAAI,EAAEf,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACmB,IAAI,IAAI,EAAE,GAAG,IAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAEKC,MAAAA,MAAM,gBAAGC,UAAU,CAAqD,CAACrB,KAAK,EAAEsB,GAAG,KAAI;EAC3F,MAAM;IAAEC,YAAY;IAAEnB,EAAE;IAAE,GAAGoB,IAAAA;AAAI,GAAE,GAAGxB,KAAK,CAAA;AAE3C,EAAA,IAAIuB,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAG1B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBACE0B,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GACJF,WAAW;AACfH,MAAAA,GAAG,EAAEA,GAAwD;AAC7DlB,MAAAA,EAAE,EAAEA,EAAAA;AAAG,KACP,CAAA,CAAA;AAEN,GAAA;EAEA,oBACEsB,GAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GACNJ,IAA0B;AAC/BF,IAAAA,GAAG,EAAEA,GAAAA;AAAwD,GAAA,CAC7D,CAAA;AAEN,CAAC,EAAC;AAEFF,MAAM,CAACS,WAAW,GAAG,QAAQ;;;;"}