@commonsku/styles 1.17.76 → 1.17.78

package/dist/index.d.ts

@@ -2324,13 +2324,15 @@ type ThermometerProps = {
 };
 declare function Thermometer({ title, target, targetLabel, value, valueLabel, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): React__default.JSX.Element;
 
+type LightStatus = 'on' | 'off' | 'error';
 type LightIndicatorProps = {
     name: string;
     on?: boolean;
+    status?: LightStatus;
     large?: boolean;
     textProps?: React__default.HTMLAttributes<HTMLParagraphElement>;
 };
-declare function LightIndicator({ name, on, large, textProps, ...props }: LightIndicatorProps): React__default.JSX.Element;
+declare function LightIndicator({ name, on, status, large, textProps, ...props }: LightIndicatorProps): React__default.JSX.Element;
 
 type DefaultStarProps = React__default.PropsWithChildren<{
     initialSelected?: boolean;
@@ -3237,6 +3239,11 @@ type SyncIconProps = SVGIconProps & {
 };
 declare function SyncIcon({ color, size, altText, ...props }: SyncIconProps): React__default.JSX.Element;
 
+type WarningIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function WarningIcon({ color, size, filled, altText, ...props }: WarningIconProps): 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__input-time-container,\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  .react-datepicker__input-time-container {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    text-align: center;\n  }\n  \n  .react-datepicker-time__caption {\n    color: var(--color-neutrals-dark);\n    font-size: 0.944rem;\n    font-weight: bold;\n  }\n\n  .react-datepicker-time__input {\n    padding: 8px;\n    border-radius: 5px;\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--color-neutrals-darkest);\n    border: 0;\n    input {\n      border: 2px solid var(--color-neutrals-60);\n    }\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
 
@@ -3789,4 +3796,4 @@ type SwitchStatedProps = {
 declare const SwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: SwitchProps) => React__default.JSX.Element;
 declare const Switch: ({ size, initialSelected, stretch, onClick, ...props }: SwitchStatedProps) => React__default.JSX.Element;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, AlertIcon, AlertNotification, AnnounceIcon, 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, CellphoneIcon, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, CircleProgressLoadingIcon, ClearIcon, 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, CompanyShopIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CopyIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DebouncedInput, 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, FlagIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1$1 as H1, H2$1 as H2, H3, H4, H5$1 as H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputDropdown, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledInputProps, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LayersIcon, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingShopIcon, MarketingStatusIcon, MeetingIcon, MenuIcon, MergeIcon, MonitorIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NestedOption, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, Pagination, PanelContact, PanelTileContact, PanelledSelect, PanelledSelectProps, PendingApprovalIcon, PercentIcon, PhoneIcon, PinIcon, Popup, PopupHeader, PopupProps, PopupShopIcon, 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, ShopifyShopIcon, 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, Switch, SwitchProps, SwitchStatedProps, SwitchStyled, SyncIcon, 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$1 as Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, Typography, UnsplashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, WarnIcon, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$2 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, AlertIcon, AlertNotification, AnnounceIcon, 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, CellphoneIcon, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, CircleProgressLoadingIcon, ClearIcon, 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, CompanyShopIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CopyIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DebouncedInput, 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, FlagIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1$1 as H1, H2$1 as H2, H3, H4, H5$1 as H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputDropdown, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledInputProps, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LayersIcon, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingShopIcon, MarketingStatusIcon, MeetingIcon, MenuIcon, MergeIcon, MonitorIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NestedOption, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, Pagination, PanelContact, PanelTileContact, PanelledSelect, PanelledSelectProps, PendingApprovalIcon, PercentIcon, PhoneIcon, PinIcon, Popup, PopupHeader, PopupProps, PopupShopIcon, 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, ShopifyShopIcon, 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, Switch, SwitchProps, SwitchStatedProps, SwitchStyled, SyncIcon, 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$1 as Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, Typography, UnsplashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, WarnIcon, WarningIcon, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$2 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };