@transferwise/components 0.0.0-experimental-603d470 → 0.0.0-experimental-3497ded

package/build/es/no-polyfill/common/hooks/index.js

@@ -1 +1 @@
-export{default as useClientWidth}from"./useClientWidth/useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";
+export{useClientWidth}from"./useClientWidth/useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";

package/build/es/no-polyfill/common/hooks/useClientWidth/useClientWidth.js

@@ -1,7 +1,5 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import throttle from"lodash.throttle";import{useLayoutEffect,useState,useEffect}from"react";var THROTTLE_MS=100,useIsomorphicLayoutEffect="undefined"==typeof window?useEffect:useLayoutEffect,useClientWidth=function(a){var b=a.ref,c=a.throttleMs,d=void 0===c?THROTTLE_MS:c,e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1];return useIsomorphicLayoutEffect(function(){// eslint-disable-next-line unicorn/consistent-function-scoping
-var a=function(){if(b)// when `ref` is a window
-if(b.innerWidth)h(b.innerWidth);// when `ref` is an element
-else if(b.current){var a,c=(null===(a=b.current)||void 0===a?void 0:a.clientWidth)||0;h(c)}},c=throttle(a,d);// This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import throttle from"lodash.throttle";import{useLayoutEffect,useState,useEffect}from"react";var THROTTLE_MS=100,useIsomorphicLayoutEffect="undefined"==typeof window?useEffect:useLayoutEffect;export var useClientWidth=function(a){var b=a.ref,c=a.throttleMs,d=void 0===c?THROTTLE_MS:c,e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1];return useIsomorphicLayoutEffect(function(){// eslint-disable-next-line unicorn/consistent-function-scoping
+var a=function(){b&&("innerWidth"in b?h(b.innerWidth):b.current&&h(b.current.clientWidth))},c=throttle(a,d);// This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
 // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
 // won't get removed even if the component is unmounted.
-return window.addEventListener("resize",c,!0),window.requestAnimationFrame(a),function(){return window.removeEventListener("resize",c,!0)}},[]),[g]};useClientWidth.THROTTLE_MS=100;export default useClientWidth;
+return window.addEventListener("resize",c,!0),window.requestAnimationFrame(a),function(){return window.removeEventListener("resize",c,!0)}},[]),[g]};useClientWidth.THROTTLE_MS=100;

package/build/es/no-polyfill/common/hooks/useLayout/useLayout.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useState}from"react";import{Breakpoint}from"../../propsValues/breakpoint";import useClientWidth from"../useClientWidth/useClientWidth";export var useLayout=function(){var a="undefined"==typeof window?void 0:window,b=useState(),c=_slicedToArray(b,2),d=c[0],e=c[1],f=useClientWidth({ref:a}),g=_slicedToArray(f,1),h=g[0];return useEffect(function(){return h?h<=Breakpoint.EXTRA_SMALL?void e(Breakpoint.EXTRA_SMALL):Breakpoint.EXTRA_SMALL<h&&h<=Breakpoint.SMALL?void e(Breakpoint.SMALL):Breakpoint.SMALL<h&&h<=Breakpoint.MEDIUM?void e(Breakpoint.MEDIUM):Breakpoint.MEDIUM<h&&h<=Breakpoint.LARGE?void e(Breakpoint.LARGE):void(Breakpoint.LARGE<h&&e(Breakpoint.EXTRA_LARGE)):void 0},[h]),{isMobile:!!d&&[Breakpoint.EXTRA_SMALL,Breakpoint.SMALL].includes(d),isExtraSmall:d===Breakpoint.EXTRA_SMALL,isSmall:d===Breakpoint.SMALL,isMedium:d===Breakpoint.MEDIUM,isLarge:d===Breakpoint.LARGE,isExtraLarge:d===Breakpoint.EXTRA_LARGE}};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useState}from"react";import{Breakpoint}from"../../propsValues/breakpoint";import{useClientWidth}from"../useClientWidth/useClientWidth";export var useLayout=function(){var a="undefined"==typeof window?void 0:window,b=useState(),c=_slicedToArray(b,2),d=c[0],e=c[1],f=useClientWidth({ref:a}),g=_slicedToArray(f,1),h=g[0];return useEffect(function(){return h?h<=Breakpoint.EXTRA_SMALL?void e(Breakpoint.EXTRA_SMALL):Breakpoint.EXTRA_SMALL<h&&h<=Breakpoint.SMALL?void e(Breakpoint.SMALL):Breakpoint.SMALL<h&&h<=Breakpoint.MEDIUM?void e(Breakpoint.MEDIUM):Breakpoint.MEDIUM<h&&h<=Breakpoint.LARGE?void e(Breakpoint.LARGE):void(Breakpoint.LARGE<h&&e(Breakpoint.EXTRA_LARGE)):void 0},[h]),{isMobile:!!d&&[Breakpoint.EXTRA_SMALL,Breakpoint.SMALL].includes(d),isExtraSmall:d===Breakpoint.EXTRA_SMALL,isSmall:d===Breakpoint.SMALL,isMedium:d===Breakpoint.MEDIUM,isLarge:d===Breakpoint.LARGE,isExtraLarge:d===Breakpoint.EXTRA_LARGE}};

package/build/es/no-polyfill/flowNavigation/FlowNavigation.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import classNames from"classnames";import{useRef}from"react";import React from"react";import{Breakpoint,Layout}from"../common";import{CloseButton}from"../common/closeButton";import FlowHeader from"../common/flowHeader/FlowHeader";import{useClientWidth}from"../common/hooks";import Logo from"../logo";import Stepper from"../stepper/Stepper";import AnimatedLabel from"./animatedLabel";import BackButton from"./backButton";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowNavigation=function(a){var b=a.activeStep,c=void 0===b?0:b,d=a.avatar,e=a.logo,f=void 0===e?/*#__PURE__*/_jsx(Logo,{}):e,g=a.done,h=void 0!==g&&g,i=a.onClose,j=a.onGoBack,k=a.steps,l=useRef(null),m=useClientWidth({ref:l}),n=_slicedToArray(m,1),o=n[0],p=i&&/*#__PURE__*/_jsx(CloseButton,{size:"lg",onClick:i}),q=o&&o<Breakpoint.SMALL,r=h?null:d;return/*#__PURE__*/_jsx("div",{ref:l,className:classNames("np-flow-navigation d-flex align-items-center justify-content-center p-y-3",{"np-flow-navigation--border-bottom":!h}),children:/*#__PURE__*/_jsx(FlowHeader,{className:classNames("np-flow-navigation__content p-x-3",{"np-flow-navigation--hidden":!o,"np-flow-navigation--xs-max":q,// Size switches on parent container which may or may not have the same size as the window.
-"np-flow-navigation--sm":null!=o&&o>=Breakpoint.SMALL,"np-flow-navigation--lg":null!=o&&o>=Breakpoint.LARGE}),leftContent:q?function getLeftContentSmall(){return/*#__PURE__*/_jsx(_Fragment,{children:j&&0<c?/*#__PURE__*/_jsx(BackButton,{label:/*#__PURE__*/_jsx(AnimatedLabel,{className:"m-x-1",labels:k&&k.map(function(a){return a.label}),activeLabel:c-1}),onClick:j}):f})}():f,rightContent:/*#__PURE__*/_jsxs(_Fragment,{children:[r,r&&p&&/*#__PURE__*/_jsx("span",{className:"separator"}),p]}),bottomContent:!h&&/*#__PURE__*/_jsx(Stepper,{activeStep:c,steps:k,className:classNames("np-flow-navigation__stepper")}),layout:null!=o&&o<Breakpoint.LARGE?Layout.VERTICAL:Layout.HORIZONTAL})})};export default FlowNavigation;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import classNames from"classnames";import{useRef}from"react";import React from"react";import{Breakpoint,Layout}from"../common";import{CloseButton}from"../common/closeButton";import FlowHeader from"../common/flowHeader/FlowHeader";import{useClientWidth}from"../common/hooks";import Logo from"../logo";import Stepper from"../stepper/Stepper";import AnimatedLabel from"./animatedLabel";import BackButton from"./backButton";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowNavigation=function(a){var b=a.activeStep,c=void 0===b?0:b,d=a.avatar,e=a.logo,f=void 0===e?/*#__PURE__*/_jsx(Logo,{}):e,g=a.done,h=void 0!==g&&g,i=a.onClose,j=a.onGoBack,k=a.steps,l=useRef(null),m=useClientWidth({ref:l}),n=_slicedToArray(m,1),o=n[0],p=i&&/*#__PURE__*/_jsx(CloseButton,{size:"lg",onClick:i}),q=null!=o&&o<Breakpoint.SMALL,r=h?null:d;return/*#__PURE__*/_jsx("div",{ref:l,className:classNames("np-flow-navigation d-flex align-items-center justify-content-center p-y-3",{"np-flow-navigation--border-bottom":!h}),children:/*#__PURE__*/_jsx(FlowHeader,{className:classNames("np-flow-navigation__content p-x-3",{"np-flow-navigation--hidden":!o,"np-flow-navigation--xs-max":q,// Size switches on parent container which may or may not have the same size as the window.
+"np-flow-navigation--sm":null!=o&&o>=Breakpoint.SMALL,"np-flow-navigation--lg":null!=o&&o>=Breakpoint.LARGE}),leftContent:q?function getLeftContentSmall(){return/*#__PURE__*/_jsx(_Fragment,{children:j&&0<c?/*#__PURE__*/_jsx(BackButton,{label:/*#__PURE__*/_jsx(AnimatedLabel,{className:"m-x-1",labels:k.map(function(a){return a.label}),activeLabel:c-1}),onClick:j}):f})}():f,rightContent:/*#__PURE__*/_jsxs(_Fragment,{children:[r,r&&p&&/*#__PURE__*/_jsx("span",{className:"separator"}),p]}),bottomContent:!h&&/*#__PURE__*/_jsx(Stepper,{activeStep:c,steps:k,className:classNames("np-flow-navigation__stepper")}),layout:null!=o&&o<Breakpoint.LARGE?Layout.VERTICAL:Layout.HORIZONTAL})})};export default FlowNavigation;

package/build/es/no-polyfill/stepper/Stepper.js

@@ -1 +1 @@
-import classNames from"classnames";import Body from"../body/Body";import{Position}from"../common";import{useDirection}from"../common/hooks";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=void 0===c?0:c,e=a.className,f=void 0===e?void 0:e,g=useDirection(),h=g.isRTL;if(0===b.length)return null;var i=clamp(0,b.length-1,d),j=1/(b.length-1),k=i/(b.length-1);return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",f),children:[/*#__PURE__*/_jsx("div",{className:"progress",children:/*#__PURE__*/_jsx("div",{className:"progress-bar",style:{width:"".concat(100*k,"%")}})}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===i,d=a.onClick&&!c,e=d?/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",onClick:function onClick(){var b;return d&&(null===(b=a.onClick)||void 0===b?void 0:b.call(a))},children:/*#__PURE__*/_jsx("small",{children:a.label})}):/*#__PURE__*/_jsx(Body,{as:"span",className:"tw-stepper__step-label small",children:a.label});return/*#__PURE__*/_jsx("li",{className:classNames("hidden-xs","tw-stepper__step",c&&"tw-stepper__step--active",d&&"tw-stepper__step--clickable",a.hoverLabel&&"tw-stepper__step--has-tooltip"),style:h?{right:"".concat(100*(b*j),"%")}:{left:"".concat(100*(b*j),"%")},children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:e}):e},b)})})]})};/* eslint-enable react/no-array-index-key */export default Stepper;
+import classNames from"classnames";import*as React from"react";import Body from"../body/Body";import{Position}from"../common";import{useDirection}from"../common/hooks";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=void 0===c?0:c,e=a.className,f=useDirection(),g=f.isRTL;if(0===b.length)return null;var h=clamp(0,b.length-1,d),i=1/(b.length-1),j=h/(b.length-1);return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",e),children:[/*#__PURE__*/_jsx("div",{className:"progress",children:/*#__PURE__*/_jsx("div",{className:"progress-bar",style:{width:"".concat(100*j,"%")}})}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===h,d=a.onClick&&!c,e=d?/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",onClick:function onClick(){var b;return d&&(null===(b=a.onClick)||void 0===b?void 0:b.call(a))},children:/*#__PURE__*/_jsx("small",{children:a.label})}):/*#__PURE__*/_jsx(Body,{as:"span",className:"tw-stepper__step-label small",children:a.label});return/*#__PURE__*/_jsx("li",{className:classNames("hidden-xs","tw-stepper__step",c&&"tw-stepper__step--active",d&&"tw-stepper__step--clickable",a.hoverLabel&&"tw-stepper__step--has-tooltip"),style:g?{right:"".concat(100*(b*i),"%")}:{left:"".concat(100*(b*i),"%")},children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:e}):e},b)})})]})};/* eslint-enable react/no-array-index-key */export default Stepper;

package/build/es/polyfill/common/hooks/index.js

@@ -1 +1 @@
-export{default as useClientWidth}from"./useClientWidth/useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";
+export{useClientWidth}from"./useClientWidth/useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";

package/build/es/polyfill/common/hooks/useClientWidth/useClientWidth.js

@@ -1,7 +1,5 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import throttle from"lodash.throttle";import{useLayoutEffect,useState,useEffect}from"react";var THROTTLE_MS=100,useIsomorphicLayoutEffect="undefined"==typeof window?useEffect:useLayoutEffect,useClientWidth=function(a){var b=a.ref,c=a.throttleMs,d=void 0===c?THROTTLE_MS:c,e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1];return useIsomorphicLayoutEffect(function(){// eslint-disable-next-line unicorn/consistent-function-scoping
-var a=function(){if(b)// when `ref` is a window
-if(b.innerWidth)h(b.innerWidth);// when `ref` is an element
-else if(b.current){var a,c=(null===(a=b.current)||void 0===a?void 0:a.clientWidth)||0;h(c)}},c=throttle(a,d);// This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import throttle from"lodash.throttle";import{useLayoutEffect,useState,useEffect}from"react";var THROTTLE_MS=100,useIsomorphicLayoutEffect="undefined"==typeof window?useEffect:useLayoutEffect;export var useClientWidth=function(a){var b=a.ref,c=a.throttleMs,d=void 0===c?THROTTLE_MS:c,e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1];return useIsomorphicLayoutEffect(function(){// eslint-disable-next-line unicorn/consistent-function-scoping
+var a=function(){b&&("innerWidth"in b?h(b.innerWidth):b.current&&h(b.current.clientWidth))},c=throttle(a,d);// This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
 // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
 // won't get removed even if the component is unmounted.
-return window.addEventListener("resize",c,!0),window.requestAnimationFrame(a),function(){return window.removeEventListener("resize",c,!0)}},[]),[g]};useClientWidth.THROTTLE_MS=100;export default useClientWidth;
+return window.addEventListener("resize",c,!0),window.requestAnimationFrame(a),function(){return window.removeEventListener("resize",c,!0)}},[]),[g]};useClientWidth.THROTTLE_MS=100;

package/build/es/polyfill/common/hooks/useLayout/useLayout.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import{useEffect,useState}from"react";import{Breakpoint}from"../../propsValues/breakpoint";import useClientWidth from"../useClientWidth/useClientWidth";export var useLayout=function(){var a="undefined"==typeof window?void 0:window,b=useState(),c=_slicedToArray(b,2),d=c[0],e=c[1],f=useClientWidth({ref:a}),g=_slicedToArray(f,1),h=g[0];return useEffect(function(){return h?h<=Breakpoint.EXTRA_SMALL?void e(Breakpoint.EXTRA_SMALL):Breakpoint.EXTRA_SMALL<h&&h<=Breakpoint.SMALL?void e(Breakpoint.SMALL):Breakpoint.SMALL<h&&h<=Breakpoint.MEDIUM?void e(Breakpoint.MEDIUM):Breakpoint.MEDIUM<h&&h<=Breakpoint.LARGE?void e(Breakpoint.LARGE):void(Breakpoint.LARGE<h&&e(Breakpoint.EXTRA_LARGE)):void 0},[h]),{isMobile:!!d&&[Breakpoint.EXTRA_SMALL,Breakpoint.SMALL].includes(d),isExtraSmall:d===Breakpoint.EXTRA_SMALL,isSmall:d===Breakpoint.SMALL,isMedium:d===Breakpoint.MEDIUM,isLarge:d===Breakpoint.LARGE,isExtraLarge:d===Breakpoint.EXTRA_LARGE}};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import{useEffect,useState}from"react";import{Breakpoint}from"../../propsValues/breakpoint";import{useClientWidth}from"../useClientWidth/useClientWidth";export var useLayout=function(){var a="undefined"==typeof window?void 0:window,b=useState(),c=_slicedToArray(b,2),d=c[0],e=c[1],f=useClientWidth({ref:a}),g=_slicedToArray(f,1),h=g[0];return useEffect(function(){return h?h<=Breakpoint.EXTRA_SMALL?void e(Breakpoint.EXTRA_SMALL):Breakpoint.EXTRA_SMALL<h&&h<=Breakpoint.SMALL?void e(Breakpoint.SMALL):Breakpoint.SMALL<h&&h<=Breakpoint.MEDIUM?void e(Breakpoint.MEDIUM):Breakpoint.MEDIUM<h&&h<=Breakpoint.LARGE?void e(Breakpoint.LARGE):void(Breakpoint.LARGE<h&&e(Breakpoint.EXTRA_LARGE)):void 0},[h]),{isMobile:!!d&&[Breakpoint.EXTRA_SMALL,Breakpoint.SMALL].includes(d),isExtraSmall:d===Breakpoint.EXTRA_SMALL,isSmall:d===Breakpoint.SMALL,isMedium:d===Breakpoint.MEDIUM,isLarge:d===Breakpoint.LARGE,isExtraLarge:d===Breakpoint.EXTRA_LARGE}};

package/build/es/polyfill/flowNavigation/FlowNavigation.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.map.js";import classNames from"classnames";import{useRef}from"react";import React from"react";import{Breakpoint,Layout}from"../common";import{CloseButton}from"../common/closeButton";import FlowHeader from"../common/flowHeader/FlowHeader";import{useClientWidth}from"../common/hooks";import Logo from"../logo";import Stepper from"../stepper/Stepper";import AnimatedLabel from"./animatedLabel";import BackButton from"./backButton";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowNavigation=function(a){var b=a.activeStep,c=void 0===b?0:b,d=a.avatar,e=a.logo,f=void 0===e?/*#__PURE__*/_jsx(Logo,{}):e,g=a.done,h=void 0!==g&&g,i=a.onClose,j=a.onGoBack,k=a.steps,l=useRef(null),m=useClientWidth({ref:l}),n=_slicedToArray(m,1),o=n[0],p=i&&/*#__PURE__*/_jsx(CloseButton,{size:"lg",onClick:i}),q=o&&o<Breakpoint.SMALL,r=h?null:d;return/*#__PURE__*/_jsx("div",{ref:l,className:classNames("np-flow-navigation d-flex align-items-center justify-content-center p-y-3",{"np-flow-navigation--border-bottom":!h}),children:/*#__PURE__*/_jsx(FlowHeader,{className:classNames("np-flow-navigation__content p-x-3",{"np-flow-navigation--hidden":!o,"np-flow-navigation--xs-max":q,// Size switches on parent container which may or may not have the same size as the window.
-"np-flow-navigation--sm":null!=o&&o>=Breakpoint.SMALL,"np-flow-navigation--lg":null!=o&&o>=Breakpoint.LARGE}),leftContent:q?function getLeftContentSmall(){return/*#__PURE__*/_jsx(_Fragment,{children:j&&0<c?/*#__PURE__*/_jsx(BackButton,{label:/*#__PURE__*/_jsx(AnimatedLabel,{className:"m-x-1",labels:k&&k.map(function(a){return a.label}),activeLabel:c-1}),onClick:j}):f})}():f,rightContent:/*#__PURE__*/_jsxs(_Fragment,{children:[r,r&&p&&/*#__PURE__*/_jsx("span",{className:"separator"}),p]}),bottomContent:!h&&/*#__PURE__*/_jsx(Stepper,{activeStep:c,steps:k,className:classNames("np-flow-navigation__stepper")}),layout:null!=o&&o<Breakpoint.LARGE?Layout.VERTICAL:Layout.HORIZONTAL})})};export default FlowNavigation;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.map.js";import classNames from"classnames";import{useRef}from"react";import React from"react";import{Breakpoint,Layout}from"../common";import{CloseButton}from"../common/closeButton";import FlowHeader from"../common/flowHeader/FlowHeader";import{useClientWidth}from"../common/hooks";import Logo from"../logo";import Stepper from"../stepper/Stepper";import AnimatedLabel from"./animatedLabel";import BackButton from"./backButton";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowNavigation=function(a){var b=a.activeStep,c=void 0===b?0:b,d=a.avatar,e=a.logo,f=void 0===e?/*#__PURE__*/_jsx(Logo,{}):e,g=a.done,h=void 0!==g&&g,i=a.onClose,j=a.onGoBack,k=a.steps,l=useRef(null),m=useClientWidth({ref:l}),n=_slicedToArray(m,1),o=n[0],p=i&&/*#__PURE__*/_jsx(CloseButton,{size:"lg",onClick:i}),q=null!=o&&o<Breakpoint.SMALL,r=h?null:d;return/*#__PURE__*/_jsx("div",{ref:l,className:classNames("np-flow-navigation d-flex align-items-center justify-content-center p-y-3",{"np-flow-navigation--border-bottom":!h}),children:/*#__PURE__*/_jsx(FlowHeader,{className:classNames("np-flow-navigation__content p-x-3",{"np-flow-navigation--hidden":!o,"np-flow-navigation--xs-max":q,// Size switches on parent container which may or may not have the same size as the window.
+"np-flow-navigation--sm":null!=o&&o>=Breakpoint.SMALL,"np-flow-navigation--lg":null!=o&&o>=Breakpoint.LARGE}),leftContent:q?function getLeftContentSmall(){return/*#__PURE__*/_jsx(_Fragment,{children:j&&0<c?/*#__PURE__*/_jsx(BackButton,{label:/*#__PURE__*/_jsx(AnimatedLabel,{className:"m-x-1",labels:k.map(function(a){return a.label}),activeLabel:c-1}),onClick:j}):f})}():f,rightContent:/*#__PURE__*/_jsxs(_Fragment,{children:[r,r&&p&&/*#__PURE__*/_jsx("span",{className:"separator"}),p]}),bottomContent:!h&&/*#__PURE__*/_jsx(Stepper,{activeStep:c,steps:k,className:classNames("np-flow-navigation__stepper")}),layout:null!=o&&o<Breakpoint.LARGE?Layout.VERTICAL:Layout.HORIZONTAL})})};export default FlowNavigation;

package/build/es/polyfill/stepper/Stepper.js

@@ -1 +1 @@
-import"core-js/modules/es.array.map.js";import classNames from"classnames";import Body from"../body/Body";import{Position}from"../common";import{useDirection}from"../common/hooks";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=void 0===c?0:c,e=a.className,f=void 0===e?void 0:e,g=useDirection(),h=g.isRTL;if(0===b.length)return null;var i=clamp(0,b.length-1,d),j=1/(b.length-1),k=i/(b.length-1);return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",f),children:[/*#__PURE__*/_jsx("div",{className:"progress",children:/*#__PURE__*/_jsx("div",{className:"progress-bar",style:{width:"".concat(100*k,"%")}})}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===i,d=a.onClick&&!c,e=d?/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",onClick:function onClick(){var b;return d&&(null===(b=a.onClick)||void 0===b?void 0:b.call(a))},children:/*#__PURE__*/_jsx("small",{children:a.label})}):/*#__PURE__*/_jsx(Body,{as:"span",className:"tw-stepper__step-label small",children:a.label});return/*#__PURE__*/_jsx("li",{className:classNames("hidden-xs","tw-stepper__step",c&&"tw-stepper__step--active",d&&"tw-stepper__step--clickable",a.hoverLabel&&"tw-stepper__step--has-tooltip"),style:h?{right:"".concat(100*(b*j),"%")}:{left:"".concat(100*(b*j),"%")},children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:e}):e},b)})})]})};/* eslint-enable react/no-array-index-key */export default Stepper;
+import"core-js/modules/es.array.map.js";import classNames from"classnames";import*as React from"react";import Body from"../body/Body";import{Position}from"../common";import{useDirection}from"../common/hooks";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=void 0===c?0:c,e=a.className,f=useDirection(),g=f.isRTL;if(0===b.length)return null;var h=clamp(0,b.length-1,d),i=1/(b.length-1),j=h/(b.length-1);return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",e),children:[/*#__PURE__*/_jsx("div",{className:"progress",children:/*#__PURE__*/_jsx("div",{className:"progress-bar",style:{width:"".concat(100*j,"%")}})}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===h,d=a.onClick&&!c,e=d?/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",onClick:function onClick(){var b;return d&&(null===(b=a.onClick)||void 0===b?void 0:b.call(a))},children:/*#__PURE__*/_jsx("small",{children:a.label})}):/*#__PURE__*/_jsx(Body,{as:"span",className:"tw-stepper__step-label small",children:a.label});return/*#__PURE__*/_jsx("li",{className:classNames("hidden-xs","tw-stepper__step",c&&"tw-stepper__step--active",d&&"tw-stepper__step--clickable",a.hoverLabel&&"tw-stepper__step--has-tooltip"),style:g?{right:"".concat(100*(b*i),"%")}:{left:"".concat(100*(b*i),"%")},children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:e}):e},b)})})]})};/* eslint-enable react/no-array-index-key */export default Stepper;

package/build/types/common/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { default as useClientWidth } from "./useClientWidth/useClientWidth";
+export { useClientWidth } from "./useClientWidth/useClientWidth";
 export { default as useConditionalListener } from "./useConditionalListener";
 export { default as useDirection } from "./useDirection";
 export { default as useHasIntersected } from "./useHasIntersected";

package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts

@@ -3,8 +3,8 @@ type FlowNavigationProps = {
     ref: React.RefObject<HTMLElement> | Window | undefined;
     throttleMs?: number;
 };
-declare const useClientWidth: {
+export declare const useClientWidth: {
     ({ ref, throttleMs }: FlowNavigationProps): (number | null)[];
     THROTTLE_MS: number;
 };
-export default useClientWidth;
+export {};

package/build/types/stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface Step {
     label: React.ReactNode;
     onClick?: () => void;
@@ -9,5 +9,5 @@ export interface StepperProps {
     activeStep?: number;
     className?: string;
 }
-declare const Stepper: React.FC<StepperProps>;
+declare const Stepper: ({ steps, activeStep, className }: StepperProps) => JSX.Element | null;
 export default Stepper;