@czi-sds/components 15.4.0 → 15.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +4 -7
- package/dist/index.cjs.js +36 -38
- package/dist/index.esm.d.ts +4 -7
- package/dist/index.esm.js +34 -36
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -2,13 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { forwardRef, useState, useEffect, createContext, useMemo, useRef, useContext } from 'react';
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
|
-
import { colors, AccordionDetails as AccordionDetails$1, SvgIcon, AccordionSummary, Accordion as Accordion$1, Alert as Alert$2, IconButton, MenuItem as MenuItem$1, menuItemClasses, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, InputAdornment, Paper, Button as Button$1, Grow, AlertTitle, Popper, Tooltip as Tooltip$1, Chip as Chip$1, ClickAwayListener, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, DialogContent, DialogTitle as DialogTitle$1, Typography, FormControlLabel, Checkbox, Radio, Slider, Switch, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1,
|
|
5
|
+
import { colors, AccordionDetails as AccordionDetails$1, SvgIcon, AccordionSummary, Accordion as Accordion$1, Alert as Alert$2, IconButton, MenuItem as MenuItem$1, menuItemClasses, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, InputAdornment, Autocomplete as Autocomplete$1, Paper, Button as Button$1, Grow, AlertTitle, Popper, Tooltip as Tooltip$1, Chip as Chip$1, ClickAwayListener, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, DialogContent, DialogTitle as DialogTitle$1, Typography, FormControlLabel, Checkbox, Radio, Slider, Switch, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
6
6
|
import { createTheme, styled, useTheme } from '@mui/material/styles';
|
|
7
7
|
import { Check, Clear } from '@mui/icons-material';
|
|
8
|
-
import Autocomplete$1 from '@mui/material/Autocomplete';
|
|
9
8
|
import { css as css$1 } from '@emotion/css';
|
|
10
|
-
import ToggleButton from '@mui/material/ToggleButton';
|
|
11
|
-
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
|
12
9
|
|
|
13
10
|
/******************************************************************************
|
|
14
11
|
Copyright (c) Microsoft Corporation.
|
|
@@ -3452,7 +3449,7 @@ var StyledAutocomplete$2 = styled(Autocomplete$1, {
|
|
|
3452
3449
|
var borders = getBorders(props);
|
|
3453
3450
|
return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n\n ").concat(search || hasSections
|
|
3454
3451
|
? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;")
|
|
3455
|
-
: "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0
|
|
3452
|
+
: "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n }\n ");
|
|
3456
3453
|
});
|
|
3457
3454
|
var InputBaseWrapper$2 = styled("div", {
|
|
3458
3455
|
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
@@ -4175,9 +4172,9 @@ var StyledAutocomplete$1 = styled(Autocomplete$1, {
|
|
|
4175
4172
|
var borders = getBorders(props);
|
|
4176
4173
|
return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .MuiAutocomplete-popper {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n }\n\n & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n\n ").concat(search || title || hasSections
|
|
4177
4174
|
? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;")
|
|
4178
|
-
: "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n
|
|
4175
|
+
: "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n\n ").concat(search || title || hasSections
|
|
4179
4176
|
? "padding-right: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;")
|
|
4180
|
-
: "", "\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n }
|
|
4177
|
+
: "", "\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n }\n ");
|
|
4181
4178
|
});
|
|
4182
4179
|
var InputBaseWrapper$1 = styled("div", {
|
|
4183
4180
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -4204,7 +4201,7 @@ var StyledHeaderTitle = styled("div", {
|
|
|
4204
4201
|
var search = props.search;
|
|
4205
4202
|
var typography = getTypography(props);
|
|
4206
4203
|
var spacings = getSpaces(props);
|
|
4207
|
-
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n color: black;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px
|
|
4204
|
+
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n color: black;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n ").concat(search ? "padding-bottom: 0px;" : "padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;"), "\n ");
|
|
4208
4205
|
});
|
|
4209
4206
|
var StyledPopper = styled(Popper, {
|
|
4210
4207
|
shouldForwardProp: function (prop) {
|
|
@@ -4293,12 +4290,14 @@ var inputDropdownStyles = function (props) {
|
|
|
4293
4290
|
var palette = getPalette(props);
|
|
4294
4291
|
var spacings = getSpaces(props);
|
|
4295
4292
|
var borders = getBorders(props);
|
|
4296
|
-
return css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
|
|
4293
|
+
return css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
|
|
4297
4294
|
};
|
|
4298
4295
|
var minimal$1 = function (props) {
|
|
4296
|
+
var _a;
|
|
4299
4297
|
var colors = getColors(props);
|
|
4300
4298
|
var spacings = getSpaces(props);
|
|
4301
|
-
|
|
4299
|
+
var palette = getPalette(props);
|
|
4300
|
+
return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
|
|
4302
4301
|
};
|
|
4303
4302
|
var square$1 = function (props) {
|
|
4304
4303
|
var corners = getCorners(props);
|
|
@@ -4309,31 +4308,36 @@ var rounded$1 = function (props) {
|
|
|
4309
4308
|
return css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
4310
4309
|
};
|
|
4311
4310
|
var userInput = function (props) {
|
|
4311
|
+
var _a, _b;
|
|
4312
|
+
var palette = getPalette(props);
|
|
4313
|
+
return css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary);
|
|
4314
|
+
};
|
|
4315
|
+
var isOpen = function (props) {
|
|
4312
4316
|
var _a;
|
|
4313
4317
|
var colors = getColors(props);
|
|
4314
4318
|
var palette = getPalette(props);
|
|
4315
|
-
return css(
|
|
4319
|
+
return css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
|
|
4316
4320
|
? "& > span, &:hover > span { color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, "; }")
|
|
4317
4321
|
: "", colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
|
|
4318
4322
|
};
|
|
4319
4323
|
var warning$1 = function (props) {
|
|
4320
4324
|
var colors = getColors(props);
|
|
4321
4325
|
var yellow = colors === null || colors === void 0 ? void 0 : colors.warning[400];
|
|
4322
|
-
return css(
|
|
4326
|
+
return css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), yellow, yellow, yellow);
|
|
4323
4327
|
};
|
|
4324
4328
|
var error$1 = function (props) {
|
|
4325
4329
|
var colors = getColors(props);
|
|
4326
4330
|
var red = colors === null || colors === void 0 ? void 0 : colors.error[400];
|
|
4327
|
-
return css(
|
|
4331
|
+
return css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), red, red, red);
|
|
4328
4332
|
};
|
|
4329
4333
|
var isDisabled = function (props) {
|
|
4330
4334
|
var colors = getColors(props);
|
|
4331
4335
|
var gray = colors === null || colors === void 0 ? void 0 : colors.gray[300];
|
|
4332
|
-
return css(
|
|
4336
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), gray, colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
4333
4337
|
};
|
|
4334
4338
|
var doNotForwardProps$b = [
|
|
4335
4339
|
"intent",
|
|
4336
|
-
"
|
|
4340
|
+
"state",
|
|
4337
4341
|
"sdsStage",
|
|
4338
4342
|
"sdsType",
|
|
4339
4343
|
"isMinimal",
|
|
@@ -4342,20 +4346,20 @@ var doNotForwardProps$b = [
|
|
|
4342
4346
|
];
|
|
4343
4347
|
var StyledInputDropdown = styled(Button, {
|
|
4344
4348
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4345
|
-
})(
|
|
4346
|
-
var disabled = props.disabled, intent = props.intent,
|
|
4347
|
-
return css(
|
|
4349
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
|
|
4350
|
+
var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
|
|
4351
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
|
|
4348
4352
|
});
|
|
4349
4353
|
var StyledDetail = styled("span", {
|
|
4350
4354
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4351
|
-
})(
|
|
4355
|
+
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4352
4356
|
var colors = getColors(props);
|
|
4353
4357
|
var spaces = getSpaces(props);
|
|
4354
4358
|
return "\n color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
4355
4359
|
});
|
|
4356
4360
|
var StyledLabel$1 = styled("span", {
|
|
4357
4361
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4358
|
-
})(
|
|
4362
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4359
4363
|
var _a;
|
|
4360
4364
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
4361
4365
|
var colors = getColors(props);
|
|
@@ -4368,7 +4372,7 @@ var StyledLabel$1 = styled("span", {
|
|
|
4368
4372
|
});
|
|
4369
4373
|
var StyledCounter = styled("span", {
|
|
4370
4374
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4371
|
-
})(
|
|
4375
|
+
})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4372
4376
|
var colors = getColors(props);
|
|
4373
4377
|
var corners = getCorners(props);
|
|
4374
4378
|
var spacings = getSpaces(props);
|
|
@@ -4376,7 +4380,7 @@ var StyledCounter = styled("span", {
|
|
|
4376
4380
|
});
|
|
4377
4381
|
var MinimalDetails = styled("div", {
|
|
4378
4382
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4379
|
-
})(
|
|
4383
|
+
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (_a) {
|
|
4380
4384
|
var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
|
|
4381
4385
|
if (shouldTruncateMinimalDetails) {
|
|
4382
4386
|
return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
|
|
@@ -4384,34 +4388,28 @@ var MinimalDetails = styled("div", {
|
|
|
4384
4388
|
});
|
|
4385
4389
|
var LabelWrapper = styled("span", {
|
|
4386
4390
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4387
|
-
})(
|
|
4391
|
+
})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4388
4392
|
var isMinimal = _a.isMinimal;
|
|
4389
4393
|
return "\n align-items: ".concat(isMinimal ? "center" : undefined, ";\n display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n width: 100%;\n ");
|
|
4390
4394
|
});
|
|
4391
4395
|
var IconWrapper = styled("span", {
|
|
4392
4396
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4393
|
-
})(
|
|
4397
|
+
})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
|
|
4394
4398
|
function labelStyle(props) {
|
|
4395
4399
|
var _a;
|
|
4396
4400
|
var colors = getColors(props);
|
|
4397
4401
|
var palette = getPalette(props);
|
|
4398
|
-
var labelColor = props.
|
|
4399
|
-
|
|
4400
|
-
: (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary;
|
|
4401
|
-
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
4402
|
+
var labelColor = props.sdsType === "value" ? (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary : colors === null || colors === void 0 ? void 0 : colors.gray[500];
|
|
4403
|
+
return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
4402
4404
|
}
|
|
4403
|
-
var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4405
|
+
var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
4404
4406
|
|
|
4405
4407
|
/**
|
|
4406
4408
|
* @see https://mui.com/material-ui/react-button/
|
|
4407
4409
|
*/
|
|
4408
4410
|
var InputDropdown = function (props) {
|
|
4409
|
-
var label = props.label,
|
|
4411
|
+
var label = props.label, _a = props.multiple, multiple = _a === void 0 ? false : _a, sdsStyle = props.sdsStyle, _b = props.sdsType, sdsType = _b === void 0 ? "label" : _b, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _c = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _c === void 0 ? true : _c, value = props.value;
|
|
4410
4412
|
var isMinimal = sdsStyle === "minimal";
|
|
4411
|
-
if (open !== undefined) {
|
|
4412
|
-
// eslint-disable-next-line no-console
|
|
4413
|
-
console.warn("Warning: InputDropdown prop `open` has been replaced by `sdsStage` and will be deprecated.");
|
|
4414
|
-
}
|
|
4415
4413
|
var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
|
|
4416
4414
|
var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
|
|
4417
4415
|
var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
|
|
@@ -5436,7 +5434,7 @@ var StyledMenuItem = styled(MenuItem)(templateObject_1$d || (templateObject_1$d
|
|
|
5436
5434
|
var doNotForwardProps$4 = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
5437
5435
|
// (thuang): Casting the type to `Autocomplete`
|
|
5438
5436
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
5439
|
-
var StyledAutocomplete = styled(Autocomplete$
|
|
5437
|
+
var StyledAutocomplete = styled(Autocomplete$1, {
|
|
5440
5438
|
shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
|
|
5441
5439
|
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
|
|
5442
5440
|
var search = _a.search;
|
|
@@ -5931,7 +5929,7 @@ var StyledSegmentedControl = styled(ToggleButtonGroup, {
|
|
|
5931
5929
|
var colors = getColors(props);
|
|
5932
5930
|
var spacings = getSpaces(props);
|
|
5933
5931
|
var corners = getCorners(props);
|
|
5934
|
-
return "\n height: 26px;\n
|
|
5932
|
+
return "\n height: 26px;\n\n .Mui-selected.MuiToggleButton-root {\n background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n\n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiToggleButton-root {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n line-height: 0px;\n color: #000;\n padding: 0;\n\n &:hover {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiSvgIcon-root {\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n }\n ");
|
|
5935
5933
|
});
|
|
5936
5934
|
var templateObject_1$8;
|
|
5937
5935
|
|