@procore/core-react 12.37.0 → 12.39.0

package/dist/TextEditorOutput/TextEditorOutput.styles.js

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

package/dist/Thumbnail/Thumbnail.styles.js

@@ -27,35 +27,35 @@ var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;
 });
 export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultilineCaption",
-  componentId: "core-12_37_0__sc-195f70c-0"
+  componentId: "core-12_39_0__sc-195f70c-0"
 })(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
 export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledCaptionText",
-  componentId: "core-12_37_0__sc-195f70c-1"
+  componentId: "core-12_39_0__sc-195f70c-1"
 })(["width:100%;"]);
 export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderCaption",
-  componentId: "core-12_37_0__sc-195f70c-2"
+  componentId: "core-12_39_0__sc-195f70c-2"
 })(["", ""], captionBase);
 export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSingleLineCaption",
-  componentId: "core-12_37_0__sc-195f70c-3"
+  componentId: "core-12_39_0__sc-195f70c-3"
 })(["display:flex;", ""], captionBase);
 export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionBody",
-  componentId: "core-12_37_0__sc-195f70c-4"
+  componentId: "core-12_39_0__sc-195f70c-4"
 })(["", ""], getEllipsis);
 export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionEnding",
-  componentId: "core-12_37_0__sc-195f70c-5"
+  componentId: "core-12_39_0__sc-195f70c-5"
 })(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
 export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledLabelText",
-  componentId: "core-12_37_0__sc-195f70c-6"
+  componentId: "core-12_39_0__sc-195f70c-6"
 })(["", ""], getEllipsis());
 export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
   displayName: "StyledThumbnailFigCaption",
-  componentId: "core-12_37_0__sc-195f70c-7"
+  componentId: "core-12_39_0__sc-195f70c-7"
 })(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
   var _ref5$$color = _ref5.$color,
     $color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
@@ -63,7 +63,7 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
 }, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_37_0__sc-195f70c-8"
+  componentId: "core-12_39_0__sc-195f70c-8"
 })(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
 var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
   var $clickable = _ref6.$clickable;
@@ -85,7 +85,7 @@ var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align
 });
 export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
   displayName: "StyledTickIcon",
-  componentId: "core-12_37_0__sc-195f70c-9"
+  componentId: "core-12_39_0__sc-195f70c-9"
 })(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
   var $selected = _ref1.$selected;
   return $selected && css(["opacity:1;transform:scale(1);"]);
@@ -95,28 +95,28 @@ export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
 });
 export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
   displayName: "StyledFileIcon",
-  componentId: "core-12_37_0__sc-195f70c-10"
+  componentId: "core-12_39_0__sc-195f70c-10"
 })(["width:36.5%;height:auto;"]);
 export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailPreview",
-  componentId: "core-12_37_0__sc-195f70c-11"
+  componentId: "core-12_39_0__sc-195f70c-11"
 })(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
   var $bgImage = _ref11.$bgImage;
   return css(["background-image:url(", ");"], $bgImage);
 });
 export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailOverlay",
-  componentId: "core-12_37_0__sc-195f70c-12"
+  componentId: "core-12_39_0__sc-195f70c-12"
 })(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
 var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
 var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
 export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
   displayName: "StyledImageThumbnailImage",
-  componentId: "core-12_37_0__sc-195f70c-13"
+  componentId: "core-12_39_0__sc-195f70c-13"
 })([""]);
 export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnail",
-  componentId: "core-12_37_0__sc-195f70c-14"
+  componentId: "core-12_39_0__sc-195f70c-14"
 })(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
   var $disabled = _ref12.$disabled;
   return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
@@ -145,7 +145,7 @@ export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailWrapper",
-  componentId: "core-12_37_0__sc-195f70c-15"
+  componentId: "core-12_39_0__sc-195f70c-15"
 })(["display:flex;", " ", ""], function (_ref18) {
   var $size = _ref18.$size;
   return $size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
@@ -156,7 +156,7 @@ export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderThumbnail",
-  componentId: "core-12_37_0__sc-195f70c-16"
+  componentId: "core-12_39_0__sc-195f70c-16"
 })(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
   var $clickable = _ref20.$clickable;
   return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);

package/dist/ThumbnailGrid/ThumbnailGrid.styles.js

@@ -7,31 +7,31 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
   displayName: "StyledCheckbox",
-  componentId: "core-12_37_0__sc-1inrbm9-0"
+  componentId: "core-12_39_0__sc-1inrbm9-0"
 })(["input{z-index:2;}"]);
 export var StyledGroupCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroupCell",
-  componentId: "core-12_37_0__sc-1inrbm9-1"
+  componentId: "core-12_39_0__sc-1inrbm9-1"
 })(["display:flex;align-items:flex-end;padding-bottom:", "px;"], spacing.md);
 export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
   displayName: "StyledThumbnail",
-  componentId: "core-12_37_0__sc-1inrbm9-2"
+  componentId: "core-12_39_0__sc-1inrbm9-2"
 })(["display:inline-flex;&:focus{outline:none;}"]);
 // VariableSizeGrid has provided width and height as inline style, so to make it flexible and support responsive !important was added
 export var StyledVariableSizeGrid = /*#__PURE__*/styled(VariableSizeGrid).withConfig({
   displayName: "StyledVariableSizeGrid",
-  componentId: "core-12_37_0__sc-1inrbm9-3"
+  componentId: "core-12_39_0__sc-1inrbm9-3"
 })(["height:100% !important;& > div{width:100% !important;}"]);
 export var StyledGroupTitle = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledGroupTitle",
-  componentId: "core-12_37_0__sc-1inrbm9-4"
+  componentId: "core-12_39_0__sc-1inrbm9-4"
 })(["", ""], getEllipsis);
 export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSpinnerWrapper",
-  componentId: "core-12_37_0__sc-1inrbm9-5"
+  componentId: "core-12_39_0__sc-1inrbm9-5"
 })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
 export var StyledThumbnailGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailGrid",
-  componentId: "core-12_37_0__sc-1inrbm9-6"
+  componentId: "core-12_39_0__sc-1inrbm9-6"
 })(["display:flex;flex-wrap:wrap;outline:none;"]);
 //# sourceMappingURL=ThumbnailGrid.styles.js.map

package/dist/TieredSelect/TieredSelect.styles.js

@@ -9,19 +9,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledTieredSelect = /*#__PURE__*/styled(MenuImperative).withConfig({
   displayName: "StyledTieredSelect",
-  componentId: "core-12_37_0__sc-e1ql06-0"
+  componentId: "core-12_39_0__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_37_0__sc-e1ql06-1"
+  componentId: "core-12_39_0__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_37_0__sc-e1ql06-2"
+  componentId: "core-12_39_0__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_37_0__sc-e1ql06-3"
+  componentId: "core-12_39_0__sc-e1ql06-3"
 })(["background-color:", ";flex-wrap:wrap;margin-top:", "px;max-height:68px;overflow-y:auto;padding:", "px ", "px;", ""], colors.gray96, spacing.sm, spacing.xs, spacing.md, function (_ref) {
   var $nonInteractive = _ref.$nonInteractive;
   if ($nonInteractive) {
@@ -30,22 +30,22 @@ export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).with
 });
 export var StyledTieredSelectHome = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectHome",
-  componentId: "core-12_37_0__sc-e1ql06-4"
+  componentId: "core-12_39_0__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_37_0__sc-e1ql06-5"
+  componentId: "core-12_39_0__sc-e1ql06-5"
 })(["align-items:center;display:flex;justify-content:space-between;padding:2px ", "px;"], spacing.lg);
 export var StyledTieredSelectLoadingMore = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectLoadingMore",
-  componentId: "core-12_37_0__sc-e1ql06-6"
+  componentId: "core-12_39_0__sc-e1ql06-6"
 })(["align-items:center;justify-content:center;padding:", "px ", "px 0px ", "px;"], spacing.xs, spacing.lg, spacing.lg);
 export var StyledTieredSelectOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledTieredSelectOverlay",
-  componentId: "core-12_37_0__sc-e1ql06-7"
+  componentId: "core-12_39_0__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_37_0__sc-e1ql06-8"
+  componentId: "core-12_39_0__sc-e1ql06-8"
 })(["min-height:auto;"]);
 //# sourceMappingURL=TieredSelect.styles.js.map

package/dist/Tile/Tile.styles.js

@@ -44,7 +44,7 @@ var getTileStyles = function getTileStyles(_ref) {
 };
 export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkTile",
-  componentId: "core-12_37_0__sc-8q9p0n-0"
+  componentId: "core-12_39_0__sc-8q9p0n-0"
 })(["", " text-decoration:none;color:inherit;"], function (_ref2) {
   var $orientation = _ref2.$orientation;
   return getTileStyles({
@@ -54,7 +54,7 @@ export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
 });
 export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelectableTile",
-  componentId: "core-12_37_0__sc-8q9p0n-1"
+  componentId: "core-12_39_0__sc-8q9p0n-1"
 })(["", ""], function (_ref3) {
   var $orientation = _ref3.$orientation,
     $selected = _ref3.$selected,
@@ -72,7 +72,7 @@ export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledInteractableTile",
-  componentId: "core-12_37_0__sc-8q9p0n-2"
+  componentId: "core-12_39_0__sc-8q9p0n-2"
 })(["", ""], function (_ref4) {
   var $orientation = _ref4.$orientation;
   return getTileStyles({
@@ -81,26 +81,26 @@ export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_37_0__sc-8q9p0n-3"
+  componentId: "core-12_39_0__sc-8q9p0n-3"
 })(["grid-area:footer;padding:", "px;> ", "{flex-wrap:wrap-reverse;}"], spacing.lg, StyledActions);
 export var StyledTileContent = /*#__PURE__*/styled(StyledContent).withConfig({
   displayName: "StyledTileContent",
-  componentId: "core-12_37_0__sc-8q9p0n-4"
+  componentId: "core-12_39_0__sc-8q9p0n-4"
 })(["grid-column-start:hero-start;grid-column-end:body-end;padding:", "px;+ ", "{padding-top:0;}> ", ",> ", " > ", ",> ", "{grid-column-gap:", "px;}"], spacing.lg, StyledFooter, SFormRow, SForm, SFormRow, SFormRow, spacing.md);
 export var StyledHeroMedia = /*#__PURE__*/styled.figure.withConfig({
   displayName: "StyledHeroMedia",
-  componentId: "core-12_37_0__sc-8q9p0n-5"
+  componentId: "core-12_39_0__sc-8q9p0n-5"
 })(["grid-area:hero;margin:0;position:relative;overflow:hidden;font-size:0;> *{font-size:initial;}+ ", "{grid-area:body;}> video{background-color:", ";}> img,> picture > img{object-fit:cover;}", ""], StyledTileContent, colors.black, function (_ref5) {
   var $orientation = _ref5.$orientation;
   return $orientation === 'landscape' && !isIE11() ? css(["border-top-left-radius:inherit;border-bottom-left-radius:inherit;> *,> picture > img{height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:inherit;border-top-right-radius:inherit;> *,> picture > img{min-height:inherit;max-height:inherit;height:auto;width:100%;}"]);
 });
 export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroOverlay",
-  componentId: "core-12_37_0__sc-8q9p0n-6"
+  componentId: "core-12_39_0__sc-8q9p0n-6"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;"]);
 export var StyledHeroText = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroText",
-  componentId: "core-12_37_0__sc-8q9p0n-7"
+  componentId: "core-12_39_0__sc-8q9p0n-7"
 })(["grid-area:hero;+ ", "{grid-area:body;}padding:", "px;border-radius:inherit;", ""], StyledTileContent, spacing.lg, function (_ref6) {
   var $orientation = _ref6.$orientation;
   return $orientation === 'landscape' ? css(["display:flex;flex-direction:column;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);

package/dist/Title/Title.styles.js

@@ -5,36 +5,36 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_37_0__sc-1t2ye1d-0"
+  componentId: "core-12_39_0__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_37_0__sc-1t2ye1d-1"
+  componentId: "core-12_39_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_37_0__sc-1t2ye1d-2"
+  componentId: "core-12_39_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_37_0__sc-1t2ye1d-3"
+  componentId: "core-12_39_0__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_37_0__sc-1t2ye1d-4"
+  componentId: "core-12_39_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_37_0__sc-1t2ye1d-5"
+  componentId: "core-12_39_0__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_37_0__sc-1t2ye1d-6"
+  componentId: "core-12_39_0__sc-1t2ye1d-6"
 })(["display:block;margin-top:", "px;"], spacing.xs);
 //# sourceMappingURL=Title.styles.js.map

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_37_0__sc-1l6lk2n-0"
+  componentId: "core-12_39_0__sc-1l6lk2n-0"
 })(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
@@ -16,13 +16,13 @@ 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_37_0__sc-1l6lk2n-1"
+  componentId: "core-12_39_0__sc-1l6lk2n-1"
 })(["", " font-weight:", ";overflow:hidden;", ""], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
   var $legacy = _ref2.$legacy;
   return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
 });
 export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToastButton",
-  componentId: "core-12_37_0__sc-1l6lk2n-2"
+  componentId: "core-12_39_0__sc-1l6lk2n-2"
 })(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/ToggleButton/ToggleButton.styles.js

@@ -3,7 +3,7 @@ import { Button } from '../Button/Button';
 import { colors } from '../_styles/colors';
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_37_0__sc-1x59fxi-0"
+  componentId: "core-12_39_0__sc-1x59fxi-0"
 })(["", ""], function (_ref) {
   var $selected = _ref.$selected;
   return $selected && css(["background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}&:hover{background-color:", ";color:", ";}&:focus{background-color:", ";color:", ";}&:disabled{background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue96, colors.blue70, colors.blue70, colors.blue50);

package/dist/Token/Token.styles.js

@@ -6,15 +6,15 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_37_0__sc-zqi94b-0"
+  componentId: "core-12_39_0__sc-zqi94b-0"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_37_0__sc-zqi94b-1"
+  componentId: "core-12_39_0__sc-zqi94b-1"
 })(["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_37_0__sc-zqi94b-2"
+  componentId: "core-12_39_0__sc-zqi94b-2"
 })(["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

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBadge",
-  componentId: "core-12_37_0__sc-1jpjx47-0"
+  componentId: "core-12_39_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 +18,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_37_0__sc-1jpjx47-1"
+  componentId: "core-12_39_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_37_0__sc-1jpjx47-2"
+  componentId: "core-12_39_0__sc-1jpjx47-2"
 })(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_37_0__sc-1jpjx47-3"
+  componentId: "core-12_39_0__sc-1jpjx47-3"
 })(["flex:0 0 auto;margin-left:auto;padding-left:", "px;"], spacing.lg);
 export var StyledToolHeaderTitle = /*#__PURE__*/styled(H1).withConfig({
   displayName: "StyledToolHeaderTitle",
-  componentId: "core-12_37_0__sc-1jpjx47-4"
+  componentId: "core-12_39_0__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_37_0__sc-1jpjx47-5"
+  componentId: "core-12_39_0__sc-1jpjx47-5"
 })(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg);
 //# sourceMappingURL=ToolHeader.styles.js.map

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_37_0__sc-wa8j06-0"
+  componentId: "core-12_39_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_37_0__sc-wa8j06-1"
+  componentId: "core-12_39_0__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_37_0__sc-wa8j06-2"
+  componentId: "core-12_39_0__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { OverlayTriggerProps } from '../OverlayTrigger';
 import type { TooltipContentProps, TooltipProps } from './Tooltip.types';
+/** For the inline typography without all those button styles */
+export declare const TooltipIconOnlyButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 /**
 
  We use tooltips to display additional descriptive information about an element
@@ -8,8 +10,8 @@ import type { TooltipContentProps, TooltipProps } from './Tooltip.types';
  or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to
  clarify certain information (e.g. why a button is disabled).
 
- They can be displayed either by hovering over an element in the product or by
- hovering over an icon next to an element.
+ They can be displayed by hover or focus of an focusable element in the product or by
+ hovering or focusing an icon button next to an element. Provide a focusable child.
 
  @since 10.19.0
 

package/dist/Tooltip/Tooltip.js

@@ -8,15 +8,37 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { Help } from '@procore/core-icons';
 import React from 'react';
 import { OverlayTrigger } from '../OverlayTrigger';
+import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
-import { StyledContainer, StyledTooltip } from './Tooltip.styles';
+import { StyledContainer, StyledTooltip, StyledTooltipButton } from './Tooltip.styles';
+/** For the inline typography without all those button styles */
+export var TooltipIconOnlyButton = /*#__PURE__*/React.forwardRef(function TooltipDefaultTrigger(props, ref) {
+  var I18n = useI18nContext();
+  return /*#__PURE__*/React.createElement(StyledTooltipButton, _extends({
+    "aria-label": I18n.t('core.form.field.tooltipHelp')
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Help, {
+    size: "sm"
+  }));
+});
 var Content = /*#__PURE__*/React.forwardRef(function Content(_ref, ref) {
   var children = _ref.children,
     placement = _ref.placement,
     props = _objectWithoutProperties(_ref, _excluded);
+  // For most consistent results: First render an empty aria-live container, then add content.
+  // const [showContent, setShowContent] = React.useState(false)
+  // React.useEffect(() => {
+  //   const id = window.setTimeout(() => setShowContent(true), 10)
+  //   return () => window.clearTimeout(id)
+  // }, [])
+
   return /*#__PURE__*/React.createElement(StyledContainer, {
+    "aria-live": "polite",
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledTooltip, props, children));
 });
@@ -28,12 +50,15 @@ var Tooltip_ = /*#__PURE__*/React.forwardRef(function Tooltip(_ref2, ref) {
     _ref2$placement = _ref2.placement,
     placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
     _ref2$trigger = _ref2.trigger,
-    trigger = _ref2$trigger === void 0 ? 'hover' : _ref2$trigger,
+    trigger = _ref2$trigger === void 0 ? ['hover', 'focus'] : _ref2$trigger,
     props = _objectWithoutProperties(_ref2, _excluded2);
   var overlayNode = /*#__PURE__*/React.isValidElement(overlay) ? /*#__PURE__*/React.cloneElement(overlay, {
     placement: placement
   }) : /*#__PURE__*/React.createElement(Content, null, overlay);
-  return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({
+    role: 'tooltip',
+    passA11yPropsToOverlay: true
+  }, props), {}, {
     initialIsVisible: initialIsVisible,
     overlay: overlayNode,
     placement: placement,
@@ -54,8 +79,8 @@ Content.displayName = 'Tooltip.Content';
  or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to
  clarify certain information (e.g. why a button is disabled).
 
- They can be displayed either by hovering over an element in the product or by
- hovering over an icon next to an element.
+ They can be displayed by hover or focus of an focusable element in the product or by
+ hovering or focusing an icon button next to an element. Provide a focusable child.
 
  @since 10.19.0
 

package/dist/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","OverlayTrigger","addSubcomponents","StyledContainer","StyledTooltip","Content","forwardRef","_ref","ref","children","placement","props","_objectWithoutProperties","_excluded","createElement","Tooltip_","Tooltip","_ref2","_ref2$initialIsVisibl","initialIsVisible","overlay","_ref2$placement","_ref2$trigger","trigger","_excluded2","overlayNode","isValidElement","cloneElement","_objectSpread","restoreFocusOnHide","shrinkOverlay","arrow","displayName"],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport type { OverlayTriggerProps } from '../OverlayTrigger'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { StyledContainer, StyledTooltip } from './Tooltip.styles'\nimport type { TooltipContentProps, TooltipProps } from './Tooltip.types'\n\nconst Content = React.forwardRef<HTMLSpanElement, TooltipContentProps>(\n  function Content({ children, placement, ...props }, ref) {\n    return (\n      <StyledContainer ref={ref}>\n        <StyledTooltip {...props}>{children}</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',\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        ...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 either by hovering over an element in the product or by\n hovering over an icon next to an element.\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":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,eAAe,EAAEC,aAAa,QAAQ,kBAAkB;AAGjE,IAAMC,OAAO,gBAAGL,KAAK,CAACM,UAAU,CAC9B,SAASD,OAAOA,CAAAE,IAAA,EAAoCC,GAAG,EAAE;EAAA,IAAtCC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAKC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC9C,oBACEb,KAAA,CAAAc,aAAA,CAACX,eAAe;IAACK,GAAG,EAAEA;EAAI,gBACxBR,KAAA,CAAAc,aAAA,CAACV,aAAa,EAAKO,KAAK,EAAGF,QAAwB,CACpC,CAAC;AAEtB,CACF,CAAC;AAED,IAAMM,QAAQ,gBAAGf,KAAK,CAACM,UAAU,CAG/B,SAASU,OAAOA,CAAAC,KAAA,EAShBT,GAAG,EACH;EAAA,IAREC,QAAQ,GAAAQ,KAAA,CAARR,QAAQ;IAAAS,qBAAA,GAAAD,KAAA,CACRE,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACxBE,OAAO,GAAAH,KAAA,CAAPG,OAAO;IAAAC,eAAA,GAAAJ,KAAA,CACPP,SAAS;IAATA,SAAS,GAAAW,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAC,aAAA,GAAAL,KAAA,CACjBM,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,OAAO,GAAAA,aAAA;IACdX,KAAK,GAAAC,wBAAA,CAAAK,KAAA,EAAAO,UAAA;EAIV,IAAMC,WAAW,GAAG,aAAAzB,KAAK,CAAC0B,cAAc,CAACN,OAAO,CAAC,gBAC/CpB,KAAK,CAAC2B,YAAY,CAACP,OAAO,EAAwB;IAAEV,SAAS,EAATA;EAAU,CAAC,CAAC,gBAEhEV,KAAA,CAAAc,aAAA,CAACT,OAAO,QAAEe,OAAiB,CAC5B;EAED,oBACEpB,KAAA,CAAAc,aAAA,CAACb,cAAc,EAAA2B,aAAA,CAAAA,aAAA,KAERjB,KAAK;IACRQ,gBAAgB,EAAhBA,gBAAgB;IAChBC,OAAO,EAAEK,WAAW;IACpBf,SAAS,EAATA,SAAS;IACTF,GAAG,EAAHA,GAAG;IACHqB,kBAAkB,EAAE,KAAK;IACzBN,OAAO,EAAPA,OAAO;IACPO,aAAa,EAAE,IAAI;IACnBC,KAAK,EAAE;EAAI,IAGZtB,QACa,CAAC;AAErB,CAAC,CAAC;AAEFM,QAAQ,CAACiB,WAAW,GAAG,SAAS;AAEhC3B,OAAO,CAAC2B,WAAW,GAAG,iBAAiB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMhB,OAAO,GAAGd,gBAAgB,CACrC;EACEG,OAAO,EAAPA;AACF,CAAC,EACDU,QACF,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["Help","React","OverlayTrigger","useI18nContext","addSubcomponents","StyledContainer","StyledTooltip","StyledTooltipButton","TooltipIconOnlyButton","forwardRef","TooltipDefaultTrigger","props","ref","I18n","createElement","_extends","t","size","Content","_ref","children","placement","_objectWithoutProperties","_excluded","Tooltip_","Tooltip","_ref2","_ref2$initialIsVisibl","initialIsVisible","overlay","_ref2$placement","_ref2$trigger","trigger","_excluded2","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(props, ref) {\n  const I18n = useI18nContext()\n\n  return (\n    <StyledTooltipButton\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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"}

package/dist/Tooltip/Tooltip.styles.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledTooltipButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/Tooltip/Tooltip.styles.js

@@ -1,15 +1,23 @@
 import styled from 'styled-components';
+import { getUnstyledButton } from '../Semantic/Semantic.styles';
 import { getTypographyIntent } from '../Typography';
 import { borderRadius } from '../_styles/borderRadius';
 import { colors } from '../_styles/colors';
+import { getGapOutlineFocus } from '../_styles/mixins';
 import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledTooltip = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTooltip",
-  componentId: "core-12_37_0__sc-1fawsi4-0"
-})(["", " color:", ";max-width:200px;padding:", "px ", "px;position:relative;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;"], getTypographyIntent('small'), colors.white, spacing.sm, spacing.md);
+  componentId: "core-12_39_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_37_0__sc-1fawsi4-1"
-})(["display:inline-flex;background-color:", ";border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], colors.gray15, borderRadius.md, getShadow(3, 'bottom'), colors.gray15);
+  componentId: "core-12_39_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_39_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/Tooltip/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","names":["styled","getTypographyIntent","borderRadius","colors","getShadow","spacing","StyledTooltip","span","withConfig","displayName","componentId","white","sm","md","StyledContainer","gray15"],"sources":["../../src/Tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getTypographyIntent } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledTooltip = styled.span`\n  ${getTypographyIntent('small')}\n  color: ${colors.white};\n  max-width: 200px;\n  padding: ${spacing.sm}px ${spacing.md}px;\n  position: relative;\n\n  // for IE11, use word-wrap property\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  white-space: normal;\n`\n\nexport const StyledContainer = styled.span`\n  display: inline-flex;\n  background-color: ${colors.gray15};\n  border-radius: ${borderRadius.md}px;\n  ${getShadow(3, 'bottom')}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.gray15};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,aAAa,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kJACpCT,mBAAmB,CAAC,OAAO,CAAC,EACrBE,MAAM,CAACQ,KAAK,EAEVN,OAAO,CAACO,EAAE,EAAMP,OAAO,CAACQ,EAAE,CAOtC;AAED,OAAO,IAAMC,eAAe,gBAAGd,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uHAEpBP,MAAM,CAACY,MAAM,EAChBb,YAAY,CAACW,EAAE,EAC9BT,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGRD,MAAM,CAACY,MAAM,CAE9B"}
+{"version":3,"file":"Tooltip.styles.js","names":["styled","getUnstyledButton","getTypographyIntent","borderRadius","colors","getGapOutlineFocus","getShadow","spacing","StyledTooltip","span","withConfig","displayName","componentId","white","sm","md","StyledContainer","gray15","StyledTooltipButton","button","gray45"],"sources":["../../src/Tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getUnstyledButton } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getGapOutlineFocus } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledTooltip = styled.span`\n  ${getTypographyIntent('small')}\n  color: ${colors.white};\n  max-width: 200px;\n  padding: ${spacing.sm}px ${spacing.md}px;\n  position: relative;\n\n  // for IE11, use word-wrap property\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  white-space: normal;\n\n  &:empty {\n    display: none;\n  }\n`\n\nexport const StyledContainer = styled.span`\n  display: inline-flex;\n  background-color: ${colors.gray15};\n  border-radius: ${borderRadius.md}px;\n  ${getShadow(3, 'bottom')}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.gray15};\n  }\n\n  &:has(> span:empty) + [data-overlay-arrow] {\n    display: none;\n  }\n`\n\n// This is for the inline typography icon button. Note: not `Button` styles\nexport const StyledTooltipButton = styled.button`\n  ${getUnstyledButton}\n  // Create a circle around the icon for focus outline\n  border-radius: 50%;\n  color: ${colors.gray45};\n  display: inline-flex;\n  vertical-align: middle;\n\n  &:focus-visible {\n    // Icon does not touch viewBox borders. Already has 1px gap\n    ${getGapOutlineFocus('ontop')}\n  }\n\n  // if there is a sibling before, then add a leading space.\n  // can make the Tooltip a single child to opt-out\n  * + & {\n    margin-left: ${spacing.sm}px;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,QAAQ,mBAAmB;AACtD,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,aAAa,gBAAGR,MAAM,CAACS,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wKACpCV,mBAAmB,CAAC,OAAO,CAAC,EACrBE,MAAM,CAACS,KAAK,EAEVN,OAAO,CAACO,EAAE,EAAMP,OAAO,CAACQ,EAAE,CAWtC;AAED,OAAO,IAAMC,eAAe,gBAAGhB,MAAM,CAACS,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gLAEpBR,MAAM,CAACa,MAAM,EAChBd,YAAY,CAACY,EAAE,EAC9BT,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGRF,MAAM,CAACa,MAAM,CAM9B;;AAED;AACA,OAAO,IAAMC,mBAAmB,gBAAGlB,MAAM,CAACmB,MAAM,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oIAC5CX,iBAAiB,EAGVG,MAAM,CAACgB,MAAM,EAMlBf,kBAAkB,CAAC,OAAO,CAAC,EAMdE,OAAO,CAACO,EAAE,CAE5B"}