@czi-sds/components 22.11.1 → 22.11.3

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 CHANGED
@@ -7293,9 +7293,10 @@ var StyledCard = styled__default.default(material.Card, {
7293
7293
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
7294
7294
  })(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7295
7295
  var _a, _b, _c, _d;
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;
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;
7297
7297
  var semanticColors = getSemanticColors(props);
7298
7298
  var corners = getCorners(props);
7299
+ var shadows = getShadows(props);
7299
7300
  var flexDirection = sdsType === "wide" && visualElementType === "image"
7300
7301
  ? imagePosition === "left"
7301
7302
  ? "row"
@@ -7306,7 +7307,7 @@ var StyledCard = styled__default.default(material.Card, {
7306
7307
  var showDecorativeBorder = visualElementType === "image"
7307
7308
  ? boundingBox && decorativeBorder && imagePadding
7308
7309
  : boundingBox && decorativeBorder;
7309
- 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 box-shadow: none;\n overflow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, 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" &&
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" &&
7310
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" &&
7311
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));
7312
7313
  });
@@ -7316,7 +7317,6 @@ var StyledCardActionArea = styled__default.default(Button, {
7316
7317
  var _a, _b;
7317
7318
  var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
7318
7319
  var semanticColors = getSemanticColors(props);
7319
- var shadows = getShadows(props);
7320
7320
  var flexDirection = cardSdsType === "wide"
7321
7321
  ? imagePosition === "left"
7322
7322
  ? "row"
@@ -7324,7 +7324,7 @@ var StyledCardActionArea = styled__default.default(Button, {
7324
7324
  : visualElementType === "image"
7325
7325
  ? "column"
7326
7326
  : "row";
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 box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n }\n ");
7327
+ return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n width: 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 ");
7328
7328
  });
7329
7329
  var StyledIconMediaWrapper = styled__default.default("div", {
7330
7330
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
package/dist/index.esm.js CHANGED
@@ -7270,9 +7270,10 @@ var StyledCard = styled$2(Card, {
7270
7270
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
7271
7271
  })(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7272
7272
  var _a, _b, _c, _d;
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;
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;
7274
7274
  var semanticColors = getSemanticColors(props);
7275
7275
  var corners = getCorners(props);
7276
+ var shadows = getShadows(props);
7276
7277
  var flexDirection = sdsType === "wide" && visualElementType === "image"
7277
7278
  ? imagePosition === "left"
7278
7279
  ? "row"
@@ -7283,7 +7284,7 @@ var StyledCard = styled$2(Card, {
7283
7284
  var showDecorativeBorder = visualElementType === "image"
7284
7285
  ? boundingBox && decorativeBorder && imagePadding
7285
7286
  : boundingBox && decorativeBorder;
7286
- return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, 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" &&
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" &&
7287
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" &&
7288
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));
7289
7290
  });
@@ -7293,7 +7294,6 @@ var StyledCardActionArea = styled$2(Button, {
7293
7294
  var _a, _b;
7294
7295
  var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
7295
7296
  var semanticColors = getSemanticColors(props);
7296
- var shadows = getShadows(props);
7297
7297
  var flexDirection = cardSdsType === "wide"
7298
7298
  ? imagePosition === "left"
7299
7299
  ? "row"
@@ -7301,7 +7301,7 @@ var StyledCardActionArea = styled$2(Button, {
7301
7301
  : visualElementType === "image"
7302
7302
  ? "column"
7303
7303
  : "row";
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 box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n }\n ");
7304
+ return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n width: 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 ");
7305
7305
  });
7306
7306
  var StyledIconMediaWrapper = styled$2("div", {
7307
7307
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },