@czi-sds/components 22.6.0 → 22.7.0

package/dist/index.cjs.d.ts

@@ -984,6 +984,8 @@ interface TooltipExtraProps extends CommonThemeProps {
     hasInvertedStyle?: boolean;
     subtitle?: React.ReactNode;
     width?: "default" | "wide";
+    textAlign?: "left" | "center" | "right";
+    componentSlot?: React.ReactNode;
 }
 type TooltipProps = TooltipExtraProps & RawTooltipProps;
 /**
@@ -1290,7 +1292,7 @@ declare const Title: import("@emotion/styled").StyledComponent<import("@mui/mate
 }, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & DialogTitleExtraProps, {}, {}>;
-declare const Subtitle$0: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+declare const Subtitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -1800,5 +1802,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, 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, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as 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, createAppThemeBorders, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, 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, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as 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, createAppThemeBorders, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.cjs.js

@@ -1646,7 +1646,7 @@ var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(t
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
 });
-var StyledSubtitle = styled__default.default("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
@@ -4455,7 +4455,7 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
 
 var AccordionHeader = function (props) {
     var children = props.children, id = props.id, subtitle = props.subtitle;
-    return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
+    return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle$1, { children: subtitle })] }));
 };
 
 var sdsPropNames$2 = ["useDivider", "togglePosition"];
@@ -4741,7 +4741,7 @@ var StyledMinimalButton = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
 })(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
-    return react.css(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
+    return react.css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
 });
 var StyledButtonLegacy = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
@@ -4752,7 +4752,7 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
     var spaces = getSpaces(props);
     return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$8, templateObject_10$6, templateObject_11$5;
+var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
 
 var isDisabled$1 = function (props) {
     var _a, _b;
@@ -4809,11 +4809,11 @@ var doNotForwardProps$D = [
 ];
 var StyledButtonIcon = styled__default.default(material.IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
-})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+})(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
     return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
-var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7;
+var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$8;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -5931,36 +5931,45 @@ var dark$1 = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
+    return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var light$1 = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
-};
-var wide = function () {
-    return css.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n    max-width: 550px;\n  "], ["\n    max-width: 550px;\n  "])));
+    return css.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var tableStyles = function (props) {
     var spaces = getSpaces(props);
-    return css.css(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
+    return css.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
 };
-var doNotForwardProps$w = ["hasInvertedStyle"];
-var Subtitle$1 = styled__default.default("div", {
+var doNotForwardProps$w = ["hasInvertedStyle", "textAlign"];
+var StyledTitle = styled__default.default("p", {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
+})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXs, function (props) {
+    var _a, _b;
+    var hasInvertedStyle = props.hasInvertedStyle;
+    var semanticColors = getSemanticColors(props);
+    return "\n      margin: 0;\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n    ");
+});
+var StyledSubtitle = styled__default.default("p", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
 })(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle;
     var semanticColors = getSemanticColors(props);
-    return "\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
+    return "\n      margin: 0;\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
 var tooltipCss = function (props) {
-    var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
+    var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor, textAlign = props.textAlign;
     var shadows = getShadows(props);
-    return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
+    return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n      max-width: ", " !important;\n      text-align: ", " !important;\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n      max-width: ", " !important;\n      text-align: ", " !important;\n\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
+        ? textAlign
+        : width === "wide"
+            ? "left"
+            : "center", sdsStyle === "dark" || inverted || hasInvertedStyle
         ? dark$1(props)
-        : light$1(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
+        : light$1(props), followCursor === true && tableStyles(props));
 };
 var arrowCss = function (props) {
     var _a, _b;
@@ -5975,7 +5984,11 @@ var arrowCss = function (props) {
  * default placement which is calculated by javascript
  */
 var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"], ["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
-var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a;
+var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var spaces = getSpaces(props);
+    return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n    ");
+});
+var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a, templateObject_9$7;
 
 /**
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5985,7 +5998,7 @@ var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4
  * https://mui.com/components/tooltips/#disabled-elements
  */
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
+    var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, textAlign = props.textAlign, componentSlot = props.componentSlot, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent", "textAlign", "componentSlot"]);
     var children = rest.children;
     if (inverted || sdsStyle) {
         showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
@@ -5999,6 +6012,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         arrowOffset: arrowOffset,
         classes: classes,
         hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
+        textAlign: textAlign,
         theme: theme,
         width: width,
         /* stylelint-enable property-no-unknown -- false positive */
@@ -6017,7 +6031,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     // a tooltip. this matches with the native MUI behavior.
     if (!title && !subtitle)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
-    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, subtitle && (jsxRuntime.jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
+    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx(StyledTitle, { hasInvertedStyle: hasInvertedStyle, children: title })), subtitle && (jsxRuntime.jsx(StyledSubtitle, { hasInvertedStyle: hasInvertedStyle, children: subtitle })), componentSlot && (jsxRuntime.jsx(StyledComponentSlotWrapper, { children: componentSlot }))] }));
     var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
     return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, 
         // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
@@ -15495,7 +15509,7 @@ var StyledDrawer = styled__default.default(material.Drawer, {
 });
 var StyledHeaderComponent = styled__default.default("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
-    return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
+    return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl);
 });
 var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
 

package/dist/index.esm.d.ts

@@ -984,6 +984,8 @@ interface TooltipExtraProps extends CommonThemeProps {
     hasInvertedStyle?: boolean;
     subtitle?: React.ReactNode;
     width?: "default" | "wide";
+    textAlign?: "left" | "center" | "right";
+    componentSlot?: React.ReactNode;
 }
 type TooltipProps = TooltipExtraProps & RawTooltipProps;
 /**
@@ -1290,7 +1292,7 @@ declare const Title: import("@emotion/styled").StyledComponent<import("@mui/mate
 }, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & DialogTitleExtraProps, {}, {}>;
-declare const Subtitle$0: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+declare const Subtitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -1800,5 +1802,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, 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, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as 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, createAppThemeBorders, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, 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, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as 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, createAppThemeBorders, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.esm.js

@@ -1623,7 +1623,7 @@ var StyledAccordionHeader = styled$2(AccordionSummary)(templateObject_2$L || (te
     var semanticColors = getSemanticColors(props);
     return css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, accordionSummaryClasses.content, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
 });
-var StyledSubtitle = styled$2("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSubtitle$1 = styled$2("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
@@ -4432,7 +4432,7 @@ var Icon = forwardRef(function Icon(_a, ref) {
 
 var AccordionHeader = function (props) {
     var children = props.children, id = props.id, subtitle = props.subtitle;
-    return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
+    return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle$1, { children: subtitle })] }));
 };
 
 var sdsPropNames$2 = ["useDivider", "togglePosition"];
@@ -4718,7 +4718,7 @@ var StyledMinimalButton = styled$2(Button$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
 })(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
-    return css(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
+    return css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
 });
 var StyledButtonLegacy = styled$2(Button$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
@@ -4729,7 +4729,7 @@ var StyledButtonLegacy = styled$2(Button$1, {
     var spaces = getSpaces(props);
     return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$8, templateObject_10$6, templateObject_11$5;
+var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
 
 var isDisabled$1 = function (props) {
     var _a, _b;
@@ -4786,11 +4786,11 @@ var doNotForwardProps$D = [
 ];
 var StyledButtonIcon = styled$2(IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
-})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+})(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
     return css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
-var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7;
+var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$8;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -5908,36 +5908,45 @@ var dark$1 = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css$1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
+    return css$1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var light$1 = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css$1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
-};
-var wide = function () {
-    return css$1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n    max-width: 550px;\n  "], ["\n    max-width: 550px;\n  "])));
+    return css$1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var tableStyles = function (props) {
     var spaces = getSpaces(props);
-    return css$1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
+    return css$1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
 };
-var doNotForwardProps$w = ["hasInvertedStyle"];
-var Subtitle$1 = styled$2("div", {
+var doNotForwardProps$w = ["hasInvertedStyle", "textAlign"];
+var StyledTitle = styled$2("p", {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
+})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXs, function (props) {
+    var _a, _b;
+    var hasInvertedStyle = props.hasInvertedStyle;
+    var semanticColors = getSemanticColors(props);
+    return "\n      margin: 0;\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n    ");
+});
+var StyledSubtitle = styled$2("p", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
 })(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle;
     var semanticColors = getSemanticColors(props);
-    return "\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
+    return "\n      margin: 0;\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
 var tooltipCss = function (props) {
-    var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
+    var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor, textAlign = props.textAlign;
     var shadows = getShadows(props);
-    return css$1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
+    return css$1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n      max-width: ", " !important;\n      text-align: ", " !important;\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n      max-width: ", " !important;\n      text-align: ", " !important;\n\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
+        ? textAlign
+        : width === "wide"
+            ? "left"
+            : "center", sdsStyle === "dark" || inverted || hasInvertedStyle
         ? dark$1(props)
-        : light$1(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
+        : light$1(props), followCursor === true && tableStyles(props));
 };
 var arrowCss = function (props) {
     var _a, _b;
@@ -5952,7 +5961,11 @@ var arrowCss = function (props) {
  * default placement which is calculated by javascript
  */
 var StyledPopper$1 = styled$2(Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"], ["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
-var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a;
+var StyledComponentSlotWrapper = styled$2("div")(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var spaces = getSpaces(props);
+    return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n    ");
+});
+var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a, templateObject_9$7;
 
 /**
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5962,7 +5975,7 @@ var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4
  * https://mui.com/components/tooltips/#disabled-elements
  */
 var Tooltip = forwardRef(function Tooltip(props, ref) {
-    var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
+    var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, textAlign = props.textAlign, componentSlot = props.componentSlot, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent", "textAlign", "componentSlot"]);
     var children = rest.children;
     if (inverted || sdsStyle) {
         showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
@@ -5976,6 +5989,7 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
         arrowOffset: arrowOffset,
         classes: classes,
         hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
+        textAlign: textAlign,
         theme: theme,
         width: width,
         /* stylelint-enable property-no-unknown -- false positive */
@@ -5994,7 +6008,7 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
     // a tooltip. this matches with the native MUI behavior.
     if (!title && !subtitle)
         return jsx(Fragment, { children: children });
-    var content = (jsxs(Fragment, { children: [title, subtitle && (jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
+    var content = (jsxs(Fragment, { children: [title && (jsx(StyledTitle, { hasInvertedStyle: hasInvertedStyle, children: title })), subtitle && (jsx(StyledSubtitle, { hasInvertedStyle: hasInvertedStyle, children: subtitle })), componentSlot && (jsx(StyledComponentSlotWrapper, { children: componentSlot }))] }));
     var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
     return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, 
         // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
@@ -15472,7 +15486,7 @@ var StyledDrawer = styled$2(Drawer, {
 });
 var StyledHeaderComponent = styled$2("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
-    return css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
+    return css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl);
 });
 var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;