@jobber/components 2.86.0 → 2.86.2

package/dist/Table/Body.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-interface BodyProps {
-    children: ReactElement | ReactElement[];
-}
-export declare function Body({ children }: BodyProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface BodyProps {
+    children: ReactElement | ReactElement[];
+}
+export declare function Body({ children }: BodyProps): JSX.Element;
+export {};

package/dist/Table/Cells/Cell.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-interface CellProps {
-    children?: ReactNode | ReactNode[];
-    align?: "left" | "center" | "right";
-}
-export declare function Cell({ children, align }: CellProps): JSX.Element;
-export {};
+import { ReactNode } from "react";
+interface CellProps {
+    children?: ReactNode | ReactNode[];
+    align?: "left" | "center" | "right";
+}
+export declare function Cell({ children, align }: CellProps): JSX.Element;
+export {};

package/dist/Table/Cells/CellCurrency.d.ts

@@ -1,8 +1,8 @@
-import { CurrencyType } from "@jobber/formatters";
-import { CellNumericProps } from "./CellNumeric";
-interface CellCurrencyProps extends CellNumericProps {
-    value: number;
-    currency?: CurrencyType;
-}
-export declare function CellCurrency({ value, currency, }: CellCurrencyProps): JSX.Element;
-export {};
+import { CurrencyType } from "@jobber/formatters";
+import { CellNumericProps } from "./CellNumeric";
+interface CellCurrencyProps extends CellNumericProps {
+    value: number;
+    currency?: CurrencyType;
+}
+export declare function CellCurrency({ value, currency, }: CellCurrencyProps): JSX.Element;
+export {};

package/dist/Table/Cells/CellNumeric.d.ts

@@ -1,4 +1,4 @@
-export interface CellNumericProps {
-    value: number | string;
-}
-export declare function CellNumeric({ value }: CellNumericProps): JSX.Element;
+export interface CellNumericProps {
+    value: number | string;
+}
+export declare function CellNumeric({ value }: CellNumericProps): JSX.Element;

package/dist/Table/Footer.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-interface FooterProps {
-    children: ReactElement | ReactElement[];
-}
-export declare function Footer({ children }: FooterProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface FooterProps {
+    children: ReactElement | ReactElement[];
+}
+export declare function Footer({ children }: FooterProps): JSX.Element;
+export {};

package/dist/Table/Header.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-interface HeaderProps {
-    children: ReactElement | ReactElement[];
-}
-export declare function Header({ children }: HeaderProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface HeaderProps {
+    children: ReactElement | ReactElement[];
+}
+export declare function Header({ children }: HeaderProps): JSX.Element;
+export {};

package/dist/Table/Row.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-interface RowProps {
-    children: ReactElement | ReactElement[];
-}
-export declare function Row({ children }: RowProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface RowProps {
+    children: ReactElement | ReactElement[];
+}
+export declare function Row({ children }: RowProps): JSX.Element;
+export {};

package/dist/Table/Table.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-interface TableProps {
-    children: ReactElement | ReactElement[];
-}
-export declare function Table({ children }: TableProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface TableProps {
+    children: ReactElement | ReactElement[];
+}
+export declare function Table({ children }: TableProps): JSX.Element;
+export {};

package/dist/Table/index.d.ts

@@ -1,8 +1,8 @@
-export { Table } from "./Table";
-export { Row } from "./Row";
-export { Cell } from "./Cells/Cell";
-export { CellNumeric } from "./Cells/CellNumeric";
-export { CellCurrency } from "./Cells/CellCurrency";
-export { Header } from "./Header";
-export { Footer } from "./Footer";
-export { Body } from "./Body";
+export { Table } from "./Table";
+export { Row } from "./Row";
+export { Cell } from "./Cells/Cell";
+export { CellNumeric } from "./Cells/CellNumeric";
+export { CellCurrency } from "./Cells/CellCurrency";
+export { Header } from "./Header";
+export { Footer } from "./Footer";
+export { Body } from "./Body";

package/dist/Table/index.js

@@ -2,64 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var classnames = require('classnames');
 var formatters = require('@jobber/formatters');
 
-var css = ".gByR7gRALLoMeErFwXopX {\n  --border-color: var(--color-border);\n  --header-border-color: var(--color-border--section);\n  --horizontal-inset: var(--space-base);\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.gByR7gRALLoMeErFwXopX::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: solid var(--border-base) var(--border-color);\n  border-radius: var(--radius-base);\n  pointer-events: none;\n}\n\n._2NFX_QOYJa4MyVRCz6JquI:not(:last-child) {\n  border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._3KP2hgsyvrNv4nEo3uCeR1 ._2NFX_QOYJa4MyVRCz6JquI {\n  border-bottom: solid var(--border-base) var(--header-border-color);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\n._1gl1OQ5klhRSWkmB-Q01kt ._2NFX_QOYJa4MyVRCz6JquI {\n  border-top: solid var(--border-thicker) var(--border-color);\n}\n";
-var styles = {"table":"gByR7gRALLoMeErFwXopX","row":"_2NFX_QOYJa4MyVRCz6JquI","header":"_3KP2hgsyvrNv4nEo3uCeR1","footer":"_1gl1OQ5klhRSWkmB-Q01kt"};
-__chunk_2.styleInject(css);
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css$1 = ".gByR7gRALLoMeErFwXopX {\n  --border-color: var(--color-border);\n  --header-border-color: var(--color-border--section);\n  --horizontal-inset: var(--space-base);\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.gByR7gRALLoMeErFwXopX::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: solid var(--border-base) var(--border-color);\n  border-radius: var(--radius-base);\n  pointer-events: none;\n}\n\n._2NFX_QOYJa4MyVRCz6JquI:not(:last-child) {\n  border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._3KP2hgsyvrNv4nEo3uCeR1 ._2NFX_QOYJa4MyVRCz6JquI {\n  border-bottom: solid var(--border-base) var(--header-border-color);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\n._1gl1OQ5klhRSWkmB-Q01kt ._2NFX_QOYJa4MyVRCz6JquI {\n  border-top: solid var(--border-thicker) var(--border-color);\n}\n";
+var styles$1 = {"table":"gByR7gRALLoMeErFwXopX","row":"_2NFX_QOYJa4MyVRCz6JquI","header":"_3KP2hgsyvrNv4nEo3uCeR1","footer":"_1gl1OQ5klhRSWkmB-Q01kt"};
+styleInject_es.styleInject(css$1);
 
-function Table(_a) {
-    var children = _a.children;
-    return React__default.createElement("table", { className: styles.table }, children);
+function Table(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("table", { className: styles$1.table }, children);
 }
 
-function Row(_a) {
-    var children = _a.children;
-    return React__default.createElement("tr", { className: styles.row }, children);
+function Row(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("tr", { className: styles$1.row }, children);
 }
 
-var css$1 = ".Dq-OQpN9kItKfJsIaTjL6 {\n  padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n  text-align: left;\n}\n\n._3bBRzvtoTBozmykVE7XqOe {\n  text-align: left;\n}\n\n._1f1IguDUp2Dy3ZhU_LCrgu {\n  text-align: center;\n}\n\n._3cxjTRdABFJmE_6huhyU4R {\n  text-align: right;\n}\n\n._3kcv5Lj_4g1u4sK_yR4QOu {\n  -webkit-font-feature-settings: \"tnum\";\n          font-feature-settings: \"tnum\";\n}\n\n.Dq-OQpN9kItKfJsIaTjL6:first-child {\n  padding-left: var(--horizontal-inset);\n}\n\n.Dq-OQpN9kItKfJsIaTjL6:last-child {\n  padding-right: var(--horizontal-inset);\n}\n";
-var styles$1 = {"cell":"Dq-OQpN9kItKfJsIaTjL6","left":"_3bBRzvtoTBozmykVE7XqOe","center":"_1f1IguDUp2Dy3ZhU_LCrgu","right":"_3cxjTRdABFJmE_6huhyU4R","numeric":"_3kcv5Lj_4g1u4sK_yR4QOu"};
-__chunk_2.styleInject(css$1);
+var css = ".Dq-OQpN9kItKfJsIaTjL6 {\n  padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n  text-align: left;\n}\n\n._3bBRzvtoTBozmykVE7XqOe {\n  text-align: left;\n}\n\n._1f1IguDUp2Dy3ZhU_LCrgu {\n  text-align: center;\n}\n\n._3cxjTRdABFJmE_6huhyU4R {\n  text-align: right;\n}\n\n._3kcv5Lj_4g1u4sK_yR4QOu {\n  -webkit-font-feature-settings: \"tnum\";\n          font-feature-settings: \"tnum\";\n}\n\n.Dq-OQpN9kItKfJsIaTjL6:first-child {\n  padding-left: var(--horizontal-inset);\n}\n\n.Dq-OQpN9kItKfJsIaTjL6:last-child {\n  padding-right: var(--horizontal-inset);\n}\n";
+var styles = {"cell":"Dq-OQpN9kItKfJsIaTjL6","left":"_3bBRzvtoTBozmykVE7XqOe","center":"_1f1IguDUp2Dy3ZhU_LCrgu","right":"_3cxjTRdABFJmE_6huhyU4R","numeric":"_3kcv5Lj_4g1u4sK_yR4QOu"};
+styleInject_es.styleInject(css);
 
-function Cell(_a) {
-    var children = _a.children, _b = _a.align, align = _b === void 0 ? "left" : _b;
-    var className = classnames(styles$1.cell, styles$1[align]);
-    return React__default.createElement("td", { className: className }, children);
+function Cell(_a) {
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? "left" : _b;
+    var className = classnames__default["default"](styles.cell, styles[align]);
+    return React__default["default"].createElement("td", { className: className }, children);
 }
 
-function CellNumeric(_a) {
-    var value = _a.value;
-    return (React__default.createElement(Cell, { align: "right" },
-        React__default.createElement("span", { className: styles$1.numeric }, value.toString())));
+function CellNumeric(_a) {
+    var value = _a.value;
+    return (React__default["default"].createElement(Cell, { align: "right" },
+        React__default["default"].createElement("span", { className: styles.numeric }, value.toString())));
 }
 
-function CellCurrency(_a) {
-    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? undefined : _b;
-    return React__default.createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
+function CellCurrency(_a) {
+    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? undefined : _b;
+    return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
 }
 
-function Header(_a) {
-    var children = _a.children;
-    return (React__default.createElement("thead", { className: styles.header },
-        React__default.createElement(Row, null, children)));
+function Header(_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("thead", { className: styles$1.header },
+        React__default["default"].createElement(Row, null, children)));
 }
 
-function Footer(_a) {
-    var children = _a.children;
-    return (React__default.createElement("tfoot", { className: styles.footer },
-        React__default.createElement(Row, null, children)));
+function Footer(_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("tfoot", { className: styles$1.footer },
+        React__default["default"].createElement(Row, null, children)));
 }
 
-function Body(_a) {
-    var children = _a.children;
-    return React__default.createElement("tbody", null, children);
+function Body(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("tbody", null, children);
 }
 
 exports.Body = Body;

package/dist/Tabs/Tabs.d.ts

@@ -1,19 +1,19 @@
-import React, { ReactElement, ReactNode } from "react";
-interface TabsProps {
-    readonly children: ReactElement | ReactElement[];
-}
-export declare function Tabs({ children }: TabsProps): JSX.Element;
-interface TabProps {
-    readonly label: string;
-    readonly children: ReactNode | ReactNode[];
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-}
-export declare function Tab({ label }: TabProps): JSX.Element;
-interface InternalTabProps {
-    readonly label: string;
-    readonly selected: boolean;
-    activateTab(): void;
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-}
-export declare function InternalTab({ label, selected, activateTab, onClick, }: InternalTabProps): JSX.Element;
-export {};
+import React, { ReactElement, ReactNode } from "react";
+interface TabsProps {
+    readonly children: ReactElement | ReactElement[];
+}
+export declare function Tabs({ children }: TabsProps): JSX.Element;
+interface TabProps {
+    readonly label: string;
+    readonly children: ReactNode | ReactNode[];
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+}
+export declare function Tab({ label }: TabProps): JSX.Element;
+interface InternalTabProps {
+    readonly label: string;
+    readonly selected: boolean;
+    activateTab(): void;
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+}
+export declare function InternalTab({ label, selected, activateTab, onClick, }: InternalTabProps): JSX.Element;
+export {};

package/dist/Tabs/index.d.ts

@@ -1 +1 @@
-export { Tabs, Tab } from "./Tabs";
+export { Tabs, Tab } from "./Tabs";

package/dist/Tabs/index.js

@@ -2,78 +2,80 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Typography = require('../Typography-7e542a72.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css = ":root {\n  --tab--height: calc(var(--space-larger) + var(--space-small));\n  --tab--inset: var(--space-base);\n  --public-tab--inset: var(--tab--inset);\n}\n\n._1XPiwZ-6hOSsu7HDy5yHmS {\n  display: block;\n  width: 100%;\n}\n\n.RnC8r3uAcGujRbYT-p6nj {\n  position: relative;\n  border-bottom: solid var(--border-base) var(--color-border);\n}\n\n._2gWu8IF5c8dDlBnYmABbrH:after,\n._3PQJmJy2Ol38mhvrp-VAjw:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 24px;\n}\n\n._2gWu8IF5c8dDlBnYmABbrH:after {\n  right: 0;\n  box-shadow: inset -16px 0 16px -16px var(--color-blue);\n}\n\n._3PQJmJy2Ol38mhvrp-VAjw:before {\n  left: 0;\n  box-shadow: inset 16px 0 16px -16px var(--color-blue);\n}\n\n._2SHAj2nQK9vISS7i_Zfxuw {\n  display: -ms-flexbox;\n  display: flex;\n  margin-bottom: calc(-1 * var(--border-base));\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n[dir=\"ltr\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-left: 0;\n}\n\n[dir=\"ltr\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-left: 0;\n}\n\nul._2SHAj2nQK9vISS7i_Zfxuw:dir(ltr) {\n          padding-left: 0;\n}\n\n[dir=\"rtl\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-right: 0;\n}\n\n[dir=\"rtl\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-right: 0;\n}\n\nul._2SHAj2nQK9vISS7i_Zfxuw:dir(rtl) {\n          padding-right: 0;\n}\n\n[dir=\"ltr\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-left: 0;\n}\n\nul._2SHAj2nQK9vISS7i_Zfxuw:dir(ltr) {\n          padding-left: 0;\n}\n\n[dir=\"rtl\"] ul._2SHAj2nQK9vISS7i_Zfxuw {\n          padding-right: 0;\n}\n\nul._2SHAj2nQK9vISS7i_Zfxuw:dir(rtl) {\n          padding-right: 0;\n}\n\nul._2SHAj2nQK9vISS7i_Zfxuw {\n  -webkit-padding-start: 0;\n          padding-inline-start: 0;\n}\n\n._2SHAj2nQK9vISS7i_Zfxuw li {\n  list-style: none;\n}\n\n.NClJjJvATDpU-FSQJ6ywe {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  height: calc(var(--space-larger) + var(--space-small));\n  height: calc(var(--space-larger) + var(--space-small));\n  height: var(--tab--height);\n  margin: 0;\n  padding-left: var(--space-base);\n  padding-left: var(--space-base);\n  padding-left: var(--public-tab--inset);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--public-tab--inset);\n  border: solid var(--border-base) var(--color-border);\n  border-left-width: 0;\n  outline: none;\n  background: var(--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.NClJjJvATDpU-FSQJ6ywe:hover,\n.NClJjJvATDpU-FSQJ6ywe:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.NClJjJvATDpU-FSQJ6ywe:focus span {\n  box-shadow: var(--shadow-focus);\n}\n\n._2ijhlnd8EAKFyri-YTtRjw {\n  border-top-color: var(--color-interactive);\n  border-bottom-color: var(--color-surface);\n}\n\n._2ijhlnd8EAKFyri-YTtRjw:focus {\n  background-color: transparent;\n}\n\n._3Y4JRV5DrYYp-_haxplE4P {\n  padding-top: var(--space-base);\n  padding-top: var(--space-base);\n  padding-top: var(--tab--inset);\n  padding-bottom: var(--space-base);\n  padding-bottom: var(--space-base);\n  padding-bottom: var(--tab--inset);\n  padding-left: var(--space-base);\n  padding-left: var(--space-base);\n  padding-left: var(--public-tab--inset);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--public-tab--inset);\n}\n";
 var styles = {"tabs":"_1XPiwZ-6hOSsu7HDy5yHmS","overflow":"RnC8r3uAcGujRbYT-p6nj","overflowRight":"_2gWu8IF5c8dDlBnYmABbrH","overflowLeft":"_3PQJmJy2Ol38mhvrp-VAjw","tabRow":"_2SHAj2nQK9vISS7i_Zfxuw","tab":"NClJjJvATDpU-FSQJ6ywe","selected":"_2ijhlnd8EAKFyri-YTtRjw","tabContent":"_3Y4JRV5DrYYp-_haxplE4P"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-function Tabs(_a) {
-    var _b;
-    var children = _a.children;
-    var _c = __chunk_1.__read(React.useState(0), 2), activeTab = _c[0], setActiveTab = _c[1];
-    var _d = __chunk_1.__read(React.useState(false), 2), overflowRight = _d[0], setOverflowRight = _d[1];
-    var _e = __chunk_1.__read(React.useState(false), 2), overflowLeft = _e[0], setOverflowLeft = _e[1];
-    var tabRow = React.useRef();
-    var overflowClassNames = classnames(styles.overflow, (_b = {},
-        _b[styles.overflowRight] = overflowRight,
-        _b[styles.overflowLeft] = overflowLeft,
-        _b));
-    var activateTab = function (index) {
-        return function () {
-            setActiveTab(index);
-        };
-    };
-    var activeTabProps = React__default.Children.toArray(children)[activeTab].props;
-    var handleOverflowing = function () {
-        if (tabRow.current) {
-            var scrollWidth = tabRow.current.scrollWidth;
-            var clientWidth = tabRow.current.clientWidth;
-            var maxScroll = scrollWidth - clientWidth;
-            var scrollPos = tabRow.current.scrollLeft;
-            if (scrollWidth > clientWidth) {
-                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
-                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
-            }
-        }
-    };
-    React.useEffect(function () {
-        handleOverflowing();
-        tabRow.current &&
-            tabRow.current.addEventListener("scroll", handleOverflowing);
-        return function () {
-            window.removeEventListener("scroll", handleOverflowing);
-        };
-    });
-    return (React__default.createElement("div", { className: styles.tabs },
-        React__default.createElement("div", { className: overflowClassNames },
-            React__default.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
-                React__default.createElement("li", { role: "presentation" }, React__default.Children.map(children, function (tab, index) { return (React__default.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })); })))),
-        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
-}
-function Tab(_a) {
-    var label = _a.label;
-    return React__default.createElement(React__default.Fragment, null, label);
-}
-function InternalTab(_a) {
-    var _b;
-    var label = _a.label, selected = _a.selected, activateTab = _a.activateTab, _c = _a.onClick, onClick = _c === void 0 ? function () {
-        return;
-    } : _c;
-    var className = classnames(styles.tab, (_b = {}, _b[styles.selected] = selected, _b));
-    var color = selected ? "green" : "heading";
-    return (React__default.createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: function (event) {
-            activateTab();
-            onClick(event);
-        } },
-        React__default.createElement(index.Typography, { element: "span", size: "base", textColor: color }, label)));
+function Tabs(_a) {
+    var _b;
+    var children = _a.children;
+    var _c = tslib_es6.__read(React.useState(0), 2), activeTab = _c[0], setActiveTab = _c[1];
+    var _d = tslib_es6.__read(React.useState(false), 2), overflowRight = _d[0], setOverflowRight = _d[1];
+    var _e = tslib_es6.__read(React.useState(false), 2), overflowLeft = _e[0], setOverflowLeft = _e[1];
+    var tabRow = React.useRef();
+    var overflowClassNames = classnames__default["default"](styles.overflow, (_b = {},
+        _b[styles.overflowRight] = overflowRight,
+        _b[styles.overflowLeft] = overflowLeft,
+        _b));
+    var activateTab = function (index) {
+        return function () {
+            setActiveTab(index);
+        };
+    };
+    var activeTabProps = React__default["default"].Children.toArray(children)[activeTab].props;
+    var handleOverflowing = function () {
+        if (tabRow.current) {
+            var scrollWidth = tabRow.current.scrollWidth;
+            var clientWidth = tabRow.current.clientWidth;
+            var maxScroll = scrollWidth - clientWidth;
+            var scrollPos = tabRow.current.scrollLeft;
+            if (scrollWidth > clientWidth) {
+                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
+            }
+        }
+    };
+    React.useEffect(function () {
+        handleOverflowing();
+        tabRow.current &&
+            tabRow.current.addEventListener("scroll", handleOverflowing);
+        return function () {
+            window.removeEventListener("scroll", handleOverflowing);
+        };
+    });
+    return (React__default["default"].createElement("div", { className: styles.tabs },
+        React__default["default"].createElement("div", { className: overflowClassNames },
+            React__default["default"].createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
+                React__default["default"].createElement("li", { role: "presentation" }, React__default["default"].Children.map(children, function (tab, index) { return (React__default["default"].createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })); })))),
+        React__default["default"].createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+}
+function Tab(_a) {
+    var label = _a.label;
+    return React__default["default"].createElement(React__default["default"].Fragment, null, label);
+}
+function InternalTab(_a) {
+    var _b;
+    var label = _a.label, selected = _a.selected, activateTab = _a.activateTab, _c = _a.onClick, onClick = _c === void 0 ? function () {
+        return;
+    } : _c;
+    var className = classnames__default["default"](styles.tab, (_b = {}, _b[styles.selected] = selected, _b));
+    var color = selected ? "green" : "heading";
+    return (React__default["default"].createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: function (event) {
+            activateTab();
+            onClick(event);
+        } },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: color }, label)));
 }
 
 exports.Tab = Tab;

package/dist/Text/Text.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from "react";
-interface TextProps {
-    maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
-    readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
-    readonly align?: "start" | "center" | "end";
-    readonly size?: "small" | "base" | "large";
-}
-export declare function Text({ variation, size, align, children, maxLines, }: PropsWithChildren<TextProps>): JSX.Element;
-export {};
+import { PropsWithChildren } from "react";
+interface TextProps {
+    maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
+    readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
+    readonly align?: "start" | "center" | "end";
+    readonly size?: "small" | "base" | "large";
+}
+export declare function Text({ variation, size, align, children, maxLines, }: PropsWithChildren<TextProps>): JSX.Element;
+export {};

package/dist/Text/index.d.ts

@@ -1 +1 @@
-export { Text } from "./Text";
+export { Text } from "./Text";

package/dist/Text/index.js

@@ -2,35 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-require('../chunk-17e02351.js');
+var Text = require('../Text-9bc093e9.js');
+require('react');
+require('../Typography-7e542a72.js');
+require('../tslib.es6-5b50eb8e.js');
 require('classnames');
-var index = require('../Typography/index.js');
+require('../style-inject.es-dcee06b6.js');
+
 
-function Text(_a) {
-    var _b = _a.variation, variation = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "base" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, children = _a.children, _e = _a.maxLines, maxLines = _e === void 0 ? "unlimited" : _e;
-    var textColors = {
-        default: "text",
-        subdued: "textSecondary",
-        success: "success",
-        error: "critical",
-        warn: "warning",
-        info: "informative",
-        disabled: "disabled",
-    };
-    var maxLineToNumber = {
-        single: 1,
-        small: 2,
-        base: 4,
-        large: 8,
-        larger: 16,
-        unlimited: undefined,
-    };
-    return (React__default.createElement(index.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
-}
 
-exports.Text = Text;
+exports.Text = Text.Text;

package/dist/Text-9bc093e9.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-7e542a72.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Text(_a) {
+    var _b = _a.variation, variation = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "base" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, children = _a.children, _e = _a.maxLines, maxLines = _e === void 0 ? "unlimited" : _e;
+    var textColors = {
+        default: "text",
+        subdued: "textSecondary",
+        success: "success",
+        error: "critical",
+        warn: "warning",
+        info: "informative",
+        disabled: "disabled",
+    };
+    var maxLineToNumber = {
+        single: 1,
+        small: 2,
+        base: 4,
+        large: 8,
+        larger: 16,
+        unlimited: undefined,
+    };
+    return (React__default["default"].createElement(Typography.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+}
+
+exports.Text = Text;

package/dist/Toast/Toast.d.ts

@@ -1,17 +1,17 @@
-import { XOR } from "ts-xor";
-interface BaseToastProps {
-    readonly variation?: "info" | "success" | "error";
-    readonly message: string;
-    readonly id?: number;
-}
-interface ActionToastProps extends BaseToastProps {
-    action(): void;
-    actionLabel: string;
-}
-export declare type ToastProps = XOR<BaseToastProps, ActionToastProps>;
-declare type ToastPropsInternal = Omit<ToastProps, "id">;
-export interface ToastRef {
-    add(props: ToastProps): void;
-}
-export declare function Toast({ message, variation, action, actionLabel, }: ToastPropsInternal): JSX.Element;
-export {};
+import { XOR } from "ts-xor";
+interface BaseToastProps {
+    readonly variation?: "info" | "success" | "error";
+    readonly message: string;
+    readonly id?: number;
+}
+interface ActionToastProps extends BaseToastProps {
+    action(): void;
+    actionLabel: string;
+}
+export declare type ToastProps = XOR<BaseToastProps, ActionToastProps>;
+declare type ToastPropsInternal = Omit<ToastProps, "id">;
+export interface ToastRef {
+    add(props: ToastProps): void;
+}
+export declare function Toast({ message, variation, action, actionLabel, }: ToastPropsInternal): JSX.Element;
+export {};

package/dist/Toast/index.d.ts

@@ -1 +1 @@
-export { showToast } from "./showToast";
+export { showToast } from "./showToast";