@procore/core-react 12.47.0 → 12.48.0

package/dist/Tabs/Tabs.styles.js

@@ -17,17 +17,17 @@ var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacin
  */
 var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabBase",
-  componentId: "core-12_47_0__sc-17s58xs-0"
+  componentId: "core-12_48_0__sc-17s58xs-0"
 })(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
 var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabInnerBase",
-  componentId: "core-12_47_0__sc-17s58xs-1"
+  componentId: "core-12_48_0__sc-17s58xs-1"
 })(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
 
 // This so that it can be visible/hidden via CSS down below
 var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledDropdownTabBase",
-  componentId: "core-12_47_0__sc-17s58xs-2"
+  componentId: "core-12_48_0__sc-17s58xs-2"
 })(["", ""], hiddenTab);
 
 //// END BASE LAYOUT COMPONENTS FOR TABS ////
@@ -50,11 +50,11 @@ function getTabStyle() {
 }
 var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledTab",
-  componentId: "core-12_47_0__sc-17s58xs-3"
+  componentId: "core-12_48_0__sc-17s58xs-3"
 })(["", ""], getTabStyle);
 var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
   displayName: "StyledTabInner",
-  componentId: "core-12_47_0__sc-17s58xs-4"
+  componentId: "core-12_48_0__sc-17s58xs-4"
 })(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}& a:focus-visible{outline:2px solid ", ";outline-offset:-1px;border-radius:", "px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? 600 : 400;
@@ -67,15 +67,15 @@ var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
 });
 var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
   displayName: "StyledDropdownTab",
-  componentId: "core-12_47_0__sc-17s58xs-5"
+  componentId: "core-12_48_0__sc-17s58xs-5"
 })(["", ""], getTabStyle);
 var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
   displayName: "StyledDropdownTabInner",
-  componentId: "core-12_47_0__sc-17s58xs-6"
+  componentId: "core-12_48_0__sc-17s58xs-6"
 })(["align-items:center;cursor:pointer;display:inline-flex;"]);
 var StyledLink = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLink",
-  componentId: "core-12_47_0__sc-17s58xs-7"
+  componentId: "core-12_48_0__sc-17s58xs-7"
 })(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
 
 //// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
@@ -92,34 +92,34 @@ function getHelixHeaderTabStyles() {
 }
 var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledGlobalNavigationTab",
-  componentId: "core-12_47_0__sc-17s58xs-8"
+  componentId: "core-12_48_0__sc-17s58xs-8"
 })(["", ""], getHelixHeaderTabStyles);
 var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
   displayName: "StyledGlobalNavigationDropdownTab",
-  componentId: "core-12_47_0__sc-17s58xs-9"
+  componentId: "core-12_48_0__sc-17s58xs-9"
 })(["", ""], getHelixHeaderTabStyles);
 var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
   displayName: "StyledGlobalNavigationDropdownTabInner",
-  componentId: "core-12_47_0__sc-17s58xs-10"
+  componentId: "core-12_48_0__sc-17s58xs-10"
 })(["align-items:center;cursor:pointer;display:inline-flex;"]);
 var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledGlobalNavigationLink",
-  componentId: "core-12_47_0__sc-17s58xs-11"
+  componentId: "core-12_48_0__sc-17s58xs-11"
 })(["padding-left:6px;padding-right:6px;"]);
 
 //// END HELIX GLOBAL NAVIGATION TAB STYLES ////
 
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_47_0__sc-17s58xs-12"
+  componentId: "core-12_48_0__sc-17s58xs-12"
 })(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{color:unset;margin:unset;padding:unset;&:focus-visible{outline-offset:1px;}}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
 export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabList",
-  componentId: "core-12_47_0__sc-17s58xs-13"
+  componentId: "core-12_48_0__sc-17s58xs-13"
 })(["display:flex;list-style:none;margin:0;padding:0;width:100%;"]);
 export var StyledTabs = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabs",
-  componentId: "core-12_47_0__sc-17s58xs-14"
+  componentId: "core-12_48_0__sc-17s58xs-14"
 })(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
   var $dark = _ref6.$dark;
   return $dark && colors.gray15;
@@ -133,7 +133,7 @@ export var StyledTabs = /*#__PURE__*/styled.div.withConfig({
 });
 var StyledMoreLi = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledMoreLi",
-  componentId: "core-12_47_0__sc-17s58xs-15"
+  componentId: "core-12_48_0__sc-17s58xs-15"
 })(["", ""], function (_ref9) {
   var $helix = _ref9.$helix;
   return $helix ? css(["margin-left:", "px;"], spacing.sm) : css(["margin-left:", "px;"], spacing.xl);

package/dist/Tearsheet/Tearsheet.styles.js

@@ -46,7 +46,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
 };
 export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetContent",
-  componentId: "core-12_47_0__sc-ljrxoq-0"
+  componentId: "core-12_48_0__sc-ljrxoq-0"
 })(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
   var $open = _ref.$open,
     $placement = _ref.$placement;
@@ -66,7 +66,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
 export var minScrimSize = spacing.xxl * 3;
 export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetBody",
-  componentId: "core-12_47_0__sc-ljrxoq-1"
+  componentId: "core-12_48_0__sc-ljrxoq-1"
 })(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", ""], colors.white, getGapOutlineFocus('inside'), function (_ref5) {
   var $block = _ref5.$block,
     $placement = _ref5.$placement,
@@ -78,7 +78,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
 var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
 export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledScrimContainer",
-  componentId: "core-12_47_0__sc-ljrxoq-2"
+  componentId: "core-12_48_0__sc-ljrxoq-2"
 })(["", ""], function (_ref6) {
   var $placement = _ref6.$placement;
   var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
@@ -86,7 +86,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledButtonContainer",
-  componentId: "core-12_47_0__sc-ljrxoq-3"
+  componentId: "core-12_48_0__sc-ljrxoq-3"
 })(["", ""], function (_ref7) {
   var $placement = _ref7.$placement;
   switch ($placement) {
@@ -101,7 +101,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledButtonCard",
-  componentId: "core-12_47_0__sc-ljrxoq-4"
+  componentId: "core-12_48_0__sc-ljrxoq-4"
 })(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref8) {
   var $open = _ref8.$open;
   return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);

package/dist/TextArea/TextArea.styles.js

@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
 import { spacing } from '../_styles/spacing';
 export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   displayName: "StyledTextArea",
-  componentId: "core-12_47_0__sc-u5mow1-0"
+  componentId: "core-12_48_0__sc-u5mow1-0"
 })(["", ";height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
   var _ref$$resize = _ref.$resize,
     $resize = _ref$$resize === void 0 ? 'both' : _ref$$resize;

package/dist/TextEditorOutput/TextEditorOutput.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledEditor = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledEditor",
-  componentId: "core-12_47_0__sc-1lje1b0-0"
+  componentId: "core-12_48_0__sc-1lje1b0-0"
 })(["> .tox-tinymce{border:none;}"]);
 //# sourceMappingURL=TextEditorOutput.styles.js.map

package/dist/Thumbnail/Thumbnail.hooks.d.ts

@@ -1,6 +1,8 @@
 import type React from 'react';
 import type { LayoutVariant, ThumbnailProps } from './Thumbnail.types';
-export declare const useThumbnail: ({ selected, disabled, clickable, focused, hasCaptionPlaceholder, src, filename: filename_, size, label, name, caption, onChange, value, ...props }: ThumbnailProps<'checkbox'> | ThumbnailProps<'figure'> | ThumbnailProps<undefined>) => {
+export declare const useThumbnail: ({ selected, disabled, clickable, focused, hasCaptionPlaceholder, src, filename: filename_, size, label, error, name, caption, onChange, value, ...props }: ThumbnailProps<'checkbox'> | ThumbnailProps<'figure'> | ThumbnailProps<undefined>) => {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -289,7 +291,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;
@@ -299,6 +300,8 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     style?: React.CSSProperties | undefined;
     ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
 } | {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -587,7 +590,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;
@@ -597,6 +599,8 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     style?: React.CSSProperties | undefined;
     ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
 } | {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -909,7 +913,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;
@@ -919,6 +922,8 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     style?: React.CSSProperties | undefined;
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 } | {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -1231,7 +1236,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;
@@ -1241,6 +1245,8 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     style?: React.CSSProperties | undefined;
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 } | {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -1269,7 +1275,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     as: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
     role?: undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;
@@ -1279,6 +1284,8 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     style?: React.CSSProperties | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 } | {
+    error: string | boolean;
+    errorAriaDescription: string | undefined;
     label: string;
     caption: string;
     selected: boolean;
@@ -1307,7 +1314,6 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
     as: string;
     role?: undefined;
     alt: string;
-    error?: boolean | undefined;
     variant?: import("./ThumbnailDocumentIcon").ThumbnailDocumentIconVariant | undefined;
     tabIndex?: number | undefined;
     qa?: import("./Thumbnail.types").QaTags | undefined;

package/dist/Thumbnail/Thumbnail.hooks.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["selected", "disabled", "clickable", "focused", "hasCaptionPlaceholder", "src", "filename", "size", "label", "name", "caption", "onChange", "value"];
+var _excluded = ["selected", "disabled", "clickable", "focused", "hasCaptionPlaceholder", "src", "filename", "size", "label", "error", "name", "caption", "onChange", "value"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -11,7 +11,8 @@ import { useCheckbox } from '@react-aria/checkbox';
 import { useFocusRing } from '@react-aria/focus';
 import { useRef } from 'react';
 import { useToggleState } from 'react-stately';
-import { getIsFilePreviewableAsImage } from './Thumbnail.utils';
+import { useI18nContext } from '../_hooks/I18n';
+import { getIsFilePreviewableAsImage, resolveThumbnailErrorLabel } from './Thumbnail.utils';
 var defaultSize = 'lg';
 export var useThumbnail = function useThumbnail(_ref) {
   var selected = _ref.selected,
@@ -29,12 +30,15 @@ export var useThumbnail = function useThumbnail(_ref) {
     size = _ref$size === void 0 ? defaultSize : _ref$size,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
     name = _ref.name,
     _ref$caption = _ref.caption,
     caption = _ref$caption === void 0 ? '' : _ref$caption,
     onChange = _ref.onChange,
     value = _ref.value,
     props = _objectWithoutProperties(_ref, _excluded);
+  var i18n = useI18nContext();
   var a11yProps = props.role === 'figure' ? {
     as: 'figure'
   } : {
@@ -53,14 +57,18 @@ export var useThumbnail = function useThumbnail(_ref) {
   var shouldUsePlaceholder = isFileOrNonPreviewableImage || !src;
   var filename = filename_ !== null && filename_ !== void 0 ? filename_ : isFileOrNonPreviewableImage ? src.name : caption;
   var ariaLabel = label && caption ? "".concat(label, " ").concat(caption) : caption || label;
-  var _useCheckbox = useCheckbox({
+  var errorAriaDescription = error ? resolveThumbnailErrorLabel(i18n, error) : undefined;
+  var _useCheckbox = useCheckbox(_objectSpread(_objectSpread({
       isSelected: selected,
       isDisabled: disabled,
-      'aria-label': ariaLabel,
+      'aria-label': ariaLabel
+    }, error ? {
+      'aria-description': errorAriaDescription
+    } : {}), {}, {
       name: name,
       onChange: onChange,
       value: value
-    }, toggleState, inputRef),
+    }), toggleState, inputRef),
     inputProps = _useCheckbox.inputProps;
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -68,6 +76,8 @@ export var useThumbnail = function useThumbnail(_ref) {
   return _objectSpread(_objectSpread(_objectSpread({
     alt: props.alt || props.alt === '' ? props.alt : caption || label
   }, props), a11yProps), {}, {
+    error: error,
+    errorAriaDescription: errorAriaDescription,
     label: label,
     caption: caption,
     selected: toggleState.isSelected,

package/dist/Thumbnail/Thumbnail.hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.hooks.js","names":["useCheckbox","useFocusRing","useRef","useToggleState","getIsFilePreviewableAsImage","defaultSize","useThumbnail","_ref","selected","_ref$disabled","disabled","_ref$clickable","clickable","_ref$focused","focused","_ref$hasCaptionPlaceh","hasCaptionPlaceholder","src","filename_","filename","_ref$size","size","_ref$label","label","name","_ref$caption","caption","onChange","value","props","_objectWithoutProperties","_excluded","a11yProps","role","as","inputRef","toggleState","defaultSelected","layout","isFile","File","isImageURL","canPreviewFileAsImage","isFileOrNonPreviewableImage","shouldUsePlaceholder","ariaLabel","concat","_useCheckbox","isSelected","isDisabled","inputProps","_useFocusRing","isFocusVisible","focusProps","_objectSpread","alt"],"sources":["../../src/Thumbnail/Thumbnail.hooks.tsx"],"sourcesContent":["import { useCheckbox } from '@react-aria/checkbox'\nimport { useFocusRing } from '@react-aria/focus'\nimport type React from 'react'\nimport { useRef } from 'react'\nimport { useToggleState } from 'react-stately'\nimport type { LayoutVariant, ThumbnailProps } from './Thumbnail.types'\nimport { getIsFilePreviewableAsImage } from './Thumbnail.utils'\n\nconst defaultSize = 'lg'\n\nexport const useThumbnail = ({\n  selected,\n  disabled = false,\n  clickable = true,\n  focused = false,\n  hasCaptionPlaceholder = false,\n  src,\n  filename: filename_,\n  size = defaultSize,\n  label = '',\n  // @ts-ignore  Checkbox only\n  name,\n  caption = '',\n  // @ts-ignore  Checkbox only\n  onChange,\n  // @ts-ignore  Checkbox only\n  value,\n  ...props\n}:\n  | ThumbnailProps<'checkbox'>\n  | ThumbnailProps<'figure'>\n  | ThumbnailProps<undefined>) => {\n  const a11yProps =\n    props.role === 'figure'\n      ? { as: 'figure' as React.ElementType }\n      : { as: 'div' }\n  const inputRef = useRef<HTMLInputElement>(null)\n  const toggleState = useToggleState({\n    defaultSelected: selected,\n    onChange,\n  })\n  const layout: LayoutVariant = size === 'sm' ? 'row' : 'column'\n  const isFile = src instanceof File\n  const isImageURL = typeof src === 'string'\n  const canPreviewFileAsImage = getIsFilePreviewableAsImage(src)\n  const isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage\n  const shouldUsePlaceholder = isFileOrNonPreviewableImage || !src\n  const filename =\n    filename_ ?? (isFileOrNonPreviewableImage ? (src as File).name : caption)\n  const ariaLabel = label && caption ? `${label} ${caption}` : caption || label\n  const { inputProps } = useCheckbox(\n    {\n      isSelected: selected,\n      isDisabled: disabled,\n      'aria-label': ariaLabel,\n      name,\n      onChange,\n      value,\n    },\n    toggleState,\n    inputRef\n  )\n  const { isFocusVisible, focusProps } = useFocusRing()\n\n  return {\n    alt: props.alt || props.alt === '' ? props.alt : caption || label,\n    ...props,\n    ...a11yProps,\n    label,\n    caption,\n    selected: toggleState.isSelected,\n    disabled,\n    clickable,\n    focused,\n    isImageURL,\n    hasCaptionPlaceholder,\n    shouldUsePlaceholder,\n    src,\n    filename,\n    size,\n    layout,\n    inputRef,\n    inputProps,\n    /**\n     * Appeared 23-1-18 https://github.com/procore/core/pull/12250\n     * Possible issue with types from React Aria during dependency update\n     * > The inferred type of 'useThumbnail' cannot be named without a\n     * > reference to '@react-aria/focus/node_modules/@react-types/shared'.\n     * > This is likely not portable. A type annotation is necessary.\n     */\n    focusProps: focusProps as React.HTMLAttributes<HTMLDivElement>,\n    isFocusVisible,\n    toggleState,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Thumbnail.hooks.js","names":["useCheckbox","useFocusRing","useRef","useToggleState","useI18nContext","getIsFilePreviewableAsImage","resolveThumbnailErrorLabel","defaultSize","useThumbnail","_ref","selected","_ref$disabled","disabled","_ref$clickable","clickable","_ref$focused","focused","_ref$hasCaptionPlaceh","hasCaptionPlaceholder","src","filename_","filename","_ref$size","size","_ref$label","label","_ref$error","error","name","_ref$caption","caption","onChange","value","props","_objectWithoutProperties","_excluded","i18n","a11yProps","role","as","inputRef","toggleState","defaultSelected","layout","isFile","File","isImageURL","canPreviewFileAsImage","isFileOrNonPreviewableImage","shouldUsePlaceholder","ariaLabel","concat","errorAriaDescription","undefined","_useCheckbox","_objectSpread","isSelected","isDisabled","inputProps","_useFocusRing","isFocusVisible","focusProps","alt"],"sources":["../../src/Thumbnail/Thumbnail.hooks.tsx"],"sourcesContent":["import { useCheckbox } from '@react-aria/checkbox'\nimport { useFocusRing } from '@react-aria/focus'\nimport type React from 'react'\nimport { useRef } from 'react'\nimport { useToggleState } from 'react-stately'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { LayoutVariant, ThumbnailProps } from './Thumbnail.types'\nimport {\n  getIsFilePreviewableAsImage,\n  resolveThumbnailErrorLabel,\n} from './Thumbnail.utils'\n\nconst defaultSize = 'lg'\n\nexport const useThumbnail = ({\n  selected,\n  disabled = false,\n  clickable = true,\n  focused = false,\n  hasCaptionPlaceholder = false,\n  src,\n  filename: filename_,\n  size = defaultSize,\n  label = '',\n  error = false,\n  // @ts-ignore  Checkbox only\n  name,\n  caption = '',\n  // @ts-ignore  Checkbox only\n  onChange,\n  // @ts-ignore  Checkbox only\n  value,\n  ...props\n}:\n  | ThumbnailProps<'checkbox'>\n  | ThumbnailProps<'figure'>\n  | ThumbnailProps<undefined>) => {\n  const i18n = useI18nContext()\n  const a11yProps =\n    props.role === 'figure'\n      ? { as: 'figure' as React.ElementType }\n      : { as: 'div' }\n  const inputRef = useRef<HTMLInputElement>(null)\n  const toggleState = useToggleState({\n    defaultSelected: selected,\n    onChange,\n  })\n  const layout: LayoutVariant = size === 'sm' ? 'row' : 'column'\n  const isFile = src instanceof File\n  const isImageURL = typeof src === 'string'\n  const canPreviewFileAsImage = getIsFilePreviewableAsImage(src)\n  const isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage\n  const shouldUsePlaceholder = isFileOrNonPreviewableImage || !src\n  const filename =\n    filename_ ?? (isFileOrNonPreviewableImage ? (src as File).name : caption)\n  const ariaLabel = label && caption ? `${label} ${caption}` : caption || label\n  const errorAriaDescription = error\n    ? resolveThumbnailErrorLabel(i18n, error)\n    : undefined\n  const { inputProps } = useCheckbox(\n    {\n      isSelected: selected,\n      isDisabled: disabled,\n      'aria-label': ariaLabel,\n      ...(error ? { 'aria-description': errorAriaDescription } : {}),\n      name,\n      onChange,\n      value,\n    },\n    toggleState,\n    inputRef\n  )\n  const { isFocusVisible, focusProps } = useFocusRing()\n\n  return {\n    alt: props.alt || props.alt === '' ? props.alt : caption || label,\n    ...props,\n    ...a11yProps,\n    error,\n    errorAriaDescription,\n    label,\n    caption,\n    selected: toggleState.isSelected,\n    disabled,\n    clickable,\n    focused,\n    isImageURL,\n    hasCaptionPlaceholder,\n    shouldUsePlaceholder,\n    src,\n    filename,\n    size,\n    layout,\n    inputRef,\n    inputProps,\n    /**\n     * Appeared 23-1-18 https://github.com/procore/core/pull/12250\n     * Possible issue with types from React Aria during dependency update\n     * > The inferred type of 'useThumbnail' cannot be named without a\n     * > reference to '@react-aria/focus/node_modules/@react-types/shared'.\n     * > This is likely not portable. A type annotation is necessary.\n     */\n    focusProps: focusProps as React.HTMLAttributes<HTMLDivElement>,\n    isFocusVisible,\n    toggleState,\n  }\n}\n"],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.js

@@ -117,7 +117,8 @@ var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(pro
     $size: thumbnail.size,
     tabIndex: 0,
     role: "group",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-description": thumbnail.errorAriaDescription
   }, wrapperProps), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
     $focused: thumbnail.focused,
     $disabled: thumbnail.disabled,
@@ -169,7 +170,8 @@ var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder
     $size: thumbnail.size,
     tabIndex: 0,
     role: "group",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-description": thumbnail.errorAriaDescription
   }, wrapperProps), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
     $focused: thumbnail.focused,
     $disabled: thumbnail.disabled,
@@ -333,7 +335,8 @@ var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props,
     $size: thumbnail.size,
     tabIndex: 0,
     role: "group",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-description": thumbnail.errorAriaDescription
   }, wrapperProps), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
     $focused: thumbnail.focused,
     $disabled: thumbnail.disabled,
@@ -384,7 +387,8 @@ var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(pro
     $size: thumbnail.size,
     tabIndex: 0,
     role: "group",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-description": thumbnail.errorAriaDescription
   }, /*#__PURE__*/React.createElement(StyledImageThumbnail, {
     ref: ref,
     $focused: thumbnail.focused,