@czi-sds/components 22.4.0 → 22.5.0

package/dist/index.cjs.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.cjs.js

@@ -815,12 +815,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,
@@ -830,116 +824,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.
  *
@@ -7018,13 +6975,22 @@ var StyledMetadataText = material.styled("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" ? (jsxRuntime.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 = React.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 (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cardHeader, children: [overlineText && (jsxRuntime.jsx(StyledOverlineText, { className: cardOverline, children: overlineText })), titleText && (jsxRuntime.jsx(StyledTitleText, { className: cardTitle, children: titleText })), subtitleText && (jsxRuntime.jsx(StyledSubtitleText, { className: cardSubtitle, children: subtitleText }))] }), metadataText && (jsxRuntime.jsx(StyledMetadataText, { className: cardMetadata, children: metadataText }))] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
 });
 
 var doNotForwardProps$m = ["buttonsPosition"];
@@ -15921,6 +15887,10 @@ exports.ComplexFilterPopper = StyledPopper;
 exports.ContentCard = ContentCard;
 exports.ContentCardActions = ContentCardActions;
 exports.ContentCardBody = StyledContentCardBody;
+exports.ContentCardMetadata = StyledMetadataText;
+exports.ContentCardOverline = StyledOverlineText;
+exports.ContentCardSubtitle = StyledSubtitleText;
+exports.ContentCardTitle = StyledTitleText;
 exports.Dialog = Dialog;
 exports.DialogActions = DialogActions;
 exports.DialogContent = index;
@@ -15976,6 +15946,7 @@ exports.Theme = Theme;
 exports.Tooltip = Tooltip;
 exports.TooltipCondensed = TooltipCondensed;
 exports.TooltipTable = TooltipTableContent;
+exports.createAppThemeBorders = createAppThemeBorders;
 exports.defaultAppTheme = defaultAppTheme;
 exports.defaultTheme = defaultTheme$4;
 exports.focusVisibleA11yStyle = focusVisibleA11yStyle;