@commonsku/styles 1.16.9 → 1.16.12-1

package/dist/index.d.ts

@@ -139,7 +139,11 @@ declare type DropzoneTypes = {
     showDroppedFiles?: boolean;
 } & DropzoneOptions;
 declare function Dropzoned({ placeholder, accept, showDroppedFiles, ...props }: DropzoneTypes): JSX.Element;
-declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): JSX.Element;
+declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): JSX.Element;
+declare type DropzoneSimpleProps = {
+    children: React$1.ReactElement;
+} & DropzoneOptions;
+declare function DropzonedSimple({ accept, children, ...props }: DropzoneSimpleProps): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
 
 declare type TSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
@@ -2919,6 +2923,7 @@ declare type ResponsiveValue<T = string | number> = T | Array<T | null> | {
 
 declare const createMeasurementStyle: (v: string | number, keys: string[]) => {};
 declare type BaseCskuProps = {
+    forceStyles?: boolean;
     pr?: ResponsiveValue<string | number>;
     pl?: ResponsiveValue<string | number>;
     pt?: ResponsiveValue<string | number>;
@@ -3128,6 +3133,9 @@ declare function InfoIcon({ color, size, filled, pinned, altText, ...props }: In
 declare type DownloadIconProps = SVGIconProps;
 declare function DownloadIcon({ color, size, altText, ...props }: DownloadIconProps): JSX.Element;
 
+declare type UploadIconProps = SVGIconProps;
+declare function UploadIcon({ color, size, altText, ...props }: UploadIconProps): JSX.Element;
+
 declare type MarketingStatusIconProps = SVGIconProps & {
     approved?: boolean;
 };
@@ -3393,6 +3401,9 @@ declare type DoubleArrowIconProps = SVGIconProps & {
 };
 declare function DoubleArrowIcon({ color, direction, size, altText, ...props }: DoubleArrowIconProps): JSX.Element;
 
+declare type ImageIcon = SVGIconProps;
+declare function ImageIcon(props: ImageIcon): JSX.Element;
+
 declare const datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n}\n";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
@@ -3404,6 +3415,18 @@ declare type ConfirmPopupProps = {
 };
 declare const ConfirmPopup: (props: ConfirmPopupProps) => JSX.Element;
 
+declare type ConfirmAlertPopupProps = React$1.PropsWithChildren<{
+    padding?: string;
+    maxWidth: string | number;
+    title?: React$1.ReactNode;
+    disableActionButton?: boolean;
+    cancelButtonContent?: React$1.ReactNode;
+    actionButtonContent?: React$1.ReactNode;
+    onAction?: () => void;
+    onClose?: () => void;
+}>;
+declare const ConfirmAlertPopup: (props: ConfirmAlertPopupProps) => JSX.Element;
+
 declare type CalendarDayBodyProps = React$1.PropsWithChildren<{
     day: Date;
     selectedDate: Date;
@@ -3736,4 +3759,48 @@ declare const useClickOutside: <T extends HTMLElement = HTMLElement>(props: {
 declare const useFallbackRef: <T>(forwardedRef: ForwardedRef<T>) => MutableRefObject<T | null>;
 //# sourceMappingURL=useFallbackRef.d.ts.map
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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 };
+declare const toggleSizes$1: {
+    small: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        borderRadius: string;
+        height: string;
+    };
+    medium: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        borderRadius: string;
+        height: string;
+    };
+    large: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        borderRadius: string;
+        height: string;
+    };
+};
+declare type ToggleSize$1 = keyof typeof toggleSizes$1;
+declare type CommonProps = {
+    selected?: boolean;
+    stretch?: boolean;
+    size?: ToggleSize$1;
+};
+declare type ToggleSwitchProps = {
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    style?: React$1.CSSProperties;
+} & CommonProps & Omit<Omit<Omit<BaseCskuProps, 'hidden'>, 'color'>, 'style'>;
+declare type ToggleSwitchStatedProps = {
+    initialSelected?: boolean;
+    style?: React$1.CSSProperties;
+    onClick?: (value: boolean) => void;
+} & Omit<CommonProps, 'selected'> & Omit<BaseCskuProps, 'style'>;
+declare const ToggleSwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: ToggleSwitchProps) => JSX.Element;
+declare const ToggleSwitch: ({ size, initialSelected, stretch, onClick, ...props }: ToggleSwitchStatedProps) => JSX.Element;
+
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneSimpleProps, DropzoneTypes, Dropzoned, DropzonedPreviews, DropzonedSimple, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, UploadIcon, 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

@@ -360,10 +360,14 @@ var getUnit = function (measurement) {
     var matchedMeasurement = measurement.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/);
     return matchedMeasurement ? matchedMeasurement[2] : "px";
 };
+var isCalOrPercent = function (measurement) { return (measurement.endsWith('%') || measurement.includes('calc')); };
 var stripUnit = function (measurement) {
     return (typeof measurement === "number") ? measurement : parseFloat(measurement);
 };
-var parseMeasurement = function (measurement) { return stripUnit(measurement) + getUnit(measurement); };
+var parseMeasurement = function (measurement) {
+    return typeof measurement === 'string' && isCalOrPercent(measurement)
+        ? measurement : stripUnit(measurement) + getUnit(measurement);
+};
 var wait = function (time) {
     var timeoutId;
     var promise = new Promise(function (resolve) {
@@ -1140,6 +1144,13 @@ function DownloadIcon(_a) {
         React__default.createElement("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2Zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5Z", fill: color }));
 }
 
+function UploadIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Upload" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "UploadIcon" }, props),
+        React__default.createElement("title", { id: "UploadIcon" }, altText),
+        React__default.createElement("path", { d: "M18 15V18H6V15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18ZM7 9L8.41 10.41L11 7.83V16H13V7.83L15.59 10.41L17 9L12 4L7 9Z", fill: color }));
+}
+
 function MarketingStatusIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.approved, approved = _d === void 0 ? false : _d, _e = _a.altText, altText = _e === void 0 ? "Marketing not allowed" : _e, props = __rest(_a, ["color", "size", "approved", "altText"]);
     approved ? altText = "Marketing allowed" : altText = "Marketing not allowed";
@@ -2588,6 +2599,49 @@ function DoubleArrowIcon(_a) {
         React__default.createElement("path", { d: directionPaths[1], fill: color })));
 }
 
+var iconSizes$5 = {
+    tiny: {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 32 32",
+    },
+    small: {
+        width: 24,
+        height: 24,
+        viewBox: "0 0 32 32",
+    },
+    medium: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+    large: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 32 32",
+    },
+    huge: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 32 32",
+    },
+    default: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+};
+function ImageIcon(props) {
+    var _a = props.color, color = _a === void 0 ? teal.main : _a, _b = props.size, size = _b === void 0 ? "medium" : _b, _c = props.altText, altText = _c === void 0 ? "ImageIcon" : _c, rest = __rest(props, ["color", "size", "altText"]);
+    var id = uniqueId('clip0_1244_70960');
+    return (React__default.createElement(SVG, __assign({ size: size, iconSizes: iconSizes$5, "aria-labelledby": altText, fill: "none" }, rest),
+        React__default.createElement("g", { clipPath: "url(#".concat(id, ")") },
+            React__default.createElement("path", { d: "M25.3333 6.66667V25.3333H6.66667V6.66667H25.3333ZM25.3333 4H6.66667C5.2 4 4 5.2 4 6.66667V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V6.66667C28 5.2 26.8 4 25.3333 4ZM18.8533 15.8133L14.8533 20.9733L12 17.52L8 22.6667H24L18.8533 15.8133Z", fill: color })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: id },
+                React__default.createElement("rect", { width: "32", height: "32", fill: "white" })))));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2793,6 +2847,20 @@ function DropzonedPreviews(_a) {
                 ? React__default.createElement(ThumbsContainer, null, thumbs)
                 : React__default.createElement(PlaceHolder, null, placeholder))));
 }
+function DropzonedSimple(_a) {
+    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
+    var _b = useDropzone(__assign({ accept: accept }, props)), acceptedFiles = _b.acceptedFiles, getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
+    var Child = React__default.Children.only(children);
+    if (!Child) {
+        return null;
+    }
+    var ChildElem = React__default.cloneElement(Child, {
+        acceptedFiles: acceptedFiles,
+        inputProps: getInputProps(),
+        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
+    });
+    return ChildElem;
+}
 var templateObject_1$c, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1;
 
 /*
@@ -6599,7 +6667,8 @@ var parseCskuStyles = function (p) {
     });
     return __spreadArray([stylesObj, sizeStylesObj], stylesArr, true);
 };
-var Csku = styled.div(parseCskuStyles);
+var Csku = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n", "\n  ", "\n", "\n"], ["\n", "\n  ", "\n", "\n"])), function (p) { return p.forceStyles ? '&&& {' : ''; }, parseCskuStyles, function (p) { return p.forceStyles ? '}' : ''; });
+var templateObject_1$O;
 
 var Grid = styled.div(function (p) {
     var params = {
@@ -6763,8 +6832,56 @@ var ConfirmPopup = function (props) {
                 }, disabled: disableDelete }, "Delete"))));
 };
 
-var StyledDayBody = styled(Col)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"], ["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (p) { return p.selected ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.today ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.row ? "\n        border-bottom: 1px solid #eee;\n    " : ''; }, function (p) { return p.disabled ? "\n        color: #ccc;\n        pointer-events: none;\n    " : ''; });
-var templateObject_1$O;
+var ConfirmAlertPopup = function (props) {
+    var _a = props.padding, padding = _a === void 0 ? '16px' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? 555 : _b, _c = props.title, title = _c === void 0 ? '' : _c, _d = props.children, children = _d === void 0 ? 'Are you sure you want to perform this action?' : _d, _e = props.cancelButtonContent, cancelButtonContent = _e === void 0 ? 'Cancel' : _e, _f = props.actionButtonContent, actionButtonContent = _f === void 0 ? 'Delete' : _f, _g = props.disableActionButton, disableActionButton = _g === void 0 ? false : _g, onAction = props.onAction, onClose = props.onClose;
+    return (React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
+        title ? React__default.createElement(PopupTitle, null, title) : null,
+        React__default.createElement(PopupContent, null, children),
+        React__default.createElement(Row, { style: { justifyContent: 'center', marginTop: 16, } },
+            React__default.createElement(Col, { xs: true, md: 5.75, mdStyle: { marginRight: 16 } },
+                React__default.createElement(Button, { size: "medium", variant: 'secondary', onClick: function () {
+                        onClose && onClose();
+                    }, style: { width: '100%' } }, cancelButtonContent)),
+            React__default.createElement(Col, { xs: true, md: 5.75, xsStyle: { marginTop: 16 }, mdStyle: { marginTop: 0 } },
+                React__default.createElement(Button, { size: "medium", variant: disableActionButton ? 'disabled' : 'error', onClick: function () {
+                        onAction && onAction();
+                    }, disabled: disableActionButton, style: { width: '100%' } }, actionButtonContent)))));
+};
+var PopupTitle = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("h2", { style: {
+            fontFamily: 'var(--font-family-bold)',
+            fontSize: fontStyles.h2.fontSize,
+            lineHeight: fontStyles.h2.lineHeight,
+            color: 'var(--color-neutrals-90)',
+            paddingBottom: 16,
+            margin: 0,
+        } }, children));
+};
+var PopupContent = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { style: {
+            background: colors.errors[10],
+            color: colors.errors.main,
+            padding: 16,
+        } },
+        React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
+            React__default.createElement("div", { style: {
+                    paddingRight: 16,
+                    verticalAlign: 'middle',
+                    alignSelf: 'center',
+                } },
+                React__default.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
+            React__default.createElement("div", { style: {
+                    fontFamily: 'var(--font-family-regular)',
+                    fontSize: fontStyles.p.large.fontSize,
+                    lineHeight: fontStyles.p.medium.lineHeight,
+                    color: colors.errors.main,
+                } }, children))));
+};
+
+var StyledDayBody = styled(Col)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"], ["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (p) { return p.selected ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.today ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.row ? "\n        border-bottom: 1px solid #eee;\n    " : ''; }, function (p) { return p.disabled ? "\n        color: #ccc;\n        pointer-events: none;\n    " : ''; });
+var templateObject_1$P;
 
 var CalendarDayBody = function (_a) {
     var day = _a.day, selectedDate = _a.selectedDate, onClick = _a.onClick, children = _a.children, weekend = _a.weekend, props = __rest(_a, ["day", "selectedDate", "onClick", "children", "weekend"]);
@@ -6779,8 +6896,8 @@ var CalendarDayBody = function (_a) {
     return (React__default.createElement(StyledDayBody, __assign({ padded: true, totalCols: weekend ? 7 : 5, xs: 1, selected: isSelected, today: isToday, onClick: onClick, className: classNames }, props), children || React__default.createElement("span", { style: { padding: 10, } }, formattedDay)));
 };
 
-var DaysBodyWrapper = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"], ["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"])));
-var templateObject_1$P;
+var DaysBodyWrapper = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"], ["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"])));
+var templateObject_1$Q;
 
 var CalendarDaysBody = function (_a) {
     var _b = _a.days, days = _b === void 0 ? [] : _b, currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, onClickDay = _a.onClickDay, components = _a.components, _c = _a.dayBodyProps, dayBodyProps = _c === void 0 ? {} : _c, _d = _a.weekend, weekend = _d === void 0 ? true : _d, props = __rest(_a, ["days", "currentMonth", "selectedDate", "onClickDay", "components", "dayBodyProps", "weekend"]);
@@ -6792,12 +6909,12 @@ var CalendarDaysBody = function (_a) {
         }))));
 };
 
-var DaysHeaderWrapper = styled(Row)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"], ["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"])));
-var templateObject_1$Q;
-
-var StyledDayText = styled(Text)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: ".concat(colors.cta, ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    ") : ''; });
+var DaysHeaderWrapper = styled(Row)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"], ["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"])));
 var templateObject_1$R;
 
+var StyledDayText = styled(Text)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: ".concat(colors.cta, ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    ") : ''; });
+var templateObject_1$S;
+
 var CalendarDaysHeader = function (_a) {
     var currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, weekend = _a.weekend;
     var startDate = startOfWeek(currentMonth, { weekStartsOn: 1 });
@@ -6811,12 +6928,12 @@ var CalendarDaysHeader = function (_a) {
     })));
 };
 
-var CalendarWrapper = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"])));
-var templateObject_1$S;
-
-var HeaderWrapper = styled(Row)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"], ["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"])));
+var CalendarWrapper = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"])));
 var templateObject_1$T;
 
+var HeaderWrapper = styled(Row)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"], ["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"])));
+var templateObject_1$U;
+
 var DefaultCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek;
     return (React__default.createElement(HeaderWrapper, { middle: true },
@@ -6848,7 +6965,7 @@ var TasksCalendarDayBody = function (_a) {
         React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
 };
 
-var WeekNav = styled(Text)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  display: inline-block;\n  padding: 0;\n"], ["\n  display: inline-block;\n  padding: 0;\n"])));
+var WeekNav = styled(Text)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  display: inline-block;\n  padding: 0;\n"], ["\n  display: inline-block;\n  padding: 0;\n"])));
 var CalendarIconDatePicker = React__default.forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick;
     return (React__default.createElement("span", { ref: ref, onClick: onClick },
@@ -6921,7 +7038,7 @@ var TasksCalendarHeader = function (_a) {
                 } }, "+ Add Task")
             : null)));
 };
-var templateObject_1$U;
+var templateObject_1$V;
 
 var TasksCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
@@ -7273,7 +7390,7 @@ var scrollbarWidth = function () {
     return scrollbarWidth;
 };
 
-var SimpleWindowedTableStyles = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  ", "\n\n  .header.tr, .table-footer.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  /* set hover styles */\n  ", "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\n    ", "\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  ", "\n\n  .header.tr, .table-footer.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  /* set hover styles */\n  ", "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\n    ", "\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, function (p) { return p.bordered ?
+var SimpleWindowedTableStyles = styled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  ", "\n\n  .header.tr, .table-footer.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  /* set hover styles */\n  ", "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\n    ", "\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  ", "\n\n  .header.tr, .table-footer.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  /* set hover styles */\n  ", "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\n    ", "\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, function (p) { return p.bordered ?
     "border: ".concat(typeof p.bordered === 'string'
         ? p.bordered
         : "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
@@ -7363,7 +7480,64 @@ function SimpleWindowedTable(_a) {
         React__default.createElement("div", __assign({}, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.createElement(NoRowsFound, null) : React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "table-list-rows", outerRef: rowsRef, onScroll: onScroll, useIsScrolling: true }, RenderRow)),
         !hideFooter ? React__default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null));
 }
-var templateObject_1$V;
+var templateObject_1$W;
+
+var toggleSizes$1 = {
+    small: {
+        'font-family': fontStyles.button.small.fontFamily,
+        'font-size': fontStyles.button.small.fontSize,
+        'line-height': fontStyles.button.small.lineHeight,
+        padding: '8px 12px',
+        borderRadius: '4px',
+        height: '15px',
+    },
+    medium: {
+        'font-family': fontStyles.button.medium.fontFamily,
+        'font-size': fontStyles.button.medium.fontSize,
+        'line-height': fontStyles.button.medium.lineHeight,
+        padding: '8px 16px',
+        borderRadius: '4px',
+        height: '20px',
+    },
+    large: {
+        'font-family': fontStyles.button.large.fontFamily,
+        'font-size': fontStyles.button.large.fontSize,
+        'line-height': fontStyles.button.large.lineHeight,
+        padding: '12px 24px',
+        borderRadius: '4px',
+        height: '35px',
+    }
+};
+var createAnimationLeftStyle = function (p) {
+    if (p.stretch) {
+        return "calc(100% * 1.5px)";
+    }
+    return "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 1.5, "px");
+};
+var ContainerStyled = styled(Csku)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  &&& {\n    position: relative;\n    background: ", ";\n    width: ", ";\n    padding: 0.35rem;\n    border-radius: 1.8rem;\n    cursor: pointer;\n    transition: background .3s;\n\n    @keyframes switch-slide-to-right {\n      from { left: 0; }\n      to {\n        left: ", ";\n      }\n    }\n  \n    @keyframes switch-slide-to-left {\n      from {\n        left: ", ";\n      }\n      to { left: 0; }\n    }\n  }"], ["\n  &&& {\n    position: relative;\n    background: ", ";\n    width: ", ";\n    padding: 0.35rem;\n    border-radius: 1.8rem;\n    cursor: pointer;\n    transition: background .3s;\n\n    @keyframes switch-slide-to-right {\n      from { left: 0; }\n      to {\n        left: ", ";\n      }\n    }\n  \n    @keyframes switch-slide-to-left {\n      from {\n        left: ", ";\n      }\n      to { left: 0; }\n    }\n  }"])), function (p) { return p.selected
+    ? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
+    : getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
+    ? '100%'
+    : "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
+var ToggleSwitchDotStyled = styled(Csku)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n &&& {\n  position: relative;\n  background: #FFFFFF;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n\n  animation: ", ";\n }\n"], ["\n &&& {\n  position: relative;\n  background: #FFFFFF;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n\n  animation: ", ";\n }\n"])), function (p) { return toggleSizes$1[p.size || 'medium'].height; }, function (p) { return toggleSizes$1[p.size || 'medium'].height; }, function (p) { return p.selected
+    ? 'switch-slide-to-right .3s forwards 1'
+    : 'switch-slide-to-left .3s forwards 1'; });
+var ToggleSwitchStyled = function (_a) {
+    var onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["onClick", "size", "selected", "stretch", "style"]);
+    return (React__default.createElement(ContainerStyled, __assign({ selected: selected, stretch: stretch, size: size, onClick: onClick, style: style }, props),
+        React__default.createElement(ToggleSwitchDotStyled, { selected: selected, stretch: stretch, size: size })));
+};
+var ToggleSwitch = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.initialSelected, initialSelected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["size", "initialSelected", "stretch", "onClick"]);
+    var _e = useState(initialSelected), state = _e[0], setState = _e[1];
+    var handleToggle = function () {
+        var value = !state;
+        setState(value);
+        onClick && onClick(value);
+    };
+    return (React__default.createElement(ToggleSwitchStyled, __assign({}, props, { selected: state, stretch: stretch, size: size, onClick: handleToggle })));
+};
+var templateObject_1$X, templateObject_2$z;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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 };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, DropzonedSimple, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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, ToggleSwitch, ToggleSwitchStyled, TrashIcon, UploadIcon, 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