@procore/core-react 12.21.2-cdn.0 → 12.22.0

package/dist/Thumbnail/Thumbnail.styles.js

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Typography } from '../Typography';
-import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
+import { getTypographyIntent, Typography, typographyWeights } from '../Typography';
 import { borderRadius } from '../_styles/borderRadius';
 import { colors } from '../_styles/colors';
 import { getEllipsis, getFocus } from '../_styles/mixins';
@@ -14,49 +13,49 @@ var tickSize = 24;
 var rowLayoutCaptionWidth = 288;
 var multilineCaptionMaxHeight = spacing.lg * 2;
 var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;letter-spacing:0.4px;font-weight:500;", " ", " ", " ", ""], colors.gray15, function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'row' ? "\n        align-items: center;\n        margin-left: ".concat(spacing.sm, "px;\n        width: ").concat(rowLayoutCaptionWidth, "px;\n      ") : '';
+  var $layout = _ref.$layout;
+  return $layout === 'row' && css(["align-items:center;margin-left:", "px;width:", "px;"], spacing.sm, rowLayoutCaptionWidth);
 }, function (_ref2) {
-  var layout = _ref2.layout;
-  return layout === 'column' ? "\n        margin-top: ".concat(spacing.xs / 2, "px;\n        width: ").concat(thumbnailSizeLg, "px;\n      ") : '';
+  var $layout = _ref2.$layout;
+  return $layout === 'column' && css(["margin-top:", "px;width:", "px;"], spacing.xs / 2, thumbnailSizeLg);
 }, function (_ref3) {
-  var error = _ref3.error;
-  return error ? "color: ".concat(colors.red50, ";") : '';
+  var $error = _ref3.$error;
+  return $error && css(["color:", ";"], colors.red50);
 }, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? "color: ".concat(colors.gray70, ";") : '';
+  var $disabled = _ref4.$disabled;
+  return $disabled && css(["color:", ";"], colors.gray70);
 });
 export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultilineCaption",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-0"
-})(["", " display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
+  componentId: "core-12_22_0__sc-195f70c-0"
+})(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
 export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledCaptionText",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-1"
+  componentId: "core-12_22_0__sc-195f70c-1"
 })(["width:100%;"]);
 export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderCaption",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-2"
+  componentId: "core-12_22_0__sc-195f70c-2"
 })(["", ""], captionBase);
 export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSingleLineCaption",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-3"
+  componentId: "core-12_22_0__sc-195f70c-3"
 })(["display:flex;", ""], captionBase);
 export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionBody",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-4"
+  componentId: "core-12_22_0__sc-195f70c-4"
 })(["", ""], getEllipsis);
 export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionEnding",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-5"
+  componentId: "core-12_22_0__sc-195f70c-5"
 })(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
 export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledLabelText",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-6"
+  componentId: "core-12_22_0__sc-195f70c-6"
 })(["", ""], getEllipsis());
 export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
   displayName: "StyledThumbnailFigCaption",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-7"
+  componentId: "core-12_22_0__sc-195f70c-7"
 })(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
   var _ref5$$color = _ref5.$color,
     $color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
@@ -64,113 +63,113 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
 }, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-8"
+  componentId: "core-12_22_0__sc-195f70c-8"
 })(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
 var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
-  var clickable = _ref6.clickable;
-  return clickable ? 'cursor: pointer;' : '';
+  var $clickable = _ref6.$clickable;
+  return $clickable && css(["cursor:pointer;"]);
 }, function (_ref7) {
-  var selected = _ref7.selected;
-  return selected ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 1;\n          transform: scale(1);\n        }\n      ") : '';
+  var $selected = _ref7.$selected;
+  return $selected && css(["", "{opacity:1;transform:scale(1);}"], StyledTickIcon);
 }, getFocus(), function (_ref8) {
-  var focused = _ref8.focused;
-  return focused && getFocus();
+  var $focused = _ref8.$focused;
+  return $focused && getFocus();
 }, function (_ref9) {
-  var disabled = _ref9.disabled,
-    clickable = _ref9.clickable;
-  return disabled && clickable ? 'cursor: not-allowed;' : '';
+  var $disabled = _ref9.$disabled,
+    $clickable = _ref9.$clickable;
+  return $disabled && $clickable && css(["cursor:not-allowed;"]);
 }, function (_ref0) {
-  var size = _ref0.size;
-  var sizeInPx = "".concat(size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
-  return "\n      width: ".concat(sizeInPx, ";\n      height: ").concat(sizeInPx, ";\n    ");
+  var $size = _ref0.$size;
+  var sizeInPx = "".concat($size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
+  return css(["width:", ";height:", ";"], sizeInPx, sizeInPx);
 });
 export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
   displayName: "StyledTickIcon",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-9"
+  componentId: "core-12_22_0__sc-195f70c-9"
 })(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
-  var selected = _ref1.selected;
-  return selected ? "\n        opacity: 1;\n        transform: scale(1);\n      " : '';
+  var $selected = _ref1.$selected;
+  return $selected && css(["opacity:1;transform:scale(1);"]);
 }, function (_ref10) {
-  var size = _ref10.size;
-  return size === 'sm' ? "\n        top: 50%;\n        left: 50%;\n        margin-top: ".concat(-tickSize / 2, "px;\n        margin-left: ").concat(-tickSize / 2, "px;\n      ") : '';
+  var $size = _ref10.$size;
+  return $size === 'sm' && css(["top:50%;left:50%;margin-top:", "px;margin-left:", "px;"], -tickSize / 2, -tickSize / 2);
 });
 export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
   displayName: "StyledFileIcon",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-10"
+  componentId: "core-12_22_0__sc-195f70c-10"
 })(["width:36.5%;height:auto;"]);
 export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailPreview",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-11"
+  componentId: "core-12_22_0__sc-195f70c-11"
 })(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
   var $bgImage = _ref11.$bgImage;
   return css(["background-image:url(", ");"], $bgImage);
 });
 export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailOverlay",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-12"
+  componentId: "core-12_22_0__sc-195f70c-12"
 })(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
 var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
 var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
 export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
   displayName: "StyledImageThumbnailImage",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-13"
+  componentId: "core-12_22_0__sc-195f70c-13"
 })([""]);
 export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnail",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-14"
-})(["", " flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
-  var disabled = _ref12.disabled;
-  return disabled ? "\n        &,\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(whiteOverlay, "\n          }\n        }\n        ").concat(StyledImageThumbnailPreview, ",\n        ").concat(StyledTickIcon, ",\n        ").concat(StyledImageThumbnailImage, " {\n          filter: saturate(0);\n        }\n        ").concat(StyledFileIcon, " {\n          filter: saturate(0);\n          z-index: -1;\n        }\n      ") : '';
+  componentId: "core-12_22_0__sc-195f70c-14"
+})(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
+  var $disabled = _ref12.$disabled;
+  return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
 }, function (_ref13) {
-  var selected = _ref13.selected,
-    focused = _ref13.focused,
-    disabled = _ref13.disabled;
-  return focused && disabled ? selected ? "\n          ".concat(StyledTickIcon, " {\n            z-index: 0;\n          }\n        ") : "\n          ".concat(StyledTickIcon, " {\n            z-index: 1;\n          }\n        ") : '';
+  var $selected = _ref13.$selected,
+    $focused = _ref13.$focused,
+    $disabled = _ref13.$disabled;
+  return $focused && $disabled && css(["", "{z-index:", ";}"], StyledTickIcon, $selected ? 0 : 1);
 }, function (_ref14) {
-  var selected = _ref14.selected,
-    focused = _ref14.focused;
-  return selected && focused ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 1;\n        }\n      ") : '';
+  var $selected = _ref14.$selected,
+    $focused = _ref14.$focused;
+  return $selected && $focused && css(["", "{z-index:1;}"], StyledTickIcon);
 }, function (_ref15) {
-  var selected = _ref15.selected,
-    focused = _ref15.focused,
-    disabled = _ref15.disabled;
-  return selected && focused && disabled ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 0;\n        }\n      ") : '';
+  var $selected = _ref15.$selected,
+    $focused = _ref15.$focused,
+    $disabled = _ref15.$disabled;
+  return $selected && $focused && $disabled && css(["", "{z-index:0;}"], StyledTickIcon);
 }, function (_ref16) {
-  var focused = _ref16.focused,
-    disabled = _ref16.disabled;
-  return focused && !disabled ? "\n        ".concat(StyledImageThumbnailOverlay, " {\n          display: block;\n        }\n      ") : '';
+  var $focused = _ref16.$focused,
+    $disabled = _ref16.$disabled;
+  return $focused && !$disabled && css(["", "{display:block;}"], StyledImageThumbnailOverlay);
 }, function (_ref17) {
-  var clickable = _ref17.clickable,
-    disabled = _ref17.disabled;
-  return clickable && !disabled ? "\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(blackOverlay, "\n          }\n        }\n      ") : '';
+  var $clickable = _ref17.$clickable,
+    $disabled = _ref17.$disabled;
+  return $clickable && !$disabled && css(["&:hover{", "{display:block;", "}}"], StyledImageThumbnailOverlay, blackOverlay);
 });
 export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailWrapper",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-15"
+  componentId: "core-12_22_0__sc-195f70c-15"
 })(["display:flex;", " ", ""], function (_ref18) {
-  var size = _ref18.size;
-  return size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
+  var $size = _ref18.$size;
+  return $size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
 }, function (_ref19) {
-  var layout = _ref19.layout;
-  var isRowLayout = layout === 'row';
-  return isRowLayout ? "\n        flex-direction: row;\n        aligh-items: center;\n      " : "\n        flex-direction: column;\n        aligh-items: flex-start;\n      ";
+  var $layout = _ref19.$layout;
+  var isRowLayout = $layout === 'row';
+  return isRowLayout ? css(["flex-direction:row;align-items:center;"]) : css(["flex-direction:column;align-items:flex-start;"]);
 });
 export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderThumbnail",
-  componentId: "core-12_21_2-cdn_0__sc-195f70c-16"
+  componentId: "core-12_22_0__sc-195f70c-16"
 })(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
-  var clickable = _ref20.clickable;
-  return clickable ? "\n        &:hover {\n          background-color: ".concat(colors.gray96, ";\n        }\n\n      ") : '';
+  var $clickable = _ref20.$clickable;
+  return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);
 }, function (_ref21) {
-  var selected = _ref21.selected,
-    size = _ref21.size;
-  return selected && size === 'sm' ? "\n        ".concat(StyledFileIcon, " {\n          display: none;\n        }\n      ") : '';
+  var $selected = _ref21.$selected,
+    $size = _ref21.$size;
+  return $selected && $size === 'sm' && css(["", "{display:none;}"], StyledFileIcon);
 }, function (_ref22) {
-  var disabled = _ref22.disabled;
-  return disabled ? "\n        ".concat(StyledFileIcon, ",\n        ").concat(StyledTickIcon, " {\n          filter: saturate(0);\n          opacity: 0.5;\n        }\n\n        &:hover {\n          background-color: inherit;\n        }\n      ") : '';
+  var $disabled = _ref22.$disabled;
+  return $disabled && css(["", ",", "{filter:saturate(0);opacity:0.5;}&:hover{background-color:inherit;}"], StyledFileIcon, StyledTickIcon);
 }, function (_ref23) {
-  var disabled = _ref23.disabled,
-    selected = _ref23.selected;
-  return disabled && !selected ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 0;\n          transform: scale(0.75);\n        }\n      ") : '';
+  var $disabled = _ref23.$disabled,
+    $selected = _ref23.$selected;
+  return $disabled && !$selected && css(["", "{opacity:0;transform:scale(0.75);}"], StyledTickIcon);
 });
 //# sourceMappingURL=Thumbnail.styles.js.map

package/dist/Thumbnail/Thumbnail.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.styles.js","names":["styled","css","Typography","getTypographyIntent","typographyWeights","borderRadius","colors","getEllipsis","getFocus","spacing","DocumentIcon","thumbnailSizeSm","thumbnailSizeLg","labelHeight","labelFontSize","tickSize","rowLayoutCaptionWidth","multilineCaptionMaxHeight","lg","captionBase","gray15","_ref","layout","concat","sm","_ref2","xs","_ref3","error","red50","_ref4","disabled","gray70","StyledMultilineCaption","div","withConfig","displayName","componentId","StyledCaptionText","span","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","StyledLabelText","StyledThumbnailFigCaption","figcaption","_ref5","_ref5$$color","$color","bold","white","StyledLabel","thumbnailBase","gray85","md","_ref6","clickable","_ref7","selected","StyledTickIcon","_ref8","focused","_ref9","_ref0","size","sizeInPx","svg","_ref1","_ref10","StyledFileIcon","StyledImageThumbnailPreview","_ref11","$bgImage","StyledImageThumbnailOverlay","blackOverlay","black","whiteOverlay","StyledImageThumbnailImage","img","StyledImageThumbnail","_ref12","_ref13","_ref14","_ref15","_ref16","_ref17","StyledThumbnailWrapper","_ref18","_ref19","isRowLayout","StyledPlaceholderThumbnail","_ref20","gray96","_ref21","_ref22","_ref23"],"sources":["../../src/Thumbnail/Thumbnail.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { TypographyProps } from '../Typography'\nimport { Typography } from '../Typography'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type { LayoutVariant, QaTags, SizeVariant } from './Thumbnail.types'\nimport { DocumentIcon } from './ThumbnailDocumentIcon'\n\nconst thumbnailSizeSm = 40\nconst thumbnailSizeLg = 104\nconst labelHeight = 24\nconst labelFontSize = 12\nconst tickSize = 24\nconst rowLayoutCaptionWidth = 288\nconst multilineCaptionMaxHeight = spacing.lg * 2\n\ninterface CaptionProps {\n  layout: LayoutVariant\n  error: boolean\n  disabled: boolean\n}\n\ninterface StyledThumbnailProps {\n  focused: boolean\n  disabled: boolean\n  selected: boolean\n  clickable: boolean\n  size: SizeVariant\n}\n\ninterface StyledTickIconProps {\n  selected: boolean\n  size: SizeVariant\n}\n\nconst captionBase = css<CaptionProps>`\n  color: ${colors.gray15};\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ${({ layout }) =>\n    layout === 'row'\n      ? `\n        align-items: center;\n        margin-left: ${spacing.sm}px;\n        width: ${rowLayoutCaptionWidth}px;\n      `\n      : ''}\n  ${({ layout }) =>\n    layout === 'column'\n      ? `\n        margin-top: ${spacing.xs / 2}px;\n        width: ${thumbnailSizeLg}px;\n      `\n      : ''}\n\n  ${({ error }) => (error ? `color: ${colors.red50};` : '')}\n  ${({ disabled }) => (disabled ? `color: ${colors.gray70};` : '')}\n`\n\nexport const StyledMultilineCaption = styled.div<CaptionProps>`\n  ${captionBase}\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ${multilineCaptionMaxHeight}px;\n`\n\nexport const StyledCaptionText = styled.span`\n  // fix word wrap issue in IE\n  width: 100%;\n`\n\nexport const StyledPlaceholderCaption = styled.div`\n  ${captionBase}\n`\n\nexport const StyledSingleLineCaption = styled.div`\n  display: flex;\n  ${captionBase}\n`\n\nexport const StyledSinglelineCaptionBody = styled.span`\n  ${getEllipsis}\n`\n\nexport const StyledSinglelineCaptionEnding = styled.span`\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n`\n\nexport const StyledLabelText = styled(Typography)`\n  ${getEllipsis()}\n`\n\nexport const StyledThumbnailFigCaption = styled.figcaption<{\n  $color?: TypographyProps['color']\n}>`\n  ${getTypographyIntent('small')}\n  ${getEllipsis()}\n  color: ${({ $color = 'gray15' }) => colors[$color]};\n  font-weight: ${typographyWeights.bold};\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  background-color: ${colors.white};\n`\n\nexport const StyledLabel = styled.div`\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  font-size: ${labelFontSize}px;\n  background-color: ${colors.white};\n`\n\nconst thumbnailBase = css<StyledThumbnailProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${colors.gray85};\n  border-radius: ${borderRadius.md}px;\n  margin: 0;\n\n  ${({ clickable }) => (clickable ? 'cursor: pointer;' : '')}\n\n  ${({ selected }) =>\n    selected\n      ? `\n        ${StyledTickIcon} {\n          opacity: 1;\n          transform: scale(1);\n        }\n      `\n      : ''}\n\n  &:focus {\n    ${getFocus()};\n  }\n\n  ${({ focused }) => focused && getFocus()}\n\n  ${({ disabled, clickable }) =>\n    disabled && clickable ? 'cursor: not-allowed;' : ''}\n\n  ${({ size }) => {\n    const sizeInPx = `${size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm}px`\n    return `\n      width: ${sizeInPx};\n      height: ${sizeInPx};\n    `\n  }}\n`\n\nexport const StyledTickIcon = styled.svg<StyledTickIconProps>`\n  position: absolute;\n  top: ${spacing.sm}px;\n  right: ${spacing.sm}px;\n  width: ${tickSize}px;\n  height: ${tickSize}px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ${({ selected }) =>\n    selected\n      ? `\n        opacity: 1;\n        transform: scale(1);\n      `\n      : ''}\n\n  ${({ size }) =>\n    size === 'sm'\n      ? `\n        top: 50%;\n        left: 50%;\n        margin-top: ${-tickSize / 2}px;\n        margin-left: ${-tickSize / 2}px;\n      `\n      : ''}\n`\n\nexport const StyledFileIcon = styled(DocumentIcon)`\n  width: 36.5%;\n  height: auto;\n`\n\nexport const StyledImageThumbnailPreview = styled.div<{ $bgImage: string }>`\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ${({ $bgImage }) => css`\n    background-image: url(${$bgImage});\n  `}\n`\n\nexport const StyledImageThumbnailOverlay = styled.div`\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst blackOverlay = `\n  background-color: ${colors.black};\n  opacity: 0.2;\n`\n\nconst whiteOverlay = `\n  background-color: ${colors.white};\n  opacity: 0.5;\n`\n\nexport const StyledImageThumbnailImage = styled.img``\n\nexport const StyledImageThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase}\n  flex-direction: column;\n\n  ${({ disabled }) =>\n    disabled\n      ? `\n        &,\n        &:hover {\n          ${StyledImageThumbnailOverlay} {\n            display: block;\n            ${whiteOverlay}\n          }\n        }\n        ${StyledImageThumbnailPreview},\n        ${StyledTickIcon},\n        ${StyledImageThumbnailImage} {\n          filter: saturate(0);\n        }\n        ${StyledFileIcon} {\n          filter: saturate(0);\n          z-index: -1;\n        }\n      `\n      : ''}\n\n  ${({ selected, focused, disabled }) =>\n    focused && disabled\n      ? selected\n        ? `\n          ${StyledTickIcon} {\n            z-index: 0;\n          }\n        `\n        : `\n          ${StyledTickIcon} {\n            z-index: 1;\n          }\n        `\n      : ''}\n\n  ${({ selected, focused }) =>\n    selected && focused\n      ? `\n        ${StyledTickIcon} {\n          z-index: 1;\n        }\n      `\n      : ''}\n\n  ${({ selected, focused, disabled }) =>\n    selected && focused && disabled\n      ? `\n        ${StyledTickIcon} {\n          z-index: 0;\n        }\n      `\n      : ''}\n\n  ${({ focused, disabled }) =>\n    focused && !disabled\n      ? `\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n        }\n      `\n      : ''}\n\n  ${({ clickable, disabled }) =>\n    clickable && !disabled\n      ? `\n        &:hover {\n          ${StyledImageThumbnailOverlay} {\n            display: block;\n            ${blackOverlay}\n          }\n        }\n      `\n      : ''}\n`\n\nexport const StyledThumbnailWrapper = styled.div<{\n  layout: LayoutVariant\n  size: SizeVariant\n  qa?: QaTags\n}>`\n  display: flex;\n  ${({ size }) =>\n    size === 'lg'\n      ? `\n        width: ${thumbnailSizeLg}px;\n      `\n      : ''}\n  ${({ layout }) => {\n    const isRowLayout = layout === 'row'\n    return isRowLayout\n      ? `\n        flex-direction: row;\n        aligh-items: center;\n      `\n      : `\n        flex-direction: column;\n        aligh-items: flex-start;\n      `\n  }}\n`\n\nexport const StyledPlaceholderThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase}\n\n  ${({ clickable }) =>\n    clickable\n      ? `\n        &:hover {\n          background-color: ${colors.gray96};\n        }\n\n      `\n      : ''}\n\n  ${({ selected, size }) =>\n    selected && size === 'sm'\n      ? `\n        ${StyledFileIcon} {\n          display: none;\n        }\n      `\n      : ''}\n\n  ${({ disabled }) =>\n    disabled\n      ? `\n        ${StyledFileIcon},\n        ${StyledTickIcon} {\n          filter: saturate(0);\n          opacity: 0.5;\n        }\n\n        &:hover {\n          background-color: inherit;\n        }\n      `\n      : ''}\n\n  ${({ disabled, selected }) =>\n    disabled && !selected\n      ? `\n        ${StyledTickIcon} {\n          opacity: 0;\n          transform: scale(0.75);\n        }\n      `\n      : ''}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Thumbnail.styles.js","names":["styled","css","getTypographyIntent","Typography","typographyWeights","borderRadius","colors","getEllipsis","getFocus","spacing","DocumentIcon","thumbnailSizeSm","thumbnailSizeLg","labelHeight","labelFontSize","tickSize","rowLayoutCaptionWidth","multilineCaptionMaxHeight","lg","captionBase","gray15","_ref","$layout","sm","_ref2","xs","_ref3","$error","red50","_ref4","$disabled","gray70","StyledMultilineCaption","div","withConfig","displayName","componentId","StyledCaptionText","span","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","StyledLabelText","StyledThumbnailFigCaption","figcaption","_ref5","_ref5$$color","$color","bold","white","StyledLabel","thumbnailBase","gray85","md","_ref6","$clickable","_ref7","$selected","StyledTickIcon","_ref8","$focused","_ref9","_ref0","$size","sizeInPx","concat","svg","_ref1","_ref10","StyledFileIcon","StyledImageThumbnailPreview","_ref11","$bgImage","StyledImageThumbnailOverlay","blackOverlay","black","whiteOverlay","StyledImageThumbnailImage","img","StyledImageThumbnail","_ref12","_ref13","_ref14","_ref15","_ref16","_ref17","StyledThumbnailWrapper","_ref18","_ref19","isRowLayout","StyledPlaceholderThumbnail","_ref20","gray96","_ref21","_ref22","_ref23"],"sources":["../../src/Thumbnail/Thumbnail.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { TypographyProps } from '../Typography'\nimport {\n  getTypographyIntent,\n  Typography,\n  typographyWeights,\n} from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type { LayoutVariant, QaTags, SizeVariant } from './Thumbnail.types'\nimport { DocumentIcon } from './ThumbnailDocumentIcon'\n\nconst thumbnailSizeSm = 40\nconst thumbnailSizeLg = 104\nconst labelHeight = 24\nconst labelFontSize = 12\nconst tickSize = 24\nconst rowLayoutCaptionWidth = 288\nconst multilineCaptionMaxHeight = spacing.lg * 2\n\ninterface CaptionProps {\n  $layout: LayoutVariant\n  $error: boolean\n  $disabled: boolean\n}\n\ninterface StyledThumbnailProps {\n  $focused: boolean\n  $disabled: boolean\n  $selected: boolean\n  $clickable: boolean\n  $size: SizeVariant\n}\n\ninterface StyledTickIconProps {\n  $selected: boolean\n  $size: SizeVariant\n}\n\nconst captionBase = css<CaptionProps>`\n  color: ${colors.gray15};\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ${({ $layout }) =>\n    $layout === 'row' &&\n    css`\n      align-items: center;\n      margin-left: ${spacing.sm}px;\n      width: ${rowLayoutCaptionWidth}px;\n    `}\n\n  ${({ $layout }) =>\n    $layout === 'column' &&\n    css`\n      margin-top: ${spacing.xs / 2}px;\n      width: ${thumbnailSizeLg}px;\n    `}\n\n  ${({ $error }) =>\n    $error &&\n    css`\n      color: ${colors.red50};\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      color: ${colors.gray70};\n    `}\n`\n\nexport const StyledMultilineCaption = styled.div<CaptionProps>`\n  ${captionBase};\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ${multilineCaptionMaxHeight}px;\n`\n\nexport const StyledCaptionText = styled.span`\n  // fix word wrap issue in IE\n  width: 100%;\n`\n\nexport const StyledPlaceholderCaption = styled.div<CaptionProps>`\n  ${captionBase}\n`\n\nexport const StyledSingleLineCaption = styled.div<CaptionProps>`\n  display: flex;\n  ${captionBase}\n`\n\nexport const StyledSinglelineCaptionBody = styled.span`\n  ${getEllipsis}\n`\n\nexport const StyledSinglelineCaptionEnding = styled.span`\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n`\n\nexport const StyledLabelText = styled(Typography)`\n  ${getEllipsis()}\n`\n\nexport const StyledThumbnailFigCaption = styled.figcaption<{\n  $color?: TypographyProps['color']\n}>`\n  ${getTypographyIntent('small')}\n  ${getEllipsis()}\n  color: ${({ $color = 'gray15' }) => colors[$color]};\n  font-weight: ${typographyWeights.bold};\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  background-color: ${colors.white};\n`\n\nexport const StyledLabel = styled.div`\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  font-size: ${labelFontSize}px;\n  background-color: ${colors.white};\n`\n\nconst thumbnailBase = css<StyledThumbnailProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${colors.gray85};\n  border-radius: ${borderRadius.md}px;\n  margin: 0;\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 1;\n        transform: scale(1);\n      }\n    `}\n\n  &:focus {\n    ${getFocus()};\n  }\n\n  ${({ $focused }) => $focused && getFocus()}\n\n  ${({ $disabled, $clickable }) =>\n    $disabled &&\n    $clickable &&\n    css`\n      cursor: not-allowed;\n    `}\n\n  ${({ $size }) => {\n    const sizeInPx = `${$size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm}px`\n    return css`\n      width: ${sizeInPx};\n      height: ${sizeInPx};\n    `\n  }}\n`\n\nexport const StyledTickIcon = styled.svg<StyledTickIconProps>`\n  position: absolute;\n  top: ${spacing.sm}px;\n  right: ${spacing.sm}px;\n  width: ${tickSize}px;\n  height: ${tickSize}px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${({ $size }) =>\n    $size === 'sm' &&\n    css`\n      top: 50%;\n      left: 50%;\n      margin-top: ${-tickSize / 2}px;\n      margin-left: ${-tickSize / 2}px;\n    `}\n`\n\nexport const StyledFileIcon = styled(DocumentIcon)`\n  width: 36.5%;\n  height: auto;\n`\n\nexport const StyledImageThumbnailPreview = styled.div<{ $bgImage: string }>`\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ${({ $bgImage }) => css`\n    background-image: url(${$bgImage});\n  `}\n`\n\nexport const StyledImageThumbnailOverlay = styled.div`\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst blackOverlay = `\n  background-color: ${colors.black};\n  opacity: 0.2;\n`\n\nconst whiteOverlay = `\n  background-color: ${colors.white};\n  opacity: 0.5;\n`\n\nexport const StyledImageThumbnailImage = styled.img``\n\nexport const StyledImageThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase};\n  flex-direction: column;\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      &,\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${whiteOverlay}\n        }\n      }\n      ${StyledImageThumbnailPreview},\n      ${StyledTickIcon},\n        ${StyledImageThumbnailImage} {\n        filter: saturate(0);\n      }\n      ${StyledFileIcon} {\n        filter: saturate(0);\n        z-index: -1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: ${$selected ? 0 : 1};\n      }\n    `}\n\n  ${({ $selected, $focused }) =>\n    $selected &&\n    $focused &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $selected &&\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 0;\n      }\n    `}\n\n  ${({ $focused, $disabled }) =>\n    $focused &&\n    !$disabled &&\n    css`\n      ${StyledImageThumbnailOverlay} {\n        display: block;\n      }\n    `}\n\n  ${({ $clickable, $disabled }) =>\n    $clickable &&\n    !$disabled &&\n    css`\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${blackOverlay}\n        }\n      }\n    `}\n`\n\nexport const StyledThumbnailWrapper = styled.div<{\n  $layout: LayoutVariant\n  $size: SizeVariant\n  qa?: QaTags\n}>`\n  display: flex;\n  ${({ $size }) =>\n    $size === 'lg'\n      ? `\n        width: ${thumbnailSizeLg}px;\n      `\n      : ''}\n  ${({ $layout }) => {\n    const isRowLayout = $layout === 'row'\n    return isRowLayout\n      ? css`\n          flex-direction: row;\n          align-items: center;\n        `\n      : css`\n          flex-direction: column;\n          align-items: flex-start;\n        `\n  }}\n`\n\nexport const StyledPlaceholderThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase}\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      &:hover {\n        background-color: ${colors.gray96};\n      }\n    `}\n\n  ${({ $selected, $size }) =>\n    $selected &&\n    $size === 'sm' &&\n    css`\n      ${StyledFileIcon} {\n        display: none;\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${StyledFileIcon},\n      ${StyledTickIcon} {\n        filter: saturate(0);\n        opacity: 0.5;\n      }\n\n      &:hover {\n        background-color: inherit;\n      }\n    `}\n\n  ${({ $disabled, $selected }) =>\n    $disabled &&\n    !$selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 0;\n        transform: scale(0.75);\n      }\n    `}\n`\n"],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.types.d.ts

@@ -16,7 +16,7 @@ export interface QaTags {
  */
 export declare type ThumbnailRoleType = 'checkbox' | 'figure';
 export declare type ThumbnailRoles = ThumbnailRoleType | undefined;
-interface ThumbnailPolyMap extends Record<ThumbnailRoleType, React.ElementType> {
+export interface ThumbnailPolyMap extends Record<ThumbnailRoleType, React.ElementType> {
     figure: 'figure';
     checkbox: 'input';
 }

package/dist/Thumbnail/Thumbnail.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.types.js","names":[],"sources":["../../src/Thumbnail/Thumbnail.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { ReactNode } from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { AriaLabelled, Props } from '../_utils/types'\nimport type { ThumbnailDocumentIconVariant } from './ThumbnailDocumentIcon'\n\nexport type SizeVariant = 'sm' | 'lg'\n\nexport type LayoutVariant = 'row' | 'column'\n\nexport interface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  caption?: string\n}\n\n/**\n * @since 11.6.0\n */\nexport type ThumbnailRoleType = 'checkbox' | 'figure'\n\nexport type ThumbnailRoles = ThumbnailRoleType | undefined\n\ninterface ThumbnailPolyMap\n  extends Record<ThumbnailRoleType, React.ElementType> {\n  figure: 'figure'\n  checkbox: 'input'\n}\n\n/**\n * @since 11.6.0\n */\nexport type ThumbnailRef<Role extends ThumbnailRoles = undefined> =\n  Role extends ThumbnailRoleType\n    ? Polymorphic.Ref<ThumbnailPolyMap, Role>\n    : React.ComponentPropsWithRef<'div'>['ref']\n\nexport interface BaseThumbnailProps extends Props {\n  /**\n   * Alt text for the Thumbnail image\n   * @since 11.6.0\n   */\n  alt?: string\n\n  /**\n   * An image URL or a `File` to generate a preview for\n   * @since 10.19.0\n   */\n  src?: File | string | null\n\n  /**\n   * Thumbnail size\n   * @default 'lg'\n   * @since 10.19.0\n   */\n  size?: SizeVariant\n\n  /**\n   * Use \"focused\" view\n   * @default false\n   * @since 10.19.0\n   */\n  focused?: boolean\n\n  /**\n   * Use \"selected\" view\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * Use \"disabled\" view\n   * @default false\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @since 10.19.0\n   */\n  clickable?: boolean\n\n  /**\n   * Thumbnail caption\n   * @default ''\n   * @since 10.19.0\n   */\n  caption?: string\n\n  /**\n   * Show placeholder for caption if it is empty\n   * @default false\n   * @since 10.19.0\n   */\n  hasCaptionPlaceholder?: boolean\n\n  /**\n   * Unless variant is provided, filename is used\n   * to choose a placeholder icon based on extension.\n   * E.g. for 'filename=\"panda.png\"', image variant will be used\n   * @since 11.7.0\n   * */\n  filename?: string\n\n  /**\n   * @since 11.7.0\n   */\n  variant?: ThumbnailDocumentIconVariant\n\n  /**\n   * Thumbnail label\n   * @default ''\n   * @since 10.19.0\n   */\n  label?: string\n\n  /**\n   * @since 11.6.0\n   */\n  tabIndex?: number\n\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n\n  /**\n   * @since 11.6.0\n   */\n  onClick?: (e: React.MouseEvent) => void\n}\n\ntype DecorativeThumbnailProps<Role extends ThumbnailRoles = undefined> = {\n  role?: Role\n} & BaseThumbnailProps\n\nexport type ThumbnailProps<Role extends ThumbnailRoles = undefined> =\n  Role extends 'figure'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'figure',\n        never,\n        BaseThumbnailProps\n      >\n    : Role extends 'checkbox'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'checkbox',\n        never,\n        BaseThumbnailProps & {\n          /** onChange from React Aria is fired before onClick */\n          onChange?: (isSelected: boolean) => void\n        }\n      >\n    : DecorativeThumbnailProps & { ref?: ThumbnailRef<undefined> }\n\nexport interface FilePreviewProps {\n  /**\n   * @since 10.19.0\n   */\n  file: File\n}\nexport interface BasePlaceholderProps extends Omit<BaseThumbnailProps, 'src'> {}\n\ntype DecorativePlaceholderProps<Role extends ThumbnailRoles = undefined> = {\n  role?: Role\n} & BasePlaceholderProps\n\nexport type PlaceholderProps<Role extends ThumbnailRoles = undefined> =\n  Role extends 'figure'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'figure',\n        never,\n        AriaLabelled<BasePlaceholderProps>\n      >\n    : Role extends 'checkbox'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'checkbox',\n        never,\n        AriaLabelled<BasePlaceholderProps> & {\n          /** onChange from React Aria is fired before onClick */\n          onChange?: (isSelected: boolean) => void\n        }\n      >\n    : DecorativePlaceholderProps & { ref?: ThumbnailRef<undefined> }\n\nexport interface MultilineCaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  layout: 'row' | 'column'\n  /**\n   * @since 10.19.0\n   */\n  qa: string\n}\n\nexport interface SinglelineCaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  layout: 'row' | 'column'\n  /**\n   * @since 10.19.0\n   */\n  qa: string\n}\n\nexport interface CaptionTooltipProps {\n  /**\n   * @since 10.19.0\n   */\n  overlay: string\n  /**\n   * @since 10.19.0\n   */\n  isVisible: boolean\n  /**\n   * @since 10.19.0\n   */\n  children: ReactNode\n}\n\nexport interface CaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  layout: LayoutVariant\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @since 10.19.0\n   */\n  hasCaptionPlaceholder: boolean\n  /**\n   * @since 10.19.0\n   */\n  multiline: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: string\n}\n\nexport interface LabelProps {\n  /**\n   * @since 11.6.0\n   */\n  id?: string\n  /**\n   * @since 10.19.0\n   */\n  label: string\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n}\n\nexport interface TickIconProps {\n  /**\n   * @since 10.19.0\n   */\n  size: SizeVariant\n  /**\n   * @since 10.19.0\n   */\n  selected: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"Thumbnail.types.js","names":[],"sources":["../../src/Thumbnail/Thumbnail.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { ReactNode } from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { AriaLabelled, Props } from '../_utils/types'\nimport type { ThumbnailDocumentIconVariant } from './ThumbnailDocumentIcon'\n\nexport type SizeVariant = 'sm' | 'lg'\n\nexport type LayoutVariant = 'row' | 'column'\n\nexport interface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  caption?: string\n}\n\n/**\n * @since 11.6.0\n */\nexport type ThumbnailRoleType = 'checkbox' | 'figure'\n\nexport type ThumbnailRoles = ThumbnailRoleType | undefined\n\nexport interface ThumbnailPolyMap\n  extends Record<ThumbnailRoleType, React.ElementType> {\n  figure: 'figure'\n  checkbox: 'input'\n}\n\n/**\n * @since 11.6.0\n */\nexport type ThumbnailRef<Role extends ThumbnailRoles = undefined> =\n  Role extends ThumbnailRoleType\n    ? Polymorphic.Ref<ThumbnailPolyMap, Role>\n    : React.ComponentPropsWithRef<'div'>['ref']\n\nexport interface BaseThumbnailProps extends Props {\n  /**\n   * Alt text for the Thumbnail image\n   * @since 11.6.0\n   */\n  alt?: string\n\n  /**\n   * An image URL or a `File` to generate a preview for\n   * @since 10.19.0\n   */\n  src?: File | string | null\n\n  /**\n   * Thumbnail size\n   * @default 'lg'\n   * @since 10.19.0\n   */\n  size?: SizeVariant\n\n  /**\n   * Use \"focused\" view\n   * @default false\n   * @since 10.19.0\n   */\n  focused?: boolean\n\n  /**\n   * Use \"selected\" view\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * Use \"disabled\" view\n   * @default false\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @since 10.19.0\n   */\n  clickable?: boolean\n\n  /**\n   * Thumbnail caption\n   * @default ''\n   * @since 10.19.0\n   */\n  caption?: string\n\n  /**\n   * Show placeholder for caption if it is empty\n   * @default false\n   * @since 10.19.0\n   */\n  hasCaptionPlaceholder?: boolean\n\n  /**\n   * Unless variant is provided, filename is used\n   * to choose a placeholder icon based on extension.\n   * E.g. for 'filename=\"panda.png\"', image variant will be used\n   * @since 11.7.0\n   * */\n  filename?: string\n\n  /**\n   * @since 11.7.0\n   */\n  variant?: ThumbnailDocumentIconVariant\n\n  /**\n   * Thumbnail label\n   * @default ''\n   * @since 10.19.0\n   */\n  label?: string\n\n  /**\n   * @since 11.6.0\n   */\n  tabIndex?: number\n\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n\n  /**\n   * @since 11.6.0\n   */\n  onClick?: (e: React.MouseEvent) => void\n}\n\ntype DecorativeThumbnailProps<Role extends ThumbnailRoles = undefined> = {\n  role?: Role\n} & BaseThumbnailProps\n\nexport type ThumbnailProps<Role extends ThumbnailRoles = undefined> =\n  Role extends 'figure'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'figure',\n        never,\n        BaseThumbnailProps\n      >\n    : Role extends 'checkbox'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'checkbox',\n        never,\n        BaseThumbnailProps & {\n          /** onChange from React Aria is fired before onClick */\n          onChange?: (isSelected: boolean) => void\n        }\n      >\n    : DecorativeThumbnailProps & { ref?: ThumbnailRef<undefined> }\n\nexport interface FilePreviewProps {\n  /**\n   * @since 10.19.0\n   */\n  file: File\n}\nexport interface BasePlaceholderProps extends Omit<BaseThumbnailProps, 'src'> {}\n\ntype DecorativePlaceholderProps<Role extends ThumbnailRoles = undefined> = {\n  role?: Role\n} & BasePlaceholderProps\n\nexport type PlaceholderProps<Role extends ThumbnailRoles = undefined> =\n  Role extends 'figure'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'figure',\n        never,\n        AriaLabelled<BasePlaceholderProps>\n      >\n    : Role extends 'checkbox'\n    ? Polymorphic.ComponentPropsWithRef<\n        ThumbnailPolyMap,\n        'checkbox',\n        never,\n        AriaLabelled<BasePlaceholderProps> & {\n          /** onChange from React Aria is fired before onClick */\n          onChange?: (isSelected: boolean) => void\n        }\n      >\n    : DecorativePlaceholderProps & { ref?: ThumbnailRef<undefined> }\n\nexport interface MultilineCaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  layout: 'row' | 'column'\n  /**\n   * @since 10.19.0\n   */\n  qa: string\n}\n\nexport interface SinglelineCaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  layout: 'row' | 'column'\n  /**\n   * @since 10.19.0\n   */\n  qa: string\n}\n\nexport interface CaptionTooltipProps {\n  /**\n   * @since 10.19.0\n   */\n  overlay: string\n  /**\n   * @since 10.19.0\n   */\n  isVisible: boolean\n  /**\n   * @since 10.19.0\n   */\n  children: ReactNode\n}\n\nexport interface CaptionProps {\n  /**\n   * @since 10.19.0\n   */\n  layout: LayoutVariant\n  /**\n   * @since 10.19.0\n   */\n  caption: string\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @since 10.19.0\n   */\n  hasCaptionPlaceholder: boolean\n  /**\n   * @since 10.19.0\n   */\n  multiline: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: string\n}\n\nexport interface LabelProps {\n  /**\n   * @since 11.6.0\n   */\n  id?: string\n  /**\n   * @since 10.19.0\n   */\n  label: string\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n}\n\nexport interface TickIconProps {\n  /**\n   * @since 10.19.0\n   */\n  size: SizeVariant\n  /**\n   * @since 10.19.0\n   */\n  selected: boolean\n}\n"],"mappings":""}

package/dist/Thumbnail/ThumbnailCaption.js

@@ -5,7 +5,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
-import { Tooltip } from '../Tooltip/Tooltip';
+import { Tooltip } from '../Tooltip';
 import { useOverflowObserver } from '../_hooks/OverflowObserver';
 import { parseFilename } from '../_utils/filename';
 import { StyledCaptionText, StyledMultilineCaption, StyledPlaceholderCaption, StyledSingleLineCaption, StyledSinglelineCaptionBody, StyledSinglelineCaptionEnding } from './Thumbnail.styles';
@@ -36,9 +36,9 @@ function MultilineCaption(_ref2) {
     "data-qa": qa
   }, /*#__PURE__*/React.createElement(StyledMultilineCaption, _extends({
     ref: ref,
-    disabled: disabled,
-    error: error,
-    layout: layout
+    $disabled: disabled,
+    $error: error,
+    $layout: layout
   }, props), /*#__PURE__*/React.createElement(StyledCaptionText, null, caption))));
 }
 function SinglelineCaption(_ref3) {
@@ -59,9 +59,9 @@ function SinglelineCaption(_ref3) {
     overlay: caption,
     isVisible: isOverflowing
   }, /*#__PURE__*/React.createElement(StyledSingleLineCaption, _extends({
-    error: error,
-    disabled: disabled,
-    layout: layout,
+    $error: error,
+    $disabled: disabled,
+    $layout: layout,
     "data-qa": qa
   }, props), /*#__PURE__*/React.createElement(StyledSinglelineCaptionBody, {
     ref: ref
@@ -83,9 +83,9 @@ export function ThumbnailCaption(_ref4) {
     var captionPlaceholder = hasCaptionPlaceholder && '- -';
     if (captionPlaceholder) {
       return /*#__PURE__*/React.createElement(StyledPlaceholderCaption, {
-        disabled: disabled,
-        error: error,
-        layout: layout,
+        $disabled: disabled,
+        $error: error,
+        $layout: layout,
         "data-qa": qa
       }, /*#__PURE__*/React.createElement(StyledCaptionText, null, captionPlaceholder));
     }

package/dist/Thumbnail/ThumbnailCaption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailCaption.js","names":["React","Tooltip","useOverflowObserver","parseFilename","StyledCaptionText","StyledMultilineCaption","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","CaptionTooltip","_ref","children","overlay","isVisible","createElement","Content","placement","trigger","MultilineCaption","_ref2","disabled","caption","error","layout","qa","props","_objectWithoutProperties","_excluded","_useOverflowObserver","ref","isOverflowing","_extends","SinglelineCaption","_ref3","_excluded2","_useOverflowObserver2","_parseFilename","filename","extension","isFilename","concat","ThumbnailCaption","_ref4","_ref4$disabled","_ref4$error","hasCaptionPlaceholder","multiline","_ref4$qa","_excluded3","captionPlaceholder"],"sources":["../../src/Thumbnail/ThumbnailCaption.tsx"],"sourcesContent":["import React from 'react'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { useOverflowObserver } from '../_hooks/OverflowObserver'\nimport { parseFilename } from '../_utils/filename'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledCaptionText,\n  StyledMultilineCaption,\n  StyledPlaceholderCaption,\n  StyledSingleLineCaption,\n  StyledSinglelineCaptionBody,\n  StyledSinglelineCaptionEnding,\n} from './Thumbnail.styles'\nimport type {\n  CaptionProps,\n  CaptionTooltipProps,\n  MultilineCaptionProps,\n  SinglelineCaptionProps,\n} from './Thumbnail.types'\n\nfunction CaptionTooltip({ children, overlay, isVisible }: CaptionTooltipProps) {\n  return (\n    <Tooltip\n      overlay={<Tooltip.Content>{overlay}</Tooltip.Content>}\n      placement=\"bottom\"\n      trigger={isVisible ? 'hover' : 'none'}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nfunction MultilineCaption({\n  disabled,\n  caption,\n  error,\n  layout,\n  qa,\n  ...props\n}: MultilineCaptionProps & Props) {\n  const { ref, isOverflowing } = useOverflowObserver()\n  return (\n    <CaptionTooltip overlay={caption} isVisible={isOverflowing}>\n      {/* additional container is needed because Tooltip overrides the passed `ref` */}\n      <span data-qa={qa}>\n        <StyledMultilineCaption\n          ref={ref}\n          disabled={disabled}\n          error={error}\n          layout={layout}\n          {...props}\n        >\n          <StyledCaptionText>{caption}</StyledCaptionText>\n        </StyledMultilineCaption>\n      </span>\n    </CaptionTooltip>\n  )\n}\n\nfunction SinglelineCaption({\n  caption,\n  error,\n  disabled,\n  layout,\n  qa,\n  ...props\n}: SinglelineCaptionProps & Props) {\n  const { ref, isOverflowing } = useOverflowObserver()\n  const { filename, extension, isFilename } = parseFilename(caption)\n\n  return (\n    <CaptionTooltip overlay={caption} isVisible={isOverflowing}>\n      <StyledSingleLineCaption\n        error={error}\n        disabled={disabled}\n        layout={layout}\n        data-qa={qa}\n        {...props}\n      >\n        <StyledSinglelineCaptionBody ref={ref}>\n          {isFilename ? `${filename}.` : caption}\n        </StyledSinglelineCaptionBody>\n        {isFilename && (\n          <StyledSinglelineCaptionEnding>\n            {extension}\n          </StyledSinglelineCaptionEnding>\n        )}\n      </StyledSingleLineCaption>\n    </CaptionTooltip>\n  )\n}\n\nexport function ThumbnailCaption({\n  layout,\n  disabled = false,\n  error = false,\n  caption,\n  hasCaptionPlaceholder,\n  multiline,\n  qa = '',\n  ...props\n}: CaptionProps) {\n  if (!caption) {\n    const captionPlaceholder = hasCaptionPlaceholder && '- -'\n\n    if (captionPlaceholder) {\n      return (\n        <StyledPlaceholderCaption\n          disabled={disabled}\n          error={error}\n          layout={layout}\n          data-qa={qa}\n        >\n          <StyledCaptionText>{captionPlaceholder}</StyledCaptionText>\n        </StyledPlaceholderCaption>\n      )\n    }\n\n    return null\n  }\n\n  if (multiline) {\n    return (\n      <MultilineCaption\n        disabled={disabled}\n        caption={caption}\n        error={error}\n        layout={layout}\n        qa={qa}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <SinglelineCaption\n      caption={caption}\n      disabled={disabled}\n      error={error}\n      layout={layout}\n      qa={qa}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ThumbnailCaption.js","names":["React","Tooltip","useOverflowObserver","parseFilename","StyledCaptionText","StyledMultilineCaption","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","CaptionTooltip","_ref","children","overlay","isVisible","createElement","Content","placement","trigger","MultilineCaption","_ref2","disabled","caption","error","layout","qa","props","_objectWithoutProperties","_excluded","_useOverflowObserver","ref","isOverflowing","_extends","$disabled","$error","$layout","SinglelineCaption","_ref3","_excluded2","_useOverflowObserver2","_parseFilename","filename","extension","isFilename","concat","ThumbnailCaption","_ref4","_ref4$disabled","_ref4$error","hasCaptionPlaceholder","multiline","_ref4$qa","_excluded3","captionPlaceholder"],"sources":["../../src/Thumbnail/ThumbnailCaption.tsx"],"sourcesContent":["import React from 'react'\nimport { Tooltip } from '../Tooltip'\nimport { useOverflowObserver } from '../_hooks/OverflowObserver'\nimport { parseFilename } from '../_utils/filename'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledCaptionText,\n  StyledMultilineCaption,\n  StyledPlaceholderCaption,\n  StyledSingleLineCaption,\n  StyledSinglelineCaptionBody,\n  StyledSinglelineCaptionEnding,\n} from './Thumbnail.styles'\nimport type {\n  CaptionProps,\n  CaptionTooltipProps,\n  MultilineCaptionProps,\n  SinglelineCaptionProps,\n} from './Thumbnail.types'\n\nfunction CaptionTooltip({ children, overlay, isVisible }: CaptionTooltipProps) {\n  return (\n    <Tooltip\n      overlay={<Tooltip.Content>{overlay}</Tooltip.Content>}\n      placement=\"bottom\"\n      trigger={isVisible ? 'hover' : 'none'}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nfunction MultilineCaption({\n  disabled,\n  caption,\n  error,\n  layout,\n  qa,\n  ...props\n}: MultilineCaptionProps & Props) {\n  const { ref, isOverflowing } = useOverflowObserver()\n  return (\n    <CaptionTooltip overlay={caption} isVisible={isOverflowing}>\n      {/* additional container is needed because Tooltip overrides the passed `ref` */}\n      <span data-qa={qa}>\n        <StyledMultilineCaption\n          ref={ref}\n          $disabled={disabled}\n          $error={error}\n          $layout={layout}\n          {...props}\n        >\n          <StyledCaptionText>{caption}</StyledCaptionText>\n        </StyledMultilineCaption>\n      </span>\n    </CaptionTooltip>\n  )\n}\n\nfunction SinglelineCaption({\n  caption,\n  error,\n  disabled,\n  layout,\n  qa,\n  ...props\n}: SinglelineCaptionProps & Props) {\n  const { ref, isOverflowing } = useOverflowObserver()\n  const { filename, extension, isFilename } = parseFilename(caption)\n\n  return (\n    <CaptionTooltip overlay={caption} isVisible={isOverflowing}>\n      <StyledSingleLineCaption\n        $error={error}\n        $disabled={disabled}\n        $layout={layout}\n        data-qa={qa}\n        {...props}\n      >\n        <StyledSinglelineCaptionBody ref={ref}>\n          {isFilename ? `${filename}.` : caption}\n        </StyledSinglelineCaptionBody>\n        {isFilename && (\n          <StyledSinglelineCaptionEnding>\n            {extension}\n          </StyledSinglelineCaptionEnding>\n        )}\n      </StyledSingleLineCaption>\n    </CaptionTooltip>\n  )\n}\n\nexport function ThumbnailCaption({\n  layout,\n  disabled = false,\n  error = false,\n  caption,\n  hasCaptionPlaceholder,\n  multiline,\n  qa = '',\n  ...props\n}: CaptionProps) {\n  if (!caption) {\n    const captionPlaceholder = hasCaptionPlaceholder && '- -'\n\n    if (captionPlaceholder) {\n      return (\n        <StyledPlaceholderCaption\n          $disabled={disabled}\n          $error={error}\n          $layout={layout}\n          data-qa={qa}\n        >\n          <StyledCaptionText>{captionPlaceholder}</StyledCaptionText>\n        </StyledPlaceholderCaption>\n      )\n    }\n\n    return null\n  }\n\n  if (multiline) {\n    return (\n      <MultilineCaption\n        disabled={disabled}\n        caption={caption}\n        error={error}\n        layout={layout}\n        qa={qa}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <SinglelineCaption\n      caption={caption}\n      disabled={disabled}\n      error={error}\n      layout={layout}\n      qa={qa}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/ThumbnailGrid/ThumbnailGrid.js

@@ -24,8 +24,8 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { useFocusWithin } from '@react-aria/interactions';
 import React from 'react';
 import InfiniteLoader from 'react-window-infinite-loader';
-import { Spinner } from '../Spinner/Spinner';
-import { Tooltip } from '../Tooltip/Tooltip';
+import { Spinner } from '../Spinner';
+import { Tooltip } from '../Tooltip';
 import { useI18nContext } from '../_hooks/I18n';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { useGridNavigation } from './ThumbnailGrid.hooks';