@jobber/components 4.90.1 → 4.90.3

package/dist/Tabs-C3qMIs1F.js

@@ -0,0 +1,67 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { T as Typography } from './Typography-D6YoQOGF.js';
+
+var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
+
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = useState(activeTabInitialValue);
+    const [overflowRight, setOverflowRight] = useState(false);
+    const [overflowLeft, setOverflowLeft] = useState(false);
+    const tabRow = useRef();
+    const overflowClassNames = classnames(styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
+            setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
+        };
+    };
+    const activeTabProps = React.Children.toArray(children)[activeTab].props;
+    const handleOverflowing = () => {
+        if (tabRow.current) {
+            const scrollWidth = tabRow.current.scrollWidth;
+            const clientWidth = tabRow.current.clientWidth;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollPos = tabRow.current.scrollLeft;
+            if (scrollWidth > clientWidth) {
+                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
+            }
+        }
+    };
+    useEffect(() => {
+        handleOverflowing();
+        tabRow.current &&
+            tabRow.current.addEventListener("scroll", handleOverflowing);
+        return () => {
+            window.removeEventListener("scroll", handleOverflowing);
+        };
+    });
+    return (React.createElement("div", { className: styles.tabs },
+        React.createElement("div", { className: overflowClassNames },
+            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
+                React.createElement("li", { role: "presentation" }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })))))),
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+}
+function Tab({ label }) {
+    return React.createElement(React.Fragment, null, label);
+}
+function InternalTab({ label, selected, activateTab, onClick = () => {
+    return;
+}, }) {
+    const className = classnames(styles.tab, { [styles.selected]: selected });
+    const color = selected ? "green" : "heading";
+    return (React.createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
+            activateTab();
+            onClick(event);
+        } },
+        React.createElement(Typography, { element: "span", size: "base", textColor: color }, label)));
+}
+
+export { Tabs as T, Tab as a };

package/dist/Tabs-CRY_vyNW.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-WLLQxuNl.js');
+
+var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
+
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
+    const [overflowRight, setOverflowRight] = React.useState(false);
+    const [overflowLeft, setOverflowLeft] = React.useState(false);
+    const tabRow = React.useRef();
+    const overflowClassNames = classnames(styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
+            setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
+        };
+    };
+    const activeTabProps = React.Children.toArray(children)[activeTab].props;
+    const handleOverflowing = () => {
+        if (tabRow.current) {
+            const scrollWidth = tabRow.current.scrollWidth;
+            const clientWidth = tabRow.current.clientWidth;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollPos = tabRow.current.scrollLeft;
+            if (scrollWidth > clientWidth) {
+                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
+            }
+        }
+    };
+    React.useEffect(() => {
+        handleOverflowing();
+        tabRow.current &&
+            tabRow.current.addEventListener("scroll", handleOverflowing);
+        return () => {
+            window.removeEventListener("scroll", handleOverflowing);
+        };
+    });
+    return (React.createElement("div", { className: styles.tabs },
+        React.createElement("div", { className: overflowClassNames },
+            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
+                React.createElement("li", { role: "presentation" }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })))))),
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+}
+function Tab({ label }) {
+    return React.createElement(React.Fragment, null, label);
+}
+function InternalTab({ label, selected, activateTab, onClick = () => {
+    return;
+}, }) {
+    const className = classnames(styles.tab, { [styles.selected]: selected });
+    const color = selected ? "green" : "heading";
+    return (React.createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
+            activateTab();
+            onClick(event);
+        } },
+        React.createElement(Typography.Typography, { element: "span", size: "base", textColor: color }, label)));
+}
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;

package/dist/Text/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Text = require('../Text-Bopx9dUr.js');
+require('react');
+require('../Typography-WLLQxuNl.js');
+require('classnames');
+
+
+
+exports.Text = Text.Text;

package/dist/Text/index.mjs

@@ -0,0 +1,4 @@
+export { T as Text } from '../Text-DALHhxHl.js';
+import 'react';
+import '../Typography-D6YoQOGF.js';
+import 'classnames';

package/dist/{Text-fbeaaca6.js → Text-Bopx9dUr.js}

@@ -1,11 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-e2a23b7e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Typography = require('./Typography-WLLQxuNl.js');
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {
@@ -25,7 +21,7 @@ function Text({ variation = "default", size = "base", align = "start", children,
         larger: 16,
         unlimited: undefined,
     };
-    return (React__default["default"].createElement(Typography.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+    return (React.createElement(Typography.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
 }
 
 exports.Text = Text;

package/dist/Text-DALHhxHl.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { T as Typography } from './Typography-D6YoQOGF.js';
+
+function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
+    const textColors = {
+        default: "text",
+        subdued: "textSecondary",
+        success: "success",
+        error: "critical",
+        warn: "warning",
+        info: "informative",
+        disabled: "disabled",
+    };
+    const maxLineToNumber = {
+        single: 1,
+        small: 2,
+        base: 4,
+        large: 8,
+        larger: 16,
+        unlimited: undefined,
+    };
+    return (React.createElement(Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+}
+
+export { Text as T };

package/dist/Toast/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var showToast = require('../showToast-DNc6Ghvi.js');
+require('react');
+require('react-dom/client');
+require('framer-motion');
+require('../Icon-DN6zZdoZ.js');
+require('@jobber/design');
+require('../Button-C6SHw1kI.js');
+require('classnames');
+require('react-router-dom');
+require('../Typography-WLLQxuNl.js');
+
+
+
+exports.showToast = showToast.showToast;

package/dist/Toast/index.mjs

@@ -0,0 +1,10 @@
+export { s as showToast } from '../showToast-BB8OsmX0.js';
+import 'react';
+import 'react-dom/client';
+import 'framer-motion';
+import '../Icon-Cprfa6DH.js';
+import '@jobber/design';
+import '../Button-Cfp4SFrN.js';
+import 'classnames';
+import 'react-router-dom';
+import '../Typography-D6YoQOGF.js';

package/dist/Tooltip/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var Tooltip = require('../Tooltip-VHTRuZ4Y.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('framer-motion');
+require('../useSafeLayoutEffect-87KYIon5.js');
+require('../useIsMounted-sw4iFcH2.js');
+require('react-popper');
+
+
+
+exports.Tooltip = Tooltip.Tooltip;

package/dist/Tooltip/index.mjs

@@ -0,0 +1,8 @@
+export { T as Tooltip } from '../Tooltip-B2DBKrJM.js';
+import 'react';
+import 'classnames';
+import 'react-dom';
+import 'framer-motion';
+import '../useSafeLayoutEffect-IMNHxeSN.js';
+import '../useIsMounted-Ds9qZzhJ.js';
+import 'react-popper';

package/dist/Tooltip-B2DBKrJM.js

@@ -0,0 +1,103 @@
+import React, { useRef, useState } from 'react';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { motion } from 'framer-motion';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-IMNHxeSN.js';
+import { u as useIsMounted_2 } from './useIsMounted-Ds9qZzhJ.js';
+import { usePopper } from 'react-popper';
+
+var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-","tooltipMessage":"TpdeLUuiQMg-"};
+
+function useTooltipPositioning() {
+    var _a, _b;
+    const shadowRef = useRef(null);
+    const [positionElement, setTooltipRef] = useState();
+    const [arrowElement, setArrowRef] = useState();
+    const popper = usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
+        placement: "top",
+        modifiers: [
+            { name: "flip", options: { fallbackPlacements: ["bottom"] } },
+            {
+                name: "arrow",
+                options: { element: arrowElement },
+            },
+        ],
+    });
+    return Object.assign(Object.assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef,
+        setArrowRef,
+        setTooltipRef });
+}
+
+const variation = {
+    startOrStop: { scale: 0.6, opacity: 0 },
+    done: { scale: 1, opacity: 1 },
+};
+function Tooltip({ message, children }) {
+    const [show, setShow] = useState(false);
+    const mounted = useIsMounted_2();
+    const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning();
+    initializeListeners();
+    const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+        children,
+        mounted.current ? (React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+                    damping: 50,
+                    stiffness: 500,
+                } },
+                React.createElement("p", { className: styles.tooltipMessage }, message),
+                React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))) : null));
+    function initializeListeners() {
+        const showTooltip = () => {
+            setShow(true);
+        };
+        const hideTooltip = () => {
+            setShow(false);
+        };
+        const injectAttributes = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                // Manually inject "aria-description" and "tabindex" to let the screen
+                // readers read the tooltip message.
+                // This is to avoid having to add those attribute as a prop on every
+                // component we have.
+                activator.setAttribute("aria-description", message);
+                activator.setAttribute("tabindex", "0"); // enable focus
+            }
+        };
+        const addListeners = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                activator.addEventListener("mouseenter", showTooltip);
+                activator.addEventListener("mouseleave", hideTooltip);
+                activator.addEventListener("focus", showTooltip);
+                activator.addEventListener("blur", hideTooltip);
+            }
+        };
+        const removeListeners = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                activator.removeEventListener("mouseenter", showTooltip);
+                activator.removeEventListener("mouseleave", hideTooltip);
+                activator.removeEventListener("focus", showTooltip);
+                activator.removeEventListener("blur", hideTooltip);
+            }
+        };
+        useSafeLayoutEffect_1(() => {
+            injectAttributes();
+            addListeners();
+            return () => {
+                removeListeners();
+            };
+        }, []);
+    }
+}
+function TooltipPortal({ children }) {
+    return ReactDOM.createPortal(children, document.body);
+}
+
+export { Tooltip as T };

package/dist/Tooltip-VHTRuZ4Y.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-87KYIon5.js');
+var useIsMounted = require('./useIsMounted-sw4iFcH2.js');
+var reactPopper = require('react-popper');
+
+var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-","tooltipMessage":"TpdeLUuiQMg-"};
+
+function useTooltipPositioning() {
+    var _a, _b;
+    const shadowRef = React.useRef(null);
+    const [positionElement, setTooltipRef] = React.useState();
+    const [arrowElement, setArrowRef] = React.useState();
+    const popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
+        placement: "top",
+        modifiers: [
+            { name: "flip", options: { fallbackPlacements: ["bottom"] } },
+            {
+                name: "arrow",
+                options: { element: arrowElement },
+            },
+        ],
+    });
+    return Object.assign(Object.assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef,
+        setArrowRef,
+        setTooltipRef });
+}
+
+const variation = {
+    startOrStop: { scale: 0.6, opacity: 0 },
+    done: { scale: 1, opacity: 1 },
+};
+function Tooltip({ message, children }) {
+    const [show, setShow] = React.useState(false);
+    const mounted = useIsMounted.useIsMounted_2();
+    const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning();
+    initializeListeners();
+    const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+        children,
+        mounted.current ? (React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+                    damping: 50,
+                    stiffness: 500,
+                } },
+                React.createElement("p", { className: styles.tooltipMessage }, message),
+                React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))) : null));
+    function initializeListeners() {
+        const showTooltip = () => {
+            setShow(true);
+        };
+        const hideTooltip = () => {
+            setShow(false);
+        };
+        const injectAttributes = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                // Manually inject "aria-description" and "tabindex" to let the screen
+                // readers read the tooltip message.
+                // This is to avoid having to add those attribute as a prop on every
+                // component we have.
+                activator.setAttribute("aria-description", message);
+                activator.setAttribute("tabindex", "0"); // enable focus
+            }
+        };
+        const addListeners = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                activator.addEventListener("mouseenter", showTooltip);
+                activator.addEventListener("mouseleave", hideTooltip);
+                activator.addEventListener("focus", showTooltip);
+                activator.addEventListener("blur", hideTooltip);
+            }
+        };
+        const removeListeners = () => {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                const activator = shadowRef.current.nextElementSibling;
+                activator.removeEventListener("mouseenter", showTooltip);
+                activator.removeEventListener("mouseleave", hideTooltip);
+                activator.removeEventListener("focus", showTooltip);
+                activator.removeEventListener("blur", hideTooltip);
+            }
+        };
+        useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+            injectAttributes();
+            addListeners();
+            return () => {
+                removeListeners();
+            };
+        }, []);
+    }
+}
+function TooltipPortal({ children }) {
+    return ReactDOM.createPortal(children, document.body);
+}
+
+exports.Tooltip = Tooltip;

package/dist/Typography/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Typography = require('../Typography-WLLQxuNl.js');
+require('react');
+require('classnames');
+
+
+
+exports.Typography = Typography.Typography;

package/dist/Typography/index.mjs

@@ -0,0 +1,3 @@
+export { T as Typography } from '../Typography-D6YoQOGF.js';
+import 'react';
+import 'classnames';

package/dist/Typography-D6YoQOGF.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import classnames from 'classnames';
+
+var styles = {"base":"asDB9Ra2UpA-"};
+
+var fontSizes = {"extravagant":"_7C4Ck1izBPs-","jumbo":"_8X-fSrUTxV8-","largest":"n-SPJXPXLSA-","larger":"vCrvF55YQ9o-","large":"FBoaHWotSik-","base":"V6yPPLHLeuY-","small":"T5XC4DgJlxk-","smaller":"sycqXMMO-wc-"};
+
+var fontWeights = {"regular":"lziyWzzvuno-","medium":"PVKSijyipP8-","semiBold":"-ch9Z4gIGDg-","bold":"EEwS0f07RqQ-","extraBold":"kA3NtPPWbP0-","black":"_3M58OLqp0JM-"};
+
+var textCases = {"uppercase":"xE6cC62h5G0-","lowercase":"HlqJJ3Cl7dE-","capitalize":"Loe26JnDfco-"};
+
+var textColors = {"blue":"pkqoq2KXY9w-","grey":"ftVHRSii3ro-","greyBlueDark":"FQbGABZWVzA-","greyBlue":"zQaB9J0-vrs-","green":"_4-xdzcqT-Us-","red":"Zp9E7ELPjPA-","yellow":"v-Fo4PwPxDI-","yellowDark":"YrGUIChAZC0-","lightBlue":"r7JcIVoDcTY-","white":"_6RXTyd198iM-","heading":"fLix4jA-RkU-","text":"_1g0uMAwFAsk-","textSecondary":"oXqFAHwT6y4-","inactive":"gPhKMwPfrsw-","critical":"rWkzi9HFNDU-","warning":"PQLYQKGCmPI-","informative":"L6bBDJrx-m0-","success":"bJDJJKvmT90-","disabled":"_3g4iYm8XwkM-"};
+
+var emphasis = {"italic":"Jys1uy2pQXw-","highlight":"kd2u0dL-if0-"};
+
+var truncate = {"textTruncate":"LUJEfdi3pws-"};
+
+var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sHwM-"};
+
+var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-"};
+
+/* eslint-disable import/no-internal-modules */
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
+    const shouldTruncateText = numberOfLines && numberOfLines > 0;
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
+    let truncateLines;
+    if (shouldTruncateText) {
+        truncateLines = {
+            WebkitLineClamp: numberOfLines,
+            WebkitBoxOrient: "vertical",
+        };
+    }
+    return (React.createElement(Tag, { id: id, className: className, style: truncateLines }, children));
+}
+
+export { Typography as T };

package/dist/Typography-WLLQxuNl.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"base":"asDB9Ra2UpA-"};
+
+var fontSizes = {"extravagant":"_7C4Ck1izBPs-","jumbo":"_8X-fSrUTxV8-","largest":"n-SPJXPXLSA-","larger":"vCrvF55YQ9o-","large":"FBoaHWotSik-","base":"V6yPPLHLeuY-","small":"T5XC4DgJlxk-","smaller":"sycqXMMO-wc-"};
+
+var fontWeights = {"regular":"lziyWzzvuno-","medium":"PVKSijyipP8-","semiBold":"-ch9Z4gIGDg-","bold":"EEwS0f07RqQ-","extraBold":"kA3NtPPWbP0-","black":"_3M58OLqp0JM-"};
+
+var textCases = {"uppercase":"xE6cC62h5G0-","lowercase":"HlqJJ3Cl7dE-","capitalize":"Loe26JnDfco-"};
+
+var textColors = {"blue":"pkqoq2KXY9w-","grey":"ftVHRSii3ro-","greyBlueDark":"FQbGABZWVzA-","greyBlue":"zQaB9J0-vrs-","green":"_4-xdzcqT-Us-","red":"Zp9E7ELPjPA-","yellow":"v-Fo4PwPxDI-","yellowDark":"YrGUIChAZC0-","lightBlue":"r7JcIVoDcTY-","white":"_6RXTyd198iM-","heading":"fLix4jA-RkU-","text":"_1g0uMAwFAsk-","textSecondary":"oXqFAHwT6y4-","inactive":"gPhKMwPfrsw-","critical":"rWkzi9HFNDU-","warning":"PQLYQKGCmPI-","informative":"L6bBDJrx-m0-","success":"bJDJJKvmT90-","disabled":"_3g4iYm8XwkM-"};
+
+var emphasis = {"italic":"Jys1uy2pQXw-","highlight":"kd2u0dL-if0-"};
+
+var truncate = {"textTruncate":"LUJEfdi3pws-"};
+
+var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sHwM-"};
+
+var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-"};
+
+/* eslint-disable import/no-internal-modules */
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
+    const shouldTruncateText = numberOfLines && numberOfLines > 0;
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
+    let truncateLines;
+    if (shouldTruncateText) {
+        truncateLines = {
+            WebkitLineClamp: numberOfLines,
+            WebkitBoxOrient: "vertical",
+        };
+    }
+    return (React.createElement(Tag, { id: id, className: className, style: truncateLines }, children));
+}
+
+exports.Typography = Typography;

package/dist/_baseAssignValue-BthOhxdo.js

@@ -0,0 +1,29 @@
+import { _ as _defineProperty } from './_defineProperty-2TBZHj_H.js';
+
+var defineProperty = _defineProperty;
+
+/**
+ * The base implementation of `assignValue` and `assignMergeValue` without
+ * value checks.
+ *
+ * @private
+ * @param {Object} object The object to modify.
+ * @param {string} key The key of the property to assign.
+ * @param {*} value The value to assign.
+ */
+function baseAssignValue(object, key, value) {
+  if (key == '__proto__' && defineProperty) {
+    defineProperty(object, key, {
+      'configurable': true,
+      'enumerable': true,
+      'value': value,
+      'writable': true
+    });
+  } else {
+    object[key] = value;
+  }
+}
+
+var _baseAssignValue = baseAssignValue;
+
+export { _baseAssignValue as _ };

package/dist/_baseAssignValue-Dt4F7vTV.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var _defineProperty = require('./_defineProperty-DxuhV38S.js');
+
+var defineProperty = _defineProperty._defineProperty;
+
+/**
+ * The base implementation of `assignValue` and `assignMergeValue` without
+ * value checks.
+ *
+ * @private
+ * @param {Object} object The object to modify.
+ * @param {string} key The key of the property to assign.
+ * @param {*} value The value to assign.
+ */
+function baseAssignValue(object, key, value) {
+  if (key == '__proto__' && defineProperty) {
+    defineProperty(object, key, {
+      'configurable': true,
+      'enumerable': true,
+      'value': value,
+      'writable': true
+    });
+  } else {
+    object[key] = value;
+  }
+}
+
+var _baseAssignValue = baseAssignValue;
+
+exports._baseAssignValue = _baseAssignValue;