@commonsku/styles 1.17.1 → 1.17.4

package/dist/index.d.ts

@@ -2955,9 +2955,15 @@ declare const VirtualTableStyles: styled_components.StyledComponent<"div", any,
     hoverRowBg?: string | boolean | undefined;
     selectedRowIndex?: number | undefined;
     selectedRowStyle?: boolean | CSSObject | undefined;
+    scrollDecoration?: boolean | undefined;
 }, never>;
 //# sourceMappingURL=VirtualTableStyles.d.ts.map
 
+type SelectionTableProps = VirtualTableProps & {
+    onSelectRow?: (row?: object, index?: number) => void;
+};
+declare const SelectionTable: (props: SelectionTableProps) => React__default.JSX.Element;
+
 type ResponsiveValue<T = string | number> = T | Array<T | null> | {
     xs?: T;
     sm?: T;
@@ -3479,7 +3485,7 @@ type SlideInIconProps = SVGIconProps & {
 };
 declare function SlideInIcon({ color, size, hover, filled, altText, ...props }: SlideInIconProps): React__default.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__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
+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__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 140px;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 110px;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
 type ConfirmPopupProps = {
@@ -3497,6 +3503,8 @@ type ConfirmAlertPopupProps = React__default.PropsWithChildren<{
     disableActionButton?: boolean;
     cancelButtonContent?: React__default.ReactNode;
     actionButtonContent?: React__default.ReactNode;
+    height?: string;
+    width?: string;
     onAction?: () => void;
     onClose?: () => void;
 }>;
@@ -3894,4 +3902,4 @@ declare const Dropzone: React__default.ForwardRefExoticComponent<Pick<React__def
     useDropzoneProps?: boolean | undefined;
 } & React__default.RefAttributes<DropzoneRef>>;
 
-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, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, 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, 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, MagicEraserIcon, MagicIcon, 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, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+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, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, 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, 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, MagicEraserIcon, MagicIcon, 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, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };

package/dist/index.mjs

@@ -1190,7 +1190,7 @@ function GearIcon(_a) {
         React.createElement("path", { d: renderPath, fill: color }));
 }
 
-var 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__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
+var 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__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 140px;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 110px;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
 
 var parseColorVars = function (colors, prefix) {
     if (prefix === void 0) { prefix = ''; }
@@ -3519,7 +3519,7 @@ var LabeledInput = React.forwardRef(function (_a, ref) {
         React.createElement(Input, __assign({ ref: ref, name: name, required: required }, props))));
 });
 var LabeledIconInput = React.forwardRef(function (_a, ref) {
-    var label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, Icon = _a.Icon, noMargin = _a.noMargin, error = _a.error, disabled = _a.disabled, onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'left' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? '#fff' : _d, _e = _a.iconLabelStyles, iconLabelStyles = _e === void 0 ? {} : _e, _f = _a.containerStyle, containerStyle = _f === void 0 ? {} : _f, props = __rest(_a, ["label", "name", "value", "defaultValue", "placeholder", "required", "labelOnTop", "Icon", "noMargin", "error", "disabled", "onFocus", "onChange", "onBlur", "iconPosition", "iconColor", "iconLabelStyles", "containerStyle"]);
+    var label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, readOnly = _a.readOnly, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, Icon = _a.Icon, noMargin = _a.noMargin, error = _a.error, disabled = _a.disabled, onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'left' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? '#fff' : _d, _e = _a.iconLabelStyles, iconLabelStyles = _e === void 0 ? {} : _e, _f = _a.containerStyle, containerStyle = _f === void 0 ? {} : _f, props = __rest(_a, ["label", "name", "value", "defaultValue", "placeholder", "readOnly", "required", "labelOnTop", "Icon", "noMargin", "error", "disabled", "onFocus", "onChange", "onBlur", "iconPosition", "iconColor", "iconLabelStyles", "containerStyle"]);
     var containerRef = useRef(null);
     var _g = useState(false), isActive = _g[0], setIsActive = _g[1];
     var _h = useState(false), isHovering = _h[0], setIsHovering = _h[1];
@@ -3591,7 +3591,7 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
                 setIsActive(!isActive);
             }, style: __assign(__assign(__assign(__assign({}, activeStyles), errorStyles), disabledStyles), (props.style || {})), onMouseOver: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }),
             iconPosition !== 'right' ? React.createElement(InputIconLabel, { style: __assign({ marginBottom: 0 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering }, NewIcon) : null,
-            React.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
+            React.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
             iconPosition === 'right' ? React.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6, }, isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
 });
 var CheckboxLabel = styled.label(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
@@ -3618,8 +3618,8 @@ var LabeledRadio = function (_a) {
         React.createElement(Radio, __assign({ ref: radio, name: name, type: "radio", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
 };
 var LabeledRadioInButton = function (_a) {
-    var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled; _a.labelStyle; _a.radioIconStyle; var flexGrow = _a.flexGrow, onChange = _a.onChange; __rest(_a, ["label", "name", "checked", "disabled", "labelStyle", "radioIconStyle", "flexGrow", "onChange"]);
-    return (React.createElement(LabeledRadio, { label: label, checked: checked, disabled: disabled, onChange: onChange, labelStyle: {
+    var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly, defaultValue = _a.defaultValue; _a.labelStyle; _a.radioIconStyle; var flexGrow = _a.flexGrow, onChange = _a.onChange; __rest(_a, ["label", "name", "checked", "disabled", "readOnly", "defaultValue", "labelStyle", "radioIconStyle", "flexGrow", "onChange"]);
+    return (React.createElement(LabeledRadio, { label: label, checked: checked, disabled: disabled, onChange: onChange, readOnly: readOnly, defaultValue: defaultValue, labelStyle: {
             padding: "13px 40px",
             backgroundColor: disabled ? neutrals['40'] : checked ? colors.white : teal['20'],
             border: disabled ? "solid 3px ".concat(neutrals['40']) : checked ? "solid 3px ".concat(teal.main) : "solid 3px ".concat(teal['20']),
@@ -4874,21 +4874,20 @@ var CalendarTask = React.forwardRef(function (_a, ref) {
             hideCheckbox && Icon ? Icon : null));
     }, [date, title, hideCheckbox, Icon]);
     return (React.createElement(StyledCalendarTaskWrapper, __assign({ backgroundColor: colorType === 'light-red' ? '#ffebf2' : '#01d37417' }, props, { style: __assign(__assign({}, (props.style || {})), (checked ? { filter: 'saturate(0)' } : {})) }),
-        !hideCheckbox ? React.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: checkboxStyles, hoverByLabel: false, labelStyle: { width: '100%', paddingLeft: 0, paddingRight: 0, marginRight: 0, marginLeft: 0, margin: 0, }, label: RenderTaskLabel(), onClick: function (e) {
+        !hideCheckbox ? React.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: checkboxStyles, hoverByLabel: false, labelStyle: { width: '100%', paddingLeft: 0, paddingRight: 0, marginRight: 0, marginLeft: 0, margin: 0, }, label: React.createElement(RenderTaskLabel, null), onClick: function (e) {
                 e && e.preventDefault();
                 e && e.stopPropagation();
             }, onChange: function (e) {
                 e && e.preventDefault();
                 e && e.stopPropagation();
-                setChecked(function (s) {
-                    onClickCheckbox && onClickCheckbox(!s);
-                    return !s;
-                });
+                var newValue = !checked;
+                setChecked(newValue);
+                onClickCheckbox === null || onClickCheckbox === void 0 ? void 0 : onClickCheckbox(newValue);
             }, style: {
                 padding: 0,
                 margin: 0,
                 marginLeft: 20,
-            } }) : RenderTaskLabel(),
+            } }) : React.createElement(RenderTaskLabel, null),
         React.createElement(StyledCalendarTaskBody, __assign({}, (isDescriptionHtml && typeof description === 'string'
             ? { dangerouslySetInnerHTML: { __html: description } }
             : { children: description }))),
@@ -6604,6 +6603,8 @@ var VirtualTable = function (props) {
     var _m = useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useFlexLayout, useSortBy, useExpanded), getTableProps = _m.getTableProps, getTableBodyProps = _m.getTableBodyProps, headerGroups = _m.headerGroups, footerGroups = _m.footerGroups, totalColumnsWidth = _m.totalColumnsWidth, prepareRow = _m.prepareRow, toggleAllRowsExpanded = _m.toggleAllRowsExpanded, tableData = __rest(_m, ["getTableProps", "getTableBodyProps", "headerGroups", "footerGroups", "totalColumnsWidth", "prepareRow", "toggleAllRowsExpanded"]);
     var rows = useMemo(function () { return tableData.rows; }, [tableData.rows]);
     var windowSize = useWindowSize();
+    var _o = useState(false), scrolledToTop = _o[0], setScrolledToTop = _o[1];
+    var _p = useState(false), scrolledToBottom = _p[0], setScrolledToBottom = _p[1];
     var headerRef = useRef(null);
     var footerRef = useRef(null);
     var rowsRef = useRef(null);
@@ -6692,17 +6693,35 @@ var VirtualTable = function (props) {
         ], (headerGroupProps.className || "").split(' '), true), (headerGroup.className || "").split(' '), true).filter(function (v) { return v; }).join(' ');
         return __assign(__assign({}, headerGroupProps), { style: headerStyles, className: headerClassNames });
     };
+    var handleScroll = useCallback(function (props) {
+        if (onScroll != null) {
+            onScroll(props);
+        }
+        var rows = rowsRef.current;
+        if (rows != null) {
+            setScrolledToTop(rows.scrollTop === 0);
+            setScrolledToBottom(rows.scrollTop === rows.scrollHeight - rows.offsetHeight);
+        }
+    }, [onScroll]);
     return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
         React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ''), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: 'none' } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth, } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
             column.render("Header"),
-            React.createElement("span", null, column.isSorted ? React.createElement(FilledChevronIcon, { direction: sortDirection(column), size: "medium", style: { verticalAlign: 'middle' } }) : null))); }))); })),
+            React.createElement("span", null, column.canSort &&
+                React.createElement(FilledChevronIcon, { direction: column.isSorted ? sortDirection(column) : 'updown', size: "medium", style: { verticalAlign: 'middle' } })))); }))); })),
         React.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React.createElement(NoRowsFound, null) :
-            React.createElement(VariableSizeList, { useIsScrolling: true, className: "table-list-rows", height: height, itemCount: rows.length, itemSize: function (i) {
-                    if (itemSize) {
-                        return itemSize({ row: rows[i], index: i });
-                    }
-                    return (rows[i] && rows[i].isExpanded ? 300 : 50) + gutterSize;
-                }, width: tableWidth, onScroll: onScroll, ref: listRef, outerRef: rowsRef }, RenderRow)),
+            React.createElement("div", { className: "scroll-container" },
+                !scrolledToTop &&
+                    React.createElement("div", { className: "scroll-decoration-top" },
+                        React.createElement(DoubleArrowIcon, { direction: "up" })),
+                React.createElement(VariableSizeList, { useIsScrolling: true, className: "table-list-rows", height: height, itemCount: rows.length, itemSize: function (i) {
+                        if (itemSize) {
+                            return itemSize({ row: rows[i], index: i });
+                        }
+                        return (rows[i] && rows[i].isExpanded ? 300 : 50) + gutterSize;
+                    }, width: tableWidth, onScroll: handleScroll, ref: listRef, outerRef: rowsRef }, RenderRow),
+                !scrolledToBottom &&
+                    React.createElement("div", { className: "scroll-decoration-bottom" },
+                        React.createElement(DoubleArrowIcon, { direction: "down" })))),
         !hideFooter ? React.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null,
         TableFooter ? React.createElement(TableFooter, __assign({}, customTableFooterProps)) : null));
 };
@@ -6716,9 +6735,57 @@ function sortDirection(col) {
     return "updown";
 }
 
-var VirtualTableStyles = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\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 ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; });
+var VirtualTableStyles = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}\n\n.scroll-container {\n  position: relative;\n}\n\n.scroll-decoration-top, .scroll-decoration-bottom {\n", "\n}\n\n.scroll-decoration-top {\n  background: linear-gradient(180deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  top: 0;\n}\n\n.scroll-decoration-bottom {\n  background: linear-gradient(0deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  bottom: 0;\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}\n\n.scroll-container {\n  position: relative;\n}\n\n.scroll-decoration-top, .scroll-decoration-bottom {\n", "\n}\n\n.scroll-decoration-top {\n  background: linear-gradient(180deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  top: 0;\n}\n\n.scroll-decoration-bottom {\n  background: linear-gradient(0deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  bottom: 0;\n}"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, function (p) { return p.bordered ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; }, function (p) { return p.scrollDecoration ? "\n  position: absolute;\n  height: 48px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000000000;\n  pointer-events: none;\n" : "\n  display: none;\n"; });
 var templateObject_1$a;
 
+var SelectionTable = function (props) {
+    var columns = props.columns, onSelectRow = props.onSelectRow;
+    var _a = useState(props.data.map(function (row) { return (__assign({ selected: false }, row)); })), data = _a[0], setData = _a[1];
+    var selectionState = useMemo(function () {
+        return !data.some(function (row) { return row.selected === false; })
+            ? 'all'
+            : data.some(function (row) { return row.selected === true; })
+                ? 'indeterminate'
+                : 'none';
+    }, [data]);
+    var handleSelectHeader = useCallback(function () {
+        switch (selectionState) {
+            case 'none':
+                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: true })); }));
+                break;
+            case 'all':
+            case 'indeterminate':
+                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: false })); }));
+                break;
+        }
+    }, [data, selectionState]);
+    var handleSelectRow = useCallback(function (rowIndex) {
+        setData(function (prev) { return prev.map(function (row, index) {
+            if (rowIndex !== index)
+                return row;
+            if (onSelectRow != null) {
+                onSelectRow(row, rowIndex);
+            }
+            return __assign(__assign({}, row), { selected: rowIndex === index
+                    ? !row.selected
+                    : row.selected });
+        }); });
+    }, [onSelectRow]);
+    var selectionHeader = useMemo(function () { return (React.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'indeterminate', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
+    var selectionColumn = useMemo(function () { return ({
+        Header: selectionHeader,
+        accessor: 'selected',
+        Cell: function (cellObj) {
+            return (React.createElement(LabeledCheckbox, { label: "", checked: cellObj.row.original.selected, onChange: function () { return handleSelectRow(cellObj.row.index); } }));
+        },
+        sticky: 'left',
+        noDrag: true,
+        width: 40,
+        disableSortBy: true,
+    }); }, [handleSelectRow, selectionHeader]);
+    return (React.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
+};
+
 var psuedoSelectors = {
     __after: '&:after',
     __before: '&:before',
@@ -6998,8 +7065,8 @@ var ConfirmPopup = function (props) {
 };
 
 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.createElement(Popup, { width: 'auto', height: 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
+    var _a = props.padding, padding = _a === void 0 ? '16px' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? 555 : _b, _c = props.height, height = _c === void 0 ? 'auto' : _c, _d = props.width, width = _d === void 0 ? 'auto' : _d, _e = props.title, title = _e === void 0 ? '' : _e, _f = props.children, children = _f === void 0 ? 'Are you sure you want to perform this action?' : _f, _g = props.cancelButtonContent, cancelButtonContent = _g === void 0 ? 'Cancel' : _g, _h = props.actionButtonContent, actionButtonContent = _h === void 0 ? 'Delete' : _h, _j = props.disableActionButton, disableActionButton = _j === void 0 ? false : _j, onAction = props.onAction, onClose = props.onClose;
+    return (React.createElement(Popup, { width: width !== null && width !== void 0 ? width : 'auto', height: height !== null && height !== void 0 ? height : 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
         title ? React.createElement(PopupTitle, null, title) : null,
         React.createElement(PopupContent, null, children),
         React.createElement(Row, { style: { justifyContent: 'center', marginTop: 16, } },
@@ -7364,7 +7431,7 @@ var DraggableTaskBody = function (_a) {
 };
 
 var DroppableDays = function (_a) {
-    var days = _a.days, selectedDate = _a.selectedDate, onUpdateTask = _a.onUpdateTask, onClickDay = _a.onClickDay, onClickTask = _a.onClickTask, weekend = _a.weekend, props = __rest(_a, ["days", "selectedDate", "onUpdateTask", "onClickDay", "onClickTask", "weekend"]);
+    var days = _a.days, weekend = _a.weekend, selectedDate = _a.selectedDate, onUpdateTask = _a.onUpdateTask, onClickDay = _a.onClickDay, onClickTask = _a.onClickTask, props = __rest(_a, ["days", "weekend", "selectedDate", "onUpdateTask", "onClickDay", "onClickTask"]);
     return (React.createElement(DaysBodyWrapper, __assign({ className: "days-body-wrapper" }, props),
         React.createElement(Row, { className: "day-body-wrapper-row" }, Object.entries(days).map(function (_a, i) {
             var __id__ = _a[0], d = _a[1];
@@ -7373,9 +7440,11 @@ var DroppableDays = function (_a) {
                     React.createElement(Row, null,
                         React.createElement(Droppable, { droppableId: __id__, key: __id__ }, function (provided, snapshot) { return (React.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot)),
                             provided.placeholder,
-                            d.tasks.map(function (t, j) { return (React.createElement(DraggableTaskBody, { key: t.__id__, index: j, task: t, onClickTask: onClickTask, onUpdateTask: onUpdateTask ? function (newData, otherData) {
-                                    onUpdateTask(newData, __assign(__assign({}, otherData), { day__id: __id__, task__id: t.__id__ }));
-                                } : undefined })); }))); }))) : ""));
+                            d.tasks.map(function (t, j) { return (React.createElement(DraggableTaskBody, { key: t.__id__, index: j, task: t, onClickTask: onClickTask, onUpdateTask: function (newData, otherData) {
+                                    if (typeof onUpdateTask !== 'undefined') {
+                                        onUpdateTask(newData, __assign(__assign({}, otherData), { day__id: __id__, task__id: t.__id__ }));
+                                    }
+                                } })); }))); }))) : ""));
         }))));
 };
 
@@ -7516,32 +7585,26 @@ var DraggableTasksCalendar = function (_a) {
                         if (!day__id) {
                             return;
                         }
-                        _.flowRight(function () {
-                            onUpdateTask(newData, otherData);
-                        }, function () {
-                            setState(function (s) {
-                                var _a;
-                                return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArray(__spreadArray(__spreadArray([], s.days[day__id].tasks.slice(0, otherData.index), true), [
-                                            __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
-                                        ], false), s.days[day__id].tasks.slice(otherData.index + 1), true) }), _a)) });
-                            });
-                        })();
-                    } })),
-            showFooterTasks ? React.createElement(DroppableFooter, __assign({ tasks: state.footerTasks, onClickTask: onClickTask, onUpdateTask: function (newData, _a) {
-                    var day__id = _a.day__id; _a.task__id; var otherData = __rest(_a, ["day__id", "task__id"]);
-                    _.flowRight(function () {
                         onUpdateTask(newData, otherData);
-                    }, function () {
-                        if (!day__id) {
-                            return;
-                        }
                         setState(function (s) {
                             var _a;
                             return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArray(__spreadArray(__spreadArray([], s.days[day__id].tasks.slice(0, otherData.index), true), [
                                         __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
                                     ], false), s.days[day__id].tasks.slice(otherData.index + 1), true) }), _a)) });
                         });
-                    })();
+                    } })),
+            showFooterTasks ? React.createElement(DroppableFooter, __assign({ tasks: state.footerTasks, onClickTask: onClickTask, onUpdateTask: function (newData, _a) {
+                    var day__id = _a.day__id; _a.task__id; var otherData = __rest(_a, ["day__id", "task__id"]);
+                    onUpdateTask(newData, otherData);
+                    if (!day__id) {
+                        return;
+                    }
+                    setState(function (s) {
+                        var _a;
+                        return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArray(__spreadArray(__spreadArray([], s.days[day__id].tasks.slice(0, otherData.index), true), [
+                                    __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
+                                ], false), s.days[day__id].tasks.slice(otherData.index + 1), true) }), _a)) });
+                    });
                 } }, headerProps)) : null)));
 };
 
@@ -7748,5 +7811,5 @@ var Dropzone = React.forwardRef(function (_a, ref) {
             React.createElement(RenderChild, { parseProps: parseChildProps }, children))));
 });
 
-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, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, 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, 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, MagicEraserIcon, MagicIcon, 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, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as 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, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, 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, 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, MagicEraserIcon, MagicIcon, 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, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.mjs.map