@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/Toast/index.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var React = require('react');
+var client = require('react-dom/client');
+var framerMotion = require('framer-motion');
+var Icon = require('../Icon-fa-Ii8qc.js');
+var Button = require('../Button-CvQJyw1M.js');
+var Typography = require('../Typography-Dcec2MjG.js');
+require('@jobber/design');
+require('classnames');
+require('react-router-dom');
+
+var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","button":"cExoS0APILs-"};
+
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = React.useState(true);
+    const icon = getIcon();
+    let timer;
+    React.useEffect(() => startTimer(), []);
+    return (React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+            opacity: 0,
+            scale: 0.8,
+            height: 0,
+            transition: { duration: 0.4 },
+        } },
+        React.createElement("div", { className: styles.slice },
+            React.createElement(Icon.Icon, { color: icon.color, name: icon.name }),
+            React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
+            action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React.createElement("div", { className: styles.button },
+                React.createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+    function startTimer() {
+        timer = setTimeout(() => handleToastClose(), getTimeout());
+    }
+    function stopTimer() {
+        clearTimeout(timer);
+    }
+    function handleToastClose() {
+        setVisible(false);
+    }
+    function getTimeout() {
+        const min = 5000;
+        const max = 10000;
+        const time = message.length * 200;
+        if (time < min)
+            return min;
+        if (time > max)
+            return max;
+        return time;
+    }
+    function getIcon() {
+        switch (variation) {
+            case "info":
+                return { name: "knot", color: "lightBlue" };
+            case "error":
+                return { name: "alert", color: "red" };
+            default:
+                return { name: "checkmark", color: "green" };
+        }
+    }
+}
+
+const targetId = "atlantis-toast-element";
+let target = document.querySelector(`#${targetId}`);
+if (!target) {
+    target = document.createElement("div");
+    target.id = targetId;
+    target.classList.add(styles.wrapper);
+    document.body.appendChild(target);
+}
+const root = client.createRoot(target);
+function showToast(props) {
+    // Ensure target and body is still there when rendering the toast. This is due
+    // to an issue with ReactDOM createRoot assuming document is always there and
+    // Jest taking the document down.
+    if (document.body.contains(target)) {
+        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+    }
+}
+const ToastContainer = React.forwardRef(ToastInternal);
+function ToasterOven(props) {
+    const toastRef = React.useRef();
+    React.useEffect(() => toastRef.current.add(props));
+    return React.createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    const [toastKey, setToastKey] = React.useState(0);
+    const [toasts, setToasts] = React.useState([]);
+    React.useImperativeHandle(ref, () => ({
+        add: props => {
+            setToastKey(toastKey + 1);
+            setToasts([
+                Object.assign(Object.assign({}, props), { id: toastKey }),
+                ...toasts,
+            ]);
+        },
+    }));
+    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+}
+
+exports.showToast = showToast;

package/dist/Toast/index.mjs

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { I as Icon } from '../Icon-GaU33tZU.js';
+import { B as Button } from '../Button-DjFrVgPj.js';
+import { T as Typography } from '../Typography-BD0mo9T9.js';
+import '@jobber/design';
+import 'classnames';
+import 'react-router-dom';
+
+var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","button":"cExoS0APILs-"};
+
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = useState(true);
+    const icon = getIcon();
+    let timer;
+    useEffect(() => startTimer(), []);
+    return (React.createElement(AnimatePresence, null, visible && (React.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+            opacity: 0,
+            scale: 0.8,
+            height: 0,
+            transition: { duration: 0.4 },
+        } },
+        React.createElement("div", { className: styles.slice },
+            React.createElement(Icon, { color: icon.color, name: icon.name }),
+            React.createElement(Typography, { element: "span", size: "large" }, message),
+            action && (React.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React.createElement("div", { className: styles.button },
+                React.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+    function startTimer() {
+        timer = setTimeout(() => handleToastClose(), getTimeout());
+    }
+    function stopTimer() {
+        clearTimeout(timer);
+    }
+    function handleToastClose() {
+        setVisible(false);
+    }
+    function getTimeout() {
+        const min = 5000;
+        const max = 10000;
+        const time = message.length * 200;
+        if (time < min)
+            return min;
+        if (time > max)
+            return max;
+        return time;
+    }
+    function getIcon() {
+        switch (variation) {
+            case "info":
+                return { name: "knot", color: "lightBlue" };
+            case "error":
+                return { name: "alert", color: "red" };
+            default:
+                return { name: "checkmark", color: "green" };
+        }
+    }
+}
+
+const targetId = "atlantis-toast-element";
+let target = document.querySelector(`#${targetId}`);
+if (!target) {
+    target = document.createElement("div");
+    target.id = targetId;
+    target.classList.add(styles.wrapper);
+    document.body.appendChild(target);
+}
+const root = createRoot(target);
+function showToast(props) {
+    // Ensure target and body is still there when rendering the toast. This is due
+    // to an issue with ReactDOM createRoot assuming document is always there and
+    // Jest taking the document down.
+    if (document.body.contains(target)) {
+        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+    }
+}
+const ToastContainer = forwardRef(ToastInternal);
+function ToasterOven(props) {
+    const toastRef = useRef();
+    useEffect(() => toastRef.current.add(props));
+    return React.createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    const [toastKey, setToastKey] = useState(0);
+    const [toasts, setToasts] = useState([]);
+    useImperativeHandle(ref, () => ({
+        add: props => {
+            setToastKey(toastKey + 1);
+            setToasts([
+                Object.assign(Object.assign({}, props), { id: toastKey }),
+                ...toasts,
+            ]);
+        },
+    }));
+    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+}
+
+export { showToast };

package/dist/Tooltip/Tooltip.d.ts

@@ -1,10 +1,16 @@
 import { ReactElement } from "react";
+import { Placement } from "./Tooltip.types";
 interface TooltipProps {
     readonly children: ReactElement;
     /**
      * Tooltip text
      */
     readonly message: string;
+    /**
+     * Describes the preferred placement of the Popover.
+     * @default 'top'
+     */
+    readonly preferredPlacement?: Placement;
 }
-export declare function Tooltip({ message, children }: TooltipProps): JSX.Element;
+export declare function Tooltip({ message, children, preferredPlacement, }: TooltipProps): JSX.Element;
 export {};

package/dist/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1 @@
+export type Placement = "top" | "bottom" | "left" | "right";

package/dist/Tooltip/{index.js → index.cjs}

@@ -1,13 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Tooltip = require('../Tooltip-6b12f1c2.js');
+var Tooltip = require('../Tooltip-mp-wmNRd.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
-require('../style-inject.es-9d2f5f4e.js');
+require('../useSafeLayoutEffect-DHIY4lnV.js');
+require('../useIsMounted-sXqZBlpo.js');
 require('react-popper');
 
 

package/dist/Tooltip/index.mjs

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

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -1,5 +1,9 @@
-export declare function useTooltipPositioning(): {
-    placement: import("@popperjs/core").Placement | undefined;
+import { Placement } from "./Tooltip.types";
+interface ToolTipPositionOptions {
+    readonly preferredPlacement?: Placement;
+}
+export declare function useTooltipPositioning({ preferredPlacement, }: ToolTipPositionOptions): {
+    placement: "bottom" | "left" | "right" | "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
     shadowRef: import("react").RefObject<HTMLSpanElement>;
     setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
     setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
@@ -15,3 +19,4 @@ export declare function useTooltipPositioning(): {
     update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
     forceUpdate: (() => void) | null;
 };
+export {};

package/dist/Tooltip-C-wkLpWe.js

@@ -0,0 +1,107 @@
+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-tr9DHxlf.js';
+import { u as useIsMounted_2 } from './useIsMounted-JfVXqbjM.js';
+import { usePopper } from 'react-popper';
+
+var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-"};
+
+const DEFAULT_PLACEMENT = "top";
+function useTooltipPositioning({ preferredPlacement, }) {
+    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: preferredPlacement,
+        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) || DEFAULT_PLACEMENT, shadowRef,
+        setArrowRef,
+        setTooltipRef });
+}
+
+const variation = {
+    startOrStop: { scale: 0.6, opacity: 0 },
+    done: { scale: 1, opacity: 1 },
+};
+function Tooltip({ message, children, preferredPlacement = "top", }) {
+    const [show, setShow] = useState(false);
+    const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning({ preferredPlacement: preferredPlacement });
+    initializeListeners();
+    const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.bottom, placement === "top" && styles.top, placement === "left" && styles.left, placement === "right" && styles.right);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+        children,
+        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 })))))));
+    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 }) {
+    const mounted = useIsMounted_2();
+    if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
+        return null;
+    }
+    return ReactDOM.createPortal(children, document.body);
+}
+
+export { Tooltip as T };

package/dist/Tooltip-mp-wmNRd.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-DHIY4lnV.js');
+var useIsMounted = require('./useIsMounted-sXqZBlpo.js');
+var reactPopper = require('react-popper');
+
+var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-"};
+
+const DEFAULT_PLACEMENT = "top";
+function useTooltipPositioning({ preferredPlacement, }) {
+    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: preferredPlacement,
+        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) || DEFAULT_PLACEMENT, shadowRef,
+        setArrowRef,
+        setTooltipRef });
+}
+
+const variation = {
+    startOrStop: { scale: 0.6, opacity: 0 },
+    done: { scale: 1, opacity: 1 },
+};
+function Tooltip({ message, children, preferredPlacement = "top", }) {
+    const [show, setShow] = React.useState(false);
+    const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning({ preferredPlacement: preferredPlacement });
+    initializeListeners();
+    const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.bottom, placement === "top" && styles.top, placement === "left" && styles.left, placement === "right" && styles.right);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+        children,
+        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 })))))));
+    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 }) {
+    const mounted = useIsMounted.useIsMounted_2();
+    if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
+        return null;
+    }
+    return ReactDOM.createPortal(children, document.body);
+}
+
+exports.Tooltip = Tooltip;

package/dist/Typography/Typography.d.ts

@@ -31,7 +31,7 @@ interface TypographyProps {
     readonly align?: keyof typeof alignment;
     readonly fontFamily?: keyof typeof fontFamilies;
     readonly children: ReactNode;
-    numberOfLines?: number;
+    readonly numberOfLines?: number;
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
 export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, }: TypographyProps): JSX.Element;

package/dist/Typography/css/Emphasis.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "italic": string;
+  readonly "highlight": string;
+};
+export = styles;
+

package/dist/Typography/css/FontFamilies.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "display": string;
+};
+export = styles;
+

package/dist/Typography/css/FontSizes.css.d.ts

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "extravagant": string;
+  readonly "jumbo": string;
+  readonly "largest": string;
+  readonly "larger": string;
+  readonly "large": string;
+  readonly "base": string;
+  readonly "small": string;
+  readonly "smaller": string;
+};
+export = styles;
+

package/dist/Typography/css/FontWeights.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "regular": string;
+  readonly "medium": string;
+  readonly "semiBold": string;
+  readonly "bold": string;
+  readonly "extraBold": string;
+  readonly "black": string;
+};
+export = styles;
+

package/dist/Typography/css/TextAlignment.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "start": string;
+  readonly "center": string;
+  readonly "end": string;
+};
+export = styles;
+

package/dist/Typography/css/TextCases.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "uppercase": string;
+  readonly "lowercase": string;
+  readonly "capitalize": string;
+  readonly "none": string;
+};
+export = styles;
+

package/dist/Typography/css/TextColors.css.d.ts

@@ -0,0 +1,24 @@
+declare const styles: {
+  readonly "blue": string;
+  readonly "grey": string;
+  readonly "greyBlueDark": string;
+  readonly "greyBlue": string;
+  readonly "green": string;
+  readonly "red": string;
+  readonly "yellow": string;
+  readonly "yellowDark": string;
+  readonly "lightBlue": string;
+  readonly "white": string;
+  readonly "heading": string;
+  readonly "text": string;
+  readonly "textSecondary": string;
+  readonly "inactive": string;
+  readonly "critical": string;
+  readonly "warning": string;
+  readonly "informative": string;
+  readonly "success": string;
+  readonly "interactive": string;
+  readonly "disabled": string;
+};
+export = styles;
+

package/dist/Typography/css/Truncate.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "textTruncate": string;
+};
+export = styles;
+

package/dist/Typography/css/Typography.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "base": string;
+};
+export = styles;
+

package/dist/Typography/index.cjs

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

package/dist/Typography/index.mjs

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

package/dist/Typography-BD0mo9T9.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-","none":"Gv3bg8ZDlAY-"};
+
+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-","interactive":"_99f--2dY5rg-","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 };