@transferwise/components 0.0.0-experimental-bfa3811 → 0.0.0-experimental-db49ba8

package/build/styles/FlowNavigation/AnimatedLabel/AnimatedLabel.css

@@ -3,6 +3,7 @@
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  min-inline-size: 0;
 }
 .np-animated-label > * {
   block-size: 0;

package/build/styles/FlowNavigation/FlowNavigation.css

@@ -25,6 +25,12 @@
   border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
+.np-flow-navigation__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-inline-size: 0;
+}
 .np-flow-navigation__content {
   inline-size: 100%;
   min-inline-size: 320px;

package/build/styles/Typeahead/Typeahead.css

@@ -65,9 +65,6 @@
   cursor: text;
   display: flex;
 }
-.typeahead--multiple .input-group.disabled .typeahead__input-container {
-  cursor: not-allowed;
-}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/build/styles/main.css

@@ -22987,6 +22987,7 @@ button.np-option {
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  min-inline-size: 0;
 }
 .np-animated-label > * {
   block-size: 0;
@@ -23041,6 +23042,12 @@ button.np-option {
   border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
+.np-flow-navigation__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-inline-size: 0;
+}
 .np-flow-navigation__content {
   inline-size: 100%;
   min-inline-size: 320px;
@@ -27578,9 +27585,6 @@ button.np-link {
   cursor: text;
   display: flex;
 }
-.typeahead--multiple .input-group.disabled .typeahead__input-container {
-  cursor: not-allowed;
-}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/build/types/Chips/Chip/Chip.d.ts

@@ -6,12 +6,10 @@ export type ChipProps<T extends ChipValue = ChipValue> = {
     onRemove?: () => void;
     onClick?: () => void;
     onKeyPress?: () => void;
-    /** @default false */
-    disabled?: boolean;
     closeButton?: AriaLabelProperty;
     'aria-checked'?: boolean;
     role?: string;
 } & AriaLabelProperty & CommonProps;
-declare const Chip: <T extends ChipValue = ChipValue>({ label, value, onRemove, onClick, onKeyPress, disabled, className, "aria-label": ariaLabel, "aria-checked": ariaChecked, role, closeButton, }: ChipProps<T>) => import("react").JSX.Element;
+declare const Chip: <T extends ChipValue = ChipValue>({ label, value, onRemove, onClick, onKeyPress, className, "aria-label": ariaLabel, "aria-checked": ariaChecked, role, closeButton, }: ChipProps<T>) => import("react").JSX.Element;
 export default Chip;
 //# sourceMappingURL=Chip.d.ts.map

package/build/types/Chips/Chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/Chip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAc,MAAM,cAAc,CAAC;AAG1E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,IAAI;IACvD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,iBAAiB,GACnB,WAAW,CAAC;AAEd,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,gJAY5C,SAAS,CAAC,CAAC,CAAC,gCAmDd,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/Chip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAc,MAAM,cAAc,CAAC;AAG1E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,IAAI;IACvD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,iBAAiB,GACnB,WAAW,CAAC;AAEd,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,sIAW5C,SAAS,CAAC,CAAC,CAAC,gCA8Cd,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/FlowNavigation/AnimatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,GAAI,mCAAmC,kBAAkB,gCAgG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,GAAI,mCAAmC,kBAAkB,gCAqG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/Typeahead/Typeahead.d.ts

@@ -32,8 +32,6 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
     chipSeparators?: readonly string[];
     /** @default true */
     clearable?: boolean;
-    /** @default false */
-    disabled?: boolean;
     footer?: ReactNode;
     /** @default [] */
     initialValue?: readonly TypeaheadOption<T>[];

package/build/types/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,qBAAqB,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,EACD,iBAAiB,CAAC,WAAW,CAAC,GAC9B,GAAG,SAAS,CAAC,KAAK,EAAE,GACpB,GAAG,SAAS,CAAC,IAAI,EAAE,GACnB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B,CAAC;IACF,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kBAAkB;IAClB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;wBA6gBoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts

@@ -12,7 +12,7 @@ export type TypeaheadInputProps<T> = {
     onPaste: React.ClipboardEventHandler<HTMLInputElement>;
     renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
     ariaActivedescendant?: string;
-} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'>;
+} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
 type TypeaheadInputState = {
     inputWidth: number;
     keyboardFocusedOptionIndex: number | null;

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CACN,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CACpF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA+C3B;IAEF,MAAM;CAiCP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA6C3B;IAEF,MAAM;CAiCP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bfa3811",
+  "version": "0.0.0-experimental-db49ba8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Chips/Chip/Chip.tsx

@@ -13,8 +13,6 @@ export type ChipProps<T extends ChipValue = ChipValue> = {
   onRemove?: () => void;
   onClick?: () => void;
   onKeyPress?: () => void;
-  /** @default false */
-  disabled?: boolean;
   closeButton?: AriaLabelProperty;
   'aria-checked'?: boolean;
   role?: string;
@@ -27,7 +25,6 @@ const Chip = <T extends ChipValue = ChipValue>({
   onRemove,
   onClick,
   onKeyPress,
-  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -35,10 +32,8 @@ const Chip = <T extends ChipValue = ChipValue>({
   closeButton,
 }: ChipProps<T>) => {
   const isActionable = onClick || onKeyPress;
-  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const chipRole = role ?? defaultRole;
-  const tabIndex = isInteractive ? 0 : -1;
+  const tabIndex = isActionable ? 0 : -1;
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
   const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
@@ -52,21 +47,19 @@ const Chip = <T extends ChipValue = ChipValue>({
   return (
     <div
       key={value}
-      role={chipRole}
+      role={role ?? defaultRole}
       tabIndex={tabIndex}
       aria-label={ariaLabel}
       aria-checked={ariaChecked}
-      aria-disabled={chipRole && disabled ? true : undefined}
       className={clsx(
         'np-chip',
         'd-flex',
         'align-items-center',
         'justify-content-between',
         onRemove ? 'np-chip--removable' : '',
-        { disabled },
         className,
       )}
-      {...(isInteractive && { onClick, onKeyPress })}
+      {...(isActionable && { onClick, onKeyPress })}
     >
       <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
         {label}
@@ -78,7 +71,6 @@ const Chip = <T extends ChipValue = ChipValue>({
           aria-label={closeButton?.['aria-label']}
           size="sm"
           filled
-          isDisabled={disabled}
           onClick={onRemove}
         />
       ) : null}

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.css

@@ -3,6 +3,7 @@
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  min-inline-size: 0;
 }
 .np-animated-label > * {
   block-size: 0;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.less

@@ -11,6 +11,7 @@
   overflow: hidden;
   position: relative;
   padding-top: 1px;
+  min-width: 0;
 
   > * {
     height: 0;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx

@@ -37,6 +37,11 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                 aria-haspopup="menu"
                 aria-controls={overlayId}
                 aria-expanded={showSteps}
+                title={
+                  typeof steps[activeLabel]?.label === 'string'
+                    ? steps[activeLabel].label
+                    : undefined
+                }
                 className={clsx(
                   'np-animated-label',
                   'btn-unstyled',

package/src/FlowNavigation/FlowNavigation.css

@@ -25,6 +25,12 @@
   border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
+.np-flow-navigation__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-inline-size: 0;
+}
 .np-flow-navigation__content {
   inline-size: 100%;
   min-inline-size: 320px;

package/src/FlowNavigation/FlowNavigation.less

@@ -29,6 +29,13 @@
     border-bottom: 1px solid var(--color-border-neutral);
   }
 
+  &__left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
   &__content {
     width: 100%;
     min-width: 320px;

package/src/FlowNavigation/FlowNavigation.tsx

@@ -76,7 +76,7 @@ const FlowNavigation = ({
             },
       )}
       leftContent={
-        <>
+        <div className="np-flow-navigation__left">
           {!screenSm && displayGoBack ? (
             <IconButton
               size={40}
@@ -93,7 +93,7 @@ const FlowNavigation = ({
           {!screenSm && !done && hasSteps && (
             <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
           )}
-        </>
+        </div>
       }
       rightContent={
         <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">

package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx

@@ -127,3 +127,28 @@ export const CriticalBannerMobile: Story = {
   ),
   ...withVariantConfig(['mobile']),
 };
+
+const LongLabelGerman: Story = {
+  render: () => (
+    <FlowNavigation
+      {...baseProps}
+      steps={[
+        { label: 'Überweisungsbetrag', hoverLabel: '100 EUR', onClick: noop },
+        { label: 'Zahlungsempfänger', hoverLabel: 'Max Mustermann', onClick: noop },
+        {
+          label: 'Zahlungsempfängerbestätigung',
+          hoverLabel: 'IBAN DE89370400440532013000',
+          onClick: noop,
+        },
+        { label: 'Zusammenfassung', hoverLabel: 'Alles korrekt', onClick: noop },
+        { label: 'Bezahlen', hoverLabel: 'Jetzt bezahlen', onClick: noop },
+      ]}
+      activeStep={2}
+    />
+  ),
+};
+
+export const LongLabelGermanMobile: Story = {
+  ...LongLabelGerman,
+  ...withVariantConfig(['mobile'], LongLabelGerman),
+};

package/src/Typeahead/Typeahead.css

@@ -65,9 +65,6 @@
   cursor: text;
   display: flex;
 }
-.typeahead--multiple .input-group.disabled .typeahead__input-container {
-  cursor: not-allowed;
-}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/src/Typeahead/Typeahead.less

@@ -77,10 +77,6 @@
       display: flex;
     }
 
-    .input-group.disabled .typeahead__input-container {
-      cursor: not-allowed;
-    }
-
     .sizer {
       white-space: pre;
       position: absolute;

package/src/Typeahead/Typeahead.test.tsx

@@ -256,77 +256,4 @@ describe('Typeahead', () => {
       expect.arrayContaining([{ label: 'foo' }, { label: 'bar' }]),
     );
   });
-
-  describe('when disabled', () => {
-    it('disables the input', () => {
-      render(<Typeahead id="test" name="test" options={[]} disabled onChange={() => {}} />);
-      expect(screen.getByRole('combobox')).toBeDisabled();
-    });
-
-    it('does not show the clear button when there is a value', () => {
-      render(
-        <Typeahead
-          id="test"
-          name="test"
-          options={[]}
-          initialValue={[{ label: 'Chip' }]}
-          disabled
-          onChange={() => {}}
-        />,
-      );
-      expect(screen.queryByRole('button', { name: /clear/i })).not.toBeInTheDocument();
-    });
-
-    it('keeps chips but does not let them be removed', () => {
-      render(
-        <Typeahead
-          id="test"
-          name="test"
-          options={[]}
-          multiple
-          initialValue={[{ label: 'Chip' }]}
-          disabled
-          onChange={() => {}}
-        />,
-      );
-      expect(screen.getByText('Chip').closest('.np-chip')).toHaveClass('disabled');
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('does not open the suggestions when the input is clicked', async () => {
-      render(
-        <Typeahead
-          id="test"
-          name="test"
-          options={[{ label: 'Option 1' }]}
-          minQueryLength={0}
-          disabled
-          onChange={() => {}}
-        />,
-      );
-
-      await userEvent.click(screen.getByRole('combobox'));
-
-      expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('closes the open menu when it becomes disabled', async () => {
-      const onChange = jest.fn();
-      const props = {
-        id: 'test',
-        name: 'test',
-        options: [],
-        allowNew: true,
-        minQueryLength: 0,
-        onChange,
-      };
-      const { rerender } = render(<Typeahead {...props} />);
-
-      await userEvent.type(screen.getByRole('combobox'), 'New thing');
-      rerender(<Typeahead {...props} disabled />);
-      await userEvent.click(document.body);
-
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
 });

package/src/Typeahead/Typeahead.tsx

@@ -61,8 +61,6 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   chipSeparators?: readonly string[];
   /** @default true */
   clearable?: boolean;
-  /** @default false */
-  disabled?: boolean;
   footer?: ReactNode;
   /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
@@ -114,7 +112,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     autoFocus: false,
     chipSeparators: [],
     clearable: true,
-    disabled: false,
     initialValue: [],
     inputAutoComplete: 'new-password',
     minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
@@ -163,12 +160,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     }
   }
 
-  componentDidUpdate(previousProps: TypeaheadPropsWithInputAttributes<T>) {
-    if (this.props.disabled && !previousProps.disabled) {
-      this.hideMenu();
-    }
-  }
-
   componentWillUnmount() {
     this.handleSearchDebounced.cancel();
   }
@@ -407,7 +398,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   renderChip = (option: TypeaheadOption<T>, idx: number): ReactNode => {
-    const { disabled } = this.props;
     const valid = this.props.validateChip?.(option);
 
     return (
@@ -418,8 +408,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           'has-error': !valid,
           'np-chip--valid': valid,
         })}
-        disabled={disabled}
-        onRemove={disabled ? undefined : () => this.removeChip(option)}
+        onRemove={() => this.removeChip(option)}
       />
     );
   };
@@ -497,7 +486,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       addon,
       name,
       clearable,
-      disabled,
       allowNew,
       footer,
       showSuggestions,
@@ -513,10 +501,9 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
 
     const { errorState, query, selected, optionsShown, keyboardFocusedOptionIndex } = this.state;
 
-    const clearButton = !disabled && clearable && (query || selected.length > 0);
+    const clearButton = clearable && (query || selected.length > 0);
 
-    const dropdownOpen =
-      !disabled && optionsShown && showSuggestions && query.length >= minQueryLength;
+    const dropdownOpen = optionsShown && showSuggestions && query.length >= minQueryLength;
 
     const menu = this.renderMenu({
       footer,
@@ -569,7 +556,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           <div
             className={clsx(`input-group input-group-${size}`, {
               'input-group--has-error': hasError,
-              disabled,
             })}
           >
             {addon && <span className="input-group-addon input-group-addon--search">{addon}</span>}
@@ -577,7 +563,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
             <TypeaheadInput
               {...{
                 autoFocus,
-                disabled,
                 multiple,
                 dropdownOpen,
                 placeholder,

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -23,10 +23,7 @@ export type TypeaheadInputProps<T> = {
   onPaste: React.ClipboardEventHandler<HTMLInputElement>;
   renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
   ariaActivedescendant?: string;
-} & Pick<
-  TypeaheadProps<T>,
-  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'
->;
+} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
 
 type TypeaheadInputState = {
   inputWidth: number;
@@ -76,7 +73,6 @@ export default class TypeaheadInput<T> extends Component<
     const {
       typeaheadId,
       autoFocus,
-      disabled,
       multiple,
       name,
       dropdownOpen,
@@ -102,7 +98,6 @@ export default class TypeaheadInput<T> extends Component<
         id={`input-${typeaheadId}`}
         aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
-        disabled={disabled}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}

package/src/Typeahead/_stories/Typeahead.story.tsx

@@ -36,7 +36,6 @@ const meta: Meta<typeof Typeahead> = {
     autoFocus: false,
     chipSeparators: [',', ' '],
     clearable: true,
-    disabled: false,
     inputAutoComplete: 'new-password',
     minQueryLength: 3,
     multiple: false,

package/src/Typeahead/_stories/Typeahead.test.story.tsx

@@ -3,7 +3,6 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import Button from '../../Button';
-import Field from '../../Field/Field';
 import Modal from '../../Modal';
 import Typeahead from '../Typeahead';
 
@@ -18,46 +17,6 @@ const meta: Meta<typeof Typeahead> = {
 };
 export default meta;
 
-export const Disabled: Story = {
-  render: () => (
-    <div className="d-flex flex-column">
-      <Field id="typeahead-disabled-empty" label="Empty">
-        <Typeahead
-          id="typeahead-disabled-empty"
-          name="typeahead-disabled-empty"
-          disabled
-          placeholder="Search currencies"
-          addon={<SearchIcon size={24} />}
-          options={[]}
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="typeahead-disabled-value" label="With a value">
-        <Typeahead
-          id="typeahead-disabled-value"
-          name="typeahead-disabled-value"
-          disabled
-          addon={<SearchIcon size={24} />}
-          initialValue={[{ label: 'British pound' }]}
-          options={[]}
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="typeahead-disabled-chips" label="With chips">
-        <Typeahead
-          id="typeahead-disabled-chips"
-          name="typeahead-disabled-chips"
-          disabled
-          multiple
-          initialValue={[{ label: 'British pound' }, { label: 'Euro' }]}
-          options={[]}
-          onChange={() => {}}
-        />
-      </Field>
-    </div>
-  ),
-};
-
 export const AutoFocusInModal: Story = {
   parameters: {
     docs: {

package/src/main.css

@@ -22987,6 +22987,7 @@ button.np-option {
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  min-inline-size: 0;
 }
 .np-animated-label > * {
   block-size: 0;
@@ -23041,6 +23042,12 @@ button.np-option {
   border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
+.np-flow-navigation__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-inline-size: 0;
+}
 .np-flow-navigation__content {
   inline-size: 100%;
   min-inline-size: 320px;
@@ -27578,9 +27585,6 @@ button.np-link {
   cursor: text;
   display: flex;
 }
-.typeahead--multiple .input-group.disabled .typeahead__input-container {
-  cursor: not-allowed;
-}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/src/Chips/Chip/Chip.test.tsx

@@ -1,34 +0,0 @@
-import { render, screen, userEvent } from '../../test-utils';
-
-import Chip from './Chip';
-
-describe('Chip', () => {
-  it('calls onClick when clicked', async () => {
-    const onClick = jest.fn();
-    render(<Chip label="Accounting" onClick={onClick} />);
-
-    await userEvent.click(screen.getByRole('button', { name: 'Accounting' }));
-
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  describe('when disabled', () => {
-    it('does not call onClick when clicked', async () => {
-      const onClick = jest.fn();
-      render(<Chip label="Accounting" disabled onClick={onClick} />);
-
-      await userEvent.click(screen.getByRole('button', { name: 'Accounting' }));
-
-      expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it('marks an actionable chip as disabled and takes it out of the tab order', () => {
-      render(<Chip label="Accounting" disabled onClick={() => {}} />);
-
-      const chip = screen.getByRole('button', { name: 'Accounting' });
-      expect(chip).toHaveAttribute('aria-disabled', 'true');
-      expect(chip).toHaveAttribute('tabindex', '-1');
-      expect(chip).toHaveClass('disabled');
-    });
-  });
-});