@czi-sds/components
Version:
2021 Create-a-thon Science Initiative Component Library
1,366 lines (1,342 loc) • 1.04 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, createContext, useContext, memo, Fragment as Fragment$1 } from 'react';
import { css, ThemeContext as ThemeContext$1 } from '@emotion/react';
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, CardActions, css as css$2, CardMedia, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, 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$1 } 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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
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 */
var FontSizeValues = {
wide: {
body: {
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: {
xxxs: 11,
xxs: 12,
xs: 13,
s: 14,
},
title: {
s: 32,
m: 40,
l: 52,
},
},
narrow: {
body: {
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: {
xxxs: 11,
xxs: 12,
xs: 13,
s: 14,
},
title: {
s: 26,
m: 32,
l: 40,
},
},
};
var LineHeightValues = {
wide: {
body: {
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: {
xxxs: 16,
xxs: 18,
xs: 20,
s: 24,
},
title: {
s: 40,
m: 50,
l: 64,
},
},
narrow: {
body: {
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: {
xxxs: 16,
xxs: 18,
xs: 20,
s: 24,
},
title: {
s: 34,
m: 40,
l: 50,
},
},
};
var LetterSpacingValues = {
wide: {
body: {
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: {
xxxs: "-0.25px",
xxs: "-0.25px",
xs: "-0.3px",
s: "-0.3px",
},
title: {
s: "0px",
m: "0px",
l: "0px",
},
},
narrow: {
body: {
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: {
xxxs: "-0.25px",
xxs: "-0.25px",
xs: "-0.3px",
s: "-0.3px",
},
title: {
s: "0px",
m: "0px",
l: "0px",
},
},
};
var TypographyCategories = {
body: {
weights: ["regular", "medium", "semibold"],
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
},
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"],
},
title: {
weights: ["bold"],
sizes: ["s", "m", "l"],
},
link: {
weights: ["regular", "medium", "semibold"],
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
},
};
var FontWeight = {
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
};
var DEFAULT_FONT_SIZE = 14;
var DEFAULT_LINE_HEIGHT = 24;
var DEFAULT_LETTER_SPACING = "0px";
function generateTypographyStyle(category, size, weight, isNarrow, tabularNums) {
var _a, _b, _c, _d, _e, _f;
if (isNarrow === void 0) { isNarrow = false; }
var screenType = isNarrow ? "narrow" : "wide";
// Use body values for link category
var sourceCategory = category === "link" ? "body" : category;
var baseFontSize = ((_b = (_a = FontSizeValues[screenType]) === null || _a === void 0 ? void 0 : _a[sourceCategory]) === null || _b === void 0 ? void 0 : _b[size]) || DEFAULT_FONT_SIZE;
var fontSize = baseFontSize;
var lineHeight = ((_d = (_c = LineHeightValues[screenType]) === null || _c === void 0 ? void 0 : _c[sourceCategory]) === null || _d === void 0 ? void 0 : _d[size]) || DEFAULT_LINE_HEIGHT;
var letterSpacing = ((_f = (_e = LetterSpacingValues[screenType]) === null || _e === void 0 ? void 0 : _e[sourceCategory]) === null || _f === void 0 ? void 0 : _f[size]) || DEFAULT_LETTER_SPACING;
var fontWeight = FontWeight[weight] || FontWeight.regular;
var baseStyle = {
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
lineHeight: "".concat(lineHeight, "px"),
textTransform: category === "caps" ? "uppercase" : "none",
};
if (category === "tabular" && tabularNums) {
baseStyle.fontVariantNumeric = tabularNums;
}
if (category === "link") {
baseStyle.textDecoration = "underline";
}
return baseStyle;
}
var generateCategoryStyles = function (category, isNarrow, tabularNums) {
if (isNarrow === void 0) { isNarrow = false; }
var config = TypographyCategories[category];
var categoryStyles = {};
config.weights.forEach(function (weight) {
categoryStyles[weight] = {};
config.sizes.forEach(function (size) {
categoryStyles[weight][size] = generateTypographyStyle(category, size, weight, isNarrow, tabularNums);
});
});
return categoryStyles;
};
var generateTypographyStyles = function (isNarrow, tabularNums) {
if (isNarrow === void 0) { isNarrow = false; }
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),
};
};
var generateTypographyTheme = function (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.
var BorderThickness = {
default: 1,
extraThick: 4,
thick: 2,
};
var createAppThemeBorders = function (colors, isDarkMode) {
var createBorder = function (color, level, style, thickness) { return "".concat(BorderThickness[thickness], "px ").concat(style, " ").concat(colors[color][level]); };
return {
accent: {
default: createBorder("blue", isDarkMode ? 600 : 500, "solid", "default"),
focused: createBorder("blue", isDarkMode ? 600 : 500, "solid", "default"),
hover: createBorder("blue", isDarkMode ? 700 : 600, "solid", "default"),
open: createBorder("blue", isDarkMode ? 600 : 500, "solid", "default"),
pressed: createBorder("blue", isDarkMode ? 800 : 700, "solid", "default"),
selected: createBorder("blue", isDarkMode ? 600 : 500, "solid", "default"),
},
base: {
default: createBorder("gray", 500, "solid", "default"),
disabled: createBorder("gray", 300, "solid", "default"),
divider: createBorder("gray", 200, "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 */
var Corners = {
rounded: 20,
xl: 8,
l: 6,
m: 4,
s: 2,
none: 0,
};
var 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 },
};
var 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)",
};
var Spaces = {
default: 12,
l: 16,
m: 12,
s: 8,
xl: 24,
xs: 6,
xxl: 40,
xxs: 4,
xxxs: 2,
};
var 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",
},
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",
},
};
var SDSDarkThemeColors = {
blue: {
"100": "#0f1d4a",
"200": "#0a216e",
"300": "#0647b8",
"400": "#2573f4",
"500": "#5b9aff",
"600": "#a2c9ff",
"700": "#cde3ff",
"800": "#e2eeff",
},
gray: {
"100": "#333333",
"200": "#494949",
"300": "#696969",
"400": "#9b9b9b",
"50": "#000000",
"500": "#aaaaaa",
"600": "#cdcdcd",
"700": "#ededed",
"75": "#101010",
"800": "#fafafa",
"900": "#ffffff",
},
green: {
"100": "#082608",
"200": "#063617",
"300": "#10632e",
"400": "#278b48",
"500": "#4bae68",
"600": "#85d898",
"700": "#bcecc5",
"800": "#daf4de",
},
purple: {
"100": "#331252",
"200": "#410f70",
"300": "#6429b2",
"400": "#905de6",
"500": "#aa89ef",
"600": "#cebef8",
"700": "#e4dcfc",
"800": "#f0ebfe",
},
red: {
"100": "#330603",
"200": "#660a12",
"300": "#9e1c1c",
"400": "#c73028",
"500": "#e05043",
"600": "#ff988a",
"700": "#ffbdb3",
"800": "#ffd8d1",
},
yellow: {
"100": "#361b07",
"200": "#52270a",
"300": "#965a0b",
"400": "#bd8804",
"500": "#d9a943",
"600": "#e5bc63",
"700": "#f5d789",
"800": "#ffe6a8",
},
};
var fontFamily$1 = '"Inter", sans-serif';
var fontFamilyCode = '"IBM Plex Mono", monospace';
var 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.
*/
var 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.
*/
var makeSdsSemanticAppTheme = function (colors, isDarkTheme) {
if (isDarkTheme === void 0) { isDarkTheme = false; }
return (__assign(__assign({}, sharedAppTheme), { borders: createAppThemeBorders(colors, isDarkTheme), colors: colors }));
};
var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors, true);
/**
* Helper function to select the appropriate theme settings.
*
* @param theme The theme to choose from. Currently supports a light and dark variant.
* @returns The appropriate app theme for the variant.
*/
var SDSChooseTheme = function (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.
*/
var defaultAppTheme = SDSLightAppTheme;
var 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)
* ```
*/
var percentToHex = function (percentOpacity) {
// Clamp the value between 0 and 100
var clampedPercent = Math.max(0, Math.min(100, percentOpacity));
// Convert percentage to 0-255 range
var alphaValue = Math.round((clampedPercent / 100) * 255);
// Convert to hex and pad with leading zero if needed
return alphaValue.toString(16).padStart(2, "0").toUpperCase();
};
/**
* 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"
* ```
*/
var addOpacityToHex = function (hexColor, percentOpacity) {
var opacityHex = percentToHex(percentOpacity);
return "".concat(hexColor).concat(opacityHex);
};
var SDSPaletteLight = function (appTheme) {
return {
accent: {
border: appTheme.colors.blue[500],
borderFocus: appTheme.colors.blue[500],
borderHover: appTheme.colors.blue[600],
borderOpen: appTheme.colors.blue[500],
borderPressed: appTheme.colors.blue[700],
borderSelected: appTheme.colors.blue[500],
fillHover: appTheme.colors.blue[600],
fillPressed: appTheme.colors.blue[700],
fillPrimary: appTheme.colors.blue[500],
ornament: appTheme.colors.blue[500],
ornamentFocus: appTheme.colors.blue[500],
ornamentHover: appTheme.colors.blue[600],
ornamentOpen: appTheme.colors.blue[500],
ornamentPressed: appTheme.colors.blue[700],
ornamentSelected: appTheme.colors.blue[500],
surfacePrimary: appTheme.colors.blue[500],
surfaceSecondary: appTheme.colors.blue[100],
textAction: appTheme.colors.blue[500],
textActionHover: appTheme.colors.blue[600],
textActionPressed: appTheme.colors.blue[700],
},
base: {
backgroundPrimary: appTheme.colors.gray[50],
backgroundPrimaryInverse: appTheme.colors.gray[900],
backgroundSecondary: appTheme.colors.gray[75],
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],
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
borderPrimaryHover: appTheme.colors.gray[900],
borderPrimaryHoverInverse: appTheme.colors.gray[50],
borderPrimaryInverse: appTheme.colors.gray[300],
borderPrimaryPressed: appTheme.colors.gray[900],
borderPrimaryPressedInverse: appTheme.colors.gray[50],
borderSecondary: appTheme.colors.gray[300],
divider: appTheme.colors.gray[200],
dividerInverse: appTheme.colors.gray[600],
fillDisabled: appTheme.colors.gray[200],
fillHover: addOpacityToHex(appTheme.colors.gray[300], 20),
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
fillOpen: addOpacityToHex(appTheme.colors.gray[300], 20),
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 20),
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
fillPrimary: appTheme.colors.gray[50],
fillSelected: appTheme.colors.gray[900],
ornamentDisabled: appTheme.colors.gray[300],
ornamentDisabledInverse: appTheme.colors.gray[600],
ornamentOnFill: appTheme.colors.gray[50],
ornamentPrimary: appTheme.colors.gray[900],
ornamentPrimaryInverse: appTheme.colors.gray[50],
ornamentSecondary: appTheme.colors.gray[600],
ornamentSecondaryHover: appTheme.colors.gray[900],
ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
ornamentSecondaryInverse: appTheme.colors.gray[300],
ornamentSecondaryPressed: appTheme.colors.gray[900],
ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
surface: appTheme.colors.gray[50],
surfaceInverse: appTheme.colors.gray[900],
textDisabled: appTheme.colors.gray[300],
textDisabledInverse: appTheme.colors.gray[600],
textOnFill: appTheme.colors.gray[50],
textPrimary: appTheme.colors.gray[900],
textPrimaryInverse: appTheme.colors.gray[50],
textSecondary: appTheme.colors.gray[600],
textSecondaryInverse: appTheme.colors.gray[300],
textTertiary: appTheme.colors.gray[400],
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[500],
fillHover: appTheme.colors.gray[600],
fillPressed: appTheme.colors.gray[700],
fillPrimary: appTheme.colors.gray[500],
fillSecondary: appTheme.colors.gray[200],
ornament: appTheme.colors.gray[700],
surfacePrimary: appTheme.colors.gray[500],
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],
},
};
};
var SDSPaletteDark = function (appTheme) {
return {
accent: {
border: appTheme.colors.blue[600],
borderFocus: appTheme.colors.blue[600],
borderHover: appTheme.colors.blue[700],
borderOpen: appTheme.colors.blue[600],
borderPressed: appTheme.colors.blue[800],
borderSelected: appTheme.colors.blue[600],
fillHover: appTheme.colors.blue[700],
fillPressed: appTheme.colors.blue[800],
fillPrimary: appTheme.colors.blue[400],
ornament: appTheme.colors.blue[600],
ornamentFocus: appTheme.colors.blue[600],
ornamentHover: appTheme.colors.blue[700],
ornamentOpen: appTheme.colors.blue[600],
ornamentPressed: appTheme.colors.blue[800],
ornamentSelected: appTheme.colors.blue[600],
surfacePrimary: appTheme.colors.blue[400],
surfaceSecondary: appTheme.colors.blue[100],
textAction: appTheme.colors.blue[600],
textActionHover: appTheme.colors.blue[700],
textActionPressed: appTheme.colors.blue[800],
},
base: {
backgroundPrimary: appTheme.colors.gray[75],
backgroundPrimaryInverse: appTheme.colors.gray[900],
backgroundSecondary: appTheme.colors.gray[100],
backgroundSecondaryInverse: appTheme.colors.gray[700],
backgroundTertiary: appTheme.colors.gray[200],
borderOnFill: appTheme.colors.gray[50],
borderPrimary: appTheme.colors.gray[600],
borderPrimaryDisabled: appTheme.colors.gray[300],
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
borderPrimaryHover: appTheme.colors.gray[900],
borderPrimaryHoverInverse: appTheme.colors.gray[50],
borderPrimaryInverse: appTheme.colors.gray[300],
borderPrimaryPressed: appTheme.colors.gray[900],
borderPrimaryPressedInverse: appTheme.colors.gray[50],
borderSecondary: appTheme.colors.gray[300],
divider: appTheme.colors.gray[200],
dividerInverse: appTheme.colors.gray[600],
fillDisabled: appTheme.colors.gray[200],
fillHover: addOpacityToHex(appTheme.colors.gray[300], 58),
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 8),
fillOpen: addOpacityToHex(appTheme.colors.gray[300], 58),
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 8),
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 58),
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 8),
fillPrimary: appTheme.colors.gray[100],
fillSelected: appTheme.colors.gray[900],
ornamentDisabled: appTheme.colors.gray[300],
ornamentDisabledInverse: appTheme.colors.gray[600],
ornamentOnFill: appTheme.colors.gray[900],
ornamentPrimary: appTheme.colors.gray[900],
ornamentPrimaryInverse: appTheme.colors.gray[50],
ornamentSecondary: appTheme.colors.gray[600],
ornamentSecondaryHover: appTheme.colors.gray[900],
ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
ornamentSecondaryInverse: appTheme.colors.gray[300],
ornamentSecondaryPressed: appTheme.colors.gray[900],
ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
surface: appTheme.colors.gray[100],
surfaceInverse: appTheme.colors.gray[700],
textDisabled: appTheme.colors.gray[300],
textDisabledInverse: appTheme.colors.gray[600],
textOnFill: appTheme.colors.gray[900],
textPrimary: appTheme.colors.gray[900],
textPrimaryInverse: appTheme.colors.gray[50],
textSecondary: appTheme.colors.gray[600],
textSecondaryInverse: appTheme.colors.gray[300],
textTertiary: appTheme.colors.gray[400],
textTertiaryInverse: appTheme.colors.gray[500],
},
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[500],
fillHover: appTheme.colors.gray[600],
fillPressed: appTheme.colors.gray[700],
fillPrimary: appTheme.colors.gray[500],
fillSecondary: appTheme.colors.gray[200],
ornament: appTheme.colors.gray[700],
surfacePrimary: appTheme.colors.gray[500],
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,
],
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: "".concat(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
*/
var Theme = function (t) {
return 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
*/
var defaultTheme$4 = Theme("light");
var getSpaces = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.spacing) || null;
};
/**
* @deprecated getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()
*/
var getSpacings = function (_a) {
var _b;
var theme = _a.theme;
console.warn("getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()");
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.spacing) || null;
};
var getTypography = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.typography) || null;
};
var getMode = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
};
var getPalette = function (_a) {
var theme = _a.theme;
return theme === null || theme === void 0 ? void 0 : theme.palette;
};
var getColors = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.colors) || null;
};
var getSemanticColors = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) || null;
};
var getShadows = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.shadows) || null;
};
var getCorners = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.corners) || null;
};
var getFontWeights = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.fontWeights) || null;
};
var getIconSizes = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.iconSizes) || null;
};
var getBorders = function (_a) {
var _b;
var theme = _a.theme;
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
};
var getBreakpoints = function (_a) {
var theme = _a.theme;
return (theme === null || theme === void 0 ? void 0 : theme.breakpoints) || null;
};
function focusVisibleA11yStyle(props) {
var _a;
var semanticColors = getSemanticColors(props);
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n ");
}
function createFontFunctio