@procore/core-react 11.22.1 → 11.23.0

package/dist/Thumbnail/Thumbnail.js

@@ -1,25 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "as", "label", "name", "onChange", "role", "value"],
+  _excluded2 = ["children", "as", "label", "name", "onChange", "role", "value"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { mergeProps } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import React from 'react';
@@ -27,178 +16,399 @@ import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { useThumbnail } from './Thumbnail.hooks';
-import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledLabelText, StyledPlaceholderThumbnail, StyledThumbnailFigCaption, StyledThumbnailWrapper, StyledTickIcon, } from './Thumbnail.styles';
+import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledLabelText, StyledPlaceholderThumbnail, StyledThumbnailFigCaption, StyledThumbnailWrapper, StyledTickIcon } from './Thumbnail.styles';
 import { getThumbnailVariantForFilename } from './Thumbnail.utils';
 import { ThumbnailCaption } from './ThumbnailCaption';
 import { ThumbnailPreview } from './ThumbnailPreview';
 var defaultSize = 'lg';
-function TickIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? defaultSize : _b, selected = _a.selected;
-    var i18n = useI18nContext();
-    return (React.createElement(StyledTickIcon, { "aria-hidden": selected ? false : true, "aria-label": selected ? i18n.t('core.thumbnail.checked') : undefined, 
-        // in IE11, all svg element are focusable by default
-        focusable: false, selected: selected, size: size, width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z", fill: "white" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z", fill: "hsl(218,75%,50%)" }),
-        React.createElement("path", { d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z", fill: "white" })));
+function TickIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaultSize : _ref$size,
+    selected = _ref.selected;
+  var i18n = useI18nContext();
+  return /*#__PURE__*/React.createElement(StyledTickIcon, {
+    "aria-hidden": selected ? false : true,
+    "aria-label": selected ? i18n.t('core.thumbnail.checked') : undefined
+    // in IE11, all svg element are focusable by default
+    ,
+    focusable: false,
+    selected: selected,
+    size: size,
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z",
+    fill: "hsl(218,75%,50%)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z",
+    fill: "white"
+  }));
 }
-function FigCaption(_a) {
-    var label = _a.label, disabled = _a.disabled;
-    return label ? (React.createElement(StyledThumbnailFigCaption, { "$color": disabled ? 'gray70' : 'gray15' }, label)) : null;
+function FigCaption(_ref2) {
+  var label = _ref2.label,
+    disabled = _ref2.disabled;
+  return label ? /*#__PURE__*/React.createElement(StyledThumbnailFigCaption, {
+    $color: disabled ? 'gray70' : 'gray15'
+  }, label) : null;
 }
-function Label(_a) {
-    var label = _a.label, disabled = _a.disabled;
-    return label ? (React.createElement(StyledLabel, null,
-        React.createElement(StyledLabelText, { intent: "small", weight: "bold" }, label))) : null;
+function Label(_ref3) {
+  var label = _ref3.label,
+    disabled = _ref3.disabled;
+  return label ? /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(StyledLabelText, {
+    intent: "small",
+    weight: "bold"
+  }, label)) : null;
 }
-var BasePlaceholder = React.forwardRef(function BasePlaceholder(props, ref) {
-    var _a, _b;
-    var thumbnail = useThumbnail(props);
-    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
-        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            React.createElement(StyledFileIcon, { variant: props.variant ||
-                    getThumbnailVariantForFilename((_a = props.filename) !== null && _a !== void 0 ? _a : '') }),
-            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled })));
+var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(props, ref) {
+  var _props$filename, _thumbnail$qa;
+  var thumbnail = useThumbnail(props);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
+    ref: ref,
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, props), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
+    focused: thumbnail.focused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size
+  }, /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: props.variant || getThumbnailVariantForFilename((_props$filename = props.filename) !== null && _props$filename !== void 0 ? _props$filename : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    error: thumbnail.error,
+    qa: (_thumbnail$qa = thumbnail.qa) === null || _thumbnail$qa === void 0 ? void 0 : _thumbnail$qa.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled
+  }));
 });
-var FigurePlaceholder = React.forwardRef(function FigurePlaceholder(props, ref) {
-    var _a, _b;
-    var thumbnail = useThumbnail(props);
-    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
-        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size, as: thumbnail.as },
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            React.createElement(StyledFileIcon, { variant: props.variant ||
-                    getThumbnailVariantForFilename((_a = props.filename) !== null && _a !== void 0 ? _a : '') }),
-            thumbnail.size === 'lg' && (React.createElement(FigCaption, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled })));
+var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder(props, ref) {
+  var _props$filename2, _thumbnail$qa2;
+  var thumbnail = useThumbnail(props);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
+    ref: ref,
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, props), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
+    focused: thumbnail.focused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size,
+    as: thumbnail.as
+  }, /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: props.variant || getThumbnailVariantForFilename((_props$filename2 = props.filename) !== null && _props$filename2 !== void 0 ? _props$filename2 : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    error: thumbnail.error,
+    qa: (_thumbnail$qa2 = thumbnail.qa) === null || _thumbnail$qa2 === void 0 ? void 0 : _thumbnail$qa2.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled
+  }));
 });
-var CheckboxPlaceholder = React.forwardRef(function CheckboxPlaceholder(_a, ref) {
-    var _b, _c;
-    var children = _a.children, as = _a.as, label = _a.label, name = _a.name, onChange = _a.onChange, role = _a.role, value = _a.value, props_ = __rest(_a, ["children", "as", "label", "name", "onChange", "role", "value"]);
-    var props = __assign(__assign({}, props_), { as: as, label: label, onChange: onChange, role: role, value: value, isDisabled: props_.disabled, isSelected: props_.checked, defaultSelected: props_.defaultChecked });
-    var thumbnail = useThumbnail(props);
-    var isInputFocused = document.activeElement === thumbnail.inputRef.current;
-    var preventSpaceOnDisabledThumbnail = function (e) {
-        if (e.key === ' ' && thumbnail.disabled) {
-            e.preventDefault();
-        }
-    };
-    React.useEffect(function () {
-        if (props.focused && thumbnail.inputRef.current) {
-            thumbnail.inputRef.current.focus();
-        }
-    }, [props.focused, thumbnail.inputRef]);
-    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props_, { onClick: function (e) {
-            var _a;
-            if (!thumbnail.disabled) {
-                thumbnail.toggleState.toggle();
-                (_a = thumbnail.onClick) === null || _a === void 0 ? void 0 : _a.call(thumbnail, e);
-            }
-        } }),
-        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused || isInputFocused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            React.createElement(StyledFileIcon, { variant: props.variant ||
-                    getThumbnailVariantForFilename((_b = props.filename) !== null && _b !== void 0 ? _b : '') }),
-            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_c = thumbnail.qa) === null || _c === void 0 ? void 0 : _c.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled }),
-        React.createElement(VisuallyHidden, null,
-            React.createElement("input", __assign({ ref: mergeRefs(thumbnail.inputRef, ref), "aria-label": "".concat(thumbnail.label, " ").concat(thumbnail.caption) || 'checkbox', disabled: thumbnail.disabled }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), { onKeyDown: preventSpaceOnDisabledThumbnail })))));
+var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceholder(_ref4, ref) {
+  var _props$filename3, _thumbnail$qa3;
+  var children = _ref4.children,
+    as = _ref4.as,
+    label = _ref4.label,
+    name = _ref4.name,
+    onChange = _ref4.onChange,
+    role = _ref4.role,
+    value = _ref4.value,
+    props_ = _objectWithoutProperties(_ref4, _excluded);
+  var props = _objectSpread(_objectSpread({}, props_), {}, {
+    as: as,
+    label: label,
+    onChange: onChange,
+    role: role,
+    value: value,
+    isDisabled: props_.disabled,
+    isSelected: props_.checked,
+    defaultSelected: props_.defaultChecked
+  });
+  var thumbnail = useThumbnail(props);
+  var isInputFocused = document.activeElement === thumbnail.inputRef.current;
+  var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
+    if (e.key === ' ' && thumbnail.disabled) {
+      e.preventDefault();
+    }
+  };
+  React.useEffect(function () {
+    if (props.focused && thumbnail.inputRef.current) {
+      thumbnail.inputRef.current.focus();
+    }
+  }, [props.focused, thumbnail.inputRef]);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
+    ref: ref,
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, props_, {
+    onClick: function onClick(e) {
+      if (!thumbnail.disabled) {
+        var _thumbnail$onClick;
+        thumbnail.toggleState.toggle();
+        (_thumbnail$onClick = thumbnail.onClick) === null || _thumbnail$onClick === void 0 ? void 0 : _thumbnail$onClick.call(thumbnail, e);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
+    focused: thumbnail.focused || isInputFocused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size
+  }, /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: props.variant || getThumbnailVariantForFilename((_props$filename3 = props.filename) !== null && _props$filename3 !== void 0 ? _props$filename3 : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    error: thumbnail.error,
+    qa: (_thumbnail$qa3 = thumbnail.qa) === null || _thumbnail$qa3 === void 0 ? void 0 : _thumbnail$qa3.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
+    ref: mergeRefs(thumbnail.inputRef, ref),
+    "aria-label": "".concat(thumbnail.label, " ").concat(thumbnail.caption) || 'checkbox',
+    disabled: thumbnail.disabled
+  }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
+    onKeyDown: preventSpaceOnDisabledThumbnail
+  }))));
 });
 function PlaceholderInner(props, ref) {
-    switch (props.role) {
-        case 'checkbox': {
-            return (React.createElement(CheckboxPlaceholder, __assign({ ref: ref }, props)));
-        }
-        case 'figure': {
-            return (React.createElement(FigurePlaceholder, __assign({ ref: ref }, props)));
-        }
-        default: {
-            return (React.createElement(BasePlaceholder, __assign({ ref: ref }, props)));
-        }
-    }
+  switch (props.role) {
+    case 'checkbox':
+      {
+        return /*#__PURE__*/React.createElement(CheckboxPlaceholder, _extends({
+          ref: ref
+        }, props));
+      }
+    case 'figure':
+      {
+        return /*#__PURE__*/React.createElement(FigurePlaceholder, _extends({
+          ref: ref
+        }, props));
+      }
+    default:
+      {
+        return /*#__PURE__*/React.createElement(BasePlaceholder, _extends({
+          ref: ref
+        }, props));
+      }
+  }
 }
-var BaseThumbnail = React.forwardRef(function BaseThumbnail(props, ref) {
-    var _a, _b;
-    var thumbnail = useThumbnail(props);
-    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
-        React.createElement(StyledImageThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
-            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
-                    getThumbnailVariantForFilename((_a = thumbnail.filename) !== null && _a !== void 0 ? _a : '') })),
-            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: thumbnail.error })));
-});
-var FigureThumbnail = React.forwardRef(function FigureThumbnail(props, ref) {
-    var _a, _b;
-    var thumbnail = useThumbnail(props);
-    return (React.createElement(StyledThumbnailWrapper, { layout: thumbnail.layout, size: thumbnail.size },
-        React.createElement(StyledImageThumbnail, { ref: ref, focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size, as: thumbnail.as },
-            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
-                    getThumbnailVariantForFilename((_a = thumbnail.filename) !== null && _a !== void 0 ? _a : '') })),
-            thumbnail.size === 'lg' && (React.createElement(FigCaption, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: thumbnail.error })));
+var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props, ref) {
+  var _thumbnail$filename, _thumbnail$qa4;
+  var thumbnail = useThumbnail(props);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
+    ref: ref,
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, props), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
+    focused: thumbnail.focused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size
+  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
+    src: thumbnail.src,
+    alt: thumbnail.alt
+  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
+    file: thumbnail.src,
+    "aria-label": thumbnail.alt
+  }), /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename = thumbnail.filename) !== null && _thumbnail$filename !== void 0 ? _thumbnail$filename : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    qa: (_thumbnail$qa4 = thumbnail.qa) === null || _thumbnail$qa4 === void 0 ? void 0 : _thumbnail$qa4.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled,
+    error: thumbnail.error
+  }));
 });
-var CheckboxThumbnail = React.forwardRef(function CheckboxThumbnail(_a, ref) {
-    var _b, _c;
-    var children = _a.children, as = _a.as, label = _a.label, name = _a.name, onChange = _a.onChange, role = _a.role, value = _a.value, props_ = __rest(_a, ["children", "as", "label", "name", "onChange", "role", "value"]);
-    var props = __assign(__assign({}, props_), { as: as, label: label, name: name, onChange: onChange, role: role, value: value, isDisabled: props_.disabled, isSelected: props_.checked, defaultSelected: props_.defaultChecked });
-    var thumbnail = useThumbnail(props);
-    var isInputFocused = document.activeElement === thumbnail.inputRef.current;
-    var preventSpaceOnDisabledThumbnail = function (e) {
-        if (e.key === ' ' && thumbnail.disabled) {
-            e.preventDefault();
-        }
-    };
-    React.useEffect(function () {
-        if (props.focused && thumbnail.inputRef.current) {
-            thumbnail.inputRef.current.focus();
-        }
-    }, [props.focused, thumbnail.inputRef]);
-    return (React.createElement(StyledThumbnailWrapper, __assign({ layout: thumbnail.layout, size: thumbnail.size }, props_, { onClick: function (e) {
-            var _a;
-            if (!thumbnail.disabled) {
-                thumbnail.toggleState.toggle();
-                (_a = thumbnail.onClick) === null || _a === void 0 ? void 0 : _a.call(thumbnail, e);
-            }
-        } }),
-        React.createElement(StyledImageThumbnail, { focused: thumbnail.focused || isInputFocused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
-            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
-            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
-            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
-                    getThumbnailVariantForFilename((_b = thumbnail.filename) !== null && _b !== void 0 ? _b : '') })),
-            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
-            React.createElement(StyledImageThumbnailOverlay, null)),
-        React.createElement(ThumbnailCaption, { qa: (_c = props.qa) === null || _c === void 0 ? void 0 : _c.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: props.error }),
-        React.createElement(VisuallyHidden, null,
-            React.createElement("input", __assign({ ref: mergeRefs(thumbnail.inputRef, ref), type: 'checkbox', disabled: thumbnail.disabled }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), { onKeyDown: preventSpaceOnDisabledThumbnail })))));
+var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(props, ref) {
+  var _thumbnail$filename2, _thumbnail$qa5;
+  var thumbnail = useThumbnail(props);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, {
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, /*#__PURE__*/React.createElement(StyledImageThumbnail, {
+    ref: ref,
+    focused: thumbnail.focused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size,
+    as: thumbnail.as
+  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
+    src: thumbnail.src,
+    alt: thumbnail.alt
+  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
+    file: thumbnail.src,
+    "aria-label": thumbnail.alt
+  }), /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename2 = thumbnail.filename) !== null && _thumbnail$filename2 !== void 0 ? _thumbnail$filename2 : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    qa: (_thumbnail$qa5 = thumbnail.qa) === null || _thumbnail$qa5 === void 0 ? void 0 : _thumbnail$qa5.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled,
+    error: thumbnail.error
+  }));
 });
-function ThumbnailInner(props, ref) {
-    var isFile = props.src instanceof File;
-    var isImageURL = typeof props.src === 'string';
-    if (!isFile && !isImageURL) {
-        console.warn('Unknown Thumbnail source:', props.src);
+var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail(_ref5, ref) {
+  var _thumbnail$filename3, _props$qa;
+  var children = _ref5.children,
+    as = _ref5.as,
+    label = _ref5.label,
+    name = _ref5.name,
+    onChange = _ref5.onChange,
+    role = _ref5.role,
+    value = _ref5.value,
+    props_ = _objectWithoutProperties(_ref5, _excluded2);
+  var props = _objectSpread(_objectSpread({}, props_), {}, {
+    as: as,
+    label: label,
+    name: name,
+    onChange: onChange,
+    role: role,
+    value: value,
+    isDisabled: props_.disabled,
+    isSelected: props_.checked,
+    defaultSelected: props_.defaultChecked
+  });
+  var thumbnail = useThumbnail(props);
+  var isInputFocused = document.activeElement === thumbnail.inputRef.current;
+  var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
+    if (e.key === ' ' && thumbnail.disabled) {
+      e.preventDefault();
     }
-    switch (props.role) {
-        case 'checkbox': {
-            return (React.createElement(CheckboxThumbnail, __assign({ ref: ref }, props)));
-        }
-        case 'figure': {
-            return (React.createElement(FigureThumbnail, __assign({ ref: ref }, props)));
-        }
-        default: {
-            return (React.createElement(BaseThumbnail, __assign({ ref: ref }, props)));
-        }
+  };
+  React.useEffect(function () {
+    if (props.focused && thumbnail.inputRef.current) {
+      thumbnail.inputRef.current.focus();
     }
+  }, [props.focused, thumbnail.inputRef]);
+  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
+    layout: thumbnail.layout,
+    size: thumbnail.size
+  }, props_, {
+    onClick: function onClick(e) {
+      if (!thumbnail.disabled) {
+        var _thumbnail$onClick2;
+        thumbnail.toggleState.toggle();
+        (_thumbnail$onClick2 = thumbnail.onClick) === null || _thumbnail$onClick2 === void 0 ? void 0 : _thumbnail$onClick2.call(thumbnail, e);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
+    focused: thumbnail.focused || isInputFocused,
+    disabled: thumbnail.disabled,
+    selected: thumbnail.selected,
+    clickable: thumbnail.clickable,
+    size: thumbnail.size
+  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
+    src: thumbnail.src,
+    alt: thumbnail.alt
+  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
+    file: thumbnail.src,
+    "aria-label": thumbnail.alt
+  }), /*#__PURE__*/React.createElement(TickIcon, {
+    size: thumbnail.size,
+    selected: thumbnail.toggleState.isSelected
+  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
+    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename3 = thumbnail.filename) !== null && _thumbnail$filename3 !== void 0 ? _thumbnail$filename3 : '')
+  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
+    label: thumbnail.label,
+    disabled: thumbnail.disabled
+  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
+    qa: (_props$qa = props.qa) === null || _props$qa === void 0 ? void 0 : _props$qa.caption,
+    multiline: thumbnail.size === 'lg',
+    layout: thumbnail.layout,
+    caption: thumbnail.caption,
+    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
+    disabled: thumbnail.disabled,
+    error: props.error
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
+    ref: mergeRefs(thumbnail.inputRef, ref),
+    type: 'checkbox',
+    disabled: thumbnail.disabled
+  }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
+    onKeyDown: preventSpaceOnDisabledThumbnail
+  }))));
+});
+function ThumbnailInner(props, ref) {
+  var isFile = props.src instanceof File;
+  var isImageURL = typeof props.src === 'string';
+  if (!isFile && !isImageURL) {
+    console.warn('Unknown Thumbnail source:', props.src);
+  }
+  switch (props.role) {
+    case 'checkbox':
+      {
+        return /*#__PURE__*/React.createElement(CheckboxThumbnail, _extends({
+          ref: ref
+        }, props));
+      }
+    case 'figure':
+      {
+        return /*#__PURE__*/React.createElement(FigureThumbnail, _extends({
+          ref: ref
+        }, props));
+      }
+    default:
+      {
+        return /*#__PURE__*/React.createElement(BaseThumbnail, _extends({
+          ref: ref
+        }, props));
+      }
+  }
 }
+
 /**
 
  We use thumbnails to display previews for images or files as either a smaller
@@ -213,11 +423,15 @@ function ThumbnailInner(props, ref) {
  @see [Design Guidelines](https://design.procore.com/thumbnail)
 
  */
-var Thumbnail_ = React.forwardRef(ThumbnailInner);
-var Placeholder = React.forwardRef(PlaceholderInner);
+var Thumbnail_ = /*#__PURE__*/React.forwardRef(ThumbnailInner);
+var Placeholder = /*#__PURE__*/React.forwardRef(PlaceholderInner);
+
 // @ts-ignore
 Placeholder.displayName = 'Thumbnail.Placeholder';
+
 // @ts-ignore
 Thumbnail_.displayName = 'Thumbnail';
-export var Thumbnail = addSubcomponents({ Placeholder: Placeholder }, Thumbnail_);
+export var Thumbnail = addSubcomponents({
+  Placeholder: Placeholder
+}, Thumbnail_);
 //# sourceMappingURL=Thumbnail.js.map