@transferwise/components 0.0.0-experimental-4f5d175 → 0.0.0-experimental-de92c64

package/build/types/primitives/PrimitiveButton/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './src';
-export * from './src';
+export { default } from './PrimitiveButton';
+export type { PrimitiveButtonProps, PrimitiveButtonAttributes, PrimitiveButtonElementRef, } from './PrimitiveButton.types';
 //# sourceMappingURL=index.d.ts.map

package/build/types/primitives/PrimitiveButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4f5d175",
+  "version": "0.0.0-experimental-de92c64",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-4f5d175",
+    "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-4f5d175",
+    "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/button/Button.css

@@ -26,23 +26,16 @@
   --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-overlay);
+  --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 {
-  --Button-primary-negative-color: var(--color-white);
+  --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-color: var(--color-contrast);
 }
 /* Button Styles */
 .wds-Button {
@@ -75,13 +68,10 @@
 }
 .wds-Button.wds-Button--disabled,
 .wds-Button:disabled {
-  filter: none;
   mix-blend-mode: luminosity;
   opacity: 0.45;
   cursor: not-allowed;
 }
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled,
 .wds-Button.wds-Button--disabled:hover,
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
@@ -183,22 +173,12 @@
 }
 .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 {
@@ -220,3 +200,6 @@
 .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);
 }
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
+  scale: -1 1;
+}

package/src/button/Button.less

@@ -30,16 +30,10 @@
 
   &.wds-Button--disabled,
   &:disabled {
-    // The declarations below are necessary as design specs for
-    // the button's disabled state have changed. This is to be
-    // further investigated at a later stage.
-    // @see https://transferwise.atlassian.net/browse/DS-7386
-    filter: none;
     mix-blend-mode: luminosity;
     opacity: 0.45;
     cursor: not-allowed;
 
-    &,
     &:hover,
     &:active {
       background-color: var(--Button-background);
@@ -128,7 +122,7 @@
 
 
 
-  // Width modifiers
+  // Width mofidiers
   &--block {
     width: 100%;
   }
@@ -169,9 +163,6 @@
 
   &-loader {
     position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100%;
     height: 100%;
 
@@ -181,21 +172,6 @@
   }
 }
 
-/* RTL Styles */
-:dir(rtl) {
-  .wds-Button {
-    .tw-icon-chevron-right,
-    .tw-icon-arrow-right {
-      transform: rotate(180deg);
-    }
-
-    .tw-icon-chevron-left,
-    .tw-icon-arrow-left {
-      transform: rotate(180deg);
-    }
-  }
-}
-
 /* Avatar border transparency */
 /* dark buttons get 20% transparency, light buttons get 12% */
 .wds-Button-avatars {
@@ -225,3 +201,18 @@
     }
   }
 }
+
+:dir(rtl) {
+  .wds-Button {
+    .tw-icon-chevron-right,
+    .tw-icon-arrow-right,
+    .tw-icon-chevron-left,
+    .tw-icon-arrow-left,
+    .tw-icon-arrow-diagonal-down,
+    .tw-icon-arrow-diagonal-up,
+    .tw-icon-list,
+    .tw-icon-activity {
+      scale: -1 1;
+    }
+  }
+}

package/src/button/Button.spec.tsx

@@ -71,109 +71,6 @@ describe('Button', () => {
         );
         expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
       });
-
-      describe('disabled mode', () => {
-        describe('button', () => {
-          it('should not be disabled by default', () => {
-            render(<Button v2>{name}</Button>);
-            const button = screen.getByRole('button');
-            expect(button).toBeEnabled();
-            expect(button).not.toHaveAttribute('aria-disabled');
-          });
-
-          it('should respect disabled mode and set it only via the `disabled` attribute', () => {
-            render(
-              <Button v2 disabled>
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('button');
-            expect(button).toBeDisabled();
-            expect(button).not.toHaveAttribute('aria-disabled');
-          });
-        });
-
-        describe('anchor', () => {
-          it('should not be disabled by default', () => {
-            render(
-              <Button v2 href="wise.com">
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('link');
-            expect(button).toBeEnabled();
-            expect(button).not.toHaveAttribute('aria-disabled');
-          });
-
-          it('should respect disabled mode', () => {
-            render(
-              <Button v2 href="wise.com" disabled>
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('link');
-            expect(button).toHaveAttribute('aria-disabled');
-            expect(button).toBeEnabled();
-            expect(button).not.toHaveAttribute('href');
-          });
-        });
-      });
-
-      describe('loading mode', () => {
-        describe('button', () => {
-          it('should not be loading by default', () => {
-            render(<Button v2>{name}</Button>);
-            const button = screen.getByRole('button');
-            expect(button).toBeEnabled();
-            expect(button).not.toHaveAttribute('aria-busy');
-          });
-
-          it('should respect loading mode', () => {
-            render(
-              <Button v2 loading>
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('button');
-            expect(button).toHaveAttribute('aria-busy');
-            // the `disabled` attribute is not set to keep the button
-            // focusable but aria attribute is defined to make it
-            // announced properly by the assistive tech
-            expect(button).toBeEnabled();
-            expect(button).toHaveAttribute('aria-disabled');
-          });
-        });
-
-        describe('anchor', () => {
-          it('should not be loading by default', () => {
-            render(
-              <Button v2 href="wise.com">
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('link');
-            expect(button).toBeEnabled();
-            expect(button).not.toHaveAttribute('aria-busy');
-            expect(button).not.toHaveAttribute('aria-disabled');
-          });
-
-          it('should respect loading mode', () => {
-            render(
-              <Button v2 loading href="wise.com">
-                {name}
-              </Button>,
-            );
-            const button = screen.getByRole('link');
-            expect(button).toHaveAttribute('aria-busy');
-            // the `disabled` attribute is not set to keep the button
-            // focusable but aria attribute is defined to make it
-            // announced properly by the assistive tech
-            expect(button).toBeEnabled();
-            expect(button).toHaveAttribute('aria-disabled');
-            expect(button).not.toHaveAttribute('href');
-          });
-        });
-      });
     });
   });
 

package/src/button/Button.story.tsx

@@ -1,6 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Freeze, ArrowRight, ArrowLeft } from '@transferwise/icons';
+import {
+  Freeze,
+  ArrowRight,
+  ArrowLeft,
+  ArrowDiagonalDown,
+  ArrowDiagonalUp,
+  ChevronRight,
+  ChevronLeft,
+} from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';
 import type { ButtonProps, ButtonPriority } from './Button.types';
@@ -668,8 +676,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
                 avatars={[{ asset: <Freeze /> }]}
                 block
                 href="https://wise.com"
@@ -683,8 +691,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
                 avatars={[{ asset: <Freeze /> }]}
                 block
                 disabled
@@ -696,8 +704,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
                 avatars={[{ asset: <Freeze /> }]}
                 block
                 loading
@@ -710,5 +718,5 @@ export const AllVariants = storyConfig(
       </div>
     ),
   },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
 );

package/src/button/Button.tsx

@@ -94,8 +94,7 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
           {...(props as any)}
           href={href}
           className={classNames}
-          disabled={disabled || loading}
-          aria-busy={loading || undefined}
+          disabled={disabled}
         >
           {content}
         </PrimitiveAnchor>

package/src/button/Button.vars.css

@@ -26,21 +26,14 @@
   --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-overlay);
+  --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 {
-  --Button-primary-negative-color: var(--color-white);
+  --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-color: var(--color-contrast);
 }

package/src/button/Button.vars.less

@@ -33,28 +33,18 @@
   --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-overlay);
+  --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 & {
-    --Button-primary-negative-color: var(--color-white);
+.np-theme-personal--bright-green {
+  .wds-Button {
+    --color-contrast: #FFFFFF;
     --Button-secondary-color: var(--color-interactive-control);
-    --Button-secondary-negative-color: var(--color-white);
-  }
-
-
-  .np-theme-personal--forest-green & {
-    --Button-secondary-background: var(--color-interactive-neutral);
-    --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-    --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-    --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-    --Button-secondary-negative-color: var(--color-contrast-overlay);
+    --Button-secondary-negative-color: var(--color-contrast);
   }
 }
-
-

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -9,6 +9,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
+        aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
         class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"

package/src/main.css

@@ -744,23 +744,16 @@ div.critical-comms .critical-comms-body {
   --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-overlay);
+  --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 {
-  --Button-primary-negative-color: var(--color-white);
+  --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-color: var(--color-contrast);
 }
 /* Button Styles */
 .wds-Button {
@@ -793,13 +786,10 @@ div.critical-comms .critical-comms-body {
 }
 .wds-Button.wds-Button--disabled,
 .wds-Button:disabled {
-  filter: none;
   mix-blend-mode: luminosity;
   opacity: 0.45;
   cursor: not-allowed;
 }
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled,
 .wds-Button.wds-Button--disabled:hover,
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
@@ -901,22 +891,12 @@ div.critical-comms .critical-comms-body {
 }
 .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 {
@@ -938,6 +918,9 @@ div.critical-comms .critical-comms-body {
 .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);
 }
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
+  scale: -1 1;
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx}

@@ -90,7 +90,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
      * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
      */
     const anchorProps = {
-      'aria-disabled': disabled || undefined,
+      'aria-disabled': disabled,
       className: anchorClasses,
       'data-testid': testId,
       href: disabled ? undefined : href,

package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { BasePrimitiveProps, StyleProp } from '..';
+
+/**
+ * Type aliases for an anchor component.
+ */
+export type PrimitiveAnchorAttributes = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
+
+/**
+ * Properties for the anchor component.
+ */
+export interface PrimitiveAnchorProps
+  extends BasePrimitiveProps,
+    StyleProp,
+    Omit<PrimitiveAnchorAttributes, 'role'> {
+  /** Content of the anchor */
+  children?: ReactNode;
+
+  /** The URL to navigate to when the anchor is clicked */
+  href?: string | undefined;
+
+  /** Disable the anchor */
+  disabled?: boolean;
+
+  /** Reference to the anchor element */
+  ref?: PrimitiveAnchorElementRef;
+
+  /**
+   * HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
+   */
+  target?: HTMLAnchorElement['target'];
+}

package/src/primitives/PrimitiveAnchor/index.ts

@@ -1,2 +1,6 @@
-export { default } from './src';
-export * from './src';
+export { default } from './PrimitiveAnchor';
+export type {
+  PrimitiveAnchorProps,
+  PrimitiveAnchorAttributes,
+  PrimitiveAnchorElementRef,
+} from './PrimitiveAnchor.types';

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveAnchor from '../src';
+import PrimitiveAnchor from '..';
 
 const meta = {
   title: 'Primitives/Anchor/Tests',

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/{src/PrimitiveButton.tsx → PrimitiveButton.tsx}

@@ -2,8 +2,8 @@
 import React, { forwardRef, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { useIntl, MessageDescriptor } from 'react-intl';
-import messages from '../../../i18n/commonMessages/Button.messages';
-import type { PrimitiveButtonProps } from '..';
+import messages from '../../i18n/commonMessages/Button.messages';
+import type { PrimitiveButtonProps } from '.';
 
 /**
  * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design
@@ -95,9 +95,10 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
      *   by assistive technologies, set to 'polite' during loading.
      */
     const buttonProps = {
-      'aria-disabled': loading || undefined,
-      'aria-busy': loading || undefined,
-      'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],
+      'aria-disabled': disabled || loading,
+      'aria-label': loading
+        ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)
+        : props['aria-label'],
       'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,
       className: classNames,
       'data-testid': testId,

package/src/primitives/PrimitiveButton/{src/PrimitiveButton.types.ts → PrimitiveButton.types.ts}

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { BasePrimitiveProps, StyleProp } from '../..';
+import { BasePrimitiveProps, StyleProp } from '..';
 
 /**
  * Type aliases for a button component.

package/src/primitives/PrimitiveButton/index.ts

@@ -1,2 +1,6 @@
-export { default } from './src';
-export * from './src';
+export { default } from './PrimitiveButton';
+export type {
+  PrimitiveButtonProps,
+  PrimitiveButtonAttributes,
+  PrimitiveButtonElementRef,
+} from './PrimitiveButton.types';

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveButton from '../src';
+import PrimitiveButton from '..';
 
 const meta = {
   title: 'Primitives/Button/Tests',