@commonsku/styles 1.14.1 → 1.14.2

package/dist/index.d.ts

@@ -225,7 +225,8 @@ declare const sizes: {
     };
 };
 declare type TSize$1 = keyof typeof sizes;
-declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light';
+declare type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close';
+declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'error-light' | 'disabled' | 'text' | 'primary-light';
 declare type ButtonProps = {
     secondary?: boolean;
     cta?: boolean;
@@ -249,10 +250,11 @@ declare type IconButtonProps = React$1.PropsWithChildren<ButtonProps & {
     iconProps?: {
         [key: string]: any;
     };
-    iconPosition?: 'left' | 'right';
+    iconPosition?: 'left' | 'right' | 'top';
+    preset?: ButtonPreset;
     style?: React$1.CSSProperties;
 }> & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function IconButton({ Icon, children, iconPosition, size, iconProps, ...props }: IconButtonProps): JSX.Element;
+declare function IconButton(props: IconButtonProps): JSX.Element;
 
 declare const H1: StyledComponent<"h1", any, {
     underlined?: boolean | undefined;
@@ -1865,207 +1867,6 @@ declare type ThermometerProps = {
 };
 declare function Thermometer({ title, target, value1, value1Label, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): JSX.Element;
 
-declare function TableIcon({ width, height, viewBox, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    viewBox?: string;
-    fill?: string;
-    style?: object;
-}>): JSX.Element;
-
-declare const IconDoc: ({ ext, ...props }: {
-    [key: string]: any;
-    ext?: string | undefined;
-}) => JSX.Element;
-
-declare const DownloadIcon: ({ fill, ...props }: {
-    [key: string]: any;
-}) => JSX.Element;
-
-declare const CalendarIcon: React$1.ForwardRefExoticComponent<{
-    width?: string | number | undefined;
-    height?: string | number | undefined;
-    viewBox?: string | undefined;
-    fill?: string | undefined;
-    style?: object | undefined;
-} & React$1.RefAttributes<SVGSVGElement>>;
-
-declare function CouponIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function AwaitingProofIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function ProofReceivedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function PendingApprovalIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function ChangeRequestedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function ClientApprovedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function ProofingCompleteIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function InfoIcon({ color, width, mr, ml, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    ml?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function LockIcon({ color, width, mr, ml, mt, locked }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    ml?: number;
-    mt?: number;
-    locked?: boolean;
-}>): JSX.Element;
-
-declare function PanelIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function NoteIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function TaskIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function ChatIcon({ color, width, mr, mt, notifs }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-    notifs?: number;
-}>): JSX.Element;
-
-declare function ColumnSelectIcon({ width, mr, mt }: React$1.PropsWithChildren<{
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function NoMarketingIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
-declare function PinIcon({ color, width, mr, mt, pinned }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-    pinned?: boolean;
-}>): JSX.Element;
-
-declare function TrashIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-    pinned?: boolean;
-}>): JSX.Element;
-
-declare function NavConnectIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function NavSalesIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function NavProdIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function NavFinanceIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function NavManagementIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function YesMarketingIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
-    color?: string;
-    width?: string;
-    mr?: number;
-    mt?: number;
-}>): JSX.Element;
-
 declare const iconSize: {
     tiny: {
         width: number;
@@ -2104,40 +1905,205 @@ declare type BaseSVGIconProps = {
     size?: TIconSize;
     width?: string | number;
     height?: string | number;
+    altText?: string;
+    pointer?: boolean;
     iconSizes?: TIconSizeObj;
-};
+} & SharedStyleTypes;
 declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
-declare const SVG: StyledComponent<"svg", any, BaseSVGIconProps, never>;
+declare const SVG: StyledComponent<"svg", any, {
+    size?: "tiny" | "small" | "medium" | "large" | "huge" | "default" | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    altText?: string | undefined;
+    pointer?: boolean | undefined;
+    iconSizes?: {
+        tiny: {
+            width: number;
+            height: number;
+            viewBox: string;
+        };
+        small: {
+            width: number;
+            height: number;
+            viewBox: string;
+        };
+        medium: {
+            width: number;
+            height: number;
+            viewBox: string;
+        };
+        large: {
+            width: number;
+            height: number;
+            viewBox: string;
+        };
+        huge: {
+            width: number;
+            height: number;
+            viewBox: string;
+        };
+        default: {
+            height: number;
+            width: number;
+            viewBox: string;
+        };
+    } | undefined;
+} & SharedStyleTypes, never>;
+
+declare type LightIndicatorProps = {
+    name: string;
+    on?: boolean;
+    large?: boolean;
+};
+declare function LightIndicator({ name, on, large, ...props }: LightIndicatorProps): JSX.Element;
+
+declare type DefaultStarProps = React$1.PropsWithChildren<{
+    initialSelected?: boolean;
+    forceSelected?: boolean;
+    hoverText?: any;
+    noText?: boolean;
+    width?: string | number;
+    color?: string;
+}>;
+declare function DefaultStar({ initialSelected, forceSelected, hoverText, noText, children, width, color, ...props }: DefaultStarProps): JSX.Element;
+
+declare type CancelButtonProps = {
+    size?: TSize$1;
+    style?: React$1.CSSProperties;
+    variant?: ButtonVariant;
+} & SharedStyleTypes & SizerTypes;
+declare function CancelButton({ size, variant, style, ...Props }: CancelButtonProps): JSX.Element;
+
+declare type TableIconProps = SVGIconProps;
+declare function TableIcon({ color, size, altText, ...props }: TableIconProps): JSX.Element;
+
+declare const IconDoc: ({ ext, ...props }: {
+    [key: string]: any;
+    ext?: string | undefined;
+}) => JSX.Element;
+
+declare type CouponIconProps = SVGIconProps;
+declare function CouponIcon({ color, size, altText, ...props }: CouponIconProps): JSX.Element;
+
+declare type AwaitingProofIconProps = SVGIconProps;
+declare function AwaitingProofIcon({ color, size, altText, ...props }: AwaitingProofIconProps): JSX.Element;
+
+declare type ProofReceivedIconProps = SVGIconProps;
+declare function ProofReceivedIcon({ color, size, altText, ...props }: ProofReceivedIconProps): JSX.Element;
+
+declare type PendingApprovalIconProps = SVGIconProps;
+declare function PendingApprovalIcon({ color, size, altText, ...props }: PendingApprovalIconProps): JSX.Element;
+
+declare type ChangeRequestedIconProps = SVGIconProps;
+declare function ChangeRequestedIcon({ color, size, altText, ...props }: ChangeRequestedIconProps): JSX.Element;
+
+declare type ClientApprovedIconProps = SVGIconProps;
+declare function ClientApprovedIcon({ color, size, altText, ...props }: ClientApprovedIconProps): JSX.Element;
+
+declare type ProofingCompleteIconProps = SVGIconProps;
+declare function ProofingCompleteIcon({ color, size, altText, ...props }: ProofingCompleteIconProps): JSX.Element;
+
+declare function ChatIcon({ color, width, mr, mt, notifs }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+    notifs?: number;
+}>): JSX.Element;
+
+declare type ColumnSelectIconProps = SVGIconProps;
+declare function ColumnSelectIcon({ color, size, altText, ...props }: ColumnSelectIconProps): JSX.Element;
+
+declare type NavConnectIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavConnectIcon({ color, size, filled, altText, ...props }: NavConnectIconProps): JSX.Element;
+
+declare type NavSalesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavSalesIcon({ color, size, filled, altText, ...props }: NavSalesIconProps): JSX.Element;
+
+declare type NavProdIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavProdIcon({ color, size, filled, altText, ...props }: NavProdIconProps): JSX.Element;
+
+declare type NavFinanceIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavFinanceIcon({ color, size, filled, altText, ...props }: NavFinanceIconProps): JSX.Element;
+
+declare type NavResourcesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavResourcesIcon({ color, size, filled, altText, ...props }: NavResourcesIconProps): JSX.Element;
+
+declare type NavManagementIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavManagementIcon({ color, size, filled, altText, ...props }: NavManagementIconProps): JSX.Element;
+
+declare type TrashIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+};
+declare function TrashIcon({ color, size, filled, pinned, altText, ...props }: TrashIconProps): JSX.Element;
+
+declare type PinIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+    unpin?: boolean;
+};
+declare function PinIcon({ color, size, filled, unpin, pinned, altText, ...props }: PinIconProps): JSX.Element;
+
+declare type TaskIconProps = SVGIconProps;
+declare function TaskIcon({ color, size, altText, ...props }: TaskIconProps): JSX.Element;
+
+declare type AddTaskIconProps = SVGIconProps;
+declare function AddTaskIcon({ color, size, altText, ...props }: AddTaskIconProps): JSX.Element;
+
+declare type NoteIconProps = SVGIconProps;
+declare function NoteIcon({ color, size, altText, ...props }: NoteIconProps): JSX.Element;
+
+declare type AddNoteIconProps = SVGIconProps;
+declare function AddNoteIcon({ color, size, altText, ...props }: AddNoteIconProps): JSX.Element;
+
+declare type LockIconProps = SVGIconProps & {
+    locked?: boolean;
+};
+declare function LockIcon({ color, size, locked, altText, ...props }: LockIconProps): JSX.Element;
+
+declare type InfoIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+};
+declare function InfoIcon({ color, size, filled, pinned, altText, ...props }: InfoIconProps): JSX.Element;
+
+declare type DownloadIconProps = SVGIconProps;
+declare function DownloadIcon({ color, size, altText, ...props }: DownloadIconProps): JSX.Element;
 
 declare type MarketingStatusIconProps = SVGIconProps & {
     approved?: boolean;
 };
-declare function MarketingStatusIcon({ color, size, approved, ...props }: MarketingStatusIconProps): JSX.Element;
+declare function MarketingStatusIcon({ color, size, approved, altText, ...props }: MarketingStatusIconProps): JSX.Element;
 
 declare type GearIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function GearIcon({ color, filled, size, ...props }: GearIconProps): JSX.Element;
-
-declare function NavResourcesIcon({ width, style, fill, color, outline, // outline/completely filled in
-...props }: React$1.PropsWithChildren<{
-    fill?: string;
-    color?: string;
-    width?: number | string;
-    outline?: boolean;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): JSX.Element;
 
-declare const CircleProgressIcon: ({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, ...props }: React$1.PropsWithChildren<{
-    sqSize?: number | undefined;
-    strokeWidth?: number | undefined;
-    percentage?: number | undefined;
-    strokeColor?: string | undefined;
-    textColor?: string | undefined;
-    text?: string | undefined;
-    textStyle?: React$1.CSSProperties | undefined;
-}>) => JSX.Element;
-//# sourceMappingURL=CircleProgressIcon.d.ts.map
+declare type CircleProgressIconProps = SVGIconProps & {
+    sqSize?: number;
+    strokeWidth?: number;
+    percentage?: number;
+    strokeColor?: string;
+    textColor?: string;
+    text?: string;
+    viewBox?: string;
+    textStyle?: React$1.CSSProperties;
+};
+declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): JSX.Element;
 
 declare function Loading({ height, width, animationDuration, barWidth, barRadius, colorful, bars, viewBox, rotate, startColor, endColor, ...props }: {
     height?: number;
@@ -2154,170 +2120,118 @@ declare function Loading({ height, width, animationDuration, barWidth, barRadius
 } & SharedStyleTypes): JSX.Element;
 //# sourceMappingURL=Loading.d.ts.map
 
-declare function Icon({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function Icon$1({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function Icon$2({ fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
-
-declare function Icon$3({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type SalesArrowIconDirection = 'up' | 'down';
+declare type SalesArrowIconProps = SVGIconProps & {
+    direction?: SalesArrowIconDirection;
+};
+declare function SalesArrowIcon({ color, size, direction, altText, ...props }: SalesArrowIconProps): JSX.Element;
 
-declare function Icon$4({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type AlertIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function AlertIcon({ color, size, filled, altText, ...props }: AlertIconProps): JSX.Element;
 
-declare function Icon$5({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type AddIconProps = SVGIconProps;
+declare function AddIcon({ color, size, altText, ...props }: AddIconProps): JSX.Element;
 
-declare function Icon$6({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type BulletIconProps = SVGIconProps;
+declare function BulletIcon({ color, size, ...props }: BulletIconProps): JSX.Element;
 
 declare type UsersIconProps = SVGIconProps;
-declare function UsersIcon({ color, size, ...props }: UsersIconProps): JSX.Element;
-
-declare function Icon$7({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare function UsersIcon({ color, size, altText, ...props }: UsersIconProps): JSX.Element;
 
-declare function Icon$8({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type ReceiptLongIconProps = SVGIconProps;
+declare function ReceiptLongIcon({ color, size, altText, ...props }: ReceiptLongIconProps): JSX.Element;
 
 declare type FolderIconProps = SVGIconProps;
 declare function FolderIcon({ color, size, ...props }: FolderIconProps): JSX.Element;
 
-declare const Icon$9: React$1.ForwardRefExoticComponent<{
-    width?: string | number | undefined;
-    height?: string | number | undefined;
-    fill?: string | undefined;
-    style?: object | undefined;
-} & React$1.RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=Calendar2Icon.d.ts.map
-
-declare function Icon$a({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    style?: React$1.CSSProperties;
-}>): JSX.Element;
+declare type CalendarIconProps = SVGIconProps;
+declare function CalendarIcon({ color, size, altText, ...props }: CalendarIconProps): JSX.Element;
 
-declare type CrossIconProps = SVGIconProps;
-declare function CrossIcon({ color, size, ...props }: CrossIconProps): JSX.Element;
+declare type PromostandardsIconProps = SVGIconProps;
+declare function PromostandardsIcon({ size, altText, ...props }: PromostandardsIconProps): JSX.Element;
+
+declare type XIconProps = SVGIconProps;
+declare function XIcon({ color, size, altText, ...props }: XIconProps): JSX.Element;
 
 declare type IconVariants = 'primary' | 'cta';
 declare type OpportunityCircleIconProps = SVGIconProps & {
     variant?: IconVariants;
     selected?: boolean;
 };
-declare function OpportunityCircleIcon({ variant, selected, size, style, ...props }: OpportunityCircleIconProps): JSX.Element;
+declare function OpportunityCircleIcon({ variant, selected, size, altText, style, ...props }: OpportunityCircleIconProps): JSX.Element;
 
 declare type IconVariants$1 = 'primary' | 'cta';
 declare type PresentationCircleIconProps = SVGIconProps & {
     variant?: IconVariants$1;
     selected?: boolean;
 };
-declare function PresentationCircleIcon({ variant, selected, size, style, ...props }: PresentationCircleIconProps): JSX.Element;
+declare function PresentationCircleIcon({ variant, selected, size, altText, style, ...props }: PresentationCircleIconProps): JSX.Element;
 
 declare type IconVariants$2 = 'primary' | 'cta';
 declare type EstimateCircleIconProps = SVGIconProps & {
     variant?: IconVariants$2;
     selected?: boolean;
 };
-declare function EstimateCircleIcon({ variant, selected, size, style, ...props }: EstimateCircleIconProps): JSX.Element;
+declare function EstimateCircleIcon({ variant, selected, size, altText, style, ...props }: EstimateCircleIconProps): JSX.Element;
 
 declare type IconVariants$3 = 'primary' | 'cta';
 declare type SalesOrderCircleIconProps = SVGIconProps & {
     variant?: IconVariants$3;
     selected?: boolean;
 };
-declare function SalesOrderCircleIcon({ variant, selected, size, style, ...props }: SalesOrderCircleIconProps): JSX.Element;
+declare function SalesOrderCircleIcon({ variant, selected, size, altText, style, ...props }: SalesOrderCircleIconProps): JSX.Element;
 
 declare type DollarIconProps = SVGIconProps;
-declare function DollarIcon({ color, size, ...props }: DollarIconProps): JSX.Element;
+declare function DollarIcon({ color, size, altText, ...props }: DollarIconProps): JSX.Element;
 
 declare type BotIconProps = SVGIconProps;
-declare function BotIcon({ color, size, ...props }: BotIconProps): JSX.Element;
+declare function BotIcon({ color, size, altText, ...props }: BotIconProps): JSX.Element;
 
 declare type GalleryIconProps = SVGIconProps;
-declare function GalleryIcon({ color, size, ...props }: GalleryIconProps): JSX.Element;
+declare function GalleryIcon({ color, size, altText, ...props }: GalleryIconProps): JSX.Element;
 
 declare type ListIconProps = SVGIconProps;
-declare function ListIcon({ color, size, ...props }: ListIconProps): JSX.Element;
+declare function ListIcon({ color, size, altText, ...props }: ListIconProps): JSX.Element;
 
 declare type TilesIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function TilesIcon({ color, size, filled, ...props }: TilesIconProps): JSX.Element;
+declare function TilesIcon({ color, size, filled, altText, ...props }: TilesIconProps): JSX.Element;
 
 declare type UserIconProps = SVGIconProps;
-declare function UserIcon({ color, size, ...props }: UserIconProps): JSX.Element;
+declare function UserIcon({ color, size, altText, ...props }: UserIconProps): JSX.Element;
 
 declare type ArrowIconDirection = 'up' | 'right' | 'down' | 'left';
 declare type ArrowIconProps = SVGIconProps & {
     direction?: ArrowIconDirection;
 };
-declare function ArrowIcon({ color, direction, size, ...props }: ArrowIconProps): JSX.Element;
+declare function ArrowIcon({ color, direction, altText, size, ...props }: ArrowIconProps): JSX.Element;
 
 declare type ChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
 declare type ChevronIconProps = SVGIconProps & {
     direction?: ChevronIconDirection;
 };
-declare function ChevronIcon({ color, direction, size, ...props }: ChevronIconProps): JSX.Element;
+declare function ChevronIcon({ color, direction, altText, size, ...props }: ChevronIconProps): JSX.Element;
 
 declare type FilledChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
 declare type FilledChevronIconProps = SVGIconProps & {
     direction?: FilledChevronIconDirection;
 };
-declare function FilledChevronIcon({ color, direction, size, ...props }: FilledChevronIconProps): JSX.Element;
+declare function FilledChevronIcon({ color, direction, altText, size, ...props }: FilledChevronIconProps): JSX.Element;
 
-declare type CheckmarkOnlyIconProps = SVGIconProps;
-declare function CheckmarkOnlyIcon({ color, size, ...props }: CheckmarkOnlyIconProps): JSX.Element;
+declare type CheckmarkIconProps = SVGIconProps;
+declare function CheckmarkIcon({ color, size, altText, ...props }: CheckmarkIconProps): JSX.Element;
 
-declare type AddIconProps = SVGIconProps;
-declare function AddIcon({ color, size, ...props }: AddIconProps): JSX.Element;
+declare type AddIconProps$1 = SVGIconProps;
+declare function AddIcon$1({ color, size, altText, ...props }: AddIconProps$1): JSX.Element;
 
 declare type SubtractIconProps = SVGIconProps;
-declare function SubtractIcon({ color, size, ...props }: SubtractIconProps): JSX.Element;
+declare function SubtractIcon({ color, size, altText, ...props }: SubtractIconProps): JSX.Element;
 
 declare type SearchIconProps = SVGIconProps;
-declare function SearchIcon({ color, size, ...props }: SearchIconProps): JSX.Element;
+declare function SearchIcon({ color, size, altText, ...props }: SearchIconProps): JSX.Element;
 
 declare type ClockIconProps = SVGIconProps;
 declare function ClockIcon({ color, size, ...props }: ClockIconProps): JSX.Element;
@@ -2328,7 +2242,53 @@ declare function ClipboardIcon({ color, size, ...props }: ClipboardIconProps): J
 declare type RadioIconProps = SVGIconProps & {
     selected?: boolean;
 };
-declare function RadioIcon({ color, size, selected, ...props }: RadioIconProps): JSX.Element;
+declare function RadioIcon({ color, size, selected, altText, ...props }: RadioIconProps): JSX.Element;
+
+declare type EditIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function EditIcon({ color, size, filled, altText, ...props }: EditIconProps): JSX.Element;
+
+declare type GridIconProps = SVGIconProps;
+declare function GridIcon({ color, size, altText, ...props }: GridIconProps): JSX.Element;
+
+declare type TemplateIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function TemplateIcon({ color, size, filled, altText, ...props }: TemplateIconProps): JSX.Element;
+
+declare type PercentIconProps = SVGIconProps;
+declare function PercentIcon({ color, size, altText, ...props }: PercentIconProps): JSX.Element;
+
+declare type TargetIconProps = SVGIconProps;
+declare function TargetIcon({ color, size, altText, ...props }: TargetIconProps): JSX.Element;
+
+declare type IntegrationsIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function IntegrationsIcon({ color, size, filled, altText, ...props }: IntegrationsIconProps): JSX.Element;
+
+declare type MailIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function MailIcon({ color, size, filled, altText, ...props }: MailIconProps): JSX.Element;
+
+declare type EpsIconProps = SVGIconProps;
+declare function EpsIcon({ color, size, altText, ...props }: EpsIconProps): JSX.Element;
+
+declare type StarIconProps = SVGIconProps & {
+    hover?: boolean;
+    filled?: boolean;
+};
+declare function StarIcon({ color, size, hover, filled, altText, ...props }: StarIconProps): JSX.Element;
+
+declare type EyeIconProps = SVGIconProps & {
+    hide?: boolean;
+};
+declare function EyeIcon({ color, size, hide, altText, ...props }: EyeIconProps): JSX.Element;
+
+declare type MenuIconProps = SVGIconProps;
+declare function MenuIcon({ color, size, altText, ...props }: MenuIconProps): 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
@@ -2617,4 +2577,4 @@ declare type SimpleWindowedTableProps = {
 };
 declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, hideFooter, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
 
-export { AddIcon, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, Icon$6 as BulletIcon, Button, ButtonVariant, ButtonsGroup, Calendar, Icon$9 as Calendar2Icon, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, ChangeRequestedIcon, ChatIcon, CheckMark, Icon$7 as CheckboxIcon, Icon$3 as CheckmarkIcon, CheckmarkOnlyIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, ColumnSelectIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CrossIcon, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DollarIcon, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, ErrorBoundary, Icon$2 as ErrorIcon, EstimateCircleIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, Icon$4 as LeftArrowIcon, Link, ListIcon, Loading, LockIcon, MarketingStatusIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoMarketingIcon, NoteIcon, Number, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelIcon, PanelTileContact, PendingApprovalIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, Icon$a as PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, Icon$8 as ReceiptLongIcon, ResponsiveTable, Icon$5 as RightArrowIcon, Row, RowPropTypes, SHARED_STYLE_MAPS, Icon$1 as SalesDownArrowIcon, SalesOrderCircleIcon, Icon as SalesUpArrowIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, 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, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, Wrapper, YesMarketingIcon, colors, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes, themeOptions };
+export { AddIcon$1 as AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, ColumnSelectIcon, AddIcon as CompletedCheckmarkIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridIcon, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, 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, Wrapper, XIcon, colors, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes, themeOptions };