@procore/core-react 12.53.4 → 12.54.0

package/dist/Title/Title.styles.js

@@ -1,40 +1,42 @@
 import styled, { css } from 'styled-components';
+import { StyledButton, StyledLinkButton } from '../Button/Button.styles';
 import { StyledActions } from '../Content/Content.styles';
+import { mediaBreakpointsDown, mediaWidthDown } from '../PageLayout/PageLayout.utils';
 import { StyledPill } from '../Pill/Pill.styles';
 import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_53_4__sc-1t2ye1d-0"
-})(["display:flex;align-items:flex-start;"]);
+  componentId: "core-12_54_0__sc-1t2ye1d-0"
+})(["display:flex;align-items:flex-start;@media ", "{flex-wrap:wrap;row-gap:", "px;}"], mediaBreakpointsDown.tabletMd, spacing.sm);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_53_4__sc-1t2ye1d-1"
+  componentId: "core-12_54_0__sc-1t2ye1d-1"
 })(["margin-right:", "px;", ""], spacing.md, function (_ref) {
   var alignment = _ref.alignment;
   return css(["align-self:", ";"], alignment);
 });
 export var StyledTitleContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleContent",
-  componentId: "core-12_53_4__sc-1t2ye1d-2"
+  componentId: "core-12_54_0__sc-1t2ye1d-2"
 })(["align-self:center;", ""], function (_ref2) {
   var $hasActions = _ref2.$hasActions;
   return $hasActions && css(["margin-right:", "px;"], spacing.lg);
 });
 export var StyledText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledText",
-  componentId: "core-12_53_4__sc-1t2ye1d-3"
+  componentId: "core-12_54_0__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_53_4__sc-1t2ye1d-4"
+  componentId: "core-12_54_0__sc-1t2ye1d-4"
 })(["margin-left:", "px;", "{vertical-align:text-top;}"], spacing.sm, StyledPill);
 export var StyledTitleActions = /*#__PURE__*/styled(StyledActions).withConfig({
   displayName: "StyledTitleActions",
-  componentId: "core-12_53_4__sc-1t2ye1d-5"
-})(["margin-left:auto;"]);
+  componentId: "core-12_54_0__sc-1t2ye1d-5"
+})(["margin-left:auto;@media ", "{flex-wrap:wrap;}@media ", "{align-items:stretch;flex:1 1 100%;flex-direction:column;", ",", "{width:100%;}}"], mediaBreakpointsDown.tabletMd, mediaWidthDown.mobileSm, StyledButton, StyledLinkButton);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_53_4__sc-1t2ye1d-6"
+  componentId: "core-12_54_0__sc-1t2ye1d-6"
 })(["display:block;margin-top:", "px;"], spacing.xs);
 //# sourceMappingURL=Title.styles.js.map

package/dist/Title/Title.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.styles.js","names":["styled","css","StyledActions","StyledPill","Typography","spacing","StyledTitle","div","withConfig","displayName","componentId","StyledAssets","md","_ref","alignment","StyledTitleContent","_ref2","$hasActions","lg","StyledText","span","StyledTitlePill","sm","StyledTitleActions","StyledSubtext","xs"],"sources":["../../src/Title/Title.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledActions } from '../Content/Content.styles'\nimport { StyledPill } from '../Pill/Pill.styles'\nimport { Typography } from '../Typography/Typography'\nimport { spacing } from '../_styles/spacing'\nimport type { TitleAssetsProps } from './Title.types'\n\nexport const StyledTitle = styled.div`\n  display: flex;\n  align-items: flex-start;\n`\n\nexport const StyledAssets = styled.div<TitleAssetsProps>`\n  margin-right: ${spacing.md}px;\n  ${({ alignment }) =>\n    css`\n      align-self: ${alignment};\n    `}\n`\n\nexport const StyledTitleContent = styled.div<{ $hasActions: boolean }>`\n  align-self: center;\n\n  ${({ $hasActions }) =>\n    $hasActions &&\n    css`\n      margin-right: ${spacing.lg}px;\n    `}\n`\n\nexport const StyledText = styled.span`\n  > h1,\n  > h2,\n  > h3 {\n    display: inline;\n  }\n`\n\nexport const StyledTitlePill = styled.span`\n  margin-left: ${spacing.sm}px;\n\n  ${StyledPill} {\n    vertical-align: text-top;\n  }\n`\n\nexport const StyledTitleActions = styled(StyledActions)`\n  margin-left: auto;\n`\n\nexport const StyledSubtext = styled(Typography)`\n  display: block;\n  margin-top: ${spacing.xs}px;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGpC;AAED,OAAO,IAAMC,YAAY,gBAAGX,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCACpBL,OAAO,CAACO,EAAE,EACxB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OACZb,GAAG,uBACaa,SAAS;AAAA,CACxB,CACJ;AAED,OAAO,IAAMC,kBAAkB,gBAAGf,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGxC,UAAAM,KAAA;EAAA,IAAGC,WAAW,GAAAD,KAAA,CAAXC,WAAW;EAAA,OACdA,WAAW,IACXhB,GAAG,2BACeI,OAAO,CAACa,EAAE,CAC3B;AAAA,EACJ;AAED,OAAO,IAAMC,UAAU,gBAAGnB,MAAM,CAACoB,IAAI,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uCAMpC;AAED,OAAO,IAAMW,eAAe,gBAAGrB,MAAM,CAACoB,IAAI,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DACzBL,OAAO,CAACiB,EAAE,EAEvBnB,UAAU,CAGb;AAED,OAAO,IAAMoB,kBAAkB,gBAAGvB,MAAM,CAACE,aAAa,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEtD;AAED,OAAO,IAAMc,aAAa,gBAAGxB,MAAM,CAACI,UAAU,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yCAE/BL,OAAO,CAACoB,EAAE,CACzB","ignoreList":[]}
+{"version":3,"file":"Title.styles.js","names":["styled","css","StyledButton","StyledLinkButton","StyledActions","mediaBreakpointsDown","mediaWidthDown","StyledPill","Typography","spacing","StyledTitle","div","withConfig","displayName","componentId","tabletMd","sm","StyledAssets","md","_ref","alignment","StyledTitleContent","_ref2","$hasActions","lg","StyledText","span","StyledTitlePill","StyledTitleActions","mobileSm","StyledSubtext","xs"],"sources":["../../src/Title/Title.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledButton, StyledLinkButton } from '../Button/Button.styles'\nimport { StyledActions } from '../Content/Content.styles'\nimport {\n  mediaBreakpointsDown,\n  mediaWidthDown,\n} from '../PageLayout/PageLayout.utils'\nimport { StyledPill } from '../Pill/Pill.styles'\nimport { Typography } from '../Typography/Typography'\nimport { spacing } from '../_styles/spacing'\nimport type { TitleAssetsProps } from './Title.types'\n\nexport const StyledTitle = styled.div`\n  display: flex;\n  align-items: flex-start;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex-wrap: wrap;\n    row-gap: ${spacing.sm}px;\n  }\n`\n\nexport const StyledAssets = styled.div<TitleAssetsProps>`\n  margin-right: ${spacing.md}px;\n  ${({ alignment }) =>\n    css`\n      align-self: ${alignment};\n    `}\n`\n\nexport const StyledTitleContent = styled.div<{ $hasActions: boolean }>`\n  align-self: center;\n\n  ${({ $hasActions }) =>\n    $hasActions &&\n    css`\n      margin-right: ${spacing.lg}px;\n    `}\n`\n\nexport const StyledText = styled.span`\n  > h1,\n  > h2,\n  > h3 {\n    display: inline;\n  }\n`\n\nexport const StyledTitlePill = styled.span`\n  margin-left: ${spacing.sm}px;\n\n  ${StyledPill} {\n    vertical-align: text-top;\n  }\n`\n\nexport const StyledTitleActions = styled(StyledActions)`\n  margin-left: auto;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex-wrap: wrap;\n  }\n\n  /* 400% zoom: one full-width button per row */\n  @media ${mediaWidthDown.mobileSm} {\n    align-items: stretch;\n    flex: 1 1 100%;\n    flex-direction: column;\n\n    ${StyledButton}, ${StyledLinkButton} {\n      width: 100%;\n    }\n  }\n`\n\nexport const StyledSubtext = styled(Typography)`\n  display: block;\n  margin-top: ${spacing.xs}px;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,yBAAyB;AACxE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,oBAAoB,EACpBC,cAAc,QACT,gCAAgC;AACvC,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGV,MAAM,CAACW,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wFAI1BT,oBAAoB,CAACU,QAAQ,EAEzBN,OAAO,CAACO,EAAE,CAExB;AAED,OAAO,IAAMC,YAAY,gBAAGjB,MAAM,CAACW,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCACpBL,OAAO,CAACS,EAAE,EACxB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OACZnB,GAAG,uBACamB,SAAS;AAAA,CACxB,CACJ;AAED,OAAO,IAAMC,kBAAkB,gBAAGrB,MAAM,CAACW,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGxC,UAAAQ,KAAA;EAAA,IAAGC,WAAW,GAAAD,KAAA,CAAXC,WAAW;EAAA,OACdA,WAAW,IACXtB,GAAG,2BACeQ,OAAO,CAACe,EAAE,CAC3B;AAAA,EACJ;AAED,OAAO,IAAMC,UAAU,gBAAGzB,MAAM,CAAC0B,IAAI,CAAAd,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uCAMpC;AAED,OAAO,IAAMa,eAAe,gBAAG3B,MAAM,CAAC0B,IAAI,CAAAd,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DACzBL,OAAO,CAACO,EAAE,EAEvBT,UAAU,CAGb;AAED,OAAO,IAAMqB,kBAAkB,gBAAG5B,MAAM,CAACI,aAAa,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iJAG5CT,oBAAoB,CAACU,QAAQ,EAK7BT,cAAc,CAACuB,QAAQ,EAK5B3B,YAAY,EAAKC,gBAAgB,CAItC;AAED,OAAO,IAAM2B,aAAa,gBAAG9B,MAAM,CAACQ,UAAU,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yCAE/BL,OAAO,CAACsB,EAAE,CACzB","ignoreList":[]}

package/dist/Toast/Toast.styles.js

@@ -7,7 +7,7 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledToast = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToast",
-  componentId: "core-12_53_4__sc-1l6lk2n-0"
+  componentId: "core-12_54_0__sc-1l6lk2n-0"
 })(["", " align-items:center;background-color:", ";border-radius:", "px;box-sizing:border-box;color:", ";display:flex;flex-wrap:wrap;max-width:min(550px,calc(100vw - ", "px));min-height:48px;padding:", "px ", "px;width:550px;a{color:", ";text-decoration:underline;}"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
@@ -16,7 +16,7 @@ export var StyledToast = /*#__PURE__*/styled.div.withConfig({
 // $legacy is direct string inside Toast. Next is with subcomponents
 export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledToastText",
-  componentId: "core-12_53_4__sc-1l6lk2n-1"
+  componentId: "core-12_54_0__sc-1l6lk2n-1"
 })(["", " flex:1 1 0;font-weight:", ";min-width:0;overflow-wrap:anywhere;", " @media (max-width:320px){flex:0 0 100%;order:1;padding:", "px 0 0;", "}"], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
   var $legacy = _ref2.$legacy;
   return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
@@ -26,6 +26,6 @@ export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToastButton",
-  componentId: "core-12_53_4__sc-1l6lk2n-2"
+  componentId: "core-12_54_0__sc-1l6lk2n-2"
 })(["align-self:flex-start;line-height:0;color:", ";flex-shrink:0;padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/ToggleButton/ToggleButton.styles.js

@@ -5,7 +5,7 @@ import { focusBlue } from '../_styles/mixins';
 var selectedStyles = /*#__PURE__*/css(["background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}&.hover,&:hover{background-color:", ";color:", ";}&.focus,&:focus{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";}&:disabled{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue50, colors.blue96, colors.blue70, colors.blue70, colors.blue70, colors.blue50);
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_53_4__sc-1x59fxi-0"
+  componentId: "core-12_54_0__sc-1x59fxi-0"
 })(["&.focus,&:focus{box-shadow:none;outline:2px solid ", ";outline-offset:4px;}&.selected{", "}", ""], focusBlue, selectedStyles, function (_ref) {
   var $selected = _ref.$selected;
   return $selected && selectedStyles;

package/dist/Token/Token.styles.js

@@ -7,23 +7,23 @@ import { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledErrorIcon = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledErrorIcon",
-  componentId: "core-12_53_4__sc-zqi94b-0"
+  componentId: "core-12_54_0__sc-zqi94b-0"
 })(["align-items:center;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;"], colors.white, spacing.xs);
 export var StyledErrorButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledErrorButton",
-  componentId: "core-12_53_4__sc-zqi94b-1"
+  componentId: "core-12_54_0__sc-zqi94b-1"
 })(["", " align-items:center;border-radius:50%;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;&:focus-visible{", "}"], getUnstyledButton, colors.white, spacing.xs, getGapOutlineFocus('ontop'));
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_53_4__sc-zqi94b-2"
+  componentId: "core-12_54_0__sc-zqi94b-2"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_53_4__sc-zqi94b-3"
+  componentId: "core-12_54_0__sc-zqi94b-3"
 })(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40, colors.white);
 export var StyledToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToken",
-  componentId: "core-12_53_4__sc-zqi94b-4"
+  componentId: "core-12_54_0__sc-zqi94b-4"
 })(["align-items:center;background-color:", ";border-radius:200px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:24px;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", " ", " ", ""], colors.blue50, colors.white, spacing.xs, spacing.md, colors.blue45, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused,

package/dist/ToolHeader/ToolHeader.styles.js

@@ -1,11 +1,16 @@
 import styled, { css } from 'styled-components';
+import { StyledBadgeLabel } from '../Badge/Badge.styles';
+import { StyledBox } from '../Box/Box.styles';
+import { StyledButton, StyledLinkButton } from '../Button/Button.styles';
+import { StyledFlex as StyledFlexList } from '../FlexList/FlexList.styles';
+import { mediaBreakpointsDown, mediaWidthDown } from '../PageLayout/PageLayout.utils';
 import { H1 } from '../Semantic';
 import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBadge",
-  componentId: "core-12_53_4__sc-1jpjx47-0"
+  componentId: "core-12_54_0__sc-1jpjx47-0"
 })(["", " border-radius:10px;border-style:solid;border-width:1px;display:inline-block;margin-bottom:", "px;padding:1px ", "px;", ""], getTypographyIntent('small'), spacing.sm, spacing.sm, function (_ref) {
   var $variant = _ref.$variant;
   if ($variant) {
@@ -18,22 +23,22 @@ export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
 // TODO in v12 remove cursor: pointer;
 export var StyledToolHeaderIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeaderIconContainer",
-  componentId: "core-12_53_4__sc-1jpjx47-1"
+  componentId: "core-12_54_0__sc-1jpjx47-1"
 })(["color:", ";cursor:pointer;display:inline-flex;flex:0 0 auto;"], colors.orange50);
 export var StyledHeaderTabs = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderTabs",
-  componentId: "core-12_53_4__sc-1jpjx47-2"
-})(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;"]);
+  componentId: "core-12_54_0__sc-1jpjx47-2"
+})(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;@media ", "{flex-basis:100%;}"], mediaWidthDown.mobileSm);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_53_4__sc-1jpjx47-3"
-})(["flex:0 0 auto;margin-left:auto;padding-left:", "px;"], spacing.lg);
+  componentId: "core-12_54_0__sc-1jpjx47-3"
+})(["flex:0 0 auto;margin-left:auto;padding-left:", "px;@media ", "{flex:1 1 100%;margin-left:0;padding-left:0;", "{flex-wrap:wrap;}}@media ", "{", "{flex-direction:column;align-items:stretch;gap:", "px;}", " > ", "{margin:0;}", ",", "{width:100%;}}"], spacing.lg, mediaBreakpointsDown.tabletMd, StyledFlexList, mediaWidthDown.mobileSm, StyledFlexList, spacing.sm, StyledFlexList, StyledBox, StyledButton, StyledLinkButton);
 export var StyledToolHeaderTitle = /*#__PURE__*/styled(H1).withConfig({
   displayName: "StyledToolHeaderTitle",
-  componentId: "core-12_53_4__sc-1jpjx47-4"
-})(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
+  componentId: "core-12_54_0__sc-1jpjx47-4"
+})(["margin-right:", "px;white-space:nowrap;@media ", "{margin-right:", "px;white-space:normal;}@media ", "{flex:1 1 0;margin-right:0;min-width:0;overflow-wrap:break-word;", "{margin-left:", "px;position:static;transform:none;vertical-align:middle;}", "{margin-bottom:0;}}"], spacing.xl, mediaBreakpointsDown.tabletMd, spacing.sm, mediaWidthDown.mobileSm, StyledBadgeLabel, spacing.sm, StyledHeaderBadge);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_53_4__sc-1jpjx47-5"
-})(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg);
+  componentId: "core-12_54_0__sc-1jpjx47-5"
+})(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}@media ", "{column-gap:", "px;flex-wrap:wrap;row-gap:", "px;", " + ", ",a + ", ",button + ", "{margin-left:0;}}@media ", "{align-items:baseline;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg, mediaBreakpointsDown.tabletMd, spacing.lg, spacing.sm, StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, mediaWidthDown.mobileSm);
 //# sourceMappingURL=ToolHeader.styles.js.map

package/dist/ToolHeader/ToolHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolHeader.styles.js","names":["styled","css","H1","getTypographyIntent","colors","spacing","StyledHeaderBadge","div","withConfig","displayName","componentId","sm","_ref","$variant","purple50","white","StyledToolHeaderIconContainer","orange50","StyledHeaderTabs","StyledHeaderActions","lg","StyledToolHeaderTitle","xl","StyledToolHeader"],"sources":["../../src/ToolHeader/ToolHeader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { H1 } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ToolHeaderBadgeVariant } from './ToolHeader.types'\n\nexport const StyledHeaderBadge = styled.div<{\n  $variant: ToolHeaderBadgeVariant\n}>`\n  ${getTypographyIntent('small')}\n  border-radius: 10px;\n  border-style: solid;\n  border-width: 1px;\n  display: inline-block;\n  margin-bottom: ${spacing.sm}px;\n  padding: 1px ${spacing.sm}px;\n\n  ${({ $variant }) => {\n    if ($variant) {\n      if ($variant === 'trial') {\n        return css`\n          background-color: ${colors.purple50};\n          border-color: ${colors.purple50};\n          color: ${colors.white};\n        `\n      }\n    }\n  }}\n`\n\n// TODO in v12 remove cursor: pointer;\nexport const StyledToolHeaderIconContainer = styled.div`\n  color: ${colors.orange50};\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n`\n\nexport const StyledHeaderTabs = styled.div`\n  align-self: flex-end;\n  flex: 1 1 auto;\n  min-width: 100px;\n  overflow: hidden;\n`\n\nexport const StyledHeaderActions = styled.div`\n  flex: 0 0 auto;\n  margin-left: auto;\n  padding-left: ${spacing.lg}px;\n`\n\nexport const StyledToolHeaderTitle = styled(H1)`\n  margin-right: ${spacing.xl}px;\n  white-space: nowrap;\n`\n\nexport const StyledToolHeader = styled.div`\n  align-items: center;\n  display: flex;\n  min-height: 36px;\n  width: 100%;\n\n  ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},\n  a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {\n    margin-left: ${spacing.lg}px;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,EAAE,QAAQ,aAAa;AAChC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,iBAAiB,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sIAGvCP,mBAAmB,CAAC,OAAO,CAAC,EAKbE,OAAO,CAACM,EAAE,EACZN,OAAO,CAACM,EAAE,EAEvB,UAAAC,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAIA,QAAQ,EAAE;IACZ,IAAIA,QAAQ,KAAK,OAAO,EAAE;MACxB,OAAOZ,GAAG,0DACYG,MAAM,CAACU,QAAQ,EACnBV,MAAM,CAACU,QAAQ,EACtBV,MAAM,CAACW,KAAK;IAEzB;EACF;AACF,CAAC,CACF;;AAED;AACA,OAAO,IAAMC,6BAA6B,gBAAGhB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAC5CN,MAAM,CAACa,QAAQ,CAIzB;AAED,OAAO,IAAMC,gBAAgB,gBAAGlB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0EAKzC;AAED,OAAO,IAAMS,mBAAmB,gBAAGnB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAG3BL,OAAO,CAACe,EAAE,CAC3B;AAED,OAAO,IAAMC,qBAAqB,gBAAGrB,MAAM,CAACE,EAAE,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAC7BL,OAAO,CAACiB,EAAE,CAE3B;AAED,OAAO,IAAMC,gBAAgB,gBAAGvB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HAMtCM,6BAA6B,EAAMK,qBAAqB,EACpDA,qBAAqB,EAAcA,qBAAqB,EAC7ChB,OAAO,CAACe,EAAE,CAE5B","ignoreList":[]}
+{"version":3,"file":"ToolHeader.styles.js","names":["styled","css","StyledBadgeLabel","StyledBox","StyledButton","StyledLinkButton","StyledFlex","StyledFlexList","mediaBreakpointsDown","mediaWidthDown","H1","getTypographyIntent","colors","spacing","StyledHeaderBadge","div","withConfig","displayName","componentId","sm","_ref","$variant","purple50","white","StyledToolHeaderIconContainer","orange50","StyledHeaderTabs","mobileSm","StyledHeaderActions","lg","tabletMd","StyledToolHeaderTitle","xl","StyledToolHeader"],"sources":["../../src/ToolHeader/ToolHeader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledBadgeLabel } from '../Badge/Badge.styles'\nimport { StyledBox } from '../Box/Box.styles'\nimport { StyledButton, StyledLinkButton } from '../Button/Button.styles'\nimport { StyledFlex as StyledFlexList } from '../FlexList/FlexList.styles'\nimport {\n  mediaBreakpointsDown,\n  mediaWidthDown,\n} from '../PageLayout/PageLayout.utils'\nimport { H1 } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ToolHeaderBadgeVariant } from './ToolHeader.types'\n\nexport const StyledHeaderBadge = styled.div<{\n  $variant: ToolHeaderBadgeVariant\n}>`\n  ${getTypographyIntent('small')}\n  border-radius: 10px;\n  border-style: solid;\n  border-width: 1px;\n  display: inline-block;\n  margin-bottom: ${spacing.sm}px;\n  padding: 1px ${spacing.sm}px;\n\n  ${({ $variant }) => {\n    if ($variant) {\n      if ($variant === 'trial') {\n        return css`\n          background-color: ${colors.purple50};\n          border-color: ${colors.purple50};\n          color: ${colors.white};\n        `\n      }\n    }\n  }}\n`\n\n// TODO in v12 remove cursor: pointer;\nexport const StyledToolHeaderIconContainer = styled.div`\n  color: ${colors.orange50};\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n`\n\nexport const StyledHeaderTabs = styled.div`\n  align-self: flex-end;\n  flex: 1 1 auto;\n  min-width: 100px;\n  overflow: hidden;\n\n  @media ${mediaWidthDown.mobileSm} {\n    /* 400% zoom: own line, the title keeps the line with the icon */\n    flex-basis: 100%;\n  }\n`\n\nexport const StyledHeaderActions = styled.div`\n  flex: 0 0 auto;\n  margin-left: auto;\n  padding-left: ${spacing.lg}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex: 1 1 100%;\n    margin-left: 0;\n    padding-left: 0;\n\n    ${StyledFlexList} {\n      flex-wrap: wrap;\n    }\n  }\n\n  @media ${mediaWidthDown.mobileSm} {\n    /* 400% zoom: one full-width button per row */\n    ${StyledFlexList} {\n      flex-direction: column;\n      align-items: stretch;\n      gap: ${spacing.sm}px;\n    }\n\n    /* FlexList margins misalign wrapped rows */\n    ${StyledFlexList} > ${StyledBox} {\n      margin: 0;\n    }\n\n    ${StyledButton}, ${StyledLinkButton} {\n      width: 100%;\n    }\n  }\n`\n\nexport const StyledToolHeaderTitle = styled(H1)`\n  margin-right: ${spacing.xl}px;\n  white-space: nowrap;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    /* Plus the header gap: 24px to the next item, room for the badge */\n    margin-right: ${spacing.sm}px;\n    white-space: normal;\n  }\n\n  @media ${mediaWidthDown.mobileSm} {\n    /* 400% zoom: next to the icon, wraps there */\n    flex: 1 1 0;\n    margin-right: 0;\n    min-width: 0;\n    overflow-wrap: break-word;\n\n    /* 400% zoom: badge after the title, not above it */\n    ${StyledBadgeLabel} {\n      margin-left: ${spacing.sm}px;\n      position: static;\n      transform: none;\n      vertical-align: middle;\n    }\n\n    ${StyledHeaderBadge} {\n      margin-bottom: 0;\n    }\n  }\n`\n\nexport const StyledToolHeader = styled.div`\n  align-items: center;\n  display: flex;\n  min-height: 36px;\n  width: 100%;\n\n  ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},\n  a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {\n    margin-left: ${spacing.lg}px;\n  }\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    /* Gap instead of margins: none at the start or end of a line */\n    column-gap: ${spacing.lg}px;\n    flex-wrap: wrap;\n    row-gap: ${spacing.sm}px;\n\n    ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},\n    a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {\n      margin-left: 0;\n    }\n  }\n\n  @media ${mediaWidthDown.mobileSm} {\n    /* 400% zoom: icon in line with the first line of the title */\n    align-items: baseline;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,yBAAyB;AACxE,SAASC,UAAU,IAAIC,cAAc,QAAQ,6BAA6B;AAC1E,SACEC,oBAAoB,EACpBC,cAAc,QACT,gCAAgC;AACvC,SAASC,EAAE,QAAQ,aAAa;AAChC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,iBAAiB,gBAAGd,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sIAGvCP,mBAAmB,CAAC,OAAO,CAAC,EAKbE,OAAO,CAACM,EAAE,EACZN,OAAO,CAACM,EAAE,EAEvB,UAAAC,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAIA,QAAQ,EAAE;IACZ,IAAIA,QAAQ,KAAK,OAAO,EAAE;MACxB,OAAOpB,GAAG,0DACYW,MAAM,CAACU,QAAQ,EACnBV,MAAM,CAACU,QAAQ,EACtBV,MAAM,CAACW,KAAK;IAEzB;EACF;AACF,CAAC,CACF;;AAED;AACA,OAAO,IAAMC,6BAA6B,gBAAGxB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAC5CN,MAAM,CAACa,QAAQ,CAIzB;AAED,OAAO,IAAMC,gBAAgB,gBAAG1B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAM/BT,cAAc,CAACkB,QAAQ,CAIjC;AAED,OAAO,IAAMC,mBAAmB,gBAAG5B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6PAG3BL,OAAO,CAACgB,EAAE,EAEjBrB,oBAAoB,CAACsB,QAAQ,EAKlCvB,cAAc,EAKTE,cAAc,CAACkB,QAAQ,EAE5BpB,cAAc,EAGPM,OAAO,CAACM,EAAE,EAIjBZ,cAAc,EAAMJ,SAAS,EAI7BC,YAAY,EAAKC,gBAAgB,CAItC;AAED,OAAO,IAAM0B,qBAAqB,gBAAG/B,MAAM,CAACU,EAAE,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oRAC7BL,OAAO,CAACmB,EAAE,EAGjBxB,oBAAoB,CAACsB,QAAQ,EAEpBjB,OAAO,CAACM,EAAE,EAInBV,cAAc,CAACkB,QAAQ,EAQ5BzB,gBAAgB,EACDW,OAAO,CAACM,EAAE,EAMzBL,iBAAiB,CAItB;AAED,OAAO,IAAMmB,gBAAgB,gBAAGjC,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4QAMtCM,6BAA6B,EAAMO,qBAAqB,EACpDA,qBAAqB,EAAcA,qBAAqB,EAC7ClB,OAAO,CAACgB,EAAE,EAGlBrB,oBAAoB,CAACsB,QAAQ,EAEtBjB,OAAO,CAACgB,EAAE,EAEbhB,OAAO,CAACM,EAAE,EAEnBK,6BAA6B,EAAMO,qBAAqB,EACpDA,qBAAqB,EAAcA,qBAAqB,EAKvDtB,cAAc,CAACkB,QAAQ,CAIjC","ignoreList":[]}

package/dist/ToolLandingPage/ToolLandingPage.styles.js

@@ -3,14 +3,14 @@ import { Page } from '../PageLayout';
 import { spacing } from '../_styles/spacing';
 export var StyledTitleOuter = /*#__PURE__*/styled(Page.Title).withConfig({
   displayName: "StyledTitleOuter",
-  componentId: "core-12_53_4__sc-wa8j06-0"
+  componentId: "core-12_54_0__sc-wa8j06-0"
 })(["align-items:center;display:flex;gap:", "px;"], spacing.md);
 export var StyledTitleInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleInner",
-  componentId: "core-12_53_4__sc-wa8j06-1"
+  componentId: "core-12_54_0__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_53_4__sc-wa8j06-2"
+  componentId: "core-12_54_0__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.js

@@ -62,7 +62,13 @@ var Tooltip_ = /*#__PURE__*/React.forwardRef(function Tooltip(_ref3, ref) {
   })) : /*#__PURE__*/React.createElement(Content, null, overlay);
   return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({
     role: 'tooltip',
-    passA11yPropsToOverlay: true
+    passA11yPropsToOverlay: true,
+    // TODO element this, it can cause failures for invalid use on some triggers.
+    // OverlayTrigger should provide open state somehow, but that seems overkill for 80%? case of tooltip buttons
+    // trackAriaExpanded: true,
+    // Tooltips are hover/focus-triggered, not dropdown-like, so background
+    // scroll should not be locked while they're open. Can be overridden.
+    scrollLock: false
   }, props), {}, {
     initialIsVisible: initialIsVisible,
     overlay: overlayNode,

package/dist/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["Help","React","OverlayTrigger","useI18nContext","addSubcomponents","StyledContainer","StyledTooltip","StyledTooltipButton","TooltipIconOnlyButton","forwardRef","TooltipDefaultTrigger","_ref","ref","_ref$type","type","props","_objectWithoutProperties","_excluded","I18n","createElement","_extends","t","size","Content","_ref2","children","placement","_excluded2","Tooltip_","Tooltip","_ref3","_ref3$initialIsVisibl","initialIsVisible","overlay","_ref3$placement","_ref3$trigger","trigger","_excluded3","overlayNode","isValidElement","cloneElement","_objectSpread","role","passA11yPropsToOverlay","restoreFocusOnHide","shrinkOverlay","arrow","displayName"],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Help } from '@procore/core-icons'\nimport React from 'react'\nimport type { OverlayTriggerProps } from '../OverlayTrigger'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledContainer,\n  StyledTooltip,\n  StyledTooltipButton,\n} from './Tooltip.styles'\nimport type { TooltipContentProps, TooltipProps } from './Tooltip.types'\n\n/** For the inline typography without all those button styles */\nexport const TooltipIconOnlyButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(function TooltipDefaultTrigger({ type = 'button', ...props }, ref) {\n  const I18n = useI18nContext()\n\n  return (\n    <StyledTooltipButton\n      type={type}\n      aria-label={I18n.t('core.form.field.tooltipHelp')}\n      {...props}\n      ref={ref}\n    >\n      <Help size=\"sm\" />\n    </StyledTooltipButton>\n  )\n})\n\nconst Content = React.forwardRef<HTMLSpanElement, TooltipContentProps>(\n  function Content({ children, placement, ...props }, ref) {\n    // For most consistent results: First render an empty aria-live container, then add content.\n    // const [showContent, setShowContent] = React.useState(false)\n    // React.useEffect(() => {\n    //   const id = window.setTimeout(() => setShowContent(true), 10)\n    //   return () => window.clearTimeout(id)\n    // }, [])\n\n    return (\n      <StyledContainer aria-live=\"polite\" ref={ref}>\n        <StyledTooltip {...props}>\n          {children}\n          {/* {showContent ? children : null} */}\n        </StyledTooltip>\n      </StyledContainer>\n    )\n  }\n)\n\nconst Tooltip_ = React.forwardRef<\n  HTMLElement,\n  OverlayTriggerProps & TooltipProps\n>(function Tooltip(\n  {\n    children,\n    initialIsVisible = false,\n    overlay,\n    placement = 'top',\n    trigger = ['hover', 'focus'],\n    ...props\n  },\n  ref\n) {\n  const overlayNode = React.isValidElement(overlay) ? (\n    React.cloneElement(overlay as React.ReactElement, { placement })\n  ) : (\n    <Content>{overlay}</Content>\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        role: 'tooltip',\n        passA11yPropsToOverlay: true,\n        // TODO element this, it can cause failures for invalid use on some triggers.\n        // OverlayTrigger should provide open state somehow, but that seems overkill for 80%? case of tooltip buttons\n        // trackAriaExpanded: true,\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        ref,\n        restoreFocusOnHide: false,\n        trigger,\n        shrinkOverlay: true,\n        arrow: true,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n})\n\nTooltip_.displayName = 'Tooltip'\n\nContent.displayName = 'Tooltip.Content'\n\n/**\n\n We use tooltips to display additional descriptive information about an element\n or item to the user. For example, we could use them to explain a specific term\n or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to\n clarify certain information (e.g. why a button is disabled).\n\n They can be displayed by hover or focus of an focusable element in the product or by\n hovering or focusing an icon button next to an element. Provide a focusable child.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tooltip--demo)\n\n @see [Design Guidelines](https://design.procore.com/tooltip)\n\n */\nexport const Tooltip = addSubcomponents(\n  {\n    Content,\n  },\n  Tooltip_\n)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["Help","React","OverlayTrigger","useI18nContext","addSubcomponents","StyledContainer","StyledTooltip","StyledTooltipButton","TooltipIconOnlyButton","forwardRef","TooltipDefaultTrigger","_ref","ref","_ref$type","type","props","_objectWithoutProperties","_excluded","I18n","createElement","_extends","t","size","Content","_ref2","children","placement","_excluded2","Tooltip_","Tooltip","_ref3","_ref3$initialIsVisibl","initialIsVisible","overlay","_ref3$placement","_ref3$trigger","trigger","_excluded3","overlayNode","isValidElement","cloneElement","_objectSpread","role","passA11yPropsToOverlay","scrollLock","restoreFocusOnHide","shrinkOverlay","arrow","displayName"],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Help } from '@procore/core-icons'\nimport React from 'react'\nimport type { OverlayTriggerProps } from '../OverlayTrigger'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledContainer,\n  StyledTooltip,\n  StyledTooltipButton,\n} from './Tooltip.styles'\nimport type { TooltipContentProps, TooltipProps } from './Tooltip.types'\n\n/** For the inline typography without all those button styles */\nexport const TooltipIconOnlyButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(function TooltipDefaultTrigger({ type = 'button', ...props }, ref) {\n  const I18n = useI18nContext()\n\n  return (\n    <StyledTooltipButton\n      type={type}\n      aria-label={I18n.t('core.form.field.tooltipHelp')}\n      {...props}\n      ref={ref}\n    >\n      <Help size=\"sm\" />\n    </StyledTooltipButton>\n  )\n})\n\nconst Content = React.forwardRef<HTMLSpanElement, TooltipContentProps>(\n  function Content({ children, placement, ...props }, ref) {\n    // For most consistent results: First render an empty aria-live container, then add content.\n    // const [showContent, setShowContent] = React.useState(false)\n    // React.useEffect(() => {\n    //   const id = window.setTimeout(() => setShowContent(true), 10)\n    //   return () => window.clearTimeout(id)\n    // }, [])\n\n    return (\n      <StyledContainer aria-live=\"polite\" ref={ref}>\n        <StyledTooltip {...props}>\n          {children}\n          {/* {showContent ? children : null} */}\n        </StyledTooltip>\n      </StyledContainer>\n    )\n  }\n)\n\nconst Tooltip_ = React.forwardRef<\n  HTMLElement,\n  OverlayTriggerProps & TooltipProps\n>(function Tooltip(\n  {\n    children,\n    initialIsVisible = false,\n    overlay,\n    placement = 'top',\n    trigger = ['hover', 'focus'],\n    ...props\n  },\n  ref\n) {\n  const overlayNode = React.isValidElement(overlay) ? (\n    React.cloneElement(overlay as React.ReactElement, { placement })\n  ) : (\n    <Content>{overlay}</Content>\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        role: 'tooltip',\n        passA11yPropsToOverlay: true,\n        // TODO element this, it can cause failures for invalid use on some triggers.\n        // OverlayTrigger should provide open state somehow, but that seems overkill for 80%? case of tooltip buttons\n        // trackAriaExpanded: true,\n        // Tooltips are hover/focus-triggered, not dropdown-like, so background\n        // scroll should not be locked while they're open. Can be overridden.\n        scrollLock: false,\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        ref,\n        restoreFocusOnHide: false,\n        trigger,\n        shrinkOverlay: true,\n        arrow: true,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n})\n\nTooltip_.displayName = 'Tooltip'\n\nContent.displayName = 'Tooltip.Content'\n\n/**\n\n We use tooltips to display additional descriptive information about an element\n or item to the user. For example, we could use them to explain a specific term\n or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to\n clarify certain information (e.g. why a button is disabled).\n\n They can be displayed by hover or focus of an focusable element in the product or by\n hovering or focusing an icon button next to an element. Provide a focusable child.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tooltip--demo)\n\n @see [Design Guidelines](https://design.procore.com/tooltip)\n\n */\nexport const Tooltip = addSubcomponents(\n  {\n    Content,\n  },\n  Tooltip_\n)\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltip/Tooltip.styles.js

@@ -8,16 +8,16 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledTooltip = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTooltip",
-  componentId: "core-12_53_4__sc-1fawsi4-0"
+  componentId: "core-12_54_0__sc-1fawsi4-0"
 })(["", " color:", ";max-width:200px;padding:", "px ", "px;position:relative;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;&:empty{display:none;}"], getTypographyIntent('small'), colors.white, spacing.sm, spacing.md);
 export var StyledContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_53_4__sc-1fawsi4-1"
+  componentId: "core-12_54_0__sc-1fawsi4-1"
 })(["display:inline-flex;background-color:", ";border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}&:has(> span:empty) + [data-overlay-arrow]{display:none;}"], colors.gray15, borderRadius.md, getShadow(3, 'bottom'), colors.gray15);
 
 // This is for the inline typography icon button. Note: not `Button` styles
 export var StyledTooltipButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledTooltipButton",
-  componentId: "core-12_53_4__sc-1fawsi4-2"
+  componentId: "core-12_54_0__sc-1fawsi4-2"
 })(["", " border-radius:50%;color:", ";display:inline-flex;vertical-align:middle;&:focus-visible{", "}* + &{margin-left:", "px;}"], getUnstyledButton, colors.gray45, getGapOutlineFocus('ontop'), spacing.sm);
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tree/Tree.js

@@ -588,7 +588,7 @@ var IconContainer = function IconContainer(_ref5) {
 };
 var StyledChevronIcon = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevronIcon",
-  componentId: "core-12_53_4__sc-f25ekl-0"
+  componentId: "core-12_54_0__sc-f25ekl-0"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref6) {
   var $isExpanded = _ref6.$isExpanded;
   return $isExpanded ? 90 : 0;

package/dist/Tree/Tree.styles.js

@@ -6,11 +6,11 @@ import { colors } from '../_styles/colors';
 import { focusBlue } from '../_styles/mixins';
 export var StyledFilenameCaption = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledFilenameCaption",
-  componentId: "core-12_53_4__sc-2d45b5-0"
+  componentId: "core-12_54_0__sc-2d45b5-0"
 })(["display:flex;width:100%;"]);
 export var StyledTree = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTree",
-  componentId: "core-12_53_4__sc-2d45b5-1"
+  componentId: "core-12_54_0__sc-2d45b5-1"
 })(["width:100%;height:100%;min-height:36px;outline:none;overflow:auto;"]);
 export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -18,7 +18,7 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   }
 }).withConfig({
   displayName: "StyledTreeRowContainer",
-  componentId: "core-12_53_4__sc-2d45b5-2"
+  componentId: "core-12_54_0__sc-2d45b5-2"
 })(["display:flex;align-items:center;height:36px;background:transparent;box-shadow:inset 4px 0px 0px transparent;cursor:default;outline:none;", " &:hover{background:", ";}", " ", ""], function (_ref) {
   var isSelectable = _ref.isSelectable,
     $isSelectable = _ref.$isSelectable;
@@ -38,29 +38,29 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
 });
 export var StyledTreeRowContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowContent",
-  componentId: "core-12_53_4__sc-2d45b5-3"
+  componentId: "core-12_54_0__sc-2d45b5-3"
 })(["display:flex;align-items:center;"]);
 export var StyledTreeRowWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowWrapper",
-  componentId: "core-12_53_4__sc-2d45b5-4"
+  componentId: "core-12_54_0__sc-2d45b5-4"
 })(["outline:none;"]);
 var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledIconBase",
-  componentId: "core-12_53_4__sc-2d45b5-5"
+  componentId: "core-12_54_0__sc-2d45b5-5"
 })(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;min-width:24px;min-height:24px;"]);
 
 /** @deprecated Use StyledChevronPlaceholder instead */
 export var StyledChevronContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronContainer",
-  componentId: "core-12_53_4__sc-2d45b5-6"
+  componentId: "core-12_54_0__sc-2d45b5-6"
 })([""]);
 export var StyledChevronPlaceholder = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronPlaceholder",
-  componentId: "core-12_53_4__sc-2d45b5-7"
+  componentId: "core-12_54_0__sc-2d45b5-7"
 })([""]);
 export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_53_4__sc-2d45b5-8"
+  componentId: "core-12_54_0__sc-2d45b5-8"
 })(["color:", ";"], function (_ref4) {
   var $isSelected = _ref4.$isSelected;
   return $isSelected ? colors.blue45 : colors.gray40;
@@ -69,7 +69,7 @@ export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig(
 /** @deprecated TreeRowChevron now uses Button with inline styled icon */
 export var StyledChevron = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevron",
-  componentId: "core-12_53_4__sc-2d45b5-9"
+  componentId: "core-12_54_0__sc-2d45b5-9"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
   var $isExpanded = _ref5.$isExpanded;
   return $isExpanded ? 90 : 0;

package/dist/Typeahead/Typeahead.styles.js

@@ -5,7 +5,7 @@ import { spacing } from '../_styles/spacing';
 var inputHeight = 36;
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_53_4__sc-gpc39h-0"
+  componentId: "core-12_54_0__sc-gpc39h-0"
 })(["", " padding-left:", "px;padding-right:", "px;"], getSearchInputStyles(), spacing.xxl, function (p) {
   return p.$hasValue ? spacing.xxl : spacing.md;
 });
@@ -14,16 +14,16 @@ var iconContainerStyles = /*#__PURE__*/css(["align-items:center;color:", ";displ
 }, inputHeight, inputHeight);
 export var StyledSearchIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearchIcon",
-  componentId: "core-12_53_4__sc-gpc39h-1"
+  componentId: "core-12_54_0__sc-gpc39h-1"
 })(["", " left:0;pointer-events:none;"], iconContainerStyles);
 export var StyledClearIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledClearIcon",
-  componentId: "core-12_53_4__sc-gpc39h-2"
+  componentId: "core-12_54_0__sc-gpc39h-2"
 })(["", " pointer-events:", ";right:0;"], iconContainerStyles, function (p) {
   return p.disabled ? 'none' : 'auto';
 });
 export var StyledTypeahead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTypeahead",
-  componentId: "core-12_53_4__sc-gpc39h-3"
+  componentId: "core-12_54_0__sc-gpc39h-3"
 })(["position:relative;width:100%;"]);
 //# sourceMappingURL=Typeahead.styles.js.map

package/dist/Typography/Typography.styles.js

@@ -35,7 +35,7 @@ export var semiboldRules = function semiboldRules() {
 };
 export var StyledTypography = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTypography",
-  componentId: "core-12_53_4__sc-1c4583t-0"
+  componentId: "core-12_54_0__sc-1c4583t-0"
 })(["", " color:", ";font-style:", ";font-weight:", ";", " ", " em,i{font-style:italic;}"], function (_ref) {
   var _ref$$intent = _ref.$intent,
     $intent = _ref$$intent === void 0 ? 'body' : _ref$$intent;

package/dist/Typography/Typography.table.story.js

@@ -5,11 +5,11 @@ import { colors } from '../_styles/colors';
 import { getTypographyIntent } from './Typography.styles';
 var StyledBodyCell = /*#__PURE__*/styled(Table.BodyCell).withConfig({
   displayName: "StyledBodyCell",
-  componentId: "core-12_53_4__sc-p4v7d-0"
+  componentId: "core-12_54_0__sc-p4v7d-0"
 })([""]);
 var StyledTextCell = /*#__PURE__*/styled(Table.TextCell).withConfig({
   displayName: "StyledTextCell",
-  componentId: "core-12_53_4__sc-p4v7d-1"
+  componentId: "core-12_54_0__sc-p4v7d-1"
 })(["", " color:", ";"], getTypographyIntent('body'), colors.blue50);
 function BodyCell() {
   return /*#__PURE__*/React.createElement(StyledBodyCell, {