@commonsku/styles 1.17.19 → 1.17.21

package/dist/index.d.ts

@@ -3039,6 +3039,13 @@ declare const DateRangePicker: React__default.ForwardRefExoticComponent<Omit<Dat
     presets?: DateRangePreset[] | undefined;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
+interface DateRangeInputProps extends Omit<InputProps, 'onChange'> {
+    isClearable: boolean;
+    selected: DateRange;
+    dateFormat: string;
+    onInputSelect: () => void;
+}
+declare const DateRangeInput: ({ value, error, noMargin, onClick, isClearable, selected, dateFormat, onInputSelect, ...props }: DateRangeInputProps) => React__default.JSX.Element;
 interface DateRangeDropdownProps extends DateRangePickerProps {
     dateText?: string;
 }
@@ -3619,7 +3626,7 @@ type CommentBubbleIconProps = {
 } & SVGIconProps;
 declare function CommentBubbleIcon({ color, size, altText, number, numberStyle, ...props }: CommentBubbleIconProps): React__default.JSX.Element;
 
-declare const datepickerStyles = "\n.react-datepicker {\n  font-family: \"skufont-demibold\", sans-serif;\n  color: var(--color-neutrals-dark);\n}\n\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-radius: 3px;\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  /* For date ranges */\n  &.daterangepicker {\n    .react-datepicker__day--range-start,\n    .react-datepicker__day--range-end,\n    .react-datepicker__day:hover\n    {\n      background-color: var(--color-primary1-60);\n      color: #fff;\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--in-selecting-range,\n      .react-datepicker__day--weekend,\n      .react-datepicker__day--selected\n    )\n    {\n      color: var(--color-neutrals-dark);\n    }\n\n    .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n      .react-datepicker__day--selected,\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      color: var(--color-errors-main);\n    }\n\n    .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n      &.react-datepicker__day:not(\n        .react-datepicker__day--outside-month,\n        .react-datepicker__day--weekend,\n      ) {\n        color: var(--color-neutrals-90);\n      }\n      &.react-datepicker__day--outside-month {\n        color: var(--color-neutrals-70);\n      }\n      &.react-datepicker__day--weekend {\n        color: var(--color-errors-main);\n      }\n    }\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    color: var(--color-neutrals-dark);\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  {\n    outline: none;\n    color: var(--color-neutrals-dark);\n  }\n\n  .react-datepicker__day-name {\n    color: var(--color-neutrals-dark);\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__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__day--keyboard-selected {\n    background-color: inherit;\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-icon {\n    &.react-datepicker__navigation-icon--next::before {\n      top: 2px;\n      left: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\n    }\n\n    &.react-datepicker__navigation-icon--previous::before {\n      top: 2px;\n      right: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\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";
+declare const datepickerStyles = "\n.react-datepicker {\n  font-family: \"skufont-demibold\", sans-serif;\n  color: var(--color-neutrals-dark);\n}\n\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-radius: 3px;\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  /* For date ranges */\n  &.daterangepicker {\n    .react-datepicker__day--range-start,\n    .react-datepicker__day--range-end,\n    .react-datepicker__day:hover\n    {\n      background-color: var(--color-primary1-60);\n      color: #fff;\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--in-selecting-range,\n      .react-datepicker__day--weekend,\n      .react-datepicker__day--selected\n    )\n    {\n      color: var(--color-neutrals-dark);\n    }\n\n    .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n      .react-datepicker__day--selected,\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      color: var(--color-errors-main);\n    }\n\n    .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n      &.react-datepicker__day:not(\n        .react-datepicker__day--outside-month,\n        .react-datepicker__day--weekend,\n      ) {\n        color: var(--color-neutrals-90);\n      }\n      &.react-datepicker__day--outside-month {\n        color: var(--color-neutrals-70);\n      }\n      &.react-datepicker__day--weekend {\n        color: var(--color-errors-main);\n      }\n    }\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    color: var(--color-neutrals-dark);\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  {\n    outline: none;\n    color: var(--color-neutrals-dark);\n  }\n\n  .react-datepicker__day-name {\n    color: var(--color-neutrals-dark);\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__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__day--keyboard-selected {\n    background-color: inherit;\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-icon {\n    &.react-datepicker__navigation-icon--next::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      left: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\n    }\n\n    &.react-datepicker__navigation-icon--previous::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      right: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\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 = {
@@ -4039,4 +4046,4 @@ declare const Dropzone: React__default.ForwardRefExoticComponent<Pick<React__def
 declare const Tooltip: styled_components.StyledComponent<({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant, place, offset, wrapper, children, events, openOnClick, positionStrategy, middlewares, delayShow, delayHide, float, hidden, noArrow, clickable, closeOnEsc, closeOnScroll, closeOnResize, style, position, isOpen, disableStyleInjection, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }: react_tooltip.ITooltip) => React$1.JSX.Element, any, {}, never>;
 //# sourceMappingURL=Tooltip.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, 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRangeDropdown, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, 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, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, 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, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, 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

@@ -1204,7 +1204,7 @@ function GearIcon(_a) {
         React.createElement("path", { d: renderPath, fill: color }));
 }
 
-var datepickerStyles = "\n.react-datepicker {\n  font-family: \"skufont-demibold\", sans-serif;\n  color: var(--color-neutrals-dark);\n}\n\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-radius: 3px;\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  /* For date ranges */\n  &.daterangepicker {\n    .react-datepicker__day--range-start,\n    .react-datepicker__day--range-end,\n    .react-datepicker__day:hover\n    {\n      background-color: var(--color-primary1-60);\n      color: #fff;\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--in-selecting-range,\n      .react-datepicker__day--weekend,\n      .react-datepicker__day--selected\n    )\n    {\n      color: var(--color-neutrals-dark);\n    }\n\n    .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n      .react-datepicker__day--selected,\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      color: var(--color-errors-main);\n    }\n\n    .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n      &.react-datepicker__day:not(\n        .react-datepicker__day--outside-month,\n        .react-datepicker__day--weekend,\n      ) {\n        color: var(--color-neutrals-90);\n      }\n      &.react-datepicker__day--outside-month {\n        color: var(--color-neutrals-70);\n      }\n      &.react-datepicker__day--weekend {\n        color: var(--color-errors-main);\n      }\n    }\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    color: var(--color-neutrals-dark);\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  {\n    outline: none;\n    color: var(--color-neutrals-dark);\n  }\n\n  .react-datepicker__day-name {\n    color: var(--color-neutrals-dark);\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__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__day--keyboard-selected {\n    background-color: inherit;\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-icon {\n    &.react-datepicker__navigation-icon--next::before {\n      top: 2px;\n      left: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\n    }\n\n    &.react-datepicker__navigation-icon--previous::before {\n      top: 2px;\n      right: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\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 datepickerStyles = "\n.react-datepicker {\n  font-family: \"skufont-demibold\", sans-serif;\n  color: var(--color-neutrals-dark);\n}\n\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-radius: 3px;\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  /* For date ranges */\n  &.daterangepicker {\n    .react-datepicker__day--range-start,\n    .react-datepicker__day--range-end,\n    .react-datepicker__day:hover\n    {\n      background-color: var(--color-primary1-60);\n      color: #fff;\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--in-selecting-range,\n      .react-datepicker__day--weekend,\n      .react-datepicker__day--selected\n    )\n    {\n      color: var(--color-neutrals-dark);\n    }\n\n    .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n      .react-datepicker__day--selected,\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      color: var(--color-errors-main);\n    }\n\n    .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n      &.react-datepicker__day:not(\n        .react-datepicker__day--outside-month,\n        .react-datepicker__day--weekend,\n      ) {\n        color: var(--color-neutrals-90);\n      }\n      &.react-datepicker__day--outside-month {\n        color: var(--color-neutrals-70);\n      }\n      &.react-datepicker__day--weekend {\n        color: var(--color-errors-main);\n      }\n    }\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    color: var(--color-neutrals-dark);\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  {\n    outline: none;\n    color: var(--color-neutrals-dark);\n  }\n\n  .react-datepicker__day-name {\n    color: var(--color-neutrals-dark);\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__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__day--keyboard-selected {\n    background-color: inherit;\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-icon {\n    &.react-datepicker__navigation-icon--next::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      left: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\n    }\n\n    &.react-datepicker__navigation-icon--previous::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      right: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\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 = ''; }
@@ -3814,7 +3814,7 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
     var labelWithAction = props.password ? React.createElement("div", null,
         label,
         React.createElement("div", { style: { width: 24, float: 'right' }, onClick: function () { return setShowPassword(function (s) { return !s; }); } },
-            React.createElement(EyeIcon, { hide: showPassword, cursor: "pointer" }))) : React.createElement(React.Fragment, null, label);
+            React.createElement(EyeIcon, { hide: !showPassword, cursor: "pointer" }))) : React.createElement(React.Fragment, null, label);
     return (React.createElement("div", { style: containerStyle },
         label ? React.createElement(Label, { htmlFor: name, style: __assign(__assign({}, (!labelOnTop ? {} : { display: 'block' })), { fontFamily: "'skufont-medium', sans-serif", lineHeight: '24px', fontSize: '16px', color: getThemeColor(props, 'neutrals.100') }) },
             labelWithAction,
@@ -7350,6 +7350,13 @@ var presetListStyles = {
     width: '520px',
     gap: '0.5rem 1rem',
 };
+var presetLabelStyles = {
+    margin: '0',
+    flexGrow: '1',
+    flexBasis: '200px',
+    justifyContent: 'left',
+    padding: '13px',
+};
 var dateRangeLabelStyles = {
     color: colors$1.neutrals['darkest'],
     marginBottom: '0.25rem',
@@ -7402,7 +7409,7 @@ var DateRangePicker = forwardRef(function (_a, ref) {
             React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
                 React.createElement(Datepicker, { open: false, locale: locale, selected: endDate, dateFormat: dateFormat, isClearable: isClearable, onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }),
                 React.createElement(Datepicker, __assign({ key: endDateKey, inline: true, locale: locale, selected: endDate, selectsEnd: true, startDate: startDate !== null && startDate !== void 0 ? startDate : (endDate ? new Date(0) : null), endDate: endDate !== null && endDate !== void 0 ? endDate : (startDate ? new Date(9999, 1, 1) : null), todayButton: todayButton, dateFormat: dateFormat, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, calendarClassName: "commonsku-styles-datepicker daterangepicker ".concat(popperClassName || ''), onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }, props)))))); };
-    var renderPresetTab = function () { return (React.createElement("div", { style: presetListStyles }, presets === null || presets === void 0 ? void 0 : presets.map(function (preset, idx) { return (React.createElement(LabeledRadioInButton, { key: idx, labelStyle: { margin: '0', flexGrow: '1', flexBasis: '200px' }, label: preset.label, onChange: function () { return handleSelectPreset(preset); }, checked: selectedPreset != null && preset.label === selectedPreset.label })); }))); };
+    var renderPresetTab = function () { return (React.createElement("div", { style: presetListStyles }, presets === null || presets === void 0 ? void 0 : presets.map(function (preset, idx) { return (React.createElement(LabeledRadioInButton, { key: idx, labelStyle: presetLabelStyles, label: preset.label, onChange: function () { return handleSelectPreset(preset); }, checked: selectedPreset != null && preset.label === selectedPreset.label })); }))); };
     return (React.createElement("div", { ref: ref, style: style },
         hasPresets &&
             React.createElement(Row, { style: { gap: '2rem', marginBottom: '2rem' } },
@@ -8512,5 +8519,5 @@ var Dropzone = React.forwardRef(function (_a, ref) {
 var Tooltip = styled(Tooltip$1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 400px;\n  &.type-dark.place-top {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-bottom {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-left {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-right {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.type-success.place-top,\n  &.type-success.place-bottom,\n  &.type-success.place-left,\n  &.type-success.place-right {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.3rem 1rem;\n  }\n  &.type-success.place-top {\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-bottom {\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-left {\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-right {\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n"], ["\n  max-width: 400px;\n  &.type-dark.place-top {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-bottom {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-left {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-right {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.type-success.place-top,\n  &.type-success.place-bottom,\n  &.type-success.place-left,\n  &.type-success.place-right {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.3rem 1rem;\n  }\n  &.type-success.place-top {\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-bottom {\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-left {\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-right {\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.90', colors$1.green['90']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); });
 var templateObject_1;
 
-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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, DateRangeDropdown, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors$1 as 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, DateRangeDropdown, DateRangeInput, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors$1 as 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