@czi-sds/components 23.2.1 → 23.3.1

package/dist/index.esm.d.ts

@@ -56,12 +56,21 @@ declare const AccordionHeader: (props: AccordionHeaderProps) => import("react/js
 interface AccentColor {
     surfacePrimary: string;
     surfaceSecondary: string;
+    surfaceSecondaryOnDark: string;
     textAction: string;
     textActionHover: string;
     textActionPressed: string;
     fillHover: string;
     fillPressed: string;
     fillPrimary: string;
+    foreground: string;
+    foregroundOnDark: string;
+    foregroundInteraction: string;
+    foregroundInteractionOnDark: string;
+    foregroundPressed: string;
+    foregroundPressedOnDark: string;
+    foregroundActive: string;
+    fillInteraction: string;
     border: string;
     borderHover: string;
     borderPressed: string;
@@ -100,16 +109,23 @@ interface BaseColor {
     textDisabledOnDark: string;
     textDisabledInverse: string;
     textOnFill: string;
-    fillInteraction: string;
-    fillInteractionOnDark: string;
+    fillPrimaryInteraction: string;
+    fillPrimaryInteractionOnDark: string;
     fillHoverInverse: string;
-    fillPressed: string;
-    fillPressedOnDark: string;
+    fillPrimaryPressed: string;
+    fillPrimaryPressedOnDark: string;
     fillPressedInverse: string;
     fillPrimary: string;
     fillOpenInverse: string;
     fillSelected: string;
     fillDisabled: string;
+    fillSecondary: string;
+    fillSecondaryInteraction: string;
+    fillSecondaryPressed: string;
+    fillSecondaryOnDark: string;
+    fillSecondaryInteractionOnDark: string;
+    fillSecondaryPressedOnDark: string;
+    fillDisabledOnDark: string;
     divider: string;
     dividerOnDark: string;
     dividerInverse: string;
@@ -125,6 +141,7 @@ interface BaseColor {
     borderPrimaryDisabled: string;
     borderPrimaryDisabledOnDark: string;
     borderPrimaryDisabledInverse: string;
+    borderSecondaryOnDark: string;
     ornamentDisabled: string;
     ornamentDisabledOnDark: string;
     ornamentDisabledInverse: string;
@@ -150,6 +167,13 @@ interface IntentColor {
     fillPressed: string;
     border: string;
     ornament: string;
+    foreground: string;
+    foregroundOnDark: string;
+    foregroundInteraction: string;
+    foregroundInteractionOnDark: string;
+    foregroundPressed: string;
+    foregroundPressedOnDark: string;
+    fillInteraction: string;
 }
 /**
  * (masoudmanson): The SDSPalette is a custom palette based on
@@ -410,6 +434,7 @@ interface IconSize {
     width: number;
 }
 interface IconSizes {
+    xxs: IconSize;
     xs: IconSize;
     s: IconSize;
     l: IconSize;
@@ -730,125 +755,141 @@ declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps, "r
  */
 declare const Alert: (props: AlertProps) => JSX.Element;
 interface IconNameToSizes {
-    Bacteria: "xs" | "s" | "l" | "xl";
-    BarChartHorizontal3: "xs" | "s";
-    BarChartVertical3: "xs" | "s" | "l" | "xl";
-    BarChartVertical4: "xs" | "s";
-    Book: "xs" | "s" | "l" | "xl";
-    Check: "xs" | "s";
-    CheckCircle: "xs" | "s" | "l" | "xl";
-    ChevronDown: "xs" | "s" | "l" | "xl";
-    ChevronDown2: "xs" | "s";
-    ChevronLeft2: "xs" | "s";
-    ChevronLeft: "xs" | "s" | "l" | "xl";
-    ChevronRight2: "xs" | "s";
-    ChevronRight: "xs" | "s" | "l" | "xl";
-    ChevronUp: "xs" | "s" | "l" | "xl";
-    ChevronUp2: "xs" | "s";
-    CirclesOverlap2: "xs" | "s" | "l" | "xl";
+    ArrowsDiagonalIn: "xxs" | "xs" | "s";
+    ArrowsDiagonalOut: "xxs" | "xs" | "s";
+    ArrowsUpDown: "xxs" | "xs" | "s";
+    Bacteria: "xxs" | "xs" | "s" | "l" | "xl";
+    BarChartHorizontal3: "xxs" | "xs" | "s";
+    BarChartVertical3: "xxs" | "xs" | "s" | "l" | "xl";
+    BarChartVertical4: "xxs" | "xs" | "s";
+    Book: "xxs" | "xs" | "s" | "l" | "xl";
+    Check: "xxs" | "xs" | "s";
+    CheckCircle: "xxs" | "xs" | "s" | "l" | "xl";
+    ChevronDown: "xxs" | "xs" | "s" | "l" | "xl";
+    ChevronDown2: "xxs" | "xs" | "s";
+    ChevronLeft2: "xxs" | "xs" | "s";
+    ChevronLeft: "xxs" | "xs" | "s" | "l" | "xl";
+    ChevronRight2: "xxs" | "xs" | "s";
+    ChevronRight: "xxs" | "xs" | "s" | "l" | "xl";
+    ChevronUp: "xxs" | "xs" | "s" | "l" | "xl";
+    ChevronUp2: "xxs" | "xs" | "s";
+    CirclesOverlap2: "xxs" | "xs" | "s" | "l" | "xl";
     Cli: "l" | "xl";
-    Code: "xs" | "s" | "l" | "xl";
+    Code: "xxs" | "xs" | "s" | "l" | "xl";
     Compass: "l" | "xl";
-    Copy: "xs" | "s" | "l" | "xl";
-    Cube: "xs" | "s" | "l" | "xl";
+    Copy: "xxs" | "xs" | "s" | "l" | "xl";
+    Cube: "xxs" | "xs" | "s" | "l" | "xl";
     DNA: "l" | "xl";
-    Document: "xs" | "s";
-    DotsHorizontal: "xs" | "s" | "l" | "xl";
-    Download: "xs" | "s" | "l" | "xl";
-    Edit: "xs" | "s" | "l" | "xl";
-    Envelope: "xs" | "s";
-    ExclamationMarkCircle: "xs" | "s" | "l" | "xl";
+    Document: "xxs" | "xs" | "s";
+    DotPlot: "xxs" | "xs" | "s";
+    DotsHorizontal: "xxs" | "xs" | "s" | "l" | "xl";
+    Download: "xxs" | "xs" | "s" | "l" | "xl";
+    Droplet: "xxs" | "xs" | "s";
+    Edit: "xxs" | "xs" | "s" | "l" | "xl";
+    Envelope: "xxs" | "xs" | "s";
+    ExclamationMarkCircle: "xxs" | "xs" | "s" | "l" | "xl";
     ExclamationMarkSpeechBubble: "l" | "xl";
-    EyeClosed: "xs" | "s";
-    EyeOpen: "xs" | "s";
-    Filter: "xs" | "s";
-    FlagCheck: "xs" | "s";
-    FlagOutline: "xs" | "s";
-    FlagQuestionMark: "xs" | "s";
-    FlagXMark: "xs" | "s";
+    EyeClosed: "xxs" | "xs" | "s";
+    EyeOpen: "xxs" | "xs" | "s";
+    Filter: "xxs" | "xs" | "s";
+    FlagCheck: "xxs" | "xs" | "s";
+    FlagOutline: "xxs" | "xs" | "s";
+    FlagQuestionMark: "xxs" | "xs" | "s";
+    FlagXMark: "xxs" | "xs" | "s";
     Flask: "l" | "xl";
     FlaskPrivate: "l" | "xl";
     FlaskPublic: "l" | "xl";
-    Gear: "xs" | "s";
-    Github: "xs" | "s";
-    Globe: "xs" | "s";
+    Gear: "xxs" | "xs" | "s";
+    Gene: "xxs" | "xs" | "s";
+    Github: "xxs" | "xs" | "s";
+    Globe: "xxs" | "xs" | "s";
     GlobeBasic: "l" | "xl";
     Grid: "l" | "xl";
     GridDots3: "l" | "xl";
     GridPrivate: "l" | "xl";
     GridPublic: "l" | "xl";
-    House: "xs" | "s";
-    Hand: "xs" | "s";
-    InfoCircle: "xs" | "s" | "l" | "xl";
+    House: "xxs" | "xs" | "s";
+    Hand: "xxs" | "xs" | "s";
+    HandOpen: "xxs" | "xs" | "s";
+    HandPointer: "xxs" | "xs" | "s";
+    InfoCircle: "xxs" | "xs" | "s" | "l" | "xl";
     InfoSpeechBubble: "l" | "xl";
-    LifeRing: "xs" | "s";
-    LightBulb: "xs" | "s" | "l" | "xl";
-    LinesDashed3Solid1: "xs" | "s";
-    LinesHorizontal3: "xs" | "s" | "l" | "xl";
-    Link: "xs" | "s";
-    List: "xs" | "s";
-    Loading: "xs" | "s" | "l" | "xl";
-    Lock: "xs" | "s" | "l" | "xl";
-    LockCircle: "xs" | "s";
-    Minus: "xs" | "s";
-    Open: "xs" | "s";
+    Label: "xxs" | "xs" | "s";
+    Lasso: "xxs" | "xs" | "s";
+    LifeRing: "xxs" | "xs" | "s";
+    LightBulb: "xxs" | "xs" | "s" | "l" | "xl";
+    LinesDashed3Solid1: "xxs" | "xs" | "s";
+    LinesHorizontal3: "xxs" | "xs" | "s" | "l" | "xl";
+    Link: "xxs" | "xs" | "s";
+    List: "xxs" | "xs" | "s";
+    Loading: "xxs" | "xs" | "s" | "l" | "xl";
+    Lock: "xxs" | "xs" | "s" | "l" | "xl";
+    LockCircle: "xxs" | "xs" | "s";
+    Maximize: "xxs" | "xs" | "s";
+    Minimize: "xxs" | "xs" | "s";
+    Minus: "xxs" | "xs" | "s";
+    Open: "xxs" | "xs" | "s";
     Package: "l" | "xl";
     Pause: "l" | "xl";
-    People: "xs" | "s" | "l" | "xl";
-    Percentage: "xs" | "s";
-    Person: "xs" | "s" | "l" | "xl";
-    Pin: "xs" | "s";
-    PinLocation: "xs" | "s";
+    People: "xxs" | "xs" | "s" | "l" | "xl";
+    Percentage: "xxs" | "xs" | "s";
+    Person: "xxs" | "xs" | "s" | "l" | "xl";
+    PieChart: "xxs" | "xs" | "s";
+    PieChartXMark: "xxs" | "xs" | "s";
+    Pin: "xxs" | "xs" | "s";
+    PinLocation: "xxs" | "xs" | "s";
     Play: "l" | "xl";
-    Plus: "xs" | "s";
-    PlusCircle: "xs" | "s";
+    Plus: "xxs" | "xs" | "s";
+    PlusCircle: "xxs" | "xs" | "s";
     ProjectPrivate: "l" | "xl";
     ProjectPublic: "l" | "xl";
-    PuzzlePiece: "xs" | "s";
+    PuzzlePiece: "xxs" | "xs" | "s";
     QuestionMark: "l" | "xl";
-    QuestionMarkCircle: "xs" | "s";
+    QuestionMarkCircle: "xxs" | "xs" | "s";
     Quote: "l" | "xl";
     Read: "l" | "xl";
-    Refresh: "xs" | "s" | "l" | "xl";
+    Refresh: "xxs" | "xs" | "s" | "l" | "xl";
     Report: "l" | "xl";
     Rocket: "l" | "xl";
-    RotateLeft: "xs" | "s";
-    RotateRight: "xs" | "s";
+    RotateLeft: "xxs" | "xs" | "s";
+    RotateRight: "xxs" | "xs" | "s";
     Save: "l" | "xl";
-    Scale: "xs" | "s";
-    ScatterPlot: "xs" | "s";
-    Search: "xs" | "s" | "l" | "xl";
-    SearchLinesHorizontal3: "xs" | "s" | "l" | "xl";
+    Scale: "xxs" | "xs" | "s";
+    ScatterPlot: "xxs" | "xs" | "s";
+    Search: "xxs" | "xs" | "s" | "l" | "xl";
+    SearchLinesHorizontal3: "xxs" | "xs" | "s" | "l" | "xl";
     Send: "l" | "xl";
     Share: "l" | "xl";
     SlidersHorizontal: "l" | "xl";
-    Sparkle: "xs" | "s" | "l" | "xl";
-    Sparkles: "xs" | "s" | "l" | "xl";
+    Sparkle: "xxs" | "xs" | "s" | "l" | "xl";
+    Sparkles: "xxs" | "xs" | "s" | "l" | "xl";
     SpeechBubbles: "l" | "xl";
     SquareOnDashedSquare: "l" | "xl";
-    Starburst: "xs" | "s";
+    SquareOnSquareArrowDownRight: "xxs" | "xs" | "s";
+    Starburst: "xxs" | "xs" | "s";
     Star: "l" | "xl";
-    Table: "xs" | "s";
-    ThumbsDown: "xs" | "s";
-    ThumbsUp: "xs" | "s";
-    TrashCan: "xs" | "s" | "l" | "xl";
+    Table: "xxs" | "xs" | "s";
+    ThumbsDown: "xxs" | "xs" | "s";
+    ThumbsUp: "xxs" | "xs" | "s";
+    TrashCan: "xxs" | "xs" | "s" | "l" | "xl";
     TreeDendogram: "l" | "xl";
-    TreeHorizontal: "xs" | "s" | "l" | "xl";
+    TreeHorizontal: "xxs" | "xs" | "s" | "l" | "xl";
     TreeHorizontalPrivate: "l" | "xl";
     TreeHorizontalPublic: "l" | "xl";
     TreeHorizontalTopRightFilled: "l" | "xl";
-    TreeVertical: "xs" | "s";
-    TriangleDown: "xs" | "s";
-    TriangleLeft: "xs" | "s";
-    TriangleRight: "xs" | "s";
-    TriangleUp: "xs" | "s";
+    TreeVertical: "xxs" | "xs" | "s";
+    TriangleDown: "xxs" | "xs" | "s";
+    TriangleLeft: "xxs" | "xs" | "s";
+    TriangleRight: "xxs" | "xs" | "s";
+    TriangleUp: "xxs" | "xs" | "s";
     Update: "l" | "xl";
+    Umap: "xxs" | "xs" | "s";
     Upload: "l" | "xl";
     Virus: "l" | "xl";
     VirusCircleS: "l" | "xl";
     Widget: "l" | "xl";
-    XMark: "xs" | "s" | "l" | "xl";
-    XMarkCircle: "xs" | "s";
+    XMark: "xxs" | "xs" | "s" | "l" | "xl";
+    XMarkCircle: "xxs" | "xs" | "s";
 }
 interface IconExtraProps<IconName extends keyof IconNameToSizes> extends CommonThemeProps {
     className?: string;
@@ -906,14 +947,14 @@ type ModifiedIconNameToSizes = {
 };
 /*
 In the second step we create a TypeScript interface that is a subset of
-the IconNameToSizes interface, containing only those icons that can be "xs" or "s" in size.
+the IconNameToSizes interface, containing only those icons that can be "xxs", "xs" or "s" in size.
 
 As a result, the MenuItem component accepts a bacteria icon with a
-size value of "xs" | "s" | "l" | "xl" or a check icon with a size value of "xs" | "s",
+size value of "xxs" | "xs" | "s" | "l" | "xl" or a check icon with a size value of "xxs" | "xs" | "s",
 but not a book icon since it has a size value of "l" | "xl".
 */
 type IconNameToSmallSizes = {
-    [K in keyof ModifiedIconNameToSizes as ModifiedIconNameToSizes[K] extends "xs" | "s" ? K : never]: IconNameToSizes[K];
+    [K in keyof ModifiedIconNameToSizes as ModifiedIconNameToSizes[K] extends "xxs" | "xs" | "s" ? K : never]: IconNameToSizes[K];
 };
 interface MenuItemExtraProps<IconName extends keyof IconNameToSmallSizes> {
     column?: React.ReactNode;
@@ -933,7 +974,7 @@ type MenuItemProps<IconName extends keyof IconNameToSmallSizes> = MenuItemExtraP
 /**
  * @see https://mui.com/material-ui/react-menu/
  */
-declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"Bacteria" | "BarChartHorizontal3" | "BarChartVertical3" | "BarChartVertical4" | "Book" | "Check" | "CheckCircle" | "ChevronDown" | "ChevronDown2" | "ChevronLeft2" | "ChevronLeft" | "ChevronRight2" | "ChevronRight" | "ChevronUp" | "ChevronUp2" | "CirclesOverlap2" | "Code" | "Copy" | "Cube" | "Document" | "DotsHorizontal" | "Download" | "Edit" | "Envelope" | "ExclamationMarkCircle" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Github" | "Globe" | "House" | "Hand" | "InfoCircle" | "LifeRing" | "LightBulb" | "LinesDashed3Solid1" | "LinesHorizontal3" | "Link" | "List" | "Loading" | "Lock" | "LockCircle" | "Minus" | "Open" | "People" | "Percentage" | "Person" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "QuestionMarkCircle" | "Refresh" | "RotateLeft" | "RotateRight" | "Scale" | "ScatterPlot" | "Search" | "SearchLinesHorizontal3" | "Sparkle" | "Sparkles" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TrashCan" | "TreeHorizontal" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "XMark" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"ArrowsDiagonalIn" | "ArrowsDiagonalOut" | "ArrowsUpDown" | "BarChartHorizontal3" | "BarChartVertical4" | "Check" | "ChevronDown2" | "ChevronLeft2" | "ChevronRight2" | "ChevronUp2" | "Document" | "DotPlot" | "Droplet" | "Envelope" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Gene" | "Github" | "Globe" | "House" | "Hand" | "HandOpen" | "HandPointer" | "Label" | "Lasso" | "LifeRing" | "LinesDashed3Solid1" | "Link" | "List" | "LockCircle" | "Maximize" | "Minimize" | "Minus" | "Open" | "Percentage" | "PieChart" | "PieChartXMark" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "QuestionMarkCircle" | "RotateLeft" | "RotateRight" | "Scale" | "ScatterPlot" | "SquareOnSquareArrowDownRight" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "Umap" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
 interface StyleProps extends CommonThemeProps {
     count?: number;
     icon?: ReactElement;
@@ -1041,49 +1082,21 @@ interface ExtraAutocompleteProps$0<T, Multiple extends boolean | undefined, Disa
 }
 type AutocompleteProps$0<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>, "options" | "value" | "onChange"> & ExtraAutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>;
 declare const Autocomplete$0: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>(props: AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
-type ButtonTypeMap = {
-    icon: "primary" | "secondary" | "tertiary";
-    minimal: "primary" | "secondary";
-    rounded: "primary" | "secondary" | "destructive";
-    square: "primary" | "secondary" | "destructive";
-};
-type ButtonSize = "small" | "medium" | "large";
-interface BaseButtonProps extends RawButtonProps {
-    children?: React.ReactNode;
-    isAllCaps?: boolean;
+interface ButtonProps extends RawButtonProps {
+    sdsStyle?: "solid" | "outline" | "minimal";
+    sdsType?: "primary" | "secondary" | "destructive";
+    backgroundOnHover?: boolean;
+    backgroundAppearance?: "matchBackground" | "dark";
     target?: HTMLAttributeAnchorTarget;
 }
-interface SdsIconButtonProps extends BaseButtonProps {
-    sdsStyle: "icon";
-    sdsType?: ButtonTypeMap["icon"];
-    sdsSize?: ButtonSize;
-    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-}
-interface SdsMinimalButtonProps extends BaseButtonProps {
-    sdsStyle: "minimal";
-    sdsType?: ButtonTypeMap["minimal"];
-    children: React.ReactNode;
-}
-interface SdsButtonProps extends BaseButtonProps {
-    sdsStyle: "rounded" | "square";
-    isRounded?: boolean;
-    sdsType?: ButtonTypeMap["rounded" | "square"];
-    children: React.ReactNode;
-}
-type SdsProps = SdsIconButtonProps | SdsMinimalButtonProps | SdsButtonProps;
-type ButtonProps = SdsProps;
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-declare const Button: React.ForwardRefExoticComponent<(Omit<SdsIconButtonProps, "ref"> | Omit<SdsMinimalButtonProps, "ref"> | Omit<SdsButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 interface BannerExtraProps extends CommonThemeProps {
     sdsType: "primary" | "secondary";
     intent?: BannerIntentType;
 }
-type ButtonType$0 = ButtonProps & {
-    bannerType: string;
-} & CommonThemeProps;
 type BannerIntentType = "accent" | "info" | "negative" | "notice" | "positive";
 interface BannerProps extends BannerExtraProps {
     children: React.ReactNode;
@@ -1095,36 +1108,13 @@ interface BannerProps extends BannerExtraProps {
     intent?: BannerIntentType;
 }
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement | null>>;
-type SdsProps$0 = {
-    sdsStyle: "icon";
-    sdsType?: ButtonTypeMap["icon"];
-    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-    sdsSize?: ButtonSize;
-} | {
-    sdsStyle: "rounded" | "square";
-    sdsType?: ButtonTypeMap["rounded"];
-    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-    sdsSize?: ButtonSize;
-};
-type ButtonDropdownProps = ButtonProps & SdsProps$0;
+interface ButtonDropdownProps extends Omit<ButtonProps, "sdsType"> {
+    sdsType?: "primary" | "secondary";
+}
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<SdsIconButtonProps & {
-    sdsStyle: "icon";
-    sdsType?: "primary" | "secondary" | "tertiary" | undefined;
-    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
-    sdsSize?: ButtonSize | undefined;
-}, "ref"> | Omit<SdsButtonProps & {
-    sdsStyle: "rounded" | "square";
-    sdsType?: "primary" | "secondary" | "destructive" | undefined;
-    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps, string | React.JSXElementConstructor<any>> | undefined;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
-    sdsSize?: ButtonSize | undefined;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<Omit<ButtonDropdownProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 interface ButtonIconExtraProps extends CommonThemeProps {
     disabled?: boolean;
     sdsSize?: "small" | "medium" | "large";
@@ -1149,7 +1139,84 @@ type ButtonIconProps = ButtonIconExtraProps & RawButtonIconProps & ButtonIconInt
  * Please use `Button` or `ButtonDropdown` with `sdsStyle: icon` instead.
  */
 declare const ButtonIcon: import("react").ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | null>>;
-interface ButtonToggleProps extends ButtonProps$0 {
+interface ButtonToggleProps extends ButtonProps {
+    startIcon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsStage?: "on" | "off";
+}
+/**
+ * @see https://mui.com/material-ui/react-button/
+ */
+declare const ButtonToggle: React.ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ButtonLegacyType = "primary" | "secondary" | "tertiary" | "destructive";
+type ButtonLegacyTypeMap = {
+    icon: "primary" | "secondary" | "tertiary";
+    minimal: "primary" | "secondary";
+    rounded: "primary" | "secondary" | "destructive";
+    square: "primary" | "secondary" | "destructive";
+};
+type ButtonLegacySize = "small" | "medium" | "large";
+interface BaseButtonLegacyProps extends RawButtonProps {
+    children?: React.ReactNode;
+    isAllCaps?: boolean;
+    target?: HTMLAttributeAnchorTarget;
+}
+interface SdsIconButtonLegacyProps extends BaseButtonLegacyProps {
+    sdsStyle: "icon";
+    sdsType?: ButtonLegacyTypeMap["icon"];
+    sdsSize?: ButtonLegacySize;
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
+}
+interface SdsMinimalButtonLegacyProps extends BaseButtonLegacyProps {
+    sdsStyle: "minimal";
+    sdsType?: ButtonLegacyTypeMap["minimal"];
+    children: React.ReactNode;
+}
+interface SdsButtonLegacyProps extends BaseButtonLegacyProps {
+    sdsStyle: "rounded" | "square";
+    isRounded?: boolean;
+    sdsType?: ButtonLegacyTypeMap["rounded" | "square"];
+    children: React.ReactNode;
+}
+type SdsLegacyProps = SdsIconButtonLegacyProps | SdsMinimalButtonLegacyProps | SdsButtonLegacyProps;
+type ButtonLegacyProps = SdsLegacyProps;
+/**
+ * @see https://mui.com/material-ui/react-button/
+ * @deprecated Use Button instead. ButtonLegacy will be removed in a future release.
+ */
+declare const ButtonLegacy: React.ForwardRefExoticComponent<(Omit<SdsIconButtonLegacyProps, "ref"> | Omit<SdsMinimalButtonLegacyProps, "ref"> | Omit<SdsButtonLegacyProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+type SdsLegacyProps$0 = {
+    sdsStyle: "icon";
+    sdsType?: ButtonLegacyTypeMap["icon"];
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
+    sdsSize?: ButtonLegacySize;
+} | {
+    sdsStyle: "rounded" | "square";
+    sdsType?: ButtonLegacyTypeMap["rounded"];
+    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
+    sdsSize?: ButtonLegacySize;
+};
+type ButtonDropdownLegacyProps = ButtonLegacyProps & SdsLegacyProps$0;
+/**
+ * @see https://mui.com/material-ui/react-button/
+ * @deprecated Use ButtonDropdown instead. ButtonDropdownLegacy will be removed in a future release.
+ */
+declare const ButtonDropdownLegacy: React.ForwardRefExoticComponent<(Omit<SdsIconButtonLegacyProps & {
+    sdsStyle: "icon";
+    sdsType?: "primary" | "secondary" | "tertiary" | undefined;
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
+    sdsSize?: ButtonLegacySize | undefined;
+}, "ref"> | Omit<SdsButtonLegacyProps & {
+    sdsStyle: "rounded" | "square";
+    sdsType?: "primary" | "secondary" | "destructive" | undefined;
+    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps, string | React.JSXElementConstructor<any>> | undefined;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
+    sdsSize?: ButtonLegacySize | undefined;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+interface ButtonToggleLegacyProps extends ButtonProps$0 {
     disabled?: boolean;
     icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     sdsSize?: "small" | "medium" | "large";
@@ -1158,8 +1225,9 @@ interface ButtonToggleProps extends ButtonProps$0 {
 }
 /**
  * @see https://mui.com/material-ui/react-button/
+ * @deprecated Use ButtonToggle instead. ButtonToggleLegacy will be removed in a future release.
  */
-declare const ButtonToggle: React.ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonToggleLegacy: React.ForwardRefExoticComponent<Omit<ButtonToggleLegacyProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SDS_STAGE_OPEN = "open";
 declare const SDS_STAGE_CLOSED = "closed";
 type CalloutIntentType = "accent" | "info" | "negative" | "notice" | "positive";
@@ -1431,7 +1499,7 @@ interface BaseContentCardProps extends CardProps {
     decorativeBorder?: boolean;
     children?: ReactNode;
     clickableCard?: boolean;
-    clickableCardProps?: Partial<SdsMinimalButtonProps>;
+    clickableCardProps?: Partial<ButtonProps$0>;
     buttonsPosition?: "left" | "right";
     classes?: {
         cardPaper?: string;
@@ -2019,7 +2087,7 @@ interface NavigationHeaderSecondaryNavProps<T extends string> {
 }
 interface NavigationHeaderProps<T extends string = string> extends Omit<AppBarProps, "position"> {
     activePrimaryNavKey?: string;
-    buttons?: Partial<SdsProps$0 & ButtonProps$0>[] | React.ReactNode[];
+    buttons?: Partial<ButtonProps$0>[] | React.ReactNode[];
     backgroundAppearance?: "matchBackground" | "dark";
     logo?: ReactNode;
     logoUrl?: string;
@@ -2043,7 +2111,7 @@ interface NavigationHeaderProps<T extends string = string> extends Omit<AppBarPr
     isSticky?: boolean;
     topComponentSlot?: ReactNode;
 }
-type IconButtonProps = SdsIconButtonProps & {
+type IconButtonProps = SdsIconButtonLegacyProps & {
     children?: string;
 };
 declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -2264,5 +2332,5 @@ interface DiscreteColorGeneratorOptions {
  * @returns Array of color strings in hex format
  */
 declare const generateDiscreteColors: (count: number, options?: DiscreteColorGeneratorOptions) => string[];
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogExtraProps, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, Hero, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, IntentMessage, Legend, LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxxs, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxxs, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints, DiscreteColorGeneratorOptions, generateDiscreteColors };
-export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, HeroProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, IntentMessageItem, IntentMessageProps, LegendProps, LegendItemData, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, Button, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggle, ButtonLegacyType, ButtonLegacyTypeMap, ButtonLegacySize, SdsIconButtonLegacyProps, SdsMinimalButtonLegacyProps, SdsButtonLegacyProps, SdsLegacyProps, ButtonLegacyProps, ButtonLegacy, ButtonDropdownLegacyProps, ButtonDropdownLegacy, ButtonToggleLegacyProps, ButtonToggleLegacy, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogExtraProps, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, Hero, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, IntentMessage, Legend, LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxxs, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxxs, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints, DiscreteColorGeneratorOptions, generateDiscreteColors };
+export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ButtonProps, ButtonDropdownProps, ButtonToggleProps, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, HeroProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, IntentMessageItem, IntentMessageProps, LegendProps, LegendItemData, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };