@procore/core-react 12.45.0 → 12.46.1

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_45_0__sc-e1ql06-0"
+  componentId: "core-12_46_1__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_45_0__sc-e1ql06-1"
+  componentId: "core-12_46_1__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_45_0__sc-e1ql06-2"
+  componentId: "core-12_46_1__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_45_0__sc-e1ql06-3"
+  componentId: "core-12_46_1__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_45_0__sc-e1ql06-4"
+  componentId: "core-12_46_1__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_45_0__sc-e1ql06-5"
+  componentId: "core-12_46_1__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_45_0__sc-e1ql06-6"
+  componentId: "core-12_46_1__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_45_0__sc-e1ql06-7"
+  componentId: "core-12_46_1__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_45_0__sc-e1ql06-8"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-0"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-1"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-2"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-3"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-4"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-5"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-6"
+  componentId: "core-12_46_1__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_45_0__sc-8q9p0n-7"
+  componentId: "core-12_46_1__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_45_0__sc-1t2ye1d-0"
+  componentId: "core-12_46_1__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_45_0__sc-1t2ye1d-1"
+  componentId: "core-12_46_1__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_45_0__sc-1t2ye1d-2"
+  componentId: "core-12_46_1__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_45_0__sc-1t2ye1d-3"
+  componentId: "core-12_46_1__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_45_0__sc-1t2ye1d-4"
+  componentId: "core-12_46_1__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_45_0__sc-1t2ye1d-5"
+  componentId: "core-12_46_1__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_45_0__sc-1t2ye1d-6"
+  componentId: "core-12_46_1__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_45_0__sc-1l6lk2n-0"
+  componentId: "core-12_46_1__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_45_0__sc-1l6lk2n-1"
+  componentId: "core-12_46_1__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_45_0__sc-1l6lk2n-2"
+  componentId: "core-12_46_1__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_45_0__sc-1x59fxi-0"
+  componentId: "core-12_46_1__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.js

@@ -3,12 +3,13 @@ var _excluded = ["children", "disabled", "focused", "error", "variant"],
 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); }
 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; }
-import { Clear } from '@procore/core-icons';
+import { Clear, Error as ErrorIcon } from '@procore/core-icons';
 import { useId } from '@react-aria/utils';
 import React from 'react';
+import { Tooltip } from '../Tooltip';
 import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
-import { StyledLabel, StyledRemove, StyledToken } from './Token.styles';
+import { StyledErrorButton, StyledErrorIcon, StyledLabel, StyledRemove, StyledToken } from './Token.styles';
 var TokenContext = /*#__PURE__*/React.createContext({
   labelId: '',
   removeId: '',
@@ -24,10 +25,13 @@ var Parent = /*#__PURE__*/React.forwardRef(function Token(_ref, ref) {
     error = _ref$error === void 0 ? false : _ref$error,
     variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
+  var i18n = useI18nContext();
   var labelId = useId();
   var removeId = useId();
   var isDisabled = disabled || variant === 'disabled';
   var isFocused = focused || variant === 'focused';
+  var hasError = Boolean(error);
+  var errorMessage = typeof error === 'string' ? error : undefined;
   return /*#__PURE__*/React.createElement(TokenContext.Provider, {
     value: {
       labelId: labelId,
@@ -40,8 +44,20 @@ var Parent = /*#__PURE__*/React.forwardRef(function Token(_ref, ref) {
   }, props, {
     $disabled: isDisabled,
     $focused: isFocused,
-    $error: error
-  }), children));
+    $error: hasError
+  }), hasError && (errorMessage ? /*#__PURE__*/React.createElement(Tooltip, {
+    overlay: errorMessage
+  }, /*#__PURE__*/React.createElement(StyledErrorButton, {
+    "aria-label": i18n.t('core.token.error'),
+    type: "button"
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    size: "sm"
+  }))) : /*#__PURE__*/React.createElement(StyledErrorIcon, {
+    "aria-label": i18n.t('core.token.error'),
+    role: "img"
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    size: "sm"
+  }))), children));
 });
 var Remove = /*#__PURE__*/React.forwardRef(function TokenRemove(props, ref) {
   var i18n = useI18nContext();

package/dist/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":["Clear","useId","React","useI18nContext","addSubcomponents","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","isDisabled","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","isFocused","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","Remove","TokenRemove","i18n","_React$useContext","useContext","t","concat","id","icon","role","size","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport { StyledLabel, StyledRemove, StyledToken } from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n  isDisabled: false,\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const labelId = useId()\n  const removeId = useId()\n  const isDisabled = disabled || variant === 'disabled'\n  const isFocused = focused || variant === 'focused'\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId, isDisabled }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={-1}\n        {...props}\n        $disabled={isDisabled}\n        $focused={isFocused}\n        $error={error}\n      >\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId, isDisabled } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        disabled={isDisabled}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":"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"}
+{"version":3,"file":"Token.js","names":["Clear","Error","ErrorIcon","useId","React","Tooltip","useI18nContext","addSubcomponents","StyledErrorButton","StyledErrorIcon","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","isDisabled","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","i18n","isFocused","hasError","Boolean","errorMessage","undefined","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","overlay","t","type","size","role","Remove","TokenRemove","_React$useContext","useContext","concat","id","icon","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear, Error as ErrorIcon } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledErrorButton,\n  StyledErrorIcon,\n  StyledLabel,\n  StyledRemove,\n  StyledToken,\n} from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n  isDisabled: false,\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const labelId = useId()\n  const removeId = useId()\n  const isDisabled = disabled || variant === 'disabled'\n  const isFocused = focused || variant === 'focused'\n  const hasError = Boolean(error)\n  const errorMessage = typeof error === 'string' ? error : undefined\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId, isDisabled }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={-1}\n        {...props}\n        $disabled={isDisabled}\n        $focused={isFocused}\n        $error={hasError}\n      >\n        {hasError &&\n          (errorMessage ? (\n            <Tooltip overlay={errorMessage}>\n              <StyledErrorButton\n                aria-label={i18n.t('core.token.error')}\n                type=\"button\"\n              >\n                <ErrorIcon size=\"sm\" />\n              </StyledErrorButton>\n            </Tooltip>\n          ) : (\n            <StyledErrorIcon aria-label={i18n.t('core.token.error')} role=\"img\">\n              <ErrorIcon size=\"sm\" />\n            </StyledErrorIcon>\n          ))}\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId, isDisabled } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        disabled={isDisabled}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":"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"}

package/dist/Token/Token.styles.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+export declare const StyledErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledErrorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledRemove: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;

package/dist/Token/Token.styles.js

@@ -1,20 +1,29 @@
 import styled, { css } from 'styled-components';
 import { Button } from '../Button';
+import { getUnstyledButton } from '../Semantic/Semantic.styles';
 import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
-import { getEllipsis, getFocus } from '../_styles/mixins';
+import { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
+export var StyledErrorIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StyledErrorIcon",
+  componentId: "core-12_46_1__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_46_1__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_45_0__sc-zqi94b-0"
+  componentId: "core-12_46_1__sc-zqi94b-2"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_45_0__sc-zqi94b-1"
+  componentId: "core-12_46_1__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_45_0__sc-zqi94b-2"
+  componentId: "core-12_46_1__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,
@@ -28,6 +37,6 @@ export var StyledToken = /*#__PURE__*/styled.div.withConfig({
 }, function (_ref3) {
   var _ref3$$error = _ref3.$error,
     $error = _ref3$$error === void 0 ? false : _ref3$$error;
-  return $error && css(["&,&:hover{background-color:", ";}"], colors.red50);
+  return $error && css(["padding-left:", "px;&,&:hover{background-color:", ";}"], spacing.xs, colors.red50);
 });
 //# sourceMappingURL=Token.styles.js.map

package/dist/Token/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getTypographyIntent","colors","getEllipsis","getFocus","spacing","StyledLabel","span","withConfig","displayName","componentId","StyledRemove","white","sm","blue40","StyledToken","div","blue50","xs","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: ${colors.white};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AACzD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCT,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMQ,YAAY,gBAAGb,MAAM,CAACE,MAAM,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMAE/BR,MAAM,CAACU,KAAK,EAGRP,OAAO,CAACQ,EAAE,EAAQR,OAAO,CAACQ,EAAE,EAKzBX,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACY,MAAM,EAKbZ,MAAM,CAACU,KAAK,CAExB;AAED,OAAO,IAAMG,WAAW,gBAAGjB,MAAM,CAACkB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfR,MAAM,CAACe,MAAM,EAGxBf,MAAM,CAACU,KAAK,EAOVP,OAAO,CAACa,EAAE,EAAMb,OAAO,CAACc,EAAE,EAIfjB,MAAM,CAACkB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACRxB,GAAG,sCACCK,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACkB,MAAM,EAE/B,CAACK,SAAS,IACZ1B,GAAG,8CACCY,YAAY,EACQT,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACkB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT1B,GAAG,0FACmBG,MAAM,CAAC0B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNhC,GAAG,wCAGqBG,MAAM,CAAC8B,KAAK,CAEnC;AAAA,EACJ"}
+{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getUnstyledButton","getTypographyIntent","colors","getEllipsis","getFocus","getGapOutlineFocus","spacing","StyledErrorIcon","span","withConfig","displayName","componentId","white","xs","StyledErrorButton","button","StyledLabel","StyledRemove","sm","blue40","StyledToken","div","blue50","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getUnstyledButton } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledErrorIcon = styled.span`\n  align-items: center;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n`\n\nexport const StyledErrorButton = styled.button`\n  ${getUnstyledButton}\n  align-items: center;\n  border-radius: 50%;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n\n  &:focus-visible {\n    ${getGapOutlineFocus('ontop')}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: ${colors.white};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      padding-left: ${spacing.xs}px;\n\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,EAAEC,kBAAkB,QAAQ,mBAAmB;AAC7E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,eAAe,gBAAGV,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6FAE/BT,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,CAC3B;AAED,OAAO,IAAMC,iBAAiB,gBAAGjB,MAAM,CAACkB,MAAM,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yIAC1CX,iBAAiB,EAGVE,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,EAGtBR,kBAAkB,CAAC,OAAO,CAAC,CAEhC;AAED,OAAO,IAAMW,WAAW,gBAAGnB,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCV,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMc,YAAY,gBAAGpB,MAAM,CAACE,MAAM,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMAE/BT,MAAM,CAACU,KAAK,EAGRN,OAAO,CAACY,EAAE,EAAQZ,OAAO,CAACY,EAAE,EAKzBhB,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACiB,MAAM,EAKbjB,MAAM,CAACU,KAAK,CAExB;AAED,OAAO,IAAMQ,WAAW,gBAAGvB,MAAM,CAACwB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfT,MAAM,CAACoB,MAAM,EAGxBpB,MAAM,CAACU,KAAK,EAOVN,OAAO,CAACO,EAAE,EAAMP,OAAO,CAACiB,EAAE,EAIfrB,MAAM,CAACsB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACR7B,GAAG,sCACCM,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACsB,MAAM,EAE/B,CAACK,SAAS,IACZ/B,GAAG,8CACCmB,YAAY,EACQf,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACsB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT/B,GAAG,0FACmBI,MAAM,CAAC8B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNrC,GAAG,4DACeQ,OAAO,CAACO,EAAE,EAIJX,MAAM,CAACkC,KAAK,CAEnC;AAAA,EACJ"}

package/dist/Token/Token.types.d.ts

@@ -9,9 +9,11 @@ export interface TokenProps {
      */
     focused?: boolean;
     /**
+     * When `true`, displays an error icon.
+     * When a `string`, displays an error icon with a tooltip containing the error message.
      * @since 10.19.0
      */
-    error?: boolean;
+    error?: boolean | string;
     /**
      * @deprecated
      *

package/dist/Token/Token.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n  isDisabled: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * When `true`, displays an error icon.\n   * When a `string`, displays an error icon with a tooltip containing the error message.\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n  isDisabled: boolean\n}\n"],"mappings":""}

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_45_0__sc-1jpjx47-0"
+  componentId: "core-12_46_1__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_45_0__sc-1jpjx47-1"
+  componentId: "core-12_46_1__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_45_0__sc-1jpjx47-2"
+  componentId: "core-12_46_1__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_45_0__sc-1jpjx47-3"
+  componentId: "core-12_46_1__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_45_0__sc-1jpjx47-4"
+  componentId: "core-12_46_1__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_45_0__sc-1jpjx47-5"
+  componentId: "core-12_46_1__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_45_0__sc-wa8j06-0"
+  componentId: "core-12_46_1__sc-wa8j06-0"
 })(["align-items:center;display:flex;gap:", "px;"], spacing.md);
 export var StyledTitleInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleInner",
-  componentId: "core-12_45_0__sc-wa8j06-1"
+  componentId: "core-12_46_1__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_45_0__sc-wa8j06-2"
+  componentId: "core-12_46_1__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.js

@@ -1,14 +1,15 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "placement"],
-  _excluded2 = ["children", "initialIsVisible", "overlay", "placement", "trigger"];
+var _excluded = ["type"],
+  _excluded2 = ["children", "placement"],
+  _excluded3 = ["children", "initialIsVisible", "overlay", "placement", "trigger"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 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 _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); }
 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';
@@ -16,9 +17,13 @@ import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 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) {
+export var TooltipIconOnlyButton = /*#__PURE__*/React.forwardRef(function TooltipDefaultTrigger(_ref, ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
   var I18n = useI18nContext();
   return /*#__PURE__*/React.createElement(StyledTooltipButton, _extends({
+    type: type,
     "aria-label": I18n.t('core.form.field.tooltipHelp')
   }, props, {
     ref: ref
@@ -26,10 +31,10 @@ export var TooltipIconOnlyButton = /*#__PURE__*/React.forwardRef(function Toolti
     size: "sm"
   }));
 });
-var Content = /*#__PURE__*/React.forwardRef(function Content(_ref, ref) {
-  var children = _ref.children,
-    placement = _ref.placement,
-    props = _objectWithoutProperties(_ref, _excluded);
+var Content = /*#__PURE__*/React.forwardRef(function Content(_ref2, ref) {
+  var children = _ref2.children,
+    placement = _ref2.placement,
+    props = _objectWithoutProperties(_ref2, _excluded2);
   // For most consistent results: First render an empty aria-live container, then add content.
   // const [showContent, setShowContent] = React.useState(false)
   // React.useEffect(() => {
@@ -42,16 +47,16 @@ var Content = /*#__PURE__*/React.forwardRef(function Content(_ref, ref) {
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledTooltip, props, children));
 });
-var Tooltip_ = /*#__PURE__*/React.forwardRef(function Tooltip(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$initialIsVisibl = _ref2.initialIsVisible,
-    initialIsVisible = _ref2$initialIsVisibl === void 0 ? false : _ref2$initialIsVisibl,
-    overlay = _ref2.overlay,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
-    _ref2$trigger = _ref2.trigger,
-    trigger = _ref2$trigger === void 0 ? ['hover', 'focus'] : _ref2$trigger,
-    props = _objectWithoutProperties(_ref2, _excluded2);
+var Tooltip_ = /*#__PURE__*/React.forwardRef(function Tooltip(_ref3, ref) {
+  var children = _ref3.children,
+    _ref3$initialIsVisibl = _ref3.initialIsVisible,
+    initialIsVisible = _ref3$initialIsVisibl === void 0 ? false : _ref3$initialIsVisibl,
+    overlay = _ref3.overlay,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? 'top' : _ref3$placement,
+    _ref3$trigger = _ref3.trigger,
+    trigger = _ref3$trigger === void 0 ? ['hover', 'focus'] : _ref3$trigger,
+    props = _objectWithoutProperties(_ref3, _excluded3);
   var overlayNode = /*#__PURE__*/React.isValidElement(overlay) ? /*#__PURE__*/React.cloneElement(overlay, {
     placement: placement
   }) : /*#__PURE__*/React.createElement(Content, null, overlay);

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","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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"}
+{"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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"}

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_45_0__sc-1fawsi4-0"
+  componentId: "core-12_46_1__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_45_0__sc-1fawsi4-1"
+  componentId: "core-12_46_1__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_45_0__sc-1fawsi4-2"
+  componentId: "core-12_46_1__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

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