@commonsku/styles 1.14.7 → 1.15.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import React$1, { CSSProperties, Component, ReactNode } from 'react';
-import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps } from 'styled-components';
+import React$1, { CSSProperties, Component, ReactNode, WeakValidationMap, ComponentType } from 'react';
+import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps, Keyframes, AnyStyledComponent, StyledComponentInnerComponent } from 'styled-components';
 import { DropzoneOptions } from 'react-dropzone';
 import BaseSelect, { Props } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
@@ -8,7 +8,7 @@ import BaseCreatableSelect, { Props as Props$2 } from 'react-select/creatable';
 export { makeCreatableSelect } from 'react-select/creatable';
 import BaseAsyncSelect, { Props as Props$1 } from 'react-select/async';
 import BaseDatePicker, { ReactDatePickerProps } from 'react-datepicker';
-import { UseFiltersColumnProps, UseGroupByColumnProps, UseResizeColumnsColumnProps, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column, SortingRule } from 'react-table';
+import { UseFiltersColumnProps, UseGroupByColumnProps, UseResizeColumnsColumnProps, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
 import { ListOnScrollProps } from 'react-window';
 
 declare type SharedStyleTypes = {
@@ -225,8 +225,8 @@ declare const sizes: {
     };
 };
 declare type TSize$1 = keyof typeof sizes;
-declare type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close';
-declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light';
+declare type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close' | 'drag';
+declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light' | 'text-error';
 declare type ButtonProps = {
     secondary?: boolean;
     cta?: boolean;
@@ -254,7 +254,22 @@ declare type IconButtonProps = React$1.PropsWithChildren<ButtonProps & {
     preset?: ButtonPreset;
     style?: React$1.CSSProperties;
 }> & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function IconButton(props: IconButtonProps): JSX.Element;
+declare const IconButton: React$1.ForwardRefExoticComponent<{
+    secondary?: boolean | undefined;
+    cta?: boolean | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | "huge" | undefined;
+    variant?: ButtonVariant | undefined;
+} & SharedStyleTypes & SizerTypes & {
+    Icon?: TButtonIcon | React$1.ReactElement<IconFuncProps, string | React$1.JSXElementConstructor<any>> | undefined;
+    iconProps?: {
+        [key: string]: any;
+    } | undefined;
+    iconPosition?: "left" | "right" | "bottom" | "top" | undefined;
+    preset?: ButtonPreset | undefined;
+    style?: React$1.CSSProperties | undefined;
+} & {
+    children?: React$1.ReactNode;
+} & React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const H1: StyledComponent<"h1", any, {
     underlined?: boolean | undefined;
@@ -276,6 +291,110 @@ declare const H6: StyledComponent<"h6", any, {
 } & SharedStyleTypes, never>;
 //# sourceMappingURL=Headings.d.ts.map
 
+declare const iconSize: {
+    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;
+    };
+};
+declare type TIconSizeObj = typeof iconSize;
+declare type TIconSize = keyof typeof iconSize;
+declare type BaseSVGIconProps = {
+    size?: TIconSize;
+    width?: string | number;
+    height?: string | number;
+    altText?: string;
+    pointer?: boolean;
+    iconSizes?: TIconSizeObj;
+    disabled?: boolean;
+} & SharedStyleTypes;
+declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
+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;
+    disabled?: boolean | undefined;
+} & SharedStyleTypes, never>;
+
+declare type RadioIconProps = SVGIconProps & {
+    selected?: boolean;
+    hover?: boolean;
+    hoverColor?: string;
+    disabled?: boolean;
+    disabledColor?: string;
+};
+declare function RadioIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, altText, ...props }: RadioIconProps): JSX.Element;
+
+declare type CheckboxIconProps = SVGIconProps & {
+    selected?: boolean;
+    hover?: boolean;
+    hoverColor?: string;
+    disabled?: boolean;
+    disabledColor?: string;
+    indeterminate?: boolean;
+};
+declare function CheckboxIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, indeterminate, altText, ...props }: CheckboxIconProps): JSX.Element;
+
 declare type CommonInputProp = {
     noMargin?: boolean;
     error?: boolean;
@@ -300,6 +419,7 @@ declare const LabeledInput: React$1.ForwardRefExoticComponent<React$1.InputHTMLA
     label: string;
     name?: string | undefined;
     labelOnTop?: boolean | undefined;
+    wrapperProps?: React$1.HTMLAttributes<HTMLDivElement> | undefined;
 } & React$1.RefAttributes<HTMLInputElement>>;
 declare const LabeledIconInput: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & CommonInputProp & {
     hasIcon?: boolean | undefined;
@@ -338,6 +458,8 @@ declare type LabeledRadioProps = RadioProps & {
     radioIconStyle?: React$1.CSSProperties;
     radioColor?: string;
     radioHoverColor?: string;
+    labelProps?: React$1.LabelHTMLAttributes<HTMLLabelElement>;
+    radioIconProps?: RadioIconProps;
 };
 declare const LabeledRadio: React$1.FC<LabeledRadioProps>;
 declare const LabeledRadioInButton: React$1.FC<LabeledRadioProps & {
@@ -368,6 +490,8 @@ declare type LabeledCheckboxProps = {
     checkboxHoverColor?: string;
     hoverByLabel?: boolean;
     stopPropagation?: boolean;
+    labelProps?: React$1.LabelHTMLAttributes<HTMLLabelElement>;
+    checkboxIconProps?: CheckboxIconProps;
     [key: string]: any;
 } & React$1.InputHTMLAttributes<HTMLInputElement>;
 declare const LabeledCheckbox: React$1.ForwardRefExoticComponent<LabeledCheckboxProps>;
@@ -493,6 +617,58 @@ declare const THSorted: ({ children, order, iconHeight, iconStyles, hideIconOnMo
 }>) => JSX.Element;
 //# sourceMappingURL=Table.d.ts.map
 
+declare const GridTableContainer: StyledComponent<"div", any, {
+    width?: string | undefined;
+    gridTemplateRows?: string | undefined;
+    gridTemplateColumns: string;
+    gridRowGap?: string | undefined;
+    gridColumnGap?: string | undefined;
+} & SharedStyleTypes, never>;
+declare const GridRow: StyledComponent<"div", any, {
+    gridTemplateColumns: string;
+    gridColumnGap?: string | undefined;
+} & SharedStyleTypes, never>;
+declare const GridCell: StyledComponent<"div", any, {
+    width?: string | undefined;
+    header?: boolean | undefined;
+    centerContent?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare type TValue = string | number | object;
+declare type TransformFunction = (value: any | {
+    label: string;
+    value: string;
+}) => TValue;
+declare type TChild = React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
+declare type ColumnProps = {
+    name: string;
+    title: React$1.ReactNode;
+    children: TChild;
+    centerContent?: boolean;
+    transform?: TransformFunction;
+};
+declare type GridTableProps = {
+    data: {
+        id: number | string;
+        [key: string]: any;
+    }[];
+    idField?: string;
+    children: TChild | TChild[];
+    onUpdate?: (value: object) => void;
+    onDelete?: (id: number | string) => void;
+    onAdd?: (data: any) => void;
+    onSort?: (id: number | string, index: number | string) => void;
+    validate?: (data: any) => {
+        [key: string]: false | string;
+    };
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+    gridRowGap?: string;
+    gridColumnGap?: string;
+} & SharedStyleTypes & SizerTypes;
+declare const Column: ({ name, title, children, centerContent, transform, }: ColumnProps) => JSX.Element;
+declare function GridTable({ data, idField, onUpdate, onDelete, onAdd, onSort, validate, children, gridTemplateRows, gridTemplateColumns, gridRowGap, gridColumnGap, ...props }: GridTableProps): JSX.Element;
+//# sourceMappingURL=GridTable.d.ts.map
+
 declare const tabSizes: {
     small: FlattenSimpleInterpolation;
     medium: FlattenSimpleInterpolation;
@@ -503,6 +679,7 @@ declare const TabBar: StyledComponent<"ul", any, {
 declare const Tab: StyledComponent<"li", any, {
     selected?: boolean | undefined;
     size?: "small" | "medium" | undefined;
+    variant?: "primary" | "secondary" | undefined;
 } & SharedStyleTypes, never>;
 declare type TTab = {
     label: string;
@@ -618,7 +795,6 @@ declare const StarRating: (props: {
     rating: number;
 } & SharedStyleTypes) => JSX.Element;
 
-declare const Grid: StyledComponent<"div", any, SharedStyleTypes, never>;
 declare type RowPropTypes = {
     justify?: string;
     wrap?: string;
@@ -640,17 +816,26 @@ declare const Row: StyledComponent<"div", any, {
 declare type ColPropTypes = SizerTypes & SharedStyleTypes;
 declare const Col: StyledComponent<"div", any, SizerTypes & SharedStyleTypes, never>;
 
-declare const Overlay: StyledComponent<"div", any, {}, never>;
+declare const Overlay: StyledComponent<"div", any, {
+    zIndex?: number | undefined;
+}, never>;
 declare const PopupHeader: StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
 declare type PopupProps = React$1.PropsWithChildren<{
     header?: React$1.Component;
+    noHeader?: boolean;
     title?: string | React$1.Component;
     controls?: Array<React$1.ReactNode>;
     onClose?: (event?: React$1.MouseEvent) => void;
+    noCloseButton?: boolean;
     closeOnClickOutside?: boolean;
     closeOnEsc?: boolean;
+    width?: string;
+    height?: string;
+    padding?: string;
+    zIndex?: number;
+    overlayZIndex?: number;
 } & SharedStyleTypes> & React$1.HTMLAttributes<HTMLDivElement>;
-declare const Popup: ({ header, title, controls, children, onClose, closeOnEsc, closeOnClickOutside, ...props }: PopupProps) => JSX.Element;
+declare const Popup: ({ header, noHeader, title, controls, children, onClose, noCloseButton, closeOnEsc, closeOnClickOutside, overlayZIndex, ...props }: PopupProps) => JSX.Element;
 declare const ShowPopup: React$1.FC<Omit<PopupProps, 'onClose'> & {
     popup: React$1.ComponentType<PopupProps>;
     autoOpen?: boolean;
@@ -1627,6 +1812,22 @@ declare const themeOptions: {
         '9': string;
         '10': string;
     };
+    mediaQueries: {
+        sizeMediaWidth: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        sizeMedia: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
 };
 declare function getColor(color?: string, def?: string): string;
 declare function getFontStyle(value?: string, def?: string): string;
@@ -1661,18 +1862,16 @@ declare const Text: StyledComponent<"span", any, {
 } & SharedStyleTypes, never>;
 declare const Link: StyledComponent<React$1.FC<{
     highlight?: boolean | undefined;
-} & (({
+} & {
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
 } & {
     theme?: any;
-} & ({} | {
-    children?: React$1.ReactNode;
-})) & {
+} & {
     as?: string | React$1.ComponentType<any> | undefined;
     forwardedAs?: string | React$1.ComponentType<any> | undefined;
-}) & SharedStyleTypes>, any, {}, never>;
+} & SharedStyleTypes>, any, {}, never>;
 declare const Number: React$1.FC<{
     num: number;
     commas?: boolean;
@@ -1719,8 +1918,14 @@ declare type DropdownContentProps = {
     primary?: boolean;
     underlined?: boolean;
     text?: string;
+    width?: string | number;
+    bordered?: boolean;
 };
-declare const DropdownItem: StyledComponent<"div", any, DropdownContentProps, never>;
+declare type DropdownItemProps = {
+    primary?: boolean;
+    underlined?: boolean;
+};
+declare const DropdownItem: StyledComponent<"div", any, DropdownItemProps, never>;
 declare const DropDownContent: StyledComponent<"div", any, DropdownContentProps, never>;
 declare type TDropdownItem = {
     onClick?: Function | VoidFunction | null;
@@ -1738,8 +1943,12 @@ declare type DropdownProps = {
     size?: TSize$1;
     style?: CSSObject;
     buttonVariant?: ButtonVariant;
+    width?: string | number;
+    bordered?: boolean;
+    hideOnMouseLeave?: boolean;
+    onToggleMenu?: (value: boolean) => void;
 };
-declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, mouseLeaveCallback, size, style, buttonVariant, ...props }: React$1.PropsWithChildren<DropdownProps & DropdownContentProps>) => JSX.Element;
+declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, onToggleMenu, mouseLeaveCallback, size, style, buttonVariant, width, bordered, hideOnMouseLeave, ...props }: React$1.PropsWithChildren<DropdownProps & DropdownContentProps>) => JSX.Element;
 
 declare const Badge: StyledComponent<"span", any, {
     color?: string | undefined;
@@ -1895,7 +2104,7 @@ declare type ProgressBarsProps = React$1.PropsWithChildren<{
     error?: string;
     title?: string;
 } & SharedStyleTypes>;
-declare const MultiProgress: ({ labeled, error, values, max: maxVal, ...props }: {
+declare const MultiProgress: ({ labeled, error, values, max, ...props }: {
     values: ProgressBarValue[];
     max: number;
     color?: string | undefined;
@@ -1924,97 +2133,13 @@ declare type ThermometerProps = {
 };
 declare function Thermometer({ title, target, value1, value1Label, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): JSX.Element;
 
-declare const iconSize: {
-    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;
-    };
-};
-declare type TIconSizeObj = typeof iconSize;
-declare type TIconSize = keyof typeof iconSize;
-declare type BaseSVGIconProps = {
-    size?: TIconSize;
-    width?: string | number;
-    height?: string | number;
-    altText?: string;
-    pointer?: boolean;
-    iconSizes?: TIconSizeObj;
-    disabled?: boolean;
-} & SharedStyleTypes;
-declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
-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;
-    disabled?: boolean | undefined;
-} & SharedStyleTypes, never>;
-
 declare type LightIndicatorProps = {
     name: string;
     on?: boolean;
     large?: boolean;
+    textProps?: React$1.HTMLAttributes<HTMLParagraphElement>;
 };
-declare function LightIndicator({ name, on, large, ...props }: LightIndicatorProps): JSX.Element;
+declare function LightIndicator({ name, on, large, textProps, ...props }: LightIndicatorProps): JSX.Element;
 
 declare type DefaultStarProps = React$1.PropsWithChildren<{
     initialSelected?: boolean;
@@ -2114,7 +2239,7 @@ interface Row$1<D extends Record<string, unknown> = Record<string, unknown>> ext
 }
 
 declare type VirtualTableProps = {
-    columns: Column<object>[];
+    columns: Column$1<object>[];
     data: object[];
     itemSize?: (value: {
         index: number;
@@ -2124,7 +2249,12 @@ declare type VirtualTableProps = {
     minWidth?: number;
     maxWidth?: number;
     defaultSort?: SortingRule<string>;
-    onClickRow?: (row?: object, index?: number) => void;
+    onClickRow?: (row?: object, index?: number, data?: {
+        isScrolling: boolean;
+        cell: Cell<Record<string, unknown>, any>;
+        resetList: (index?: number) => void;
+        toggleAllRowsExpanded: (value?: boolean | undefined) => void;
+    }) => void;
     onScroll?: ((props: ListOnScrollProps) => any);
     onUpdateData?: (...args: any) => void;
     useTableProps?: object;
@@ -2175,6 +2305,105 @@ declare const VirtualTableStyles: StyledComponent<"div", any, {
 }, never>;
 //# sourceMappingURL=VirtualTableStyles.d.ts.map
 
+declare type ResponsiveValue<T = string | number> = T | Array<T | null> | {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+};
+
+declare const createMeasurementStyle: (v: string | number, keys: string[]) => {};
+declare type BaseCskuProps = {
+    pr?: ResponsiveValue<string | number>;
+    pl?: ResponsiveValue<string | number>;
+    pt?: ResponsiveValue<string | number>;
+    pb?: ResponsiveValue<string | number>;
+    px?: ResponsiveValue<string | number>;
+    py?: ResponsiveValue<string | number>;
+    mr?: ResponsiveValue<string | number>;
+    ml?: ResponsiveValue<string | number>;
+    mt?: ResponsiveValue<string | number>;
+    mb?: ResponsiveValue<string | number>;
+    mx?: ResponsiveValue<string | number>;
+    my?: ResponsiveValue<string | number>;
+    width?: ResponsiveValue<string | number>;
+    height?: ResponsiveValue<string | number>;
+    color?: ResponsiveValue<string>;
+    bg?: ResponsiveValue<string>;
+    background?: ResponsiveValue<string>;
+    backgroundColor?: ResponsiveValue<string>;
+    hidden?: ResponsiveValue<boolean>;
+    block?: ResponsiveValue<boolean>;
+    inline_block?: ResponsiveValue<boolean>;
+    flex?: ResponsiveValue<boolean>;
+    inline_flex?: ResponsiveValue<boolean>;
+    grid?: ResponsiveValue<boolean>;
+    float?: ResponsiveValue<string>;
+    colSpan?: ResponsiveValue<string | number | boolean>;
+    style?: ResponsiveValue<CSSObject>;
+    sx?: ResponsiveValue<CSSObject>;
+};
+declare const parseCskuStyles: (p: BaseCskuProps) => (string | number | false | CSSObject | Keyframes | {
+    readonly $$typeof: symbol;
+    defaultProps?: Partial<{
+        [x: string]: any;
+    } & {
+        theme?: any;
+    }> | undefined;
+    displayName?: string | undefined;
+    propTypes?: WeakValidationMap<{
+        [x: string]: any;
+    } & {
+        theme?: any;
+    }> | undefined;
+    withComponent: {
+        <WithC extends AnyStyledComponent>(component: WithC): StyledComponent<StyledComponentInnerComponent<WithC>, any, any, any>;
+        <WithC_1 extends ComponentType<any> | keyof JSX.IntrinsicElements>(component: WithC_1): StyledComponent<WithC_1, any, any, any>;
+    };
+} | {
+    [key: string]: CSSObject;
+} | FlattenSimpleInterpolation | null | undefined)[];
+declare type CskuProps = StyledComponent<"div", any, BaseCskuProps, never>;
+declare const Csku: StyledComponent<"div", any, BaseCskuProps, never>;
+
+declare type BaseGridProps = {
+    columns?: number;
+    gap?: number | string;
+};
+declare type GridProps = React$1.HTMLAttributes<HTMLDivElement & BaseGridProps>;
+declare const Grid: StyledComponent<"div", any, BaseGridProps, never>;
+declare type BaseGridItemProps = {
+    colSpan?: ResponsiveValue<string | number | boolean>;
+    style?: ResponsiveValue<CSSObject>;
+};
+declare type GridItemProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'style'> & BaseGridItemProps;
+declare const GridItem: StyledComponent<"div", any, BaseGridItemProps, never>;
+
+declare type TReactNode = React$1.ReactChild | React$1.ReactPortal | null | undefined;
+declare type CollapsibleProps$1 = React$1.PropsWithChildren<{
+    style?: React$1.CSSProperties;
+    label: TReactNode;
+    controls?: TReactNode;
+    open?: boolean;
+    onToggleOpen?: (v: boolean) => void;
+}>;
+declare const Collapsible$1: (props: CollapsibleProps$1) => JSX.Element;
+declare type CollapsibleLabelProps = {
+    children?: TReactNode;
+    isOpen?: boolean;
+};
+declare const CollapsibleLabel: (props: CollapsibleLabelProps) => JSX.Element | null;
+declare type CollapsibleArrowIconProps = {
+    isOpen?: boolean;
+};
+declare const CollapsibleArrowIcon: (props: CollapsibleArrowIconProps) => JSX.Element;
+declare type CollapsiblesProps = {
+    list: CollapsibleProps$1[];
+    controls?: TReactNode;
+};
+declare function Collapsibles(props: CollapsiblesProps): JSX.Element;
+
 declare type TableIconProps = SVGIconProps;
 declare function TableIcon({ color, size, altText, ...props }: TableIconProps): JSX.Element;
 
@@ -2440,24 +2669,6 @@ declare function ClockIcon({ color, size, ...props }: ClockIconProps): JSX.Eleme
 declare type ClipboardIconProps = SVGIconProps;
 declare function ClipboardIcon({ color, size, ...props }: ClipboardIconProps): JSX.Element;
 
-declare type RadioIconProps = SVGIconProps & {
-    selected?: boolean;
-    hover?: boolean;
-    hoverColor?: string;
-    disabled?: boolean;
-    disabledColor?: string;
-};
-declare function RadioIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, altText, ...props }: RadioIconProps): JSX.Element;
-
-declare type CheckboxIconProps = SVGIconProps & {
-    selected?: boolean;
-    hover?: boolean;
-    hoverColor?: string;
-    disabled?: boolean;
-    disabledColor?: string;
-};
-declare function CheckboxIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, altText, ...props }: CheckboxIconProps): JSX.Element;
-
 declare type EditIconProps = SVGIconProps & {
     filled?: boolean;
 };
@@ -2512,6 +2723,9 @@ declare function CommentIcon({ color, size, altText, number, ...props }: Comment
 declare type EllipsisIconProps = SVGIconProps;
 declare function EllipsisIcon({ color, size, altText, ...props }: EllipsisIconProps): JSX.Element;
 
+declare type DragIconProps = SVGIconProps;
+declare function DragIcon({ color, size, altText, ...props }: DragIconProps): JSX.Element;
+
 declare type CreditCardIcon = SVGIconProps;
 declare function CreditCardIcon({ color, size, altText, ...props }: CreditCardIcon): JSX.Element;
 
@@ -2521,9 +2735,20 @@ declare function ShopIcon({ color, size, altText, ...props }: ShopIcon): JSX.Ele
 declare type HistoryIcon = SVGIconProps;
 declare function HistoryIcon({ color, size, altText, ...props }: HistoryIcon): JSX.Element;
 
+declare type HandleIcon = SVGIconProps;
+declare function HandleIcon({ color, size, altText, ...props }: HandleIcon): 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
 
+declare type ConfirmPopupProps = {
+    disableDelete?: boolean;
+    confirmText?: string;
+    onDelete?: () => void;
+    onClose?: () => void;
+};
+declare const ConfirmPopup: (props: ConfirmPopupProps) => JSX.Element;
+
 declare type CalendarDayBodyProps = React$1.PropsWithChildren<{
     day: Date;
     selectedDate: Date;
@@ -2780,7 +3005,7 @@ declare const SimpleWindowedTableStyles: StyledComponent<"div", any, {
     selectedRowStyle?: boolean | CSSObject | undefined;
 }, never>;
 declare type SimpleWindowedTableProps = {
-    columns: Column<object>[];
+    columns: Column$1<object>[];
     data: object[];
     itemSize?: number;
     height?: number;
@@ -2808,4 +3033,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, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, 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, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridIcon, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, 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, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes, themeOptions, toggleSizes };
+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, 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, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, 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 };