@czi-sds/components 22.4.0 → 22.5.0

package/dist/index.esm.d.ts

@@ -364,10 +364,65 @@ declare const Theme$0: (t: PaletteMode) => import("@mui/material").Theme;
  * Use the `theme` export to get a flexible light/dark mode theme function
  */
 declare const defaultTheme: import("@mui/material").Theme;
+declare const createAppThemeBorders: (colors: Colors, isDarkMode: boolean) => {
+    accent: {
+        default: string;
+        focused: string;
+        hover: string;
+        open: string;
+        pressed: string;
+        selected: string;
+    };
+    base: {
+        default: string;
+        disabled: string;
+        divider: string;
+        dividerInverse: string;
+        hover: string;
+        inverse: string;
+        pressed: string;
+        table: string;
+    };
+    beta: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+    info: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+    link: {
+        dashed: string;
+        solid: string;
+    };
+    negative: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+    neutral: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+    none: string;
+    notice: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+    positive: {
+        default: string;
+        extraThick: string;
+        thick: string;
+    };
+};
 /**
  * Create a SDS App Theme with custom colors that follows the SDS color model.
  */
-declare const makeSdsSemanticAppTheme: (colors: Colors) => AppTheme;
+declare const makeSdsSemanticAppTheme: (colors: Colors, isDarkTheme?: boolean) => AppTheme;
 declare const SDSLightAppTheme: AppTheme;
 declare const SDSDarkAppTheme: AppTheme;
 /**
@@ -811,6 +866,9 @@ declare const Button: React.ForwardRefExoticComponent<(Omit<SdsIconButtonProps,
 interface BannerExtraProps extends CommonThemeProps {
     sdsType: "primary" | "secondary";
 }
+type ButtonType$0 = ButtonProps & {
+    bannerType: string;
+} & CommonThemeProps;
 interface BannerProps extends BannerExtraProps {
     children: React.ReactNode;
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
@@ -820,19 +878,18 @@ interface BannerProps extends BannerExtraProps {
     onClose?: (e: React.MouseEvent) => void;
 }
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement | null>>;
-type SDSButtonDropdownSizes = "small" | "medium" | "large";
 type SdsProps$0 = {
     sdsStyle: "icon";
-    sdsType?: "primary" | "secondary" | "tertiary";
+    sdsType?: ButtonTypeMap["icon"];
     icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-    sdsSize?: SDSButtonDropdownSizes;
+    sdsSize?: ButtonSize;
 } | {
     sdsStyle: "rounded" | "square";
-    sdsType?: "primary" | "secondary" | "destructive";
+    sdsType?: ButtonTypeMap["rounded"];
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-    sdsSize?: SDSButtonDropdownSizes;
+    sdsSize?: ButtonSize;
 };
 type ButtonDropdownProps = ButtonProps & SdsProps$0;
 /**
@@ -843,13 +900,13 @@ declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<SdsIconButto
     sdsType?: "primary" | "secondary" | "tertiary" | undefined;
     icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
-    sdsSize?: SDSButtonDropdownSizes | 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?: SDSButtonDropdownSizes | undefined;
+    sdsSize?: ButtonSize | undefined;
 }, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 interface ButtonIconExtraProps extends CommonThemeProps {
     disabled?: boolean;
@@ -1108,40 +1165,15 @@ declare const StyledContentCardBody: import("@emotion/styled").StyledComponent<i
 }, "className" | "style" | "classes" | "children" | "sx"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & CardExtraProps, {}, {}>;
-interface ContentCardTitleProps {
-    overlineText?: string;
-    titleText?: string;
-    subtitleText?: string;
-    metadataText?: string;
-    classes?: {
-        cardHeader?: string;
-        cardOverline?: string;
-        cardTitle?: string;
-        cardSubtitle?: string;
-        cardMetadata?: string;
-    };
-}
-interface ContentCardActionsProps {
-    buttonsPosition?: "left" | "right";
-    clickableCard?: ContentCardProps["clickableCard"];
-    classes?: {
-        cardActions?: string;
-    };
-    children: React.ReactElement<ButtonProps> | Array<React.ReactElement<ButtonProps>>;
-}
-/**
- * @see https://mui.com/material-ui/api/card-actions/
- */
-declare const ContentCardActions: React.ForwardRefExoticComponent<ContentCardActionsProps & React.RefAttributes<HTMLDivElement>>;
 interface BaseContentCardProps extends CardProps {
     sdsType?: "wide" | "narrow";
-    overlineText?: string;
-    titleText?: string;
-    subtitleText?: string;
-    metadataText?: string;
+    overlineText?: ReactNode;
+    titleText?: ReactNode;
+    subtitleText?: ReactNode;
+    metadataText?: ReactNode;
     boundingBox?: boolean;
     decorativeBorder?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     clickableCard?: boolean;
     clickableCardProps?: Partial<SdsMinimalButtonProps>;
     buttonsPosition?: "left" | "right";
@@ -1160,7 +1192,7 @@ interface BaseContentCardProps extends CardProps {
 }
 interface ImageContentCardProps extends BaseContentCardProps {
     visualElementType: "image";
-    image?: React.ReactNode;
+    image?: ReactNode;
     imagePosition?: "left" | "right";
     imagePadding?: boolean;
     imageSize?: number;
@@ -1168,7 +1200,7 @@ interface ImageContentCardProps extends BaseContentCardProps {
 }
 interface IconContentCardProps extends BaseContentCardProps {
     visualElementType: "icon";
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     image?: never;
     imageSize?: never;
     imagePosition?: never;
@@ -1183,6 +1215,31 @@ interface NoneContentCardProps extends BaseContentCardProps {
     imageSize?: never;
 }
 type ContentCardProps = ImageContentCardProps | IconContentCardProps | NoneContentCardProps;
+interface ContentCardTitleProps extends Pick<BaseContentCardProps, "overlineText" | "titleText" | "subtitleText" | "metadataText"> {
+    classes?: {
+        cardHeader?: string;
+        cardOverline?: string;
+        cardTitle?: string;
+        cardSubtitle?: string;
+        cardMetadata?: string;
+    };
+}
+interface ContentCardActionsProps {
+    buttonsPosition?: "left" | "right";
+    clickableCard?: ContentCardProps["clickableCard"];
+    classes?: {
+        cardActions?: string;
+    };
+    children: React.ReactElement<ButtonProps> | Array<React.ReactElement<ButtonProps>>;
+}
+/**
+ * @see https://mui.com/material-ui/api/card-actions/
+ */
+declare const ContentCardActions: React.ForwardRefExoticComponent<ContentCardActionsProps & React.RefAttributes<HTMLDivElement>>;
+declare const StyledOverlineText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+declare const StyledTitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+declare const StyledSubtitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+declare const StyledMetadataText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 /**
  * @see https://mui.com/material-ui/react-card/
  */
@@ -1731,5 +1788,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, 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, 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, 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$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 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

@@ -792,12 +792,6 @@ var sharedAppTheme = {
         },
     },
 };
-/**
- * Create a SDS App Theme with custom colors that follows the SDS color model.
- */
-var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
-var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
-var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
 // applications to override those colors using their own custom theme.
 // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
@@ -807,116 +801,79 @@ var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 //
 // (masoudmanson): We need to define borders separately for light and dark themes
 // because the border colors are different for each theme.
-SDSLightAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
-        open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
-        selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
-        disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
-        divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
-        dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
-        hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
-        inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
-        pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
-        table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSLightThemeColors.red[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
-        thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSLightThemeColors.green[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
-    },
-};
-SDSDarkAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
-        open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
-        selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
-        disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
-        divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
-        dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
-        hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
-        inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
-        pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
-        table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
-    },
+var BorderThickness = {
+    default: 1,
+    extraThick: 4,
+    thick: 2,
+};
+var createAppThemeBorders = function (colors, isDarkMode) {
+    var createSolidBorder = function (color, level, thickness) { return "".concat(BorderThickness[thickness], "px solid ").concat(colors[color][level]); };
+    var createDashedBorder = function () { return "1px dashed"; };
+    return {
+        accent: {
+            default: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            focused: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            hover: createSolidBorder("blue", isDarkMode ? 700 : 600, "default"),
+            open: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            pressed: createSolidBorder("blue", isDarkMode ? 800 : 700, "default"),
+            selected: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+        },
+        base: {
+            default: createSolidBorder("gray", 500, "default"),
+            disabled: createSolidBorder("gray", 300, "default"),
+            divider: createSolidBorder("gray", 200, "default"),
+            dividerInverse: createSolidBorder("gray", 600, "default"),
+            hover: createSolidBorder("gray", 900, "default"),
+            inverse: createSolidBorder("gray", 50, "default"),
+            pressed: createSolidBorder("gray", 900, "default"),
+            table: createSolidBorder("gray", 300, "default"),
+        },
+        beta: {
+            default: createSolidBorder("purple", 600, "default"),
+            extraThick: createSolidBorder("purple", 600, "extraThick"),
+            thick: createSolidBorder("purple", 600, "thick"),
+        },
+        info: {
+            default: createSolidBorder("blue", 600, "default"),
+            extraThick: createSolidBorder("blue", 600, "extraThick"),
+            thick: createSolidBorder("blue", 600, "thick"),
+        },
+        link: {
+            dashed: createDashedBorder(),
+            solid: createSolidBorder("blue", 500, "default"),
+        },
+        negative: {
+            default: createSolidBorder("red", 600, "default"),
+            extraThick: createSolidBorder("red", 600, "extraThick"),
+            thick: createSolidBorder("red", 600, "thick"),
+        },
+        neutral: {
+            default: createSolidBorder("gray", 500, "default"),
+            extraThick: createSolidBorder("gray", 500, "extraThick"),
+            thick: createSolidBorder("gray", 500, "thick"),
+        },
+        none: "none",
+        notice: {
+            default: createSolidBorder("yellow", 600, "default"),
+            extraThick: createSolidBorder("yellow", 600, "extraThick"),
+            thick: createSolidBorder("yellow", 600, "thick"),
+        },
+        positive: {
+            default: createSolidBorder("green", 600, "default"),
+            extraThick: createSolidBorder("green", 600, "extraThick"),
+            thick: createSolidBorder("green", 600, "thick"),
+        },
+    };
+};
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+var makeSdsSemanticAppTheme = function (colors, isDarkTheme) {
+    if (isDarkTheme === void 0) { isDarkTheme = false; }
+    return (__assign(__assign({}, sharedAppTheme), { borders: createAppThemeBorders(colors, isDarkTheme), colors: colors }));
 };
+var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
+var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors, true);
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -6995,13 +6952,22 @@ var StyledMetadataText = styled$3("p", {
 });
 var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
 
-/**
- * @see https://mui.com/material-ui/react-dialog/
- */
+var createTextComponent = function (StyledComponent) {
+    return function (_a) {
+        var text = _a.text, className = _a.className;
+        if (!text)
+            return null;
+        return typeof text === "string" ? (jsx(StyledComponent, { className: className, children: text })) : (text);
+    };
+};
+var OverlineText = createTextComponent(StyledOverlineText);
+var TitleText = createTextComponent(StyledTitleText);
+var SubtitleText = createTextComponent(StyledSubtitleText);
+var MetadataText = createTextComponent(StyledMetadataText);
 var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
     var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
     var cardHeader = classes.cardHeader, cardOverline = classes.cardOverline, cardTitle = classes.cardTitle, cardSubtitle = classes.cardSubtitle, cardMetadata = classes.cardMetadata;
-    return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [overlineText && (jsx(StyledOverlineText, { className: cardOverline, children: overlineText })), titleText && (jsx(StyledTitleText, { className: cardTitle, children: titleText })), subtitleText && (jsx(StyledSubtitleText, { className: cardSubtitle, children: subtitleText }))] }), metadataText && (jsx(StyledMetadataText, { className: cardMetadata, children: metadataText }))] }));
+    return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsx(OverlineText, { text: overlineText, className: cardOverline }), jsx(TitleText, { text: titleText, className: cardTitle }), jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
 });
 
 var doNotForwardProps$m = ["buttonsPosition"];
@@ -15870,4 +15836,4 @@ var TooltipTableContent = function (props) {
     return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
+export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, createAppThemeBorders, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };