@procore/core-react 12.48.1 → 12.48.2

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_48_1__sc-e1ql06-0"
+  componentId: "core-12_48_2__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_48_1__sc-e1ql06-1"
+  componentId: "core-12_48_2__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_48_1__sc-e1ql06-2"
+  componentId: "core-12_48_2__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_48_1__sc-e1ql06-3"
+  componentId: "core-12_48_2__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_48_1__sc-e1ql06-4"
+  componentId: "core-12_48_2__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_48_1__sc-e1ql06-5"
+  componentId: "core-12_48_2__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_48_1__sc-e1ql06-6"
+  componentId: "core-12_48_2__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_48_1__sc-e1ql06-7"
+  componentId: "core-12_48_2__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_48_1__sc-e1ql06-8"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-0"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-1"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-2"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-3"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-4"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-5"
+  componentId: "core-12_48_2__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:calc(", "px - 1px);border-bottom-left-radius:calc(", "px - 1px);> *,> picture > img{border-bottom-left-radius:calc(", "px - 1px);border-top-left-radius:calc(", "px - 1px);height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md, mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:calc(", "px - 1px);border-top-right-radius:calc(", "px - 1px);> *,> picture > img{border-top-left-radius:calc(", "px - 1px);border-top-right-radius:calc(", "px - 1px);min-height:inherit;max-height:inherit;height:auto;width:100%;}"], borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
 });
 export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroOverlay",
-  componentId: "core-12_48_1__sc-8q9p0n-6"
+  componentId: "core-12_48_2__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_48_1__sc-8q9p0n-7"
+  componentId: "core-12_48_2__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;align-items:flex-start;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_48_1__sc-1t2ye1d-0"
+  componentId: "core-12_48_2__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_48_1__sc-1t2ye1d-1"
+  componentId: "core-12_48_2__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_48_1__sc-1t2ye1d-2"
+  componentId: "core-12_48_2__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_48_1__sc-1t2ye1d-3"
+  componentId: "core-12_48_2__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_48_1__sc-1t2ye1d-4"
+  componentId: "core-12_48_2__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_48_1__sc-1t2ye1d-5"
+  componentId: "core-12_48_2__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_48_1__sc-1t2ye1d-6"
+  componentId: "core-12_48_2__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_48_1__sc-1l6lk2n-0"
+  componentId: "core-12_48_2__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_48_1__sc-1l6lk2n-1"
+  componentId: "core-12_48_2__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_48_2__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

@@ -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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_1__sc-wa8j06-0"
+  componentId: "core-12_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__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_48_2__sc-2d45b5-4"
 })(["outline:none;"]);
 var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledIconBase",
-  componentId: "core-12_48_1__sc-2d45b5-5"
+  componentId: "core-12_48_2__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_48_2__sc-2d45b5-6"
 })([""]);
 export var StyledChevronPlaceholder = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronPlaceholder",
-  componentId: "core-12_48_1__sc-2d45b5-7"
+  componentId: "core-12_48_2__sc-2d45b5-7"
 })([""]);
 export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_48_1__sc-2d45b5-8"
+  componentId: "core-12_48_2__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_48_2__sc-2d45b5-9"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
   var $isExpanded = _ref5.$isExpanded;
   return $isExpanded ? 90 : 0;

package/dist/Typeahead/Typeahead.styles.js

@@ -5,11 +5,11 @@ 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"
+  componentId: "core-12_48_2__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"
+  componentId: "core-12_48_2__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) {
   return p.disabled ? colors.gray70 : colors.gray45;
 }, inputHeight, function (p) {
@@ -17,6 +17,6 @@ export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
 }, inputHeight);
 export var StyledTypeahead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTypeahead",
-  componentId: "core-12_48_1__sc-gpc39h-2"
+  componentId: "core-12_48_2__sc-gpc39h-2"
 })(["position:relative;width:100%;"]);
 //# sourceMappingURL=Typeahead.styles.js.map

package/dist/Typography/Typography.styles.js

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

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

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

package/dist/_storyHelpers_/components/Deprecation.styles.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 import { Typography } from '../../Typography';
 export var StyledDeprecation = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledDeprecation",
-  componentId: "core-12_48_1__sc-ojy3xo-0"
+  componentId: "core-12_48_2__sc-ojy3xo-0"
 })(["display:block;margin-bottom:16px;"]);
 //# sourceMappingURL=Deprecation.styles.js.map

package/dist/_storyHelpers_/components/StoryGrid.js

@@ -6,11 +6,11 @@ import styled from 'styled-components';
 import { colors } from '../../_styles/colors';
 var StyledCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCell",
-  componentId: "core-12_48_1__sc-7owp8g-0"
+  componentId: "core-12_48_2__sc-7owp8g-0"
 })(["display:flex;align-items:center;justify-content:center;padding:0 48px;border-bottom:1px dashed ", ";border-right:1px dashed ", ";"], colors.gray90, colors.gray90);
 var StyledGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGrid",
-  componentId: "core-12_48_1__sc-7owp8g-1"
+  componentId: "core-12_48_2__sc-7owp8g-1"
 })(["align-items:center;justify-content:center;display:grid;gap:0;border-top:1px dashed ", ";border-left:1px dashed ", ";grid-template-columns:repeat( ", ",minmax(0,1fr) );height:100%;width:100%;", "{min-height:", "px;overflow:hidden;}"], colors.gray90, colors.gray90, function (_ref) {
   var _ref$$columns = _ref.$columns,
     $columns = _ref$$columns === void 0 ? 1 : _ref$$columns;
@@ -21,7 +21,7 @@ var StyledGrid = /*#__PURE__*/styled.div.withConfig({
 });
 var StyledGridContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridContainer",
-  componentId: "core-12_48_1__sc-7owp8g-2"
+  componentId: "core-12_48_2__sc-7owp8g-2"
 })(["height:100%;padding:24px;width:100%;"]);
 export var StoryGrid = function StoryGrid(_ref3) {
   var children = _ref3.children,