@procore/core-react 12.48.1 → 12.49.0

package/dist/Toast/Toast.styles.js

@@ -7,22 +7,22 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledToast = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToast",
-  componentId: "core-12_48_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) {
+  componentId: "core-12_49_0__sc-1l6lk2n-0"
+})(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;a{color:", ";text-decoration:underline;}"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
-}, borderRadius.md, colors.white, spacing.md, spacing.xl);
+}, borderRadius.md, colors.white, spacing.md, spacing.xl, colors.white);
 
 // $legacy is direct string inside Toast. Next is with subcomponents
 export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledToastText",
-  componentId: "core-12_48_1__sc-1l6lk2n-1"
+  componentId: "core-12_49_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_48_1__sc-1l6lk2n-2"
+  componentId: "core-12_49_0__sc-1l6lk2n-2"
 })(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/Toast/Toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.js","names":["styled","Button","getTypographyIntent","typographyWeights","borderRadius","colors","getShadow","spacing","StyledToast","div","withConfig","displayName","componentId","_ref","$variant","green30","red50","md","white","xl","StyledToastText","span","semibold","_ref2","$legacy","concat","lg","StyledToastButton"],"sources":["../../src/Toast/Toast.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '../Button'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { ToastVariant } from './Toast.types'\n\nexport const StyledToast = styled.div<{ $variant: ToastVariant }>`\n  ${getShadow(4, 'bottom')}\n\n  align-items: center;\n  background-color: ${({ $variant }) =>\n    $variant === 'success' ? colors.green30 : colors.red50};\n  border-radius: ${borderRadius.md}px;\n  color: ${colors.white};\n  display: flex;\n  min-height: 48px;\n  padding: ${spacing.md}px ${spacing.xl}px;\n  width: 550px;\n`\n\n// $legacy is direct string inside Toast. Next is with subcomponents\nexport const StyledToastText = styled.span<{ $legacy?: boolean }>`\n  ${getTypographyIntent('body')}\n  font-weight: ${typographyWeights.semibold};\n  overflow: hidden;\n\n  ${({ $legacy }) =>\n    $legacy ? `margin-left: ${spacing.lg}px;` : `padding: 0 ${spacing.lg}px;`}\n`\n\nexport const StyledToastButton = styled(Button)`\n  line-height: 0;\n  color: ${colors.white};\n  padding: 0;\n  margin-left: auto;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,iCAAiC;AACxC,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sJACjCN,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGJ,UAAAO,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OAC7BA,QAAQ,KAAK,SAAS,GAAGT,MAAM,CAACU,OAAO,GAAGV,MAAM,CAACW,KAAK;AAAA,GACvCZ,YAAY,CAACa,EAAE,EACvBZ,MAAM,CAACa,KAAK,EAGVX,OAAO,CAACU,EAAE,EAAMV,OAAO,CAACY,EAAE,CAEtC;;AAED;AACA,OAAO,IAAMC,eAAe,gBAAGpB,MAAM,CAACqB,IAAI,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDACtCV,mBAAmB,CAAC,MAAM,CAAC,EACdC,iBAAiB,CAACmB,QAAQ,EAGvC,UAAAC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,mBAAAC,MAAA,CAAmBlB,OAAO,CAACmB,EAAE,yBAAAD,MAAA,CAAsBlB,OAAO,CAACmB,EAAE,QAAK;AAAA,EAC5E;AAED,OAAO,IAAMC,iBAAiB,gBAAG3B,MAAM,CAACC,MAAM,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAEpCP,MAAM,CAACa,KAAK,CAGtB"}
+{"version":3,"file":"Toast.styles.js","names":["styled","Button","getTypographyIntent","typographyWeights","borderRadius","colors","getShadow","spacing","StyledToast","div","withConfig","displayName","componentId","_ref","$variant","green30","red50","md","white","xl","StyledToastText","span","semibold","_ref2","$legacy","concat","lg","StyledToastButton"],"sources":["../../src/Toast/Toast.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '../Button'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { ToastVariant } from './Toast.types'\n\nexport const StyledToast = styled.div<{ $variant: ToastVariant }>`\n  ${getShadow(4, 'bottom')}\n\n  align-items: center;\n  background-color: ${({ $variant }) =>\n    $variant === 'success' ? colors.green30 : colors.red50};\n  border-radius: ${borderRadius.md}px;\n  color: ${colors.white};\n  display: flex;\n  min-height: 48px;\n  padding: ${spacing.md}px ${spacing.xl}px;\n  width: 550px;\n\n  a {\n    color: ${colors.white};\n    text-decoration: underline;\n  }\n`\n\n// $legacy is direct string inside Toast. Next is with subcomponents\nexport const StyledToastText = styled.span<{ $legacy?: boolean }>`\n  ${getTypographyIntent('body')}\n  font-weight: ${typographyWeights.semibold};\n  overflow: hidden;\n\n  ${({ $legacy }) =>\n    $legacy ? `margin-left: ${spacing.lg}px;` : `padding: 0 ${spacing.lg}px;`}\n`\n\nexport const StyledToastButton = styled(Button)`\n  line-height: 0;\n  color: ${colors.white};\n  padding: 0;\n  margin-left: auto;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,iCAAiC;AACxC,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8LACjCN,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGJ,UAAAO,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OAC7BA,QAAQ,KAAK,SAAS,GAAGT,MAAM,CAACU,OAAO,GAAGV,MAAM,CAACW,KAAK;AAAA,GACvCZ,YAAY,CAACa,EAAE,EACvBZ,MAAM,CAACa,KAAK,EAGVX,OAAO,CAACU,EAAE,EAAMV,OAAO,CAACY,EAAE,EAI1Bd,MAAM,CAACa,KAAK,CAGxB;;AAED;AACA,OAAO,IAAME,eAAe,gBAAGpB,MAAM,CAACqB,IAAI,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDACtCV,mBAAmB,CAAC,MAAM,CAAC,EACdC,iBAAiB,CAACmB,QAAQ,EAGvC,UAAAC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,mBAAAC,MAAA,CAAmBlB,OAAO,CAACmB,EAAE,yBAAAD,MAAA,CAAsBlB,OAAO,CAACmB,EAAE,QAAK;AAAA,EAC5E;AAED,OAAO,IAAMC,iBAAiB,gBAAG3B,MAAM,CAACC,MAAM,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAEpCP,MAAM,CAACa,KAAK,CAGtB"}

package/dist/ToggleButton/ToggleButton.styles.js

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

package/dist/Token/Token.styles.js

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

package/dist/ToolHeader/ToolHeader.d.ts

@@ -8,9 +8,17 @@ export declare const Title: import("styled-components/dist/types").IStyledCompon
 export declare const Tabs: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const Actions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 /**
- * @deprecated
+ * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.
  *
- * This `Badge` pattern is no longer supported and it is now recommended to use a `Pill` instead.
+ * BEFORE
+ * ```tsx
+ * <ToolHeader.Badge variant="new">New</ToolHeader.Badge>
+ * ```
+ *
+ * AFTER
+ * ```tsx
+ * <Pill color="magenta">New</Pill>
+ * ```
  *
  * @deprecatedSince 10.20.0
  *
@@ -18,9 +26,30 @@ export declare const Actions: import("styled-components/dist/types").IStyledComp
  */
 export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * @deprecated This `ToolHeader` component is no longer supported and it is now recommended
- * to use the layout `ToolLandingPage`, `ToolLandingPage.Title` (for the settings button),
- * `ToolLandingPage.Tabs`, or based on content a `DetailPage`.
+ * @deprecated Use `ToolLandingPage` (with `ToolLandingPage.Title`, `ToolLandingPage.Tabs`, and related slots) for tool headers; use `DetailPage` when the screen is a record detail layout.
+ *
+ * BEFORE
+ * ```tsx
+ * <ToolHeader>
+ *   <ToolHeader.Icon />
+ *   <ToolHeader.Title>Tools</ToolHeader.Title>
+ *   <ToolHeader.Tabs>...</ToolHeader.Tabs>
+ *   <ToolHeader.Actions>...</ToolHeader.Actions>
+ * </ToolHeader>
+ * ```
+ *
+ * AFTER
+ * ```tsx
+ * <ToolLandingPage>
+ *   <ToolLandingPage.Main>
+ *     <ToolLandingPage.Header>
+ *       <ToolLandingPage.Title>...</ToolLandingPage.Title>
+ *       <ToolLandingPage.Tabs>...</ToolLandingPage.Tabs>
+ *     </ToolLandingPage.Header>
+ *     <ToolLandingPage.Body>...</ToolLandingPage.Body>
+ *   </ToolLandingPage.Main>
+ * </ToolLandingPage>
+ * ```
  *
  * @deprecatedSince 12.9.0
  *

package/dist/ToolHeader/ToolHeader.js

@@ -60,9 +60,17 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref2, ref) {
 export var Actions = StyledHeaderActions;
 
 /**
- * @deprecated
+ * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.
  *
- * This `Badge` pattern is no longer supported and it is now recommended to use a `Pill` instead.
+ * BEFORE
+ * ```tsx
+ * <ToolHeader.Badge variant="new">New</ToolHeader.Badge>
+ * ```
+ *
+ * AFTER
+ * ```tsx
+ * <Pill color="magenta">New</Pill>
+ * ```
  *
  * @deprecatedSince 10.20.0
  *
@@ -85,9 +93,30 @@ Actions.displayName = 'ToolHeader.Actions';
 Badge.displayName = 'ToolHeader.Badge';
 
 /**
- * @deprecated This `ToolHeader` component is no longer supported and it is now recommended
- * to use the layout `ToolLandingPage`, `ToolLandingPage.Title` (for the settings button),
- * `ToolLandingPage.Tabs`, or based on content a `DetailPage`.
+ * @deprecated Use `ToolLandingPage` (with `ToolLandingPage.Title`, `ToolLandingPage.Tabs`, and related slots) for tool headers; use `DetailPage` when the screen is a record detail layout.
+ *
+ * BEFORE
+ * ```tsx
+ * <ToolHeader>
+ *   <ToolHeader.Icon />
+ *   <ToolHeader.Title>Tools</ToolHeader.Title>
+ *   <ToolHeader.Tabs>...</ToolHeader.Tabs>
+ *   <ToolHeader.Actions>...</ToolHeader.Actions>
+ * </ToolHeader>
+ * ```
+ *
+ * AFTER
+ * ```tsx
+ * <ToolLandingPage>
+ *   <ToolLandingPage.Main>
+ *     <ToolLandingPage.Header>
+ *       <ToolLandingPage.Title>...</ToolLandingPage.Title>
+ *       <ToolLandingPage.Tabs>...</ToolLandingPage.Tabs>
+ *     </ToolLandingPage.Header>
+ *     <ToolLandingPage.Body>...</ToolLandingPage.Body>
+ *   </ToolLandingPage.Main>
+ * </ToolLandingPage>
+ * ```
  *
  * @deprecatedSince 12.9.0
  *

package/dist/ToolHeader/ToolHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolHeader.js","names":["Cog","React","Tabs","TabsBase","useI18nContext","addSubcomponents","ActionIcon","StyledHeaderActions","StyledHeaderBadge","StyledHeaderTabs","StyledToolHeader","StyledToolHeaderIconContainer","StyledToolHeaderTitle","ToolHeader_","forwardRef","props","ref","createElement","_extends","Icon","_ref","className","icon_","icon","_objectWithoutProperties","_excluded","cloneElement","_objectSpread","size","SettingsActionInner","i18n","Comp","t","ToolHeader","SettingsAction","Title","_ref2","children","_excluded2","role","Actions","Badge","_ref3","variant","_excluded3","$variant","displayName"],"sources":["../../src/ToolHeader/ToolHeader.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons'\nimport React from 'react'\nimport { Tabs as TabsBase } from '../Tabs/Tabs'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { ActionIcon } from './ActionIcon'\nimport {\n  StyledHeaderActions,\n  StyledHeaderBadge,\n  StyledHeaderTabs,\n  StyledToolHeader,\n  StyledToolHeaderIconContainer,\n  StyledToolHeaderTitle,\n} from './ToolHeader.styles'\nimport type {\n  ToolHeaderBadgeProps,\n  ToolHeaderIconProps,\n  ToolHeaderSettingsActionPolyType,\n  ToolHeaderSettingsActionProps,\n  ToolHeaderSettingsActionRef,\n} from './ToolHeader.types'\n\nconst ToolHeader_ = React.forwardRef<HTMLDivElement, any>((props, ref) => {\n  return <StyledToolHeader ref={ref} {...props} />\n})\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  React.SVGAttributes<SVGElement> & ToolHeaderIconProps\n>(function Icon({ className, icon: icon_, ...props }, ref) {\n  const icon = icon_ ? (\n    React.cloneElement(icon_ as React.ReactElement, { ...props, size: 'sm' })\n  ) : (\n    <Cog {...props} size=\"sm\" />\n  )\n  return (\n    <StyledToolHeaderIconContainer className={className} ref={ref}>\n      {icon}\n    </StyledToolHeaderIconContainer>\n  )\n})\n\nfunction SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(\n  props: ToolHeaderSettingsActionProps<Role>,\n  ref: ToolHeaderSettingsActionRef<Role>\n) {\n  const i18n = useI18nContext()\n\n  const Comp = ActionIcon as any\n\n  return (\n    <Comp\n      aria-label={i18n.t('core.toolHeader.settingsAction')}\n      ref={ref}\n      {...props}\n    >\n      <ToolHeader.Icon />\n    </Comp>\n  )\n}\n\nconst SettingsAction = React.forwardRef(SettingsActionInner) as <\n  Role extends ToolHeaderSettingsActionPolyType\n>(\n  props: ToolHeaderSettingsActionProps<Role>\n) => ReturnType<typeof SettingsActionInner>\n\nexport const Title = StyledToolHeaderTitle\n\nexport const Tabs = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function Tabs({ children, className, ...props }, ref) {\n  return (\n    <StyledHeaderTabs className={className} ref={ref}>\n      <TabsBase {...props} role={props.role as 'navigation'}>\n        {children}\n      </TabsBase>\n    </StyledHeaderTabs>\n  )\n})\n\nexport const Actions = StyledHeaderActions\n\n/**\n * @deprecated\n *\n * This `Badge` pattern is no longer supported and it is now recommended to use a `Pill` instead.\n *\n * @deprecatedSince 10.20.0\n *\n * @see https://core.procore.com/latest/web/components/pill/react/\n */\nexport const Badge = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps\n>(function Badge({ children, variant, ...props }, ref) {\n  return (\n    <StyledHeaderBadge {...props} $variant={variant} ref={ref}>\n      {children}\n    </StyledHeaderBadge>\n  )\n})\n\nToolHeader_.displayName = 'ToolHeader'\n\nIcon.displayName = 'ToolHeader.Icon'\n\nTitle.displayName = 'ToolHeader.Title'\n\nTabs.displayName = 'ToolHeader.Tabs'\n\nActions.displayName = 'ToolHeader.Actions'\n\nBadge.displayName = 'ToolHeader.Badge'\n\n/**\n * @deprecated This `ToolHeader` component is no longer supported and it is now recommended\n * to use the layout `ToolLandingPage`, `ToolLandingPage.Title` (for the settings button),\n * `ToolLandingPage.Tabs`, or based on content a `DetailPage`.\n *\n * @deprecatedSince 12.9.0\n *\n * @see https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo\n */\nexport const ToolHeader = addSubcomponents(\n  {\n    Icon,\n    Title,\n    Tabs,\n    Actions,\n    Badge,\n    SettingsAction,\n  },\n  ToolHeader_\n)\n"],"mappings":"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"}
+{"version":3,"file":"ToolHeader.js","names":["Cog","React","Tabs","TabsBase","useI18nContext","addSubcomponents","ActionIcon","StyledHeaderActions","StyledHeaderBadge","StyledHeaderTabs","StyledToolHeader","StyledToolHeaderIconContainer","StyledToolHeaderTitle","ToolHeader_","forwardRef","props","ref","createElement","_extends","Icon","_ref","className","icon_","icon","_objectWithoutProperties","_excluded","cloneElement","_objectSpread","size","SettingsActionInner","i18n","Comp","t","ToolHeader","SettingsAction","Title","_ref2","children","_excluded2","role","Actions","Badge","_ref3","variant","_excluded3","$variant","displayName"],"sources":["../../src/ToolHeader/ToolHeader.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons'\nimport React from 'react'\nimport { Tabs as TabsBase } from '../Tabs/Tabs'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { ActionIcon } from './ActionIcon'\nimport {\n  StyledHeaderActions,\n  StyledHeaderBadge,\n  StyledHeaderTabs,\n  StyledToolHeader,\n  StyledToolHeaderIconContainer,\n  StyledToolHeaderTitle,\n} from './ToolHeader.styles'\nimport type {\n  ToolHeaderBadgeProps,\n  ToolHeaderIconProps,\n  ToolHeaderSettingsActionPolyType,\n  ToolHeaderSettingsActionProps,\n  ToolHeaderSettingsActionRef,\n} from './ToolHeader.types'\n\nconst ToolHeader_ = React.forwardRef<HTMLDivElement, any>((props, ref) => {\n  return <StyledToolHeader ref={ref} {...props} />\n})\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  React.SVGAttributes<SVGElement> & ToolHeaderIconProps\n>(function Icon({ className, icon: icon_, ...props }, ref) {\n  const icon = icon_ ? (\n    React.cloneElement(icon_ as React.ReactElement, { ...props, size: 'sm' })\n  ) : (\n    <Cog {...props} size=\"sm\" />\n  )\n  return (\n    <StyledToolHeaderIconContainer className={className} ref={ref}>\n      {icon}\n    </StyledToolHeaderIconContainer>\n  )\n})\n\nfunction SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(\n  props: ToolHeaderSettingsActionProps<Role>,\n  ref: ToolHeaderSettingsActionRef<Role>\n) {\n  const i18n = useI18nContext()\n\n  const Comp = ActionIcon as any\n\n  return (\n    <Comp\n      aria-label={i18n.t('core.toolHeader.settingsAction')}\n      ref={ref}\n      {...props}\n    >\n      <ToolHeader.Icon />\n    </Comp>\n  )\n}\n\nconst SettingsAction = React.forwardRef(SettingsActionInner) as <\n  Role extends ToolHeaderSettingsActionPolyType\n>(\n  props: ToolHeaderSettingsActionProps<Role>\n) => ReturnType<typeof SettingsActionInner>\n\nexport const Title = StyledToolHeaderTitle\n\nexport const Tabs = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function Tabs({ children, className, ...props }, ref) {\n  return (\n    <StyledHeaderTabs className={className} ref={ref}>\n      <TabsBase {...props} role={props.role as 'navigation'}>\n        {children}\n      </TabsBase>\n    </StyledHeaderTabs>\n  )\n})\n\nexport const Actions = StyledHeaderActions\n\n/**\n * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader.Badge variant=\"new\">New</ToolHeader.Badge>\n * ```\n *\n * AFTER\n * ```tsx\n * <Pill color=\"magenta\">New</Pill>\n * ```\n *\n * @deprecatedSince 10.20.0\n *\n * @see https://core.procore.com/latest/web/components/pill/react/\n */\nexport const Badge = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps\n>(function Badge({ children, variant, ...props }, ref) {\n  return (\n    <StyledHeaderBadge {...props} $variant={variant} ref={ref}>\n      {children}\n    </StyledHeaderBadge>\n  )\n})\n\nToolHeader_.displayName = 'ToolHeader'\n\nIcon.displayName = 'ToolHeader.Icon'\n\nTitle.displayName = 'ToolHeader.Title'\n\nTabs.displayName = 'ToolHeader.Tabs'\n\nActions.displayName = 'ToolHeader.Actions'\n\nBadge.displayName = 'ToolHeader.Badge'\n\n/**\n * @deprecated Use `ToolLandingPage` (with `ToolLandingPage.Title`, `ToolLandingPage.Tabs`, and related slots) for tool headers; use `DetailPage` when the screen is a record detail layout.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader>\n *   <ToolHeader.Icon />\n *   <ToolHeader.Title>Tools</ToolHeader.Title>\n *   <ToolHeader.Tabs>...</ToolHeader.Tabs>\n *   <ToolHeader.Actions>...</ToolHeader.Actions>\n * </ToolHeader>\n * ```\n *\n * AFTER\n * ```tsx\n * <ToolLandingPage>\n *   <ToolLandingPage.Main>\n *     <ToolLandingPage.Header>\n *       <ToolLandingPage.Title>...</ToolLandingPage.Title>\n *       <ToolLandingPage.Tabs>...</ToolLandingPage.Tabs>\n *     </ToolLandingPage.Header>\n *     <ToolLandingPage.Body>...</ToolLandingPage.Body>\n *   </ToolLandingPage.Main>\n * </ToolLandingPage>\n * ```\n *\n * @deprecatedSince 12.9.0\n *\n * @see https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo\n */\nexport const ToolHeader = addSubcomponents(\n  {\n    Icon,\n    Title,\n    Tabs,\n    Actions,\n    Badge,\n    SettingsAction,\n  },\n  ToolHeader_\n)\n"],"mappings":"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"}

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_48_1__sc-1jpjx47-0"
+  componentId: "core-12_49_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_48_1__sc-1jpjx47-1"
+  componentId: "core-12_49_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_48_1__sc-1jpjx47-2"
+  componentId: "core-12_49_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_48_1__sc-1jpjx47-3"
+  componentId: "core-12_49_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_48_1__sc-1jpjx47-4"
+  componentId: "core-12_49_0__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_48_1__sc-1jpjx47-5"
+  componentId: "core-12_49_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.js

@@ -22,6 +22,7 @@ export var ToolLandingPage_ = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       hasNavigation: false
     }
   }, /*#__PURE__*/React.createElement(Page, _extends({
+    fillHeight: true,
     ref: ref
   }, props, {
     "data-core-react": "tool-landing-page"

package/dist/ToolLandingPage/ToolLandingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolLandingPage.js","names":["Cog","React","LinkButton","DetailPage","DetailPageViewContext","Page","Tooltip","useI18nContext","addSubcomponents","StyledTitleInner","StyledTitleOuter","StyledToolLandingPageBodyContent","ToolLandingPage_","forwardRef","_ref","ref","children","props","_objectWithoutProperties","_excluded","createElement","Provider","value","width","hasNavigation","_extends","Title","_ref2","settingsHref","settingsLink","_excluded2","i18n","link","settingsLinkIsString","settingsButton","overlay","t","trigger","as","undefined","href","icon","role","variant","Body","_ref3","_excluded3","ToolLandingPage","Main","Header","Banner","Tabs","Aside","displayName"],"sources":["../../src/ToolLandingPage/ToolLandingPage.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { LinkButton } from '../Button'\nimport { DetailPage, DetailPageViewContext } from '../DetailPage'\nimport { Page } from '../PageLayout'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledTitleInner,\n  StyledTitleOuter,\n  StyledToolLandingPageBodyContent,\n} from './ToolLandingPage.styles'\nimport type {\n  ToolLandingPageProps,\n  ToolLandingPageTitleProps,\n} from './ToolLandingPage.types'\n\nexport const ToolLandingPage_ = React.forwardRef<\n  HTMLDivElement,\n  ToolLandingPageProps\n>(({ children, ...props }, ref) => {\n  return (\n    <DetailPageViewContext.Provider\n      value={{ width: 'xl', hasNavigation: false }}\n    >\n      <Page ref={ref} {...props} data-core-react=\"tool-landing-page\">\n        {children}\n      </Page>\n    </DetailPageViewContext.Provider>\n  )\n})\n\nexport const Title = React.forwardRef<\n  HTMLDivElement,\n  ToolLandingPageTitleProps\n>(({ children, settingsHref, settingsLink, ...props }, ref) => {\n  const i18n = useI18nContext()\n\n  // Use settingsLink if provided, otherwise fall back to settingsHref for backwards compatibility\n  const link = settingsLink ?? settingsHref\n  const settingsLinkIsString = typeof link === 'string'\n\n  const settingsButton = link ? (\n    <Tooltip\n      overlay={i18n.t('core.toolHeader.settingsAction')}\n      trigger={['hover', 'focus']}\n    >\n      <LinkButton\n        aria-label={i18n.t('core.toolHeader.settingsAction')}\n        as={settingsLinkIsString ? undefined : link}\n        href={settingsLinkIsString ? link : undefined}\n        icon={<Cog />}\n        role=\"link\"\n        variant=\"secondary\"\n      />\n    </Tooltip>\n  ) : null\n\n  return (\n    <StyledTitleOuter ref={ref} {...props}>\n      {settingsButton}\n      <StyledTitleInner>{children}</StyledTitleInner>\n    </StyledTitleOuter>\n  )\n})\n\nexport const Body = React.forwardRef<HTMLDivElement, Props>(\n  ({ children, ...props }, ref) => (\n    <DetailPage.Body ref={ref} {...props}>\n      <StyledToolLandingPageBodyContent>\n        {children}\n      </StyledToolLandingPageBodyContent>\n    </DetailPage.Body>\n  )\n)\n\n/**\n * A list page is basically a copy of SettingsPage/DetailPage. However, it has some differences.\n * ToolLandingPage does not have Breadcrumbs, nested sections (although, we may need them in the future), and Footer.\n *\n * @since 12.9.0\n *\n * @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo)\n *\n * @see [Design Guidelines](https://design.procore.com/tool-landing-layout)\n */\n\nexport const ToolLandingPage = addSubcomponents(\n  {\n    Main: Page.Main,\n    Header: Page.Header,\n    Banner: Page.Banner,\n    Title,\n    Tabs: Page.Tabs,\n    Body,\n    Aside: Page.Aside,\n  },\n  ToolLandingPage_\n)\n\nToolLandingPage_.displayName = 'ToolLandingPage'\n"],"mappings":"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"}
+{"version":3,"file":"ToolLandingPage.js","names":["Cog","React","LinkButton","DetailPage","DetailPageViewContext","Page","Tooltip","useI18nContext","addSubcomponents","StyledTitleInner","StyledTitleOuter","StyledToolLandingPageBodyContent","ToolLandingPage_","forwardRef","_ref","ref","children","props","_objectWithoutProperties","_excluded","createElement","Provider","value","width","hasNavigation","_extends","fillHeight","Title","_ref2","settingsHref","settingsLink","_excluded2","i18n","link","settingsLinkIsString","settingsButton","overlay","t","trigger","as","undefined","href","icon","role","variant","Body","_ref3","_excluded3","ToolLandingPage","Main","Header","Banner","Tabs","Aside","displayName"],"sources":["../../src/ToolLandingPage/ToolLandingPage.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { LinkButton } from '../Button'\nimport { DetailPage, DetailPageViewContext } from '../DetailPage'\nimport { Page } from '../PageLayout'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledTitleInner,\n  StyledTitleOuter,\n  StyledToolLandingPageBodyContent,\n} from './ToolLandingPage.styles'\nimport type {\n  ToolLandingPageProps,\n  ToolLandingPageTitleProps,\n} from './ToolLandingPage.types'\n\nexport const ToolLandingPage_ = React.forwardRef<\n  HTMLDivElement,\n  ToolLandingPageProps\n>(({ children, ...props }, ref) => {\n  return (\n    <DetailPageViewContext.Provider\n      value={{ width: 'xl', hasNavigation: false }}\n    >\n      <Page fillHeight ref={ref} {...props} data-core-react=\"tool-landing-page\">\n        {children}\n      </Page>\n    </DetailPageViewContext.Provider>\n  )\n})\n\nexport const Title = React.forwardRef<\n  HTMLDivElement,\n  ToolLandingPageTitleProps\n>(({ children, settingsHref, settingsLink, ...props }, ref) => {\n  const i18n = useI18nContext()\n\n  // Use settingsLink if provided, otherwise fall back to settingsHref for backwards compatibility\n  const link = settingsLink ?? settingsHref\n  const settingsLinkIsString = typeof link === 'string'\n\n  const settingsButton = link ? (\n    <Tooltip\n      overlay={i18n.t('core.toolHeader.settingsAction')}\n      trigger={['hover', 'focus']}\n    >\n      <LinkButton\n        aria-label={i18n.t('core.toolHeader.settingsAction')}\n        as={settingsLinkIsString ? undefined : link}\n        href={settingsLinkIsString ? link : undefined}\n        icon={<Cog />}\n        role=\"link\"\n        variant=\"secondary\"\n      />\n    </Tooltip>\n  ) : null\n\n  return (\n    <StyledTitleOuter ref={ref} {...props}>\n      {settingsButton}\n      <StyledTitleInner>{children}</StyledTitleInner>\n    </StyledTitleOuter>\n  )\n})\n\nexport const Body = React.forwardRef<HTMLDivElement, Props>(\n  ({ children, ...props }, ref) => (\n    <DetailPage.Body ref={ref} {...props}>\n      <StyledToolLandingPageBodyContent>\n        {children}\n      </StyledToolLandingPageBodyContent>\n    </DetailPage.Body>\n  )\n)\n\n/**\n * A list page is basically a copy of SettingsPage/DetailPage. However, it has some differences.\n * ToolLandingPage does not have Breadcrumbs, nested sections (although, we may need them in the future), and Footer.\n *\n * @since 12.9.0\n *\n * @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo)\n *\n * @see [Design Guidelines](https://design.procore.com/tool-landing-layout)\n */\n\nexport const ToolLandingPage = addSubcomponents(\n  {\n    Main: Page.Main,\n    Header: Page.Header,\n    Banner: Page.Banner,\n    Title,\n    Tabs: Page.Tabs,\n    Body,\n    Aside: Page.Aside,\n  },\n  ToolLandingPage_\n)\n\nToolLandingPage_.displayName = 'ToolLandingPage'\n"],"mappings":"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"}

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

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_48_1__sc-1fawsi4-0"
+  componentId: "core-12_49_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_48_1__sc-1fawsi4-1"
+  componentId: "core-12_49_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_48_1__sc-1fawsi4-2"
+  componentId: "core-12_49_0__sc-1fawsi4-2"
 })(["", " border-radius:50%;color:", ";display:inline-flex;vertical-align:middle;&:focus-visible{", "}* + &{margin-left:", "px;}"], getUnstyledButton, colors.gray45, getGapOutlineFocus('ontop'), spacing.sm);
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tree/Tree.js

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

package/dist/Tree/Tree.styles.js

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

package/dist/Typeahead/Typeahead.js

@@ -14,7 +14,7 @@ import { Button } from '../Button';
 import { useLayoutEventListener } from '../_hooks/EventListener';
 import { useI18nContext } from '../_hooks/I18n';
 import { mergeRefs } from '../_utils/mergeRefs';
-import { StyledIcon, StyledInput, StyledTypeahead } from './Typeahead.styles';
+import { StyledClearIcon, StyledInput, StyledSearchIcon, StyledTypeahead } from './Typeahead.styles';
 /**
  @since 10.19.0
 
@@ -78,9 +78,14 @@ export var Typeahead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: onChange,
     disabled: disabled,
     value: value
-  })), /*#__PURE__*/React.createElement(StyledIcon, {
+  })), /*#__PURE__*/React.createElement(StyledSearchIcon, {
     disabled: disabled
-  }, value ? /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Search, {
+    "data-qa": "core-typeahead-search-icon",
+    size: "sm"
+  })), value && /*#__PURE__*/React.createElement(StyledClearIcon, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Button, {
     "aria-label": i18n.t('core.typeahead.clear'),
     "data-qa": "core-typeahead-clear-icon",
     size: "sm",
@@ -88,9 +93,6 @@ export var Typeahead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     icon: /*#__PURE__*/React.createElement(Clear, null),
     disabled: disabled,
     onClick: onClickClear
-  }) : /*#__PURE__*/React.createElement(Search, {
-    "data-qa": "core-typeahead-search-icon",
-    size: "sm"
   })));
 });
 //# sourceMappingURL=Typeahead.js.map

package/dist/Typeahead/Typeahead.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.js","names":["Clear","Search","React","Button","useLayoutEventListener","useI18nContext","mergeRefs","StyledIcon","StyledInput","StyledTypeahead","Typeahead","forwardRef","_ref","ref","className","disabled","onChange_","onChange","style","value","_ref$type","type","onKeyDown_","onKeyDown","props","_objectWithoutProperties","_excluded","useCallback","e","target","i18n","innerRef","useRef","dependencies","event","handler","key","stopPropagation","_objectSpread","scope","onClickClear","current","focus","createElement","_extends","t","size","variant","icon","onClick"],"sources":["../../src/Typeahead/Typeahead.tsx"],"sourcesContent":["import { Clear, Search } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport { StyledIcon, StyledInput, StyledTypeahead } from './Typeahead.styles'\nimport type { TypeaheadInputProps, TypeaheadProps } from './Typeahead.types'\n\n/**\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-typeahead--demo)\n\n */\nexport const Typeahead = React.forwardRef<\n  HTMLInputElement,\n  TypeaheadInputProps & TypeaheadProps\n>(function (\n  {\n    className,\n    disabled,\n    onChange: onChange_,\n    style,\n    value,\n    type = 'search',\n    onKeyDown: onKeyDown_,\n    ...props\n  },\n  ref\n) {\n  const onChange = React.useCallback(\n    function onChange(e: React.ChangeEvent<HTMLInputElement>) {\n      onChange_?.(e.target.value, e)\n    },\n    [onChange_]\n  )\n  const i18n = useI18nContext()\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n  useLayoutEventListener({\n    dependencies: [onChange_, onKeyDown_],\n    event: 'keydown',\n    handler: function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // stop propagation once to clear input\n        if ((e.target as HTMLInputElement).value) {\n          e.stopPropagation()\n        }\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n      }\n\n      onKeyDown_?.(e)\n    },\n    scope: innerRef,\n  })\n\n  const onClickClear = React.useCallback(\n    function onClickClear(e: React.MouseEvent<HTMLButtonElement>) {\n      if (!disabled) {\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n\n        if (innerRef.current) {\n          innerRef.current.focus()\n        }\n      }\n    },\n    [disabled, onChange_]\n  )\n\n  return (\n    <StyledTypeahead\n      className={className}\n      style={style}\n      data-qa={props['data-qa']}\n    >\n      <StyledInput\n        {...props}\n        type={type}\n        data-qa=\"core-typeahead-input\"\n        ref={mergeRefs(innerRef, ref)}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n      />\n      <StyledIcon disabled={disabled}>\n        {value ? (\n          <Button\n            aria-label={i18n.t('core.typeahead.clear')}\n            data-qa=\"core-typeahead-clear-icon\"\n            size=\"sm\"\n            variant=\"tertiary\"\n            icon={<Clear />}\n            disabled={disabled}\n            onClick={onClickClear}\n          />\n        ) : (\n          <Search data-qa=\"core-typeahead-search-icon\" size=\"sm\" />\n        )}\n      </StyledIcon>\n    </StyledTypeahead>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"Typeahead.js","names":["Clear","Search","React","Button","useLayoutEventListener","useI18nContext","mergeRefs","StyledClearIcon","StyledInput","StyledSearchIcon","StyledTypeahead","Typeahead","forwardRef","_ref","ref","className","disabled","onChange_","onChange","style","value","_ref$type","type","onKeyDown_","onKeyDown","props","_objectWithoutProperties","_excluded","useCallback","e","target","i18n","innerRef","useRef","dependencies","event","handler","key","stopPropagation","_objectSpread","scope","onClickClear","current","focus","createElement","_extends","size","t","variant","icon","onClick"],"sources":["../../src/Typeahead/Typeahead.tsx"],"sourcesContent":["import { Clear, Search } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledClearIcon,\n  StyledInput,\n  StyledSearchIcon,\n  StyledTypeahead,\n} from './Typeahead.styles'\nimport type { TypeaheadInputProps, TypeaheadProps } from './Typeahead.types'\n\n/**\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-typeahead--demo)\n\n */\nexport const Typeahead = React.forwardRef<\n  HTMLInputElement,\n  TypeaheadInputProps & TypeaheadProps\n>(function (\n  {\n    className,\n    disabled,\n    onChange: onChange_,\n    style,\n    value,\n    type = 'search',\n    onKeyDown: onKeyDown_,\n    ...props\n  },\n  ref\n) {\n  const onChange = React.useCallback(\n    function onChange(e: React.ChangeEvent<HTMLInputElement>) {\n      onChange_?.(e.target.value, e)\n    },\n    [onChange_]\n  )\n  const i18n = useI18nContext()\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n  useLayoutEventListener({\n    dependencies: [onChange_, onKeyDown_],\n    event: 'keydown',\n    handler: function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // stop propagation once to clear input\n        if ((e.target as HTMLInputElement).value) {\n          e.stopPropagation()\n        }\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n      }\n\n      onKeyDown_?.(e)\n    },\n    scope: innerRef,\n  })\n\n  const onClickClear = React.useCallback(\n    function onClickClear(e: React.MouseEvent<HTMLButtonElement>) {\n      if (!disabled) {\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n\n        if (innerRef.current) {\n          innerRef.current.focus()\n        }\n      }\n    },\n    [disabled, onChange_]\n  )\n\n  return (\n    <StyledTypeahead\n      className={className}\n      style={style}\n      data-qa={props['data-qa']}\n    >\n      <StyledInput\n        {...props}\n        type={type}\n        data-qa=\"core-typeahead-input\"\n        ref={mergeRefs(innerRef, ref)}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n      />\n      <StyledSearchIcon disabled={disabled}>\n        <Search data-qa=\"core-typeahead-search-icon\" size=\"sm\" />\n      </StyledSearchIcon>\n      {value && (\n        <StyledClearIcon disabled={disabled}>\n          <Button\n            aria-label={i18n.t('core.typeahead.clear')}\n            data-qa=\"core-typeahead-clear-icon\"\n            size=\"sm\"\n            variant=\"tertiary\"\n            icon={<Clear />}\n            disabled={disabled}\n            onClick={onClickClear}\n          />\n        </StyledClearIcon>\n      )}\n    </StyledTypeahead>\n  )\n})\n"],"mappings":"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"}

package/dist/Typeahead/Typeahead.styles.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean | undefined;
+}>> & string;
+export declare const StyledClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean | undefined;
 }>> & string;
 export declare const StyledTypeahead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Typeahead/Typeahead.styles.js

@@ -1,22 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { getSearchInputStyles } from '../Search/Search.styles';
 import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 var inputHeight = 36;
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_48_1__sc-gpc39h-0"
-})(["", " padding-right:", "px;"], getSearchInputStyles(), spacing.xxl);
-export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StyledIcon",
-  componentId: "core-12_48_1__sc-gpc39h-1"
-})(["align-items:center;color:", ";display:flex;height:", "px;justify-content:center;pointer-events:", ";position:absolute;right:0;top:0;width:", "px;"], function (p) {
+  componentId: "core-12_49_0__sc-gpc39h-0"
+})(["", " padding-left:", "px;padding-right:", "px;"], getSearchInputStyles(), spacing.xxl, spacing.xxl);
+var iconContainerStyles = /*#__PURE__*/css(["align-items:center;color:", ";display:flex;height:", "px;justify-content:center;position:absolute;top:0;width:", "px;"], function (p) {
   return p.disabled ? colors.gray70 : colors.gray45;
-}, inputHeight, function (p) {
+}, inputHeight, inputHeight);
+export var StyledSearchIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledSearchIcon",
+  componentId: "core-12_49_0__sc-gpc39h-1"
+})(["", " left:0;pointer-events:none;"], iconContainerStyles);
+export var StyledClearIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledClearIcon",
+  componentId: "core-12_49_0__sc-gpc39h-2"
+})(["", " pointer-events:", ";right:0;"], iconContainerStyles, function (p) {
   return p.disabled ? 'none' : 'auto';
-}, inputHeight);
+});
 export var StyledTypeahead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTypeahead",
-  componentId: "core-12_48_1__sc-gpc39h-2"
+  componentId: "core-12_49_0__sc-gpc39h-3"
 })(["position:relative;width:100%;"]);
 //# sourceMappingURL=Typeahead.styles.js.map

package/dist/Typeahead/Typeahead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.styles.js","names":["styled","getSearchInputStyles","colors","spacing","inputHeight","StyledInput","input","withConfig","displayName","componentId","xxl","StyledIcon","div","p","disabled","gray70","gray45","StyledTypeahead"],"sources":["../../src/Typeahead/Typeahead.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getSearchInputStyles } from '../Search/Search.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst inputHeight = 36\n\nexport const StyledInput = styled.input`\n  ${getSearchInputStyles()}\n\n  padding-right: ${spacing.xxl}px;\n`\n\nexport const StyledIcon = styled.div<{ disabled?: boolean }>`\n  align-items: center;\n  color: ${(p) => (p.disabled ? colors.gray70 : colors.gray45)};\n  display: flex;\n  height: ${inputHeight}px;\n  justify-content: center;\n  pointer-events: ${(p) => (p.disabled ? 'none' : 'auto')};\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: ${inputHeight}px;\n`\n\nexport const StyledTypeahead = styled.div`\n  position: relative;\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,WAAW,GAAG,EAAE;AAEtB,OAAO,IAAMC,WAAW,gBAAGL,MAAM,CAACM,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mCACnCR,oBAAoB,CAAC,CAAC,EAEPE,OAAO,CAACO,GAAG,CAC7B;AAED,OAAO,IAAMC,UAAU,gBAAGX,MAAM,CAACY,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0JAEzB,UAACI,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAGZ,MAAM,CAACa,MAAM,GAAGb,MAAM,CAACc,MAAM;AAAA,CAAC,EAElDZ,WAAW,EAEH,UAACS,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAI9CV,WAAW,CACrB;AAED,OAAO,IAAMa,eAAe,gBAAGjB,MAAM,CAACY,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAGxC"}
+{"version":3,"file":"Typeahead.styles.js","names":["styled","css","getSearchInputStyles","colors","spacing","inputHeight","StyledInput","input","withConfig","displayName","componentId","xxl","iconContainerStyles","p","disabled","gray70","gray45","StyledSearchIcon","div","StyledClearIcon","StyledTypeahead"],"sources":["../../src/Typeahead/Typeahead.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getSearchInputStyles } from '../Search/Search.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst inputHeight = 36\n\nexport const StyledInput = styled.input`\n  ${getSearchInputStyles()}\n\n  padding-left: ${spacing.xxl}px;\n  padding-right: ${spacing.xxl}px;\n`\n\nconst iconContainerStyles = css<{ disabled?: boolean }>`\n  align-items: center;\n  color: ${(p) => (p.disabled ? colors.gray70 : colors.gray45)};\n  display: flex;\n  height: ${inputHeight}px;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  width: ${inputHeight}px;\n`\n\nexport const StyledSearchIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  left: 0;\n  pointer-events: none;\n`\n\nexport const StyledClearIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  pointer-events: ${(p) => (p.disabled ? 'none' : 'auto')};\n  right: 0;\n`\n\nexport const StyledTypeahead = styled.div`\n  position: relative;\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,WAAW,GAAG,EAAE;AAEtB,OAAO,IAAMC,WAAW,gBAAGN,MAAM,CAACO,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDACnCR,oBAAoB,CAAC,CAAC,EAERE,OAAO,CAACO,GAAG,EACVP,OAAO,CAACO,GAAG,CAC7B;AAED,IAAMC,mBAAmB,gBAAGX,GAAG,4HAEpB,UAACY,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAGX,MAAM,CAACY,MAAM,GAAGZ,MAAM,CAACa,MAAM;AAAA,CAAC,EAElDX,WAAW,EAIZA,WAAW,CACrB;AAED,OAAO,IAAMY,gBAAgB,gBAAGjB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yCACtCE,mBAAmB,CAGtB;AAED,OAAO,IAAMO,eAAe,gBAAGnB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0CACrCE,mBAAmB,EACH,UAACC,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CAExD;AAED,OAAO,IAAMM,eAAe,gBAAGpB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAGxC"}

package/dist/Typography/Typography.styles.js

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