@commonsku/styles 1.16.3 → 1.16.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React$1, { CSSProperties, MouseEvent, Component, MouseEventHandler, ReactNode, WeakValidationMap, ComponentType } from 'react';
+import React$1, { CSSProperties, MouseEvent, Component, MouseEventHandler, ReactNode, WeakValidationMap, ComponentType, Dispatch, SetStateAction, MutableRefObject, ForwardedRef } from 'react';
 import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps, Keyframes, AnyStyledComponent, StyledComponentInnerComponent } from 'styled-components';
 import { DropzoneOptions } from 'react-dropzone';
 import { AsyncAdditionalProps } from 'react-select/dist/declarations/src/useAsync';
@@ -1361,7 +1361,23 @@ declare type PopupProps = React$1.PropsWithChildren<{
     zIndex?: number;
     overlayZIndex?: number;
 } & SharedStyleTypes> & React$1.HTMLAttributes<HTMLDivElement>;
-declare const Popup: ({ header, noHeader, title, controls, children, onClose, noCloseButton, closeOnEsc, closeOnClickOutside, overlayZIndex, ...props }: PopupProps) => JSX.Element;
+declare const Popup: React$1.ForwardRefExoticComponent<{
+    header?: React$1.Component<{}, {}, any> | undefined;
+    noHeader?: boolean | undefined;
+    title?: string | React$1.Component<{}, {}, any> | undefined;
+    controls?: React$1.ReactNode[] | undefined;
+    onClose?: ((event?: React$1.MouseEvent) => void) | undefined;
+    noCloseButton?: boolean | undefined;
+    closeOnClickOutside?: boolean | undefined;
+    closeOnEsc?: boolean | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    padding?: string | undefined;
+    zIndex?: number | undefined;
+    overlayZIndex?: number | undefined;
+} & SharedStyleTypes & {
+    children?: React$1.ReactNode;
+} & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ShowPopup: React$1.FC<Omit<PopupProps, 'onClose'> & {
     popup: React$1.ComponentType<PopupProps>;
     autoOpen?: boolean;
@@ -3416,6 +3432,23 @@ declare type changeDateFunc = (value: Date) => void;
 declare type useCalendarProps = {
     onChangeWeek?: onChangeWeekFunc;
     onChangeMonth?: onChangeMonthFunc;
+};
+declare const useCalendar: ({ onChangeWeek, onChangeMonth, }: useCalendarProps) => {
+    currentMonth: Date;
+    currentWeek: number;
+    selectedDate: Date;
+    setSelectedDate: Dispatch<SetStateAction<Date>>;
+    setCurrentWeek: Dispatch<SetStateAction<number>>;
+    setCurrentMonth: Dispatch<SetStateAction<Date>>;
+    onClickDay: (day: Date) => void;
+    onNextWeek: () => void;
+    onPrevWeek: () => void;
+    onNextMonth: () => void;
+    onPrevMonth: () => void;
+    changeWeek: (action: string, value?: Date) => void;
+    changeDate: (value: Date) => void;
+    getDatesBetween: (startDt: Date, endDt: Date) => Date[];
+    onReset: () => void;
 };
 
 declare type TasksCalendarHeaderProps = {
@@ -3560,4 +3593,33 @@ declare type SimpleWindowedTableProps = {
 };
 declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, hideFooter, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes };
+declare function useDelayUnmount(isMounted: boolean, delayTime: number): boolean;
+//# sourceMappingURL=useDelayUnmount.d.ts.map
+
+declare const usePrefersReducedMotion: () => boolean;
+
+declare const useRandomInterval: (callback: () => void, minDelay?: number, maxDelay?: number) => () => void;
+
+declare const useWindowSize: () => number[];
+//# sourceMappingURL=useWindowSize.d.ts.map
+
+declare function useLongPress(callback?: () => void, ms?: number): {
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+    onTouchStart: () => void;
+    onTouchEnd: () => void;
+};
+
+declare const useClickOutside: <T extends HTMLElement = HTMLElement>(props: {
+    ref: MutableRefObject<T | null>;
+    eventType?: "mousedown" | "mouseup" | undefined;
+    onClick?: ((e?: any) => void) | undefined;
+    onCleanup?: Function | undefined;
+}) => void;
+//# sourceMappingURL=useClickOutside.d.ts.map
+
+declare const useFallbackRef: <T>(forwardedRef: ForwardedRef<T>) => MutableRefObject<T | null>;
+//# sourceMappingURL=useFallbackRef.d.ts.map
+
+export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import _, { map, pick, keys, isUndefined, get, toNumber, isString, filter, partial, uniqueId, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React__default, { Fragment, useState, useEffect, useRef, Component, useCallback, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
+import React__default, { Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
@@ -8,7 +8,7 @@ import BaseCreatableSelect from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactDOM from 'react-dom';
-import { format, addDays, getWeek, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
+import { getWeek, addDays, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, format, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
 import BaseDatePicker from 'react-datepicker';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout, useExpanded } from 'react-table';
 import { useSticky } from 'react-table-sticky';
@@ -3416,6 +3416,254 @@ var THSorted = function (_a) {
 };
 var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9;
 
+var useClickOutside = function (props) {
+    var ref = props.ref, _a = props.eventType, eventType = _a === void 0 ? 'mousedown' : _a, onClick = props.onClick, onCleanup = props.onCleanup;
+    useEffect(function () {
+        function handleClickOutside(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClick && onClick(e);
+            }
+        }
+        document.addEventListener(eventType, handleClickOutside);
+        return function () {
+            document.removeEventListener(eventType, handleClickOutside);
+            onCleanup && onCleanup();
+        };
+    }, []);
+};
+
+function useDelayUnmount(isMounted, delayTime) {
+    var _a = React__default.useState(false), shouldRender = _a[0], setShouldRender = _a[1];
+    React__default.useEffect(function () {
+        var timeoutId;
+        if (isMounted && !shouldRender) {
+            setShouldRender(true);
+        }
+        else if (!isMounted && shouldRender) {
+            timeoutId = setTimeout(function () { return setShouldRender(false); }, delayTime);
+        }
+        return function () { return clearTimeout(timeoutId); };
+    }, [isMounted, delayTime, shouldRender]);
+    return shouldRender;
+}
+
+var QUERY = '(prefers-reduced-motion: no-preference)';
+var isRenderingOnServer = typeof window$1 === 'undefined';
+var getInitialState = function () {
+    // For our initial server render, we won't know if the user
+    // prefers reduced motion, but it doesn't matter. This value
+    // will be overwritten on the client, before any animations
+    // occur.
+    return isRenderingOnServer ? true : !window$1.matchMedia(QUERY).matches;
+};
+var usePrefersReducedMotion = function () {
+    var _a = React__default.useState(getInitialState), prefersReducedMotion = _a[0], setPrefersReducedMotion = _a[1];
+    React__default.useEffect(function () {
+        var mediaQueryList = window$1.matchMedia(QUERY);
+        var listener = function (event) {
+            setPrefersReducedMotion(!event.matches);
+        };
+        mediaQueryList.addListener(listener);
+        return function () {
+            mediaQueryList.removeListener(listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+};
+
+var useRandomInterval = function (callback, minDelay, maxDelay) {
+    var timeoutId = React__default.useRef(null);
+    var savedCallback = React__default.useRef(callback);
+    React__default.useEffect(function () {
+        savedCallback.current = callback;
+    });
+    React__default.useEffect(function () {
+        var isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number';
+        if (isEnabled) {
+            var handleTick_1 = function () {
+                var nextTickAt = random(minDelay, maxDelay);
+                timeoutId.current = setTimeout(function () {
+                    savedCallback.current();
+                    handleTick_1();
+                }, nextTickAt);
+            };
+            handleTick_1();
+        }
+        return function () {
+            if (!!timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, [minDelay, maxDelay]);
+    var cancel = React__default.useCallback(function () {
+        if (!!timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
+    }, []);
+    return cancel;
+};
+
+var today = new Date();
+var getDatesBetween = function (startDt, endDt) {
+    var result = [];
+    var currentDt = startDt;
+    while (currentDt <= endDt) {
+        result.push(currentDt);
+        currentDt = addDays(currentDt, 1);
+    }
+    return result;
+};
+var useCalendar = function (_a) {
+    var onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth;
+    var _b = useState(today), currentMonth = _b[0], setCurrentMonth = _b[1];
+    var _c = useState(getWeek(currentMonth)), currentWeek = _c[0], setCurrentWeek = _c[1];
+    var _d = useState(today), selectedDate = _d[0], setSelectedDate = _d[1];
+    var changeMonth = function (action) {
+        var dt = currentMonth;
+        if (action === "prev") {
+            dt = subMonths(currentMonth, 1);
+        }
+        else if (action === "next") {
+            dt = addMonths(currentMonth, 1);
+        }
+        else if (action === "reset") {
+            dt = today;
+        }
+        setCurrentMonth(dt);
+        onChangeMonth && onChangeMonth({
+            action: action,
+            date: dt,
+            month: getMonth(dt),
+            year: getYear(dt),
+        });
+    };
+    var changeWeek = function (action, value) {
+        var dt = currentMonth;
+        if (action === "prev") {
+            dt = subWeeks(currentMonth, 1);
+        }
+        else if (action === "next") {
+            dt = addWeeks(currentMonth, 1);
+        }
+        else if (action === "reset") {
+            dt = today;
+        }
+        else if (action === "custom" && value) {
+            dt = value;
+        }
+        setCurrentMonth(dt);
+        var week = getWeek(dt);
+        setCurrentWeek(week);
+        onChangeWeek && onChangeWeek({
+            action: action,
+            date: dt,
+            week: week,
+            month: getMonth(dt),
+            year: getYear(dt),
+        });
+    };
+    var changeDate = function (value) {
+        setCurrentMonth(value);
+        var week = getWeek(value);
+        setCurrentWeek(week);
+        onChangeWeek && onChangeWeek({
+            action: 'change-date',
+            date: value,
+            week: week,
+            month: getMonth(value),
+            year: getYear(value),
+        });
+    };
+    var onClickDay = function (day) {
+        if (isSameDay(day, selectedDate)) {
+            setSelectedDate(today);
+        }
+        else {
+            setSelectedDate(day);
+        }
+    };
+    // reset to today's date
+    var resetToToday = function () {
+        setSelectedDate(today);
+        changeWeek('reset');
+    };
+    var onNextWeek = function () { return changeWeek("next"); };
+    var onPrevWeek = function () { return changeWeek("prev"); };
+    var onNextMonth = function () { return changeMonth("next"); };
+    var onPrevMonth = function () { return changeMonth("prev"); };
+    return {
+        currentMonth: currentMonth,
+        currentWeek: currentWeek,
+        selectedDate: selectedDate,
+        setSelectedDate: setSelectedDate,
+        setCurrentWeek: setCurrentWeek,
+        setCurrentMonth: setCurrentMonth,
+        onClickDay: onClickDay,
+        onNextWeek: onNextWeek,
+        onPrevWeek: onPrevWeek,
+        onNextMonth: onNextMonth,
+        onPrevMonth: onPrevMonth,
+        changeWeek: changeWeek,
+        changeDate: changeDate,
+        getDatesBetween: getDatesBetween,
+        onReset: resetToToday,
+    };
+};
+
+var useWindowSize = function () {
+    var _a = useState([0, 0]), size = _a[0], setSize = _a[1]; // [width, height]
+    useEffect(function () {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return function () { return window.removeEventListener('resize', updateSize); };
+    }, []);
+    return size;
+};
+
+function useLongPress(callback, ms) {
+    if (callback === void 0) { callback = function () { }; }
+    if (ms === void 0) { ms = 300; }
+    var _a = useState(false), startLongPress = _a[0], setStartLongPress = _a[1];
+    useEffect(function () {
+        var timeoutId = null;
+        if (startLongPress) {
+            timeoutId = setTimeout(callback, ms);
+        }
+        else {
+            if (timeoutId !== undefined && timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        }
+        return function () {
+            if (timeoutId !== undefined && timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [callback, ms, startLongPress]);
+    var start = useCallback(function () {
+        setStartLongPress(true);
+    }, []);
+    var stop = useCallback(function () {
+        setStartLongPress(false);
+    }, []);
+    return {
+        onMouseDown: start,
+        onMouseUp: stop,
+        onMouseLeave: stop,
+        onTouchStart: start,
+        onTouchEnd: stop,
+    };
+}
+
+var useFallbackRef = function (forwardedRef) {
+    var localRef = useRef(null);
+    useImperativeHandle(forwardedRef, function () { return localRef.current; });
+    return localRef;
+};
+
 var Overlay = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])), function (p) { return p.zIndex || 999; });
 var PopupWindow = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, function (p) { return p.zIndex || 1006; }, function (props) { var _a; return (_a = props.padding) !== null && _a !== void 0 ? _a : '1rem'; }, SharedStyles, SizerCss);
 var PopupHeader = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
@@ -3431,18 +3679,16 @@ var PopupContainer = function (_a) {
     }, []);
     return ReactDOM.createPortal(children, ref.current);
 };
-var Popup = function (_a) {
+var Popup = React__default.forwardRef(function (_a, forwardedRef) {
     var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex"]);
-    var ref = React__default.useRef(null);
-    /* there is a bug where this closes popup involuntarily
-    const handleClick = (e: Event) => {
-      // @ts-ignore
-      if (ref.current?.contains(e.target)) {
-        return;
-      }
-      onClose && onClose();
-    };
-    */
+    var ref = useFallbackRef(forwardedRef);
+    useClickOutside({
+        ref: ref,
+        onClick: function (e) {
+            closeOnClickOutside && onClose && onClose(e);
+        },
+        onCleanup: onClose,
+    });
     useEffect(function () {
         var handleKeyDown = function (e) {
             // @ts-ignore
@@ -3470,7 +3716,7 @@ var Popup = function (_a) {
                         React__default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
                             controls || React__default.createElement(Button, { onClick: onClose }, "Close")))),
                 React__default.createElement("div", { className: "popup-content" }, children))));
-};
+});
 var ShowPopup = function (_a) {
     var _b = _a.autoOpen, autoOpen = _b === void 0 ? false : _b, PopupComponent = _a.popup, render = _a.render, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? false : _d, props = __rest(_a, ["autoOpen", "popup", "render", "closeOnEsc", "closeOnClickOutside"]);
     var _e = useState(autoOpen), showPopup = _e[0], setShowPopup = _e[1];
@@ -3747,10 +3993,10 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tabs = _a.tabs, size = _a.size, props = __rest(_a, ["tabs", "size"]);
+        var _a = this.props, tabs = _a.tabs, size = _a.size, padded = _a.padded, props = __rest(_a, ["tabs", "size", "padded"]);
         var selectedTab = this.getTab(tabs, this.state.selectedTabIndex);
         return React__default.createElement("div", __assign({}, props),
-            React__default.createElement(TabBar, { padded: this.props.padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
+            React__default.createElement(TabBar, { padded: padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
                     _this.setState({ selectedTabIndex: index });
                     var callback = tabs[index].onClick;
                     if (callback) {
@@ -4788,217 +5034,6 @@ function HeadlessTable(_a) {
 }
 var templateObject_1$B, templateObject_2$p, templateObject_3$h;
 
-var QUERY = '(prefers-reduced-motion: no-preference)';
-var isRenderingOnServer = typeof window$1 === 'undefined';
-var getInitialState = function () {
-    // For our initial server render, we won't know if the user
-    // prefers reduced motion, but it doesn't matter. This value
-    // will be overwritten on the client, before any animations
-    // occur.
-    return isRenderingOnServer ? true : !window$1.matchMedia(QUERY).matches;
-};
-var usePrefersReducedMotion = function () {
-    var _a = React__default.useState(getInitialState), prefersReducedMotion = _a[0], setPrefersReducedMotion = _a[1];
-    React__default.useEffect(function () {
-        var mediaQueryList = window$1.matchMedia(QUERY);
-        var listener = function (event) {
-            setPrefersReducedMotion(!event.matches);
-        };
-        mediaQueryList.addListener(listener);
-        return function () {
-            mediaQueryList.removeListener(listener);
-        };
-    }, []);
-    return prefersReducedMotion;
-};
-
-var useRandomInterval = function (callback, minDelay, maxDelay) {
-    var timeoutId = React__default.useRef(null);
-    var savedCallback = React__default.useRef(callback);
-    React__default.useEffect(function () {
-        savedCallback.current = callback;
-    });
-    React__default.useEffect(function () {
-        var isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number';
-        if (isEnabled) {
-            var handleTick_1 = function () {
-                var nextTickAt = random(minDelay, maxDelay);
-                timeoutId.current = setTimeout(function () {
-                    savedCallback.current();
-                    handleTick_1();
-                }, nextTickAt);
-            };
-            handleTick_1();
-        }
-        return function () {
-            if (!!timeoutId.current) {
-                clearTimeout(timeoutId.current);
-            }
-        };
-    }, [minDelay, maxDelay]);
-    var cancel = React__default.useCallback(function () {
-        if (!!timeoutId.current) {
-            clearTimeout(timeoutId.current);
-        }
-    }, []);
-    return cancel;
-};
-
-var today = new Date();
-var getDatesBetween = function (startDt, endDt) {
-    var result = [];
-    var currentDt = startDt;
-    while (currentDt <= endDt) {
-        result.push(currentDt);
-        currentDt = addDays(currentDt, 1);
-    }
-    return result;
-};
-var useCalendar = function (_a) {
-    var onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth;
-    var _b = useState(today), currentMonth = _b[0], setCurrentMonth = _b[1];
-    var _c = useState(getWeek(currentMonth)), currentWeek = _c[0], setCurrentWeek = _c[1];
-    var _d = useState(today), selectedDate = _d[0], setSelectedDate = _d[1];
-    var changeMonth = function (action) {
-        var dt = currentMonth;
-        if (action === "prev") {
-            dt = subMonths(currentMonth, 1);
-        }
-        else if (action === "next") {
-            dt = addMonths(currentMonth, 1);
-        }
-        else if (action === "reset") {
-            dt = today;
-        }
-        setCurrentMonth(dt);
-        onChangeMonth && onChangeMonth({
-            action: action,
-            date: dt,
-            month: getMonth(dt),
-            year: getYear(dt),
-        });
-    };
-    var changeWeek = function (action, value) {
-        var dt = currentMonth;
-        if (action === "prev") {
-            dt = subWeeks(currentMonth, 1);
-        }
-        else if (action === "next") {
-            dt = addWeeks(currentMonth, 1);
-        }
-        else if (action === "reset") {
-            dt = today;
-        }
-        else if (action === "custom" && value) {
-            dt = value;
-        }
-        setCurrentMonth(dt);
-        var week = getWeek(dt);
-        setCurrentWeek(week);
-        onChangeWeek && onChangeWeek({
-            action: action,
-            date: dt,
-            week: week,
-            month: getMonth(dt),
-            year: getYear(dt),
-        });
-    };
-    var changeDate = function (value) {
-        setCurrentMonth(value);
-        var week = getWeek(value);
-        setCurrentWeek(week);
-        onChangeWeek && onChangeWeek({
-            action: 'change-date',
-            date: value,
-            week: week,
-            month: getMonth(value),
-            year: getYear(value),
-        });
-    };
-    var onClickDay = function (day) {
-        if (isSameDay(day, selectedDate)) {
-            setSelectedDate(today);
-        }
-        else {
-            setSelectedDate(day);
-        }
-    };
-    // reset to today's date
-    var resetToToday = function () {
-        setSelectedDate(today);
-        changeWeek('reset');
-    };
-    var onNextWeek = function () { return changeWeek("next"); };
-    var onPrevWeek = function () { return changeWeek("prev"); };
-    var onNextMonth = function () { return changeMonth("next"); };
-    var onPrevMonth = function () { return changeMonth("prev"); };
-    return {
-        currentMonth: currentMonth,
-        currentWeek: currentWeek,
-        selectedDate: selectedDate,
-        setSelectedDate: setSelectedDate,
-        setCurrentWeek: setCurrentWeek,
-        setCurrentMonth: setCurrentMonth,
-        onClickDay: onClickDay,
-        onNextWeek: onNextWeek,
-        onPrevWeek: onPrevWeek,
-        onNextMonth: onNextMonth,
-        onPrevMonth: onPrevMonth,
-        changeWeek: changeWeek,
-        changeDate: changeDate,
-        getDatesBetween: getDatesBetween,
-        onReset: resetToToday,
-    };
-};
-
-var useWindowSize = function () {
-    var _a = useState([0, 0]), size = _a[0], setSize = _a[1]; // [width, height]
-    useEffect(function () {
-        function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
-        }
-        window.addEventListener('resize', updateSize);
-        updateSize();
-        return function () { return window.removeEventListener('resize', updateSize); };
-    }, []);
-    return size;
-};
-
-function useLongPress(callback, ms) {
-    if (callback === void 0) { callback = function () { }; }
-    if (ms === void 0) { ms = 300; }
-    var _a = useState(false), startLongPress = _a[0], setStartLongPress = _a[1];
-    useEffect(function () {
-        var timeoutId = null;
-        if (startLongPress) {
-            timeoutId = setTimeout(callback, ms);
-        }
-        else {
-            if (timeoutId !== undefined && timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        }
-        return function () {
-            if (timeoutId !== undefined && timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [callback, ms, startLongPress]);
-    var start = useCallback(function () {
-        setStartLongPress(true);
-    }, []);
-    var stop = useCallback(function () {
-        setStartLongPress(false);
-    }, []);
-    return {
-        onMouseDown: start,
-        onMouseUp: stop,
-        onMouseLeave: stop,
-        onTouchStart: start,
-        onTouchEnd: stop,
-    };
-}
-
 /*
   Code from https://www.joshwcomeau.com/react/animated-sparkles-in-react/
   Check out his site.  It's awesome
@@ -7102,5 +7137,5 @@ function SimpleWindowedTable(_a) {
 }
 var templateObject_1$V;
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes$1 as sizes, themeOptions, toggleSizes };
+export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes$1 as sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map