@czi-sds/components 22.11.0 → 22.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +5 -4
- package/dist/index.esm.js +5 -4
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -6427,6 +6427,7 @@ var doNotForwardProps$s = [
|
|
|
6427
6427
|
"shouldPutAColonAfterLabel",
|
|
6428
6428
|
"value",
|
|
6429
6429
|
"sdsStyle",
|
|
6430
|
+
"multiple",
|
|
6430
6431
|
];
|
|
6431
6432
|
var intentToColor$2 = {
|
|
6432
6433
|
default: "accent",
|
|
@@ -7292,9 +7293,10 @@ var StyledCard = styled__default.default(material.Card, {
|
|
|
7292
7293
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7293
7294
|
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7294
7295
|
var _a, _b, _c, _d;
|
|
7295
|
-
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType;
|
|
7296
|
+
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType, _k = props.clickableCard, clickableCard = _k === void 0 ? false : _k;
|
|
7296
7297
|
var semanticColors = getSemanticColors(props);
|
|
7297
7298
|
var corners = getCorners(props);
|
|
7299
|
+
var shadows = getShadows(props);
|
|
7298
7300
|
var flexDirection = sdsType === "wide" && visualElementType === "image"
|
|
7299
7301
|
? imagePosition === "left"
|
|
7300
7302
|
? "row"
|
|
@@ -7305,7 +7307,7 @@ var StyledCard = styled__default.default(material.Card, {
|
|
|
7305
7307
|
var showDecorativeBorder = visualElementType === "image"
|
|
7306
7308
|
? boundingBox && decorativeBorder && imagePadding
|
|
7307
7309
|
: boundingBox && decorativeBorder;
|
|
7308
|
-
return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n
|
|
7310
|
+
return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, clickableCard ? shadows === null || shadows === void 0 ? void 0 : shadows.l : shadows === null || shadows === void 0 ? void 0 : shadows.none, boundingBox && react.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
|
|
7309
7311
|
showDecorativeBorder && react.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-left: 4px solid ", ";\n "], ["\n border-left: 4px solid ", ";\n "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
|
|
7310
7312
|
showDecorativeBorder && react.css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
7311
7313
|
});
|
|
@@ -7315,7 +7317,6 @@ var StyledCardActionArea = styled__default.default(Button, {
|
|
|
7315
7317
|
var _a, _b;
|
|
7316
7318
|
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
7317
7319
|
var semanticColors = getSemanticColors(props);
|
|
7318
|
-
var shadows = getShadows(props);
|
|
7319
7320
|
var flexDirection = cardSdsType === "wide"
|
|
7320
7321
|
? imagePosition === "left"
|
|
7321
7322
|
? "row"
|
|
@@ -7323,7 +7324,7 @@ var StyledCardActionArea = styled__default.default(Button, {
|
|
|
7323
7324
|
: visualElementType === "image"
|
|
7324
7325
|
? "column"
|
|
7325
7326
|
: "row";
|
|
7326
|
-
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: auto;\n text-align: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n
|
|
7327
|
+
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: auto;\n text-align: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n }\n ");
|
|
7327
7328
|
});
|
|
7328
7329
|
var StyledIconMediaWrapper = styled__default.default("div", {
|
|
7329
7330
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
package/dist/index.esm.js
CHANGED
|
@@ -6404,6 +6404,7 @@ var doNotForwardProps$s = [
|
|
|
6404
6404
|
"shouldPutAColonAfterLabel",
|
|
6405
6405
|
"value",
|
|
6406
6406
|
"sdsStyle",
|
|
6407
|
+
"multiple",
|
|
6407
6408
|
];
|
|
6408
6409
|
var intentToColor$2 = {
|
|
6409
6410
|
default: "accent",
|
|
@@ -7269,9 +7270,10 @@ var StyledCard = styled$2(Card, {
|
|
|
7269
7270
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7270
7271
|
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7271
7272
|
var _a, _b, _c, _d;
|
|
7272
|
-
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType;
|
|
7273
|
+
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType, _k = props.clickableCard, clickableCard = _k === void 0 ? false : _k;
|
|
7273
7274
|
var semanticColors = getSemanticColors(props);
|
|
7274
7275
|
var corners = getCorners(props);
|
|
7276
|
+
var shadows = getShadows(props);
|
|
7275
7277
|
var flexDirection = sdsType === "wide" && visualElementType === "image"
|
|
7276
7278
|
? imagePosition === "left"
|
|
7277
7279
|
? "row"
|
|
@@ -7282,7 +7284,7 @@ var StyledCard = styled$2(Card, {
|
|
|
7282
7284
|
var showDecorativeBorder = visualElementType === "image"
|
|
7283
7285
|
? boundingBox && decorativeBorder && imagePadding
|
|
7284
7286
|
: boundingBox && decorativeBorder;
|
|
7285
|
-
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n
|
|
7287
|
+
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, clickableCard ? shadows === null || shadows === void 0 ? void 0 : shadows.l : shadows === null || shadows === void 0 ? void 0 : shadows.none, boundingBox && css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
|
|
7286
7288
|
showDecorativeBorder && css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-left: 4px solid ", ";\n "], ["\n border-left: 4px solid ", ";\n "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
|
|
7287
7289
|
showDecorativeBorder && css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
7288
7290
|
});
|
|
@@ -7292,7 +7294,6 @@ var StyledCardActionArea = styled$2(Button, {
|
|
|
7292
7294
|
var _a, _b;
|
|
7293
7295
|
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
7294
7296
|
var semanticColors = getSemanticColors(props);
|
|
7295
|
-
var shadows = getShadows(props);
|
|
7296
7297
|
var flexDirection = cardSdsType === "wide"
|
|
7297
7298
|
? imagePosition === "left"
|
|
7298
7299
|
? "row"
|
|
@@ -7300,7 +7301,7 @@ var StyledCardActionArea = styled$2(Button, {
|
|
|
7300
7301
|
: visualElementType === "image"
|
|
7301
7302
|
? "column"
|
|
7302
7303
|
: "row";
|
|
7303
|
-
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: auto;\n text-align: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n
|
|
7304
|
+
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n padding: 0;\n margin: 0;\n overflow: auto;\n text-align: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n }\n ");
|
|
7304
7305
|
});
|
|
7305
7306
|
var StyledIconMediaWrapper = styled$2("div", {
|
|
7306
7307
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|