@procore/core-react 12.39.0 → 12.40.0

package/dist/Dropzone/Dropzone.styles.js

@@ -9,15 +9,15 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledErrorBanner = /*#__PURE__*/styled(ErrorBannerBase).withConfig({
   displayName: "StyledErrorBanner",
-  componentId: "core-12_39_0__sc-by95hy-0"
+  componentId: "core-12_40_0__sc-by95hy-0"
 })(["margin-top:", "px;flex-shrink:0;"], spacing.lg);
 export var StyledErrorBannerDetails = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledErrorBannerDetails",
-  componentId: "core-12_39_0__sc-by95hy-1"
+  componentId: "core-12_40_0__sc-by95hy-1"
 })(["margin:", "px;padding:0;list-style-position:inside;list-style-type:disc;"], spacing.xs);
 export var StyledDropzoneIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDropzoneIcon",
-  componentId: "core-12_39_0__sc-by95hy-2"
+  componentId: "core-12_40_0__sc-by95hy-2"
 })(["display:flex;justify-content:center;align-items:center;height:64px;color:", ";margin-bottom:", "px;transition:all 250ms ease-out;", " svg{width:auto;height:100%;}"], colors.gray45, spacing.lg, function (_ref) {
   var $disabled = _ref.$disabled;
   return $disabled && css(["height:72px;margin-bottom:", "px;"], spacing.sm);
@@ -26,7 +26,7 @@ var activeDropzone = /*#__PURE__*/css(["outline:none;border:2px dashed ", ";back
 var disabledDropzone = /*#__PURE__*/css(["color:", ";border:2px dashed ", ";background-color:", ";cursor:not-allowed;& ", "{color:", ";transform:none;}"], colors.gray70, colors.gray85, colors.gray98, StyledDropzoneIcon, colors.gray85);
 export var StyledDropzoneContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDropzoneContainer",
-  componentId: "core-12_39_0__sc-by95hy-3"
+  componentId: "core-12_40_0__sc-by95hy-3"
 })(["", " display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:100%;min-height:92px;padding:", "px;color:", ";border:2px dashed ", ";background-color:", ";border-radius:", "px;text-align:center;letter-spacing:0.25px;transition:all 250ms ease-out;cursor:grab;", " ", " ", " ", ""], getTypographyIntent('body'), spacing.lg, colors.gray40, colors.gray70, colors.gray96, borderRadius.md, function (_ref2) {
   var $disabled = _ref2.$disabled;
   return !$disabled && css(["&:hover{", "}"], activeDropzone);
@@ -43,25 +43,25 @@ export var StyledDropzoneContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledDropzoneMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDropzoneMessage",
-  componentId: "core-12_39_0__sc-by95hy-4"
+  componentId: "core-12_40_0__sc-by95hy-4"
 })(["user-select:none;"]);
 export var StyledUploadButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledUploadButton",
-  componentId: "core-12_39_0__sc-by95hy-5"
+  componentId: "core-12_40_0__sc-by95hy-5"
 })(["display:block;margin-left:auto;margin-right:auto;margin-bottom:", "px;"], spacing.sm);
 export var StyledDropzoneCaption = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledDropzoneCaption",
-  componentId: "core-12_39_0__sc-by95hy-6"
+  componentId: "core-12_40_0__sc-by95hy-6"
 })(["color:", ";"], function (_ref6) {
   var $error = _ref6.$error;
   return $error && colors.gray15;
 });
 export var StyledDropzoneWrapper = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledDropzoneWrapper",
-  componentId: "core-12_39_0__sc-by95hy-7"
+  componentId: "core-12_40_0__sc-by95hy-7"
 })(["height:100%;"]);
 export var StyledDropzoneFocusDetector = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledDropzoneFocusDetector",
-  componentId: "core-12_39_0__sc-by95hy-8"
+  componentId: "core-12_40_0__sc-by95hy-8"
 })(["height:100%;"]);
 //# sourceMappingURL=Dropzone.styles.js.map

package/dist/EmptyState/EmptyState.styles.js

@@ -5,27 +5,27 @@ import { spacing } from '../_styles/spacing';
 var emptyStateWidth = 312;
 export var StyledSvg = /*#__PURE__*/styled.svg.withConfig({
   displayName: "StyledSvg",
-  componentId: "core-12_39_0__sc-1xaoo8n-0"
+  componentId: "core-12_40_0__sc-1xaoo8n-0"
 })(["width:200px;height:200px;"]);
 export var StyledImage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImage",
-  componentId: "core-12_39_0__sc-1xaoo8n-1"
+  componentId: "core-12_40_0__sc-1xaoo8n-1"
 })([""]);
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_39_0__sc-1xaoo8n-2"
+  componentId: "core-12_40_0__sc-1xaoo8n-2"
 })(["color:", ";max-width:", "px;width:100%;", ""], colors.gray15, emptyStateWidth, getTypographyIntent('h2'));
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDescription",
-  componentId: "core-12_39_0__sc-1xaoo8n-3"
+  componentId: "core-12_40_0__sc-1xaoo8n-3"
 })(["margin-top:", "px;color:", ";max-width:", "px;width:100%;", ""], spacing.lg, colors.gray45, emptyStateWidth, getTypographyIntent('body'));
 export var StyledActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledActions",
-  componentId: "core-12_39_0__sc-1xaoo8n-4"
+  componentId: "core-12_40_0__sc-1xaoo8n-4"
 })(["margin-top:", "px;"], spacing.xl);
 export var StyledEmptyState = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledEmptyState",
-  componentId: "core-12_39_0__sc-1xaoo8n-5"
+  componentId: "core-12_40_0__sc-1xaoo8n-5"
 })(["display:flex;justify-content:center;align-items:", ";gap:", "px;flex-direction:", ";margin-top:", "px;margin-bottom:", "px;", "{> img{max-width:200px;}}", " ", "}"], function (_ref) {
   var $isHorizontal = _ref.$isHorizontal;
   return $isHorizontal ? 'flex-start' : 'center';

package/dist/Field/Field.styles.js

@@ -2,14 +2,14 @@ import styled from 'styled-components';
 import { getSmallIconBodyTextRules, StyledP } from '../Semantic/Semantic.styles';
 export var StyledField = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledField",
-  componentId: "core-12_39_0__sc-1q3pe6s-0"
+  componentId: "core-12_40_0__sc-1q3pe6s-0"
 })(["> ", "{", "}"], StyledP, getSmallIconBodyTextRules);
 export var StyledFieldHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFieldHeader",
-  componentId: "core-12_39_0__sc-1q3pe6s-1"
+  componentId: "core-12_40_0__sc-1q3pe6s-1"
 })(["", " > ", "{", "}"], getSmallIconBodyTextRules, StyledP, getSmallIconBodyTextRules);
 export var StyledFieldFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFieldFooter",
-  componentId: "core-12_39_0__sc-1q3pe6s-2"
+  componentId: "core-12_40_0__sc-1q3pe6s-2"
 })(["> ", "{", "}"], StyledP, getSmallIconBodyTextRules);
 //# sourceMappingURL=Field.styles.js.map

package/dist/FileList/FileList.styles.js

@@ -3,14 +3,14 @@ import { LinkButton } from '../Button/Button';
 import { spacing } from '../_styles/spacing';
 export var StyledFileListDownloadAll = /*#__PURE__*/styled(LinkButton).withConfig({
   displayName: "StyledFileListDownloadAll",
-  componentId: "core-12_39_0__sc-7gltjc-0"
+  componentId: "core-12_40_0__sc-7gltjc-0"
 })(["margin-bottom:", "px;"], spacing.xs);
 export var StyledFileListItem = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledFileListItem",
-  componentId: "core-12_39_0__sc-7gltjc-1"
+  componentId: "core-12_40_0__sc-7gltjc-1"
 })(["display:flex;align-items:center;margin-bottom:", "px;word-break:break-word;&:last-child{margin-bottom:0;}"], spacing.xs);
 export var StyledFileListItemDownloadIcon = /*#__PURE__*/styled(LinkButton).withConfig({
   displayName: "StyledFileListItemDownloadIcon",
-  componentId: "core-12_39_0__sc-7gltjc-2"
+  componentId: "core-12_40_0__sc-7gltjc-2"
 })(["margin-left:", "px;align-self:flex-start;"], spacing.sm);
 //# sourceMappingURL=FileList.styles.js.map

package/dist/FileSelect/FileExplorer/FileExplorer.styles.js

@@ -12,40 +12,40 @@ var modalContainerMaxHeight = 996;
 var modalContainerMargin = 80;
 export var StyledModalOverlay = /*#__PURE__*/styled(Modal.Overlay).withConfig({
   displayName: "StyledModalOverlay",
-  componentId: "core-12_39_0__sc-343gts-0"
+  componentId: "core-12_40_0__sc-343gts-0"
 })(["opacity:0;pointer-events:none;transition:opacity 0.3s linear;visibility:hidden;", ""], function (props) {
   return props.$open && "\n  opacity: 1;\n  pointer-events: all;\n  visibility: visible;\n  ";
 });
 export var StyledModalContainer = /*#__PURE__*/styled(Modal.Container).withConfig({
   displayName: "StyledModalContainer",
-  componentId: "core-12_39_0__sc-343gts-1"
+  componentId: "core-12_40_0__sc-343gts-1"
 })(["width:calc(100% - ", "px);height:calc(100% - ", "px);top:calc(50vh - ", "px);left:calc(50vw - ", "px);margin:", "px;min-width:", "px;min-height:", "px;max-width:", "px;max-height:", "px;"], modalContainerMargin * 2, modalContainerMargin * 2, modalContainerMargin, modalContainerMargin, modalContainerMargin, modalContainerMinWidth, modalContainerMinHeight, modalContainerMaxWidth, modalContainerMaxHeight);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_39_0__sc-343gts-2"
+  componentId: "core-12_40_0__sc-343gts-2"
 })(["min-height:", "px;height:100%;margin:0;max-width:none;padding:0;border-bottom:1px solid ", ";"], modalBodyMinHeight, colors.gray85);
 export var StyledModalInnerBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalInnerBody",
-  componentId: "core-12_39_0__sc-343gts-3"
+  componentId: "core-12_40_0__sc-343gts-3"
 })(["display:flex;flex-direction:row;height:100%;overflow:hidden;"]);
 export var StyledModalHeader = /*#__PURE__*/styled(Modal.Header).withConfig({
   displayName: "StyledModalHeader",
-  componentId: "core-12_39_0__sc-343gts-4"
+  componentId: "core-12_40_0__sc-343gts-4"
 })(["border-bottom:1px solid ", ";"], colors.gray85);
 export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalContent",
-  componentId: "core-12_39_0__sc-343gts-5"
+  componentId: "core-12_40_0__sc-343gts-5"
 })(["display:flex;width:100%;height:100%;overflow-y:auto;outline:none;"]);
 export var StyledSource = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSource",
-  componentId: "core-12_39_0__sc-343gts-6"
+  componentId: "core-12_40_0__sc-343gts-6"
 })(["width:100%;height:100%;"]);
 export var StyledAttachButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAttachButton",
-  componentId: "core-12_39_0__sc-343gts-7"
+  componentId: "core-12_40_0__sc-343gts-7"
 })(["margin-left:", "px;"], spacing.md);
 export var StyledFileTreeSpinner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileTreeSpinner",
-  componentId: "core-12_39_0__sc-343gts-8"
+  componentId: "core-12_40_0__sc-343gts-8"
 })(["display:flex;align-items:center;justify-content:center;height:100%;"]);
 //# sourceMappingURL=FileExplorer.styles.js.map

package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js

@@ -3,14 +3,14 @@ import { colors } from '../../_styles/colors';
 import { SourceItem } from '../SourceItem/SourceItem';
 export var StyledSidebar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSidebar",
-  componentId: "core-12_39_0__sc-s03uiv-0"
+  componentId: "core-12_40_0__sc-s03uiv-0"
 })(["display:flex;flex-shrink:0;width:300px;border-right:1px solid ", ";"], colors.gray85);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_39_0__sc-s03uiv-1"
+  componentId: "core-12_40_0__sc-s03uiv-1"
 })(["display:flex;flex-direction:column;width:100%;&:focus{outline:none;}"]);
 export var StyledSourceItem = /*#__PURE__*/styled(SourceItem).withConfig({
   displayName: "StyledSourceItem",
-  componentId: "core-12_39_0__sc-s03uiv-2"
+  componentId: "core-12_40_0__sc-s03uiv-2"
 })(["width:100%;padding-left:10px;&:focus{padding-left:9px;}"]);
 //# sourceMappingURL=FileExplorerSidebar.styles.js.map

package/dist/FileSelect/FileSelect.styles.js

@@ -3,10 +3,10 @@ import { spacing } from '../_styles/spacing';
 import { FileTokenList } from './FileTokenList';
 export var StyledFileTokenList = /*#__PURE__*/styled(FileTokenList).withConfig({
   displayName: "StyledFileTokenList",
-  componentId: "core-12_39_0__sc-1r3srjk-0"
+  componentId: "core-12_40_0__sc-1r3srjk-0"
 })(["margin-top:", "px;"], spacing.md);
 export var StyledFileSelect = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileSelect",
-  componentId: "core-12_39_0__sc-1r3srjk-1"
+  componentId: "core-12_40_0__sc-1r3srjk-1"
 })(["display:flex;flex-direction:column;"]);
 //# sourceMappingURL=FileSelect.styles.js.map

package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js

@@ -5,20 +5,20 @@ import { spacing } from '../../_styles/spacing';
 export var dropzoneContainerAttr = 'data-dropzone-container';
 export var StyledDropzone = /*#__PURE__*/styled(Dropzone).withConfig({
   displayName: "StyledDropzone",
-  componentId: "core-12_39_0__sc-ueh7d7-0"
+  componentId: "core-12_40_0__sc-ueh7d7-0"
 })(["", ""], function (_ref) {
   var hidden = _ref.hidden;
   return hidden && "\n    [".concat(dropzoneContainerAttr, "] {\n      align-self: flex-start;\n      margin-bottom: ").concat(spacing.xs, "px;\n\n      &,\n      &:hover {\n        width: auto;\n        min-height: auto;\n        border: none;\n        padding: 0;\n        background: transparent;\n        cursor: default;\n      }\n    }\n  \n  ");
 });
 export var StyledDropzoneMessage = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledDropzoneMessage",
-  componentId: "core-12_39_0__sc-ueh7d7-1"
+  componentId: "core-12_40_0__sc-ueh7d7-1"
 })(["", ""], function (_ref2) {
   var error = _ref2.error;
   return error && "\n    color: ".concat(colors.gray15, ";\n  ");
 });
 export var StyledUploadButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledUploadButtonWrapper",
-  componentId: "core-12_39_0__sc-ueh7d7-2"
+  componentId: "core-12_40_0__sc-ueh7d7-2"
 })(["display:block;margin-left:auto;margin-right:auto;margin-bottom:", "px;"], spacing.sm);
 //# sourceMappingURL=FileSelectDropzone.styles.js.map

package/dist/FileSelect/FileTokenList/FileTokenList.styles.js

@@ -3,10 +3,10 @@ import { FileToken } from '../../FileToken/FileToken';
 import { spacing } from '../../_styles/spacing';
 export var StyledTokenList = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTokenList",
-  componentId: "core-12_39_0__sc-u9tli5-0"
-})(["display:flex;flex-wrap:wrap;"]);
+  componentId: "core-12_40_0__sc-u9tli5-0"
+})(["display:flex;flex-wrap:wrap;align-items:flex-start;"]);
 export var StyledFileToken = /*#__PURE__*/styled(FileToken).withConfig({
   displayName: "StyledFileToken",
-  componentId: "core-12_39_0__sc-u9tli5-1"
+  componentId: "core-12_40_0__sc-u9tli5-1"
 })(["margin-bottom:", "px;margin-right:", "px;"], spacing.sm, spacing.sm);
 //# sourceMappingURL=FileTokenList.styles.js.map

package/dist/FileSelect/FileTokenList/FileTokenList.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTokenList.styles.js","names":["styled","FileToken","spacing","StyledTokenList","div","withConfig","displayName","componentId","StyledFileToken","sm"],"sources":["../../../src/FileSelect/FileTokenList/FileTokenList.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { FileToken } from '../../FileToken/FileToken'\nimport { spacing } from '../../_styles/spacing'\n\nexport const StyledTokenList = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n`\n\nexport const StyledFileToken = styled(FileToken)`\n  margin-bottom: ${spacing.sm}px;\n  margin-right: ${spacing.sm}px;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,2BAA2B;AACrD,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,OAAO,IAAMC,eAAe,gBAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGxC;AAED,OAAO,IAAMC,eAAe,gBAAGR,MAAM,CAACC,SAAS,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAC7BL,OAAO,CAACO,EAAE,EACXP,OAAO,CAACO,EAAE,CAC3B"}
+{"version":3,"file":"FileTokenList.styles.js","names":["styled","FileToken","spacing","StyledTokenList","div","withConfig","displayName","componentId","StyledFileToken","sm"],"sources":["../../../src/FileSelect/FileTokenList/FileTokenList.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { FileToken } from '../../FileToken/FileToken'\nimport { spacing } from '../../_styles/spacing'\n\nexport const StyledTokenList = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n`\n\nexport const StyledFileToken = styled(FileToken)`\n  margin-bottom: ${spacing.sm}px;\n  margin-right: ${spacing.sm}px;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,2BAA2B;AACrD,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,OAAO,IAAMC,eAAe,gBAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2DAIxC;AAED,OAAO,IAAMC,eAAe,gBAAGR,MAAM,CAACC,SAAS,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAC7BL,OAAO,CAACO,EAAE,EACXP,OAAO,CAACO,EAAE,CAC3B"}

package/dist/FileSelect/GridSource/GridSource.styles.js

@@ -13,7 +13,7 @@ export var contentHeight = modalBodyWidth - modalBodyBorderTopWidth - toolbarHei
 // TODO Update box-shadow to use getShadow instead
 export var StyledToolbar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolbar",
-  componentId: "core-12_39_0__sc-1sj6hvp-0"
+  componentId: "core-12_40_0__sc-1sj6hvp-0"
 })(["display:flex;align-items:center;flex-direction:row;width:100%;min-height:", "px;padding:16px 24px;", " ", " & > * + *{margin-left:", "px;}"], toolbarHeight, function (_ref) {
   var $alignRight = _ref.$alignRight;
   return css(["justify-content:", ";"], $alignRight ? 'flex-end' : 'space-between');
@@ -23,23 +23,23 @@ export var StyledToolbar = /*#__PURE__*/styled.div.withConfig({
 }, spacing.sm);
 export var StyledSearchWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearchWrapper",
-  componentId: "core-12_39_0__sc-1sj6hvp-1"
+  componentId: "core-12_40_0__sc-1sj6hvp-1"
 })(["width:286px;flex-shrink:1;min-width:180px;"]);
 export var StyledEmptyStateWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledEmptyStateWrapper",
-  componentId: "core-12_39_0__sc-1sj6hvp-2"
+  componentId: "core-12_40_0__sc-1sj6hvp-2"
 })(["width:100%;height:100%;display:flex;justify-content:center;align-items:center;"]);
 export var StyledEmptyState = /*#__PURE__*/styled(EmptyState).withConfig({
   displayName: "StyledEmptyState",
-  componentId: "core-12_39_0__sc-1sj6hvp-3"
+  componentId: "core-12_40_0__sc-1sj6hvp-3"
 })(["margin-top:0;margin-bottom:0;img{width:160px;}"]);
 export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSpinnerWrapper",
-  componentId: "core-12_39_0__sc-1sj6hvp-4"
+  componentId: "core-12_40_0__sc-1sj6hvp-4"
 })(["height:", "px;width:100%;display:flex;align-items:center;justify-content:center;"], contentHeight);
 export var StyledGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGrid",
-  componentId: "core-12_39_0__sc-1sj6hvp-5"
+  componentId: "core-12_40_0__sc-1sj6hvp-5"
 })(["display:flex;flex-direction:column;", ""], function (_ref3) {
   var $isEmpty = _ref3.$isEmpty;
   return $isEmpty && 'height: 100%;';

package/dist/FileSelect/LocalSource/LocalSource.styles.js

@@ -15,21 +15,21 @@ var dropzoneHeightWithIcon = 176;
 var sourceWidth = 568;
 export var StyledLocalSource = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLocalSource",
-  componentId: "core-12_39_0__sc-psqe8z-0"
+  componentId: "core-12_40_0__sc-psqe8z-0"
 })(["display:flex;flex-grow:1;flex-direction:column;align-items:stretch;height:", "px;max-height:", "px;padding:", "px ", "px ", "px ", "px;overflow-y:hidden;"], contentHeight, contentHeight, spacing.xl, spacing.xl + spacing.lg, spacing.xl, spacing.xl);
 export var StyledDropzoneErrorBanner = /*#__PURE__*/styled(DropzoneErrorBanner).withConfig({
   displayName: "StyledDropzoneErrorBanner",
-  componentId: "core-12_39_0__sc-psqe8z-1"
+  componentId: "core-12_40_0__sc-psqe8z-1"
 })(["margin-top:", "px;margin-bottom:", "px;margin-right:2px;"], errorBannerMarginTop, errorBannerMarginBottom);
 export var StyledDropzoneWrapper = /*#__PURE__*/styled(Dropzone).withConfig({
   displayName: "StyledDropzoneWrapper",
-  componentId: "core-12_39_0__sc-psqe8z-2"
+  componentId: "core-12_40_0__sc-psqe8z-2"
 })(["display:flex;height:auto;min-height:", "px;> div:first-child{display:flex;height:auto;}> ", "{display:none;}@media ", "{width:", "px;> div:first-child{height:100%;}}"], function (_ref) {
   var isIconVisible = _ref.isIconVisible;
   return isIconVisible ? dropzoneHeightWithIcon : dropzoneHeight;
 }, DropzoneErrorBanner, mediaIE11Hack, sourceWidth);
 export var StyledThumbnailList = /*#__PURE__*/styled(ThumbnailList).withConfig({
   displayName: "StyledThumbnailList",
-  componentId: "core-12_39_0__sc-psqe8z-3"
+  componentId: "core-12_40_0__sc-psqe8z-3"
 })(["margin-top:", "px;border:", "px solid ", ";"], listMarginTop, listBorderWidth, colors.gray85);
 //# sourceMappingURL=LocalSource.styles.js.map

package/dist/FileSelect/SourceItem/SourceItem.styles.js

@@ -8,7 +8,7 @@ var sourceItemPadding = spacing.xl;
 var focused = /*#__PURE__*/css(["", " padding:0 ", "px 0 ", "px;"], getFocus(), sourceItemPadding - 1, sourceItemPadding - 1);
 export var StyledSourceItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSourceItem",
-  componentId: "core-12_39_0__sc-plcozv-0"
+  componentId: "core-12_40_0__sc-plcozv-0"
 })(["position:relative;display:flex;align-items:center;padding:0 ", "px 0 ", "px;color:", ";", " cursor:pointer;height:", "px;&:before{content:'';position:absolute;top:0;left:0;display:block;width:4px;height:100%;background-color:", ";transform:scaleX(0);transform-origin:center left;transition:transform 200ms ease-out;z-index:1;}", " ", " ", " ", " ", " &:focus{", "}"], sourceItemPadding, sourceItemPadding, colors.gray45, getTypographyIntent('body'), sourceItemHeight, colors.blue45, function (_ref) {
   var selected = _ref.selected;
   return selected && "\n    font-weight: 700;\n    background-color: ".concat(colors.blue96, ";\n    color: ").concat(colors.blue45, ";\n\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.blue50, ";\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  ");
@@ -28,10 +28,10 @@ export var StyledSourceItem = /*#__PURE__*/styled.div.withConfig({
 }, focused);
 export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIcon",
-  componentId: "core-12_39_0__sc-plcozv-1"
+  componentId: "core-12_40_0__sc-plcozv-1"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;"]);
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_39_0__sc-plcozv-2"
+  componentId: "core-12_40_0__sc-plcozv-2"
 })(["", ""], getEllipsis());
 //# sourceMappingURL=SourceItem.styles.js.map

package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js

@@ -7,23 +7,23 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledThumbnailListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailListContainer",
-  componentId: "core-12_39_0__sc-1fz4ynb-0"
+  componentId: "core-12_40_0__sc-1fz4ynb-0"
 })(["display:flex;flex-direction:column;align-items:stretch;outline:none;"]);
 export var StyledThumbnailList = /*#__PURE__*/styled(List).withConfig({
   displayName: "StyledThumbnailList",
-  componentId: "core-12_39_0__sc-1fz4ynb-1"
+  componentId: "core-12_40_0__sc-1fz4ynb-1"
 })(["outline:none;"]);
 export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
   displayName: "StyledThumbnail",
-  componentId: "core-12_39_0__sc-1fz4ynb-2"
+  componentId: "core-12_40_0__sc-1fz4ynb-2"
 })(["flex-grow:1;justify-content:flex-start;"]);
 export var StyledProgress = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgress",
-  componentId: "core-12_39_0__sc-1fz4ynb-3"
+  componentId: "core-12_40_0__sc-1fz4ynb-3"
 })(["width:146px;padding:0 ", "px 0 ", "px;margin-left:auto;"], spacing.lg, spacing.xl);
 export var StyledThumbnailListItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailListItem",
-  componentId: "core-12_39_0__sc-1fz4ynb-4"
+  componentId: "core-12_40_0__sc-1fz4ynb-4"
 })(["display:flex;flex-grow:1;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, getTypographyIntent('body'), function (_ref) {
   var error = _ref.error;
   return !error && "\n      &:hover {\n        background-color: ".concat(colors.gray96, ";\n      }\n    ");
@@ -37,6 +37,6 @@ export var StyledThumbnailListItem = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledDeleteIcon = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledDeleteIcon",
-  componentId: "core-12_39_0__sc-1fz4ynb-5"
+  componentId: "core-12_40_0__sc-1fz4ynb-5"
 })([""]);
 //# sourceMappingURL=ThumbnailList.styles.js.map

package/dist/FileSelect/TreeSource/TreeSource.styles.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 import { modalBodyHeight } from '../FileExplorer/FileExplorer.styles';
 export var StyledFileTreeSpinner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileTreeSpinner",
-  componentId: "core-12_39_0__sc-wwu3n8-0"
+  componentId: "core-12_40_0__sc-wwu3n8-0"
 })(["display:flex;align-items:center;justify-content:center;height:", "px;"], modalBodyHeight);
 //# sourceMappingURL=TreeSource.styles.js.map

package/dist/FileToken/FileToken.js

@@ -13,9 +13,8 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import React from 'react';
 import { Loader } from '../Loader/Loader';
 import { loaderTransitionDuration } from '../Loader/Loader.styles';
-import { Tooltip } from '../Tooltip/Tooltip';
 import { useI18nContext } from '../_hooks/I18n';
-import { pulseAnimationDuration, StyledFileToken } from './FileToken.styles';
+import { pulseAnimationDuration, StyledErrorMessage, StyledFileToken, StyledFileTokenErrorContainer } from './FileToken.styles';
 import { FileTokenInner } from './FileTokenInner';
 
 /**
@@ -79,21 +78,17 @@ export var FileToken = /*#__PURE__*/React.forwardRef(function FileToken(_ref, re
       qaCloseBtn: qa === null || qa === void 0 ? void 0 : qa.closeButton
     });
   };
-
-  // prevent empty tooltip blinks when navigating via the keyboard by wrapping in tooltip conditionally
   if (isError) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      ref: ref,
-      trigger: "hover",
-      overlay: errorMessage
-    }, /*#__PURE__*/React.createElement(StyledFileToken, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(StyledFileTokenErrorContainer, _extends({}, props, {
+      ref: ref
+    }), /*#__PURE__*/React.createElement(StyledFileToken, {
       $error: isError,
       $finalized: isFinalized,
       $progressComplete: isProgressComplete
-    }), renderToken(true), /*#__PURE__*/React.createElement(Loader, {
+    }, renderToken(true), /*#__PURE__*/React.createElement(Loader, {
       value: progressValue,
       animated: true
-    }, renderToken())));
+    }, renderToken())), /*#__PURE__*/React.createElement(StyledErrorMessage, null, errorMessage));
   }
   return /*#__PURE__*/React.createElement(StyledFileToken, _extends({}, props, {
     $error: isError,

package/dist/FileToken/FileToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileToken.js","names":["useId","VisuallyHidden","React","Loader","loaderTransitionDuration","Tooltip","useI18nContext","pulseAnimationDuration","StyledFileToken","FileTokenInner","FileToken","forwardRef","_ref","ref","fileName","_ref$progressValue","progressValue","_ref$errorMessage","errorMessage","onLabelClick","onClose","qa","props","_objectWithoutProperties","_excluded","i18n","isError","Boolean","isProgressValueComplete","_React$useState","useState","_React$useState2","_slicedToArray","isProgressComplete","setProgressComplete","_React$useState3","_React$useState4","isFinalized","setFinalized","didMountRef","useRef","progressBarLabelId","useEffect","timerId","window","setTimeout","clearTimeout","current","renderToken","includeInTabOrder","arguments","length","undefined","createElement","fullFilename","onClick","qaCloseBtn","closeButton","trigger","overlay","_extends","$error","$finalized","$progressComplete","value","animated","id","t","role","concat","displayName"],"sources":["../../src/FileToken/FileToken.tsx"],"sourcesContent":["import { useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport { Loader } from '../Loader/Loader'\nimport { loaderTransitionDuration } from '../Loader/Loader.styles'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { pulseAnimationDuration, StyledFileToken } from './FileToken.styles'\nimport type { FileTokenProps } from './FileToken.types'\nimport { FileTokenInner } from './FileTokenInner'\n\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development.\n */\nexport const FileToken = React.forwardRef<\n  HTMLDivElement,\n  FileTokenProps & React.HTMLAttributes<HTMLDivElement>\n>(function FileToken(\n  {\n    fileName,\n    progressValue = 0,\n    errorMessage = '',\n    onLabelClick,\n    onClose,\n    qa,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const isError = Boolean(errorMessage)\n\n  const isProgressValueComplete = !isError && progressValue >= 100\n\n  const [isProgressComplete, setProgressComplete] = React.useState(\n    isProgressValueComplete\n  )\n\n  const [isFinalized, setFinalized] = React.useState(false)\n\n  const didMountRef = React.useRef(false)\n\n  const progressBarLabelId = useId()\n\n  React.useEffect(() => {\n    const timerId: number | null = isProgressValueComplete\n      ? window.setTimeout(() => {\n          setProgressComplete(true)\n        }, loaderTransitionDuration)\n      : null\n\n    if (!isProgressValueComplete) {\n      setProgressComplete(false)\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressValueComplete])\n\n  React.useEffect(() => {\n    const isFinalized = didMountRef.current && isProgressComplete\n    const timerId: number | null = isFinalized\n      ? window.setTimeout(() => {\n          setFinalized(false)\n        }, pulseAnimationDuration)\n      : null\n\n    setFinalized(didMountRef.current && isProgressComplete)\n\n    if (!didMountRef.current) {\n      didMountRef.current = true\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressComplete])\n\n  const renderToken = (includeInTabOrder = false) => (\n    <FileTokenInner\n      fullFilename={fileName}\n      includeInTabOrder={includeInTabOrder}\n      onClick={onLabelClick}\n      onClose={onClose}\n      qaCloseBtn={qa?.closeButton}\n    />\n  )\n\n  // prevent empty tooltip blinks when navigating via the keyboard by wrapping in tooltip conditionally\n  if (isError) {\n    return (\n      <Tooltip ref={ref} trigger=\"hover\" overlay={errorMessage}>\n        <StyledFileToken\n          {...props}\n          $error={isError}\n          $finalized={isFinalized}\n          $progressComplete={isProgressComplete}\n        >\n          {renderToken(true)}\n          <Loader value={progressValue} animated>\n            {renderToken()}\n          </Loader>\n        </StyledFileToken>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <StyledFileToken\n      {...props}\n      $error={isError}\n      $finalized={isFinalized}\n      $progressComplete={isProgressComplete}\n      ref={ref}\n    >\n      {renderToken(true)}\n      <Loader value={progressValue} animated aria-hidden>\n        {renderToken()}\n      </Loader>\n      <VisuallyHidden>\n        <span id={progressBarLabelId}>\n          {i18n.t('core.fileToken.uploading')}\n        </span>\n        <div\n          aria-labelledby={progressBarLabelId}\n          role=\"progressbar\"\n          aria-valuenow={progressValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={`${progressValue}%`}\n        />\n      </VisuallyHidden>\n    </StyledFileToken>\n  )\n})\n\nFileToken.displayName = 'FileToken'\n"],"mappings":"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"}
+{"version":3,"file":"FileToken.js","names":["useId","VisuallyHidden","React","Loader","loaderTransitionDuration","useI18nContext","pulseAnimationDuration","StyledErrorMessage","StyledFileToken","StyledFileTokenErrorContainer","FileTokenInner","FileToken","forwardRef","_ref","ref","fileName","_ref$progressValue","progressValue","_ref$errorMessage","errorMessage","onLabelClick","onClose","qa","props","_objectWithoutProperties","_excluded","i18n","isError","Boolean","isProgressValueComplete","_React$useState","useState","_React$useState2","_slicedToArray","isProgressComplete","setProgressComplete","_React$useState3","_React$useState4","isFinalized","setFinalized","didMountRef","useRef","progressBarLabelId","useEffect","timerId","window","setTimeout","clearTimeout","current","renderToken","includeInTabOrder","arguments","length","undefined","createElement","fullFilename","onClick","qaCloseBtn","closeButton","_extends","$error","$finalized","$progressComplete","value","animated","id","t","role","concat","displayName"],"sources":["../../src/FileToken/FileToken.tsx"],"sourcesContent":["import { useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport { Loader } from '../Loader/Loader'\nimport { loaderTransitionDuration } from '../Loader/Loader.styles'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n  pulseAnimationDuration,\n  StyledErrorMessage,\n  StyledFileToken,\n  StyledFileTokenErrorContainer,\n} from './FileToken.styles'\nimport type { FileTokenProps } from './FileToken.types'\nimport { FileTokenInner } from './FileTokenInner'\n\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development.\n */\nexport const FileToken = React.forwardRef<\n  HTMLDivElement,\n  FileTokenProps & React.HTMLAttributes<HTMLDivElement>\n>(function FileToken(\n  {\n    fileName,\n    progressValue = 0,\n    errorMessage = '',\n    onLabelClick,\n    onClose,\n    qa,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const isError = Boolean(errorMessage)\n\n  const isProgressValueComplete = !isError && progressValue >= 100\n\n  const [isProgressComplete, setProgressComplete] = React.useState(\n    isProgressValueComplete\n  )\n\n  const [isFinalized, setFinalized] = React.useState(false)\n\n  const didMountRef = React.useRef(false)\n\n  const progressBarLabelId = useId()\n\n  React.useEffect(() => {\n    const timerId: number | null = isProgressValueComplete\n      ? window.setTimeout(() => {\n          setProgressComplete(true)\n        }, loaderTransitionDuration)\n      : null\n\n    if (!isProgressValueComplete) {\n      setProgressComplete(false)\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressValueComplete])\n\n  React.useEffect(() => {\n    const isFinalized = didMountRef.current && isProgressComplete\n    const timerId: number | null = isFinalized\n      ? window.setTimeout(() => {\n          setFinalized(false)\n        }, pulseAnimationDuration)\n      : null\n\n    setFinalized(didMountRef.current && isProgressComplete)\n\n    if (!didMountRef.current) {\n      didMountRef.current = true\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressComplete])\n\n  const renderToken = (includeInTabOrder = false) => (\n    <FileTokenInner\n      fullFilename={fileName}\n      includeInTabOrder={includeInTabOrder}\n      onClick={onLabelClick}\n      onClose={onClose}\n      qaCloseBtn={qa?.closeButton}\n    />\n  )\n\n  if (isError) {\n    return (\n      <StyledFileTokenErrorContainer {...props} ref={ref}>\n        <StyledFileToken\n          $error={isError}\n          $finalized={isFinalized}\n          $progressComplete={isProgressComplete}\n        >\n          {renderToken(true)}\n          <Loader value={progressValue} animated>\n            {renderToken()}\n          </Loader>\n        </StyledFileToken>\n        <StyledErrorMessage>{errorMessage}</StyledErrorMessage>\n      </StyledFileTokenErrorContainer>\n    )\n  }\n\n  return (\n    <StyledFileToken\n      {...props}\n      $error={isError}\n      $finalized={isFinalized}\n      $progressComplete={isProgressComplete}\n      ref={ref}\n    >\n      {renderToken(true)}\n      <Loader value={progressValue} animated aria-hidden>\n        {renderToken()}\n      </Loader>\n      <VisuallyHidden>\n        <span id={progressBarLabelId}>\n          {i18n.t('core.fileToken.uploading')}\n        </span>\n        <div\n          aria-labelledby={progressBarLabelId}\n          role=\"progressbar\"\n          aria-valuenow={progressValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={`${progressValue}%`}\n        />\n      </VisuallyHidden>\n    </StyledFileToken>\n  )\n})\n\nFileToken.displayName = 'FileToken'\n"],"mappings":"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"}

package/dist/FileToken/FileToken.styles.d.ts

@@ -8,3 +8,5 @@ export declare const StyledFileToken: import("styled-components/dist/types").ISt
     $finalized?: boolean | undefined;
     $progressComplete?: boolean | undefined;
 }>> & string;
+export declare const StyledErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledFileTokenErrorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/FileToken/FileToken.styles.js

@@ -1,24 +1,26 @@
 import styled, { css, keyframes } from 'styled-components';
 import { StyledLoader } from '../Loader/Loader.styles';
 import { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles';
+import { getTypographyIntent } from '../Typography/Typography.styles';
 import { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
 export var pulseAnimationDuration = 600;
 var focusPulse = /*#__PURE__*/keyframes(["0%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}25%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}50%{box-shadow:0 0 0 1px ", ",0 0 0 3px ", ",0 0 0 2px ", ";}100%{box-shadow:0 0 0 1.5px ", ",0 0 0 3px ", ",0 0 0 6px ", ";}"], colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94);
 export var StyledFilenameShortcut = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilenameShortcut",
-  componentId: "core-12_39_0__sc-13jx4bx-0"
+  componentId: "core-12_40_0__sc-13jx4bx-0"
 })(["display:flex;"]);
 export var StyledFilename = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFilename",
-  componentId: "core-12_39_0__sc-13jx4bx-1"
+  componentId: "core-12_40_0__sc-13jx4bx-1"
 })(["flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;"]);
 export var StyledExtension = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledExtension",
-  componentId: "core-12_39_0__sc-13jx4bx-2"
+  componentId: "core-12_40_0__sc-13jx4bx-2"
 })(["flex-shrink:0;"]);
 export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileToken",
-  componentId: "core-12_39_0__sc-13jx4bx-3"
+  componentId: "core-12_40_0__sc-13jx4bx-3"
 })(["background-color:", ";border-radius:200px;max-width:100%;outline:none;overflow:hidden;position:relative;&:focus,&.focus{box-shadow:0 0 0 2px ", ";outline:none;", "{border-color:transparent;", "}}", "{background:none;color:", ";display:flex;user-select:none;", "{color:", ";}}", "{overflow:hidden;", "{border-radius:200px 0 0 200px;color:", ";padding-right:0;transition:color 0s linear,background-color 0s linear;user-select:none;", "{flex:0 0 auto;}}}", ""], colors.gray96, colors.blue40, StyledToken, function (_ref) {
   var $progressComplete = _ref.$progressComplete;
   return $progressComplete && css(["background-color:", ";"], colors.blue45);
@@ -33,4 +35,12 @@ export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
   }
   return css([""]);
 });
+export var StyledErrorMessage = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StyledErrorMessage",
+  componentId: "core-12_40_0__sc-13jx4bx-4"
+})(["display:block;color:", ";margin-top:", "px;word-break:break-word;", ""], colors.red50, spacing.xs, getTypographyIntent('small'));
+export var StyledFileTokenErrorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledFileTokenErrorContainer",
+  componentId: "core-12_40_0__sc-13jx4bx-5"
+})(["max-width:100%;outline:none;&:focus,&.focus{> ", "{box-shadow:0 0 0 2px ", ";outline:none;}}"], StyledFileToken, colors.blue40);
 //# sourceMappingURL=FileToken.styles.js.map

package/dist/FileToken/FileToken.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileToken.styles.js","names":["styled","css","keyframes","StyledLoader","StyledLabel","StyledRemove","StyledToken","colors","pulseAnimationDuration","focusPulse","blue60","blue90","blue94","StyledFilenameShortcut","div","withConfig","displayName","componentId","StyledFilename","span","StyledExtension","StyledFileToken","gray96","blue40","_ref","$progressComplete","blue45","white","_ref2","$error","$finalized","red50","blue50"],"sources":["../../src/FileToken/FileToken.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledLoader } from '../Loader/Loader.styles'\nimport { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles'\nimport { colors } from '../_styles/colors'\n\nexport const pulseAnimationDuration = 600\n\nconst focusPulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  25% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  50% {\n    box-shadow: 0 0 0 1px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 2px ${colors.blue94};\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 6px ${colors.blue94};\n  }\n`\n\nexport const StyledFilenameShortcut = styled.div`\n  display: flex;\n`\n\nexport const StyledFilename = styled.span`\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\nexport const StyledExtension = styled.span`\n  flex-shrink: 0;\n`\n\nexport const StyledFileToken = styled.div<{\n  $error?: boolean\n  $finalized?: boolean\n  $progressComplete?: boolean\n}>`\n  background-color: ${colors.gray96};\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ${colors.blue40};\n    outline: none;\n\n    ${StyledToken} {\n      border-color: transparent;\n\n      ${({ $progressComplete }) =>\n        $progressComplete &&\n        css`\n          background-color: ${colors.blue45};\n        `}\n    }\n  }\n\n  ${StyledToken} {\n    background: none;\n    color: ${colors.blue40};\n    display: flex;\n    user-select: none;\n\n    ${StyledRemove} {\n      color: ${colors.blue40};\n    }\n  }\n\n  ${StyledLoader} {\n    overflow: hidden;\n\n    ${StyledToken} {\n      border-radius: 200px 0 0 200px;\n      color: ${colors.white};\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ${StyledLabel} {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ${({ $error, $finalized, $progressComplete }) => {\n    if ($error) {\n      return css`\n        background-color: ${colors.red50};\n\n        &:focus {\n          background-color: ${colors.red50};\n        }\n\n        ${StyledToken} {\n          color: ${colors.white};\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        ${StyledLoader} {\n          display: none;\n        }\n      `\n    } else if ($finalized || $progressComplete) {\n      return css`\n        ${$finalized &&\n        css`\n          animation-delay: 0;\n          animation-duration: ${pulseAnimationDuration}ms;\n          animation-name: ${focusPulse};\n          animation-timing-function: ease-out;\n        `};\n\n        ${StyledLoader} {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ${StyledToken} {\n          background-color: ${colors.blue50};\n          color: ${colors.white};\n\n          &:hover,\n          &:focus {\n            background-color: ${colors.blue45};\n          }\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ${StyledToken} {\n            background-color: ${colors.blue45};\n          }\n        }\n      `\n    }\n\n    return css``\n  }}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,uBAAuB;AAC9E,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAO,IAAMC,sBAAsB,GAAG,GAAG;AAEzC,IAAMC,UAAU,gBAAGP,SAAS,iPAEFK,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAGjEL,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAG/DL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,EAGnEL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,CAElG;AAED,OAAO,IAAMC,sBAAsB,gBAAGb,MAAM,CAACc,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAE/C;AAED,OAAO,IAAMC,cAAc,gBAAGlB,MAAM,CAACmB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAIxC;AAED,OAAO,IAAMG,eAAe,gBAAGpB,MAAM,CAACmB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAEzC;AAED,OAAO,IAAMI,eAAe,gBAAGrB,MAAM,CAACc,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gdAKnBV,MAAM,CAACe,MAAM,EASPf,MAAM,CAACgB,MAAM,EAGnCjB,WAAW,EAGT,UAAAkB,IAAA;EAAA,IAAGC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;EAAA,OACpBA,iBAAiB,IACjBxB,GAAG,6BACmBM,MAAM,CAACmB,MAAM,CAClC;AAAA,GAILpB,WAAW,EAEFC,MAAM,CAACgB,MAAM,EAIpBlB,YAAY,EACHE,MAAM,CAACgB,MAAM,EAIxBpB,YAAY,EAGVG,WAAW,EAEFC,MAAM,CAACoB,KAAK,EAKnBvB,WAAW,EAMf,UAAAwB,KAAA,EAA+C;EAAA,IAA5CC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,UAAU,GAAAF,KAAA,CAAVE,UAAU;IAAEL,iBAAiB,GAAAG,KAAA,CAAjBH,iBAAiB;EACxC,IAAII,MAAM,EAAE;IACV,OAAO5B,GAAG,6JACYM,MAAM,CAACwB,KAAK,EAGVxB,MAAM,CAACwB,KAAK,EAGhCzB,WAAW,EACFC,MAAM,CAACoB,KAAK,EAEnBtB,YAAY,EACHE,MAAM,CAACoB,KAAK,EAMVpB,MAAM,CAACgB,MAAM,EAK1BpB,YAAY;EAIlB,CAAC,MAAM,IAAI2B,UAAU,IAAIL,iBAAiB,EAAE;IAC1C,OAAOxB,GAAG,wOACN6B,UAAU,IACZ7B,GAAG,0GAEqBO,sBAAsB,EAC1BC,UAAU,CAE7B,EAECN,YAAY,EAKZG,WAAW,EACSC,MAAM,CAACyB,MAAM,EACxBzB,MAAM,CAACoB,KAAK,EAICpB,MAAM,CAACmB,MAAM,EAGjCrB,YAAY,EACHE,MAAM,CAACoB,KAAK,EAMVpB,MAAM,CAACgB,MAAM,EAOxBjB,WAAW,EACSC,MAAM,CAACmB,MAAM;EAIzC;EAEA,OAAOzB,GAAG;AACZ,CAAC,CACF"}
+{"version":3,"file":"FileToken.styles.js","names":["styled","css","keyframes","StyledLoader","StyledLabel","StyledRemove","StyledToken","getTypographyIntent","colors","spacing","pulseAnimationDuration","focusPulse","blue60","blue90","blue94","StyledFilenameShortcut","div","withConfig","displayName","componentId","StyledFilename","span","StyledExtension","StyledFileToken","gray96","blue40","_ref","$progressComplete","blue45","white","_ref2","$error","$finalized","red50","blue50","StyledErrorMessage","xs","StyledFileTokenErrorContainer"],"sources":["../../src/FileToken/FileToken.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledLoader } from '../Loader/Loader.styles'\nimport { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nexport const pulseAnimationDuration = 600\n\nconst focusPulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  25% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  50% {\n    box-shadow: 0 0 0 1px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 2px ${colors.blue94};\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 6px ${colors.blue94};\n  }\n`\n\nexport const StyledFilenameShortcut = styled.div`\n  display: flex;\n`\n\nexport const StyledFilename = styled.span`\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\nexport const StyledExtension = styled.span`\n  flex-shrink: 0;\n`\n\nexport const StyledFileToken = styled.div<{\n  $error?: boolean\n  $finalized?: boolean\n  $progressComplete?: boolean\n}>`\n  background-color: ${colors.gray96};\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ${colors.blue40};\n    outline: none;\n\n    ${StyledToken} {\n      border-color: transparent;\n\n      ${({ $progressComplete }) =>\n        $progressComplete &&\n        css`\n          background-color: ${colors.blue45};\n        `}\n    }\n  }\n\n  ${StyledToken} {\n    background: none;\n    color: ${colors.blue40};\n    display: flex;\n    user-select: none;\n\n    ${StyledRemove} {\n      color: ${colors.blue40};\n    }\n  }\n\n  ${StyledLoader} {\n    overflow: hidden;\n\n    ${StyledToken} {\n      border-radius: 200px 0 0 200px;\n      color: ${colors.white};\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ${StyledLabel} {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ${({ $error, $finalized, $progressComplete }) => {\n    if ($error) {\n      return css`\n        background-color: ${colors.red50};\n\n        &:focus {\n          background-color: ${colors.red50};\n        }\n\n        ${StyledToken} {\n          color: ${colors.white};\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        ${StyledLoader} {\n          display: none;\n        }\n      `\n    } else if ($finalized || $progressComplete) {\n      return css`\n        ${$finalized &&\n        css`\n          animation-delay: 0;\n          animation-duration: ${pulseAnimationDuration}ms;\n          animation-name: ${focusPulse};\n          animation-timing-function: ease-out;\n        `};\n\n        ${StyledLoader} {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ${StyledToken} {\n          background-color: ${colors.blue50};\n          color: ${colors.white};\n\n          &:hover,\n          &:focus {\n            background-color: ${colors.blue45};\n          }\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ${StyledToken} {\n            background-color: ${colors.blue45};\n          }\n        }\n      `\n    }\n\n    return css``\n  }}\n`\n\nexport const StyledErrorMessage = styled.span`\n  display: block;\n  color: ${colors.red50};\n  margin-top: ${spacing.xs}px;\n  word-break: break-word;\n  ${getTypographyIntent('small')}\n`\n\nexport const StyledFileTokenErrorContainer = styled.div`\n  max-width: 100%;\n  outline: none;\n\n  &:focus,\n  &.focus {\n    > ${StyledFileToken} {\n      box-shadow: 0 0 0 2px ${colors.blue40};\n      outline: none;\n    }\n  }\n`\n"],"mappings":"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"}