@czi-sds/data-viz 0.15.0 → 0.16.1
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 +24 -0
- package/dist/index.cjs.js +422 -272
- package/dist/index.esm.d.ts +24 -0
- package/dist/index.esm.js +423 -273
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -994,7 +994,7 @@ const Spaces = {
|
|
|
994
994
|
xs: 6,
|
|
995
995
|
s: 8,
|
|
996
996
|
m: 12,
|
|
997
|
-
default:
|
|
997
|
+
default: 8,
|
|
998
998
|
l: 16,
|
|
999
999
|
xl: 24,
|
|
1000
1000
|
xxl: 32,
|
|
@@ -1268,7 +1268,7 @@ const SDSPaletteLight = (appTheme) => {
|
|
|
1268
1268
|
backgroundPrimaryDark: appTheme.colors.gray[900],
|
|
1269
1269
|
backgroundPrimaryInverse: appTheme.colors.gray[900],
|
|
1270
1270
|
backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 40),
|
|
1271
|
-
|
|
1271
|
+
backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[700], 62),
|
|
1272
1272
|
backgroundSecondaryInverse: appTheme.colors.gray[700],
|
|
1273
1273
|
backgroundTertiary: appTheme.colors.gray[100],
|
|
1274
1274
|
borderOnFill: appTheme.colors.gray[50],
|
|
@@ -1276,27 +1276,23 @@ const SDSPaletteLight = (appTheme) => {
|
|
|
1276
1276
|
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
1277
1277
|
borderPrimaryDisabledOnDark: appTheme.colors.gray[600],
|
|
1278
1278
|
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
|
|
1279
|
-
|
|
1280
|
-
|
|
1279
|
+
borderPrimaryInteraction: appTheme.colors.gray[900],
|
|
1280
|
+
borderPrimaryInteractionOnDark: appTheme.colors.gray[50],
|
|
1281
1281
|
borderPrimaryHoverInverse: appTheme.colors.gray[50],
|
|
1282
1282
|
borderPrimaryOnDark: appTheme.colors.gray[300],
|
|
1283
1283
|
borderPrimaryInverse: appTheme.colors.gray[300],
|
|
1284
|
-
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
1285
|
-
borderPrimaryPressedOnDark: appTheme.colors.gray[50],
|
|
1286
1284
|
borderPrimaryPressedInverse: appTheme.colors.gray[50],
|
|
1287
1285
|
borderSecondary: appTheme.colors.gray[300],
|
|
1288
1286
|
divider: appTheme.colors.gray[200],
|
|
1289
1287
|
dividerOnDark: appTheme.colors.gray[700],
|
|
1290
1288
|
dividerInverse: appTheme.colors.gray[700],
|
|
1291
|
-
fillDisabled: appTheme.colors.gray[
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300],
|
|
1295
|
-
fillOpen: addOpacityToHex(appTheme.colors.gray[300], 20),
|
|
1296
|
-
fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
|
|
1289
|
+
fillDisabled: appTheme.colors.gray[100],
|
|
1290
|
+
fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 20),
|
|
1291
|
+
fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 20),
|
|
1292
|
+
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 20),
|
|
1297
1293
|
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
|
|
1298
|
-
fillPressed: addOpacityToHex(appTheme.colors.gray[300],
|
|
1299
|
-
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300],
|
|
1294
|
+
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 30),
|
|
1295
|
+
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
|
|
1300
1296
|
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
|
|
1301
1297
|
fillPrimary: appTheme.colors.gray[50],
|
|
1302
1298
|
fillSelected: appTheme.colors.gray[900],
|
|
@@ -1308,16 +1304,15 @@ const SDSPaletteLight = (appTheme) => {
|
|
|
1308
1304
|
ornamentPrimaryOnDark: appTheme.colors.gray[50],
|
|
1309
1305
|
ornamentPrimaryInverse: appTheme.colors.gray[50],
|
|
1310
1306
|
ornamentSecondary: appTheme.colors.gray[600],
|
|
1311
|
-
|
|
1312
|
-
|
|
1307
|
+
ornamentSecondaryInteraction: appTheme.colors.gray[900],
|
|
1308
|
+
ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
|
|
1313
1309
|
ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
|
|
1314
1310
|
ornamentSecondaryOnDark: appTheme.colors.gray[300],
|
|
1315
1311
|
ornamentSecondaryInverse: appTheme.colors.gray[300],
|
|
1316
|
-
ornamentSecondaryPressed: appTheme.colors.gray[900],
|
|
1317
|
-
ornamentSecondaryPressedOnDark: appTheme.colors.gray[50],
|
|
1318
1312
|
ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
|
|
1319
|
-
|
|
1320
|
-
|
|
1313
|
+
surfacePrimary: appTheme.colors.gray[50],
|
|
1314
|
+
surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
|
|
1315
|
+
surfacePrimaryDark: appTheme.colors.gray[900],
|
|
1321
1316
|
surfaceInverse: appTheme.colors.gray[900],
|
|
1322
1317
|
textDisabled: appTheme.colors.gray[300],
|
|
1323
1318
|
textDisabledOnDark: appTheme.colors.gray[600],
|
|
@@ -1430,7 +1425,7 @@ const SDSPaletteDark = (appTheme) => {
|
|
|
1430
1425
|
backgroundPrimaryDark: appTheme.colors.gray[75],
|
|
1431
1426
|
backgroundPrimaryInverse: appTheme.colors.gray[75],
|
|
1432
1427
|
backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
|
|
1433
|
-
|
|
1428
|
+
backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
|
|
1434
1429
|
backgroundSecondaryInverse: addOpacityToHex(appTheme.colors.gray[100], 60),
|
|
1435
1430
|
backgroundTertiary: appTheme.colors.gray[100],
|
|
1436
1431
|
borderOnFill: appTheme.colors.gray[900],
|
|
@@ -1438,27 +1433,23 @@ const SDSPaletteDark = (appTheme) => {
|
|
|
1438
1433
|
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
1439
1434
|
borderPrimaryDisabledOnDark: appTheme.colors.gray[300],
|
|
1440
1435
|
borderPrimaryDisabledInverse: appTheme.colors.gray[300],
|
|
1441
|
-
|
|
1442
|
-
|
|
1436
|
+
borderPrimaryInteraction: appTheme.colors.gray[900],
|
|
1437
|
+
borderPrimaryInteractionOnDark: appTheme.colors.gray[900],
|
|
1443
1438
|
borderPrimaryHoverInverse: appTheme.colors.gray[900],
|
|
1444
1439
|
borderPrimaryOnDark: appTheme.colors.gray[600],
|
|
1445
1440
|
borderPrimaryInverse: appTheme.colors.gray[600],
|
|
1446
|
-
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
1447
|
-
borderPrimaryPressedOnDark: appTheme.colors.gray[900],
|
|
1448
1441
|
borderPrimaryPressedInverse: appTheme.colors.gray[900],
|
|
1449
1442
|
borderSecondary: appTheme.colors.gray[300],
|
|
1450
1443
|
divider: appTheme.colors.gray[200],
|
|
1451
1444
|
dividerOnDark: appTheme.colors.gray[200],
|
|
1452
1445
|
dividerInverse: appTheme.colors.gray[200],
|
|
1453
|
-
fillDisabled: appTheme.colors.gray[
|
|
1454
|
-
|
|
1455
|
-
|
|
1446
|
+
fillDisabled: appTheme.colors.gray[100],
|
|
1447
|
+
fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1448
|
+
fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1456
1449
|
fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1457
|
-
fillOpen: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1458
|
-
fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1459
1450
|
fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1460
|
-
fillPressed: addOpacityToHex(appTheme.colors.gray[300],
|
|
1461
|
-
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300],
|
|
1451
|
+
fillPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
|
|
1452
|
+
fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
|
|
1462
1453
|
fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1463
1454
|
fillPrimary: appTheme.colors.gray[100],
|
|
1464
1455
|
fillSelected: appTheme.colors.gray[900],
|
|
@@ -1470,16 +1461,15 @@ const SDSPaletteDark = (appTheme) => {
|
|
|
1470
1461
|
ornamentPrimaryOnDark: appTheme.colors.gray[900],
|
|
1471
1462
|
ornamentPrimaryInverse: appTheme.colors.gray[50],
|
|
1472
1463
|
ornamentSecondary: appTheme.colors.gray[600],
|
|
1473
|
-
|
|
1474
|
-
|
|
1464
|
+
ornamentSecondaryInteraction: appTheme.colors.gray[900],
|
|
1465
|
+
ornamentSecondaryInteractionOnDark: appTheme.colors.gray[900],
|
|
1475
1466
|
ornamentSecondaryHoverInverse: appTheme.colors.gray[900],
|
|
1476
1467
|
ornamentSecondaryOnDark: appTheme.colors.gray[600],
|
|
1477
1468
|
ornamentSecondaryInverse: appTheme.colors.gray[600],
|
|
1478
|
-
ornamentSecondaryPressed: appTheme.colors.gray[900],
|
|
1479
|
-
ornamentSecondaryPressedOnDark: appTheme.colors.gray[900],
|
|
1480
1469
|
ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
|
|
1481
|
-
|
|
1482
|
-
|
|
1470
|
+
surfacePrimary: appTheme.colors.gray[100],
|
|
1471
|
+
surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
|
|
1472
|
+
surfacePrimaryDark: appTheme.colors.gray[100],
|
|
1483
1473
|
surfaceInverse: appTheme.colors.gray[100],
|
|
1484
1474
|
textDisabled: appTheme.colors.gray[300],
|
|
1485
1475
|
textDisabledOnDark: appTheme.colors.gray[300],
|
|
@@ -1761,6 +1751,7 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1761
1751
|
appTheme.spacing.l,
|
|
1762
1752
|
appTheme.spacing.xl,
|
|
1763
1753
|
appTheme.spacing.xxl,
|
|
1754
|
+
appTheme.spacing.xxxl,
|
|
1764
1755
|
],
|
|
1765
1756
|
transitions: {
|
|
1766
1757
|
duration: {
|
|
@@ -1810,7 +1801,7 @@ const Theme = (t) => material.createTheme(makeThemeOptions(SDSChooseTheme(), t))
|
|
|
1810
1801
|
*
|
|
1811
1802
|
* Use the `theme` export to get a flexible light/dark mode theme function
|
|
1812
1803
|
*/
|
|
1813
|
-
Theme("light");
|
|
1804
|
+
const defaultTheme$4 = Theme("light");
|
|
1814
1805
|
|
|
1815
1806
|
const getSpaces = ({ theme }) => {
|
|
1816
1807
|
return theme?.app?.spacing || null;
|
|
@@ -1853,7 +1844,7 @@ function focusVisibleA11yStyle(props) {
|
|
|
1853
1844
|
const semanticColors = getSemanticColors(props);
|
|
1854
1845
|
return `
|
|
1855
1846
|
&.Mui-focusVisible, &:focus-visible {
|
|
1856
|
-
outline: 2px solid ${semanticColors?.base?.
|
|
1847
|
+
outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
1857
1848
|
outline-offset: 1px;
|
|
1858
1849
|
}
|
|
1859
1850
|
`;
|
|
@@ -1906,6 +1897,7 @@ const fontBodySemiboldL = fontBody("l", "semibold");
|
|
|
1906
1897
|
const fontBodySemiboldM = fontBody("m", "semibold");
|
|
1907
1898
|
const fontBodySemiboldS = fontBody("s", "semibold");
|
|
1908
1899
|
const fontBodySemiboldXs = fontBody("xs", "semibold");
|
|
1900
|
+
const fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
|
|
1909
1901
|
const fontCaps = createFontFunction({
|
|
1910
1902
|
additionalCss: "text-transform: uppercase;",
|
|
1911
1903
|
defaultWeight: "semibold",
|
|
@@ -1929,8 +1921,9 @@ const fontTabular = createFontFunction({
|
|
|
1929
1921
|
type: "tabular"
|
|
1930
1922
|
});
|
|
1931
1923
|
const fontTabularXs = fontTabular("xs", "regular");
|
|
1932
|
-
const
|
|
1924
|
+
const fontTabularMediumS = fontTabular("s", "medium");
|
|
1933
1925
|
const fontTabularSemiboldXxxxs = fontTabular("xxxxs", "semibold");
|
|
1926
|
+
const fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1934
1927
|
function themeToCss(fontTheme, fontFamily = "inherit") {
|
|
1935
1928
|
return react.css `
|
|
1936
1929
|
font-family: ${fontFamily};
|
|
@@ -1998,7 +1991,7 @@ const StyledAccordionHeader = styled$2__default.default(material.AccordionSummar
|
|
|
1998
1991
|
&:hover {
|
|
1999
1992
|
& .${material.accordionSummaryClasses.expandIconWrapper} {
|
|
2000
1993
|
svg {
|
|
2001
|
-
color: ${semanticColors?.base?.
|
|
1994
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
2002
1995
|
}
|
|
2003
1996
|
}
|
|
2004
1997
|
}
|
|
@@ -5486,12 +5479,12 @@ const Minimal = (props) => {
|
|
|
5486
5479
|
}
|
|
5487
5480
|
|
|
5488
5481
|
&:hover {
|
|
5489
|
-
background-color: ${semanticColors?.base?.
|
|
5482
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
5490
5483
|
}
|
|
5491
5484
|
|
|
5492
5485
|
&:active {
|
|
5493
5486
|
color: ${semanticColors?.accent?.textActionPressed};
|
|
5494
|
-
background-color: ${semanticColors?.base?.
|
|
5487
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
5495
5488
|
|
|
5496
5489
|
svg {
|
|
5497
5490
|
color: ${semanticColors?.accent?.ornamentPressed};
|
|
@@ -5598,7 +5591,7 @@ const primary$2 = (props) => {
|
|
|
5598
5591
|
}
|
|
5599
5592
|
|
|
5600
5593
|
&:hover {
|
|
5601
|
-
background: ${semanticColors?.base?.
|
|
5594
|
+
background: ${semanticColors?.base?.fillInteraction};
|
|
5602
5595
|
color: ${semanticColors?.accent?.ornamentHover};
|
|
5603
5596
|
|
|
5604
5597
|
svg {
|
|
@@ -5626,7 +5619,7 @@ const secondary$2 = (props) => {
|
|
|
5626
5619
|
}
|
|
5627
5620
|
|
|
5628
5621
|
&:hover {
|
|
5629
|
-
background: ${semanticColors?.base?.
|
|
5622
|
+
background: ${semanticColors?.base?.fillInteraction};
|
|
5630
5623
|
color: ${semanticColors?.accent?.ornamentHover};
|
|
5631
5624
|
|
|
5632
5625
|
svg {
|
|
@@ -5655,19 +5648,19 @@ const tertiary = (props) => {
|
|
|
5655
5648
|
|
|
5656
5649
|
&:hover {
|
|
5657
5650
|
background: none;
|
|
5658
|
-
color: ${semanticColors?.base?.
|
|
5651
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
5659
5652
|
|
|
5660
5653
|
svg {
|
|
5661
|
-
color: ${semanticColors?.base?.
|
|
5654
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
5662
5655
|
}
|
|
5663
5656
|
}
|
|
5664
5657
|
|
|
5665
5658
|
&:active {
|
|
5666
5659
|
background: none;
|
|
5667
|
-
color: ${semanticColors?.base?.
|
|
5660
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
5668
5661
|
|
|
5669
5662
|
svg {
|
|
5670
|
-
color: ${semanticColors?.base?.
|
|
5663
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
5671
5664
|
}
|
|
5672
5665
|
}
|
|
5673
5666
|
`;
|
|
@@ -5887,7 +5880,7 @@ const applyIntentColor$2 = (props, intent) => {
|
|
|
5887
5880
|
.${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
|
|
5888
5881
|
cursor: default;
|
|
5889
5882
|
svg {
|
|
5890
|
-
color: ${semanticColors?.base?.
|
|
5883
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
5891
5884
|
}
|
|
5892
5885
|
}
|
|
5893
5886
|
}
|
|
@@ -5953,9 +5946,6 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
|
|
|
5953
5946
|
const semanticColors = getSemanticColors(props);
|
|
5954
5947
|
const corners = getCorners(props);
|
|
5955
5948
|
return react.css `
|
|
5956
|
-
margin-top: ${spaces?.m}px;
|
|
5957
|
-
margin-bottom: ${spaces?.m}px;
|
|
5958
|
-
margin-right: ${spaces?.xl}px;
|
|
5959
5949
|
min-width: 120px;
|
|
5960
5950
|
display: block;
|
|
5961
5951
|
|
|
@@ -6004,7 +5994,8 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
|
|
|
6004
5994
|
|
|
6005
5995
|
&:hover {
|
|
6006
5996
|
svg {
|
|
6007
|
-
color: ${semanticColors?.base
|
|
5997
|
+
color: ${semanticColors?.base
|
|
5998
|
+
?.ornamentSecondaryInteraction} !important;
|
|
6008
5999
|
}
|
|
6009
6000
|
}
|
|
6010
6001
|
|
|
@@ -6024,7 +6015,7 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
|
|
|
6024
6015
|
}
|
|
6025
6016
|
|
|
6026
6017
|
.${material.outlinedInputClasses.root}:hover {
|
|
6027
|
-
background-color: ${semanticColors?.base?.
|
|
6018
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6028
6019
|
|
|
6029
6020
|
& .${material.buttonBaseClasses.root}:last-of-type {
|
|
6030
6021
|
svg {
|
|
@@ -6032,7 +6023,7 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
|
|
|
6032
6023
|
}
|
|
6033
6024
|
}
|
|
6034
6025
|
.${material.outlinedInputClasses.notchedOutline} {
|
|
6035
|
-
border: 1px solid ${semanticColors?.base?.
|
|
6026
|
+
border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
6036
6027
|
}
|
|
6037
6028
|
}
|
|
6038
6029
|
|
|
@@ -6046,13 +6037,13 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
|
|
|
6046
6037
|
.${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
|
|
6047
6038
|
cursor: default;
|
|
6048
6039
|
svg {
|
|
6049
|
-
color: ${semanticColors?.base?.
|
|
6040
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
6050
6041
|
}
|
|
6051
6042
|
}
|
|
6052
6043
|
}
|
|
6053
6044
|
|
|
6054
6045
|
&.user-is-tabbing .${material.outlinedInputClasses.root}:focus-within {
|
|
6055
|
-
outline: 2px solid ${semanticColors?.base?.
|
|
6046
|
+
outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
6056
6047
|
outline-offset: 1px;
|
|
6057
6048
|
}
|
|
6058
6049
|
|
|
@@ -6091,10 +6082,10 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
|
|
|
6091
6082
|
opacity: 1;
|
|
6092
6083
|
|
|
6093
6084
|
&:hover, &.${material.menuItemClasses.focusVisible} {
|
|
6094
|
-
background-color: ${semanticColors?.base?.
|
|
6085
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6095
6086
|
|
|
6096
6087
|
&[aria-selected="true"] {
|
|
6097
|
-
background-color: ${semanticColors?.base?.
|
|
6088
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6098
6089
|
}
|
|
6099
6090
|
}
|
|
6100
6091
|
}
|
|
@@ -6111,7 +6102,7 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
|
|
|
6111
6102
|
background-color: unset !important;
|
|
6112
6103
|
|
|
6113
6104
|
&:hover {
|
|
6114
|
-
background-color: ${semanticColors?.base?.
|
|
6105
|
+
background-color: ${semanticColors?.base?.fillInteraction} !important;
|
|
6115
6106
|
}
|
|
6116
6107
|
|
|
6117
6108
|
${StyledIcon$1}, ${DotIcon} {
|
|
@@ -6124,16 +6115,16 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
|
|
|
6124
6115
|
}
|
|
6125
6116
|
|
|
6126
6117
|
&:hover {
|
|
6127
|
-
background-color: ${semanticColors?.base?.
|
|
6118
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6128
6119
|
${StyledIcon$1}, ${DotIcon} {
|
|
6129
6120
|
color: ${selected ? semanticColors?.base?.ornamentPrimary : semanticColors?.base?.ornamentSecondary};
|
|
6130
6121
|
}
|
|
6131
6122
|
}
|
|
6132
6123
|
|
|
6133
6124
|
&.Mui-selected.MuiListItem-root.MuiListItem-button {
|
|
6134
|
-
background-color: ${semanticColors?.base?.
|
|
6125
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6135
6126
|
&:hover {
|
|
6136
|
-
background-color: ${semanticColors?.base?.
|
|
6127
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6137
6128
|
}
|
|
6138
6129
|
}
|
|
6139
6130
|
|
|
@@ -6472,7 +6463,7 @@ styled$2__default.default(material.Autocomplete, {
|
|
|
6472
6463
|
// look at the useDetectUserTabbing hook.
|
|
6473
6464
|
&[data-user-is-tabbing="true"]:focus-within {
|
|
6474
6465
|
border-radius: 4px;
|
|
6475
|
-
outline: 2px solid ${semanticColors?.base?.
|
|
6466
|
+
outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
6476
6467
|
outline-offset: 1px;
|
|
6477
6468
|
}
|
|
6478
6469
|
|
|
@@ -6497,11 +6488,11 @@ styled$2__default.default(material.Autocomplete, {
|
|
|
6497
6488
|
min-height: unset;
|
|
6498
6489
|
|
|
6499
6490
|
&.${material.autocompleteClasses.focused} {
|
|
6500
|
-
background-color: ${semanticColors?.base?.
|
|
6491
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6501
6492
|
}
|
|
6502
6493
|
|
|
6503
6494
|
&[aria-selected="true"] {
|
|
6504
|
-
background-color: ${semanticColors?.base?.
|
|
6495
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6505
6496
|
}
|
|
6506
6497
|
|
|
6507
6498
|
&[aria-disabled="true"] {
|
|
@@ -6509,7 +6500,7 @@ styled$2__default.default(material.Autocomplete, {
|
|
|
6509
6500
|
}
|
|
6510
6501
|
|
|
6511
6502
|
&[aria-selected="true"].${material.autocompleteClasses.focused} {
|
|
6512
|
-
background-color: ${semanticColors?.base?.
|
|
6503
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
6513
6504
|
}
|
|
6514
6505
|
}
|
|
6515
6506
|
|
|
@@ -6523,7 +6514,7 @@ styled$2__default.default(material.Autocomplete, {
|
|
|
6523
6514
|
.${material.autocompleteClasses.groupLabel} {
|
|
6524
6515
|
top: 0;
|
|
6525
6516
|
color: ${semanticColors?.base?.textSecondary};
|
|
6526
|
-
background-color: ${semanticColors?.base?.
|
|
6517
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6527
6518
|
padding: 0 ${spaces?.m}px;
|
|
6528
6519
|
}
|
|
6529
6520
|
|
|
@@ -6591,7 +6582,7 @@ styled$2__default.default(material.Paper) `
|
|
|
6591
6582
|
return `
|
|
6592
6583
|
background-image: none;
|
|
6593
6584
|
padding: ${spaces?.xs}px 0;
|
|
6594
|
-
background-color: ${semanticColors?.base?.
|
|
6585
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6595
6586
|
border: ${borders?.none};
|
|
6596
6587
|
outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000", 15)};
|
|
6597
6588
|
border-radius: ${corners?.l}px;
|
|
@@ -6603,9 +6594,10 @@ styled$2__default.default(material.Paper) `
|
|
|
6603
6594
|
styled$2__default.default("div") `
|
|
6604
6595
|
${fontBodyXxs$1}
|
|
6605
6596
|
${(props) => {
|
|
6597
|
+
const { disabled } = props;
|
|
6606
6598
|
const semanticColors = getSemanticColors(props);
|
|
6607
6599
|
return `
|
|
6608
|
-
color: ${semanticColors?.base?.textSecondary};
|
|
6600
|
+
color: ${disabled ? semanticColors?.base?.textDisabled : semanticColors?.base?.textSecondary};
|
|
6609
6601
|
white-space: pre-wrap;
|
|
6610
6602
|
`;
|
|
6611
6603
|
}}
|
|
@@ -6658,7 +6650,7 @@ styled$2__default.default(material.Popper, {
|
|
|
6658
6650
|
const borders = getBorders(props);
|
|
6659
6651
|
const semanticColors = getSemanticColors(props);
|
|
6660
6652
|
return `
|
|
6661
|
-
background-color: ${semanticColors?.base?.
|
|
6653
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6662
6654
|
background-image: none;
|
|
6663
6655
|
border: ${borders?.none};
|
|
6664
6656
|
border-radius: ${corners?.l}px;
|
|
@@ -6685,7 +6677,7 @@ styled$2__default.default(material.Paper, {
|
|
|
6685
6677
|
const shadows = getShadows(props);
|
|
6686
6678
|
const semanticColors = getSemanticColors(props);
|
|
6687
6679
|
return `
|
|
6688
|
-
background-color: ${semanticColors?.base?.
|
|
6680
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6689
6681
|
background-image: none;
|
|
6690
6682
|
box-shadow: ${shadows?.none};
|
|
6691
6683
|
margin: 0;
|
|
@@ -6729,7 +6721,7 @@ material.styled("span") `
|
|
|
6729
6721
|
const iconSizes = getIconSizes(props);
|
|
6730
6722
|
const semanticColors = getSemanticColors(props);
|
|
6731
6723
|
return `
|
|
6732
|
-
background-color: ${semanticColors?.base?.
|
|
6724
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
6733
6725
|
position: absolute;
|
|
6734
6726
|
right: -${spaces?.xs}px;
|
|
6735
6727
|
top: -${spaces?.xxxs}px;
|
|
@@ -6920,7 +6912,7 @@ const StyledButtonToggle = styled$2__default.default(ButtonIcon, {
|
|
|
6920
6912
|
const { sdsStage } = props;
|
|
6921
6913
|
const semanticColors = getSemanticColors(props);
|
|
6922
6914
|
return `
|
|
6923
|
-
background-color: ${sdsStage === "on" ? semanticColors?.base?.
|
|
6915
|
+
background-color: ${sdsStage === "on" ? semanticColors?.base?.fillInteraction : "transparent"};
|
|
6924
6916
|
`;
|
|
6925
6917
|
}}
|
|
6926
6918
|
`;
|
|
@@ -7033,7 +7025,7 @@ const dark$1 = (props) => {
|
|
|
7033
7025
|
const semanticColors = getSemanticColors(props);
|
|
7034
7026
|
return css$1.css `
|
|
7035
7027
|
${fontHeaderXs(props)}
|
|
7036
|
-
background-color: ${semanticColors?.base?.
|
|
7028
|
+
background-color: ${semanticColors?.base?.surfacePrimaryDark};
|
|
7037
7029
|
color: ${semanticColors?.base?.textPrimaryOnDark};
|
|
7038
7030
|
padding: ${spaces?.s}px ${spaces?.m}px;
|
|
7039
7031
|
`;
|
|
@@ -7043,7 +7035,7 @@ const light$1 = (props) => {
|
|
|
7043
7035
|
const semanticColors = getSemanticColors(props);
|
|
7044
7036
|
return css$1.css `
|
|
7045
7037
|
${fontBodyXs$2(props)}
|
|
7046
|
-
background-color: ${semanticColors?.base?.
|
|
7038
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
7047
7039
|
color: ${semanticColors?.base?.textPrimary};
|
|
7048
7040
|
padding: ${spaces?.s}px ${spaces?.m}px;
|
|
7049
7041
|
`;
|
|
@@ -7118,8 +7110,8 @@ const arrowCss = (props) => {
|
|
|
7118
7110
|
/* (bethbertozzi): !important is needed to fight inline style */
|
|
7119
7111
|
left: ${arrowOffset}px !important;
|
|
7120
7112
|
color: ${hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
7121
|
-
? semanticColors?.base?.
|
|
7122
|
-
: semanticColors?.base?.
|
|
7113
|
+
? semanticColors?.base?.surfacePrimaryDark
|
|
7114
|
+
: semanticColors?.base?.surfacePrimary};
|
|
7123
7115
|
&:before {
|
|
7124
7116
|
box-sizing: border-box;
|
|
7125
7117
|
width: 12px;
|
|
@@ -7542,7 +7534,7 @@ const StyledTableHeader$1 = styled$2__default.default("th", {
|
|
|
7542
7534
|
}
|
|
7543
7535
|
|
|
7544
7536
|
& svg {
|
|
7545
|
-
color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.
|
|
7537
|
+
color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
|
|
7546
7538
|
}
|
|
7547
7539
|
}
|
|
7548
7540
|
`;
|
|
@@ -7762,6 +7754,21 @@ styled$2__default.default("div", {
|
|
|
7762
7754
|
`;
|
|
7763
7755
|
}}
|
|
7764
7756
|
`;
|
|
7757
|
+
styled$2__default.default("div", {
|
|
7758
|
+
shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
|
|
7759
|
+
}) `
|
|
7760
|
+
${fontBodyXxs$1}
|
|
7761
|
+
|
|
7762
|
+
${(props) => {
|
|
7763
|
+
const spaces = getSpaces(props);
|
|
7764
|
+
const semanticColors = getSemanticColors(props);
|
|
7765
|
+
return `
|
|
7766
|
+
color: ${semanticColors?.base?.textSecondary};
|
|
7767
|
+
padding-right: ${spaces?.m}px;
|
|
7768
|
+
padding-top: ${spaces?.xxxs}px;
|
|
7769
|
+
`;
|
|
7770
|
+
}}
|
|
7771
|
+
`;
|
|
7765
7772
|
styled$2__default.default("div", {
|
|
7766
7773
|
shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
|
|
7767
7774
|
}) `
|
|
@@ -7808,7 +7815,7 @@ styled$2__default.default(material.Popper, {
|
|
|
7808
7815
|
const shadows = getShadows(props);
|
|
7809
7816
|
const semanticColors = getSemanticColors(props);
|
|
7810
7817
|
return `
|
|
7811
|
-
background-color: ${semanticColors?.base?.
|
|
7818
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
7812
7819
|
background-image: none;
|
|
7813
7820
|
border: ${borders?.none};
|
|
7814
7821
|
border-radius: ${corners?.l}px;
|
|
@@ -7831,7 +7838,7 @@ styled$2__default.default(material.Paper, {
|
|
|
7831
7838
|
border: none !important;
|
|
7832
7839
|
outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
|
|
7833
7840
|
border-radius: ${corners?.l}px;
|
|
7834
|
-
background-color: ${semanticColors?.base?.
|
|
7841
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
7835
7842
|
background-image: none;
|
|
7836
7843
|
margin: 0;
|
|
7837
7844
|
padding: 0 0 ${spaces?.xs}px 0;
|
|
@@ -7870,9 +7877,15 @@ styled$2__default.default("div") `
|
|
|
7870
7877
|
const spaces = getSpaces(props);
|
|
7871
7878
|
const semanticColors = getSemanticColors(props);
|
|
7872
7879
|
return `
|
|
7880
|
+
& > div {
|
|
7881
|
+
display: flex;
|
|
7882
|
+
flex-direction: row;
|
|
7883
|
+
align-items: center;
|
|
7884
|
+
justify-content: space-between;
|
|
7885
|
+
}
|
|
7886
|
+
|
|
7873
7887
|
display: flex;
|
|
7874
|
-
|
|
7875
|
-
justify-content: space-between;
|
|
7888
|
+
flex-direction: column;
|
|
7876
7889
|
padding: ${spaces?.xs}px ${spaces?.m}px ${search ? spaces?.xs : spaces?.s}px;
|
|
7877
7890
|
${search && `border-bottom: solid 1px ${semanticColors?.base?.divider};`}
|
|
7878
7891
|
`;
|
|
@@ -7934,12 +7947,13 @@ const inputDropdownStyles = (props) => {
|
|
|
7934
7947
|
}
|
|
7935
7948
|
|
|
7936
7949
|
&:hover {
|
|
7937
|
-
background-color: ${semanticColors?.base?.
|
|
7938
|
-
box-shadow: inset 0 0 0 1px
|
|
7950
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
7951
|
+
box-shadow: inset 0 0 0 1px
|
|
7952
|
+
${semanticColors?.base?.borderPrimaryInteraction};
|
|
7939
7953
|
color: ${semanticColors?.base?.textPrimary};
|
|
7940
7954
|
|
|
7941
7955
|
path {
|
|
7942
|
-
fill: ${semanticColors?.base?.
|
|
7956
|
+
fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
7943
7957
|
}
|
|
7944
7958
|
|
|
7945
7959
|
.styled-label {
|
|
@@ -7953,7 +7967,7 @@ const inputDropdownStyles = (props) => {
|
|
|
7953
7967
|
color: ${semanticColors?.base?.textPrimary};
|
|
7954
7968
|
|
|
7955
7969
|
path {
|
|
7956
|
-
fill: ${semanticColors?.base?.
|
|
7970
|
+
fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
7957
7971
|
}
|
|
7958
7972
|
}
|
|
7959
7973
|
|
|
@@ -8005,12 +8019,12 @@ const minimal$1 = (props) => {
|
|
|
8005
8019
|
}
|
|
8006
8020
|
|
|
8007
8021
|
&:hover {
|
|
8008
|
-
background-color: ${semanticColors?.base?.
|
|
8022
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
8009
8023
|
border: none;
|
|
8010
8024
|
color: ${semanticColors?.base?.textPrimary};
|
|
8011
8025
|
|
|
8012
8026
|
path {
|
|
8013
|
-
fill: ${semanticColors?.base?.
|
|
8027
|
+
fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
8014
8028
|
}
|
|
8015
8029
|
|
|
8016
8030
|
.styled-label {
|
|
@@ -8019,7 +8033,7 @@ const minimal$1 = (props) => {
|
|
|
8019
8033
|
}
|
|
8020
8034
|
|
|
8021
8035
|
&:active {
|
|
8022
|
-
background-color: ${semanticColors?.base?.
|
|
8036
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
8023
8037
|
border: none;
|
|
8024
8038
|
}
|
|
8025
8039
|
`;
|
|
@@ -8089,7 +8103,7 @@ const isOpen = (props) => {
|
|
|
8089
8103
|
: ""}
|
|
8090
8104
|
|
|
8091
8105
|
path {
|
|
8092
|
-
fill: ${semanticColors?.base?.
|
|
8106
|
+
fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
8093
8107
|
}
|
|
8094
8108
|
|
|
8095
8109
|
box-shadow: ${sdsStyle === "minimal"
|
|
@@ -8097,15 +8111,15 @@ const isOpen = (props) => {
|
|
|
8097
8111
|
: `inset 0 0 0 1px ${semanticColors?.[inputColor]?.border}`};
|
|
8098
8112
|
|
|
8099
8113
|
background-color: ${sdsStyle === "minimal"
|
|
8100
|
-
? semanticColors?.base?.
|
|
8114
|
+
? semanticColors?.base?.fillInteraction
|
|
8101
8115
|
: "transparent"};
|
|
8102
8116
|
|
|
8103
8117
|
&:hover {
|
|
8104
8118
|
path {
|
|
8105
|
-
fill: ${semanticColors?.base?.
|
|
8119
|
+
fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
8106
8120
|
}
|
|
8107
8121
|
|
|
8108
|
-
border-color: ${semanticColors?.base?.
|
|
8122
|
+
border-color: ${semanticColors?.base?.borderPrimaryInteraction};
|
|
8109
8123
|
}
|
|
8110
8124
|
`;
|
|
8111
8125
|
};
|
|
@@ -8115,11 +8129,13 @@ const applyIntentColor$1 = (props, intent) => {
|
|
|
8115
8129
|
box-shadow: inset 0 0 0 1px ${semanticColors?.[intent]?.border};
|
|
8116
8130
|
|
|
8117
8131
|
&:hover {
|
|
8118
|
-
box-shadow: inset 0 0 0 1px
|
|
8132
|
+
box-shadow: inset 0 0 0 1px
|
|
8133
|
+
${semanticColors?.base?.borderPrimaryInteraction};
|
|
8119
8134
|
}
|
|
8120
8135
|
|
|
8121
8136
|
&:active {
|
|
8122
|
-
box-shadow: inset 0 0 0 1px
|
|
8137
|
+
box-shadow: inset 0 0 0 1px
|
|
8138
|
+
${semanticColors?.base?.borderPrimaryInteraction};
|
|
8123
8139
|
}
|
|
8124
8140
|
`;
|
|
8125
8141
|
};
|
|
@@ -8339,7 +8355,6 @@ const tagSizeS = (props) => {
|
|
|
8339
8355
|
const semanticColors = getSemanticColors(props);
|
|
8340
8356
|
return react.css `
|
|
8341
8357
|
height: unset;
|
|
8342
|
-
margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
|
|
8343
8358
|
|
|
8344
8359
|
.MuiChip-label {
|
|
8345
8360
|
${fontBodyXxxs$1(props)}
|
|
@@ -8349,7 +8364,7 @@ const tagSizeS = (props) => {
|
|
|
8349
8364
|
.MuiSvgIcon-root {
|
|
8350
8365
|
height: ${iconSizes?.xs.height}px;
|
|
8351
8366
|
width: ${iconSizes?.xs.width}px;
|
|
8352
|
-
margin: 0 ${spaces?.xxs}px 0
|
|
8367
|
+
margin: 0 ${spaces?.xxs}px 0 0;
|
|
8353
8368
|
}
|
|
8354
8369
|
|
|
8355
8370
|
.MuiChip-deleteIcon {
|
|
@@ -8367,7 +8382,6 @@ const tagSizeL = (props) => {
|
|
|
8367
8382
|
const semanticColors = getSemanticColors(props);
|
|
8368
8383
|
return react.css `
|
|
8369
8384
|
height: unset;
|
|
8370
|
-
margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
|
|
8371
8385
|
|
|
8372
8386
|
.MuiChip-label {
|
|
8373
8387
|
${fontBodyXs$2(props)}
|
|
@@ -8377,7 +8391,7 @@ const tagSizeL = (props) => {
|
|
|
8377
8391
|
.MuiSvgIcon-root {
|
|
8378
8392
|
height: ${iconSizes?.l.height}px;
|
|
8379
8393
|
width: ${iconSizes?.l.width}px;
|
|
8380
|
-
margin: 0 ${spaces?.xxs}px 0
|
|
8394
|
+
margin: 0 ${spaces?.xxs}px 0 0px;
|
|
8381
8395
|
}
|
|
8382
8396
|
|
|
8383
8397
|
.MuiChip-deleteIcon {
|
|
@@ -8394,9 +8408,11 @@ const rounded = (props) => {
|
|
|
8394
8408
|
const spaces = getSpaces(props);
|
|
8395
8409
|
const { sdsSize = "s", icon } = props;
|
|
8396
8410
|
const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
|
|
8411
|
+
const rightPadding = sdsSize === "l" && icon ? spaces?.s : spaces?.xs;
|
|
8397
8412
|
return react.css `
|
|
8398
8413
|
border-radius: ${corners?.rounded}px;
|
|
8399
|
-
padding: ${topBottomPadding}px ${
|
|
8414
|
+
padding: ${topBottomPadding}px ${rightPadding}px ${topBottomPadding}px
|
|
8415
|
+
${spaces?.xs}px;
|
|
8400
8416
|
|
|
8401
8417
|
&:after {
|
|
8402
8418
|
content: "";
|
|
@@ -8411,7 +8427,7 @@ const square = (props) => {
|
|
|
8411
8427
|
const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
|
|
8412
8428
|
return react.css `
|
|
8413
8429
|
border-radius: ${corners?.m}px;
|
|
8414
|
-
padding: ${topBottomPadding}px ${spaces?.
|
|
8430
|
+
padding: ${topBottomPadding}px ${spaces?.xs}px;
|
|
8415
8431
|
|
|
8416
8432
|
&:after {
|
|
8417
8433
|
content: "";
|
|
@@ -8439,54 +8455,51 @@ const secondary = (props) => {
|
|
|
8439
8455
|
return createTypeCss(props, "secondary");
|
|
8440
8456
|
};
|
|
8441
8457
|
function generatePrimaryTagColors(intent, colors, semanticColors) {
|
|
8442
|
-
|
|
8443
|
-
|
|
8444
|
-
|
|
8445
|
-
|
|
8446
|
-
|
|
8447
|
-
|
|
8448
|
-
|
|
8449
|
-
|
|
8450
|
-
|
|
8451
|
-
|
|
8452
|
-
|
|
8453
|
-
|
|
8454
|
-
|
|
8455
|
-
|
|
8456
|
-
|
|
8457
|
-
|
|
8458
|
-
|
|
8459
|
-
backgroundClicked: semanticColors?.neutral.fillPressed,
|
|
8460
|
-
backgroundHover: semanticColors?.neutral.fillHover,
|
|
8461
|
-
iconColor: semanticColors?.base?.ornamentOnFill,
|
|
8462
|
-
label: semanticColors?.base?.textOnFill
|
|
8463
|
-
};
|
|
8464
|
-
}
|
|
8458
|
+
const effectiveIntent = intent || "neutral";
|
|
8459
|
+
const intentColors = semanticColors?.[effectiveIntent];
|
|
8460
|
+
const hasCustomColors = colors.length >= 2;
|
|
8461
|
+
return {
|
|
8462
|
+
background: hasCustomColors ? colors[1] : intentColors?.fillPrimary,
|
|
8463
|
+
backgroundClicked: hasCustomColors
|
|
8464
|
+
? material.darken(colors[1], 0.3)
|
|
8465
|
+
: intentColors?.fillPressed,
|
|
8466
|
+
backgroundHover: hasCustomColors
|
|
8467
|
+
? material.darken(colors[1], 0.15)
|
|
8468
|
+
: intentColors?.fillHover,
|
|
8469
|
+
iconColor: hasCustomColors
|
|
8470
|
+
? colors[2]
|
|
8471
|
+
: semanticColors?.base?.ornamentOnFill,
|
|
8472
|
+
label: colors.length > 0 ? colors[0] : semanticColors?.base?.textOnFill,
|
|
8473
|
+
borderColor: material.alpha(semanticColors?.neutral.border || "#000", 0.6)
|
|
8474
|
+
};
|
|
8465
8475
|
}
|
|
8466
|
-
function
|
|
8467
|
-
if (
|
|
8468
|
-
|
|
8469
|
-
|
|
8470
|
-
|
|
8471
|
-
|
|
8472
|
-
|
|
8473
|
-
|
|
8474
|
-
|
|
8475
|
-
|
|
8476
|
-
|
|
8477
|
-
|
|
8478
|
-
|
|
8479
|
-
|
|
8480
|
-
|
|
8481
|
-
|
|
8482
|
-
|
|
8483
|
-
|
|
8484
|
-
|
|
8485
|
-
|
|
8486
|
-
|
|
8487
|
-
|
|
8488
|
-
|
|
8489
|
-
|
|
8476
|
+
function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
|
|
8477
|
+
if (!theme || !theme.palette)
|
|
8478
|
+
return material.alpha(intentColors?.border || "#000", 0.6);
|
|
8479
|
+
if (effectiveIntent === "negative" && theme.palette.mode === "dark")
|
|
8480
|
+
return material.alpha(intentColors?.border || "#000", 0.65);
|
|
8481
|
+
if (effectiveIntent === "notice" && theme.palette.mode === "light")
|
|
8482
|
+
return material.alpha(intentColors?.border || "#000", 0.85);
|
|
8483
|
+
return material.alpha(intentColors?.border || "#000", 0.6);
|
|
8484
|
+
}
|
|
8485
|
+
function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme$4) {
|
|
8486
|
+
const effectiveIntent = intent || "neutral";
|
|
8487
|
+
const intentColors = semanticColors?.[effectiveIntent];
|
|
8488
|
+
const hasCustomColors = colors.length >= 2;
|
|
8489
|
+
return {
|
|
8490
|
+
background: hasCustomColors ? colors[1] : intentColors?.fillSecondary,
|
|
8491
|
+
backgroundClicked: hasCustomColors
|
|
8492
|
+
? material.darken(colors[1], 0.3)
|
|
8493
|
+
: intentColors?.fillPressed,
|
|
8494
|
+
backgroundHover: hasCustomColors
|
|
8495
|
+
? material.darken(colors[1], 0.15)
|
|
8496
|
+
: intentColors?.fillHover,
|
|
8497
|
+
iconColor: hasCustomColors ? colors[2] : intentColors?.ornament,
|
|
8498
|
+
label: colors.length > 0 ? colors[0] : intentColors?.text,
|
|
8499
|
+
borderColor: hasCustomColors
|
|
8500
|
+
? material.alpha(colors[1], 0.6)
|
|
8501
|
+
: getSecondaryBorderColor(effectiveIntent, theme, intentColors)
|
|
8502
|
+
};
|
|
8490
8503
|
}
|
|
8491
8504
|
function createTypeCss(props, type) {
|
|
8492
8505
|
const semanticColors = getSemanticColors(props);
|
|
@@ -8494,12 +8507,16 @@ function createTypeCss(props, type) {
|
|
|
8494
8507
|
const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
|
|
8495
8508
|
const typeToColors = {
|
|
8496
8509
|
primary: generatePrimaryTagColors(intent, colors, semanticColors),
|
|
8497
|
-
secondary: generateSecondaryTagColors(intent, colors, semanticColors)
|
|
8510
|
+
secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
|
|
8498
8511
|
};
|
|
8499
8512
|
const typeColors = typeToColors[type];
|
|
8500
8513
|
return react.css `
|
|
8501
8514
|
${focusVisibleA11yStyle(props)}
|
|
8502
8515
|
|
|
8516
|
+
${type === "secondary" &&
|
|
8517
|
+
react.css `
|
|
8518
|
+
box-shadow: inset 0 0 0 1px ${typeColors.borderColor};
|
|
8519
|
+
`}
|
|
8503
8520
|
background-color: ${typeColors.background};
|
|
8504
8521
|
position: relative;
|
|
8505
8522
|
|
|
@@ -8513,6 +8530,7 @@ function createTypeCss(props, type) {
|
|
|
8513
8530
|
|
|
8514
8531
|
&:hover,
|
|
8515
8532
|
&:active {
|
|
8533
|
+
box-shadow: none;
|
|
8516
8534
|
.MuiChip-label {
|
|
8517
8535
|
color: ${semanticColors?.base?.textPrimaryInverse};
|
|
8518
8536
|
}
|
|
@@ -8667,30 +8685,38 @@ const doNotForwardProps$r = [
|
|
|
8667
8685
|
"cardSdsType",
|
|
8668
8686
|
"classes",
|
|
8669
8687
|
];
|
|
8670
|
-
const
|
|
8671
|
-
|
|
8672
|
-
}) `
|
|
8673
|
-
${(props) => {
|
|
8674
|
-
const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
|
|
8675
|
-
const semanticColors = getSemanticColors(props);
|
|
8676
|
-
const corners = getCorners(props);
|
|
8677
|
-
const shadows = getShadows(props);
|
|
8678
|
-
const flexDirection = sdsType === "wide" && visualElementType === "image"
|
|
8688
|
+
const getFlexDirection = (sdsType, visualElementType, imagePosition) => {
|
|
8689
|
+
return sdsType === "wide" && visualElementType === "image"
|
|
8679
8690
|
? imagePosition === "left"
|
|
8680
8691
|
? "row"
|
|
8681
8692
|
: "row-reverse"
|
|
8682
8693
|
: visualElementType === "icon"
|
|
8683
8694
|
? "row"
|
|
8684
8695
|
: "column";
|
|
8685
|
-
|
|
8696
|
+
};
|
|
8697
|
+
const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorder, imagePadding) => {
|
|
8698
|
+
return visualElementType === "image"
|
|
8686
8699
|
? boundingBox && decorativeBorder && imagePadding
|
|
8687
8700
|
: boundingBox && decorativeBorder;
|
|
8701
|
+
};
|
|
8702
|
+
const StyledCard = styled$2__default.default(material.Card, {
|
|
8703
|
+
shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
|
|
8704
|
+
}) `
|
|
8705
|
+
${(props) => {
|
|
8706
|
+
const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
|
|
8707
|
+
const semanticColors = getSemanticColors(props);
|
|
8708
|
+
const corners = getCorners(props);
|
|
8709
|
+
const shadows = getShadows(props);
|
|
8710
|
+
const spaces = getSpaces(props);
|
|
8711
|
+
const flexDirection = getFlexDirection(sdsType, visualElementType, imagePosition);
|
|
8712
|
+
const showDecorativeBorder = getShowDecorativeBorder(visualElementType, boundingBox, decorativeBorder, imagePadding);
|
|
8688
8713
|
return react.css `
|
|
8714
|
+
position: relative;
|
|
8689
8715
|
display: flex;
|
|
8690
8716
|
background-color: transparent;
|
|
8691
8717
|
background-image: none;
|
|
8692
8718
|
flex-direction: ${flexDirection};
|
|
8693
|
-
overflow:
|
|
8719
|
+
overflow: visible;
|
|
8694
8720
|
box-shadow: none;
|
|
8695
8721
|
border-radius: ${corners?.xl}px;
|
|
8696
8722
|
|
|
@@ -8709,16 +8735,47 @@ const StyledCard = styled$2__default.default(material.Card, {
|
|
|
8709
8735
|
background-color: ${semanticColors?.base?.backgroundPrimary};
|
|
8710
8736
|
`}
|
|
8711
8737
|
|
|
8738
|
+
${showDecorativeBorder &&
|
|
8739
|
+
react.css `
|
|
8740
|
+
&:before {
|
|
8741
|
+
content: "";
|
|
8742
|
+
position: absolute;
|
|
8743
|
+
background-color: ${semanticColors?.accent?.border};
|
|
8744
|
+
|
|
8745
|
+
${sdsType === "wide" &&
|
|
8746
|
+
react.css `
|
|
8747
|
+
top: -1px;
|
|
8748
|
+
bottom: -1px;
|
|
8749
|
+
left: -1px;
|
|
8750
|
+
width: ${spaces?.xs}px;
|
|
8751
|
+
border-top-left-radius: ${corners?.xl}px;
|
|
8752
|
+
border-bottom-left-radius: ${corners?.xl}px;
|
|
8753
|
+
`}
|
|
8754
|
+
|
|
8755
|
+
${sdsType === "narrow" &&
|
|
8756
|
+
react.css `
|
|
8757
|
+
height: ${spaces?.xs}px;
|
|
8758
|
+
top: -1px;
|
|
8759
|
+
left: -1px;
|
|
8760
|
+
right: -1px;
|
|
8761
|
+
border-top-left-radius: ${corners?.xl}px;
|
|
8762
|
+
border-top-right-radius: ${corners?.xl}px;
|
|
8763
|
+
`}
|
|
8764
|
+
}
|
|
8765
|
+
`}
|
|
8766
|
+
|
|
8712
8767
|
${sdsType === "wide" &&
|
|
8713
8768
|
showDecorativeBorder &&
|
|
8714
8769
|
react.css `
|
|
8715
|
-
border-left:
|
|
8770
|
+
border-top-left-radius: ${corners?.l}px;
|
|
8771
|
+
border-bottom-left-radius: ${corners?.l}px;
|
|
8716
8772
|
`}
|
|
8717
8773
|
|
|
8718
8774
|
${sdsType === "narrow" &&
|
|
8719
8775
|
showDecorativeBorder &&
|
|
8720
8776
|
react.css `
|
|
8721
|
-
border-top:
|
|
8777
|
+
border-top-left-radius: ${corners?.l}px;
|
|
8778
|
+
border-top-right-radius: ${corners?.l}px;
|
|
8722
8779
|
`}
|
|
8723
8780
|
`;
|
|
8724
8781
|
}}
|
|
@@ -8751,7 +8808,7 @@ const StyledCardActionArea = styled$2__default.default(Button, {
|
|
|
8751
8808
|
|
|
8752
8809
|
&:hover,
|
|
8753
8810
|
&:active {
|
|
8754
|
-
background-color: ${semanticColors?.base?.
|
|
8811
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
8755
8812
|
}
|
|
8756
8813
|
`;
|
|
8757
8814
|
}}
|
|
@@ -8991,9 +9048,13 @@ const StyledImageMediaWrapper = material.styled("div", {
|
|
|
8991
9048
|
${(props) => {
|
|
8992
9049
|
const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
|
|
8993
9050
|
const spaces = getSpaces(props);
|
|
9051
|
+
const corners = getCorners(props);
|
|
8994
9052
|
return material.css `
|
|
8995
9053
|
display: flex;
|
|
8996
9054
|
align-items: start;
|
|
9055
|
+
border-top-left-radius: calc(${corners?.xl}px - 1px);
|
|
9056
|
+
border-bottom-left-radius: calc(${corners?.xl}px - 1px);
|
|
9057
|
+
overflow: hidden;
|
|
8997
9058
|
|
|
8998
9059
|
${boundingBox
|
|
8999
9060
|
? imagePadding
|
|
@@ -9028,6 +9089,8 @@ const StyledImageMediaWrapper = material.styled("div", {
|
|
|
9028
9089
|
`}
|
|
9029
9090
|
|
|
9030
9091
|
justify-content: center;
|
|
9092
|
+
border-top-left-radius: calc(${corners?.xl}px - 1px);
|
|
9093
|
+
border-top-right-radius: calc(${corners?.xl}px - 1px);
|
|
9031
9094
|
`}
|
|
9032
9095
|
`;
|
|
9033
9096
|
}}
|
|
@@ -9168,7 +9231,7 @@ const StyledPaper = styled$2__default.default(material.Paper, {
|
|
|
9168
9231
|
const semanticColors = getSemanticColors(props);
|
|
9169
9232
|
const isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
9170
9233
|
return `
|
|
9171
|
-
background-color: ${semanticColors?.base?.
|
|
9234
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
9172
9235
|
background-image: none;
|
|
9173
9236
|
box-shadow: ${shadows?.l};
|
|
9174
9237
|
max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
|
|
@@ -9810,12 +9873,11 @@ const disabledStyles$1 = (props) => {
|
|
|
9810
9873
|
styled$2__default.default(material.FormControlLabel) `
|
|
9811
9874
|
${(props) => {
|
|
9812
9875
|
const { disabled } = props;
|
|
9813
|
-
const spaces = getSpaces(props);
|
|
9814
9876
|
const semanticColors = getSemanticColors(props);
|
|
9815
9877
|
const borders = getBorders(props);
|
|
9816
9878
|
return `
|
|
9817
9879
|
align-items: start;
|
|
9818
|
-
margin-bottom:
|
|
9880
|
+
margin-bottom: 0;
|
|
9819
9881
|
margin-left: 0;
|
|
9820
9882
|
margin-right: 0;
|
|
9821
9883
|
width: fit-content;
|
|
@@ -9823,7 +9885,7 @@ styled$2__default.default(material.FormControlLabel) `
|
|
|
9823
9885
|
&:hover {
|
|
9824
9886
|
${StyledCheckboxDefaultIcon} {
|
|
9825
9887
|
border: ${borders?.base?.hover};
|
|
9826
|
-
background-color: ${disabled ? "transparent" : semanticColors?.base?.
|
|
9888
|
+
background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
|
|
9827
9889
|
}
|
|
9828
9890
|
|
|
9829
9891
|
${StyledCheckboxCheckedIcon} {
|
|
@@ -9960,19 +10022,18 @@ const disabledStyles = (props) => {
|
|
|
9960
10022
|
styled$2__default.default(material.FormControlLabel) `
|
|
9961
10023
|
${(props) => {
|
|
9962
10024
|
const { disabled } = props;
|
|
9963
|
-
const spaces = getSpaces(props);
|
|
9964
10025
|
const semanticColors = getSemanticColors(props);
|
|
9965
10026
|
return `
|
|
9966
10027
|
align-items: start;
|
|
9967
|
-
margin-bottom:
|
|
10028
|
+
margin-bottom: 0;
|
|
9968
10029
|
margin-left: 0;
|
|
9969
10030
|
margin-right: 0;
|
|
9970
10031
|
width: fit-content;
|
|
9971
10032
|
|
|
9972
10033
|
&:hover {
|
|
9973
10034
|
${StyledRadioDefaultIcon} {
|
|
9974
|
-
border: 1px solid ${semanticColors?.base?.
|
|
9975
|
-
background-color: ${disabled ? "transparent" : semanticColors?.base?.
|
|
10035
|
+
border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
10036
|
+
background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
|
|
9976
10037
|
}
|
|
9977
10038
|
|
|
9978
10039
|
${StyledRadioCheckedIcon} {
|
|
@@ -9982,7 +10043,7 @@ styled$2__default.default(material.FormControlLabel) `
|
|
|
9982
10043
|
|
|
9983
10044
|
&:active {
|
|
9984
10045
|
${StyledRadioDefaultIcon} {
|
|
9985
|
-
border: 1px solid ${semanticColors?.base?.
|
|
10046
|
+
border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
|
|
9986
10047
|
}
|
|
9987
10048
|
|
|
9988
10049
|
${StyledRadioCheckedIcon} {
|
|
@@ -10240,12 +10301,12 @@ const textArea = (props) => {
|
|
|
10240
10301
|
};
|
|
10241
10302
|
const StyledLabel$2 = styled$2__default.default("label") `
|
|
10242
10303
|
display: block;
|
|
10243
|
-
${
|
|
10304
|
+
${fontBodySemiboldXxxs}
|
|
10244
10305
|
|
|
10245
10306
|
${(props) => {
|
|
10246
10307
|
const spaces = getSpaces(props);
|
|
10247
10308
|
return `
|
|
10248
|
-
margin-bottom: ${spaces?.
|
|
10309
|
+
margin-bottom: ${spaces?.s}px;
|
|
10249
10310
|
`;
|
|
10250
10311
|
}}
|
|
10251
10312
|
`;
|
|
@@ -10261,8 +10322,6 @@ const StyledInputBase = styled$2__default.default(material.TextField, {
|
|
|
10261
10322
|
const corners = getCorners(props);
|
|
10262
10323
|
const semanticColors = getSemanticColors(props);
|
|
10263
10324
|
return react.css `
|
|
10264
|
-
margin-bottom: ${spaces?.l}px;
|
|
10265
|
-
margin-right: ${spaces?.m}px;
|
|
10266
10325
|
display: block;
|
|
10267
10326
|
|
|
10268
10327
|
.${material.outlinedInputClasses.root} {
|
|
@@ -10299,7 +10358,7 @@ const StyledInputBase = styled$2__default.default(material.TextField, {
|
|
|
10299
10358
|
.${material.outlinedInputClasses.root}:hover
|
|
10300
10359
|
.${material.outlinedInputClasses.notchedOutline} {
|
|
10301
10360
|
border: ${borders?.base?.hover};
|
|
10302
|
-
background-color: ${semanticColors?.base?.
|
|
10361
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
10303
10362
|
}
|
|
10304
10363
|
|
|
10305
10364
|
.${material.outlinedInputClasses.root}.${material.outlinedInputClasses.focused}
|
|
@@ -10478,7 +10537,7 @@ const toggleOff = (props) => {
|
|
|
10478
10537
|
}
|
|
10479
10538
|
|
|
10480
10539
|
&:hover {
|
|
10481
|
-
background-color: ${semanticColors?.base?.
|
|
10540
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
10482
10541
|
}
|
|
10483
10542
|
}
|
|
10484
10543
|
|
|
@@ -10500,7 +10559,7 @@ const toggleOff = (props) => {
|
|
|
10500
10559
|
outline: ${borders?.base?.hover};
|
|
10501
10560
|
|
|
10502
10561
|
.${material.switchClasses.thumb} {
|
|
10503
|
-
color: ${semanticColors?.base?.
|
|
10562
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
10504
10563
|
}
|
|
10505
10564
|
}`}
|
|
10506
10565
|
`;
|
|
@@ -10516,6 +10575,57 @@ styled$2__default.default(material.Switch) `
|
|
|
10516
10575
|
}}
|
|
10517
10576
|
`;
|
|
10518
10577
|
|
|
10578
|
+
styled$2__default.default.div `
|
|
10579
|
+
display: flex;
|
|
10580
|
+
flex-direction: column;
|
|
10581
|
+
${(props) => {
|
|
10582
|
+
const spaces = getSpaces(props);
|
|
10583
|
+
const semanticColors = getSemanticColors(props);
|
|
10584
|
+
const borderThickness = 2;
|
|
10585
|
+
const borderColor = props.borderIntent
|
|
10586
|
+
? semanticColors?.[props.borderIntent]?.border
|
|
10587
|
+
: "transparent";
|
|
10588
|
+
return `
|
|
10589
|
+
gap: ${spaces?.s}px;
|
|
10590
|
+
position: relative;
|
|
10591
|
+
|
|
10592
|
+
&::before {
|
|
10593
|
+
content: "";
|
|
10594
|
+
position: absolute;
|
|
10595
|
+
left: -${(spaces?.xs || 0) + borderThickness}px;
|
|
10596
|
+
top: 0;
|
|
10597
|
+
bottom: 0;
|
|
10598
|
+
width: ${borderThickness}px;
|
|
10599
|
+
background-color: ${borderColor};
|
|
10600
|
+
display: ${props.hasBorder ? "block" : "none"};
|
|
10601
|
+
}
|
|
10602
|
+
`;
|
|
10603
|
+
}}
|
|
10604
|
+
`;
|
|
10605
|
+
styled$2__default.default.div `
|
|
10606
|
+
${fontBodySemiboldXxxs}
|
|
10607
|
+
display: flex;
|
|
10608
|
+
align-items: start;
|
|
10609
|
+
|
|
10610
|
+
${(props) => {
|
|
10611
|
+
const spaces = getSpaces(props);
|
|
10612
|
+
const semanticColors = getSemanticColors(props);
|
|
10613
|
+
const intentColors = semanticColors?.[props.intent];
|
|
10614
|
+
return `
|
|
10615
|
+
gap: ${spaces?.xs}px;
|
|
10616
|
+
color: ${intentColors?.text};
|
|
10617
|
+
|
|
10618
|
+
svg {
|
|
10619
|
+
margin-top: ${spaces?.xxxs}px;
|
|
10620
|
+
fill: ${intentColors?.ornament};
|
|
10621
|
+
path {
|
|
10622
|
+
fill: ${intentColors?.ornament};
|
|
10623
|
+
}
|
|
10624
|
+
}
|
|
10625
|
+
`;
|
|
10626
|
+
}}
|
|
10627
|
+
`;
|
|
10628
|
+
|
|
10519
10629
|
const LegendContainer = styled$2__default.default("div") `
|
|
10520
10630
|
display: flex;
|
|
10521
10631
|
flex-wrap: wrap;
|
|
@@ -10938,7 +11048,7 @@ const StyledMenu = styled$2__default.default(material.Menu) `
|
|
|
10938
11048
|
const corners = getCorners(props);
|
|
10939
11049
|
const semanticColors = getSemanticColors(props);
|
|
10940
11050
|
return `
|
|
10941
|
-
background-color: ${semanticColors?.base?.
|
|
11051
|
+
background-color: ${semanticColors?.base?.surfacePrimary};
|
|
10942
11052
|
background-image: none;
|
|
10943
11053
|
padding: ${spaces?.xs}px;
|
|
10944
11054
|
border-radius: ${corners?.l}px;
|
|
@@ -17219,7 +17329,7 @@ const NarrowNavItemLinkStyles = (props) => {
|
|
|
17219
17329
|
? semanticColors?.base.textPrimaryOnDark
|
|
17220
17330
|
: semanticColors?.base.textPrimary};
|
|
17221
17331
|
background: ${props.hasInvertedStyle
|
|
17222
|
-
? semanticColors?.base.
|
|
17332
|
+
? semanticColors?.base.backgroundSecondaryDark
|
|
17223
17333
|
: semanticColors?.base.backgroundSecondary};
|
|
17224
17334
|
}
|
|
17225
17335
|
`;
|
|
@@ -17245,11 +17355,11 @@ const StyledNavItemLink = styled$2__default.default(Link, {
|
|
|
17245
17355
|
|
|
17246
17356
|
&:hover {
|
|
17247
17357
|
color: ${props.hasInvertedStyle
|
|
17248
|
-
? semanticColors?.base
|
|
17249
|
-
: semanticColors?.base
|
|
17358
|
+
? semanticColors?.base?.textPrimaryOnDark
|
|
17359
|
+
: semanticColors?.base?.textPrimary};
|
|
17250
17360
|
background-color: ${props.hasInvertedStyle
|
|
17251
|
-
? semanticColors?.base
|
|
17252
|
-
: semanticColors?.base
|
|
17361
|
+
? semanticColors?.base?.fillInteractionOnDark
|
|
17362
|
+
: semanticColors?.base?.fillInteraction};
|
|
17253
17363
|
text-decoration: none;
|
|
17254
17364
|
}
|
|
17255
17365
|
|
|
@@ -17716,7 +17826,7 @@ const StyledSearch = styled$2__default.default(InputSearch, {
|
|
|
17716
17826
|
&:hover {
|
|
17717
17827
|
fieldset {
|
|
17718
17828
|
border-color: ${hasInvertedStyle
|
|
17719
|
-
? semanticColors?.base?.
|
|
17829
|
+
? semanticColors?.base?.borderPrimaryInteractionOnDark
|
|
17720
17830
|
: ""} !important;
|
|
17721
17831
|
}
|
|
17722
17832
|
|
|
@@ -17734,7 +17844,7 @@ const StyledSearch = styled$2__default.default(InputSearch, {
|
|
|
17734
17844
|
&.Mui-focused {
|
|
17735
17845
|
fieldset {
|
|
17736
17846
|
border-color: ${hasInvertedStyle
|
|
17737
|
-
? semanticColors?.base?.
|
|
17847
|
+
? semanticColors?.base?.borderPrimaryInteractionOnDark
|
|
17738
17848
|
: ""} !important;
|
|
17739
17849
|
}
|
|
17740
17850
|
|
|
@@ -17929,8 +18039,8 @@ const StyledAccordion = styled$2__default.default(Accordion, {
|
|
|
17929
18039
|
? semanticColors?.base.ornamentSecondaryOnDark
|
|
17930
18040
|
: semanticColors?.base.ornamentSecondary;
|
|
17931
18041
|
const ChevronOpenColor = hasInvertedStyle
|
|
17932
|
-
? semanticColors?.base?.
|
|
17933
|
-
: semanticColors?.base.
|
|
18042
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18043
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
17934
18044
|
return material.css `
|
|
17935
18045
|
& > .MuiButtonBase-root {
|
|
17936
18046
|
padding: ${spaces?.s}px ${spaces?.l}px !important;
|
|
@@ -17995,16 +18105,16 @@ const StyledAccordion = styled$2__default.default(Accordion, {
|
|
|
17995
18105
|
width: 100%;
|
|
17996
18106
|
box-shadow: none;
|
|
17997
18107
|
background: ${hasInvertedStyle
|
|
17998
|
-
? semanticColors?.base.
|
|
17999
|
-
: semanticColors?.base.
|
|
18108
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18109
|
+
: semanticColors?.base.fillInteraction};
|
|
18000
18110
|
color: ${hasInvertedStyle
|
|
18001
18111
|
? semanticColors?.base.textPrimaryOnDark
|
|
18002
18112
|
: semanticColors?.base.textPrimary};
|
|
18003
18113
|
|
|
18004
18114
|
svg {
|
|
18005
18115
|
color: ${hasInvertedStyle
|
|
18006
|
-
? semanticColors?.base?.
|
|
18007
|
-
: semanticColors?.base.
|
|
18116
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18117
|
+
: semanticColors?.base.ornamentSecondaryInteraction} !important;
|
|
18008
18118
|
}
|
|
18009
18119
|
}
|
|
18010
18120
|
|
|
@@ -18207,8 +18317,8 @@ const StyledHoverDrawerItem = styled$2__default.default(Button, {
|
|
|
18207
18317
|
box-shadow: none;
|
|
18208
18318
|
cursor: pointer;
|
|
18209
18319
|
background: ${hasInvertedStyle
|
|
18210
|
-
? semanticColors?.base.
|
|
18211
|
-
: semanticColors?.base.
|
|
18320
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18321
|
+
: semanticColors?.base.fillInteraction};
|
|
18212
18322
|
svg {
|
|
18213
18323
|
color: ${semanticColors?.accent?.ornament};
|
|
18214
18324
|
}
|
|
@@ -18382,8 +18492,8 @@ const NarrowPrimaryNavItem = (props) => {
|
|
|
18382
18492
|
const semanticColors = getSemanticColors(props);
|
|
18383
18493
|
const corners = getCorners(props);
|
|
18384
18494
|
const ChevronHoverColor = hasInvertedStyle
|
|
18385
|
-
? semanticColors?.base?.
|
|
18386
|
-
: semanticColors?.base.
|
|
18495
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18496
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
18387
18497
|
return react.css `
|
|
18388
18498
|
border-radius: ${corners?.l}px;
|
|
18389
18499
|
justify-content: start;
|
|
@@ -18408,8 +18518,8 @@ const NarrowPrimaryNavItem = (props) => {
|
|
|
18408
18518
|
`
|
|
18409
18519
|
: react.css `
|
|
18410
18520
|
background: ${hasInvertedStyle
|
|
18411
|
-
? semanticColors?.base.
|
|
18412
|
-
: semanticColors?.base.
|
|
18521
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18522
|
+
: semanticColors?.base.fillInteraction};
|
|
18413
18523
|
`}
|
|
18414
18524
|
box-shadow: none;
|
|
18415
18525
|
|
|
@@ -18441,11 +18551,11 @@ styled$2__default.default(Button, {
|
|
|
18441
18551
|
? semanticColors?.base.ornamentSecondaryOnDark
|
|
18442
18552
|
: semanticColors?.base.ornamentSecondary;
|
|
18443
18553
|
const ChevronHoverColor = hasInvertedStyle
|
|
18444
|
-
? semanticColors?.base?.
|
|
18445
|
-
: semanticColors?.base.
|
|
18554
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18555
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
18446
18556
|
const ChevronOpenColor = hasInvertedStyle
|
|
18447
|
-
? semanticColors?.base.
|
|
18448
|
-
: semanticColors?.base.
|
|
18557
|
+
? semanticColors?.base.ornamentSecondaryInteractionOnDark
|
|
18558
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
18449
18559
|
return react.css `
|
|
18450
18560
|
border: none;
|
|
18451
18561
|
padding: ${spaces?.xxxs}px ${spaces?.m}px;
|
|
@@ -18462,8 +18572,8 @@ styled$2__default.default(Button, {
|
|
|
18462
18572
|
|
|
18463
18573
|
&:hover {
|
|
18464
18574
|
background: ${hasInvertedStyle
|
|
18465
|
-
? semanticColors?.base.
|
|
18466
|
-
: semanticColors?.base.
|
|
18575
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18576
|
+
: semanticColors?.base.fillInteraction} !important;
|
|
18467
18577
|
box-shadow: none;
|
|
18468
18578
|
|
|
18469
18579
|
${StyledLabel$1} {
|
|
@@ -18543,8 +18653,8 @@ const NarrowNavItemStyles = (props) => {
|
|
|
18543
18653
|
const semanticColors = getSemanticColors(props);
|
|
18544
18654
|
const corners = getCorners(props);
|
|
18545
18655
|
const ChevronHoverColor = hasInvertedStyle
|
|
18546
|
-
? semanticColors?.base?.
|
|
18547
|
-
: semanticColors?.base
|
|
18656
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18657
|
+
: semanticColors?.base?.ornamentSecondaryInteraction;
|
|
18548
18658
|
return react.css `
|
|
18549
18659
|
${active ? fontBodySemiboldL(props) : fontBodyMediumL(props)}
|
|
18550
18660
|
border-radius: ${corners?.l}px;
|
|
@@ -18571,8 +18681,8 @@ const NarrowNavItemStyles = (props) => {
|
|
|
18571
18681
|
`
|
|
18572
18682
|
: react.css `
|
|
18573
18683
|
background: ${hasInvertedStyle
|
|
18574
|
-
? semanticColors?.base.
|
|
18575
|
-
: semanticColors?.base.
|
|
18684
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18685
|
+
: semanticColors?.base.fillInteraction};
|
|
18576
18686
|
`}
|
|
18577
18687
|
box-shadow: none;
|
|
18578
18688
|
|
|
@@ -18612,11 +18722,11 @@ const UnifiedNavItem = styled$2__default.default(Button, {
|
|
|
18612
18722
|
? semanticColors?.base.ornamentSecondaryOnDark
|
|
18613
18723
|
: semanticColors?.base.ornamentSecondary;
|
|
18614
18724
|
const ChevronHoverColor = hasInvertedStyle
|
|
18615
|
-
? semanticColors?.base?.
|
|
18616
|
-
: semanticColors?.base.
|
|
18725
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
18726
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
18617
18727
|
const ChevronOpenColor = hasInvertedStyle
|
|
18618
|
-
? semanticColors?.base.
|
|
18619
|
-
: semanticColors?.base.
|
|
18728
|
+
? semanticColors?.base.ornamentSecondaryInteractionOnDark
|
|
18729
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
18620
18730
|
return [
|
|
18621
18731
|
navVariant === "secondary" &&
|
|
18622
18732
|
(active ? fontBodySemiboldS(props) : fontBodyMediumS(props)),
|
|
@@ -18644,8 +18754,8 @@ const UnifiedNavItem = styled$2__default.default(Button, {
|
|
|
18644
18754
|
|
|
18645
18755
|
&:hover {
|
|
18646
18756
|
background: ${hasInvertedStyle
|
|
18647
|
-
? semanticColors?.base.
|
|
18648
|
-
: semanticColors?.base.
|
|
18757
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
18758
|
+
: semanticColors?.base.fillInteraction} !important;
|
|
18649
18759
|
box-shadow: none;
|
|
18650
18760
|
|
|
18651
18761
|
${navVariant === "primary" && StyledLabel} {
|
|
@@ -18740,7 +18850,7 @@ const StyledSectionHeader = styled$2__default.default(ListSubheader, {
|
|
|
18740
18850
|
? semanticColors?.base.backgroundPrimaryDark
|
|
18741
18851
|
: semanticColors?.base.backgroundPrimary;
|
|
18742
18852
|
}
|
|
18743
|
-
return semanticColors?.base?.
|
|
18853
|
+
return semanticColors?.base?.surfacePrimary;
|
|
18744
18854
|
}
|
|
18745
18855
|
function getTextColor() {
|
|
18746
18856
|
if (isNarrow) {
|
|
@@ -18801,7 +18911,7 @@ const StyledAccordionSection = styled$2__default.default("div", {
|
|
|
18801
18911
|
border-radius: ${corners?.xl}px;
|
|
18802
18912
|
padding: ${spaces?.l}px;
|
|
18803
18913
|
background-color: ${hasInvertedStyle
|
|
18804
|
-
? semanticColors?.base?.
|
|
18914
|
+
? semanticColors?.base?.backgroundSecondaryDark
|
|
18805
18915
|
: semanticColors?.base?.backgroundSecondary};
|
|
18806
18916
|
`;
|
|
18807
18917
|
}
|
|
@@ -19216,7 +19326,7 @@ function useNavigationState() {
|
|
|
19216
19326
|
};
|
|
19217
19327
|
}
|
|
19218
19328
|
|
|
19219
|
-
function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
|
|
19329
|
+
function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
|
|
19220
19330
|
const theme = material.useTheme();
|
|
19221
19331
|
const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
|
|
19222
19332
|
const [clickedDrawerKey, setClickedDrawerKey] = React.useState(null);
|
|
@@ -19265,6 +19375,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
|
|
|
19265
19375
|
}
|
|
19266
19376
|
};
|
|
19267
19377
|
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
|
|
19378
|
+
onDrawerStyleNavItemHover?.(item);
|
|
19268
19379
|
if (clickedDrawerKey !== key) {
|
|
19269
19380
|
onDrawerOpen(key);
|
|
19270
19381
|
}
|
|
@@ -19436,8 +19547,8 @@ const NarrowStyledTextItem = (props) => {
|
|
|
19436
19547
|
&:hover {
|
|
19437
19548
|
box-shadow: none;
|
|
19438
19549
|
background: ${hasInvertedStyle
|
|
19439
|
-
? semanticColors?.base.
|
|
19440
|
-
: semanticColors?.base.
|
|
19550
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
19551
|
+
: semanticColors?.base.fillInteraction};
|
|
19441
19552
|
}
|
|
19442
19553
|
`;
|
|
19443
19554
|
};
|
|
@@ -19469,11 +19580,11 @@ styled$2__default.default(Button, {
|
|
|
19469
19580
|
? semanticColors?.base.ornamentSecondaryOnDark
|
|
19470
19581
|
: semanticColors?.base.ornamentSecondary;
|
|
19471
19582
|
const ChevronHoverColor = hasInvertedStyle
|
|
19472
|
-
? semanticColors?.base?.
|
|
19473
|
-
: semanticColors?.base.
|
|
19583
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
19584
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
19474
19585
|
const ChevronOpenColor = hasInvertedStyle
|
|
19475
|
-
? semanticColors?.base?.
|
|
19476
|
-
: semanticColors?.base.
|
|
19586
|
+
? semanticColors?.base?.ornamentSecondaryInteractionOnDark
|
|
19587
|
+
: semanticColors?.base.ornamentSecondaryInteraction;
|
|
19477
19588
|
return [
|
|
19478
19589
|
open ? fontBodySemiboldS(props) : fontBodyMediumS(props),
|
|
19479
19590
|
react.css `
|
|
@@ -19494,8 +19605,8 @@ styled$2__default.default(Button, {
|
|
|
19494
19605
|
|
|
19495
19606
|
&:hover {
|
|
19496
19607
|
background: ${hasInvertedStyle
|
|
19497
|
-
? semanticColors?.base.
|
|
19498
|
-
: semanticColors?.base.
|
|
19608
|
+
? semanticColors?.base.fillInteractionOnDark
|
|
19609
|
+
: semanticColors?.base.fillInteraction};
|
|
19499
19610
|
box-shadow: none;
|
|
19500
19611
|
|
|
19501
19612
|
color: ${hasInvertedStyle
|
|
@@ -19516,7 +19627,7 @@ const StyledTag = styled$2__default.default(Tag) `
|
|
|
19516
19627
|
margin: 0;
|
|
19517
19628
|
`;
|
|
19518
19629
|
|
|
19519
|
-
function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
|
|
19630
|
+
function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
|
|
19520
19631
|
const theme = material.useTheme();
|
|
19521
19632
|
const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
|
|
19522
19633
|
function onClose() {
|
|
@@ -19540,7 +19651,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
|
|
|
19540
19651
|
const handleClick = (e) => {
|
|
19541
19652
|
parentOnClick?.(e);
|
|
19542
19653
|
};
|
|
19543
|
-
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () =>
|
|
19654
|
+
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
|
|
19655
|
+
onDrawerStyleNavItemHover?.(item);
|
|
19656
|
+
onDrawerOpen(key);
|
|
19657
|
+
}, onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
|
|
19544
19658
|
};
|
|
19545
19659
|
const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
|
|
19546
19660
|
const isDropdownOpen = open && activeDropdownKey === key;
|
|
@@ -19712,7 +19826,7 @@ React.forwardRef((props, ref) => {
|
|
|
19712
19826
|
const { activePrimaryNavKey: controlledActivePrimaryNavKey, buttons, sdsStyle = "dropdown", menuProps = {
|
|
19713
19827
|
disableScrollLock: true,
|
|
19714
19828
|
disablePortal: true
|
|
19715
|
-
}, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, ...rest } = props;
|
|
19829
|
+
}, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, onDrawerStyleNavItemHover, ...rest } = props;
|
|
19716
19830
|
const navRef = React.useRef(null);
|
|
19717
19831
|
const topSlotRef = React.useRef(null);
|
|
19718
19832
|
const [topOffset, setTopOffset] = React.useState(0);
|
|
@@ -19865,11 +19979,11 @@ React.forwardRef((props, ref) => {
|
|
|
19865
19979
|
};
|
|
19866
19980
|
const renderPrimaryNav = () => {
|
|
19867
19981
|
return (primaryNavItems &&
|
|
19868
|
-
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
|
|
19982
|
+
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
|
|
19869
19983
|
};
|
|
19870
19984
|
const renderSecondaryNav = () => {
|
|
19871
19985
|
return (secondaryNavItems &&
|
|
19872
|
-
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
|
|
19986
|
+
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
|
|
19873
19987
|
};
|
|
19874
19988
|
const renderButtonsNode = () => {
|
|
19875
19989
|
if (!buttons || buttons.length === 0)
|
|
@@ -20044,7 +20158,7 @@ const StyledTabs$1 = styled$2__default.default(material.Tabs, {
|
|
|
20044
20158
|
const StyledTab$1 = styled$2__default.default(material.Tab, {
|
|
20045
20159
|
shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
|
|
20046
20160
|
}) `
|
|
20047
|
-
${
|
|
20161
|
+
${fontBodyMediumXs}
|
|
20048
20162
|
|
|
20049
20163
|
${(props) => {
|
|
20050
20164
|
const spaces = getSpaces(props);
|
|
@@ -20071,20 +20185,20 @@ const StyledTab$1 = styled$2__default.default(material.Tab, {
|
|
|
20071
20185
|
left: 0;
|
|
20072
20186
|
width: ${spaces?.xxxs}px;
|
|
20073
20187
|
height: 100%;
|
|
20074
|
-
background-color: ${semanticColors?.base?.
|
|
20188
|
+
background-color: ${semanticColors?.base?.borderPrimaryInteraction};
|
|
20075
20189
|
display: none;
|
|
20076
20190
|
border-radius: ${spaces?.xxxs}px;
|
|
20077
20191
|
}
|
|
20078
20192
|
&:hover {
|
|
20079
20193
|
color: ${semanticColors?.base?.textPrimary};
|
|
20080
|
-
background-color: ${semanticColors?.base?.
|
|
20194
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20081
20195
|
&:before {
|
|
20082
20196
|
display: block;
|
|
20083
20197
|
}
|
|
20084
20198
|
}
|
|
20085
20199
|
&.Mui-selected {
|
|
20086
20200
|
color: ${semanticColors?.base?.textPrimary};
|
|
20087
|
-
font-weight:
|
|
20201
|
+
font-weight: 600;
|
|
20088
20202
|
}
|
|
20089
20203
|
&.MuiButtonBase-root {
|
|
20090
20204
|
text-align: left;
|
|
@@ -20396,7 +20510,7 @@ const StyledPaginationButton = styled$2__default.default(Button) `
|
|
|
20396
20510
|
|
|
20397
20511
|
&:hover {
|
|
20398
20512
|
& .MuiSvgIcon-root {
|
|
20399
|
-
color: ${semanticColors?.base?.
|
|
20513
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction}
|
|
20400
20514
|
}
|
|
20401
20515
|
}
|
|
20402
20516
|
`;
|
|
@@ -20432,10 +20546,10 @@ const StyledPaginationChevronList = styled$2__default.default("li", {
|
|
|
20432
20546
|
}
|
|
20433
20547
|
|
|
20434
20548
|
&:hover {
|
|
20435
|
-
background-color: ${disabled ? "transparent" : semanticColors?.base?.
|
|
20549
|
+
background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
|
|
20436
20550
|
|
|
20437
20551
|
& .MuiSvgIcon-root {
|
|
20438
|
-
color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.
|
|
20552
|
+
color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
|
|
20439
20553
|
}
|
|
20440
20554
|
}
|
|
20441
20555
|
|
|
@@ -20457,28 +20571,29 @@ const StyledPagination = styled$2__default.default("ul", {
|
|
|
20457
20571
|
`;
|
|
20458
20572
|
const selectedPageStyle = (props) => {
|
|
20459
20573
|
const semanticColors = getSemanticColors(props);
|
|
20460
|
-
return `
|
|
20461
|
-
background-color: ${semanticColors?.base?.
|
|
20574
|
+
return react.css `
|
|
20575
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20462
20576
|
color: ${semanticColors?.base?.textPrimary};
|
|
20463
|
-
font-weight: 500;
|
|
20464
20577
|
box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
|
|
20465
20578
|
|
|
20466
20579
|
&:hover {
|
|
20467
20580
|
box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
|
|
20468
20581
|
}
|
|
20582
|
+
|
|
20583
|
+
${fontTabularSemiboldS(props)}
|
|
20469
20584
|
`;
|
|
20470
20585
|
};
|
|
20471
20586
|
const Page = styled$2__default.default("li", {
|
|
20472
20587
|
shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
|
|
20473
20588
|
}) `
|
|
20474
|
-
${
|
|
20589
|
+
${fontTabularMediumS}
|
|
20475
20590
|
|
|
20476
20591
|
${(props) => {
|
|
20477
20592
|
const { selected, sdsStyle } = props;
|
|
20478
20593
|
const spaces = getSpaces(props);
|
|
20479
20594
|
const corners = getCorners(props);
|
|
20480
20595
|
const semanticColors = getSemanticColors(props);
|
|
20481
|
-
return `
|
|
20596
|
+
return react.css `
|
|
20482
20597
|
color: ${semanticColors?.base?.textSecondary};
|
|
20483
20598
|
cursor: pointer;
|
|
20484
20599
|
list-style: none;
|
|
@@ -20492,15 +20607,15 @@ const Page = styled$2__default.default("li", {
|
|
|
20492
20607
|
border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
|
|
20493
20608
|
user-select: none;
|
|
20494
20609
|
&:hover {
|
|
20495
|
-
background-color: ${semanticColors?.base?.
|
|
20610
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20496
20611
|
color: ${semanticColors?.base?.textPrimary};
|
|
20497
20612
|
}
|
|
20498
20613
|
|
|
20499
|
-
&:nth-last-of-type(-n+2) {
|
|
20614
|
+
&:nth-last-of-type(-n + 2) {
|
|
20500
20615
|
margin-right: 0;
|
|
20501
20616
|
}
|
|
20502
20617
|
|
|
20503
|
-
${selected && selectedPageStyle(props)}
|
|
20618
|
+
${selected && selectedPageStyle(props)}
|
|
20504
20619
|
${focusVisibleA11yStyle(props)}
|
|
20505
20620
|
`;
|
|
20506
20621
|
}}
|
|
@@ -20823,7 +20938,7 @@ styled$2__default.default(material.ToggleButtonGroup, {
|
|
|
20823
20938
|
padding: ${spaces?.xxxs}px;
|
|
20824
20939
|
|
|
20825
20940
|
&:hover {
|
|
20826
|
-
box-shadow: inset 0 0 0 1px ${semanticColors?.base?.
|
|
20941
|
+
box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryInteraction};
|
|
20827
20942
|
}
|
|
20828
20943
|
|
|
20829
20944
|
.${material.toggleButtonClasses.root}.${material.toggleButtonClasses.disabled} {
|
|
@@ -20831,13 +20946,13 @@ styled$2__default.default(material.ToggleButtonGroup, {
|
|
|
20831
20946
|
}
|
|
20832
20947
|
|
|
20833
20948
|
.${material.toggleButtonClasses.root}.${material.toggleButtonClasses.selected} {
|
|
20834
|
-
background-color: ${semanticColors?.base?.
|
|
20949
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20835
20950
|
color: ${semanticColors?.accent?.ornamentSelected};
|
|
20836
20951
|
border-color: ${semanticColors?.base?.borderPrimary};
|
|
20837
20952
|
|
|
20838
20953
|
&:hover {
|
|
20839
|
-
background-color: ${semanticColors?.base?.
|
|
20840
|
-
color: ${semanticColors?.base?.
|
|
20954
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20955
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
20841
20956
|
}
|
|
20842
20957
|
}
|
|
20843
20958
|
|
|
@@ -20853,8 +20968,8 @@ styled$2__default.default(material.ToggleButtonGroup, {
|
|
|
20853
20968
|
|
|
20854
20969
|
&:hover {
|
|
20855
20970
|
border-color: ${semanticColors?.base?.borderPrimary};
|
|
20856
|
-
background-color: ${semanticColors?.base?.
|
|
20857
|
-
color: ${semanticColors?.base?.
|
|
20971
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20972
|
+
color: ${semanticColors?.base?.ornamentSecondaryInteraction};
|
|
20858
20973
|
}
|
|
20859
20974
|
}
|
|
20860
20975
|
`;
|
|
@@ -20910,6 +21025,7 @@ const disabledStyled = (props) => {
|
|
|
20910
21025
|
|
|
20911
21026
|
& span, & div {
|
|
20912
21027
|
color: ${semanticColors?.base?.textDisabled};
|
|
21028
|
+
background-color: transparent !important;
|
|
20913
21029
|
}
|
|
20914
21030
|
|
|
20915
21031
|
.cell-component {
|
|
@@ -20918,11 +21034,12 @@ const disabledStyled = (props) => {
|
|
|
20918
21034
|
user-select: none;
|
|
20919
21035
|
& div {
|
|
20920
21036
|
color: ${semanticColors?.base?.textDisabled};
|
|
20921
|
-
background-color:
|
|
21037
|
+
background-color: transparent;
|
|
20922
21038
|
}
|
|
20923
21039
|
|
|
20924
21040
|
& .MuiChip-root {
|
|
20925
21041
|
background-color: ${semanticColors?.base?.fillDisabled};
|
|
21042
|
+
box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled} !important;
|
|
20926
21043
|
|
|
20927
21044
|
& span {
|
|
20928
21045
|
color: ${semanticColors?.base?.textDisabled} !important;
|
|
@@ -20941,7 +21058,7 @@ const hoverStyled = (props) => {
|
|
|
20941
21058
|
const semanticColors = getSemanticColors(props);
|
|
20942
21059
|
return `
|
|
20943
21060
|
&:hover {
|
|
20944
|
-
background-color: ${semanticColors?.base?.
|
|
21061
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
20945
21062
|
}
|
|
20946
21063
|
`;
|
|
20947
21064
|
};
|
|
@@ -21042,8 +21159,8 @@ const StyledTab = styled$2__default.default(material.Tab, {
|
|
|
21042
21159
|
color: ${semanticColors?.base?.textSecondary};
|
|
21043
21160
|
|
|
21044
21161
|
&:hover {
|
|
21045
|
-
box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.
|
|
21046
|
-
background-color: ${semanticColors?.base?.
|
|
21162
|
+
box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryInteraction};
|
|
21163
|
+
background-color: ${semanticColors?.base?.fillInteraction};
|
|
21047
21164
|
border-top-right-radius: ${corners?.l}px;
|
|
21048
21165
|
border-top-left-radius: ${corners?.l}px;
|
|
21049
21166
|
|
|
@@ -21073,7 +21190,7 @@ const StyledTab = styled$2__default.default(material.Tab, {
|
|
|
21073
21190
|
function tabFontMixin(props) {
|
|
21074
21191
|
const { sdsSize } = props;
|
|
21075
21192
|
const isLarge = sdsSize === "large";
|
|
21076
|
-
return isLarge ?
|
|
21193
|
+
return isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props);
|
|
21077
21194
|
}
|
|
21078
21195
|
const StyledWrapper = styled$2__default.default("div") `
|
|
21079
21196
|
${(props) => {
|
|
@@ -21092,7 +21209,7 @@ const StyledCount = styled$2__default.default("span") `
|
|
|
21092
21209
|
const { sdsSize } = props;
|
|
21093
21210
|
const isLarge = sdsSize === "large";
|
|
21094
21211
|
return react.css `
|
|
21095
|
-
${isLarge ?
|
|
21212
|
+
${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
|
|
21096
21213
|
`;
|
|
21097
21214
|
}}
|
|
21098
21215
|
`;
|
|
@@ -21101,9 +21218,9 @@ const StyledLabelTextWrapper = styled$2__default.default("span") `
|
|
|
21101
21218
|
const { sdsSize, selected } = props;
|
|
21102
21219
|
const isLarge = sdsSize === "large";
|
|
21103
21220
|
return react.css `
|
|
21104
|
-
${isLarge ?
|
|
21221
|
+
${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
|
|
21105
21222
|
${selected &&
|
|
21106
|
-
(isLarge ?
|
|
21223
|
+
(isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props))}
|
|
21107
21224
|
position: absolute;
|
|
21108
21225
|
`;
|
|
21109
21226
|
}}
|
|
@@ -21113,7 +21230,7 @@ const StyledLabelTextWrapperShadow = styled$2__default.default("span") `
|
|
|
21113
21230
|
const { sdsSize } = props;
|
|
21114
21231
|
const isLarge = sdsSize === "large";
|
|
21115
21232
|
return react.css `
|
|
21116
|
-
${isLarge ?
|
|
21233
|
+
${isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props)}
|
|
21117
21234
|
visibility: hidden;
|
|
21118
21235
|
opacity: 0;
|
|
21119
21236
|
`;
|
|
@@ -24793,7 +24910,7 @@ Object.assign(chroma, {
|
|
|
24793
24910
|
const generateDiscreteColors = (count, options = {}) => {
|
|
24794
24911
|
if (count === 0)
|
|
24795
24912
|
return [];
|
|
24796
|
-
const { isDarkMode = false, start =
|
|
24913
|
+
const { isDarkMode = false, start = 240, rotations = 0.85, gamma = 1, lightness = [0.4, 0.7], correctLightness = true, } = options;
|
|
24797
24914
|
let scale = chroma
|
|
24798
24915
|
.cubehelix()
|
|
24799
24916
|
.start(start)
|
|
@@ -24999,7 +25116,7 @@ var renderBarSegment = function (item, index, options) {
|
|
|
24999
25116
|
};
|
|
25000
25117
|
var StackedBarChart = function (props) {
|
|
25001
25118
|
var _a, _b, _c;
|
|
25002
|
-
var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
|
|
25119
|
+
var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, onSegmentMouseEnter = props.onSegmentMouseEnter, onSegmentMouseLeave = props.onSegmentMouseLeave, onLegendItemMouseEnter = props.onLegendItemMouseEnter, onLegendItemMouseLeave = props.onLegendItemMouseLeave, onSegmentClick = props.onSegmentClick, onLegendItemClick = props.onLegendItemClick, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "onSegmentMouseEnter", "onSegmentMouseLeave", "onLegendItemMouseEnter", "onLegendItemMouseLeave", "onSegmentClick", "onLegendItemClick", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
|
|
25003
25120
|
// Ensure barHeight is at least 1px
|
|
25004
25121
|
var barHeight = Math.max(1, barHeightProp);
|
|
25005
25122
|
var theme = material.useTheme();
|
|
@@ -25232,8 +25349,24 @@ var StackedBarChart = function (props) {
|
|
|
25232
25349
|
theme,
|
|
25233
25350
|
]);
|
|
25234
25351
|
// Handle legend item hover and leave
|
|
25235
|
-
var handleLegendItemHover = React.useCallback(function (_item, index) {
|
|
25236
|
-
|
|
25352
|
+
var handleLegendItemHover = React.useCallback(function (_item, index) {
|
|
25353
|
+
setHoveredIndex(index);
|
|
25354
|
+
if (onLegendItemMouseEnter && data[index]) {
|
|
25355
|
+
onLegendItemMouseEnter(data[index], index);
|
|
25356
|
+
}
|
|
25357
|
+
}, [onLegendItemMouseEnter, data]);
|
|
25358
|
+
var handleLegendItemLeave = React.useCallback(function (_item, index) {
|
|
25359
|
+
setHoveredIndex(null);
|
|
25360
|
+
if (onLegendItemMouseLeave && data[index]) {
|
|
25361
|
+
onLegendItemMouseLeave(data[index], index);
|
|
25362
|
+
}
|
|
25363
|
+
}, [onLegendItemMouseLeave, data]);
|
|
25364
|
+
// Handle legend item click
|
|
25365
|
+
var handleLegendItemClickInternal = React.useCallback(function (_item, index) {
|
|
25366
|
+
if (onLegendItemClick && data[index]) {
|
|
25367
|
+
onLegendItemClick(data[index], index);
|
|
25368
|
+
}
|
|
25369
|
+
}, [onLegendItemClick, data]);
|
|
25237
25370
|
// Handle selection change - reusable logic for both segment and legend
|
|
25238
25371
|
var handleSelectionChange = React.useCallback(function (newSelectedIndices) {
|
|
25239
25372
|
if (!onSelectionChange)
|
|
@@ -25243,8 +25376,13 @@ var StackedBarChart = function (props) {
|
|
|
25243
25376
|
});
|
|
25244
25377
|
onSelectionChange(newSelectedIndices, selectedData);
|
|
25245
25378
|
}, [onSelectionChange, data]);
|
|
25246
|
-
// Handle segment click - toggle selection
|
|
25379
|
+
// Handle segment click - toggle selection and call onSegmentClick
|
|
25247
25380
|
var handleSegmentClick = React.useCallback(function (index) {
|
|
25381
|
+
// Call onSegmentClick callback if provided
|
|
25382
|
+
if (onSegmentClick && data[index]) {
|
|
25383
|
+
onSegmentClick(data[index], index);
|
|
25384
|
+
}
|
|
25385
|
+
// Handle selection change
|
|
25248
25386
|
if (!onSelectionChange)
|
|
25249
25387
|
return;
|
|
25250
25388
|
var isSelected = selectedIndicesSet.has(index);
|
|
@@ -25254,6 +25392,8 @@ var StackedBarChart = function (props) {
|
|
|
25254
25392
|
handleSelectionChange(newSelectedIndices);
|
|
25255
25393
|
}, [
|
|
25256
25394
|
onSelectionChange,
|
|
25395
|
+
onSegmentClick,
|
|
25396
|
+
data,
|
|
25257
25397
|
selectedIndices,
|
|
25258
25398
|
selectedIndicesSet,
|
|
25259
25399
|
handleSelectionChange,
|
|
@@ -25276,14 +25416,24 @@ var StackedBarChart = function (props) {
|
|
|
25276
25416
|
selectionBehavior: selectionBehavior,
|
|
25277
25417
|
isLast: isLastVisible,
|
|
25278
25418
|
onMouseEnter: function () {
|
|
25279
|
-
|
|
25419
|
+
if (!item.isExiting) {
|
|
25420
|
+
setHoveredIndex(item.originalIndex);
|
|
25421
|
+
if (onSegmentMouseEnter && data[item.originalIndex]) {
|
|
25422
|
+
onSegmentMouseEnter(data[item.originalIndex], item.originalIndex);
|
|
25423
|
+
}
|
|
25424
|
+
}
|
|
25425
|
+
},
|
|
25426
|
+
onMouseLeave: function () {
|
|
25427
|
+
setHoveredIndex(null);
|
|
25428
|
+
if (onSegmentMouseLeave && data[item.originalIndex]) {
|
|
25429
|
+
onSegmentMouseLeave(data[item.originalIndex], item.originalIndex);
|
|
25430
|
+
}
|
|
25280
25431
|
},
|
|
25281
|
-
onMouseLeave: function () { return setHoveredIndex(null); },
|
|
25282
25432
|
onClick: function () {
|
|
25283
25433
|
return !item.isExiting && handleSegmentClick(item.originalIndex);
|
|
25284
25434
|
},
|
|
25285
25435
|
});
|
|
25286
|
-
}), hasRemaining && (jsxRuntime.jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: displayRemainingPercentage, height: barHeight, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsxRuntime.jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
|
|
25436
|
+
}), hasRemaining && (jsxRuntime.jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: displayRemainingPercentage, height: barHeight, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsxRuntime.jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, onItemClick: onLegendItemClick ? handleLegendItemClickInternal : undefined, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
|
|
25287
25437
|
// If no title, render chart and optional legend without wrapper
|
|
25288
25438
|
if (!title) {
|
|
25289
25439
|
return (jsxRuntime.jsx(ChartWrapper, __assign$1({ width: width }, rest, { children: chartContent })));
|