draft-components 0.75.2 → 1.0.0-beta

package/components/toaster/toaster.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showToast = exports.dismissToast = exports.Toaster = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const use_toasts_1 = require("./use-toasts");
-const react_helpers_1 = require("../../lib/react-helpers");
-let isToasterRendered = false;
-const toastTimeouts = new Map();
-function Toaster({ className, position = 'top-center', toastGap = 16, ...props }) {
-    const ref = (0, react_1.useRef)(null);
-    const toasts = (0, use_toasts_1.useToasts)();
-    (0, react_1.useEffect)(() => {
-        const listElement = ref.current;
-        if (!listElement) {
-            return;
-        }
-        const toastAppearsOnBottom = position === null || position === void 0 ? void 0 : position.startsWith('bottom');
-        const items = listElement.children;
-        let offset = 0;
-        for (let i = 0; i < items.length; i += 1) {
-            const item = items[i];
-            if (item instanceof HTMLElement) {
-                item.style.transform = `translateY(${offset}px)`;
-                const d = item.clientHeight + toastGap;
-                if (toastAppearsOnBottom) {
-                    offset -= d;
-                }
-                else {
-                    offset += d;
-                }
-            }
-        }
-    }, [toasts, toastGap, position]);
-    (0, react_1.useEffect)(() => {
-        isToasterRendered = true;
-        return () => {
-            isToasterRendered = false;
-            for (const toastId of toastTimeouts.keys()) {
-                dismissToast(toastId);
-            }
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("ul", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'toaster', `toaster_position_${position}`), children: toasts.map((toast) => ((0, jsx_runtime_1.jsx)("li", { children: toast.render({
-                toastId: toast.id,
-                className: 'toaster__item',
-                dismiss: () => dismissToast(toast.id),
-            }) }, toast.id))) }));
-}
-exports.Toaster = Toaster;
-function dismissToast(toastId) {
-    const timeoutId = toastTimeouts.get(toastId);
-    if (timeoutId) {
-        window.clearTimeout(timeoutId);
-    }
-    toastTimeouts.delete(toastId);
-    (0, use_toasts_1.dispatch)({ type: 'DELETE_TOAST', toastId });
-}
-exports.dismissToast = dismissToast;
-function showToast(renderToast, durationMs = 1e4) {
-    if (!isToasterRendered) {
-        throw new Error('To show toast put <Toatser /> component somewhere on the page.');
-    }
-    const toast = (0, use_toasts_1.createToast)(renderToast);
-    const toastId = toast.id;
-    if (durationMs) {
-        const timeoutId = window.setTimeout(() => {
-            dismissToast(toastId);
-        }, durationMs);
-        toastTimeouts.set(toastId, timeoutId);
-    }
-    (0, use_toasts_1.dispatch)({ type: 'CREATE_TOAST', toast });
-    return toastId;
-}
-exports.showToast = showToast;
-Toaster.dismiss = dismissToast;
-Toaster.show = showToast;

package/components/toaster/use-toasts.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-export declare type ToastId = string;
-export declare type ToastRenderFn = (props: {
-    toastId: ToastId;
-    className: string;
-    dismiss(): void;
-}) => JSX.Element;
-declare type Toast = {
-    id: ToastId;
-    render: ToastRenderFn;
-};
-declare type Action = {
-    type: 'CREATE_TOAST';
-    toast: Toast;
-} | {
-    type: 'DELETE_TOAST';
-    toastId: ToastId;
-};
-export declare function dispatch(action: Action): void;
-export declare function createToast(renderToast: ToastRenderFn): Toast;
-export declare function useToasts(): Toast[];
-export {};

package/components/toaster/use-toasts.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToasts = exports.createToast = exports.dispatch = void 0;
-const react_1 = require("react");
-const util_1 = require("../../lib/util");
-const MAX_TOASTS = 8;
-function reducer(toasts, action) {
-    switch (action.type) {
-        case 'CREATE_TOAST':
-            return [action.toast, ...toasts].slice(0, MAX_TOASTS);
-        case 'DELETE_TOAST':
-            return toasts.filter((toast) => toast.id !== action.toastId);
-        default:
-            return toasts;
-    }
-}
-const listeners = [];
-let toasts = [];
-function dispatch(action) {
-    toasts = reducer(toasts, action);
-    listeners.forEach((listener) => listener(toasts));
-}
-exports.dispatch = dispatch;
-function createToast(renderToast) {
-    return { id: (0, util_1.uniqueId)('toast-'), render: renderToast };
-}
-exports.createToast = createToast;
-function useToasts() {
-    const [toasts, setToasts] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        listeners.push(setToasts);
-        return () => {
-            const index = listeners.findIndex((listener) => listener === setToasts);
-            if (~index) {
-                listeners.splice(index, 1);
-            }
-        };
-    }, []);
-    return toasts;
-}
-exports.useToasts = useToasts;

package/components/tooltip/tooltip.d.ts

@@ -1,17 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
-import { Alignment, Placement } from '../positioner/types';
-declare type RenderFn = (props: {
-    setRef: RefCallback<HTMLElement>;
-    tooltipId: string;
-    hideTooltip(): void;
-    showTooltip(): void;
-}) => ReactNode;
-export declare type TooltipProps = {
-    placement?: Placement;
-    alignment?: Alignment;
-    anchorGap?: number;
-    label: ReactNode;
-    children: RenderFn | ReactNode;
-} & ComponentPropsWithoutRef<'div'>;
-export declare function Tooltip({ id, className, placement, alignment, anchorGap, label, children, ...props }: TooltipProps): JSX.Element;
-export {};

package/components/tooltip/tooltip.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const util_1 = require("../../lib/util");
-const guards_1 = require("../../lib/guards");
-const react_helpers_1 = require("../../lib/react-helpers");
-const use_close_animation_1 = require("../../hooks/use-close-animation");
-const positioner_1 = require("../positioner");
-function Tooltip({ id = (0, util_1.uniqueId)('dc_tooltip_'), className, placement = 'top', alignment = 'center', anchorGap = 8, label, children, ...props }) {
-    const tooltipId = (0, react_1.useRef)(id);
-    const tooltipRef = (0, react_1.useRef)(null);
-    const [isShown, setIsShown] = (0, react_1.useState)(false);
-    const { shouldRender, animationClassName } = (0, use_close_animation_1.useCloseAnimation)({
-        isOpen: isShown,
-        closeDurationMs: 150,
-        className: 'dc-tooltip_fade-transition',
-        openClassName: 'dc-tooltip_show',
-    });
-    const showTooltip = (0, react_1.useCallback)(() => {
-        setIsShown(true);
-    }, []);
-    const hideTooltip = (0, react_1.useCallback)(() => {
-        setIsShown(false);
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: ({ setRef }) => {
-            if ((0, guards_1.isFunction)(children)) {
-                return children({
-                    setRef,
-                    showTooltip,
-                    hideTooltip,
-                    tooltipId: tooltipId.current,
-                });
-            }
-            if ((0, react_1.isValidElement)(children)) {
-                return (0, react_1.cloneElement)(children, {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    ref: (0, react_helpers_1.mergeRefs)(setRef, children.ref),
-                    onMouseEnter: (event) => {
-                        const onMouseEnter = children.props.onMouseEnter;
-                        (0, guards_1.isFunction)(onMouseEnter) && onMouseEnter(event);
-                        showTooltip();
-                    },
-                    onMouseLeave: (event) => {
-                        const onMouseLeave = children.props.onMouseLeave;
-                        (0, guards_1.isFunction)(onMouseLeave) && onMouseLeave(event);
-                        hideTooltip();
-                    },
-                    'aria-labelledby': tooltipId.current,
-                });
-            }
-            return ((0, jsx_runtime_1.jsx)("span", { ref: setRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, children: children }));
-        }, renderContent: ({ style, setRef }) => {
-            if (shouldRender) {
-                return ((0, jsx_runtime_1.jsx)("div", { ref: setRef, style: style, className: "dc-tooltip-container", children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: tooltipRef, id: tooltipId.current, className: (0, react_helpers_1.classNames)('dc-tooltip', animationClassName, className), role: "tooltip", children: label }) }));
-            }
-        } }));
-}
-exports.Tooltip = Tooltip;

package/components/vertical-navigation/index.d.ts

@@ -1,2 +0,0 @@
-export * from './vertical-navigation';
-export * from './vertical-navigation-item';

package/components/vertical-navigation/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./vertical-navigation"), exports);
-__exportStar(require("./vertical-navigation-item"), exports);

package/components/vertical-navigation/vertical-navigation-item.d.ts

@@ -1,16 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-interface VerticalNavigationItemRendererProps {
-    className: string;
-    children: JSX.Element;
-}
-export interface VerticalNavigationItemProps extends ComponentPropsWithoutRef<'a'> {
-    icon?: ReactNode;
-    badge?: ReactNode;
-    selected?: boolean;
-    renderAs?(props: VerticalNavigationItemRendererProps): JSX.Element;
-}
-export declare function VerticalNavigationItem({ className, selected, icon, badge, children, renderAs, ...props }: VerticalNavigationItemProps): JSX.Element;
-export declare namespace VerticalNavigationItem {
-    var SELECTED_STATE_CSS_MODIFIER: string;
-}
-export {};

package/components/vertical-navigation/vertical-navigation-item.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalNavigationItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-function VerticalNavigationItem({ className, selected, icon, badge, children, renderAs, ...props }) {
-    className = (0, react_helpers_1.classNames)(className, 'dc-vertical-nav-item', {
-        [VerticalNavigationItem.SELECTED_STATE_CSS_MODIFIER]: selected,
-    });
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsxs)("div", { className: "dc-vertical-nav-item__icon", children: [icon, " "] }), (0, jsx_runtime_1.jsx)("div", { className: "dc-vertical-nav-item__content", children: children }), badge && (0, jsx_runtime_1.jsxs)("div", { className: "dc-vertical-nav-item__badge", children: [" ", badge] })] }));
-    if (typeof renderAs === 'function') {
-        return renderAs({ className, children: content });
-    }
-    else {
-        return ((0, jsx_runtime_1.jsx)("a", { ...props, className: className, children: content }));
-    }
-}
-exports.VerticalNavigationItem = VerticalNavigationItem;
-VerticalNavigationItem.SELECTED_STATE_CSS_MODIFIER =
-    'dc-vertical-nav-item_selected';

package/components/vertical-navigation/vertical-navigation.d.ts

@@ -1,10 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { VerticalNavigationItem } from './vertical-navigation-item';
-export interface VerticalNavigationProps extends ComponentPropsWithoutRef<'div'> {
-    header?: ReactNode;
-    children: ReactNode;
-}
-export declare function VerticalNavigation({ className, header, children, ...props }: VerticalNavigationProps): JSX.Element;
-export declare namespace VerticalNavigation {
-    var Item: typeof VerticalNavigationItem;
-}

package/components/vertical-navigation/vertical-navigation.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalNavigation = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const vertical_navigation_item_1 = require("./vertical-navigation-item");
-const react_helpers_1 = require("../../lib/react-helpers");
-function VerticalNavigation({ className, header, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-vertical-nav'), children: [header && (0, jsx_runtime_1.jsx)("div", { className: "dc-vertical-nav__header", children: header }), (0, jsx_runtime_1.jsx)("ul", { className: "dc-vertical-nav__items", children: react_1.Children.map(children, (child, index) => {
-                    return (0, jsx_runtime_1.jsx)("li", { children: child }, `vertical-navigation-item-${index}`);
-                }) })] }));
-}
-exports.VerticalNavigation = VerticalNavigation;
-VerticalNavigation.Item = vertical_navigation_item_1.VerticalNavigationItem;

package/css/draft-components-utils.css

@@ -1 +0,0 @@
-.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}.box-content{box-sizing:content-box!important}.box-border{box-sizing:border-box!important}.width-full{width:100%!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-center{align-items:center!important;display:flex!important;justify-content:center!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column{flex-direction:column!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-justify-start{justify-content:flex-start!important}.flex-justify-end{justify-content:flex-end!important}.flex-justify-center{justify-content:center!important}.flex-justify-between{justify-content:space-between!important}.flex-justify-around{justify-content:space-around!important}.flex-items-start{align-items:flex-start!important}.flex-items-end{align-items:flex-end!important}.flex-items-center{align-items:center!important}.flex-items-baseline{align-items:baseline!important}.flex-items-stretch{align-items:stretch!important}.flex-content-start{align-content:flex-start!important}.flex-content-end{align-content:flex-end!important}.flex-content-center{align-content:center!important}.flex-content-between{align-content:space-between!important}.flex-content-around{align-content:space-around!important}.flex-content-stretch{align-content:stretch!important}.flex-1{flex:1!important}.flex-auto{flex:auto!important}.flex-grow-0{flex-grow:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-self-auto{align-self:auto!important}.flex-self-start{align-self:flex-start!important}.flex-self-end{align-self:flex-end!important}.flex-self-center{align-self:center!important}.flex-self-baseline{align-self:baseline!important}.flex-self-stretch{align-self:stretch!important}.m-auto{margin:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-bottom:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.m-0{margin:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-bottom:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-bottom:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-bottom:.75rem!important}.mt-3,.my-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.m-4{margin:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-bottom:1rem!important}.mt-4,.my-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.m-5{margin:1.25rem!important}.mx-5{margin-left:1.25rem!important;margin-right:1.25rem!important}.my-5{margin-bottom:1.25rem!important}.mt-5,.my-5{margin-top:1.25rem!important}.mr-5{margin-right:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.m-6{margin:1.5rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-6{margin-bottom:1.5rem!important}.mt-6,.my-6{margin-top:1.5rem!important}.mr-6{margin-right:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.m-8{margin:2rem!important}.mx-8{margin-left:2rem!important;margin-right:2rem!important}.my-8{margin-bottom:2rem!important}.mt-8,.my-8{margin-top:2rem!important}.mr-8{margin-right:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.m-10{margin:2.5rem!important}.mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.my-10{margin-bottom:2.5rem!important}.mt-10,.my-10{margin-top:2.5rem!important}.mr-10{margin-right:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.m-12{margin:3rem!important}.mx-12{margin-left:3rem!important;margin-right:3rem!important}.my-12{margin-bottom:3rem!important}.mt-12,.my-12{margin-top:3rem!important}.mr-12{margin-right:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.m-16{margin:4rem!important}.mx-16{margin-left:4rem!important;margin-right:4rem!important}.my-16{margin-bottom:4rem!important}.mt-16,.my-16{margin-top:4rem!important}.mr-16{margin-right:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.m-20{margin:5rem!important}.mx-20{margin-left:5rem!important;margin-right:5rem!important}.my-20{margin-bottom:5rem!important}.mt-20,.my-20{margin-top:5rem!important}.mr-20{margin-right:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.m-24{margin:6rem!important}.mx-24{margin-left:6rem!important;margin-right:6rem!important}.my-24{margin-bottom:6rem!important}.mt-24,.my-24{margin-top:6rem!important}.mr-24{margin-right:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.p-0{padding:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.p-3{padding:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-bottom:.75rem!important}.pt-3,.py-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-bottom:1rem!important}.pt-4,.py-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.p-5{padding:1.25rem!important}.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.py-5{padding-bottom:1.25rem!important}.pt-5,.py-5{padding-top:1.25rem!important}.pr-5{padding-right:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.p-6{padding:1.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important}.pt-6,.py-6{padding-top:1.5rem!important}.pr-6{padding-right:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.p-8{padding:2rem!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.py-8{padding-bottom:2rem!important}.pt-8,.py-8{padding-top:2rem!important}.pr-8{padding-right:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.p-10{padding:2.5rem!important}.px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.py-10{padding-bottom:2.5rem!important}.pt-10,.py-10{padding-top:2.5rem!important}.pr-10{padding-right:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.p-12{padding:3rem!important}.px-12{padding-left:3rem!important;padding-right:3rem!important}.py-12{padding-bottom:3rem!important}.pt-12,.py-12{padding-top:3rem!important}.pr-12{padding-right:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.p-16{padding:4rem!important}.px-16{padding-left:4rem!important;padding-right:4rem!important}.py-16{padding-bottom:4rem!important}.pt-16,.py-16{padding-top:4rem!important}.pr-16{padding-right:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.p-20{padding:5rem!important}.px-20{padding-left:5rem!important;padding-right:5rem!important}.py-20{padding-bottom:5rem!important}.pt-20,.py-20{padding-top:5rem!important}.pr-20{padding-right:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.p-24{padding:6rem!important}.px-24{padding-left:6rem!important;padding-right:6rem!important}.py-24{padding-bottom:6rem!important}.pt-24,.py-24{padding-top:6rem!important}.pr-24{padding-right:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-10{gap:2.5rem!important}.gap-12{gap:3rem!important}.gap-16{gap:4rem!important}.gap-20{gap:5rem!important}.gap-24{gap:6rem!important}.rounded-none{border-radius:0!important}.rounded-2xs{border-radius:.125rem!important}.rounded-xs{border-radius:.25rem!important}.rounded-sm{border-radius:.3125rem!important}.rounded-md{border-radius:.375rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-xl{border-radius:.625rem!important}.rounded-2xl{border-radius:.75rem!important}.rounded-circle{border-radius:50%!important}.border{border:1px solid #d4d4d8!important}.border-top{border-top:1px solid #d4d4d8!important}.border-right{border-right:1px solid #d4d4d8!important}.border-bottom{border-bottom:1px solid #d4d4d8!important}.border-left{border-left:1px solid #d4d4d8!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-dashed{border-style:dashed!important}.border-dotted{border-style:dotted!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semi-bold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extra-bold{font-weight:800!important}.text-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-no-underline{text-decoration:none!important}.text-no-select{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.text-no-wrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.fs-xs{font-size:.75rem!important}.fs-sm{font-size:.875rem!important}.fs-base{font-size:1rem!important}.fs-lg{font-size:1.125rem!important}.fs-xl{font-size:1.5rem!important}.fs-2xl{font-size:1.75rem!important}.fs-3xl{font-size:2rem!important}.color-inherit{color:inherit!important}.color-primary{color:var(--dc-primary-text-color)!important}.color-secondary{color:var(--dc-secondary-text-color)!important}.color-tertiary{color:var(--dc-tertiary-text-color)!important}.color-link{color:var(--dc-link-text-color)!important}.color-error{color:var(--dc-error-text-color)!important}.color-warning{color:var(--dc-warning-text-color)!important}.color-info{color:var(--dc-info-text-color)!important}.color-success{color:var(--dc-success-text-color)!important}.color-gray-50{color:#fafafa!important}.color-gray-100{color:#f4f4f5!important}.color-gray-200{color:#e4e4e7!important}.color-gray-300{color:#d4d4d8!important}.color-gray-400{color:#a1a1aa!important}.color-gray-500{color:#71717a!important}.color-gray-600{color:#52525b!important}.color-gray-700{color:#3f3f46!important}.color-gray-800{color:#27272a!important}.color-gray-900{color:#18181b!important}.color-blue-50{color:#eff6ff!important}.color-blue-100{color:#dbeafe!important}.color-blue-200{color:#bfdbfe!important}.color-blue-300{color:#93c5fd!important}.color-blue-400{color:#60a5fa!important}.color-blue-500{color:#3b82f6!important}.color-blue-600{color:#2563eb!important}.color-blue-700{color:#1d4ed8!important}.color-blue-800{color:#1e40af!important}.color-blue-900{color:#1e3a8a!important}.color-cyan-50{color:#e3fafc!important}.color-cyan-100{color:#c5f6fa!important}.color-cyan-200{color:#99e9f2!important}.color-cyan-300{color:#66d9e8!important}.color-cyan-400{color:#3bc9db!important}.color-cyan-500{color:#22b8cf!important}.color-cyan-600{color:#15aabf!important}.color-cyan-700{color:#1098ad!important}.color-cyan-800{color:#0c8599!important}.color-cyan-900{color:#0b7285!important}.color-red-50{color:#fff5f5!important}.color-red-100{color:#ffe3e3!important}.color-red-200{color:#ffc9c9!important}.color-red-300{color:#ffa8a8!important}.color-red-400{color:#ff8787!important}.color-red-500{color:#ff6b6b!important}.color-red-600{color:#fa5252!important}.color-red-700{color:#f03e3e!important}.color-red-800{color:#e03131!important}.color-red-900{color:#b52626!important}.color-green-50{color:#f2fcf5!important}.color-green-100{color:#e2fbe8!important}.color-green-200{color:#c7f5d4!important}.color-green-300{color:#9fecb1!important}.color-green-400{color:#77d989!important}.color-green-500{color:#5ec169!important}.color-green-600{color:#4ca054!important}.color-green-700{color:#3b7c44!important}.color-green-800{color:#306339!important}.color-green-900{color:#285131!important}.color-lime-50{color:#f4fce3!important}.color-lime-100{color:#e9fac8!important}.color-lime-200{color:#d8f5a2!important}.color-lime-300{color:#c0eb75!important}.color-lime-400{color:#a9e34b!important}.color-lime-500{color:#94d82d!important}.color-lime-600{color:#82c91e!important}.color-lime-700{color:#74b816!important}.color-lime-800{color:#66a80f!important}.color-lime-900{color:#47730a!important}.color-indigo-50{color:#edf2ff!important}.color-indigo-100{color:#dbe4ff!important}.color-indigo-200{color:#bac8ff!important}.color-indigo-300{color:#91a7ff!important}.color-indigo-400{color:#748ffc!important}.color-indigo-500{color:#5c7cfa!important}.color-indigo-600{color:#4c6ef5!important}.color-indigo-700{color:#4263eb!important}.color-indigo-800{color:#3b5bdb!important}.color-indigo-900{color:#364fc7!important}.color-yellow-50{color:#fffceb!important}.color-yellow-100{color:#fff3bf!important}.color-yellow-200{color:#ffec99!important}.color-yellow-300{color:#ffe066!important}.color-yellow-400{color:#ffd43b!important}.color-yellow-500{color:#fcc419!important}.color-yellow-600{color:#f0a800!important}.color-yellow-700{color:#c78100!important}.color-yellow-800{color:#ab6700!important}.color-yellow-900{color:#995200!important}.color-orange-50{color:#fff4e6!important}.color-orange-100{color:#ffe8cc!important}.color-orange-200{color:#ffd8a8!important}.color-orange-300{color:#ffc078!important}.color-orange-400{color:#ffa94d!important}.color-orange-500{color:#ff922b!important}.color-orange-600{color:#fd7e14!important}.color-orange-700{color:#f76707!important}.color-orange-800{color:#e8590c!important}.color-orange-900{color:#d9480f!important}.bg-gray-50{background:#fafafa!important}.bg-gray-100{background:#f4f4f5!important}.bg-gray-200{background:#e4e4e7!important}.bg-gray-300{background:#d4d4d8!important}.bg-gray-400{background:#a1a1aa!important}.bg-gray-500{background:#71717a!important}.bg-gray-600{background:#52525b!important}.bg-gray-700{background:#3f3f46!important}.bg-gray-800{background:#27272a!important}.bg-gray-900{background:#18181b!important}.bg-blue-50{background:#eff6ff!important}.bg-blue-100{background:#dbeafe!important}.bg-blue-200{background:#bfdbfe!important}.bg-blue-300{background:#93c5fd!important}.bg-blue-400{background:#60a5fa!important}.bg-blue-500{background:#3b82f6!important}.bg-blue-600{background:#2563eb!important}.bg-blue-700{background:#1d4ed8!important}.bg-blue-800{background:#1e40af!important}.bg-blue-900{background:#1e3a8a!important}.bg-cyan-50{background:#e3fafc!important}.bg-cyan-100{background:#c5f6fa!important}.bg-cyan-200{background:#99e9f2!important}.bg-cyan-300{background:#66d9e8!important}.bg-cyan-400{background:#3bc9db!important}.bg-cyan-500{background:#22b8cf!important}.bg-cyan-600{background:#15aabf!important}.bg-cyan-700{background:#1098ad!important}.bg-cyan-800{background:#0c8599!important}.bg-cyan-900{background:#0b7285!important}.bg-red-50{background:#fff5f5!important}.bg-red-100{background:#ffe3e3!important}.bg-red-200{background:#ffc9c9!important}.bg-red-300{background:#ffa8a8!important}.bg-red-400{background:#ff8787!important}.bg-red-500{background:#ff6b6b!important}.bg-red-600{background:#fa5252!important}.bg-red-700{background:#f03e3e!important}.bg-red-800{background:#e03131!important}.bg-red-900{background:#b52626!important}.bg-green-50{background:#f2fcf5!important}.bg-green-100{background:#e2fbe8!important}.bg-green-200{background:#c7f5d4!important}.bg-green-300{background:#9fecb1!important}.bg-green-400{background:#77d989!important}.bg-green-500{background:#5ec169!important}.bg-green-600{background:#4ca054!important}.bg-green-700{background:#3b7c44!important}.bg-green-800{background:#306339!important}.bg-green-900{background:#285131!important}.bg-lime-50{background:#f4fce3!important}.bg-lime-100{background:#e9fac8!important}.bg-lime-200{background:#d8f5a2!important}.bg-lime-300{background:#c0eb75!important}.bg-lime-400{background:#a9e34b!important}.bg-lime-500{background:#94d82d!important}.bg-lime-600{background:#82c91e!important}.bg-lime-700{background:#74b816!important}.bg-lime-800{background:#66a80f!important}.bg-lime-900{background:#47730a!important}.bg-indigo-50{background:#edf2ff!important}.bg-indigo-100{background:#dbe4ff!important}.bg-indigo-200{background:#bac8ff!important}.bg-indigo-300{background:#91a7ff!important}.bg-indigo-400{background:#748ffc!important}.bg-indigo-500{background:#5c7cfa!important}.bg-indigo-600{background:#4c6ef5!important}.bg-indigo-700{background:#4263eb!important}.bg-indigo-800{background:#3b5bdb!important}.bg-indigo-900{background:#364fc7!important}.bg-yellow-50{background:#fffceb!important}.bg-yellow-100{background:#fff3bf!important}.bg-yellow-200{background:#ffec99!important}.bg-yellow-300{background:#ffe066!important}.bg-yellow-400{background:#ffd43b!important}.bg-yellow-500{background:#fcc419!important}.bg-yellow-600{background:#f0a800!important}.bg-yellow-700{background:#c78100!important}.bg-yellow-800{background:#ab6700!important}.bg-yellow-900{background:#995200!important}.bg-orange-50{background:#fff4e6!important}.bg-orange-100{background:#ffe8cc!important}.bg-orange-200{background:#ffd8a8!important}.bg-orange-300{background:#ffc078!important}.bg-orange-400{background:#ffa94d!important}.bg-orange-500{background:#ff922b!important}.bg-orange-600{background:#fd7e14!important}.bg-orange-700{background:#f76707!important}.bg-orange-800{background:#e8590c!important}.bg-orange-900{background:#d9480f!important}

package/hooks/index.d.ts

@@ -1,6 +0,0 @@
-export * from './use-close-animation';
-export * from './use-disable-body-scroll';
-export * from './use-esc-key-down';
-export * from './use-focus-trap';
-export * from './use-is-first-render';
-export * from './use-is-mounted';

package/hooks/index.js

@@ -1,22 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./use-close-animation"), exports);
-__exportStar(require("./use-disable-body-scroll"), exports);
-__exportStar(require("./use-esc-key-down"), exports);
-__exportStar(require("./use-focus-trap"), exports);
-__exportStar(require("./use-is-first-render"), exports);
-__exportStar(require("./use-is-mounted"), exports);

package/hooks/use-close-animation.d.ts

@@ -1,13 +0,0 @@
-import { ClassName } from '../lib/react-helpers';
-export declare type UseCloseAnimationParams = {
-    isOpen: boolean;
-    closeDurationMs: number;
-    className?: ClassName;
-    openClassName?: ClassName;
-    closingClassName?: ClassName;
-};
-export declare type UseCloseAnimationResult = {
-    shouldRender: boolean;
-    animationClassName: string;
-};
-export declare function useCloseAnimation(params: UseCloseAnimationParams): UseCloseAnimationResult;

package/hooks/use-close-animation.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCloseAnimation = void 0;
-const react_1 = require("react");
-const react_helpers_1 = require("../lib/react-helpers");
-const use_is_mounted_1 = require("./use-is-mounted");
-function useCloseAnimation(params) {
-    const isMounted = (0, use_is_mounted_1.useIsMounted)();
-    const openTimout = (0, react_1.useRef)();
-    const closeTimeout = (0, react_1.useRef)();
-    const [shouldRender, setShouldRender] = (0, react_1.useState)(params.isOpen);
-    const [shouldAddOpenClass, setShouldAddOpenClass] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (params.isOpen) {
-            setShouldRender(true);
-            openTimout.current = window.setTimeout(() => {
-                if (isMounted.current) {
-                    setShouldAddOpenClass(true);
-                }
-            }, 16);
-        }
-        else {
-            setShouldAddOpenClass(false);
-            closeTimeout.current = window.setTimeout(() => {
-                if (isMounted.current) {
-                    setShouldRender(false);
-                }
-            }, params.closeDurationMs);
-            return () => {
-                window.clearTimeout(openTimout.current);
-                openTimout.current = undefined;
-                window.clearTimeout(closeTimeout.current);
-                closeTimeout.current = undefined;
-            };
-        }
-    }, [params.isOpen, params.closeDurationMs, isMounted]);
-    return {
-        shouldRender,
-        animationClassName: (0, react_helpers_1.classNames)(params.className, shouldAddOpenClass && params.openClassName, closeTimeout.current && params.closingClassName),
-    };
-}
-exports.useCloseAnimation = useCloseAnimation;

package/hooks/use-disable-body-scroll.d.ts

@@ -1 +0,0 @@
-export declare function useDisableBodyScroll(isEnabled?: boolean): void;

package/hooks/use-disable-body-scroll.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisableBodyScroll = void 0;
-const react_1 = require("react");
-const util_1 = require("../lib/util");
-function useDisableBodyScroll(isEnabled = true) {
-    (0, react_1.useEffect)(() => {
-        if (isEnabled) {
-            return disableBodyScroll();
-        }
-    }, [isEnabled]);
-}
-exports.useDisableBodyScroll = useDisableBodyScroll;
-let disableAttempts = 0;
-let initialOverflow = '';
-let initialPaddingRight = '';
-function disableBodyScroll() {
-    if (!disableAttempts) {
-        const bodyStyle = window.getComputedStyle(document.body);
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        initialOverflow = bodyStyle.overflow;
-        initialPaddingRight = bodyStyle.paddingRight;
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = `${parseInt(initialPaddingRight) + scrollbarWidth}px`;
-    }
-    disableAttempts += 1;
-    return (0, util_1.once)(function enableBodyScroll() {
-        disableAttempts -= 1;
-        if (!disableAttempts) {
-            document.body.style.overflow = initialOverflow;
-            document.body.style.paddingRight = initialPaddingRight;
-        }
-    });
-}

package/hooks/use-esc-key-down.d.ts

@@ -1,3 +0,0 @@
-declare type Handler = () => void;
-export declare function useEscKeyDown(handler: Handler, isEnabled: boolean): void;
-export {};

package/hooks/use-esc-key-down.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEscKeyDown = void 0;
-const react_1 = require("react");
-const keyboard_helpers_1 = require("../lib/keyboard-helpers");
-const handlerList = [];
-function useEscKeyDown(handler, isEnabled) {
-    const handlerRef = (0, react_1.useRef)(handler);
-    (0, react_1.useEffect)(() => {
-        handlerRef.current = handler;
-    }, [handler]);
-    (0, react_1.useEffect)(() => {
-        if (!isEnabled) {
-            return;
-        }
-        const handler = handlerRef.current;
-        const handleBodyKeyDown = (event) => {
-            const currentHandler = handlerList[handlerList.length - 1];
-            if (event.key === keyboard_helpers_1.KeyCode.escape && currentHandler) {
-                currentHandler();
-            }
-        };
-        handlerList.push(handler);
-        if (handlerList.length === 1) {
-            document.body.addEventListener('keydown', handleBodyKeyDown);
-        }
-        return () => {
-            const index = handlerList.indexOf(handler);
-            if (~index) {
-                handlerList.splice(index, 1);
-            }
-            if (handlerList.length === 0) {
-                document.body.removeEventListener('keydown', handleBodyKeyDown);
-            }
-        };
-    }, [isEnabled]);
-}
-exports.useEscKeyDown = useEscKeyDown;

package/hooks/use-focus-trap.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from 'react';
-export declare function useFocusTrap(modalRef: RefObject<HTMLElement>, isEnabled: boolean): void;

package/hooks/use-focus-trap.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusTrap = void 0;
-const react_1 = require("react");
-const keyboard_helpers_1 = require("../lib/keyboard-helpers");
-const modalList = [];
-function useFocusTrap(modalRef, isEnabled) {
-    (0, react_1.useEffect)(() => {
-        if (!isEnabled) {
-            return;
-        }
-        const handleBodyKeyDown = (event) => {
-            var _a;
-            if (event.key !== keyboard_helpers_1.KeyCode.tab) {
-                return;
-            }
-            const currentModal = (_a = modalList[modalList.length - 1]) === null || _a === void 0 ? void 0 : _a.current;
-            if (currentModal == null) {
-                return;
-            }
-            const focusableEls = getFocusableElements(currentModal);
-            if (focusableEls.length === 0) {
-                return;
-            }
-            const firstFocusableEl = focusableEls[0];
-            const lastFocusableEl = focusableEls[focusableEls.length - 1];
-            if (!currentModal.contains(document.activeElement)) {
-                event.preventDefault();
-                firstFocusableEl.focus();
-            }
-            else if (event.shiftKey) {
-                if (document.activeElement === firstFocusableEl) {
-                    event.preventDefault();
-                    lastFocusableEl.focus();
-                }
-            }
-            else if (document.activeElement === lastFocusableEl) {
-                event.preventDefault();
-                firstFocusableEl.focus();
-            }
-        };
-        modalList.push(modalRef);
-        if (modalList.length === 1) {
-            document.body.addEventListener('keydown', handleBodyKeyDown);
-        }
-        return () => {
-            const index = modalList.indexOf(modalRef);
-            if (~index) {
-                modalList.splice(index, 1);
-            }
-            if (modalList.length === 0) {
-                document.body.removeEventListener('keydown', handleBodyKeyDown);
-            }
-        };
-    }, [isEnabled, modalRef]);
-}
-exports.useFocusTrap = useFocusTrap;
-function getFocusableElements(container) {
-    if (container == null) {
-        return [];
-    }
-    const focusableElementsSelector = [
-        'a[href]',
-        'area[href]',
-        'input:not([disabled])',
-        'select:not([disabled])',
-        'textarea:not([disabled])',
-        'button:not([disabled])',
-        'iframe',
-        '[tabindex]',
-        '[contentEditable=true]',
-    ]
-        .map((selector) => `${selector}:not([tabindex='-1'])`)
-        .join(', ');
-    return Array.from(container.querySelectorAll(focusableElementsSelector));
-}

package/hooks/use-is-first-render.d.ts

@@ -1 +0,0 @@
-export declare function useIsFirstRender(): boolean;

package/hooks/use-is-first-render.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsFirstRender = void 0;
-const react_1 = require("react");
-function useIsFirstRender() {
-    const isFirstRender = (0, react_1.useRef)(true);
-    if (isFirstRender.current) {
-        isFirstRender.current = false;
-        return true;
-    }
-    return isFirstRender.current;
-}
-exports.useIsFirstRender = useIsFirstRender;

package/hooks/use-is-mounted.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from 'react';
-export declare function useIsMounted(): RefObject<boolean>;

package/hooks/use-is-mounted.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsMounted = void 0;
-const react_1 = require("react");
-function useIsMounted() {
-    const isMounted = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-}
-exports.useIsMounted = useIsMounted;

package/lib/guards.d.ts

@@ -1,2 +0,0 @@
-export declare function isFunction(fn: unknown): fn is (...args: any) => any;
-export declare function isHTMLElement(element: unknown): element is HTMLElement;