@czi-sds/components 21.6.0 → 21.6.1

package/README.md

@@ -254,6 +254,33 @@ const theme = createTheme(appTheme)
 </StyledEngineProvider>
 ```
 
+To apply custom colors that align with your branding while maintaining the SDS design configurations, use the `makeSdsSemanticAppTheme`. Provide it with a Colors object that follows the SDS model.
+
+```tsx
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { makeSdsSemanticAppTheme, makeThemeOptions, type Colors } from "@czi-sds/components";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
+import createTheme from "@mui/material/styles/createTheme";
+
+const CustomColors: Colors = {
+  ...
+}
+
+const customColorAppTheme = makeSdsSemanticAppTheme(CustomColors);
+
+const appTheme = makeThemeOptions(customColorAppTheme)
+
+const theme = createTheme(appTheme)
+
+<StyledEngineProvider injectFirst>
+  <ThemeProvider theme={theme}>
+    <EmotionThemeProvider theme={theme}>
+      <YourApp />
+    </EmotionThemeProvider>
+  </ThemeProvider>
+</StyledEngineProvider>
+```
+
 💡 CZGE example available [here](https://github.com/chanzuckerberg/czgenepi/blob/trunk/src/frontend/src/common/styles/theme.ts).
 
 💡 Material UI docs for custom theming available [here](https://mui.com/material-ui/customization/theming/).

package/dist/index.cjs.d.ts

@@ -333,6 +333,10 @@ 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;
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+declare const makeSdsSemanticAppTheme: (colors: Colors) => AppTheme;
 declare const SDSLightAppTheme: AppTheme;
 declare const SDSDarkAppTheme: AppTheme;
 /**
@@ -1485,5 +1489,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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, 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 };
+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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, 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 };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.cjs.js

@@ -548,120 +548,71 @@ var sharedAppTheme = {
         },
     },
 };
-var SDSLightAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSLightThemeColors });
-// (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,
-// we allow other apps to specify their colors once, and have them apply
-// throughout the application, such as in borders, etc without having to manually
-// override every theme property that makes use of colors.
-SDSLightAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSLightAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.green[600]),
-    },
-};
-var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
-SDSDarkAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSDarkAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-    },
-};
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { 
+    // (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,
+    // we allow other apps to specify their colors once, and have them apply
+    // throughout the application, such as in borders, etc without having to manually
+    // override every theme property that makes use of colors.
+    borders: {
+        accent: {
+            default: "1px solid ".concat(colors.blue[500]),
+            focused: "1px solid ".concat(colors.blue[500]),
+            hover: "1px solid ".concat(colors.blue[600]),
+            open: "1px solid ".concat(colors.blue[500]),
+            pressed: "1px solid ".concat(colors.blue[700]),
+            selected: "1px solid ".concat(colors.blue[500]),
+        },
+        base: {
+            default: "1px solid ".concat(colors.gray[500]),
+            disabled: "1px solid ".concat(colors.gray[300]),
+            divider: "1px solid ".concat(colors.gray[200]),
+            hover: "1px solid ".concat(colors.gray[900]),
+            pressed: "1px solid ".concat(colors.gray[900]),
+            table: "1px solid ".concat(colors.gray[300]),
+        },
+        beta: {
+            default: "1px solid ".concat(colors.purple[600]),
+            extraThick: "4px solid ".concat(colors.purple[600]),
+            thick: "2px solid ".concat(colors.purple[600]),
+        },
+        info: {
+            default: "1px solid ".concat(colors.blue[600]),
+            extraThick: "4px solid ".concat(colors.blue[600]),
+            thick: "2px solid ".concat(colors.blue[600]),
+        },
+        link: {
+            dashed: "1px dashed",
+            solid: "1px solid",
+        },
+        negative: {
+            default: "1px solid ".concat(colors.red[600]),
+            extraThick: "4px solid ".concat(colors.red[600]),
+            thick: "2px solid ".concat(colors.red[600]),
+        },
+        neutral: {
+            default: "1px solid ".concat(colors.gray[500]),
+            extraThick: "4px solid ".concat(colors.gray[500]),
+            thick: "2px solid ".concat(colors.gray[500]),
+        },
+        none: "none",
+        notice: {
+            default: "1px solid ".concat(colors.yellow[600]),
+            extraThick: "4px solid ".concat(colors.yellow[600]),
+            thick: "2px solid ".concat(colors.yellow[600]),
+        },
+        positive: {
+            default: "1px solid ".concat(colors.green[600]),
+            extraThick: "4px solid ".concat(colors.green[600]),
+            thick: "2px solid ".concat(colors.green[600]),
+        },
+    }, colors: colors })); };
+var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
+var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -7095,16 +7046,12 @@ var InputToggle = function (props) {
 
 var doNotForwardProps$a = ["sdsStyle", "sdsSize", "fontWeight"];
 var defaultStyle = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
+    var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, sdsSize === "s" ? -4 : -3, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.textActionPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
+    return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
 };
-var dashedStyle = function (props) {
-    var _a, _b, _c;
-    var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
-    var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "])), sdsSize === "s" ? -4 : -3, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover);
+var dashedStyle = function () {
+    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "])));
 };
 var smallStyle = function (props) {
     return fontBodyS$1(props);
@@ -7118,7 +7065,7 @@ var StyledLink = styled(material.Link, {
     },
 })(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  all: unset;\n\n  ", "\n\n  ", "\n"], ["\n  all: unset;\n\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
-    return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
+    return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
 });
 var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
 
@@ -8350,4 +8297,5 @@ exports.getShadows = getShadows;
 exports.getSpaces = getSpaces;
 exports.getSpacings = getSpacings;
 exports.getTypography = getTypography;
+exports.makeSdsSemanticAppTheme = makeSdsSemanticAppTheme;
 exports.makeThemeOptions = makeThemeOptions;

package/dist/index.esm.d.ts

@@ -333,6 +333,10 @@ 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;
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+declare const makeSdsSemanticAppTheme: (colors: Colors) => AppTheme;
 declare const SDSLightAppTheme: AppTheme;
 declare const SDSDarkAppTheme: AppTheme;
 /**
@@ -1485,5 +1489,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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, 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 };
+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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, 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 };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.esm.js

@@ -528,120 +528,71 @@ var sharedAppTheme = {
         },
     },
 };
-var SDSLightAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSLightThemeColors });
-// (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,
-// we allow other apps to specify their colors once, and have them apply
-// throughout the application, such as in borders, etc without having to manually
-// override every theme property that makes use of colors.
-SDSLightAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSLightAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.green[600]),
-    },
-};
-var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
-SDSDarkAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSDarkAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-    },
-};
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { 
+    // (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,
+    // we allow other apps to specify their colors once, and have them apply
+    // throughout the application, such as in borders, etc without having to manually
+    // override every theme property that makes use of colors.
+    borders: {
+        accent: {
+            default: "1px solid ".concat(colors.blue[500]),
+            focused: "1px solid ".concat(colors.blue[500]),
+            hover: "1px solid ".concat(colors.blue[600]),
+            open: "1px solid ".concat(colors.blue[500]),
+            pressed: "1px solid ".concat(colors.blue[700]),
+            selected: "1px solid ".concat(colors.blue[500]),
+        },
+        base: {
+            default: "1px solid ".concat(colors.gray[500]),
+            disabled: "1px solid ".concat(colors.gray[300]),
+            divider: "1px solid ".concat(colors.gray[200]),
+            hover: "1px solid ".concat(colors.gray[900]),
+            pressed: "1px solid ".concat(colors.gray[900]),
+            table: "1px solid ".concat(colors.gray[300]),
+        },
+        beta: {
+            default: "1px solid ".concat(colors.purple[600]),
+            extraThick: "4px solid ".concat(colors.purple[600]),
+            thick: "2px solid ".concat(colors.purple[600]),
+        },
+        info: {
+            default: "1px solid ".concat(colors.blue[600]),
+            extraThick: "4px solid ".concat(colors.blue[600]),
+            thick: "2px solid ".concat(colors.blue[600]),
+        },
+        link: {
+            dashed: "1px dashed",
+            solid: "1px solid",
+        },
+        negative: {
+            default: "1px solid ".concat(colors.red[600]),
+            extraThick: "4px solid ".concat(colors.red[600]),
+            thick: "2px solid ".concat(colors.red[600]),
+        },
+        neutral: {
+            default: "1px solid ".concat(colors.gray[500]),
+            extraThick: "4px solid ".concat(colors.gray[500]),
+            thick: "2px solid ".concat(colors.gray[500]),
+        },
+        none: "none",
+        notice: {
+            default: "1px solid ".concat(colors.yellow[600]),
+            extraThick: "4px solid ".concat(colors.yellow[600]),
+            thick: "2px solid ".concat(colors.yellow[600]),
+        },
+        positive: {
+            default: "1px solid ".concat(colors.green[600]),
+            extraThick: "4px solid ".concat(colors.green[600]),
+            thick: "2px solid ".concat(colors.green[600]),
+        },
+    }, colors: colors })); };
+var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
+var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -7075,16 +7026,12 @@ var InputToggle = function (props) {
 
 var doNotForwardProps$a = ["sdsStyle", "sdsSize", "fontWeight"];
 var defaultStyle = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
+    var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, sdsSize === "s" ? -4 : -3, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.textActionPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
+    return css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
 };
-var dashedStyle = function (props) {
-    var _a, _b, _c;
-    var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
-    var semanticColors = getSemanticColors(props);
-    return css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "])), sdsSize === "s" ? -4 : -3, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover);
+var dashedStyle = function () {
+    return css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "])));
 };
 var smallStyle = function (props) {
     return fontBodyS$1(props);
@@ -7098,7 +7045,7 @@ var StyledLink = styled(Link$1, {
     },
 })(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  all: unset;\n\n  ", "\n\n  ", "\n"], ["\n  all: unset;\n\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
-    return css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
+    return css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
 });
 var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
 
@@ -8205,4 +8152,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, 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, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, 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, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, 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, 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, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, 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, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };