@via-profit/ui-kit 0.4.0 → 0.5.0

package/Toast/ToastIcon.js

@@ -0,0 +1,71 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
+const StyledIcon = styled_1.default.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const paths = {
+    info: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "M12 11v6M12 7.5v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    success: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.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_1.default.createElement("path", { d: "M12 9v4.5M12 17v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    error: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.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 = (0, react_2.useTheme)();
+    if (children) {
+        return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }), children));
+    }
+    if (isLoading) {
+        return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }),
+            react_1.default.createElement(Spinner_1.default, { 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_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign({ color: colors[type] }, nativeProps.style), ref: ref }),
+        react_1.default.createElement("svg", { viewBox: "0 0 24 24" }, paths[type])));
+};
+exports.default = react_1.default.forwardRef(ToastIcon);

package/Toast/ToastItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToastCardProps } from './ToastCard';
+import { ToastIconProps } from './ToastIcon';
+import { ToastCloseButtonProps } from './ToastCloseButton';
+import { ToastActionProps } from './ToastAction';
+import { ToastPosition, ToastState } from './store';
+export interface ToastItemComponents {
+    readonly Toast: React.ComponentType<ToastCardProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Icon: React.ComponentType<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly CloseButton: React.ComponentType<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Action: React.ComponentType<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+}
+export interface ToastDefaults {
+    readonly autoClose: number | false;
+    readonly closeButton: boolean;
+    readonly closeOnClick: boolean;
+    readonly pauseOnHover: boolean;
+    readonly pauseOnFocusLoss: boolean;
+    readonly closeButtonLabel: string;
+}
+interface ToastItemProps {
+    readonly toast: ToastState;
+    readonly position: ToastPosition;
+    readonly defaults: ToastDefaults;
+    readonly components: ToastItemComponents;
+    readonly isWindowFocused: boolean;
+}
+declare const ToastItem: React.FC<ToastItemProps>;
+export default ToastItem;

package/Toast/ToastItem.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const ToastCard_1 = require("./ToastCard");
+const store_1 = require("./store");
+const Body = styled_1.default.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_1.default.div `
+  margin-top: 0.15em;
+  font-size: 0.93em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const Actions = styled_1.default.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_1.default.useState(false);
+    const [hasFocus, setHasFocus] = react_1.default.useState(false);
+    const isPaused = (pauseOnHover && isHovered) || hasFocus || (pauseOnFocusLoss && !isWindowFocused);
+    const closeToast = react_1.default.useCallback(() => store_1.toast.dismiss(toastId), [toastId]);
+    react_1.default.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_1.default.useRef(0);
+    react_1.default.useEffect(() => {
+        remainingRef.current = typeof autoClose === 'number' ? autoClose : 0;
+    }, [autoClose, version]);
+    react_1.default.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_1.default.useEffect(() => {
+        if (!isClosing) {
+            return undefined;
+        }
+        const timer = setTimeout(() => store_1.toastStore.remove(toastId), ToastCard_1.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_1.default.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_1.default.createElement(components.Icon, { type: type, isLoading: isLoading }, icon)),
+        react_1.default.createElement(Body, null,
+            renderedContent,
+            description != null && react_1.default.createElement(Description, null, description),
+            actions && actions.length > 0 && (react_1.default.createElement(Actions, null, actions.map((action, index) => (react_1.default.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_1.default.createElement(components.CloseButton, { "aria-label": defaults.closeButtonLabel, onClick: closeToast }))));
+};
+exports.default = ToastItem;

package/Toast/index.d.ts

@@ -0,0 +1,6 @@
+import ToastContainer from './ToastContainer';
+export { toast } from './store';
+export type { ToastId, ToastType, ToastPosition, ToastOptions, ToastUpdateOptions, ToastContent, ToastContentProps, ToastAction as ToastActionItem, ToastState, } from './store';
+export { ToastContainer };
+export type { ToastContainerProps, ToastOverrides } from './ToastContainer';
+export default ToastContainer;

package/Toast/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContainer = exports.toast = void 0;
+const ToastContainer_1 = __importDefault(require("./ToastContainer"));
+exports.ToastContainer = ToastContainer_1.default;
+var store_1 = require("./store");
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return store_1.toast; } });
+exports.default = ToastContainer_1.default;

package/Toast/store.d.ts

@@ -0,0 +1,155 @@
+import React from 'react';
+export type ToastId = string | number;
+export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastContentProps {
+    /**
+     * Closes this toast
+     */
+    readonly closeToast: () => void;
+    readonly toastProps: ToastState;
+}
+/**
+ * A text or an element, or a function that receives `closeToast`, as in react-toastify
+ */
+export type ToastContent = React.ReactNode | ((props: ToastContentProps) => React.ReactNode);
+export interface ToastAction {
+    readonly label: React.ReactNode;
+    /**
+     * Called on the click. `closeToast` closes the toast before the end of the timer
+     */
+    readonly onClick?: (event: React.MouseEvent<HTMLButtonElement>, closeToast: () => void) => void;
+    /**
+     * Closes the toast after the click
+     * Default: true
+     */
+    readonly closeOnClick?: boolean;
+}
+export interface ToastOptions {
+    /**
+     * The id of the toast. A toast with the id that is already shown is not added again
+     * Default: generated
+     */
+    readonly toastId?: ToastId;
+    readonly type?: ToastType;
+    /**
+     * The `containerId` of the `ToastContainer` that shows the toast, if there are several containers
+     * Default: the container without `containerId`
+     */
+    readonly containerId?: string;
+    /**
+     * Shows the spinner instead of the icon. The loading toast does not close by the timer,
+     * has no close button and does not close by the click: finish it with `toast.update`
+     * Default: false
+     */
+    readonly isLoading?: boolean;
+    /**
+     * The time in ms before the toast closes, or `false` to keep it until the user closes it
+     * Default: `autoClose` of the `ToastContainer`
+     */
+    readonly autoClose?: number | false;
+    /**
+     * Default: `position` of the `ToastContainer`
+     */
+    readonly position?: ToastPosition;
+    /**
+     * The second line under the main text
+     */
+    readonly description?: React.ReactNode;
+    /**
+     * The buttons of the toast, e.g. «Undo»
+     */
+    readonly actions?: readonly ToastAction[];
+    /**
+     * `false` hides the close button, a function renders your own button
+     * Default: true
+     */
+    readonly closeButton?: boolean | ((props: {
+        readonly closeToast: () => void;
+    }) => React.ReactNode);
+    /**
+     * Closes the toast on the click. The clicks on the buttons, links and fields inside the toast are not counted
+     * Default: true
+     */
+    readonly closeOnClick?: boolean;
+    /**
+     * Called on the click on the toast
+     */
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Called when the toast is closed
+     */
+    readonly onClose?: () => void;
+    /**
+     * Called when the toast is shown
+     */
+    readonly onOpen?: () => void;
+    /**
+     * Your icon instead of the icon of the type, or `false` without the icon
+     */
+    readonly icon?: React.ReactNode | false;
+    /**
+     * The timer stops while the pointer is over the toast
+     * Default: true
+     */
+    readonly pauseOnHover?: boolean;
+    /**
+     * The timer stops while the browser window is not active
+     * Default: true
+     */
+    readonly pauseOnFocusLoss?: boolean;
+}
+export interface ToastUpdateOptions extends Omit<ToastOptions, 'toastId'> {
+    /**
+     * The new content of the toast
+     */
+    readonly render?: ToastContent;
+}
+export interface ToastState extends Omit<ToastOptions, 'toastId'> {
+    readonly toastId: ToastId;
+    readonly content: ToastContent;
+    /**
+     * Grows on every update: the timer of the updated toast starts again
+     */
+    readonly version: number;
+    /**
+     * The toast is closing: the exit animation is played, then the toast is removed
+     */
+    readonly isClosing: boolean;
+}
+type Listener = () => void;
+export declare const toastStore: {
+    subscribe(listener: Listener): () => void;
+    getSnapshot: () => readonly ToastState[];
+    getServerSnapshot: () => readonly ToastState[];
+    /**
+     * Removes the toast after its exit animation
+     */
+    remove(toastId: ToastId): void;
+};
+type ToastFunction = {
+    (content: ToastContent, options?: ToastOptions): ToastId;
+    info: (content: ToastContent, options?: ToastOptions) => ToastId;
+    success: (content: ToastContent, options?: ToastOptions) => ToastId;
+    warning: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * The alias of `toast.warning`, as in react-toastify
+     */
+    warn: (content: ToastContent, options?: ToastOptions) => ToastId;
+    error: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * The toast with the spinner. Finish it with `toast.update(id, { render, type, isLoading: false })`
+     */
+    loading: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * Changes the content and the options of the shown toast. The timer starts again
+     */
+    update: (toastId: ToastId, options: ToastUpdateOptions) => void;
+    /**
+     * Closes the toast, or all the toasts without the id
+     */
+    dismiss: (toastId?: ToastId) => void;
+    isActive: (toastId: ToastId) => boolean;
+};
+export declare const toast: ToastFunction;
+export {};

package/Toast/store.js

@@ -0,0 +1,75 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = exports.toastStore = void 0;
+let toasts = [];
+const listeners = new Set();
+let idCounter = 0;
+const emit = () => {
+    listeners.forEach(listener => listener());
+};
+const setToasts = (next) => {
+    toasts = next;
+    emit();
+};
+exports.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 }));
+exports.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/Tooltip/TooltipArrow.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AnchorPos } from '../Popper';
+export type TooltipArrowProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The actual placement of the tooltip: the arrow is drawn on the side facing the anchor
+     */
+    readonly placement: AnchorPos;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The actual placement of the tooltip: the arrow is drawn on the side facing the anchor
+     */
+    readonly placement: AnchorPos;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Tooltip/TooltipArrow.js

@@ -0,0 +1,62 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const SIZE = 0.45;
+const StyledArrow = styled_1.default.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 (0, react_2.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_1.default.createElement(StyledArrow, Object.assign({ "aria-hidden": true }, nativeProps, { "$side": side, "$align": align, ref: ref }));
+};
+exports.default = react_1.default.forwardRef(TooltipArrow);

package/Tooltip/TooltipContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type TooltipContainerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<TooltipContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Tooltip/TooltipContainer.js

@@ -0,0 +1,52 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const appear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const StyledContainer = styled_1.default.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()};
+  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_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(TooltipContainer);