@transferwise/components 0.0.0-experimental-62f7040 → 0.0.0-experimental-adfacd1

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,12 +14,6 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders aria-label if provided', () => {
-    render(<AnimatedLabel {...props} aria-label="hello" />);
-    const checkbox = screen.getByLabelText('hello');
-    expect(checkbox).toBeInTheDocument();
-  });
-
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
@@ -28,41 +22,33 @@ describe('AnimatedLabel', () => {
 
   it('renders only one label with class out', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-    expect(container.querySelectorAll('.np-animated-label--out')).toHaveLength(1);
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,41 +1,32 @@
 import classNames from 'classnames';
 import React from 'react';
 
+import Body from '../../body';
+import { Typography } from '../../common';
+
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
   labels: React.ReactNode[];
-  'aria-label': string;
 }
 
-const AnimatedLabel = ({
-  activeLabel,
-  className,
-  labels,
-  'aria-label': ariaLabel,
-}: AnimatedLabelProps) => {
-  const numberLabels = labels.length - 1;
-
+const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
   return (
-    <div
-      aria-label={ariaLabel}
-      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
-    >
+    <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
           <div
             key={nextLabel}
-            className={classNames('text-xs-left', {
-              'np-animated-label--in': index === activeLabel,
-              'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels,
+            className={classNames('text-xs-center', {
+              'np-animated-label--in text-ellipsis': index === activeLabel,
             })}
           >
             {label}
           </div>
         );
       })}
-    </div>
+    </Body>
   );
 };
 

package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap

@@ -3,20 +3,20 @@
 exports[`AnimatedLabel renders all labels 1`] = `
 <div>
   <div
-    class="np-animated-label np-text-body-large-bold"
+    class="np-text-body-large-bold np-animated-label"
   >
     <div
-      class="text-xs-left np-animated-label--in"
+      class="text-xs-center np-animated-label--in text-ellipsis"
     >
       label1
     </div>
     <div
-      class="text-xs-left np-animated-label--out"
+      class="text-xs-center"
     >
       label2
     </div>
     <div
-      class="text-xs-left"
+      class="text-xs-center"
     >
       label3
     </div>

package/src/flowNavigation/backButton/BackButton.js

@@ -2,18 +2,23 @@ import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const BackButton = ({ label, className, onClick }) => (
-  <button
-    type="button"
-    className={classNames('np-back-button', 'align-items-center', 'btn-unstyled', className)}
-    onClick={onClick}
-  >
-    <ArrowLeftIcon size={24} />
-    {label}
-  </button>
+import Avatar, { AvatarType } from '../../avatar';
+
+const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
+  <Avatar type={AvatarType.ICON} size={40}>
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={classNames('np-back-button', 'btn-unstyled', className)}
+      onClick={onClick}
+    >
+      <ArrowLeftIcon size={24} />
+    </button>
+  </Avatar>
 );
 
 BackButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func,

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render } from '../../test-utils';
+import messages from '../FlowNavigation.messages';
 
 import BackButton from '.';
 
@@ -7,6 +7,7 @@ const props = {
   label: <>label</>,
   className: 'className',
   onClick: jest.fn(),
+  'aria-label': messages.back.defaultMessage,
 };
 describe('BackButton', () => {
   it(`renders as expected`, () => {

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -2,29 +2,36 @@
 
 exports[`BackButton renders as expected 1`] = `
 <div>
-  <button
-    class="np-back-button align-items-center btn-unstyled className"
-    type="button"
+  <div
+    class="tw-avatar tw-avatar--40 tw-avatar--icon"
   >
-    <span
-      aria-hidden="true"
-      class="tw-icon tw-icon-arrow-left "
-      data-testid="arrow-left-icon"
-      role="presentation"
+    <div
+      class="tw-avatar__content"
     >
-      <svg
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+      <button
+        class="np-back-button btn-unstyled className"
+        type="button"
       >
-        <path
-          d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-        />
-      </svg>
-    </span>
-    label
-  </button>
+        <span
+          aria-hidden="true"
+          class="tw-icon tw-icon-arrow-left "
+          data-testid="arrow-left-icon"
+          role="presentation"
+        >
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:#00a2dd;color:var(--color-interactive-accent)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:var(--color-interactive-contrast)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -111,7 +111,7 @@
     background-color: var(--color-interactive-primary);
 
     && * {
-      color: var(--color-interactive-accent); /* TODO: Use contrast token */
+      color: var(--color-interactive-contrast);
     }
   }
 

package/src/inputs/SelectInput.story.tsx

@@ -131,6 +131,10 @@ export const Basic: StoryObj<{
       action: 'cleared',
     },
   },
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByRole('button');
+    userEvent.click(triggerButton);
+  },
 };
 
 interface Month {
@@ -180,11 +184,10 @@ export const Months: StoryObj<{
       action: 'cleared',
     },
   },
-};
-
-Months.play = ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  userEvent.click(canvas.getByText('January'));
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByText('January');
+    userEvent.click(triggerButton);
+  },
 };
 
 interface Currency {

package/src/logo/Logo.js

@@ -27,11 +27,6 @@ const Logo = ({ className, inverse, type }) => {
     ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`]
     : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
-  // If clientWidth is not defined, don't render anything
-  if (clientWidth === null) {
-    return null;
-  }
-
   return (
     <LogoSvg
       className={classNames('np-logo-svg', className)}