@czi-sds/components
Version:
2021 Create-a-thon Science Initiative Component Library
1,386 lines (1,364 loc) • 1.03 MB
JavaScript
"use client";
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, isValidElement, memo, Fragment as Fragment$1, createContext, useContext } from 'react';
import { css as css$1, ThemeContext as ThemeContext$1 } from '@emotion/react';
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, alpha as alpha$1, darken as darken$2, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
export { CardMedia as ContentCardMedia } from '@mui/material';
import styled$2 from '@emotion/styled';
import { Remove, Clear } from '@mui/icons-material';
import { css as css$2 } from '@emotion/css';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/* eslint-disable sort-keys */
const FontSizeValues = {
wide: {
body: {
xxxxs: 10,
xxxs: 11,
xxs: 12,
xs: 13,
s: 14,
m: 16,
l: 18
},
header: {
xxxs: 11,
xxs: 12,
xs: 13,
s: 14,
m: 16,
l: 18,
xl: 22,
xxl: 26
},
code: {
xs: 13,
s: 14
},
caps: {
xxs: 12,
xxxs: 11,
xxxxs: 10
},
tabular: {
xxxxs: 10,
xxxs: 11,
xxs: 12,
xs: 13,
s: 14
},
title: {
s: 32,
m: 40,
l: 52
}
},
narrow: {
body: {
xxxxs: 10,
xxxs: 12,
xxs: 12,
xs: 13,
s: 14,
m: 14,
l: 16
},
header: {
xxxs: 12,
xxs: 12,
xs: 13,
s: 14,
m: 14,
l: 16,
xl: 18,
xxl: 22
},
code: {
xs: 13,
s: 14
},
caps: {
xxs: 12,
xxxs: 11,
xxxxs: 11
},
tabular: {
xxxxs: 10,
xxxs: 11,
xxs: 12,
xs: 13,
s: 14
},
title: {
s: 26,
m: 32,
l: 40
}
}
};
const LineHeightValues = {
wide: {
body: {
xxxxs: 14,
xxxs: 16,
xxs: 18,
xs: 20,
s: 24,
m: 26,
l: 28
},
header: {
xxxs: 16,
xxs: 18,
xs: 18,
s: 20,
m: 22,
l: 24,
xl: 30,
xxl: 34
},
code: {
xs: 20,
s: 24
},
caps: {
xxs: 18,
xxxs: 16,
xxxxs: 14
},
tabular: {
xxxxs: 14,
xxxs: 16,
xxs: 18,
xs: 20,
s: 24
},
title: {
s: 40,
m: 50,
l: 64
}
},
narrow: {
body: {
xxxxs: 14,
xxxs: 18,
xxs: 18,
xs: 20,
s: 24,
m: 24,
l: 26
},
header: {
xxxs: 18,
xxs: 18,
xs: 18,
s: 20,
m: 20,
l: 22,
xl: 24,
xxl: 30
},
code: {
xs: 20,
s: 24
},
caps: {
xxs: 18,
xxxs: 16,
xxxxs: 16
},
tabular: {
xxxxs: 14,
xxxs: 16,
xxs: 18,
xs: 20,
s: 24
},
title: {
s: 34,
m: 40,
l: 50
}
}
};
const LetterSpacingValues = {
wide: {
body: {
xxxxs: "0.06px",
xxxs: "0.06px",
xxs: "0.06px",
xs: "0px",
s: "0px",
m: "0px",
l: "0px"
},
header: {
xxxs: "0.1px",
xxs: "0.1px",
xs: "0.08px",
s: "0.08px",
m: "0px",
l: "0px",
xl: "0px",
xxl: "0px"
},
code: {
xs: "0px",
s: "0px"
},
caps: {
xxs: "0.4px",
xxxs: "0.4px",
xxxxs: "0.4px"
},
tabular: {
xxxxs: "-0.25px",
xxxs: "-0.25px",
xxs: "-0.25px",
xs: "-0.3px",
s: "-0.3px"
},
title: {
s: "0px",
m: "0px",
l: "0px"
}
},
narrow: {
body: {
xxxxs: "0.06px",
xxxs: "0.06px",
xxs: "0.06px",
xs: "0px",
s: "0px",
m: "0px",
l: "0px"
},
header: {
xxxs: "0.1px",
xxs: "0.1px",
xs: "0.08px",
s: "0.08px",
m: "0.08px",
l: "0px",
xl: "0px",
xxl: "0px"
},
code: {
xs: "0px",
s: "0px"
},
caps: {
xxs: "0.4px",
xxxs: "0.4px",
xxxxs: "0.4px"
},
tabular: {
xxxxs: "-0.25px",
xxxs: "-0.25px",
xxs: "-0.25px",
xs: "-0.3px",
s: "-0.3px"
},
title: {
s: "0px",
m: "0px",
l: "0px"
}
}
};
const TypographyCategories = {
body: {
weights: ["regular", "medium", "semibold"],
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"]
},
header: {
weights: ["semibold"],
sizes: ["xxl", "xl", "l", "m", "s", "xs", "xxs", "xxxs"]
},
code: {
weights: ["regular", "medium", "semibold"],
sizes: ["s", "xs"]
},
caps: {
weights: ["semibold"],
sizes: ["xxs", "xxxs", "xxxxs"]
},
tabular: {
weights: ["regular", "medium", "semibold"],
sizes: ["s", "xs", "xxs", "xxxs", "xxxxs"]
},
title: {
weights: ["bold"],
sizes: ["s", "m", "l"]
},
link: {
weights: ["regular", "medium", "semibold"],
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"]
}
};
const FontWeight = {
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700
};
const DEFAULT_FONT_SIZE = 14;
const DEFAULT_LINE_HEIGHT = 24;
const DEFAULT_LETTER_SPACING = "0px";
function generateTypographyStyle(category, size, weight, isNarrow = false, tabularNums) {
const screenType = isNarrow ? "narrow" : "wide";
// Use body values for link category
const sourceCategory = category === "link" ? "body" : category;
const baseFontSize = FontSizeValues[screenType]?.[sourceCategory]?.[size] || DEFAULT_FONT_SIZE;
const fontSize = baseFontSize;
const lineHeight = LineHeightValues[screenType]?.[sourceCategory]?.[size] || DEFAULT_LINE_HEIGHT;
const letterSpacing = LetterSpacingValues[screenType]?.[sourceCategory]?.[size] || DEFAULT_LETTER_SPACING;
const fontWeight = FontWeight[weight] || FontWeight.regular;
const baseStyle = {
fontSize,
fontWeight,
letterSpacing,
lineHeight: `${lineHeight}px`,
textTransform: category === "caps" ? "uppercase" : "none"
};
if (category === "tabular" && tabularNums) {
baseStyle.fontVariantNumeric = tabularNums;
}
if (category === "link") {
baseStyle.textDecoration = "underline";
}
return baseStyle;
}
const generateCategoryStyles = (category, isNarrow = false, tabularNums) => {
const config = TypographyCategories[category];
const categoryStyles = {};
config.weights.forEach((weight) => {
categoryStyles[weight] = {};
config.sizes.forEach((size) => {
categoryStyles[weight][size] = generateTypographyStyle(category, size, weight, isNarrow, tabularNums);
});
});
return categoryStyles;
};
const generateTypographyStyles = (isNarrow = false, tabularNums) => {
return {
body: generateCategoryStyles("body", isNarrow),
caps: generateCategoryStyles("caps", isNarrow),
code: generateCategoryStyles("code", isNarrow),
header: generateCategoryStyles("header", isNarrow),
link: generateCategoryStyles("link", isNarrow),
tabular: generateCategoryStyles("tabular", isNarrow, tabularNums),
title: generateCategoryStyles("title", isNarrow)
};
};
const generateTypographyTheme = (fontFamily, fontFamilyCode, tabularNums) => {
return {
fontFamily: {
body: fontFamily,
caps: fontFamily,
code: fontFamilyCode,
header: fontFamily,
link: fontFamily,
tabular: fontFamily,
title: fontFamily
},
narrowStyles: generateTypographyStyles(true, tabularNums),
wideStyles: generateTypographyStyles(false, tabularNums)
};
};
// (masoudmanson): We need to define borders separately for light and dark themes
// because the border colors are different for each theme.
const BorderThickness = {
default: 1,
extraThick: 4,
thick: 2
};
const createAppThemeBorders = (colors, isDarkMode) => {
const createBorder = (color, level, style, thickness) => `${BorderThickness[thickness]}px ${style} ${colors[color][level]}`;
return {
accent: {
default: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
focused: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
hover: createBorder("indigo", isDarkMode ? 700 : 600, "solid", "default"),
open: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
pressed: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default"),
selected: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default")
},
base: {
default: createBorder("gray", 500, "solid", "default"),
disabled: createBorder("gray", 300, "solid", "default"),
divider: createBorder("gray", 200, "solid", "default"),
dividerOnDark: createBorder("gray", isDarkMode ? 200 : 700, "solid", "default"),
dividerInverse: createBorder("gray", 600, "solid", "default"),
hover: createBorder("gray", 900, "solid", "default"),
inverse: createBorder("gray", 50, "solid", "default"),
pressed: createBorder("gray", 900, "solid", "default"),
table: createBorder("gray", 300, "solid", "default")
},
beta: {
default: createBorder("purple", 600, "solid", "default"),
extraThick: createBorder("purple", 600, "solid", "extraThick"),
thick: createBorder("purple", 600, "solid", "thick")
},
info: {
default: createBorder("blue", 600, "solid", "default"),
extraThick: createBorder("blue", 600, "solid", "extraThick"),
thick: createBorder("blue", 600, "solid", "thick")
},
link: {
dashed: createBorder("gray", 900, "dashed", "default"),
solid: createBorder("gray", 900, "solid", "default")
},
negative: {
default: createBorder("red", 600, "solid", "default"),
extraThick: createBorder("red", 600, "solid", "extraThick"),
thick: createBorder("red", 600, "solid", "thick")
},
neutral: {
default: createBorder("gray", 500, "solid", "default"),
extraThick: createBorder("gray", 500, "solid", "extraThick"),
thick: createBorder("gray", 500, "solid", "thick")
},
none: "none",
notice: {
default: createBorder("yellow", 600, "solid", "default"),
extraThick: createBorder("yellow", 600, "solid", "extraThick"),
thick: createBorder("yellow", 600, "solid", "thick")
},
positive: {
default: createBorder("green", 600, "solid", "default"),
extraThick: createBorder("green", 600, "solid", "extraThick"),
thick: createBorder("green", 600, "solid", "thick")
}
};
};
/* eslint-disable sort-keys */
const Corners = {
rounded: 20,
xl: 8,
l: 6,
m: 4,
s: 2,
none: 0
};
const IconSizes = {
// for use with input icons only (radio and checkbox)
input: { height: 16, width: 16 },
l: { height: 24, width: 24 },
s: { height: 16, width: 16 },
xl: { height: 32, width: 32 },
xs: { height: 12, width: 12 }
};
const Shadows = {
l: "0 2px 12px 0 rgba(0,0,0, 0.3)",
m: "0 2px 4px 0 rgba(0,0,0, 0.15), 0 2px 10px 0 rgba(0,0,0, 0.15)",
none: "none",
s: "0 2px 4px 0 rgba(0,0,0, 0.25)"
};
const Spaces = {
xxxs: 2,
xxs: 4,
xs: 6,
s: 8,
m: 12,
default: 8,
l: 16,
xl: 24,
xxl: 32,
xxxl: 40
};
const SDSLightThemeColors = {
blue: {
"100": "#edf3fd",
"200": "#cce1ff",
"300": "#9dc6ff",
"400": "#6ca6ff",
"500": "#1a6cef",
"600": "#0041b9",
"700": "#002d90",
"800": "#00114a"
},
gray: {
"100": "#ededed",
"200": "#dfdfdf",
"300": "#c3c3c3",
"400": "#a5a5a5",
"50": "#ffffff",
"500": "#969696",
"600": "#767676",
"700": "#3b3b3b",
"75": "#f8f8f8",
"800": "#1b1b1b",
"900": "#000000"
},
indigo: {
"100": "#f1f0ff",
"200": "#dcd9ff",
"300": "#beb5ff",
"400": "#9d8bff",
"500": "#6e4ff9",
"600": "#4e18cc",
"700": "#330296",
"800": "#1d004d"
},
green: {
"100": "#ebf9ed",
"200": "#b9ecc3",
"300": "#7fd693",
"400": "#50b96d",
"500": "#238444",
"600": "#105b2b",
"700": "#07431d",
"800": "#001f00"
},
purple: {
"100": "#efeafe",
"200": "#e4dbfc",
"300": "#cbbaf8",
"400": "#b296f2",
"500": "#8b54e2",
"600": "#6526b5",
"700": "#490092",
"800": "#26004c"
},
red: {
"100": "#ffe8e6",
"200": "#ffd6d2",
"300": "#ffafa8",
"400": "#ff7e78",
"500": "#db2131",
"600": "#b80017",
"700": "#6f0008",
"800": "#340000"
},
yellow: {
"100": "#fff3db",
"200": "#ffdb97",
"300": "#ffca5c",
"400": "#fab700",
"500": "#da9900",
"600": "#b07300",
"700": "#7c3e00",
"800": "#541700"
}
};
const SDSDarkThemeColors = {
blue: {
"100": "#0f1d4a",
"200": "#0a216e",
"300": "#0647b8",
"400": "#2876f9",
"500": "#5b9aff",
"600": "#a2c9ff",
"700": "#cde3ff",
"800": "#e2eeff"
},
gray: {
"100": "#333333",
"200": "#494949",
"300": "#696969",
"400": "#949494",
"50": "#000000",
"500": "#aaaaaa",
"600": "#cdcdcd",
"700": "#ededed",
"75": "#101010",
"800": "#fafafa",
"900": "#ffffff"
},
indigo: {
"100": "#1d004d",
"200": "#330296",
"300": "#521ec9",
"400": "#6e4ff9",
"500": "#9785ff",
"600": "#beb5ff",
"700": "#dcd9ff",
"800": "#f1f0ff"
},
green: {
"100": "#082608",
"200": "#063617",
"300": "#10632e",
"400": "#2b8e4b",
"500": "#4bae68",
"600": "#85d898",
"700": "#bcecc5",
"800": "#daf4de"
},
purple: {
"100": "#331252",
"200": "#410f70",
"300": "#6429b2",
"400": "#9261e6",
"500": "#aa89ef",
"600": "#cebef8",
"700": "#e4dcfc",
"800": "#f0ebfe"
},
red: {
"100": "#330603",
"200": "#660a12",
"300": "#9e1c1c",
"400": "#df453c",
"500": "#e06257",
"600": "#ff988a",
"700": "#ffbdb3",
"800": "#ffd8d1"
},
yellow: {
"100": "#361b07",
"200": "#52270a",
"300": "#965a0b",
"400": "#bd8804",
"500": "#d9a943",
"600": "#e5bc63",
"700": "#f5d789",
"800": "#ffe6a8"
}
};
const fontFamily$1 = '"Inter", sans-serif';
const fontFamilyCode = '"IBM Plex Mono", monospace';
const tabularNums = "tabular-nums";
/**
* Base app theme for properties shared between light and dark mode. Generally, if a theme
* property doesn't deal with colors it belongs here, otherwise it'll have its specific
* theme variant defined in `lightAppTheme` or `darkAppTheme`.
*
* `colors` and `mode` are omitted because they must be defined by the `lightAppTheme` and
* `darkAppTheme` objects before use in the `makeThemeOptions` function.
*/
const sharedAppTheme = {
corners: Corners,
fontWeights: FontWeight,
iconSizes: IconSizes,
shadows: Shadows,
spacing: Spaces,
typography: generateTypographyTheme(fontFamily$1, fontFamilyCode, tabularNums)
};
/**
* Create a SDS App Theme with custom colors that follows the SDS color model.
*/
const makeSdsSemanticAppTheme = (colors, isDarkTheme = false) => ({
...sharedAppTheme,
borders: createAppThemeBorders(colors, isDarkTheme),
colors
});
const SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
const SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors, true);
/**
* Helper function to select the appropriate theme settings.
*
* @param theme The theme to choose from. Currently supports a light and dark variant.
* @returns The appropriate app theme for the variant.
*/
const SDSChooseTheme = (theme) => {
if (theme === "dark") {
return SDSDarkAppTheme;
}
return SDSLightAppTheme;
};
/**
* (masoudmanson): This is to make sure that the old defaultAppTheme
* export is still available for backward compatibility.
*
* @deprecated
* Please use `SDSAppTheme` instead. This export will be removed in the future.
*/
const defaultAppTheme = SDSLightAppTheme;
const Breakpoints = {
lg: 1024,
md: 512,
sm: 0
};
/**
* Converts a percentage opacity value to its hexadecimal representation
* that can be appended to hex color codes.
*
* @param percentOpacity - Opacity as a percentage (0-100)
* @returns Hex string representation of the opacity (e.g., "33" for 20%)
*
* @example
* ```ts
* percentToHex(20) // "33" (20% opacity)
* percentToHex(58) // "94" (58% opacity)
* percentToHex(50) // "80" (50% opacity)
* percentToHex(100) // "FF" (100% opacity)
* percentToHex(0) // "00" (0% opacity)
* ```
*/
const percentToHex = (percentOpacity) => {
// Clamp the value between 0 and 100
const clampedPercent = Math.max(0, Math.min(100, percentOpacity));
// Convert percentage to 0-255 range
const alphaValue = Math.round((clampedPercent / 100) * 255);
// Convert to hex and pad with leading zero if needed
return alphaValue.toString(16).padStart(2, "0").toLowerCase();
};
/**
* Adds opacity to a hex color by appending the hex opacity value.
*
* @param hexColor - Base hex color (with or without #)
* @param percentOpacity - Opacity as a percentage (0-100)
* @returns Hex color with opacity appended
*
* @example
* ```ts
* addOpacityToHex("#FF0000", 20) // "#FF000033"
* addOpacityToHex("FF0000", 58) // "FF000094"
* ```
*/
const addOpacityToHex = (hexColor, percentOpacity) => {
const opacityHex = percentToHex(percentOpacity);
return `${hexColor}${opacityHex}`;
};
const SDSPaletteLight = (appTheme) => {
return {
accent: {
border: appTheme.colors.indigo[500],
borderFocus: appTheme.colors.indigo[500],
borderHover: appTheme.colors.indigo[600],
borderOpen: appTheme.colors.indigo[500],
borderPressed: appTheme.colors.indigo[700],
borderSelected: appTheme.colors.indigo[500],
fillHover: appTheme.colors.indigo[600],
fillPressed: appTheme.colors.indigo[700],
fillPrimary: appTheme.colors.indigo[500],
ornament: appTheme.colors.indigo[500],
ornamentFocus: appTheme.colors.indigo[500],
ornamentHover: appTheme.colors.indigo[600],
ornamentOpen: appTheme.colors.indigo[500],
ornamentPressed: appTheme.colors.indigo[700],
ornamentSelected: appTheme.colors.indigo[500],
surfacePrimary: appTheme.colors.indigo[500],
surfaceSecondary: appTheme.colors.indigo[100],
textAction: appTheme.colors.indigo[500],
textActionHover: appTheme.colors.indigo[600],
textActionPressed: appTheme.colors.indigo[700]
},
base: {
backgroundPrimary: appTheme.colors.gray[50],
backgroundPrimaryDark: appTheme.colors.gray[900],
backgroundPrimaryInverse: appTheme.colors.gray[900],
backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 40),
backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[700], 62),
backgroundSecondaryInverse: appTheme.colors.gray[700],
backgroundTertiary: appTheme.colors.gray[100],
borderOnFill: appTheme.colors.gray[50],
borderPrimary: appTheme.colors.gray[600],
borderPrimaryDisabled: appTheme.colors.gray[300],
borderPrimaryDisabledOnDark: appTheme.colors.gray[600],
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
borderPrimaryInteraction: appTheme.colors.gray[900],
borderPrimaryInteractionOnDark: appTheme.colors.gray[50],
borderPrimaryHoverInverse: appTheme.colors.gray[50],
borderPrimaryOnDark: appTheme.colors.gray[300],
borderPrimaryInverse: appTheme.colors.gray[300],
borderPrimaryPressedInverse: appTheme.colors.gray[50],
borderSecondary: appTheme.colors.gray[300],
divider: appTheme.colors.gray[200],
dividerOnDark: appTheme.colors.gray[700],
dividerInverse: appTheme.colors.gray[700],
fillDisabled: appTheme.colors.gray[100],
fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 20),
fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 20),
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 20),
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 30),
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
fillPrimary: appTheme.colors.gray[50],
fillSelected: appTheme.colors.gray[900],
ornamentDisabled: appTheme.colors.gray[300],
ornamentDisabledOnDark: appTheme.colors.gray[600],
ornamentDisabledInverse: appTheme.colors.gray[600],
ornamentOnFill: appTheme.colors.gray[50],
ornamentPrimary: appTheme.colors.gray[900],
ornamentPrimaryOnDark: appTheme.colors.gray[50],
ornamentPrimaryInverse: appTheme.colors.gray[50],
ornamentSecondary: appTheme.colors.gray[600],
ornamentSecondaryInteraction: appTheme.colors.gray[900],
ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
ornamentSecondaryOnDark: appTheme.colors.gray[300],
ornamentSecondaryInverse: appTheme.colors.gray[300],
ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
surfacePrimary: appTheme.colors.gray[50],
surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
surfacePrimaryDark: appTheme.colors.gray[900],
surfaceInverse: appTheme.colors.gray[900],
textDisabled: appTheme.colors.gray[300],
textDisabledOnDark: appTheme.colors.gray[600],
textDisabledInverse: appTheme.colors.gray[600],
textOnFill: appTheme.colors.gray[50],
textPrimary: appTheme.colors.gray[900],
textPrimaryOnDark: appTheme.colors.gray[50],
textPrimaryInverse: appTheme.colors.gray[50],
textSecondary: appTheme.colors.gray[600],
textSecondaryOnDark: appTheme.colors.gray[300],
textSecondaryInverse: appTheme.colors.gray[300],
textTertiary: appTheme.colors.gray[400],
textTertiaryOnDark: appTheme.colors.gray[500],
textTertiaryInverse: appTheme.colors.gray[500]
},
beta: {
border: appTheme.colors.purple[600],
fillHover: appTheme.colors.purple[600],
fillPressed: appTheme.colors.purple[700],
fillPrimary: appTheme.colors.purple[500],
fillSecondary: appTheme.colors.purple[100],
ornament: appTheme.colors.purple[600],
surfacePrimary: appTheme.colors.purple[500],
surfaceSecondary: appTheme.colors.purple[100],
text: appTheme.colors.purple[600]
},
info: {
border: appTheme.colors.blue[600],
fillHover: appTheme.colors.blue[600],
fillPressed: appTheme.colors.blue[700],
fillPrimary: appTheme.colors.blue[500],
fillSecondary: appTheme.colors.blue[100],
ornament: appTheme.colors.blue[600],
surfacePrimary: appTheme.colors.blue[500],
surfaceSecondary: appTheme.colors.blue[100],
text: appTheme.colors.blue[600]
},
negative: {
border: appTheme.colors.red[600],
fillHover: appTheme.colors.red[600],
fillPressed: appTheme.colors.red[700],
fillPrimary: appTheme.colors.red[500],
fillSecondary: appTheme.colors.red[100],
ornament: appTheme.colors.red[600],
surfacePrimary: appTheme.colors.red[500],
surfaceSecondary: appTheme.colors.red[100],
text: appTheme.colors.red[600]
},
neutral: {
border: appTheme.colors.gray[700],
fillHover: appTheme.colors.gray[700],
fillPressed: appTheme.colors.gray[800],
fillPrimary: appTheme.colors.gray[600],
fillSecondary: appTheme.colors.gray[200],
ornament: appTheme.colors.gray[700],
surfacePrimary: appTheme.colors.gray[600],
surfaceSecondary: appTheme.colors.gray[200],
text: appTheme.colors.gray[700]
},
notice: {
border: appTheme.colors.yellow[600],
fillHover: appTheme.colors.yellow[600],
fillPressed: appTheme.colors.yellow[700],
fillPrimary: appTheme.colors.yellow[500],
fillSecondary: appTheme.colors.yellow[100],
ornament: appTheme.colors.yellow[600],
surfacePrimary: appTheme.colors.yellow[500],
surfaceSecondary: appTheme.colors.yellow[100],
text: appTheme.colors.yellow[600]
},
positive: {
border: appTheme.colors.green[600],
fillHover: appTheme.colors.green[600],
fillPressed: appTheme.colors.green[700],
fillPrimary: appTheme.colors.green[500],
fillSecondary: appTheme.colors.green[100],
ornament: appTheme.colors.green[600],
surfacePrimary: appTheme.colors.green[500],
surfaceSecondary: appTheme.colors.green[100],
text: appTheme.colors.green[600]
}
};
};
const SDSPaletteDark = (appTheme) => {
return {
accent: {
border: appTheme.colors.indigo[600],
borderFocus: appTheme.colors.indigo[600],
borderHover: appTheme.colors.indigo[700],
borderOpen: appTheme.colors.indigo[600],
borderPressed: appTheme.colors.indigo[800],
borderSelected: appTheme.colors.indigo[600],
fillHover: appTheme.colors.indigo[700],
fillPressed: appTheme.colors.indigo[800],
fillPrimary: appTheme.colors.indigo[400],
ornament: appTheme.colors.indigo[600],
ornamentFocus: appTheme.colors.indigo[600],
ornamentHover: appTheme.colors.indigo[700],
ornamentOpen: appTheme.colors.indigo[600],
ornamentPressed: appTheme.colors.indigo[800],
ornamentSelected: appTheme.colors.indigo[600],
surfacePrimary: appTheme.colors.indigo[400],
surfaceSecondary: appTheme.colors.indigo[100],
textAction: appTheme.colors.indigo[600],
textActionHover: appTheme.colors.indigo[700],
textActionPressed: appTheme.colors.indigo[800]
},
base: {
backgroundPrimary: appTheme.colors.gray[75],
backgroundPrimaryDark: appTheme.colors.gray[75],
backgroundPrimaryInverse: appTheme.colors.gray[75],
backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
backgroundSecondaryInverse: addOpacityToHex(appTheme.colors.gray[100], 60),
backgroundTertiary: appTheme.colors.gray[100],
borderOnFill: appTheme.colors.gray[900],
borderPrimary: appTheme.colors.gray[600],
borderPrimaryDisabled: appTheme.colors.gray[300],
borderPrimaryDisabledOnDark: appTheme.colors.gray[300],
borderPrimaryDisabledInverse: appTheme.colors.gray[300],
borderPrimaryInteraction: appTheme.colors.gray[900],
borderPrimaryInteractionOnDark: appTheme.colors.gray[900],
borderPrimaryHoverInverse: appTheme.colors.gray[900],
borderPrimaryOnDark: appTheme.colors.gray[600],
borderPrimaryInverse: appTheme.colors.gray[600],
borderPrimaryPressedInverse: appTheme.colors.gray[900],
borderSecondary: appTheme.colors.gray[300],
divider: appTheme.colors.gray[200],
dividerOnDark: appTheme.colors.gray[200],
dividerInverse: appTheme.colors.gray[200],
fillDisabled: appTheme.colors.gray[100],
fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
fillPrimary: appTheme.colors.gray[100],
fillSelected: appTheme.colors.gray[900],
ornamentDisabled: appTheme.colors.gray[300],
ornamentDisabledOnDark: appTheme.colors.gray[300],
ornamentDisabledInverse: appTheme.colors.gray[300],
ornamentOnFill: appTheme.colors.gray[900],
ornamentPrimary: appTheme.colors.gray[900],
ornamentPrimaryOnDark: appTheme.colors.gray[900],
ornamentPrimaryInverse: appTheme.colors.gray[50],
ornamentSecondary: appTheme.colors.gray[600],
ornamentSecondaryInteraction: appTheme.colors.gray[900],
ornamentSecondaryInteractionOnDark: appTheme.colors.gray[900],
ornamentSecondaryHoverInverse: appTheme.colors.gray[900],
ornamentSecondaryOnDark: appTheme.colors.gray[600],
ornamentSecondaryInverse: appTheme.colors.gray[600],
ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
surfacePrimary: appTheme.colors.gray[100],
surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
surfacePrimaryDark: appTheme.colors.gray[100],
surfaceInverse: appTheme.colors.gray[100],
textDisabled: appTheme.colors.gray[300],
textDisabledOnDark: appTheme.colors.gray[300],
textDisabledInverse: appTheme.colors.gray[300],
textOnFill: appTheme.colors.gray[900],
textPrimary: appTheme.colors.gray[900],
textPrimaryOnDark: appTheme.colors.gray[900],
textPrimaryInverse: appTheme.colors.gray[50],
textSecondary: appTheme.colors.gray[600],
textSecondaryOnDark: appTheme.colors.gray[600],
textSecondaryInverse: appTheme.colors.gray[600],
textTertiary: appTheme.colors.gray[400],
textTertiaryOnDark: appTheme.colors.gray[400],
textTertiaryInverse: appTheme.colors.gray[400]
},
beta: {
border: appTheme.colors.purple[600],
fillHover: appTheme.colors.purple[700],
fillPressed: appTheme.colors.purple[800],
fillPrimary: appTheme.colors.purple[400],
fillSecondary: appTheme.colors.purple[100],
ornament: appTheme.colors.purple[600],
surfacePrimary: appTheme.colors.purple[400],
surfaceSecondary: appTheme.colors.purple[100],
text: appTheme.colors.purple[600]
},
info: {
border: appTheme.colors.blue[600],
fillHover: appTheme.colors.blue[700],
fillPressed: appTheme.colors.blue[800],
fillPrimary: appTheme.colors.blue[400],
fillSecondary: appTheme.colors.blue[100],
ornament: appTheme.colors.blue[600],
surfacePrimary: appTheme.colors.blue[400],
surfaceSecondary: appTheme.colors.blue[100],
text: appTheme.colors.blue[600]
},
negative: {
border: appTheme.colors.red[600],
fillHover: appTheme.colors.red[700],
fillPressed: appTheme.colors.red[800],
fillPrimary: appTheme.colors.red[400],
fillSecondary: appTheme.colors.red[100],
ornament: appTheme.colors.red[600],
surfacePrimary: appTheme.colors.red[400],
surfaceSecondary: appTheme.colors.red[100],
text: appTheme.colors.red[600]
},
neutral: {
border: appTheme.colors.gray[700],
fillHover: appTheme.colors.gray[600],
fillPressed: appTheme.colors.gray[700],
fillPrimary: appTheme.colors.gray[400],
fillSecondary: appTheme.colors.gray[200],
ornament: appTheme.colors.gray[700],
surfacePrimary: appTheme.colors.gray[400],
surfaceSecondary: appTheme.colors.gray[200],
text: appTheme.colors.gray[700]
},
notice: {
border: appTheme.colors.yellow[600],
fillHover: appTheme.colors.yellow[700],
fillPressed: appTheme.colors.yellow[800],
fillPrimary: appTheme.colors.yellow[400],
fillSecondary: appTheme.colors.yellow[100],
ornament: appTheme.colors.yellow[600],
surfacePrimary: appTheme.colors.yellow[400],
surfaceSecondary: appTheme.colors.yellow[100],
text: appTheme.colors.yellow[600]
},
positive: {
border: appTheme.colors.green[600],
fillHover: appTheme.colors.green[700],
fillPressed: appTheme.colors.green[800],
fillPrimary: appTheme.colors.green[400],
fillSecondary: appTheme.colors.green[100],
ornament: appTheme.colors.green[600],
surfacePrimary: appTheme.colors.green[400],
surfaceSecondary: appTheme.colors.green[100],
text: appTheme.colors.green[600]
}
};
};
/**
* This function creates the theme options for the MUI theme provider
*/
function makeThemeOptions(appTheme, mode) {
return {
app: appTheme,
breakpoints: {
values: Breakpoints
},
components: {
MuiButton: {
defaultProps: {
disableFocusRipple: true,
disableRipple: true,
disableTouchRipple: true
}
},
MuiButtonBase: {
defaultProps: {
disableRipple: true,
disableTouchRipple: true
}
},
MuiButtonGroup: {
defaultProps: {
disableFocusRipple: true,
disableRipple: true
}
},
MuiDrawer: {
defaultProps: {
hideBackdrop: true
}
},
MuiIconButton: {
defaultProps: {
disableFocusRipple: true,
disableRipple: true,
disableTouchRipple: true
}
},
MuiLink: {
defaultProps: {
underline: "hover"
}
},
MuiTab: {
defaultProps: {
disableFocusRipple: true,
disableRipple: true,
disableTouchRipple: true
}
},
MuiToggleButton: {
defaultProps: {
disableFocusRipple: true,
disableRipple: true,
disableTouchRipple: true
}
}
},
palette: {
action: {
disabled: appTheme.colors.gray[400],
disabledBackground: appTheme.colors.gray[300]
},
background: {
default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50]
},
divider: appTheme.colors.gray[200],
error: {
"100": appTheme.colors.red[100],
"200": appTheme.colors.red[200],
"300": appTheme.colors.red[300],
"400": appTheme.colors.red[400],
"500": appTheme.colors.red[500],
"600": appTheme.colors.red[600],
contrastText: appTheme.colors.gray[50],
dark: appTheme.colors.red[600],
light: appTheme.colors.red[200],
main: appTheme.colors.red[400]
},
grey: {
"100": appTheme.colors.gray[100],
"200": appTheme.colors.gray[200],
"300": appTheme.colors.gray[300],
"400": appTheme.colors.gray[400],
"500": appTheme.colors.gray[500],
"600": appTheme.colors.gray[600]
},
info: {
"100": appTheme.colors.blue[100],
"200": appTheme.colors.blue[200],
"300": appTheme.colors.blue[300],
"400": appTheme.colors.blue[400],
"500": appTheme.colors.blue[500],
"600": appTheme.colors.blue[600],
contrastText: appTheme.colors.gray[50],
dark: appTheme.colors.blue[600],
light: appTheme.colors.blue[200],
main: appTheme.colors.blue[400]
},
mode: mode,
primary: {
"100": appTheme.colors.blue[100],
"200": appTheme.colors.blue[200],
"300": appTheme.colors.blue[300],
"400": appTheme.colors.blue[400],
"500": appTheme.colors.blue[500],
"600": appTheme.colors.blue[600],
contrastText: appTheme.colors.gray[50],
dark: appTheme.colors.blue[600],
light: appTheme.colors.blue[200],
main: appTheme.colors.blue[400]
},
sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
secondary: {
"100": appTheme.colors.green[100],
"200": appTheme.colors.green[200],
"300": appTheme.colors.green[300],
"400": appTheme.colors.green[400],
"500": appTheme.colors.green[500],
"600": appTheme.colors.green[600],
contrastText: appTheme.colors.gray[50],
dark: appTheme.colors.green[600],
light: appTheme.colors.green[200],
main: appTheme.colors.green[400]
},
success: {
"100": appTheme.colors.green[100],
"200": appTheme.colors.green[200],
"300": appTheme.colors.green[300],
"400": appTheme.colors.green[400],
"500": appTheme.colors.green[500],
"600": appTheme.colors.green[600],
contrastText: appTheme.colors.gray[50],
dark: appTheme.colors.green[600],
light: appTheme.colors.green[200],
main: appTheme.colors.green[400]
},
text: {
disabled: appTheme.colors.gray[300],
primary: appTheme.colors.gray[900],
secondary: appTheme.colors.gray[600]
},
warning: {
"100": appTheme.colors.yellow[100],
"200": appTheme.colors.yellow[200],
"300": appTheme.colors.yellow[300],
"400": appTheme.colors.yellow[400],
"500": appTheme.colors.yellow[500],
"600": appTheme.colors.yellow[600],
contrastText: appTheme.colors.gray[900],
dark: appTheme.colors.yellow[600],
light: appTheme.colors.yellow[200],
main: appTheme.colors.yellow[400]
}
},
shadows: [
appTheme.shadows.none,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.s,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.m,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
appTheme.shadows.l,
],
shape: {
borderRadius: appTheme.corners.m
},
spacing: [
appTheme.spacing.default,
appTheme.spacing.xxxs,
appTheme.spacing.xxs,
appTheme.spacing.xs,
appTheme.spacing.s,
appTheme.spacing.m,
appTheme.spacing.l,
appTheme.spacing.xl,
appTheme.spacing.xxl,
appTheme.spacing.xxxl,
],
transitions: {
duration: {
complex: 200,
enteringScreen: 20,
leavingScreen: 10,
short: 150,
shorter: 100,
shortest: 50,
standard: 200
},
easing: {
easeIn: "cubic-bezier(0, 0, 0.2, 1)",
easeInOut: "cubic-bezier(0, 0, 0.2, 1)",
easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
sharp: "cubic-bezier(0, 0.2, 0.6, 1)"
}
},
typography: {
body1: appTheme.typography.wideStyles.body.regular.xs,
body2: appTheme.typography.wideStyles.body.regular.xxs,
button: appTheme.typography.wideStyles.body.regular.xs,
caption: appTheme.typography.wideStyles.body.regular.xxxs,
fontFamily: `${appTheme.typography.fontFamily.body}, sans-serif`,
h1: appTheme.typography.wideStyles.header.semibold.xxl,
h2: appTheme.typography.wideStyles.header.semibold.xl,
h3: appTheme.typography.wideStyles.header.semibold.l,
h4: appTheme.typography.wideStyles.header.semibold.m,
h5: appTheme.typography.wideStyles.header.semibold.s,
h6: appTheme.typography.wideStyles.header.semibold.xs,
overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
subtitle1: appTheme.typography.wideStyles.body.regular.xs,
subtitle2: appTheme.typography.wideStyles.header.semibold.xxs
}
};
}
/**
* Theme adaptor with light/dark mode support.
*
* @param t The theme to use. Currently supports a light and dark variant.
* @returns The selected theme object to be used in the ThemeProvider
*/
const Theme = (t) => createTheme$2(makeThemeOptions(SDSChooseTheme(t), t));
/**
* Default theme, uses light mode with no option to change it.
*
* Use the `theme` export to get a flexible light/dark mode theme function
*/
const defaultTheme$4 = Theme("light");
const getSpaces = ({ theme }) => {
return theme?.app?.spacing || null;
};
/**
* @deprecated getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()
*/
const getSpacings = ({ theme }) => {
console.warn("getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()");
return theme?.app?.spacing || null;
};
const getTypography = ({ theme, }) => {
return theme?.app?.typography || null;
};
const getMode = ({ theme }) => {
return theme?.palette?.mode || "light";
};
const getPalette = ({ theme }) => {
return theme?.palette;
};
const getColors = ({ theme }) => {
return theme?.app?.colors || null;
};
const getSemanticColors = ({ theme, }) => {
return theme?.palette?.sds || null;
};
const getShadows = ({ theme }) => {
return theme?.app?.shadows || null;
};
const getCorners = ({ theme }) => {
return theme?.app?.corners || null;
};
const getFontWeights = ({ theme, }) => {
return theme?.app?.fontWeights || null;
};
const getIconSizes = ({ theme }) => {
return theme?.app?.iconSizes || null;
};
const getBorders = ({ theme }) => {
return theme?.app?.borders || null;
};
const getBreakpoints = ({ theme, }) => {
return theme?.breakpoints || null;
};
function focusVisibleA11yStyle(props) {
const semanticColors = getSemanticColors(props);
return `
&.Mui-focusVisible, &:focus-visible {
outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
outline-offset: 1px;
}
`;
}
function createFontFunction(config) {
return (fontSize, fontWeight, isNarrow = false) => {
return (props) => {
const typography = getTypography(props);
if (!typography)
return null;
const weight = fontWeight ?? config.defaultWei