@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Toast/ToastCard.js

@@ -0,0 +1,83 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+import { themeFocusRing, elevation, themePadding } from '../ThemeProvider/tokens';
+export const TOAST_ANIMATION_MS = 200;
+/**
+ * The toasts slide from the edge of the screen they are attached to
+ */
+const getOffset = (position) => {
+    if (position.endsWith('right')) {
+        return 'translateX(110%)';
+    }
+    if (position.endsWith('left')) {
+        return 'translateX(-110%)';
+    }
+    return position.startsWith('top') ? 'translateY(-100%)' : 'translateY(100%)';
+};
+const StyledCard = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  min-width: 14em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `calc(${y} * 0.75) ${x}`;
+}};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
+  font-size: 0.875em;
+  line-height: 1.4;
+  pointer-events: auto;
+  overflow-wrap: anywhere;
+  ${({ $position, $isClosing }) => {
+    const hidden = css `
+      opacity: 0;
+      transform: ${getOffset($position)};
+    `;
+    const shown = css `
+      opacity: 1;
+      transform: none;
+    `;
+    const enter = keyframes `from { ${hidden.styles} } to { ${shown.styles} }`;
+    const exit = keyframes `from { ${shown.styles} } to { ${hidden.styles} }`;
+    return css `
+      animation: ${$isClosing ? exit : enter} ${TOAST_ANIMATION_MS}ms cubic-bezier(0.2, 0, 0, 1)
+        forwards;
+    `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-name: none;
+    opacity: ${({ $isClosing }) => ($isClosing ? 0 : 1)};
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const ToastCard = (props, ref) => {
+    const { children, type, position, isClosing } = props, nativeProps = __rest(props, ["children", "type", "position", "isClosing"]);
+    return (React.createElement(StyledCard, Object.assign({ "data-toast-type": type }, nativeProps, { "$position": position, "$isClosing": isClosing, ref: ref }), children));
+};
+export default React.forwardRef(ToastCard);

package/esm/Toast/ToastCloseButton.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75em;
+  height: 1.75em;
+  margin: -0.25em -0.5em -0.25em 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  opacity: 0.55;
+  cursor: pointer;
+  transition:
+    opacity 150ms ease-out,
+    background-color 150ms ease-out;
+
+  &:hover {
+    opacity: 1;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0;
+  }
+
+  & svg {
+    width: 0.85em;
+    height: 0.85em;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const ToastCloseButton = (props, ref) => (React.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }),
+    React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": true },
+        React.createElement("path", { d: "m5 5 14 14M19 5 5 19", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }))));
+export default React.forwardRef(ToastCloseButton);

package/esm/Toast/ToastContainer.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@emotion/styled';
+import { css, useTheme } from '@emotion/react';
+import Card from './ToastCard';
+import Icon from './ToastIcon';
+import CloseButton from './ToastCloseButton';
+import Action from './ToastAction';
+import ToastItem from './ToastItem';
+import { toastStore } from './store';
+const POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+const Stack = styled.div `
+  position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  box-sizing: border-box;
+  max-width: min(26em, calc(100vw - 2em));
+  pointer-events: none;
+  ${({ $position }) => {
+    const [vertical, horizontal] = $position.split('-');
+    return css `
+      ${vertical}: 1em;
+      align-items: ${horizontal === 'left'
+        ? 'flex-start'
+        : horizontal === 'right'
+            ? 'flex-end'
+            : 'center'};
+      ${horizontal === 'center'
+        ? css `
+            left: 50%;
+            transform: translateX(-50%);
+          `
+        : css `
+            ${horizontal}: 1em;
+          `}
+
+      /* The narrow screen: the toasts take the whole width */
+      @media (max-width: 480px) {
+        left: 0.5em;
+        right: 0.5em;
+        ${vertical}: 0.5em;
+        max-width: none;
+        transform: none;
+        align-items: stretch;
+        & > * {
+          width: auto;
+        }
+      }
+    `;
+}}
+`;
+const getPortal = () => {
+    const id = 'ui-kit-toasts';
+    const existing = document.getElementById(id);
+    if (existing) {
+        return existing;
+    }
+    const node = document.createElement('div');
+    node.id = id;
+    document.body.appendChild(node);
+    return node;
+};
+const useWindowFocused = () => {
+    const [isFocused, setIsFocused] = React.useState(true);
+    React.useEffect(() => {
+        const update = () => setIsFocused(document.hasFocus());
+        update();
+        window.addEventListener('focus', update);
+        window.addEventListener('blur', update);
+        return () => {
+            window.removeEventListener('focus', update);
+            window.removeEventListener('blur', update);
+        };
+    }, []);
+    return isFocused;
+};
+const ToastContainer = props => {
+    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
+    const theme = useTheme();
+    const allToasts = React.useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getServerSnapshot);
+    const toasts = React.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);
+    const isWindowFocused = useWindowFocused();
+    const [portal, setPortal] = React.useState(null);
+    const regionRef = React.useRef(null);
+    React.useEffect(() => {
+        setPortal(getPortal());
+    }, []);
+    const components = React.useMemo(() => ({
+        Toast: (overrides === null || overrides === void 0 ? void 0 : overrides.Toast) || Card,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || Icon,
+        CloseButton: (overrides === null || overrides === void 0 ? void 0 : overrides.CloseButton) || CloseButton,
+        Action: (overrides === null || overrides === void 0 ? void 0 : overrides.Action) || Action,
+    }), [overrides]);
+    const defaults = React.useMemo(() => ({
+        autoClose,
+        closeButton,
+        closeOnClick,
+        pauseOnHover,
+        pauseOnFocusLoss,
+        closeButtonLabel,
+    }), [autoClose, closeButton, closeOnClick, pauseOnHover, pauseOnFocusLoss, closeButtonLabel]);
+    // The toasts over the limit wait: they appear when the shown ones close
+    const visible = typeof limit === 'number' ? toasts.slice(0, Math.max(limit, 0)) : toasts;
+    // A waiting toast closed before it was shown has no exit animation: it is removed at once
+    React.useEffect(() => {
+        toasts
+            .filter(item => item.isClosing && !visible.includes(item))
+            .forEach(item => toastStore.remove(item.toastId));
+    }, [toasts, visible]);
+    React.useEffect(() => {
+        if (!hotkey) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            var _a;
+            if (event.key === hotkey) {
+                const cards = (_a = regionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="status"], [role="alert"]');
+                const newest = cards === null || cards === void 0 ? void 0 : cards[cards.length - 1];
+                if (newest) {
+                    event.preventDefault();
+                    newest.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [hotkey]);
+    if (!portal) {
+        return null;
+    }
+    const byPosition = POSITIONS.map(stackPosition => {
+        const items = visible.filter(item => { var _a; return ((_a = item.position) !== null && _a !== void 0 ? _a : position) === stackPosition; });
+        return { stackPosition, items: newestOnTop ? [...items].reverse() : items };
+    }).filter(({ items }) => items.length > 0);
+    // The region is always in the DOM: the screen readers announce what is added to a live region they already know
+    return ReactDOM.createPortal(React.createElement("div", { role: "region", "aria-label": hotkey ? `${label} (${hotkey})` : label, "aria-live": "polite", ref: regionRef }, byPosition.map(({ stackPosition, items }) => (React.createElement(Stack, { key: stackPosition, "$position": stackPosition, "$zIndex": zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 2 }, items.map(item => (React.createElement(ToastItem, { key: item.toastId, toast: item, position: stackPosition, defaults: defaults, components: components, isWindowFocused: isWindowFocused }))))))), portal);
+};
+export default ToastContainer;

package/esm/Toast/ToastIcon.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+import Spinner from '../LoadingIndicator/Spinner';
+const StyledIcon = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const paths = {
+    info: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        React.createElement("path", { d: "M12 11v6M12 7.5v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    success: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        React.createElement("path", { d: "m7.5 12.5 3 3 6-6.5", fill: "none", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }))),
+    warning: (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M10.3 3.6a2 2 0 0 1 3.4 0l8.2 14.2A2 2 0 0 1 20.2 21H3.8a2 2 0 0 1-1.7-3.2z", fill: "currentColor" }),
+        React.createElement("path", { d: "M12 9v4.5M12 17v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    error: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        React.createElement("path", { d: "m8.5 8.5 7 7m0-7-7 7", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+};
+/**
+ * The icon of the toast type, or the spinner while the toast is loading.
+ * The `default` type has no icon
+ */
+const ToastIcon = (props, ref) => {
+    const { type, isLoading, children } = props, nativeProps = __rest(props, ["type", "isLoading", "children"]);
+    const theme = useTheme();
+    if (children) {
+        return (React.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }), children));
+    }
+    if (isLoading) {
+        return (React.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }),
+            React.createElement(Spinner, { size: "1.25em" })));
+    }
+    if (type === 'default') {
+        return null;
+    }
+    const colors = {
+        info: theme.color.accentPrimary.toString(),
+        success: theme.color.success.toString(),
+        warning: theme.color.warning.toString(),
+        error: theme.color.error.toString(),
+    };
+    return (React.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign({ color: colors[type] }, nativeProps.style), ref: ref }),
+        React.createElement("svg", { viewBox: "0 0 24 24" }, paths[type])));
+};
+export default React.forwardRef(ToastIcon);

package/esm/Toast/ToastItem.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { TOAST_ANIMATION_MS } from './ToastCard';
+import { toast as toastApi, toastStore } from './store';
+const Body = styled.div `
+  flex: 1;
+  min-width: 0;
+  /* Centers the one-line text against the icon and the close button */
+  padding: 0.1em 0;
+`;
+const Description = styled.div `
+  margin-top: 0.15em;
+  font-size: 0.93em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const Actions = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.6em;
+`;
+/**
+ * The clicks on these elements are actions, not the click on the toast
+ */
+const INTERACTIVE = 'a, button, input, select, textarea, label, summary, [role="button"], [contenteditable="true"]';
+const ToastItem = props => {
+    var _a, _b, _c, _d, _e;
+    const { toast, position, defaults, components, isWindowFocused } = props;
+    const { toastId, content, type = 'default', isLoading = false, description, actions, icon, onClick, onOpen, isClosing, version, } = toast;
+    // The loading toast waits for `toast.update`: it can not be closed by the timer or by the click
+    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : defaults.autoClose);
+    const closeButton = isLoading ? false : ((_b = toast.closeButton) !== null && _b !== void 0 ? _b : defaults.closeButton);
+    const closeOnClick = isLoading ? false : ((_c = toast.closeOnClick) !== null && _c !== void 0 ? _c : defaults.closeOnClick);
+    const pauseOnHover = (_d = toast.pauseOnHover) !== null && _d !== void 0 ? _d : defaults.pauseOnHover;
+    const pauseOnFocusLoss = (_e = toast.pauseOnFocusLoss) !== null && _e !== void 0 ? _e : defaults.pauseOnFocusLoss;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const isPaused = (pauseOnHover && isHovered) || hasFocus || (pauseOnFocusLoss && !isWindowFocused);
+    const closeToast = React.useCallback(() => toastApi.dismiss(toastId), [toastId]);
+    React.useEffect(() => {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        // Once, when the toast appears
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // The time left. It starts again on every update of the toast
+    const remainingRef = React.useRef(0);
+    React.useEffect(() => {
+        remainingRef.current = typeof autoClose === 'number' ? autoClose : 0;
+    }, [autoClose, version]);
+    React.useEffect(() => {
+        if (autoClose === false || isPaused || isClosing) {
+            return undefined;
+        }
+        const startedAt = Date.now();
+        const timer = setTimeout(closeToast, Math.max(remainingRef.current, 0));
+        return () => {
+            clearTimeout(timer);
+            remainingRef.current -= Date.now() - startedAt;
+        };
+    }, [autoClose, isPaused, isClosing, version, closeToast]);
+    // The toast is removed after the exit animation. A timer, not `animationend`:
+    // with the reduced motion there is no animation and no event
+    React.useEffect(() => {
+        if (!isClosing) {
+            return undefined;
+        }
+        const timer = setTimeout(() => toastStore.remove(toastId), TOAST_ANIMATION_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [isClosing, toastId]);
+    const handleClick = event => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        const target = event.target;
+        if (closeOnClick && !event.defaultPrevented && !target.closest(INTERACTIVE)) {
+            closeToast();
+        }
+    };
+    const handleKeyDown = event => {
+        if (event.key === 'Escape' && !isLoading) {
+            event.stopPropagation();
+            closeToast();
+        }
+    };
+    const handleBlur = event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            setHasFocus(false);
+        }
+    };
+    const renderedContent = typeof content === 'function' ? content({ closeToast, toastProps: toast }) : content;
+    return (React.createElement(components.Toast, { type: type, position: position, isClosing: isClosing, 
+        // Errors interrupt the screen reader, the rest is read when it is free
+        role: type === 'error' ? 'alert' : 'status', tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setHasFocus(true), onBlur: handleBlur },
+        icon !== false && (React.createElement(components.Icon, { type: type, isLoading: isLoading }, icon)),
+        React.createElement(Body, null,
+            renderedContent,
+            description != null && React.createElement(Description, null, description),
+            actions && actions.length > 0 && (React.createElement(Actions, null, actions.map((action, index) => (React.createElement(components.Action
+            // The actions are a static list of the toast
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // The actions are a static list of the toast
+                // eslint-disable-next-line react/no-array-index-key
+                key: index, onClick: event => {
+                    var _a;
+                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event, closeToast);
+                    if (action.closeOnClick !== false) {
+                        closeToast();
+                    }
+                } }, action.label)))))),
+        typeof closeButton === 'function'
+            ? closeButton({ closeToast })
+            : closeButton && (React.createElement(components.CloseButton, { "aria-label": defaults.closeButtonLabel, onClick: closeToast }))));
+};
+export default ToastItem;

package/esm/Toast/index.js

@@ -0,0 +1,4 @@
+import ToastContainer from './ToastContainer';
+export { toast } from './store';
+export { ToastContainer };
+export default ToastContainer;

package/esm/Toast/store.js

@@ -0,0 +1,72 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+let toasts = [];
+const listeners = new Set();
+let idCounter = 0;
+const emit = () => {
+    listeners.forEach(listener => listener());
+};
+const setToasts = (next) => {
+    toasts = next;
+    emit();
+};
+export const toastStore = {
+    subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    },
+    getSnapshot: () => toasts,
+    getServerSnapshot: () => [],
+    /**
+     * Removes the toast after its exit animation
+     */
+    remove(toastId) {
+        var _a;
+        const removed = toasts.find(item => item.toastId === toastId);
+        setToasts(toasts.filter(item => item.toastId !== toastId));
+        (_a = removed === null || removed === void 0 ? void 0 : removed.onClose) === null || _a === void 0 ? void 0 : _a.call(removed);
+    },
+};
+const isActive = (toastId) => toasts.some(item => item.toastId === toastId && !item.isClosing);
+const show = (content, options = {}) => {
+    const { toastId = `toast-${(idCounter += 1)}` } = options, rest = __rest(options, ["toastId"]);
+    // As in react-toastify: the toast with the same id is not duplicated
+    if (isActive(toastId)) {
+        return toastId;
+    }
+    setToasts([
+        ...toasts.filter(item => item.toastId !== toastId),
+        Object.assign(Object.assign({}, rest), { toastId, content, version: 0, isClosing: false }),
+    ]);
+    return toastId;
+};
+const withType = (type) => (content, options) => show(content, Object.assign(Object.assign({}, options), { type }));
+export const toast = Object.assign((content, options) => show(content, options), {
+    info: withType('info'),
+    success: withType('success'),
+    warning: withType('warning'),
+    warn: withType('warning'),
+    error: withType('error'),
+    loading: (content, options) => show(content, Object.assign(Object.assign({}, options), { isLoading: true })),
+    update: (toastId, options) => {
+        const { render } = options, rest = __rest(options, ["render"]);
+        setToasts(toasts.map(item => item.toastId === toastId
+            ? Object.assign(Object.assign(Object.assign({}, item), rest), { content: typeof render !== 'undefined' ? render : item.content, version: item.version + 1 }) : item));
+    },
+    dismiss: (toastId) => {
+        setToasts(toasts.map(item => typeof toastId === 'undefined' || item.toastId === toastId
+            ? Object.assign(Object.assign({}, item), { isClosing: true }) : item));
+    },
+    isActive,
+});

package/esm/Tooltip/TooltipArrow.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const SIZE = 0.45;
+const StyledArrow = styled.span `
+  position: absolute;
+  width: ${SIZE * 2}em;
+  height: ${SIZE * 2}em;
+  background-color: inherit;
+  transform: rotate(45deg);
+  pointer-events: none;
+  ${({ $side, $align }) => {
+    const vertical = $side === 'top' || $side === 'bottom';
+    const across = vertical ? 'left' : 'top';
+    const alongStart = $align === 'start' ? '0.9em' : $align === 'end' ? 'calc(100% - 0.9em)' : '50%';
+    return css `
+      ${$side === 'top' ? 'bottom' : $side === 'bottom' ? 'top' : $side === 'left' ? 'right' : 'left'}: -${SIZE}em;
+      ${across}: ${alongStart};
+      margin-${across}: -${SIZE}em;
+    `;
+}}
+`;
+/**
+ * Splits the placement like `top-start` into the side and the alignment
+ */
+const parsePlacement = (placement) => {
+    const [side, modifier] = placement.replace(/^auto-?/, '').split('-');
+    switch (modifier) {
+        case 'start':
+        case 'left':
+        case 'top':
+            return { side: side || 'top', align: 'start' };
+        case 'end':
+        case 'right':
+        case 'bottom':
+            return { side: side || 'top', align: 'end' };
+        default:
+            return { side: side || 'top', align: 'center' };
+    }
+};
+const TooltipArrow = (props, ref) => {
+    const { placement } = props, nativeProps = __rest(props, ["placement"]);
+    const { side, align } = parsePlacement(placement);
+    return React.createElement(StyledArrow, Object.assign({ "aria-hidden": true }, nativeProps, { "$side": side, "$align": align, ref: ref }));
+};
+export default React.forwardRef(TooltipArrow);

package/esm/Tooltip/TooltipContainer.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import { elevation } from '../ThemeProvider/tokens';
+const appear = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const StyledContainer = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  max-width: 20em;
+  padding: 0.4em 0.65em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 0.8em;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  /* Inverted colors: dark on the light theme, light on the dark one */
+  background-color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
+  color: ${({ theme }) => theme.color.surface.toString()};
+  animation: ${appear} 120ms ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const TooltipContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TooltipContainer);