@procore/core-react 12.51.0 → 12.53.0

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_51_0__sc-1fz4ynb-0"
+  componentId: "core-12_53_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_51_0__sc-1fz4ynb-1"
+  componentId: "core-12_53_0__sc-1fz4ynb-1"
 })(["outline:none;"]);
 export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
   displayName: "StyledThumbnail",
-  componentId: "core-12_51_0__sc-1fz4ynb-2"
+  componentId: "core-12_53_0__sc-1fz4ynb-2"
 })(["flex-grow:1;justify-content:flex-start;"]);
 export var StyledProgress = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgress",
-  componentId: "core-12_51_0__sc-1fz4ynb-3"
+  componentId: "core-12_53_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_51_0__sc-1fz4ynb-4"
+  componentId: "core-12_53_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_51_0__sc-1fz4ynb-5"
+  componentId: "core-12_53_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_51_0__sc-wwu3n8-0"
+  componentId: "core-12_53_0__sc-wwu3n8-0"
 })(["display:flex;align-items:center;justify-content:center;height:", "px;"], modalBodyHeight);
 //# sourceMappingURL=TreeSource.styles.js.map

package/dist/FileToken/FileToken.styles.js

@@ -8,19 +8,19 @@ 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_51_0__sc-13jx4bx-0"
+  componentId: "core-12_53_0__sc-13jx4bx-0"
 })(["display:flex;"]);
 export var StyledFilename = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFilename",
-  componentId: "core-12_51_0__sc-13jx4bx-1"
+  componentId: "core-12_53_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_51_0__sc-13jx4bx-2"
+  componentId: "core-12_53_0__sc-13jx4bx-2"
 })(["flex-shrink:0;"]);
 export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileToken",
-  componentId: "core-12_51_0__sc-13jx4bx-3"
+  componentId: "core-12_53_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);
@@ -37,10 +37,10 @@ export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledErrorMessage = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledErrorMessage",
-  componentId: "core-12_51_0__sc-13jx4bx-4"
+  componentId: "core-12_53_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_51_0__sc-13jx4bx-5"
+  componentId: "core-12_53_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/FilterToken/FilterToken.styles.js

@@ -6,11 +6,11 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_51_0__sc-1l1h29r-0"
+  componentId: "core-12_53_0__sc-1l1h29r-0"
 })(["", " ", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis, semiboldRules);
 export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilterToken",
-  componentId: "core-12_51_0__sc-1l1h29r-1"
+  componentId: "core-12_53_0__sc-1l1h29r-1"
 })(["align-items:center;background-color:", ";border-radius:4px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:36px;justify-content:space-between;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", ""], colors.blue96, colors.blue45, spacing.sm, spacing.md, colors.blue90, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused;
@@ -18,17 +18,17 @@ export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFilterRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledFilterRemoveButton",
-  componentId: "core-12_51_0__sc-1l1h29r-2"
+  componentId: "core-12_53_0__sc-1l1h29r-2"
 })(["", " ", ";background:transparent;color:", ";&:active,&:focus,&:hover{background:", ";color:", ";}&:disabled{pointer-events:none;user-select:none;}&:disabled,&[aria-disabled='true']{background:transparent;color:", ";}height:24px;margin:0 0 0 6px;padding:0 ", "px;[data-icon-prop='true']{pointer-events:none;height:16px;width:16px;}"], function (_ref2) {
   var $disabled = _ref2.$disabled;
   return getButtonStyles(false, $disabled, false, 'sm', 'tertiary');
 }, getTypographyIntent('small'), colors.blue45, colors.white, colors.blue45, colors.blue45, spacing.xs);
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_51_0__sc-1l1h29r-3"
+  componentId: "core-12_53_0__sc-1l1h29r-3"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledContentLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContentLabel",
-  componentId: "core-12_51_0__sc-1l1h29r-4"
+  componentId: "core-12_53_0__sc-1l1h29r-4"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 //# sourceMappingURL=FilterToken.styles.js.map

package/dist/FlexList/FlexList.styles.js

@@ -3,7 +3,7 @@ import { StyledBox } from '../Box/Box.styles';
 import { Flex } from '../Flex/Flex';
 export var StyledFlex = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledFlex",
-  componentId: "core-12_51_0__sc-1quvv61-0"
+  componentId: "core-12_53_0__sc-1quvv61-0"
 })(["> ", "{", "}"], StyledBox, function (_ref) {
   var $direction = _ref.$direction;
   if ($direction !== null && $direction !== void 0 && $direction.includes('reverse')) {

package/dist/Form/Form.styles.js

@@ -2,12 +2,14 @@ import { Error } from '@procore/core-icons/dist';
 import styled, { css } from 'styled-components';
 import { checkboxSize } from '../Checkbox/Checkbox.styles';
 import { StyledFieldHeader } from '../Field';
+import { breakpointMinWidthValues } from '../Grid/Grid.constants';
 import { Required } from '../Required';
 import { StyledLabel as StyledLabelBase } from '../Semantic/Semantic.styles';
 import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 var columnGutter = '24px';
+var tabletColumnGutter = '12px'; // half of the default above
 var defaultLineHeight = '20px';
 var textEditorOutputListPadding = '10px 0 10px 40px';
 var traditionalBorder = 'rgb(216, 216, 216)';
@@ -23,7 +25,7 @@ function applyStylesOnlyToIE11(styles) {
 }
 export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldMain",
-  componentId: "core-12_51_0__sc-ncj3pf-0"
+  componentId: "core-12_53_0__sc-ncj3pf-0"
 })(["-ms-grid-row:2;grid-row:2;", " ", " ", ""], function (_ref) {
   var $colStart = _ref.$colStart,
     $colEnd = _ref.$colEnd,
@@ -31,19 +33,19 @@ export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
   return getGridColumns($colStart, $colEnd, $colIeSpan);
 }, function (_ref2) {
   var $read = _ref2.$read;
-  return $read && css(["word-wrap:break-word;color:", ";", ";"], colors.gray15, getTypographyIntent('body'));
+  return $read && css(["overflow-wrap:break-word;word-break:normal;hyphens:auto;color:", ";", ";"], colors.gray15, getTypographyIntent('body'));
 }, applyStylesOnlyToIE11("\n      padding-left: ".concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  ")));
 export var StyledLabel = /*#__PURE__*/styled(StyledLabelBase).withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_51_0__sc-ncj3pf-1"
-})(["word-wrap:break-word;word-break:break-word;"]);
+  componentId: "core-12_53_0__sc-ncj3pf-1"
+})(["overflow-wrap:break-word;word-break:normal;"]);
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDescription",
-  componentId: "core-12_51_0__sc-ncj3pf-2"
-})(["", " color:", ";word-wrap:break-word;word-break:break-word;"], getTypographyIntent('body'), colors.gray45);
+  componentId: "core-12_53_0__sc-ncj3pf-2"
+})(["", " color:", ";overflow-wrap:break-word;word-break:normal;"], getTypographyIntent('body'), colors.gray45);
 export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescription).withConfig({
   displayName: "StyledCheckboxInlineDescription",
-  componentId: "core-12_51_0__sc-ncj3pf-3"
+  componentId: "core-12_53_0__sc-ncj3pf-3"
 })(["margin-top:", "px;", ""], spacing.xs, function (_ref3) {
   var $read = _ref3.$read;
   if (!$read) {
@@ -52,7 +54,7 @@ export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescripti
 });
 export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withConfig({
   displayName: "StyledFormFieldHeader",
-  componentId: "core-12_51_0__sc-ncj3pf-4"
+  componentId: "core-12_53_0__sc-ncj3pf-4"
 })(["-ms-grid-row:1;grid-row:1;align-self:end;margin-bottom:", "px;", " ", " * + ", "{margin-top:", "px;}"], spacing.xs, function (_ref4) {
   var $colStart = _ref4.$colStart,
     $colEnd = _ref4.$colEnd,
@@ -61,20 +63,20 @@ export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withCo
 }, applyStylesOnlyToIE11("\n    padding-left: ".concat(columnGutter, ";\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ").concat(StyledFormFieldMain, " {\n      padding-left: ").concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  ")), StyledDescription, spacing.xs);
 export var StyledFormFieldRequiredMark = /*#__PURE__*/styled(Required).withConfig({
   displayName: "StyledFormFieldRequiredMark",
-  componentId: "core-12_51_0__sc-ncj3pf-5"
+  componentId: "core-12_53_0__sc-ncj3pf-5"
 })(["padding-left:", "px;vertical-align:top;"], spacing.xs);
 export var StyledFormFieldErrorIcon = /*#__PURE__*/styled(Error).withConfig({
   displayName: "StyledFormFieldErrorIcon",
-  componentId: "core-12_51_0__sc-ncj3pf-6"
-})(["vertical-align:sub;"]);
+  componentId: "core-12_53_0__sc-ncj3pf-6"
+})(["display:block;flex-shrink:0;vertical-align:sub;"]);
 export var StyledFormFieldBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldBanner",
-  componentId: "core-12_51_0__sc-ncj3pf-7"
-})(["display:flex;align-items:flex-start;min-height:22px;margin-top:", "px;margin-bottom:2px;word-break:break-word;word-wrap:break-word;color:", ";", ""], spacing.xs, colors.red50, getTypographyIntent('body'));
+  componentId: "core-12_53_0__sc-ncj3pf-7"
+})(["display:flex;align-items:flex-start;min-height:22px;margin-top:", "px;margin-bottom:2px;min-width:0;overflow-wrap:anywhere;word-break:normal;hyphens:auto;color:", ";", " > * + *{min-width:0;}"], spacing.xs, colors.red50, getTypographyIntent('body'));
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTraditionalFormColumn",
-  componentId: "core-12_51_0__sc-ncj3pf-8"
+  componentId: "core-12_53_0__sc-ncj3pf-8"
 })(["padding:", ";align-self:center;height:100%;&:nth-child(1){-ms-grid-column:1;}&:nth-child(2){-ms-grid-column:2;}&:nth-child(3){-ms-grid-column:3;}&:nth-child(4){-ms-grid-column:4;}", " ", ""], traditionalPadding, function (_ref5) {
   var _ref5$$fullWidth = _ref5.$fullWidth,
     $fullWidth = _ref5$$fullWidth === void 0 ? false : _ref5$$fullWidth;
@@ -86,25 +88,25 @@ export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFormOutputTextArea = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFormOutputTextArea",
-  componentId: "core-12_51_0__sc-ncj3pf-9"
+  componentId: "core-12_53_0__sc-ncj3pf-9"
 })(["white-space:pre-wrap;"]);
 export var StyledFormOutputFiledset = /*#__PURE__*/styled.fieldset.withConfig({
   displayName: "StyledFormOutputFiledset",
-  componentId: "core-12_51_0__sc-ncj3pf-10"
+  componentId: "core-12_53_0__sc-ncj3pf-10"
 })(["border:none;padding:0;margin-top:", "px;"], spacing.xs);
 export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormRow",
-  componentId: "core-12_51_0__sc-ncj3pf-11"
+  componentId: "core-12_53_0__sc-ncj3pf-11"
 })(["", ""], function (_ref7) {
   var _ref7$$traditional = _ref7.$traditional,
     $traditional = _ref7$$traditional === void 0 ? false : _ref7$$traditional,
     _ref7$$read = _ref7.$read,
     $read = _ref7$$read === void 0 ? false : _ref7$$read;
-  return $traditional ? css(["display:-ms-grid;display:grid;-ms-grid-columns:20% 30% 20% 30%;grid-template-columns:20% 30% 20% 30%;-ms-grid-rows:auto;grid-template-rows:auto;border-top:1px solid ", ";background-color:", ";&:last-of-type{border-bottom:1px solid ", ";}", ""], traditionalBorder, colors.white, traditionalBorder, $read && "\n            &:nth-child(2n + 1) {\n              background-color: ".concat(traditionalBgGray, ";\n            }\n            \n            & > ").concat(StyledTraditionalFormColumn, ":nth-child(2) {\n              border-right: 1px solid ").concat(traditionalBorder, ";\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          ")) : css(["display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-columns:repeat(12,minmax(0,1fr));-ms-grid-rows:minmax(", ",max-content) minmax(", ",max-content);grid-template-rows:minmax(", ",auto) minmax( ", ",auto );justify-content:space-between;grid-column-gap:", ";"], defaultLineHeight, defaultLineHeight, defaultLineHeight, defaultLineHeight, columnGutter);
+  return $traditional ? css(["display:-ms-grid;display:grid;-ms-grid-columns:20% 30% 20% 30%;grid-template-columns:20% 30% 20% 30%;-ms-grid-rows:auto;grid-template-rows:auto;border-top:1px solid ", ";background-color:", ";&:last-of-type{border-bottom:1px solid ", ";}", ""], traditionalBorder, colors.white, traditionalBorder, $read && "\n            &:nth-child(2n + 1) {\n              background-color: ".concat(traditionalBgGray, ";\n            }\n            \n            & > ").concat(StyledTraditionalFormColumn, ":nth-child(2) {\n              border-right: 1px solid ").concat(traditionalBorder, ";\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          ")) : css(["display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-columns:repeat(12,minmax(0,1fr));-ms-grid-rows:minmax(", ",max-content) minmax(", ",max-content);grid-template-rows:minmax(", ",auto) minmax( ", ",auto );justify-content:space-between;grid-column-gap:", ";@media (width <= ", "){grid-column-gap:", ";}@media (width <= ", "){display:block;}"], defaultLineHeight, defaultLineHeight, defaultLineHeight, defaultLineHeight, columnGutter, breakpointMinWidthValues.tabletMd, tabletColumnGutter, breakpointMinWidthValues.tabletSm);
 });
 export var formWrapper = /*#__PURE__*/css(["display:inherit;flex-direction:inherit;height:inherit;max-height:inherit;"]);
 export var StyledForm = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledForm",
-  componentId: "core-12_51_0__sc-ncj3pf-12"
+  componentId: "core-12_53_0__sc-ncj3pf-12"
 })(["", ""], formWrapper);
 //# sourceMappingURL=Form.styles.js.map

package/dist/Form/Form.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.styles.js","names":["Error","styled","css","checkboxSize","StyledFieldHeader","Required","StyledLabel","StyledLabelBase","getTypographyIntent","colors","spacing","columnGutter","defaultLineHeight","textEditorOutputListPadding","traditionalBorder","traditionalBgGray","traditionalPadding","traditionalFontSize","traditionalLineHeight","getGridColumns","colStart","colEnd","colIeSpan","applyStylesOnlyToIE11","styles","StyledFormFieldMain","div","withConfig","displayName","componentId","_ref","$colStart","$colEnd","$colIeSpan","_ref2","$read","gray15","concat","StyledDescription","gray45","StyledCheckboxInlineDescription","xs","_ref3","md","StyledFormFieldHeader","_ref4","StyledFormFieldRequiredMark","StyledFormFieldErrorIcon","StyledFormFieldBanner","red50","StyledTraditionalFormColumn","_ref5","_ref5$$fullWidth","$fullWidth","_ref6","_ref6$$output","$output","StyledFormOutputTextArea","span","StyledFormOutputFiledset","fieldset","StyledFormRow","_ref7","_ref7$$traditional","$traditional","_ref7$$read","white","formWrapper","StyledForm"],"sources":["../../src/Form/Form.styles.tsx"],"sourcesContent":["import { Error } from '@procore/core-icons/dist'\nimport styled, { css } from 'styled-components'\nimport { checkboxSize } from '../Checkbox/Checkbox.styles'\nimport { StyledFieldHeader } from '../Field'\nimport { Required } from '../Required'\nimport { StyledLabel as StyledLabelBase } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst columnGutter = '24px'\nconst defaultLineHeight = '20px'\nconst textEditorOutputListPadding = '10px 0 10px 40px'\n\nconst traditionalBorder = 'rgb(216, 216, 216)'\nconst traditionalBgGray = 'rgb(242, 242, 242)'\nconst traditionalPadding = '10px'\nconst traditionalFontSize = '13px'\nconst traditionalLineHeight = '20px'\n\nfunction getGridColumns(colStart: number, colEnd: number, colIeSpan: number) {\n  return css`\n    -ms-grid-column: ${colStart};\n    grid-column-start: ${colStart};\n    grid-column-end: ${colEnd};\n    -ms-grid-column-span: ${colIeSpan};\n  `\n}\n\nfunction applyStylesOnlyToIE11(styles: string) {\n  return css`\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      ${styles}\n    }\n  `\n}\n\nexport const StyledFormFieldMain = styled.div<{\n  $read: boolean\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 2;\n  grid-row: 2;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  ${({ $read }) =>\n    $read &&\n    css`\n      word-wrap: break-word;\n      color: ${colors.gray15};\n      ${getTypographyIntent('body')};\n    `}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  `)}\n`\n\nexport const StyledLabel = styled(StyledLabelBase)`\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledDescription = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray45};\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledCheckboxInlineDescription = styled(StyledDescription)<{\n  $read: boolean\n}>`\n  margin-top: ${spacing.xs}px;\n  ${({ $read }) => {\n    if (!$read) {\n      return css`\n        padding-left: ${checkboxSize + spacing.md}px;\n      `\n    }\n  }}\n`\n\nexport const StyledFormFieldHeader = styled(StyledFieldHeader)<{\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 1;\n  grid-row: 1;\n  align-self: end;\n  margin-bottom: ${spacing.xs}px;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n    padding-left: ${columnGutter};\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ${StyledFormFieldMain} {\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  `)}\n\n  * + ${StyledDescription} {\n    margin-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledFormFieldRequiredMark = styled(Required)`\n  padding-left: ${spacing.xs}px;\n  vertical-align: top;\n`\n\nexport const StyledFormFieldErrorIcon = styled(Error)`\n  vertical-align: sub;\n`\n\nexport const StyledFormFieldBanner = styled.div`\n  display: flex;\n  align-items: flex-start;\n  min-height: 22px;\n  margin-top: ${spacing.xs}px;\n  margin-bottom: 2px;\n  word-break: break-word;\n  word-wrap: break-word;\n  color: ${colors.red50};\n\n  ${getTypographyIntent('body')}\n`\n/** @deprecated The traditional field layout is deprecated */\nexport const StyledTraditionalFormColumn = styled.div<{\n  $fullWidth?: boolean\n  $output?: boolean\n}>`\n  padding: ${traditionalPadding};\n  align-self: center;\n  height: 100%;\n\n  &:nth-child(1) {\n    -ms-grid-column: 1;\n  }\n  &:nth-child(2) {\n    -ms-grid-column: 2;\n  }\n  &:nth-child(3) {\n    -ms-grid-column: 3;\n  }\n  &:nth-child(4) {\n    -ms-grid-column: 4;\n  }\n\n  ${({ $fullWidth = false }) =>\n    $fullWidth &&\n    css`\n      grid-column: 2 / 5;\n      -ms-grid-column-span: 3;\n    `}\n\n  ${({ $output = false }) =>\n    $output &&\n    css`\n      font-weight: bold;\n      font-size: ${traditionalFontSize};\n      line-height: ${traditionalLineHeight};\n      word-wrap: break-word;\n    `}\n`\n\nexport const StyledFormOutputTextArea = styled.span`\n  white-space: pre-wrap;\n`\n\nexport const StyledFormOutputFiledset = styled.fieldset`\n  border: none;\n  padding: 0;\n  margin-top: ${spacing.xs}px;\n`\nexport const StyledFormRow = styled.div<{\n  /** @deprecated The traditional field layout is deprecated */\n  $traditional?: boolean\n  $read?: boolean\n}>`\n  ${({ $traditional = false, $read = false }) =>\n    $traditional\n      ? css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: 20% 30% 20% 30%;\n          grid-template-columns: 20% 30% 20% 30%;\n          -ms-grid-rows: auto;\n          grid-template-rows: auto;\n          border-top: 1px solid ${traditionalBorder};\n          background-color: ${colors.white};\n\n          &:last-of-type {\n            border-bottom: 1px solid ${traditionalBorder};\n          }\n\n          ${$read &&\n          `\n            &:nth-child(2n + 1) {\n              background-color: ${traditionalBgGray};\n            }\n            \n            & > ${StyledTraditionalFormColumn}:nth-child(2) {\n              border-right: 1px solid ${traditionalBorder};\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          `}\n        `\n      : css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr);\n          grid-template-columns: repeat(12, minmax(0, 1fr));\n          -ms-grid-rows: minmax(${defaultLineHeight}, max-content)\n            minmax(${defaultLineHeight}, max-content);\n          grid-template-rows: minmax(${defaultLineHeight}, auto) minmax(\n              ${defaultLineHeight},\n              auto\n            );\n          justify-content: space-between;\n          grid-column-gap: ${columnGutter};\n        `}\n`\n\nexport const formWrapper = css`\n  display: inherit;\n  flex-direction: inherit;\n  height: inherit;\n  max-height: inherit;\n`\n\nexport const StyledForm = styled.div`\n  ${formWrapper}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Form.styles.js","names":["Error","styled","css","checkboxSize","StyledFieldHeader","breakpointMinWidthValues","Required","StyledLabel","StyledLabelBase","getTypographyIntent","colors","spacing","columnGutter","tabletColumnGutter","defaultLineHeight","textEditorOutputListPadding","traditionalBorder","traditionalBgGray","traditionalPadding","traditionalFontSize","traditionalLineHeight","getGridColumns","colStart","colEnd","colIeSpan","applyStylesOnlyToIE11","styles","StyledFormFieldMain","div","withConfig","displayName","componentId","_ref","$colStart","$colEnd","$colIeSpan","_ref2","$read","gray15","concat","StyledDescription","gray45","StyledCheckboxInlineDescription","xs","_ref3","md","StyledFormFieldHeader","_ref4","StyledFormFieldRequiredMark","StyledFormFieldErrorIcon","StyledFormFieldBanner","red50","StyledTraditionalFormColumn","_ref5","_ref5$$fullWidth","$fullWidth","_ref6","_ref6$$output","$output","StyledFormOutputTextArea","span","StyledFormOutputFiledset","fieldset","StyledFormRow","_ref7","_ref7$$traditional","$traditional","_ref7$$read","white","tabletMd","tabletSm","formWrapper","StyledForm"],"sources":["../../src/Form/Form.styles.tsx"],"sourcesContent":["import { Error } from '@procore/core-icons/dist'\nimport styled, { css } from 'styled-components'\nimport { checkboxSize } from '../Checkbox/Checkbox.styles'\nimport { StyledFieldHeader } from '../Field'\nimport { breakpointMinWidthValues } from '../Grid/Grid.constants'\nimport { Required } from '../Required'\nimport { StyledLabel as StyledLabelBase } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst columnGutter = '24px'\nconst tabletColumnGutter = '12px' // half of the default above\nconst defaultLineHeight = '20px'\nconst textEditorOutputListPadding = '10px 0 10px 40px'\n\nconst traditionalBorder = 'rgb(216, 216, 216)'\nconst traditionalBgGray = 'rgb(242, 242, 242)'\nconst traditionalPadding = '10px'\nconst traditionalFontSize = '13px'\nconst traditionalLineHeight = '20px'\n\nfunction getGridColumns(colStart: number, colEnd: number, colIeSpan: number) {\n  return css`\n    -ms-grid-column: ${colStart};\n    grid-column-start: ${colStart};\n    grid-column-end: ${colEnd};\n    -ms-grid-column-span: ${colIeSpan};\n  `\n}\n\nfunction applyStylesOnlyToIE11(styles: string) {\n  return css`\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      ${styles}\n    }\n  `\n}\n\nexport const StyledFormFieldMain = styled.div<{\n  $read: boolean\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 2;\n  grid-row: 2;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  ${({ $read }) =>\n    $read &&\n    css`\n      overflow-wrap: break-word;\n      word-break: normal;\n      hyphens: auto;\n      color: ${colors.gray15};\n      ${getTypographyIntent('body')};\n    `}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  `)}\n`\n\nexport const StyledLabel = styled(StyledLabelBase)`\n  overflow-wrap: break-word;\n  word-break: normal;\n`\n\nexport const StyledDescription = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray45};\n  overflow-wrap: break-word;\n  word-break: normal;\n`\n\nexport const StyledCheckboxInlineDescription = styled(StyledDescription)<{\n  $read: boolean\n}>`\n  margin-top: ${spacing.xs}px;\n  ${({ $read }) => {\n    if (!$read) {\n      return css`\n        padding-left: ${checkboxSize + spacing.md}px;\n      `\n    }\n  }}\n`\n\nexport const StyledFormFieldHeader = styled(StyledFieldHeader)<{\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 1;\n  grid-row: 1;\n  align-self: end;\n  margin-bottom: ${spacing.xs}px;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n    padding-left: ${columnGutter};\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ${StyledFormFieldMain} {\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  `)}\n\n  * + ${StyledDescription} {\n    margin-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledFormFieldRequiredMark = styled(Required)`\n  padding-left: ${spacing.xs}px;\n  vertical-align: top;\n`\n\nexport const StyledFormFieldErrorIcon = styled(Error)`\n  display: block;\n  flex-shrink: 0;\n  vertical-align: sub;\n`\n\nexport const StyledFormFieldBanner = styled.div`\n  display: flex;\n  align-items: flex-start;\n  min-height: 22px;\n  margin-top: ${spacing.xs}px;\n  margin-bottom: 2px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  word-break: normal;\n  hyphens: auto;\n  color: ${colors.red50};\n\n  ${getTypographyIntent('body')}\n\n  > * + * {\n    min-width: 0;\n  }\n`\n/** @deprecated The traditional field layout is deprecated */\nexport const StyledTraditionalFormColumn = styled.div<{\n  $fullWidth?: boolean\n  $output?: boolean\n}>`\n  padding: ${traditionalPadding};\n  align-self: center;\n  height: 100%;\n\n  &:nth-child(1) {\n    -ms-grid-column: 1;\n  }\n  &:nth-child(2) {\n    -ms-grid-column: 2;\n  }\n  &:nth-child(3) {\n    -ms-grid-column: 3;\n  }\n  &:nth-child(4) {\n    -ms-grid-column: 4;\n  }\n\n  ${({ $fullWidth = false }) =>\n    $fullWidth &&\n    css`\n      grid-column: 2 / 5;\n      -ms-grid-column-span: 3;\n    `}\n\n  ${({ $output = false }) =>\n    $output &&\n    css`\n      font-weight: bold;\n      font-size: ${traditionalFontSize};\n      line-height: ${traditionalLineHeight};\n      word-wrap: break-word;\n    `}\n`\n\nexport const StyledFormOutputTextArea = styled.span`\n  white-space: pre-wrap;\n`\n\nexport const StyledFormOutputFiledset = styled.fieldset`\n  border: none;\n  padding: 0;\n  margin-top: ${spacing.xs}px;\n`\nexport const StyledFormRow = styled.div<{\n  /** @deprecated The traditional field layout is deprecated */\n  $traditional?: boolean\n  $read?: boolean\n}>`\n  ${({ $traditional = false, $read = false }) =>\n    $traditional\n      ? css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: 20% 30% 20% 30%;\n          grid-template-columns: 20% 30% 20% 30%;\n          -ms-grid-rows: auto;\n          grid-template-rows: auto;\n          border-top: 1px solid ${traditionalBorder};\n          background-color: ${colors.white};\n\n          &:last-of-type {\n            border-bottom: 1px solid ${traditionalBorder};\n          }\n\n          ${$read &&\n          `\n            &:nth-child(2n + 1) {\n              background-color: ${traditionalBgGray};\n            }\n            \n            & > ${StyledTraditionalFormColumn}:nth-child(2) {\n              border-right: 1px solid ${traditionalBorder};\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          `}\n        `\n      : css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr);\n          grid-template-columns: repeat(12, minmax(0, 1fr));\n          -ms-grid-rows: minmax(${defaultLineHeight}, max-content)\n            minmax(${defaultLineHeight}, max-content);\n          grid-template-rows: minmax(${defaultLineHeight}, auto) minmax(\n              ${defaultLineHeight},\n              auto\n            );\n          justify-content: space-between;\n          grid-column-gap: ${columnGutter};\n\n          @media (width <= ${breakpointMinWidthValues.tabletMd}) {\n            grid-column-gap: ${tabletColumnGutter};\n          }\n\n          @media (width <= ${breakpointMinWidthValues.tabletSm}) {\n            display: block;\n          }\n        `}\n`\n\nexport const formWrapper = css`\n  display: inherit;\n  flex-direction: inherit;\n  height: inherit;\n  max-height: inherit;\n`\n\nexport const StyledForm = styled.div`\n  ${formWrapper}\n`\n"],"mappings":"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"}

package/dist/Form/StyledFormikForm.styles.js

@@ -5,13 +5,13 @@ import { spacing } from '../_styles/spacing';
 import { formWrapper } from './Form.styles';
 export var StyledFormikForm = /*#__PURE__*/styled(FormikForm).withConfig({
   displayName: "StyledFormikForm",
-  componentId: "core-12_51_0__sc-1ks7m0l-0"
+  componentId: "core-12_53_0__sc-1ks7m0l-0"
 })(["", ""], formWrapper);
 
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormLabel = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledTraditionalFormLabel",
-  componentId: "core-12_51_0__sc-1ks7m0l-1"
+  componentId: "core-12_53_0__sc-1ks7m0l-1"
 })(["display:inline-block;word-break:break-word;word-wrap:break-word;", ""], function (_ref) {
   var $view = _ref.$view;
   return ['create', 'update'].includes($view) && css(["padding-top:", "px;"], spacing.sm);

package/dist/GhostPlaceholder/GhostPlaceholder.styles.js

@@ -3,7 +3,7 @@ import { spacing } from '../_styles/spacing';
 var shimmerAnimation = /*#__PURE__*/keyframes(["0%{background-position:-1000px 500px;}100%{background-position:1000px 500px;}"]);
 export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "PlaceholderItem",
-  componentId: "core-12_51_0__sc-1nja302-0"
+  componentId: "core-12_53_0__sc-1nja302-0"
 })(["width:100%;min-height:24px;padding:10px 0;animation:", " 3s ease-out infinite;background:radial-gradient( ellipse at center,", " 0%,", " 50% );background-size:2000px 2000px;border-radius:", "px;@media (prefers-reduced-motion:reduce){animation:none;}"], shimmerAnimation, function (props) {
   return props.$startGradientColor;
 }, function (props) {
@@ -11,7 +11,7 @@ export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
 }, spacing.sm);
 export var RoundPlaceholderItem = /*#__PURE__*/styled(PlaceholderItem).withConfig({
   displayName: "RoundPlaceholderItem",
-  componentId: "core-12_51_0__sc-1nja302-1"
+  componentId: "core-12_53_0__sc-1nja302-1"
 })(["width:", ";height:", ";border-radius:50%;"], function (props) {
   return props.$small ? '24px' : '40px';
 }, function (props) {

package/dist/Grid/Grid.styles.js

@@ -75,7 +75,7 @@ var getRowGutterVertical = function getRowGutterVertical(gutterY, breakpoint) {
 };
 export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridRow",
-  componentId: "core-12_51_0__sc-8pinsp-0"
+  componentId: "core-12_53_0__sc-8pinsp-0"
 })(["", " display:flex;flex-wrap:wrap;"], function (_ref) {
   var $gutterX = _ref.$gutterX,
     $gutterY = _ref.$gutterY;
@@ -87,7 +87,7 @@ export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledGridCol = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridCol",
-  componentId: "core-12_51_0__sc-8pinsp-1"
+  componentId: "core-12_53_0__sc-8pinsp-1"
 })(["flex-shrink:0;width:100%;max-width:100%;", ""], function (_ref2) {
   var $span = _ref2.$span,
     $offset = _ref2.$offset,

package/dist/GroupSelect/GroupSelect.styles.js

@@ -3,7 +3,7 @@ import { MultiSelect } from '../MultiSelect/MultiSelect';
 import { colors } from '../_styles/colors';
 export var StyledGroupSelectOption = /*#__PURE__*/styled(MultiSelect.Option).withConfig({
   displayName: "StyledGroupSelectOption",
-  componentId: "core-12_51_0__sc-u5gu8j-0"
+  componentId: "core-12_53_0__sc-u5gu8j-0"
 })(["", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["color:", ";cursor:not-allowed;a,a:hover{color:", ";text-decoration:none;}"], colors.gray70, colors.gray70);

package/dist/Input/Input.styles.js

@@ -16,6 +16,6 @@ export function getInputStyles(_ref) {
 }
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_51_0__sc-12sjkxg-0"
+  componentId: "core-12_53_0__sc-12sjkxg-0"
 })(["", " padding:0 ", "px;&::-ms-clear{display:none;}&[type='number']{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}}"], getInputStyles, spacing.md);
 //# sourceMappingURL=Input.styles.js.map

package/dist/Link/Link.styles.js

@@ -17,6 +17,6 @@ function getLinkColors(_ref) {
 }
 export var StyledLink = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLink",
-  componentId: "core-12_51_0__sc-jfowrl-0"
+  componentId: "core-12_53_0__sc-jfowrl-0"
 })(["text-decoration:underline;&:hover{cursor:pointer;text-decoration:underline;}", " &.focus,&:focus{", ";}", ""], focusable, getBorderRadius('md'), getLinkColors);
 //# sourceMappingURL=Link.styles.js.map

package/dist/ListPage/ListPage.styles.js

@@ -3,19 +3,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledListPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageMain",
-  componentId: "core-12_51_0__sc-1eq7fzi-0"
+  componentId: "core-12_53_0__sc-1eq7fzi-0"
 })(["display:flex;flex:1 0 auto;flex-direction:column;min-width:0;padding:", "px ", "px;width:100%;"], spacing.lg, spacing.xl);
 export var StyledListPageBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBanner",
-  componentId: "core-12_51_0__sc-1eq7fzi-1"
+  componentId: "core-12_53_0__sc-1eq7fzi-1"
 })(["flex:0 0 auto;"]);
 export var StyledListPageToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageToolHeader",
-  componentId: "core-12_51_0__sc-1eq7fzi-2"
+  componentId: "core-12_53_0__sc-1eq7fzi-2"
 })(["flex:0 0 auto;padding-bottom:", "px;"], spacing.lg);
 export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageControl",
-  componentId: "core-12_51_0__sc-1eq7fzi-3"
+  componentId: "core-12_53_0__sc-1eq7fzi-3"
 })(["flex:", ";", " ", ""], function (_ref) {
   var $block = _ref.$block;
   return $block ? '1 0 auto' : '0 0 auto';
@@ -32,18 +32,18 @@ export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledListPageContentControls = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageContentControls",
-  componentId: "core-12_51_0__sc-1eq7fzi-4"
+  componentId: "core-12_53_0__sc-1eq7fzi-4"
 })(["align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;padding:", "px 0;", " + ", "{margin-left:", "px;}"], spacing.md, StyledListPageControl, StyledListPageControl, spacing.lg);
 export var StyledListPageBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBody",
-  componentId: "core-12_51_0__sc-1eq7fzi-5"
+  componentId: "core-12_53_0__sc-1eq7fzi-5"
 })(["display:flex;flex:1 0 auto;padding-top:", "px;"], spacing.md);
 export var StyledListPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBodyContent",
-  componentId: "core-12_51_0__sc-1eq7fzi-6"
+  componentId: "core-12_53_0__sc-1eq7fzi-6"
 })(["flex:1 1 auto;"]);
 export var StyledListPage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPage",
-  componentId: "core-12_51_0__sc-1eq7fzi-7"
+  componentId: "core-12_53_0__sc-1eq7fzi-7"
 })(["display:flex;flex-direction:row;height:100%;width:100%;", " + ", "{padding-top:", "px;}", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", ",", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", "{padding-top:0;}"], StyledListPageBanner, StyledListPageToolHeader, spacing.lg, StyledListPageContentControls, StyledListPageContentControls, colors.gray85, StyledListPageToolHeader, StyledListPageContentControls, StyledListPageToolHeader, StyledListPageBody, colors.gray85, StyledListPageContentControls, StyledListPageBody);
 //# sourceMappingURL=ListPage.styles.js.map

package/dist/Loader/Loader.styles.js

@@ -7,11 +7,11 @@ export var loaderTransitionDuration = 250;
 var movingStripes = /*#__PURE__*/keyframes(["from{background-position:", "px 0;}100%{background-position:0 ", "px;}"], backgroundSize, backgroundSize);
 export var StyledLoader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLoader",
-  componentId: "core-12_51_0__sc-wgvjj9-0"
+  componentId: "core-12_53_0__sc-wgvjj9-0"
 })(["display:block;height:100%;left:0;min-width:12px;position:absolute;transition:width ", "ms ease-out;top:0;"], loaderTransitionDuration);
 export var StyledGradient = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGradient",
-  componentId: "core-12_51_0__sc-wgvjj9-1"
+  componentId: "core-12_53_0__sc-wgvjj9-1"
 })(["height:100%;", ""], function (_ref) {
   var $animated = _ref.$animated;
   return $animated ? css(["@media (prefers-reduced-motion:no-preference){animation:", " 0.5s linear infinite;}background-image:linear-gradient( 45deg,", " 26%,", " 25%,", " 51%,", " 50%,", " 76%,", " 75%,", " );background-size:", "px ", "px;"], movingStripes, color1, color2, color2, color1, color1, color2, color2, backgroundSize, backgroundSize) : css(["background-color:", ";"], colors.blue50);

package/dist/MenuImperative/MenuImperative.js

@@ -61,6 +61,7 @@ export var MenuContext = /*#__PURE__*/React.createContext({
   onHoverItem: noop,
   onFocusItem: noop,
   onBlurItem: noop,
+  onMouseLeaveItems: noop,
   onScrollBottom: noop,
   onSelect: noop,
   role: 'none'
@@ -170,6 +171,7 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
     handleItemHover = _useMemo.handleItemHover,
     handleItemFocus = _useMemo.handleItemFocus,
     handleItemBlur = _useMemo.handleItemBlur,
+    handleItemsMouseLeave = _useMemo.handleItemsMouseLeave,
     defaultKeyDownNavigationHandler = _useMemo.handleKeyDown,
     highlight = _useMemo.highlight,
     highlighted = _useMemo.highlighted,
@@ -285,6 +287,7 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
       onHoverItem: handleItemHover,
       onFocusItem: handleItemFocus,
       onBlurItem: handleItemBlur,
+      onMouseLeaveItems: handleItemsMouseLeave,
       onScrollBottom: onScrollBottom,
       onSelect: onSelect,
       role: role
@@ -579,7 +582,12 @@ export var Options = /*#__PURE__*/React.forwardRef(function Options(props, ref)
     role: (_props$role = props.role) !== null && _props$role !== void 0 ? _props$role : ctx.a11yOptionsProps.role,
     "data-internal": "menuimperative-options",
     ref: ref,
-    onScroll: ctx.onScrollBottom
+    onScroll: ctx.onScrollBottom,
+    onMouseLeave: function onMouseLeave(e) {
+      var _props$onMouseLeave;
+      (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 ? void 0 : _props$onMouseLeave.call(props, e);
+      ctx.onMouseLeaveItems();
+    }
   }));
 });
 export var Search = function Search(_ref7) {