@commonsku/styles 1.16.6 → 1.16.8

package/dist/index.d.ts

@@ -229,18 +229,32 @@ declare const sizes: {
 };
 declare type TSize$1 = keyof typeof sizes;
 declare type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close' | 'drag';
-declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light' | 'text-error';
+declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light' | 'text-error' | 'error-light' | 'text-error-light' | 'custom';
 declare type ButtonProps = {
     secondary?: boolean;
     cta?: boolean;
     size?: TSize$1;
     variant?: ButtonVariant;
+    variantColor?: string;
+    variantBg?: string;
+    variantBorderColor?: string;
+    variantHoverColor?: string;
+    variantHoverBg?: string;
+    variantHoverBorderColor?: string;
+    style?: CSSObject;
 } & SharedStyleTypes & SizerTypes;
 declare const Button: StyledComponent<"button", any, {
     secondary?: boolean | undefined;
     cta?: boolean | undefined;
     size?: "tiny" | "small" | "medium" | "large" | "huge" | undefined;
     variant?: ButtonVariant | undefined;
+    variantColor?: string | undefined;
+    variantBg?: string | undefined;
+    variantBorderColor?: string | undefined;
+    variantHoverColor?: string | undefined;
+    variantHoverBg?: string | undefined;
+    variantHoverBorderColor?: string | undefined;
+    style?: CSSObject | undefined;
 } & SharedStyleTypes & SizerTypes, never>;
 declare const ButtonsGroup: StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
 declare type IconFuncProps = {
@@ -255,13 +269,20 @@ declare type IconButtonProps = React$1.PropsWithChildren<ButtonProps & {
     };
     iconPosition?: 'left' | 'right' | 'top' | 'bottom';
     preset?: ButtonPreset;
-    style?: React$1.CSSProperties;
+    style?: CSSObject;
 }> & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
 declare const IconButton: React$1.ForwardRefExoticComponent<{
     secondary?: boolean | undefined;
     cta?: boolean | undefined;
     size?: "tiny" | "small" | "medium" | "large" | "huge" | undefined;
     variant?: ButtonVariant | undefined;
+    variantColor?: string | undefined;
+    variantBg?: string | undefined;
+    variantBorderColor?: string | undefined;
+    variantHoverColor?: string | undefined;
+    variantHoverBg?: string | undefined;
+    variantHoverBorderColor?: string | undefined;
+    style?: CSSObject | undefined;
 } & SharedStyleTypes & SizerTypes & {
     Icon?: TButtonIcon | React$1.ReactElement<IconFuncProps, string | React$1.JSXElementConstructor<any>> | undefined;
     iconProps?: {
@@ -269,7 +290,7 @@ declare const IconButton: React$1.ForwardRefExoticComponent<{
     } | undefined;
     iconPosition?: "left" | "right" | "bottom" | "top" | undefined;
     preset?: ButtonPreset | undefined;
-    style?: React$1.CSSProperties | undefined;
+    style?: CSSObject | undefined;
 } & {
     children?: React$1.ReactNode;
 } & React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -3327,6 +3348,40 @@ declare function HistoryIcon({ color, size, altText, ...props }: HistoryIcon): J
 declare type HandleIcon = SVGIconProps;
 declare function HandleIcon({ color, size, altText, ...props }: HandleIcon): JSX.Element;
 
+declare type ShoppingCartIconProps = SVGIconProps;
+declare function ShoppingCartIcon({ color, size, altText, ...props }: ShoppingCartIconProps): JSX.Element;
+//# sourceMappingURL=ShoppingCartIcon.d.ts.map
+
+declare type AddShoppingCartIconProps = SVGIconProps;
+declare function AddShoppingCartIcon({ color, size, altText, ...props }: AddShoppingCartIconProps): JSX.Element;
+
+declare type CommunityIconProps = SVGIconProps;
+declare function CommunityIcon({ size, altText, ...props }: CommunityIconProps): JSX.Element;
+
+declare type ConnectedIconProps = SVGIconProps;
+declare function ConnectedIcon({ size, altText, ...props }: ConnectedIconProps): JSX.Element;
+
+declare type ConnectedPlusIconProps = SVGIconProps;
+declare function ConnectedPlusIcon({ size, altText, ...props }: ConnectedPlusIconProps): JSX.Element;
+
+declare type CollaborateIconProps = SVGIconProps;
+declare function CollaborateIcon({ color, size, altText, ...props }: CollaborateIconProps): JSX.Element;
+
+declare type InventoryIconProps = SVGIconProps;
+declare function InventoryIcon({ color, size, altText, ...props }: InventoryIconProps): JSX.Element;
+
+declare type OrderStatusIconProps = SVGIconProps;
+declare function OrderStatusIcon({ color, size, altText, ...props }: OrderStatusIconProps): JSX.Element;
+
+declare type EPOIconProps = SVGIconProps;
+declare function EPOIcon({ color, size, altText, ...props }: EPOIconProps): JSX.Element;
+
+declare type HelpIconProps = SVGIconProps;
+declare function HelpIcon({ color, size, altText, ...props }: HelpIconProps): JSX.Element;
+
+declare type FileUploadIconProps = SVGIconProps;
+declare function FileUploadIcon({ color, size, altText, ...props }: FileUploadIconProps): JSX.Element;
+
 declare const datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n}\n";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
@@ -3630,14 +3685,16 @@ declare type SimpleWindowedTableProps = {
         className?: string;
         style?: React$1.CSSProperties;
     };
+    headerGroupStyle?: React$1.CSSProperties;
     TableFooter?: React$1.ReactNode;
     className?: string;
     hideFooter?: boolean;
+    clearRowFullWidth?: boolean;
     NoRowsFound?: (props: React$1.PropsWithChildren<{
         [key: string]: any;
     }>) => React$1.ReactElement;
 };
-declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, hideFooter, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
+declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, headerGroupStyle, hideFooter, clearRowFullWidth, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
 
 declare function useDelayUnmount(isMounted: boolean, delayTime: number): boolean;
 //# sourceMappingURL=useDelayUnmount.d.ts.map
@@ -3668,4 +3725,4 @@ declare const useClickOutside: <T extends HTMLElement = HTMLElement>(props: {
 declare const useFallbackRef: <T>(forwardedRef: ForwardedRef<T>) => MutableRefObject<T | null>;
 //# sourceMappingURL=useFallbackRef.d.ts.map
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import _, { map, pick, keys, isUndefined, get, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, partial, uniqueId, debounce } from 'lodash';
+import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, partial, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import React__default, { Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -2322,6 +2322,198 @@ function HandleIcon(_a) {
         React__default.createElement("path", { d: "M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z", fill: color }));
 }
 
+var iconSizes$1 = {
+    tiny: {
+        width: 16,
+        height: 18,
+        viewBox: "0 0 22 20",
+    },
+    small: {
+        width: 20,
+        height: 22,
+        viewBox: "0 0 22 20",
+    },
+    medium: {
+        width: 30,
+        height: 28,
+        viewBox: "0 0 22 20",
+    },
+    large: {
+        width: 34,
+        height: 36,
+        viewBox: "0 0 22 20",
+    },
+    huge: {
+        width: 48,
+        height: 50,
+        viewBox: "0 0 22 20",
+    },
+    default: {
+        width: 30,
+        height: 28,
+        viewBox: "0 0 22 20",
+    },
+};
+function ShoppingCartIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Shopping Cart" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return (React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ShoppingCartIcon", iconSizes: iconSizes$1, altText: altText }, props),
+        React__default.createElement("path", { d: "M15.5463 11C16.2963 11 16.9563 10.59 17.2963 9.97L20.8763 3.48C21.2463 2.82 20.7663 2 20.0063 2H5.20634L4.26634 0H0.996338V2H2.99634L6.59634 9.59L5.24634 12.03C4.51634 13.37 5.47634 15 6.99634 15H18.9963V13H6.99634L8.09634 11H15.5463ZM6.15634 4H18.3063L15.5463 9H8.52634L6.15634 4ZM6.99634 16C5.89634 16 5.00634 16.9 5.00634 18C5.00634 19.1 5.89634 20 6.99634 20C8.09634 20 8.99634 19.1 8.99634 18C8.99634 16.9 8.09634 16 6.99634 16ZM16.9963 16C15.8963 16 15.0063 16.9 15.0063 18C15.0063 19.1 15.8963 20 16.9963 20C18.0963 20 18.9963 19.1 18.9963 18C18.9963 16.9 18.0963 16 16.9963 16Z", fill: color })));
+}
+
+var iconSizes$2 = {
+    tiny: {
+        width: 14,
+        height: 15,
+        viewBox: "0 0 21 22",
+    },
+    small: {
+        width: 16,
+        height: 17,
+        viewBox: "0 0 21 22",
+    },
+    medium: {
+        width: 21,
+        height: 22,
+        viewBox: "0 0 21 22",
+    },
+    large: {
+        width: 32,
+        height: 33,
+        viewBox: "0 0 21 22",
+    },
+    huge: {
+        width: 48,
+        height: 49,
+        viewBox: "0 0 21 22",
+    },
+    default: {
+        width: 21,
+        height: 22,
+        viewBox: "0 0 21 22",
+    },
+};
+function AddShoppingCartIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, props = __rest(_a, ["color", "size", "altText"]);
+    return (React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "AddShoppingCartIcon", iconSizes: iconSizes$2 }, props),
+        React__default.createElement("path", { d: "M10.4199 8.5H12.4199V5.5H15.4199V3.5H12.4199V0.5H10.4199V3.5H7.41992V5.5H10.4199V8.5ZM6.41992 17.5C5.31992 17.5 4.42992 18.4 4.42992 19.5C4.42992 20.6 5.31992 21.5 6.41992 21.5C7.51992 21.5 8.41992 20.6 8.41992 19.5C8.41992 18.4 7.51992 17.5 6.41992 17.5ZM16.4199 17.5C15.3199 17.5 14.4299 18.4 14.4299 19.5C14.4299 20.6 15.3199 21.5 16.4199 21.5C17.5199 21.5 18.4199 20.6 18.4199 19.5C18.4199 18.4 17.5199 17.5 16.4199 17.5ZM7.51992 12.5H14.9699C15.7199 12.5 16.3799 12.09 16.7199 11.47L20.5799 4.46L18.8399 3.5L14.9699 10.5H7.94992L3.68992 1.5H0.419922V3.5H2.41992L6.01992 11.09L4.66992 13.53C3.93992 14.87 4.89992 16.5 6.41992 16.5H18.4199V14.5H6.41992L7.51992 12.5Z", fill: color })));
+}
+
+function CommunityIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Community" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CommunityIcon" }, props),
+        React__default.createElement("title", { id: "CommunityIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M13.6999 18.6333V17.9C13.6999 16.9333 12.9333 16.1666 11.9999 16.1666H11.9666C11.0333 16.1666 10.2999 16.9333 10.2999 17.8666V18.6333H6.49994C6.23328 18.6333 6.03328 18.4333 6.03328 18.1666V14.0333H5.26661C4.13328 14.0333 3.23328 13.1333 3.23328 12C3.23328 10.8666 4.16661 9.96664 5.26661 9.96664H6.03328V5.8333C6.03328 5.56664 6.23328 5.36664 6.49994 5.36664H10.2999V6.1333C10.2999 7.06664 11.0666 7.8333 11.9999 7.8333C12.9333 7.8333 13.6999 7.06664 13.6999 6.1333V5.36664H17.4999C17.7666 5.36664 17.9666 5.56664 17.9666 5.8333V9.96664H18.7333C19.8666 9.96664 20.7666 10.8666 20.7666 12C20.7666 13.1333 19.8666 14.0333 18.7333 14.0333H17.9666V18.1666C17.9666 18.4333 17.7666 18.6333 17.4999 18.6333H13.6999Z", fill: "white" }),
+        React__default.createElement("path", { d: "M6.49998 5.53335H10.1333V6.13335C10.1333 7.16668 10.9667 8.00001 12 8.00001C13.0333 8.00001 13.8666 7.16668 13.8666 6.13335V5.53335H17.5C17.6667 5.53335 17.8 5.66668 17.8 5.83335V10.1333H18.7333C19.7667 10.1333 20.6 10.9667 20.6 12C20.6 13.0333 19.7667 13.8667 18.7333 13.8667H17.8V18.1667C17.8 18.3333 17.6667 18.4667 17.5 18.4667H13.8666V17.9C13.8666 16.8667 13.0333 16 12 16H11.9667C10.9333 16 10.1333 16.8333 10.1333 17.8667V18.4667H6.49998C6.33332 18.4667 6.19998 18.3333 6.19998 18.1667V13.8667H5.26665C4.23332 13.8667 3.39998 13.0333 3.39998 12C3.39998 10.9667 4.23332 10.1333 5.26665 10.1333H6.19998V5.83335C6.19998 5.66668 6.33332 5.53335 6.49998 5.53335ZM6.49998 5.20001C6.16665 5.20001 5.86665 5.46668 5.86665 5.83335V9.80001H5.26665C4.03332 9.80001 3.06665 10.8 3.06665 12C3.06665 13.2333 4.06665 14.2 5.26665 14.2H5.86665V18.1667C5.86665 18.5 6.13332 18.8 6.49998 18.8H10.1333H10.4667V18.4667V17.8667C10.4667 17.0333 11.1333 16.3333 11.9667 16.3333H12C12.8333 16.3333 13.5333 17.0667 13.5333 17.9V18.4667V18.8H13.8666H17.5C17.8333 18.8 18.1333 18.5333 18.1333 18.1667V14.2H18.7333C19.9667 14.2 20.9333 13.2 20.9333 12C20.9333 10.7667 19.9333 9.80001 18.7333 9.80001H18.1333V5.83335C18.1333 5.50001 17.8667 5.20001 17.5 5.20001H13.8666H13.5333V5.53335V6.13335C13.5333 6.96668 12.8333 7.66668 12 7.66668C11.1667 7.66668 10.4667 6.96668 10.4667 6.13335V5.53335V5.20001H10.1333H6.49998Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M12 12.2C12.7916 12.2 13.4333 11.5583 13.4333 10.7666C13.4333 9.97504 12.7916 9.33331 12 9.33331C11.2084 9.33331 10.5667 9.97504 10.5667 10.7666C10.5667 11.5583 11.2084 12.2 12 12.2Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M14.5333 14.6667H9.46667C9.46667 13.2667 10.6 12.1334 12 12.1334C13.4 12.1334 14.5333 13.2667 14.5333 14.6667Z", fill: "#5BBDEC" }));
+}
+
+function ConnectedIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Connected" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ConnectedIcon" }, props),
+        React__default.createElement("title", { id: "ConnectedIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#0F6EA6" }),
+        React__default.createElement("path", { d: "M9.06661 16.1334V15.7C9.06661 14.9667 8.46661 14.3334 7.73328 14.3334C6.96661 14.3334 6.33328 14.9667 6.33328 15.7334V16.1334H3.73328V8.30002C3.73328 8.26669 3.76661 8.20002 3.83328 8.20002H6.66661V7.43336C6.66661 6.86669 7.13328 6.40002 7.66661 6.40002C8.23328 6.40002 8.73328 6.90002 8.73328 7.46669V8.20002H11.5999C11.6333 8.20002 11.6666 8.23336 11.6666 8.26669V10.8H11.2666C10.8999 10.8 10.5333 10.9667 10.2666 11.2334C9.99994 11.5 9.86661 11.8334 9.86661 12.2C9.86661 12.9334 10.4999 13.5334 11.2333 13.5334H11.6666V16.0667C11.6666 16.1 11.6333 16.1334 11.5999 16.1334H9.06661Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.69998 6.23334V6.56667C8.16665 6.56667 8.56665 6.96667 8.56665 7.46667V8.03334V8.36667H8.89998H11.5V10.6333H11.2667C10.8333 10.6333 10.4333 10.8 10.1333 11.1C9.83332 11.4 9.69998 11.7667 9.69998 12.2C9.69998 13.0333 10.4 13.7 11.2333 13.7H11.5V15.9667H9.23332V15.7C9.23332 14.8667 8.56665 14.2 7.73332 14.1667H7.69998C6.86665 14.1667 6.16665 14.8667 6.16665 15.7333V15.9667H3.89998V8.36667H6.49998H6.83332V8.03334V7.43334C6.83332 6.96667 7.19998 6.56667 7.66665 6.56667V6.23334M7.69998 6.23334C7.69998 6.23334 7.66665 6.23334 7.69998 6.23334C7.03332 6.23334 6.49998 6.76667 6.49998 7.43334V8.03334H3.83332C3.69998 8.03334 3.56665 8.13334 3.56665 8.3V16.3H6.49998V15.7333C6.49998 15.0667 7.03332 14.5 7.69998 14.5C7.69998 14.5 7.69998 14.5 7.73332 14.5C8.39998 14.5 8.89998 15.0333 8.89998 15.7V16.3H11.6C11.7333 16.3 11.8333 16.2 11.8333 16.0667V13.3667H11.2333C10.5667 13.3667 10.0333 12.8333 10.0333 12.2C10.0333 11.5333 10.6 10.9667 11.2667 10.9667H11.8333V8.26667C11.8333 8.13334 11.7333 8.03334 11.6 8.03334H8.89998V7.46667C8.89998 6.8 8.36665 6.23334 7.69998 6.23334Z", fill: "#0F6EA6" }),
+        React__default.createElement("path", { d: "M17.3333 16.1333V15.7C17.3333 14.9333 16.7333 14.3333 15.9666 14.3333C15.2 14.3333 14.6 14.9333 14.6 15.7V16.1333H12V13.3667V13.2H11.2333C10.6666 13.2 10.2 12.7333 10.2 12.1667C10.2 11.6 10.6666 11.1333 11.2333 11.1333H12V8.23335L14.6 8.20001V8.60001C14.6 9.36668 15.2 10 15.9666 10C16.7333 10 17.3333 9.36668 17.3333 8.63335V8.20001H19.9L19.9333 10.9667V11.1333H20.7C21.2666 11.1333 21.7333 11.6 21.7333 12.1667C21.7333 12.7333 21.2666 13.2 20.7 13.2H19.9333V16.1L19.9 16.1333H17.3333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.7667 8.36666V10.9667V11.3H20.1H20.7C21.1667 11.3 21.5667 11.7 21.5667 12.1667C21.5667 12.6333 21.1667 13.0333 20.7 13.0333H20.1H19.7667V13.3667V15.9667H17.5V15.7C17.5 14.8667 16.8 14.1667 15.9667 14.1667C15.1333 14.1667 14.4333 14.8667 14.4333 15.7V15.9667H12.1667V13.3667V13.0333H11.8333H11.2333C10.7667 13.0333 10.3667 12.6333 10.3667 12.1667C10.3667 11.7 10.7667 11.3 11.2333 11.3H11.8333H12.1667V10.9667V8.36666H14.4333V8.59999C14.4333 9.46666 15.1333 10.1667 15.9667 10.1667H16C16.8333 10.1667 17.5 9.46666 17.5 8.63332V8.36666H19.7667ZM19.9 8.03333H17.1667V8.63332C17.1667 9.29999 16.6333 9.83333 16 9.83333H15.9667C15.3 9.83333 14.7667 9.26666 14.7667 8.59999V8.03333H12C11.9 8.03333 11.8 8.09999 11.8 8.23333V10.9667H11.2C10.5333 10.9667 10 11.5 10 12.1667C10 12.8333 10.5333 13.3667 11.2 13.3667H11.8V16.1C11.8 16.2 11.8667 16.3 12 16.3H14.7333V15.7C14.7333 15.0333 15.2667 14.5 15.9333 14.5C16.6 14.5 17.1333 15.0333 17.1333 15.7V16.3H19.8667C19.9667 16.3 20.0667 16.2333 20.0667 16.1V13.3667H20.6667C21.3333 13.3667 21.8667 12.8333 21.8667 12.1667C21.8667 11.5 21.3333 10.9667 20.6667 10.9667H20.0667V8.23333C20.1 8.13333 20 8.03333 19.9 8.03333Z", fill: "#0F6EA6" }));
+}
+
+function ConnectedPlusIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "ConnectedPlus" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ConnectedPlusIcon" }, props),
+        React__default.createElement("title", { id: "ConnectedPlusIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M9.70007 12.2334V11.9C9.70007 11.2667 9.20007 10.7334 8.53341 10.7334C7.86674 10.7334 7.33341 11.2667 7.33341 11.9334V12.2334H5.20007V5.70002C5.20007 5.66669 5.23341 5.66669 5.23341 5.66669H7.63341V5.00002C7.63341 4.53335 8.00007 4.16669 8.46674 4.16669C8.93341 4.16669 9.33341 4.56669 9.33341 5.03335V5.66669H11.7667C11.8001 5.66669 11.8001 5.66669 11.8001 5.70002V7.80002H11.5001C11.1667 7.80002 10.8667 7.93335 10.6334 8.16669C10.4001 8.40002 10.3001 8.70002 10.3001 9.00002C10.3001 9.63335 10.8334 10.1667 11.4667 10.1667H11.8001V12.2667C11.8001 12.3 11.8001 12.3 11.7667 12.3H9.70007V12.2334Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.53331 4.30001C8.89998 4.30001 9.19998 4.63334 9.19998 5.00001V5.46667V5.80001H9.53331H11.6666V7.60001H11.5333C11.1666 7.60001 10.8 7.76667 10.5666 8.00001C10.3 8.26667 10.1666 8.60001 10.2 8.96667C10.2 9.70001 10.8 10.2667 11.5333 10.2667H11.6666V12.0667H9.86664V11.9C9.86664 11.1667 9.26664 10.5667 8.56664 10.5667H8.53331C7.79998 10.5667 7.19998 11.1667 7.19998 11.9333V12.0667H5.39998V5.80001H7.53331H7.86664V5.46667V4.96667C7.86664 4.60001 8.16664 4.30001 8.53331 4.30001ZM8.53331 3.96667C7.96664 3.96667 7.53331 4.43334 7.53331 4.96667V5.46667H5.29998C5.16664 5.46667 5.09998 5.56667 5.09998 5.66667V12.4H7.56664V11.9333C7.56664 11.3667 8.03331 10.9 8.56664 10.9C8.56664 10.9 8.56664 10.9 8.59998 10.9C9.13331 10.9 9.59998 11.3667 9.59998 11.9V12.4H11.8666C11.9666 12.4 12.0666 12.3 12.0666 12.2V9.93334H11.5666C11.0333 9.93334 10.5666 9.50001 10.5666 8.93334C10.5666 8.36667 11.0333 7.90001 11.6 7.90001H12V5.66667C12 5.56667 11.9 5.46667 11.8 5.46667H9.53331V5.00001C9.53331 4.43334 9.09998 3.96667 8.53331 3.96667Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M16.6333 12.2333V11.9C16.6333 11.2666 16.1 10.7333 15.4666 10.7333C14.8333 10.7333 14.3 11.2666 14.3 11.9V12.2333H12.1666V9.76663H11.5C11.0333 9.76663 10.6666 9.39997 10.6666 8.9333C10.6666 8.46663 11.0333 8.09997 11.5 8.09997H12.1666V5.6333H14.3V5.96663C14.3 6.6333 14.8333 7.16663 15.4666 7.16663C16.1333 7.16663 16.6333 6.6333 16.6333 5.99997V5.66663H18.7666V8.1333H19.4333C19.9 8.1333 20.2666 8.49997 20.2666 8.96663C20.2666 9.4333 19.9 9.79997 19.4333 9.79997H18.7666V12.2666H16.6333V12.2333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M18.6 5.80002V7.93335V8.26668H18.9333H19.4333C19.8 8.26668 20.1 8.56668 20.1 8.93335C20.1 9.30002 19.8 9.60002 19.4333 9.60002H18.9333H18.6V9.93335V12.0667H16.8V11.9C16.8 11.1667 16.2 10.5667 15.4667 10.5667C14.7333 10.5667 14.1333 11.1667 14.1333 11.9V12.0667H12.3333V9.93335V9.60002H12H11.5C11.1333 9.60002 10.8333 9.30002 10.8333 8.93335C10.8333 8.56668 11.1333 8.26668 11.5 8.26668H12H12.3333V7.93335V5.80002H14.1333V5.96668C14.1333 6.73335 14.7333 7.33335 15.4667 7.33335H15.5C16.2333 7.33335 16.8 6.73335 16.8 6.00002V5.83335H18.6M18.8 5.46668H16.5V5.96668C16.5 6.53335 16.0667 6.96668 15.5 6.96668C15.5 6.96668 15.5 6.96668 15.4667 6.96668C14.9 6.96668 14.4667 6.50002 14.4667 5.93335V5.43335H12.1667C12.0667 5.43335 12 5.50002 12 5.60002V7.90002H11.5C10.9333 7.90002 10.5 8.36668 10.5 8.90002C10.5 9.46668 10.9667 9.90002 11.5 9.90002H12V12.2C12 12.3 12.0667 12.3667 12.1667 12.3667H14.4667V11.8667C14.4667 11.3 14.9333 10.8667 15.4667 10.8667C16.0333 10.8667 16.4667 11.3333 16.4667 11.8667V12.3667H18.7667C18.8667 12.3667 18.9333 12.3 18.9333 12.2V9.90002H19.4333C20 9.90002 20.4333 9.43335 20.4333 8.90002C20.4333 8.33335 19.9667 7.90002 19.4333 7.90002H18.9333V5.60002C18.9333 5.53335 18.8667 5.46668 18.8 5.46668Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M5.23328 19.2V16.7333H4.56661C4.09994 16.7333 3.73328 16.3666 3.73328 15.9C3.73328 15.4333 4.09994 15.0666 4.56661 15.0666H5.23328V12.6H7.69994V11.9333C7.69994 11.4666 8.06661 11.1 8.53328 11.1C8.73328 11.1 8.89994 11.1666 9.06661 11.2666C9.23328 11.3666 9.36661 11.6333 9.36661 11.8V12.6H11.8333V14.7333H11.4999C10.8666 14.7333 10.3333 15.2666 10.3333 15.9C10.3333 16.5333 10.8666 17.0666 11.4999 17.0666H11.8333V19.2H5.23328Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.53332 11.2334C8.69998 11.2334 8.83332 11.2667 8.99998 11.3667C9.09998 11.4334 9.23332 11.6334 9.23332 11.7667V12.4V12.7334H9.56665H11.6667V14.5334H11.5C10.7667 14.5334 10.1667 15.1334 10.1667 15.8667C10.1667 16.6 10.7667 17.2 11.5 17.2H11.6667V19H5.39998V16.8667V16.5334H5.06665H4.56665C4.19998 16.5334 3.89998 16.2334 3.89998 15.8667C3.89998 15.5 4.19998 15.2 4.56665 15.2H5.06665H5.39998V14.8667V12.7334H7.53332H7.86665V12.4V11.9C7.86665 11.7334 7.93332 11.5667 8.06665 11.4334C8.16665 11.3 8.36665 11.2334 8.53332 11.2334ZM8.53332 10.9C7.96665 10.9 7.53332 11.3667 7.53332 11.9V12.4H5.06665V14.8667H4.56665C3.99998 14.8667 3.56665 15.3334 3.56665 15.8667C3.56665 16.4334 4.03332 16.8667 4.56665 16.8667H5.06665V19.3334H12V16.8667H11.5C10.9333 16.8667 10.5 16.4 10.5 15.8667C10.5 15.3 10.9667 14.8667 11.5 14.8667H12V12.4H9.53332V11.7667C9.53332 11.5334 9.36665 11.2 9.16665 11.0667C8.96665 10.9667 8.73332 10.9 8.53332 10.9Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M16.9666 15.5H15.8V14.3333C15.8 14.1333 15.6666 14 15.4666 14C15.2666 14 15.1333 14.1333 15.1333 14.3333V15.5H13.9666C13.7666 15.5 13.6333 15.6333 13.6333 15.8333C13.6333 16.0333 13.7666 16.1667 13.9666 16.1667H15.1333V17.3333C15.1333 17.5333 15.2666 17.6667 15.4666 17.6667C15.6666 17.6667 15.8 17.5333 15.8 17.3333V16.1667H16.9666C17.1666 16.1667 17.3 16.0333 17.3 15.8333C17.3 15.6333 17.1666 15.5 16.9666 15.5Z", fill: "white" }));
+}
+
+function CollaborateIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Collaborate" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CollaborateIcon" }, props),
+        React__default.createElement("title", { id: "CollaborateIcon" }, altText),
+        React__default.createElement("path", { d: "M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z", fill: color }));
+}
+
+function InventoryIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Inventory" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "InventoryIcon" }, props),
+        React__default.createElement("title", { id: "InventoryIcon" }, altText),
+        React__default.createElement("path", { d: "M20.54 5.23L19.15 3.55C18.88 3.21 18.47 3 18 3H6C5.53 3 5.12 3.21 4.84 3.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V6.5C21 6.02 20.83 5.57 20.54 5.23ZM6.24 5H17.76L18.57 5.97H5.44L6.24 5ZM5 19V8H19V19H5ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z", fill: color }));
+}
+
+function OrderStatusIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "OrderStatus" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "OrderStatusIcon" }, props),
+        React__default.createElement("title", { id: "OrderStatusIcon" }, altText),
+        React__default.createElement("path", { d: "M20 8H17V4H3C1.9 4 1 4.9 1 6V17H3C3 18.66 4.34 20 6 20C7.66 20 9 18.66 9 17H15C15 18.66 16.34 20 18 20C19.66 20 21 18.66 21 17H23V12L20 8ZM19.5 9.5L21.46 12H17V9.5H19.5ZM6 18C5.45 18 5 17.55 5 17C5 16.45 5.45 16 6 16C6.55 16 7 16.45 7 17C7 17.55 6.55 18 6 18ZM8.22 15C7.67 14.39 6.89 14 6 14C5.11 14 4.33 14.39 3.78 15H3V6H15V15H8.22ZM18 18C17.45 18 17 17.55 17 17C17 16.45 17.45 16 18 16C18.55 16 19 16.45 19 17C19 17.55 18.55 18 18 18Z", fill: color }));
+}
+
+function EPOIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "EPO" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "EPOIcon" }, props),
+        React__default.createElement("title", { id: "EPOIcon" }, altText),
+        React__default.createElement("path", { d: "M7 16H14V18H7V16ZM7 12H17V14H7V12ZM7 8H17V10H7V8ZM19 4H14.82C14.4 2.84 13.3 2 12 2C10.7 2 9.6 2.84 9.18 4H5C4.86 4 4.73 4.01 4.6 4.04C4.21 4.12 3.86 4.32 3.59 4.59C3.41 4.77 3.26 4.99 3.16 5.23C3.06 5.46 3 5.72 3 6V20C3 20.27 3.06 20.54 3.16 20.78C3.26 21.02 3.41 21.23 3.59 21.42C3.86 21.69 4.21 21.89 4.6 21.97C4.73 21.99 4.86 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM12 3.75C12.41 3.75 12.75 4.09 12.75 4.5C12.75 4.91 12.41 5.25 12 5.25C11.59 5.25 11.25 4.91 11.25 4.5C11.25 4.09 11.59 3.75 12 3.75ZM19 20H5V6H19V20Z", fill: color }));
+}
+
+function HelpIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "EPO" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "HelpIcon" }, props),
+        React__default.createElement("title", { id: "HelpIcon" }, altText),
+        React__default.createElement("path", { d: "M9 16H11V14H9V16ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 4C7.79 4 6 5.79 6 8H8C8 6.9 8.9 6 10 6C11.1 6 12 6.9 12 8C12 10 9 9.75 9 13H11C11 10.75 14 10.5 14 8C14 5.79 12.21 4 10 4Z", fill: color }));
+}
+
+var iconSizes$3 = {
+    tiny: {
+        width: 188,
+        height: 44,
+        viewBox: "0 0 208 64",
+    },
+    small: {
+        width: 198,
+        height: 54,
+        viewBox: "0 0 208 64",
+    },
+    medium: {
+        width: 208,
+        height: 64,
+        viewBox: "0 0 208 64",
+    },
+    large: {
+        width: 218,
+        height: 74,
+        viewBox: "0 0 208 64",
+    },
+    huge: {
+        width: 228,
+        height: 84,
+        viewBox: "0 0 208 64",
+    },
+    default: {
+        width: 238,
+        height: 94,
+        viewBox: "0 0 208 64",
+    },
+};
+function FileUploadIcon(_a) {
+    var _b = _a.color, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, props = __rest(_a, ["color", "size", "altText"]);
+    var clipId = "clip0_2603_83254_".concat(uniqueId('clip'));
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "FileUploadIcon", iconSizes: iconSizes$3 }, props),
+        React__default.createElement("g", { "clip-path": "url(#".concat(clipId, ")") },
+            React__default.createElement("path", { d: "M74.6667 13.3333V50.6667H37.3333V13.3333H74.6667ZM74.6667 8H37.3333C34.4 8 32 10.4 32 13.3333V50.6667C32 53.6 34.4 56 37.3333 56H74.6667C77.6 56 80 53.6 80 50.6667V13.3333C80 10.4 77.6 8 74.6667 8ZM61.7067 31.6267L53.7067 41.9467L48 35.04L40 45.3333H72L61.7067 31.6267Z", fill: "#B8C4CB" })),
+        React__default.createElement("path", { d: "M97.26 19H99.9C102.36 19 104.28 17.08 104.28 14.8C104.28 12.52 102.36 10.6 99.9 10.6H97.26V19ZM98.16 18.16V11.44H99.9C101.88 11.44 103.38 12.94 103.38 14.8C103.38 16.66 101.88 18.16 99.9 18.16H98.16ZM105.96 19H106.8V15.82C106.8 14.68 107.64 13.96 108.6 13.96H108.96V13.12H108.72C107.4 13.12 106.8 14.02 106.8 14.02V13.24H105.96V19ZM113.577 19H114.417V15.34C114.417 14.08 113.457 13.12 112.137 13.12C110.757 13.12 109.977 14.2 109.977 14.2L110.517 14.74C110.517 14.74 111.117 13.9 112.137 13.9C112.977 13.9 113.577 14.5 113.577 15.34L111.357 15.7C110.277 15.88 109.677 16.48 109.677 17.44C109.677 18.28 110.517 19.12 111.717 19.12C112.977 19.12 113.577 18.22 113.577 18.22V19ZM113.577 16.42C113.577 17.56 112.797 18.34 111.717 18.34C110.937 18.34 110.517 17.92 110.517 17.44C110.517 16.9 110.877 16.552 111.597 16.42L113.577 16.06V16.42ZM116.151 20.32C116.151 20.32 116.931 21.52 118.551 21.52C120.111 21.52 121.371 20.26 121.371 18.64V13.24H120.531V14.02C120.531 14.02 119.991 13.12 118.611 13.12C117.111 13.12 115.911 14.38 115.911 16C115.911 17.62 117.111 18.88 118.611 18.88C119.991 18.88 120.531 17.98 120.531 17.98V18.64C120.531 19.84 119.631 20.74 118.551 20.74C117.351 20.74 116.691 19.78 116.691 19.78L116.151 20.32ZM118.611 18.1C117.591 18.1 116.751 17.2 116.751 16C116.751 14.8 117.591 13.9 118.611 13.9C119.691 13.9 120.531 14.8 120.531 16C120.531 17.2 119.691 18.1 118.611 18.1ZM129.292 19H130.132V15.34C130.132 14.08 129.172 13.12 127.852 13.12C126.472 13.12 125.692 14.2 125.692 14.2L126.232 14.74C126.232 14.74 126.832 13.9 127.852 13.9C128.692 13.9 129.292 14.5 129.292 15.34L127.072 15.7C125.992 15.88 125.392 16.48 125.392 17.44C125.392 18.28 126.232 19.12 127.432 19.12C128.692 19.12 129.292 18.22 129.292 18.22V19ZM129.292 16.42C129.292 17.56 128.512 18.34 127.432 18.34C126.652 18.34 126.232 17.92 126.232 17.44C126.232 16.9 126.592 16.552 127.312 16.42L129.292 16.06V16.42ZM132.046 19H132.886V15.82C132.886 14.68 133.666 13.9 134.686 13.9C135.586 13.9 136.246 14.56 136.246 15.58V19H137.086V15.58C137.086 14.08 136.126 13.12 134.746 13.12C133.486 13.12 132.886 14.08 132.886 14.08V13.24H132.046V19ZM143.387 19H144.227V10.6H143.387V14.08C143.387 14.08 142.727 13.12 141.407 13.12C139.847 13.12 138.587 14.38 138.587 16.12C138.587 17.86 139.847 19.12 141.407 19.12C142.727 19.12 143.387 18.16 143.387 18.16V19ZM141.407 18.34C140.327 18.34 139.427 17.44 139.427 16.12C139.427 14.8 140.327 13.9 141.407 13.9C142.427 13.9 143.387 14.86 143.387 16.12C143.387 17.38 142.427 18.34 141.407 18.34ZM153.102 19H153.942V10.6H153.102V14.08C153.102 14.08 152.442 13.12 151.122 13.12C149.562 13.12 148.302 14.38 148.302 16.12C148.302 17.86 149.562 19.12 151.122 19.12C152.442 19.12 153.102 18.16 153.102 18.16V19ZM151.122 18.34C150.042 18.34 149.142 17.44 149.142 16.12C149.142 14.8 150.042 13.9 151.122 13.9C152.142 13.9 153.102 14.86 153.102 16.12C153.102 17.38 152.142 18.34 151.122 18.34ZM155.917 19H156.757V15.82C156.757 14.68 157.597 13.96 158.557 13.96H158.917V13.12H158.677C157.357 13.12 156.757 14.02 156.757 14.02V13.24H155.917V19ZM162.457 19.12C164.077 19.12 165.397 17.8 165.397 16.12C165.397 14.44 164.077 13.12 162.457 13.12C160.837 13.12 159.517 14.44 159.517 16.12C159.517 17.8 160.837 19.12 162.457 19.12ZM162.457 18.34C161.317 18.34 160.357 17.368 160.357 16.12C160.357 14.86 161.317 13.9 162.457 13.9C163.597 13.9 164.557 14.86 164.557 16.12C164.557 17.38 163.597 18.34 162.457 18.34ZM166.898 21.52H167.738V18.16C167.738 18.16 168.398 19.12 169.718 19.12C171.278 19.12 172.538 17.86 172.538 16.12C172.538 14.38 171.278 13.12 169.718 13.12C168.398 13.12 167.738 14.08 167.738 14.08V13.24H166.898V21.52ZM169.718 18.34C168.698 18.34 167.738 17.38 167.738 16.12C167.738 14.86 168.698 13.9 169.718 13.9C170.798 13.9 171.698 14.8 171.698 16.12C171.698 17.44 170.798 18.34 169.718 18.34ZM97.02 33H97.86V29.82C97.86 28.68 98.64 27.9 99.66 27.9C100.56 27.9 101.22 28.56 101.22 29.58V33H102.06V29.58C102.06 28.08 101.1 27.12 99.72 27.12C98.46 27.12 97.86 28.08 97.86 28.08V24.6H97.02V33ZM108.3 31.38C108.3 31.38 107.652 32.34 106.44 32.34C105.36 32.34 104.46 31.44 104.4 30.42L109.08 30.432C109.08 30.432 109.14 30.24 109.14 30C109.14 28.32 107.94 27.12 106.38 27.12C104.88 27.12 103.56 28.44 103.56 30.12C103.56 31.8 104.88 33.12 106.44 33.12C108 33.12 108.84 31.92 108.84 31.92L108.3 31.38ZM104.4 29.7C104.52 28.74 105.36 27.9 106.38 27.9C107.4 27.9 108.18 28.68 108.3 29.7H104.4ZM110.636 33H111.476V29.82C111.476 28.68 112.316 27.96 113.276 27.96H113.636V27.12H113.396C112.076 27.12 111.476 28.02 111.476 28.02V27.24H110.636V33ZM118.975 31.38C118.975 31.38 118.327 32.34 117.115 32.34C116.035 32.34 115.135 31.44 115.075 30.42L119.755 30.432C119.755 30.432 119.815 30.24 119.815 30C119.815 28.32 118.615 27.12 117.055 27.12C115.555 27.12 114.235 28.44 114.235 30.12C114.235 31.8 115.555 33.12 117.115 33.12C118.675 33.12 119.515 31.92 119.515 31.92L118.975 31.38ZM115.075 29.7C115.195 28.74 116.035 27.9 117.055 27.9C118.075 27.9 118.855 28.68 118.975 29.7H115.075ZM126.351 33.12C127.971 33.12 129.291 31.8 129.291 30.12C129.291 28.44 127.971 27.12 126.351 27.12C124.731 27.12 123.411 28.44 123.411 30.12C123.411 31.8 124.731 33.12 126.351 33.12ZM126.351 32.34C125.211 32.34 124.251 31.368 124.251 30.12C124.251 28.86 125.211 27.9 126.351 27.9C127.491 27.9 128.451 28.86 128.451 30.12C128.451 31.38 127.491 32.34 126.351 32.34ZM130.792 33H131.632V29.82C131.632 28.68 132.472 27.96 133.432 27.96H133.792V27.12H133.552C132.232 27.12 131.632 28.02 131.632 28.02V27.24H130.792V33Z", fill: "#899CA9" }),
+        React__default.createElement("path", { d: "M97.2 53H100.74C102.36 53 103.5 51.86 103.5 50.54C103.5 49.04 102.06 48.5 102.06 48.5C102.06 48.5 103.08 48.08 103.08 46.82C103.08 45.62 102.06 44.6 100.56 44.6H97.2V53ZM98.52 51.86V49.1H100.74C101.58 49.1 102.18 49.7 102.18 50.48C102.18 51.26 101.58 51.86 100.74 51.86H98.52ZM98.52 48.02V45.74H100.56C101.28 45.74 101.76 46.22 101.76 46.88C101.76 47.54 101.28 48.02 100.56 48.02H98.52ZM104.996 53H106.196V50.06C106.196 49.04 106.916 48.32 107.756 48.32C107.996 48.32 108.236 48.38 108.236 48.38V47.12H107.936C106.796 47.12 106.196 48.02 106.196 48.02V47.24H104.996V53ZM108.843 50.12C108.843 51.8 110.163 53.12 111.843 53.12C113.523 53.12 114.843 51.8 114.843 50.12C114.843 48.44 113.523 47.12 111.843 47.12C110.163 47.12 108.843 48.44 108.843 50.12ZM111.843 51.98C110.823 51.98 110.043 51.2 110.043 50.12C110.043 49.04 110.823 48.26 111.843 48.26C112.863 48.26 113.643 49.04 113.643 50.12C113.643 51.2 112.863 51.98 111.843 51.98ZM117.484 53H118.624L119.884 49.16L121.144 53H122.284L124.324 47.24H123.004L121.684 51.14L120.424 47.24H119.344L118.084 51.14L116.764 47.24H115.444L117.484 53ZM124.741 52.04C124.741 52.04 125.521 53.12 127.021 53.12C128.401 53.12 129.241 52.28 129.241 51.32C129.241 49.28 126.181 49.76 126.181 48.8C126.181 48.5 126.481 48.2 127.081 48.2C127.861 48.2 128.341 48.68 128.341 48.68L129.121 47.9C129.121 47.9 128.461 47.12 127.081 47.12C125.761 47.12 124.981 47.9 124.981 48.8C124.981 50.84 128.041 50.36 128.041 51.32C128.041 51.68 127.681 52.04 127.021 52.04C126.121 52.04 125.521 51.26 125.521 51.26L124.741 52.04ZM134.876 51.2C134.876 51.2 134.216 51.98 133.196 51.98C132.236 51.98 131.516 51.32 131.396 50.54H135.836C135.836 50.54 135.896 50.3 135.896 49.94C135.896 48.32 134.696 47.12 133.076 47.12C131.456 47.12 130.136 48.44 130.136 50.12C130.136 51.8 131.456 53.12 133.136 53.12C134.816 53.12 135.596 52.04 135.596 52.04L134.876 51.2ZM131.396 49.52C131.636 48.74 132.176 48.2 133.076 48.2C133.916 48.2 134.456 48.74 134.636 49.52H131.396ZM140.091 53H141.411V49.52H145.011V48.26H141.411V45.86H145.971V44.6H140.091V53ZM147.056 53H148.256V47.24H147.056V53ZM146.936 45.44C146.936 45.86 147.296 46.16 147.656 46.16C148.016 46.16 148.376 45.86 148.376 45.44C148.376 45.02 148.016 44.72 147.656 44.72C147.296 44.72 146.936 45.02 146.936 45.44ZM150.056 53H151.256V44.6H150.056V53ZM157.376 51.2C157.376 51.2 156.716 51.98 155.696 51.98C154.736 51.98 154.016 51.32 153.896 50.54H158.336C158.336 50.54 158.396 50.3 158.396 49.94C158.396 48.32 157.196 47.12 155.576 47.12C153.956 47.12 152.636 48.44 152.636 50.12C152.636 51.8 153.956 53.12 155.636 53.12C157.316 53.12 158.096 52.04 158.096 52.04L157.376 51.2ZM153.896 49.52C154.136 48.74 154.676 48.2 155.576 48.2C156.416 48.2 156.956 48.74 157.136 49.52H153.896ZM159.171 52.04C159.171 52.04 159.951 53.12 161.451 53.12C162.831 53.12 163.671 52.28 163.671 51.32C163.671 49.28 160.611 49.76 160.611 48.8C160.611 48.5 160.911 48.2 161.511 48.2C162.291 48.2 162.771 48.68 162.771 48.68L163.551 47.9C163.551 47.9 162.891 47.12 161.511 47.12C160.191 47.12 159.411 47.9 159.411 48.8C159.411 50.84 162.471 50.36 162.471 51.32C162.471 51.68 162.111 52.04 161.451 52.04C160.551 52.04 159.951 51.26 159.951 51.26L159.171 52.04Z", fill: "#DA9B8A" }),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: clipId },
+                React__default.createElement("rect", { width: "64", height: "64", fill: "white", transform: "translate(24)" }))));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2615,7 +2807,14 @@ var getVariantStyles = function (props, variant) {
     var ctaDark = getThemeColor(props, 'secondary1.80', colors.secondary1['80']);
     // const ctaLight = getThemeColor(props, 'secondary1.20', colors.secondary1['20']);
     var error = getThemeColor(props, 'errors.main', colors.errors.main);
+    var errorLight = getThemeColor(props, 'errors.10', colors.errors['10']);
     var errorDark = getThemeColor(props, 'errors.70', colors.errors['70']);
+    var customColor = props.variantColor || white;
+    var customBorderColor = props.variantBorderColor;
+    var customBg = props.variantBg;
+    var customHoverColor = props.variantHoverColor || white;
+    var customHoverBorderColor = props.variantHoverBorderColor;
+    var customHoverBg = props.variantHoverBg;
     switch (variant) {
         case 'primary':
             return {
@@ -2707,6 +2906,24 @@ var getVariantStyles = function (props, variant) {
                     outlineColor: error,
                 },
             };
+        case 'error-light':
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: error,
+                background: error,
+                color: white,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: errorLight,
+                    background: errorLight,
+                    color: white,
+                },
+                ':focus-visible': {
+                    outlineColor: error,
+                },
+            };
         case 'disabled':
             return {
                 borderWidth: 3,
@@ -2755,6 +2972,45 @@ var getVariantStyles = function (props, variant) {
                     outlineColor: 'transparent',
                 },
             };
+        case 'text-error-light':
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: 'transparent',
+                background: 'transparent',
+                color: error,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: errorLight,
+                    background: errorLight,
+                    color: white,
+                },
+                ':focus-visible': {
+                    outlineColor: 'transparent',
+                },
+            };
+        case 'custom':
+            if (!customBorderColor && !customBg) {
+                return {};
+            }
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: customBorderColor,
+                background: customBg,
+                color: customColor,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: customHoverBorderColor || customBorderColor,
+                    background: customHoverBg || customBg,
+                    color: customHoverColor || customColor,
+                },
+                ':focus-visible': {
+                    outlineColor: customBorderColor,
+                },
+            };
         default:
             return {};
     }
@@ -2817,7 +3073,7 @@ var IconButton = React__default.forwardRef(function (props, ref) {
     var buttonPadding = !hasChildren
         ? getSizeStyle$1('iconOnlyPadding', '12px')
         : getSizeStyle$1('padding', '12px');
-    return (React__default.createElement(Button, __assign({ ref: ref, size: size }, newProps, { style: __assign(__assign(__assign({}, (newProps.style || {})), { padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }), (iconPosition === "top" || iconPosition === "bottom" ? {
+    return (React__default.createElement(Button, __assign({ ref: ref, size: size }, newProps, { style: __assign(__assign({ padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }, (newProps.style || {})), (iconPosition === "top" || iconPosition === "bottom" ? {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -2835,7 +3091,7 @@ var ButtonIcon = React__default.forwardRef(function (props, ref) {
     if (size !== "tiny" && size !== "small") {
         btnSize = "medium";
     }
-    var hoverColor = get(variantStyles, [':hover', 'color']) || '';
+    var hoverColor = (iconProps === null || iconProps === void 0 ? void 0 : iconProps.hoverColor) || get(variantStyles, [':hover', 'color']) || '';
     var iconNewProps = __assign(__assign({}, iconProps), { size: btnSize, color: hoverColor && isHovering ? hoverColor : ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.color) || variantStyles.color || '#fff'), style: __assign({ verticalAlign: 'top', paddingRight: hasChildren && iconPosition === "left" ? '5px' : '0px', paddingLeft: hasChildren && iconPosition === "right" ? '5px' : '0px', boxSizing: 'content-box' }, ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.style) || {})) });
     if (typeof Icon !== 'function') {
         return React__default.cloneElement(Icon, iconNewProps);
@@ -6949,13 +7205,13 @@ var SimpleWindowedTableStyles = styled.div(templateObject_1$V || (templateObject
         ? "background: ".concat(getThemeColor(p, 'tableHeaderBg', '#F6FEFF'), ";")
         : css(p.selectedRowStyle), "\n        }") : ''; });
 function SimpleWindowedTable(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f, _g = _a.tableHeaderProps, tableHeaderProps = _g === void 0 ? {} : _g, _h = _a.tableFooterProps, tableFooterProps = _h === void 0 ? {} : _h, _j = _a.hideFooter, hideFooter = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? '' : _k, NoRowsFound = _a.NoRowsFound;
+    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f, _g = _a.tableHeaderProps, tableHeaderProps = _g === void 0 ? {} : _g, _h = _a.tableFooterProps, tableFooterProps = _h === void 0 ? {} : _h, _j = _a.headerGroupStyle, headerGroupStyle = _j === void 0 ? {} : _j, _k = _a.hideFooter, hideFooter = _k === void 0 ? true : _k, _l = _a.clearRowFullWidth, clearRowFullWidth = _l === void 0 ? false : _l, _m = _a.className, className = _m === void 0 ? '' : _m, NoRowsFound = _a.NoRowsFound;
     var defaultColumn = React__default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
     }); }, [minWidth, maxWidth]);
     var scrollBarSize = React__default.useMemo(function () { return scrollbarWidth(); }, []);
-    var _l = useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _l.getTableProps, getTableBodyProps = _l.getTableBodyProps, headerGroups = _l.headerGroups, footerGroups = _l.footerGroups, rows = _l.rows, totalColumnsWidth = _l.totalColumnsWidth, prepareRow = _l.prepareRow;
+    var _o = useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _o.getTableProps, getTableBodyProps = _o.getTableBodyProps, headerGroups = _o.headerGroups, footerGroups = _o.footerGroups, rows = _o.rows, totalColumnsWidth = _o.totalColumnsWidth, prepareRow = _o.prepareRow;
     var headerRef = useRef(null);
     var footerRef = useRef(null);
     var rowsRef = useRef();
@@ -6980,13 +7236,15 @@ function SimpleWindowedTable(_a) {
         var index = _a.index, isScrolling = _a.isScrolling, style = _a.style;
         var row = rows[index];
         prepareRow(row);
-        return (React__default.createElement("div", __assign({}, row.getRowProps({
-            style: style
-        }), { className: "tr" }), row.cells.map(function (cell) {
+        var rowStyle = __assign({}, (style || {}));
+        if (rowStyle.width && rowStyle.width === '100%' && clearRowFullWidth) {
+            delete rowStyle.width;
+        }
+        return (React__default.createElement("div", __assign({}, row.getRowProps({ style: rowStyle }), { className: "tr" }), row.cells.map(function (cell) {
             var cellProps = cell.getCellProps();
             return (React__default.createElement("div", __assign({}, cellProps, { onClick: function () { return onClickRow ? onClickRow(cell.row.original, index) : null; }, className: "td ".concat(cellProps.className || '') }), cell.render("Cell", { isScrolling: isScrolling })));
         })));
-    }, [prepareRow, rows, onClickRow]);
+    }, [prepareRow, rows, onClickRow, clearRowFullWidth]);
     var getHeaderProps = function (column, isFooter) {
         if (isFooter === void 0) { isFooter = false; }
         var headerProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), (column.containerProps || {})));
@@ -7012,13 +7270,20 @@ function SimpleWindowedTable(_a) {
         return __assign(__assign({}, headerGroupProps), { style: headerStyles, className: headerClassNames });
     };
     return (React__default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React__default.createElement("div", __assign({}, tableHeaderProps, { className: "header-wrapper ".concat(tableHeaderProps.className || '') }), headerGroups.map(function (headerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { className: "header tr", ref: headerRef }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, false)),
-            column.render("Header"),
-            column.canSort ? React__default.createElement("span", { style: { display: 'inline-block', paddingLeft: 5, verticalAlign: 'text-top' } }, column.isSorted ? (column.isSortedDesc ? React__default.createElement(FilledChevronIcon, { direction: "down", width: "15px" }) : React__default.createElement(FilledChevronIcon, { direction: "up", width: "15px" })) : React__default.createElement(FilledChevronIcon, { direction: "updown", width: "15px" })) : null)); }))); })),
+        React__default.createElement("div", __assign({}, tableHeaderProps, { className: "header-wrapper ".concat(tableHeaderProps.className || '') }), headerGroups.map(function (headerGroup) {
+            var headerGroupProps = getHeaderGroupProps(headerGroup, false);
+            return (React__default.createElement("div", __assign({}, headerGroupProps, { className: "header tr", ref: headerRef, style: __assign(__assign({}, (headerGroupProps.style || {})), (headerGroupStyle || {})) }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, false)),
+                column.render("Header"),
+                column.canSort ?
+                    React__default.createElement(FilledChevronIcon, { size: 'medium', direction: column.isSorted
+                            ? (column.isSortedDesc ? 'down' : 'up')
+                            : 'updown', style: { verticalAlign: 'middle' } })
+                    : null)); })));
+        })),
         React__default.createElement("div", __assign({}, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.createElement(NoRowsFound, null) : React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "table-list-rows", outerRef: rowsRef, onScroll: onScroll, useIsScrolling: true }, RenderRow)),
         !hideFooter ? React__default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null));
 }
 var templateObject_1$V;
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes$1 as sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes$1 as sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map