@czi-sds/components 22.3.3 → 22.5.0
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 +127 -48
- package/dist/index.cjs.js +328 -237
- package/dist/index.esm.d.ts +127 -48
- package/dist/index.esm.js +324 -238
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -792,12 +792,6 @@ var sharedAppTheme = {
|
|
|
792
792
|
},
|
|
793
793
|
},
|
|
794
794
|
};
|
|
795
|
-
/**
|
|
796
|
-
* Create a SDS App Theme with custom colors that follows the SDS color model.
|
|
797
|
-
*/
|
|
798
|
-
var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
|
|
799
|
-
var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
|
|
800
|
-
var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
|
|
801
795
|
// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
|
|
802
796
|
// applications to override those colors using their own custom theme.
|
|
803
797
|
// By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
|
|
@@ -807,116 +801,79 @@ var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
|
|
|
807
801
|
//
|
|
808
802
|
// (masoudmanson): We need to define borders separately for light and dark themes
|
|
809
803
|
// because the border colors are different for each theme.
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
},
|
|
874
|
-
base: {
|
|
875
|
-
default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
|
|
876
|
-
disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
|
|
877
|
-
divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
|
|
878
|
-
dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
|
|
879
|
-
hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
|
|
880
|
-
inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
|
|
881
|
-
pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
|
|
882
|
-
table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
|
|
883
|
-
},
|
|
884
|
-
beta: {
|
|
885
|
-
default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
|
|
886
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
|
|
887
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
|
|
888
|
-
},
|
|
889
|
-
info: {
|
|
890
|
-
default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
|
|
891
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
|
|
892
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
|
|
893
|
-
},
|
|
894
|
-
link: {
|
|
895
|
-
dashed: "1px dashed",
|
|
896
|
-
solid: "1px solid",
|
|
897
|
-
},
|
|
898
|
-
negative: {
|
|
899
|
-
default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
|
|
900
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
|
|
901
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
|
|
902
|
-
},
|
|
903
|
-
neutral: {
|
|
904
|
-
default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
|
|
905
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
|
|
906
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
|
|
907
|
-
},
|
|
908
|
-
none: "none",
|
|
909
|
-
notice: {
|
|
910
|
-
default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
|
|
911
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
|
|
912
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
|
|
913
|
-
},
|
|
914
|
-
positive: {
|
|
915
|
-
default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
|
|
916
|
-
extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
|
|
917
|
-
thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
|
|
918
|
-
},
|
|
804
|
+
var BorderThickness = {
|
|
805
|
+
default: 1,
|
|
806
|
+
extraThick: 4,
|
|
807
|
+
thick: 2,
|
|
808
|
+
};
|
|
809
|
+
var createAppThemeBorders = function (colors, isDarkMode) {
|
|
810
|
+
var createSolidBorder = function (color, level, thickness) { return "".concat(BorderThickness[thickness], "px solid ").concat(colors[color][level]); };
|
|
811
|
+
var createDashedBorder = function () { return "1px dashed"; };
|
|
812
|
+
return {
|
|
813
|
+
accent: {
|
|
814
|
+
default: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
|
|
815
|
+
focused: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
|
|
816
|
+
hover: createSolidBorder("blue", isDarkMode ? 700 : 600, "default"),
|
|
817
|
+
open: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
|
|
818
|
+
pressed: createSolidBorder("blue", isDarkMode ? 800 : 700, "default"),
|
|
819
|
+
selected: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
|
|
820
|
+
},
|
|
821
|
+
base: {
|
|
822
|
+
default: createSolidBorder("gray", 500, "default"),
|
|
823
|
+
disabled: createSolidBorder("gray", 300, "default"),
|
|
824
|
+
divider: createSolidBorder("gray", 200, "default"),
|
|
825
|
+
dividerInverse: createSolidBorder("gray", 600, "default"),
|
|
826
|
+
hover: createSolidBorder("gray", 900, "default"),
|
|
827
|
+
inverse: createSolidBorder("gray", 50, "default"),
|
|
828
|
+
pressed: createSolidBorder("gray", 900, "default"),
|
|
829
|
+
table: createSolidBorder("gray", 300, "default"),
|
|
830
|
+
},
|
|
831
|
+
beta: {
|
|
832
|
+
default: createSolidBorder("purple", 600, "default"),
|
|
833
|
+
extraThick: createSolidBorder("purple", 600, "extraThick"),
|
|
834
|
+
thick: createSolidBorder("purple", 600, "thick"),
|
|
835
|
+
},
|
|
836
|
+
info: {
|
|
837
|
+
default: createSolidBorder("blue", 600, "default"),
|
|
838
|
+
extraThick: createSolidBorder("blue", 600, "extraThick"),
|
|
839
|
+
thick: createSolidBorder("blue", 600, "thick"),
|
|
840
|
+
},
|
|
841
|
+
link: {
|
|
842
|
+
dashed: createDashedBorder(),
|
|
843
|
+
solid: createSolidBorder("blue", 500, "default"),
|
|
844
|
+
},
|
|
845
|
+
negative: {
|
|
846
|
+
default: createSolidBorder("red", 600, "default"),
|
|
847
|
+
extraThick: createSolidBorder("red", 600, "extraThick"),
|
|
848
|
+
thick: createSolidBorder("red", 600, "thick"),
|
|
849
|
+
},
|
|
850
|
+
neutral: {
|
|
851
|
+
default: createSolidBorder("gray", 500, "default"),
|
|
852
|
+
extraThick: createSolidBorder("gray", 500, "extraThick"),
|
|
853
|
+
thick: createSolidBorder("gray", 500, "thick"),
|
|
854
|
+
},
|
|
855
|
+
none: "none",
|
|
856
|
+
notice: {
|
|
857
|
+
default: createSolidBorder("yellow", 600, "default"),
|
|
858
|
+
extraThick: createSolidBorder("yellow", 600, "extraThick"),
|
|
859
|
+
thick: createSolidBorder("yellow", 600, "thick"),
|
|
860
|
+
},
|
|
861
|
+
positive: {
|
|
862
|
+
default: createSolidBorder("green", 600, "default"),
|
|
863
|
+
extraThick: createSolidBorder("green", 600, "extraThick"),
|
|
864
|
+
thick: createSolidBorder("green", 600, "thick"),
|
|
865
|
+
},
|
|
866
|
+
};
|
|
919
867
|
};
|
|
868
|
+
/**
|
|
869
|
+
* Create a SDS App Theme with custom colors that follows the SDS color model.
|
|
870
|
+
*/
|
|
871
|
+
var makeSdsSemanticAppTheme = function (colors, isDarkTheme) {
|
|
872
|
+
if (isDarkTheme === void 0) { isDarkTheme = false; }
|
|
873
|
+
return (__assign(__assign({}, sharedAppTheme), { borders: createAppThemeBorders(colors, isDarkTheme), colors: colors }));
|
|
874
|
+
};
|
|
875
|
+
var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
|
|
876
|
+
var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors, true);
|
|
920
877
|
/**
|
|
921
878
|
* Helper function to select the appropriate theme settings.
|
|
922
879
|
*
|
|
@@ -1635,7 +1592,7 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
|
1635
1592
|
if (!typography)
|
|
1636
1593
|
return null;
|
|
1637
1594
|
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1638
|
-
return css(templateObject_7$
|
|
1595
|
+
return css(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
|
|
1639
1596
|
? css(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
|
|
1640
1597
|
};
|
|
1641
1598
|
};
|
|
@@ -1645,9 +1602,9 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1645
1602
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1646
1603
|
function themeToCss(fontTheme, fontFamily) {
|
|
1647
1604
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1648
|
-
return css(templateObject_8$
|
|
1605
|
+
return css(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
|
|
1649
1606
|
}
|
|
1650
|
-
var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$
|
|
1607
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$h, templateObject_8$e;
|
|
1651
1608
|
|
|
1652
1609
|
var StyledAccordionDetails = styled$2(AccordionDetails$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1653
1610
|
var spaces = getSpaces(props);
|
|
@@ -4423,7 +4380,7 @@ var AccordionHeader = function (props) {
|
|
|
4423
4380
|
};
|
|
4424
4381
|
|
|
4425
4382
|
var sdsPropNames$2 = ["useDivider", "togglePosition"];
|
|
4426
|
-
var StyledAccordion$
|
|
4383
|
+
var StyledAccordion$2 = styled$2(Accordion$1, {
|
|
4427
4384
|
shouldForwardProp: function (prop) {
|
|
4428
4385
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4429
4386
|
},
|
|
@@ -4457,7 +4414,7 @@ var Accordion = React__default.forwardRef(function (props, ref) {
|
|
|
4457
4414
|
setExpanded(isExpanded ? panel : false);
|
|
4458
4415
|
};
|
|
4459
4416
|
};
|
|
4460
|
-
return (jsx(StyledAccordion$
|
|
4417
|
+
return (jsx(StyledAccordion$2, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4461
4418
|
});
|
|
4462
4419
|
|
|
4463
4420
|
var StyledAlert = styled$2(Alert$2)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
@@ -4694,29 +4651,29 @@ var Minimal = function (props) {
|
|
|
4694
4651
|
var PrimaryMinimalButton = function (props) {
|
|
4695
4652
|
var _a, _b;
|
|
4696
4653
|
var semanticColors = getSemanticColors(props);
|
|
4697
|
-
return css(templateObject_7$
|
|
4654
|
+
return css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
|
|
4698
4655
|
};
|
|
4699
4656
|
var SecondaryMinimalButton = function (props) {
|
|
4700
4657
|
var _a, _b;
|
|
4701
4658
|
var semanticColors = getSemanticColors(props);
|
|
4702
|
-
return css(templateObject_8$
|
|
4659
|
+
return css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
|
|
4703
4660
|
};
|
|
4704
4661
|
var StyledMinimalButton = styled$2(Button$1, {
|
|
4705
4662
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4706
|
-
})(templateObject_10$
|
|
4663
|
+
})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4707
4664
|
var sdsType = props.sdsType;
|
|
4708
|
-
return css(templateObject_9$
|
|
4665
|
+
return css(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4709
4666
|
});
|
|
4710
4667
|
var StyledButtonLegacy = styled$2(Button$1, {
|
|
4711
4668
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4712
|
-
})(templateObject_11$
|
|
4669
|
+
})(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4713
4670
|
if (!props.isRounded)
|
|
4714
4671
|
return "";
|
|
4715
4672
|
var corners = getCorners(props);
|
|
4716
4673
|
var spaces = getSpaces(props);
|
|
4717
4674
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4718
4675
|
});
|
|
4719
|
-
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$
|
|
4676
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$8, templateObject_10$6, templateObject_11$5;
|
|
4720
4677
|
|
|
4721
4678
|
var isDisabled$1 = function (props) {
|
|
4722
4679
|
var _a, _b;
|
|
@@ -4758,7 +4715,7 @@ var large = function (props) {
|
|
|
4758
4715
|
var sdsType = props.sdsType;
|
|
4759
4716
|
var iconSizes = getIconSizes(props);
|
|
4760
4717
|
var spaces = getSpaces(props);
|
|
4761
|
-
return css(templateObject_7$
|
|
4718
|
+
return css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4762
4719
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0;")
|
|
4763
4720
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
|
|
4764
4721
|
};
|
|
@@ -4773,11 +4730,11 @@ var doNotForwardProps$D = [
|
|
|
4773
4730
|
];
|
|
4774
4731
|
var StyledButtonIcon = styled$2(IconButton, {
|
|
4775
4732
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4776
|
-
})(templateObject_9$
|
|
4733
|
+
})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4777
4734
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4778
|
-
return css(templateObject_8$
|
|
4735
|
+
return css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4779
4736
|
});
|
|
4780
|
-
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$
|
|
4737
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7;
|
|
4781
4738
|
|
|
4782
4739
|
var ButtonIconSizeToSdsIconSize = {
|
|
4783
4740
|
large: "xl",
|
|
@@ -4915,8 +4872,8 @@ var StyledSearchBase = styled$2(TextField, {
|
|
|
4915
4872
|
var semanticColors = getSemanticColors(props);
|
|
4916
4873
|
return css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, outlinedInputClasses.root, buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
|
|
4917
4874
|
});
|
|
4918
|
-
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$
|
|
4919
|
-
var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$
|
|
4875
|
+
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4876
|
+
var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$e;
|
|
4920
4877
|
|
|
4921
4878
|
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4922
4879
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -4961,7 +4918,7 @@ var StyledIconWrapper = styled$2("span")(templateObject_6$h || (templateObject_6
|
|
|
4961
4918
|
});
|
|
4962
4919
|
var StyledCheck = styled$2(Check, {
|
|
4963
4920
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4964
|
-
})(templateObject_7$
|
|
4921
|
+
})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4965
4922
|
var _a, _b;
|
|
4966
4923
|
var selected = props.selected, disabled = props.disabled;
|
|
4967
4924
|
var iconSizes = getIconSizes(props);
|
|
@@ -4973,7 +4930,7 @@ var StyledCheck = styled$2(Check, {
|
|
|
4973
4930
|
});
|
|
4974
4931
|
var StyledMinus = styled$2(Remove, {
|
|
4975
4932
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4976
|
-
})(templateObject_8$
|
|
4933
|
+
})(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4977
4934
|
var _a, _b;
|
|
4978
4935
|
var selected = props.selected, disabled = props.disabled;
|
|
4979
4936
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4983,7 +4940,7 @@ var StyledMinus = styled$2(Remove, {
|
|
|
4983
4940
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
4984
4941
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
|
|
4985
4942
|
});
|
|
4986
|
-
var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$
|
|
4943
|
+
var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$d, templateObject_8$b;
|
|
4987
4944
|
|
|
4988
4945
|
/**
|
|
4989
4946
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5930,7 +5887,7 @@ var arrowCss = function (props) {
|
|
|
5930
5887
|
var _a, _b;
|
|
5931
5888
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5932
5889
|
var semanticColors = getSemanticColors(props);
|
|
5933
|
-
return css$1(templateObject_7$
|
|
5890
|
+
return css$1(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
5934
5891
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5935
5892
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5936
5893
|
};
|
|
@@ -5938,8 +5895,8 @@ var arrowCss = function (props) {
|
|
|
5938
5895
|
* (masoudmanson): !important is needed to override arrow's
|
|
5939
5896
|
* default placement which is calculated by javascript
|
|
5940
5897
|
*/
|
|
5941
|
-
var StyledPopper$1 = styled$2(Popper)(templateObject_8$
|
|
5942
|
-
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$
|
|
5898
|
+
var StyledPopper$1 = styled$2(Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
5899
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a;
|
|
5943
5900
|
|
|
5944
5901
|
/**
|
|
5945
5902
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6079,7 +6036,7 @@ var PrimaryText = styled$2("div", {
|
|
|
6079
6036
|
});
|
|
6080
6037
|
var SecondaryText = styled$2("span", {
|
|
6081
6038
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6082
|
-
})(templateObject_7$
|
|
6039
|
+
})(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6083
6040
|
var _a;
|
|
6084
6041
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6085
6042
|
var spaces = getSpaces(props);
|
|
@@ -6090,7 +6047,7 @@ var SecondaryText = styled$2("span", {
|
|
|
6090
6047
|
});
|
|
6091
6048
|
var TertiaryText = styled$2("span", {
|
|
6092
6049
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6093
|
-
})(templateObject_8$
|
|
6050
|
+
})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6094
6051
|
var _a;
|
|
6095
6052
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6096
6053
|
var spaces = getSpaces(props);
|
|
@@ -6099,15 +6056,15 @@ var TertiaryText = styled$2("span", {
|
|
|
6099
6056
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6100
6057
|
: ShouldTruncate(), "\n ");
|
|
6101
6058
|
});
|
|
6102
|
-
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$
|
|
6059
|
+
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6103
6060
|
var spaces = getSpaces(props);
|
|
6104
6061
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6105
6062
|
});
|
|
6106
|
-
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$
|
|
6063
|
+
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6107
6064
|
var spaces = getSpaces(props);
|
|
6108
6065
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6109
6066
|
});
|
|
6110
|
-
var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$
|
|
6067
|
+
var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$b, templateObject_8$9, templateObject_9$6, templateObject_10$5;
|
|
6111
6068
|
|
|
6112
6069
|
var CellBasicContent = function (props) {
|
|
6113
6070
|
var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
|
|
@@ -6279,11 +6236,11 @@ var statusToCss = {
|
|
|
6279
6236
|
var doNotForwardProps$s = ["isRounded"];
|
|
6280
6237
|
var StyledChip = styled$2(Chip$1, {
|
|
6281
6238
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6282
|
-
})(templateObject_7$
|
|
6239
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6283
6240
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6284
6241
|
return css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
|
|
6285
6242
|
});
|
|
6286
|
-
var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$
|
|
6243
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$a;
|
|
6287
6244
|
|
|
6288
6245
|
/**
|
|
6289
6246
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6459,12 +6416,12 @@ var isOpen = function (props) {
|
|
|
6459
6416
|
var applyIntentColor$1 = function (props, intent) {
|
|
6460
6417
|
var _a, _b, _c;
|
|
6461
6418
|
var borders = getBorders(props);
|
|
6462
|
-
return css(templateObject_7$
|
|
6419
|
+
return css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
|
|
6463
6420
|
};
|
|
6464
6421
|
var isDisabled = function (props) {
|
|
6465
6422
|
var _a, _b, _c, _d;
|
|
6466
6423
|
var semanticColors = getSemanticColors(props);
|
|
6467
|
-
return css(templateObject_8$
|
|
6424
|
+
return css(templateObject_8$8 || (templateObject_8$8 = __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 "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
|
|
6468
6425
|
};
|
|
6469
6426
|
/**
|
|
6470
6427
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6476,9 +6433,9 @@ var isDisabled = function (props) {
|
|
|
6476
6433
|
*/
|
|
6477
6434
|
var StyledInputDropdown = styled$2(Button, {
|
|
6478
6435
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6479
|
-
})(templateObject_10$
|
|
6436
|
+
})(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\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 outline-offset: 1px !important;\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, focusVisibleA11yStyle, function (props) {
|
|
6480
6437
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6481
|
-
return css(templateObject_9$
|
|
6438
|
+
return css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n ", "\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), value && userInput(props), intent === "notice" &&
|
|
6482
6439
|
sdsStyle !== "minimal" &&
|
|
6483
6440
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6484
6441
|
sdsStyle !== "minimal" &&
|
|
@@ -6488,7 +6445,7 @@ var StyledInputDropdown = styled$2(Button, {
|
|
|
6488
6445
|
});
|
|
6489
6446
|
var StyledDetail = styled$2("span", {
|
|
6490
6447
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6491
|
-
})(templateObject_11$
|
|
6448
|
+
})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6492
6449
|
var _a;
|
|
6493
6450
|
var spaces = getSpaces(props);
|
|
6494
6451
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6541,7 +6498,7 @@ function labelStyle(props) {
|
|
|
6541
6498
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6542
6499
|
return css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
6543
6500
|
}
|
|
6544
|
-
var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$
|
|
6501
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
|
|
6545
6502
|
|
|
6546
6503
|
/**
|
|
6547
6504
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6716,15 +6673,15 @@ var doNotForwardProps$p = [
|
|
|
6716
6673
|
"tagColor",
|
|
6717
6674
|
"hover",
|
|
6718
6675
|
];
|
|
6719
|
-
var StyledTag$
|
|
6676
|
+
var StyledTag$3 = styled$2(Chip$1, {
|
|
6720
6677
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
6721
|
-
})(templateObject_8$
|
|
6678
|
+
})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6722
6679
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
6723
6680
|
var isRounded = sdsStyle === "rounded";
|
|
6724
6681
|
var type = sdsType || "primary";
|
|
6725
|
-
return css(templateObject_7$
|
|
6682
|
+
return css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
|
|
6726
6683
|
});
|
|
6727
|
-
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$
|
|
6684
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
6728
6685
|
|
|
6729
6686
|
/**
|
|
6730
6687
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6735,10 +6692,10 @@ var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4
|
|
|
6735
6692
|
*/
|
|
6736
6693
|
var Tag = function (props) {
|
|
6737
6694
|
var color = props.color;
|
|
6738
|
-
return jsx(StyledTag$
|
|
6695
|
+
return jsx(StyledTag$3, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6739
6696
|
};
|
|
6740
6697
|
|
|
6741
|
-
var StyledTag$
|
|
6698
|
+
var StyledTag$2 = styled$2(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6742
6699
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6743
6700
|
var spaces = getSpaces(props);
|
|
6744
6701
|
var iconSizes = getIconSizes(props);
|
|
@@ -6751,7 +6708,7 @@ var templateObject_1$L, templateObject_2$t;
|
|
|
6751
6708
|
* @see https://mui.com/material-ui/react-chip/
|
|
6752
6709
|
*/
|
|
6753
6710
|
var TagFilter = function (props) {
|
|
6754
|
-
return (jsx(StyledTag$
|
|
6711
|
+
return (jsx(StyledTag$2, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
|
|
6755
6712
|
};
|
|
6756
6713
|
|
|
6757
6714
|
var Chips = function (_a) {
|
|
@@ -6923,18 +6880,18 @@ var StyledCardActionArea = styled$2(Button, {
|
|
|
6923
6880
|
});
|
|
6924
6881
|
var StyledIconMediaWrapper = styled$2("div", {
|
|
6925
6882
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6926
|
-
})(templateObject_10$
|
|
6883
|
+
})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6927
6884
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6928
6885
|
var spaces = getSpaces(props);
|
|
6929
|
-
return css(templateObject_9$
|
|
6930
|
-
? css(templateObject_7$
|
|
6886
|
+
return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
6887
|
+
? css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6931
6888
|
});
|
|
6932
6889
|
var StyledCardContent = styled$2("div", {
|
|
6933
6890
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6934
6891
|
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6935
6892
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6936
6893
|
var spaces = getSpaces(props);
|
|
6937
|
-
return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && css(templateObject_11$
|
|
6894
|
+
return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6938
6895
|
});
|
|
6939
6896
|
var StyledContentCardBody = styled$2(CardContent, {
|
|
6940
6897
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6945,7 +6902,7 @@ var StyledContentCardBody = styled$2(CardContent, {
|
|
|
6945
6902
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 0 0;\n padding: 0;\n ");
|
|
6946
6903
|
});
|
|
6947
6904
|
var StyledCardContentAligner = styled$2("div")(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"])));
|
|
6948
|
-
var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$
|
|
6905
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
|
|
6949
6906
|
|
|
6950
6907
|
var doNotForwardProps$n = [
|
|
6951
6908
|
"visualElement",
|
|
@@ -6995,13 +6952,22 @@ var StyledMetadataText = styled$3("p", {
|
|
|
6995
6952
|
});
|
|
6996
6953
|
var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
|
|
6997
6954
|
|
|
6998
|
-
|
|
6999
|
-
|
|
7000
|
-
|
|
6955
|
+
var createTextComponent = function (StyledComponent) {
|
|
6956
|
+
return function (_a) {
|
|
6957
|
+
var text = _a.text, className = _a.className;
|
|
6958
|
+
if (!text)
|
|
6959
|
+
return null;
|
|
6960
|
+
return typeof text === "string" ? (jsx(StyledComponent, { className: className, children: text })) : (text);
|
|
6961
|
+
};
|
|
6962
|
+
};
|
|
6963
|
+
var OverlineText = createTextComponent(StyledOverlineText);
|
|
6964
|
+
var TitleText = createTextComponent(StyledTitleText);
|
|
6965
|
+
var SubtitleText = createTextComponent(StyledSubtitleText);
|
|
6966
|
+
var MetadataText = createTextComponent(StyledMetadataText);
|
|
7001
6967
|
var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
|
|
7002
6968
|
var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
|
|
7003
6969
|
var cardHeader = classes.cardHeader, cardOverline = classes.cardOverline, cardTitle = classes.cardTitle, cardSubtitle = classes.cardSubtitle, cardMetadata = classes.cardMetadata;
|
|
7004
|
-
return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [
|
|
6970
|
+
return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsx(OverlineText, { text: overlineText, className: cardOverline }), jsx(TitleText, { text: titleText, className: cardTitle }), jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7005
6971
|
});
|
|
7006
6972
|
|
|
7007
6973
|
var doNotForwardProps$m = ["buttonsPosition"];
|
|
@@ -7073,22 +7039,22 @@ var doNotForwardProps$l = [
|
|
|
7073
7039
|
];
|
|
7074
7040
|
var StyledImageMediaWrapper = styled$3("div", {
|
|
7075
7041
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7076
|
-
})(templateObject_9$
|
|
7042
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7077
7043
|
var _a = props.imagePadding, imagePadding = _a === void 0 ? false : _a, _b = props.boundingBox, boundingBox = _b === void 0 ? true : _b, _c = props.sdsType, sdsType = _c === void 0 ? "wide" : _c, _d = props.imagePosition, imagePosition = _d === void 0 ? "left" : _d;
|
|
7078
7044
|
var spaces = getSpaces(props);
|
|
7079
|
-
return css$2(templateObject_8$
|
|
7045
|
+
return css$2(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "], ["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "])), boundingBox
|
|
7080
7046
|
? imagePadding
|
|
7081
7047
|
? css$2(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7082
7048
|
? "padding-right: 0;"
|
|
7083
7049
|
: "padding-left: 0;") : css$2(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7084
7050
|
: css$2(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7085
7051
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7086
|
-
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$
|
|
7052
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7087
7053
|
? imagePadding
|
|
7088
7054
|
? css$2(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : css$2(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7089
7055
|
: css$2(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
|
|
7090
7056
|
});
|
|
7091
|
-
var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$
|
|
7057
|
+
var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$5, templateObject_9$3;
|
|
7092
7058
|
|
|
7093
7059
|
/**
|
|
7094
7060
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7518,7 +7484,7 @@ var StyledCheckboxLabel = styled$2("span")(templateObject_6$8 || (templateObject
|
|
|
7518
7484
|
var spaces = getSpaces(props);
|
|
7519
7485
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7520
7486
|
});
|
|
7521
|
-
var StyledCheckboxCaption = styled$2("span")(templateObject_7$
|
|
7487
|
+
var StyledCheckboxCaption = styled$2("span")(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7522
7488
|
var _a;
|
|
7523
7489
|
var semanticColors = getSemanticColors(props);
|
|
7524
7490
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7529,7 +7495,7 @@ var disabledStyles$1 = function (props) {
|
|
|
7529
7495
|
var borders = getBorders(props);
|
|
7530
7496
|
return "\n user-select: none;\n\n ".concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\n }\n\n ").concat(StyledCheckboxCaption, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_d = borders === null || borders === void 0 ? void 0 : borders.base) === null || _d === void 0 ? void 0 : _d.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
7531
7497
|
};
|
|
7532
|
-
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$
|
|
7498
|
+
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7533
7499
|
var _a, _b, _c, _d;
|
|
7534
7500
|
var disabled = props.disabled;
|
|
7535
7501
|
var spaces = getSpaces(props);
|
|
@@ -7537,7 +7503,7 @@ var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$3 ||
|
|
|
7537
7503
|
var borders = getBorders(props);
|
|
7538
7504
|
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;\n\n &:hover {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.hover, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles$1(props), "\n ");
|
|
7539
7505
|
});
|
|
7540
|
-
var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$
|
|
7506
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$4;
|
|
7541
7507
|
|
|
7542
7508
|
/**
|
|
7543
7509
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7600,7 +7566,7 @@ var StyledRadioLabel = styled$2("span")(templateObject_6$7 || (templateObject_6$
|
|
|
7600
7566
|
var spaces = getSpaces(props);
|
|
7601
7567
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7602
7568
|
});
|
|
7603
|
-
var StyledRadioCaption = styled$2("span")(templateObject_7$
|
|
7569
|
+
var StyledRadioCaption = styled$2("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7604
7570
|
var _a;
|
|
7605
7571
|
var semanticColors = getSemanticColors(props);
|
|
7606
7572
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7610,14 +7576,14 @@ var disabledStyles = function (props) {
|
|
|
7610
7576
|
var semanticColors = getSemanticColors(props);
|
|
7611
7577
|
return "\n user-select: none;\n\n ".concat(StyledRadioCaption, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n }\n\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
7612
7578
|
};
|
|
7613
|
-
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$
|
|
7579
|
+
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7614
7580
|
var _a, _b, _c, _d;
|
|
7615
7581
|
var disabled = props.disabled;
|
|
7616
7582
|
var spaces = getSpaces(props);
|
|
7617
7583
|
var semanticColors = getSemanticColors(props);
|
|
7618
7584
|
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;\n\n &:hover {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryPressed, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles(props), "\n ");
|
|
7619
7585
|
});
|
|
7620
|
-
var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$
|
|
7586
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$4, templateObject_8$3;
|
|
7621
7587
|
|
|
7622
7588
|
/**
|
|
7623
7589
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -8092,10 +8058,10 @@ var StyledLogoWrapper$1 = styled$2("div", {
|
|
|
8092
8058
|
});
|
|
8093
8059
|
var StyledNavSection = styled$2("div", {
|
|
8094
8060
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8095
|
-
})(templateObject_9$
|
|
8061
|
+
})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8096
8062
|
var isNarrow = props.isNarrow;
|
|
8097
8063
|
var spaces = getSpaces(props);
|
|
8098
|
-
return css$2(templateObject_8$
|
|
8064
|
+
return css$2(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && css$2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "], ["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8099
8065
|
});
|
|
8100
8066
|
var StyledTopSection = styled$2("div", {
|
|
8101
8067
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8103,11 +8069,11 @@ var StyledTopSection = styled$2("div", {
|
|
|
8103
8069
|
var isNarrow = props.isNarrow;
|
|
8104
8070
|
var semanticColors = getSemanticColors(props);
|
|
8105
8071
|
var spaces = getSpaces(props);
|
|
8106
|
-
return css$2(templateObject_11$
|
|
8072
|
+
return css$2(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, props.hasInvertedStyle
|
|
8107
8073
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
8108
8074
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
8109
8075
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8110
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && css$2(templateObject_10$
|
|
8076
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && css$2(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n flex-direction: column;\n margin-bottom: ", "px;\n "], ["\n flex-direction: column;\n margin-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8111
8077
|
});
|
|
8112
8078
|
var StyledLinkSection = styled$2("div", {
|
|
8113
8079
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8138,7 +8104,7 @@ var StyledBottomSection = styled$2("div", {
|
|
|
8138
8104
|
var spaces = getSpaces(props);
|
|
8139
8105
|
return css$2(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n margin-top: ", "px;\n\n ", "\n "], ["\n margin-top: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && css$2(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n flex-direction: column-reverse;\n margin-top: ", "px;\n "], ["\n flex-direction: column-reverse;\n margin-top: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8140
8106
|
});
|
|
8141
|
-
var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$
|
|
8107
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8142
8108
|
|
|
8143
8109
|
/**
|
|
8144
8110
|
* WARNING: Don't import this directly.
|
|
@@ -14405,7 +14371,7 @@ styled$2("div", {
|
|
|
14405
14371
|
});
|
|
14406
14372
|
var StyledHeaderButton = styled$2(Button, {
|
|
14407
14373
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14408
|
-
})(templateObject_7$
|
|
14374
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14409
14375
|
var _a, _b, _c, _d;
|
|
14410
14376
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
|
|
14411
14377
|
var mode = ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
|
|
@@ -14416,18 +14382,18 @@ var StyledHeaderButton = styled$2(Button, {
|
|
|
14416
14382
|
var invertedNarrowButtonStyles = function (props) {
|
|
14417
14383
|
var _a, _b, _c, _d;
|
|
14418
14384
|
var semanticColors = getSemanticColors(props);
|
|
14419
|
-
return css$2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "], ["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
|
|
14385
|
+
return css$2(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "], ["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
|
|
14420
14386
|
};
|
|
14421
14387
|
var StyledNarrowIconButton = styled$2(Button, {
|
|
14422
14388
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14423
|
-
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14389
|
+
})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14424
14390
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14425
|
-
return css$2(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
14391
|
+
return css$2(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
14426
14392
|
});
|
|
14427
14393
|
var invertedWideButtonStyles = function (props) {
|
|
14428
14394
|
var _a, _b;
|
|
14429
14395
|
var semanticColors = getSemanticColors(props);
|
|
14430
|
-
return css$2(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
|
|
14396
|
+
return css$2(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
|
|
14431
14397
|
};
|
|
14432
14398
|
var StyledWideIconButton = styled$2(Button, {
|
|
14433
14399
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
@@ -14461,7 +14427,7 @@ var StyledTitleTagWrapper = styled$2("div", {
|
|
|
14461
14427
|
var spaces = getSpaces(props);
|
|
14462
14428
|
return "\n display: flex;\n align-items: center;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n p {\n white-space: nowrap;\n }\n ");
|
|
14463
14429
|
});
|
|
14464
|
-
var StyledTag = styled$2(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n margin:
|
|
14430
|
+
var StyledTag$1 = styled$2(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
|
|
14465
14431
|
var StyledPrimaryNavContainer = styled$2("div", {
|
|
14466
14432
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14467
14433
|
})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"])), function (props) {
|
|
@@ -14530,7 +14496,7 @@ var StyledNarrowButton = styled$2(Button, {
|
|
|
14530
14496
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14531
14497
|
return css$2(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14532
14498
|
});
|
|
14533
|
-
var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$
|
|
14499
|
+
var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
|
|
14534
14500
|
|
|
14535
14501
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
14536
14502
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14553,30 +14519,46 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
14553
14519
|
};
|
|
14554
14520
|
var PrimaryNavItem = styled$2(Button, {
|
|
14555
14521
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14556
|
-
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items:
|
|
14522
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"])), function (props) {
|
|
14523
|
+
var _a;
|
|
14557
14524
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14558
14525
|
var spaces = getSpaces(props);
|
|
14559
|
-
var
|
|
14560
|
-
|
|
14561
|
-
?
|
|
14562
|
-
:
|
|
14526
|
+
var semanticColors = getSemanticColors(props);
|
|
14527
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14528
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14529
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14530
|
+
return css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n gap: ", "px;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n box-shadow: none;\n\n & > span {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "], ["\n gap: ", "px;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n box-shadow: none;\n\n & > span {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, ChevronDefaultColor, hasInvertedStyle
|
|
14531
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14532
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14533
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
|
|
14534
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && NarrowPrimaryNavItem(props));
|
|
14563
14535
|
});
|
|
14564
14536
|
var WideStyledLabel = function (props) {
|
|
14565
|
-
var _a, _b;
|
|
14566
|
-
var hasInvertedStyle = props.hasInvertedStyle, active = props.active;
|
|
14567
|
-
var
|
|
14537
|
+
var _a, _b, _c;
|
|
14538
|
+
var hasInvertedStyle = props.hasInvertedStyle, active = props.active, _d = props.itemType, itemType = _d === void 0 ? "text" : _d;
|
|
14539
|
+
var semanticColors = getSemanticColors(props);
|
|
14568
14540
|
var activeBorderColor = hasInvertedStyle
|
|
14569
|
-
? (_a =
|
|
14570
|
-
: (_b =
|
|
14541
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
|
|
14542
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
14571
14543
|
var inactiveBorderColor = hasInvertedStyle
|
|
14572
|
-
?
|
|
14573
|
-
:
|
|
14574
|
-
|
|
14544
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderOnFill
|
|
14545
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary;
|
|
14546
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14547
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14548
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14549
|
+
var ChevronOpenColor = hasInvertedStyle
|
|
14550
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentPrimaryInverse
|
|
14551
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
|
|
14552
|
+
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active && itemType === "text"
|
|
14553
|
+
? activeBorderColor
|
|
14554
|
+
: "transparent", active ? ChevronOpenColor : ChevronDefaultColor, active ? activeBorderColor : inactiveBorderColor);
|
|
14575
14555
|
};
|
|
14556
|
+
var StyledTag = styled$2(Tag)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"));
|
|
14576
14557
|
var StyledLabel = styled$2("span", {
|
|
14577
14558
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14578
|
-
})(
|
|
14559
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeader("m"), function (props) {
|
|
14579
14560
|
var hasInvertedStyle = props.hasInvertedStyle, active = props.active, isNarrow = props.isNarrow;
|
|
14561
|
+
var spaces = getSpaces(props);
|
|
14580
14562
|
var colors = getSemanticColors(props);
|
|
14581
14563
|
var activeColor = hasInvertedStyle
|
|
14582
14564
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
@@ -14584,9 +14566,44 @@ var StyledLabel = styled$2("span", {
|
|
|
14584
14566
|
var inactiveColor = hasInvertedStyle
|
|
14585
14567
|
? colors === null || colors === void 0 ? void 0 : colors.base.textSecondaryInverse
|
|
14586
14568
|
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
14587
|
-
return css(
|
|
14569
|
+
return css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, !isNarrow && WideStyledLabel(props));
|
|
14570
|
+
});
|
|
14571
|
+
var StyledAccordion$1 = styled$2(Accordion, {
|
|
14572
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14573
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"], ["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"])), fontBodySemiboldM, fontBodyS$1, function (props) {
|
|
14574
|
+
var _a, _b, _c, _d;
|
|
14575
|
+
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14576
|
+
var spaces = getSpaces(props);
|
|
14577
|
+
var semanticColors = getSemanticColors(props);
|
|
14578
|
+
var textDefaultColor = hasInvertedStyle
|
|
14579
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14580
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary;
|
|
14581
|
+
var textOpenColor = hasInvertedStyle
|
|
14582
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14583
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary;
|
|
14584
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14585
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14586
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14587
|
+
var ChevronOpenColor = hasInvertedStyle
|
|
14588
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
|
|
14589
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
|
|
14590
|
+
var isNarrowStyles = function () { return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
14591
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14592
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
|
|
14593
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n .MuiAccordionSummary-expandIconWrapper {\n margin-top: ", "px !important;\n }\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n padding: ", "px ", "px ", "px\n ", "px;\n width: 100%;\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n .primary-text {\n color: ", " !important;\n }\n\n &:hover {\n padding: ", "px 0 ", "px\n calc(34px - ", "px) !important;\n\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "], ["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n .MuiAccordionSummary-expandIconWrapper {\n margin-top: ", "px !important;\n }\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n padding: ", "px ", "px ", "px\n ", "px;\n width: 100%;\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n .primary-text {\n color: ", " !important;\n }\n\n &:hover {\n padding: ", "px 0 ", "px\n calc(34px - ", "px) !important;\n\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, spaces === null || spaces === void 0 ? void 0 : spaces.s, ChevronDefaultColor, textOpenColor, ChevronOpenColor, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_b = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _b !== void 0 ? _b : 0) + ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _c !== void 0 ? _c : 0), hasInvertedStyle
|
|
14594
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14595
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary, hasInvertedStyle
|
|
14596
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14597
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14598
|
+
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
|
|
14599
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
|
|
14600
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14601
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xs, hasInvertedStyle
|
|
14602
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14603
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14588
14604
|
});
|
|
14589
|
-
var
|
|
14605
|
+
var StyledSubItem$1 = styled$2(MenuItem)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
|
|
14606
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
14590
14607
|
|
|
14591
14608
|
var doNotForwardProps$7 = ["isNarrow"];
|
|
14592
14609
|
var NarrowStyledSection = function () {
|
|
@@ -14604,14 +14621,65 @@ var templateObject_1$i, templateObject_2$a, templateObject_3$5;
|
|
|
14604
14621
|
|
|
14605
14622
|
function NavigationHeaderPrimaryNav(_a) {
|
|
14606
14623
|
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
14624
|
+
var theme = useTheme$4();
|
|
14625
|
+
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
14626
|
+
var buttonRef = useRef(null);
|
|
14627
|
+
var _c = useState("100%"), menuWidth = _c[0], setMenuWidth = _c[1];
|
|
14628
|
+
var open = Boolean(anchorEl);
|
|
14629
|
+
function onClose() {
|
|
14630
|
+
setAnchorEl(null);
|
|
14631
|
+
}
|
|
14632
|
+
useEffect(function () {
|
|
14633
|
+
var button = buttonRef.current;
|
|
14634
|
+
if (!button) {
|
|
14635
|
+
return;
|
|
14636
|
+
}
|
|
14637
|
+
setMenuWidth(button.offsetWidth);
|
|
14638
|
+
}, []);
|
|
14607
14639
|
return (jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
|
|
14640
|
+
var _a, _b;
|
|
14608
14641
|
var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["key", "label", "tag", "tagColor"]);
|
|
14609
14642
|
var isActive = key === value;
|
|
14610
|
-
|
|
14611
|
-
|
|
14643
|
+
if (item.itemType === "dropdown" && !isNarrow) {
|
|
14644
|
+
var dropdownItem = item;
|
|
14645
|
+
return (jsxs(Fragment$1, { children: [jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
|
|
14646
|
+
setAnchorEl(e.currentTarget);
|
|
14647
|
+
onChange(key);
|
|
14648
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { itemType: item.itemType, active: open, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
|
|
14649
|
+
paper: {
|
|
14650
|
+
style: {
|
|
14651
|
+
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
14652
|
+
},
|
|
14653
|
+
},
|
|
14654
|
+
}, anchorOrigin: {
|
|
14655
|
+
horizontal: "left",
|
|
14656
|
+
vertical: "bottom",
|
|
14657
|
+
}, transformOrigin: {
|
|
14658
|
+
horizontal: "left",
|
|
14659
|
+
vertical: "top",
|
|
14660
|
+
}, children: dropdownItem.items.map(function (subItem) {
|
|
14661
|
+
var subLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14662
|
+
return (jsx(MenuItem, __assign({ onClick: function () {
|
|
14663
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14664
|
+
onClose();
|
|
14665
|
+
}, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
14666
|
+
}) })] }, key));
|
|
14667
|
+
}
|
|
14668
|
+
if (item.itemType === "dropdown" && isNarrow) {
|
|
14669
|
+
var dropdownItem = item;
|
|
14670
|
+
return (jsxs(StyledAccordion$1, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: dropdownItem.items.map(function (subItem) {
|
|
14671
|
+
var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14672
|
+
return (jsx(StyledSubItem$1, __assign({ onClick: function () {
|
|
14673
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14674
|
+
onClose();
|
|
14675
|
+
} }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
|
|
14676
|
+
}) })] }, "".concat(item.label, "-dropdown")));
|
|
14677
|
+
}
|
|
14678
|
+
return (jsx(PrimaryNavItem, __assign({}, rest, { sdsStyle: "minimal", active: isActive, onClick: function (e) {
|
|
14679
|
+
var _a, _b;
|
|
14612
14680
|
onChange(key);
|
|
14613
|
-
(_a = item.onClick) === null ||
|
|
14614
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children:
|
|
14681
|
+
(_b = (_a = item).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
14682
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, "tag" in item && (jsx(StyledTag, { label: tag, color: tagColor, hover: false }))] }) }), key));
|
|
14615
14683
|
}) }));
|
|
14616
14684
|
}
|
|
14617
14685
|
|
|
@@ -14620,13 +14688,13 @@ var NarrowStyledTextItem = function (props) {
|
|
|
14620
14688
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14621
14689
|
var semanticColors = getSemanticColors(props);
|
|
14622
14690
|
var spaces = getSpaces(props);
|
|
14623
|
-
return css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "], ["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
|
|
14691
|
+
return css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n min-height: 44px;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "], ["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n min-height: 44px;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
|
|
14624
14692
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14625
14693
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14626
14694
|
};
|
|
14627
14695
|
var StyledTextItem = styled$2(Button, {
|
|
14628
14696
|
shouldForwardProp: function (prop) { return !ButtonDoNotForwardProps.includes(prop); },
|
|
14629
|
-
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n
|
|
14697
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"], ["\n ", "\n\n background: none;\n justify-content: flex-start;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
14630
14698
|
var _a, _b;
|
|
14631
14699
|
var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
|
|
14632
14700
|
var semanticColors = getSemanticColors(props);
|
|
@@ -14672,22 +14740,25 @@ var StyledAccordion = styled$2(Accordion, {
|
|
|
14672
14740
|
var isNarrowStyles = function () { return css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
14673
14741
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14674
14742
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
|
|
14675
|
-
return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .
|
|
14743
|
+
return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .primary-text {\n color: ", " !important;\n\n &:hover {\n color: ", " !important;\n }\n }\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n &:hover {\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "], ["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .primary-text {\n color: ", " !important;\n\n &:hover {\n color: ", " !important;\n }\n }\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n &:hover {\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, ChevronDefaultColor, textOpenColor, ChevronOpenColor, hasInvertedStyle
|
|
14676
14744
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14677
14745
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14678
14746
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse
|
|
14679
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(),
|
|
14747
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), hasInvertedStyle
|
|
14680
14748
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14681
14749
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14682
14750
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14751
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
|
|
14752
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14683
14753
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14684
14754
|
});
|
|
14685
14755
|
var StyledSubItem = styled$2(MenuItem)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
|
|
14686
14756
|
var templateObject_1$h, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7;
|
|
14687
14757
|
|
|
14688
|
-
function
|
|
14689
|
-
var
|
|
14758
|
+
function NavigationHeaderSecondaryNav(_a) {
|
|
14759
|
+
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14690
14760
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
14761
|
+
var theme = useTheme$4();
|
|
14691
14762
|
var open = Boolean(anchorEl);
|
|
14692
14763
|
function onClose() {
|
|
14693
14764
|
setAnchorEl(null);
|
|
@@ -14701,29 +14772,44 @@ function SecondaryNavItem(_a) {
|
|
|
14701
14772
|
}
|
|
14702
14773
|
setMenuWidth(button.offsetWidth);
|
|
14703
14774
|
}, []);
|
|
14704
|
-
return (jsxs(Fragment$1, { children: [item.itemType === "text" && (jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxs(Fragment, { children: [jsxs(StyledTextItem, __assign({ sdsStyle: "minimal", ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { onClick: function (event) {
|
|
14705
|
-
var _a;
|
|
14706
|
-
setAnchorEl(event.currentTarget);
|
|
14707
|
-
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
14708
|
-
}, children: [jsx("span", { children: item.label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) {
|
|
14709
|
-
var label = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14710
|
-
return (jsx(MenuItem, __assign({ onClick: function () {
|
|
14711
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14712
|
-
onClose();
|
|
14713
|
-
} }, subItemRest, { children: label }), label));
|
|
14714
|
-
}) })] })), item.itemType === "dropdown" && isNarrow && (jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) {
|
|
14715
|
-
var label = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14716
|
-
return (jsx(StyledSubItem, __assign({ onClick: function () {
|
|
14717
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14718
|
-
onClose();
|
|
14719
|
-
}, sx: { width: menuWidth } }, accordionSubItemRest, { children: label }), label));
|
|
14720
|
-
}) })] }))] }, item.label));
|
|
14721
|
-
}
|
|
14722
|
-
function NavigationHeaderSecondaryNav(_a) {
|
|
14723
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14724
14775
|
return (jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) {
|
|
14776
|
+
var _a, _b;
|
|
14725
14777
|
var itemType = item.itemType, label = item.label, rest = __rest(item, ["itemType", "label"]);
|
|
14726
|
-
|
|
14778
|
+
if (itemType === "dropdown" && !isNarrow) {
|
|
14779
|
+
return (jsxs(Fragment$1, { children: [jsxs(StyledTextItem, __assign({}, rest, { ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", onClick: function (event) {
|
|
14780
|
+
var _a;
|
|
14781
|
+
setAnchorEl(event.currentTarget);
|
|
14782
|
+
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
14783
|
+
}, children: [jsx("span", { children: label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
|
|
14784
|
+
paper: {
|
|
14785
|
+
style: {
|
|
14786
|
+
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
14787
|
+
},
|
|
14788
|
+
},
|
|
14789
|
+
}, anchorOrigin: {
|
|
14790
|
+
horizontal: "left",
|
|
14791
|
+
vertical: "bottom",
|
|
14792
|
+
}, transformOrigin: {
|
|
14793
|
+
horizontal: "left",
|
|
14794
|
+
vertical: "top",
|
|
14795
|
+
}, children: item.items.map(function (subItem) {
|
|
14796
|
+
var menuLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14797
|
+
return (jsx(MenuItem, __assign({ onClick: function (event) {
|
|
14798
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
14799
|
+
onClose();
|
|
14800
|
+
}, sx: { minWidth: menuWidth } }, subItemRest, { children: menuLabel }), "menu-item-".concat(menuLabel)));
|
|
14801
|
+
}) })] }, "".concat(label, "-dropdown")));
|
|
14802
|
+
}
|
|
14803
|
+
if (itemType === "dropdown" && isNarrow) {
|
|
14804
|
+
return (jsxs(StyledAccordion, { id: "".concat(label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) {
|
|
14805
|
+
var accordionLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14806
|
+
return (jsx(StyledSubItem, __assign({ onClick: function (event) {
|
|
14807
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
14808
|
+
onClose();
|
|
14809
|
+
} }, accordionSubItemRest, { children: accordionLabel }), "accordion-item-".concat(accordionLabel)));
|
|
14810
|
+
}) })] }, "".concat(label, "-dropdown")));
|
|
14811
|
+
}
|
|
14812
|
+
return (jsx(StyledTextItem, __assign({}, rest, { onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", children: item.label }), "".concat(label, "-").concat(itemType)));
|
|
14727
14813
|
}) }));
|
|
14728
14814
|
}
|
|
14729
14815
|
|
|
@@ -14818,7 +14904,7 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14818
14904
|
return (showSearch && (jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, searchProps))));
|
|
14819
14905
|
};
|
|
14820
14906
|
var renderLogoNode = function () {
|
|
14821
|
-
var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsx(StyledLogoWrapper, { children: logo }), jsxs(StyledTitleTagWrapper, { children: [title && jsx("p", { children: title }), tag && jsx(StyledTag, { color: tagColor, label: tag, hover: false })] })] }));
|
|
14907
|
+
var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsx(StyledLogoWrapper, { children: logo }), jsxs(StyledTitleTagWrapper, { children: [title && jsx("p", { children: title }), tag && jsx(StyledTag$1, { color: tagColor, label: tag, hover: false })] })] }));
|
|
14822
14908
|
if (logoLinkComponent || logoUrl) {
|
|
14823
14909
|
logoNode = (jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: dimensions.isNarrow, children: logoNode })));
|
|
14824
14910
|
}
|
|
@@ -15750,4 +15836,4 @@ var TooltipTableContent = function (props) {
|
|
|
15750
15836
|
return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
|
|
15751
15837
|
};
|
|
15752
15838
|
|
|
15753
|
-
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
|
|
15839
|
+
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, createAppThemeBorders, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
|