@transferwise/components 0.0.0-experimental-9e15bd6 → 0.0.0-experimental-86d6d5d

package/build/styles/tabs/Tabs.css

@@ -1 +1 @@
-.tabs{position:relative}.tabs__tab{color:#37517e;color:var(--color-content-primary);display:inline-block;font-weight:600;font-weight:var(--font-weight-semi-bold);margin-bottom:-2px;outline:none;padding:8px;padding:var(--size-8);text-align:center;transition:color .15s ease-in-out}.np-theme-personal .tabs__tab{color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tabs__tab--selected{color:#0097c7;color:var(--color-content-accent)}.np-theme-personal .tabs__tab--selected{color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.tabs__tab__content{border-radius:2px}.tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:var(--color-interactive-primary-hover);outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}@media (min-width:992px){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}@media (hover:hover){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}.tabs__tab-list{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);list-style:none;margin:0;padding:0}.tabs__line{background-color:#00a2dd;background-color:var(--color-interactive-accent);bottom:-1px;height:2px;position:relative;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-theme-personal .tabs__line{background-color:var(--color-interactive-primary)}.tabs__panel-container{width:100%}.tabs__slider{display:flex}.tabs__panel--selected{padding:8px;padding:var(--size-8)}.tabs__panel.enter{opacity:0}.tabs__panel.enter-active{opacity:1}.tabs__panel.exit{opacity:0}.tabs--inverse .tabs__tab-list{border-bottom-color:#0000001a;border-bottom-color:var(--color-border-neutral)}.tabs--inverse .tabs__tab:not(.tabs__tab--selected){color:#fff}.tabs.tabs--auto-width .tabs__tab{align-items:center;display:inline-flex;justify-content:center;min-height:40px;min-height:var(--size-40);padding:0 12px;padding:0 var(--size-12);vertical-align:middle}@media (min-width:576px){.tabs.tabs--auto-width .tabs__tab{padding:0 24px;padding:0 var(--size-24)}}
+.tabs{overflow:hidden}.tabs--touch-device:not(.tabs--no-drag) .tabs__panel-container{overflow:scroll}.tabs--touch-device:not(.tabs--no-drag) .tabs__panel{scroll-snap-align:start}.tabs__tab{color:#37517e;color:var(--color-content-primary);display:inline-block;font-weight:600;font-weight:var(--font-weight-semi-bold);margin-bottom:-2px;outline:none;padding:8px;padding:var(--size-8);text-align:center;transition:color .15s ease-in-out}.np-theme-personal .tabs__tab{color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tabs__tab--selected{color:#0097c7;color:var(--color-content-accent)}.np-theme-personal .tabs__tab--selected{color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.tabs__tab__content{border-radius:2px}.tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:var(--color-interactive-primary-hover);outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}@media (min-width:992px){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}@media (hover:hover){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}.tabs__tab-list{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);list-style:none;margin:0;padding:0}.tabs__line{background-color:#00a2dd;background-color:var(--color-interactive-accent);bottom:-1px;height:2px;position:relative;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-theme-personal .tabs__line{background-color:var(--color-interactive-primary)}.tabs__panel-container{-ms-overflow-style:none;display:flex;gap:32px;gap:var(--size-32);overflow:hidden;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}.tabs__panel-container::-webkit-scrollbar{display:none}.tabs__slider{display:flex}.tabs__panel{flex-shrink:0}.tabs__panel--selected{padding:8px;padding:var(--size-8)}.tabs__panel.enter{opacity:0}.tabs__panel.enter-active{opacity:1}.tabs__panel.exit{opacity:0}.tabs--inverse .tabs__tab-list{border-bottom-color:#0000001a;border-bottom-color:var(--color-border-neutral)}.tabs--inverse .tabs__tab:not(.tabs__tab--selected){color:#fff}.tabs.tabs--auto-width .tabs__tab{align-items:center;display:inline-flex;justify-content:center;min-height:40px;min-height:var(--size-40);padding:0 12px;padding:0 var(--size-12);vertical-align:middle}@media (min-width:576px){.tabs.tabs--auto-width .tabs__tab{padding:0 24px;padding:0 var(--size-24)}}

package/build/types/common/deviceDetection/deviceDetection.d.ts

@@ -1 +1,2 @@
 export function isIosDevice(): boolean;
+export function isTouchDevice(): boolean;

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

@@ -1 +1 @@
-export { isIosDevice } from "./deviceDetection";
+export { isIosDevice, isTouchDevice } from "./deviceDetection";

package/build/types/index.d.ts

@@ -79,6 +79,7 @@ export { default as Summary } from './summary';
 export { default as Switch } from './switch';
 export { default as SwitchOption } from './switchOption';
 export { default as Tabs } from './tabs';
+export { NewTabs } from './tabs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
 export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';

package/build/types/tabs/NewTabs.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Width } from '../common';
+type Props = {
+    className: string;
+    headerWidth?: Width;
+    tabs: {
+        title: string;
+        disabled?: boolean;
+        content: ReactNode;
+    }[];
+    name: string;
+    selected: number;
+    onTabSelect(newIndex: number): void;
+    animatePanelsOnClick?: boolean;
+    changeTabOnSwipe?: boolean;
+};
+declare const NewTabs: React.FC<Props>;
+export default NewTabs;

package/build/types/tabs/TabPanel.d.ts

@@ -1,15 +1,2 @@
 export default TabPanel;
-declare function TabPanel({ children, id, tabId, style }: {
-    children: any;
-    id: any;
-    tabId: any;
-    style: any;
-}): JSX.Element;
-declare namespace TabPanel {
-    namespace propTypes {
-        const children: any;
-        const id: any;
-        const tabId: any;
-        const style: any;
-    }
-}
+declare const TabPanel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/build/types/tabs/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./Tabs";
+export { default as NewTabs } from "./NewTabs";