@procore/core-react 12.8.1 → 12.10.0

package/dist/Modal/Modal.styles.js

@@ -31,15 +31,15 @@ var screenWidthPixelBreakpoints = {
 };
 export var StyledModal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_8_1__sc-1ijdug2-0"
+  componentId: "core-12_10_0__sc-1ijdug2-0"
 })(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;&.", "{opacity:1;}&.", "{opacity:0;}"], fadeInClassName, fadeOutClassName);
 export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalButtons",
-  componentId: "core-12_8_1__sc-1ijdug2-1"
+  componentId: "core-12_10_0__sc-1ijdug2-1"
 })(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
 export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledModalContainer",
-  componentId: "core-12_8_1__sc-1ijdug2-2"
+  componentId: "core-12_10_0__sc-1ijdug2-2"
 })(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", " ", ""], function (_ref) {
   var $compact = _ref.$compact;
   if (!$compact) {
@@ -63,11 +63,11 @@ export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
 });
 export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooter",
-  componentId: "core-12_8_1__sc-1ijdug2-3"
+  componentId: "core-12_10_0__sc-1ijdug2-3"
 })(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px ", "px ", "px;"], spacing.xl, spacing.xxl, spacing.xxl);
 export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_8_1__sc-1ijdug2-4"
+  componentId: "core-12_10_0__sc-1ijdug2-4"
 })(["", " box-sizing:border-box;color:", ";display:flex;flex-direction:column;overflow:auto;", " ", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), colors.gray15, function (_ref4) {
   var noSideSpacing = _ref4.noSideSpacing;
   return css(["padding:", "px ", "px;"], spacing.xl, noSideSpacing ? 0 : spacing.xxl);
@@ -84,7 +84,7 @@ export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalContent",
-  componentId: "core-12_8_1__sc-1ijdug2-5"
+  componentId: "core-12_10_0__sc-1ijdug2-5"
 })(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;", ""], function (_ref7) {
   var _ref7$$compact = _ref7.$compact,
     $compact = _ref7$$compact === void 0 ? false : _ref7$$compact;
@@ -95,11 +95,11 @@ export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledModalFooterNotation",
-  componentId: "core-12_8_1__sc-1ijdug2-6"
+  componentId: "core-12_10_0__sc-1ijdug2-6"
 })(["flex-grow:1;"]);
 export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeader",
-  componentId: "core-12_8_1__sc-1ijdug2-7"
+  componentId: "core-12_10_0__sc-1ijdug2-7"
 })(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;position:relative;", " ", ""], colors.gray10, function (_ref8) {
   var $compact = _ref8.$compact,
     $isBodyScrolled = _ref8.$isBodyScrolled;
@@ -117,7 +117,7 @@ export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeading",
-  componentId: "core-12_8_1__sc-1ijdug2-8"
+  componentId: "core-12_10_0__sc-1ijdug2-8"
 })(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;", ""], function (_ref10) {
   var $compact = _ref10.$compact;
   return getTypographyIntent($compact ? 'h3' : 'h2');
@@ -133,18 +133,18 @@ export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalCancel",
-  componentId: "core-12_8_1__sc-1ijdug2-9"
+  componentId: "core-12_10_0__sc-1ijdug2-9"
 })(["flex:0 0 auto;"]);
 export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalScrim",
-  componentId: "core-12_8_1__sc-1ijdug2-10"
+  componentId: "core-12_10_0__sc-1ijdug2-10"
 })(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
 export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
   displayName: "StyledModalWarningIcon",
-  componentId: "core-12_8_1__sc-1ijdug2-11"
+  componentId: "core-12_10_0__sc-1ijdug2-11"
 })(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
 export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooterSummary",
-  componentId: "core-12_8_1__sc-1ijdug2-12"
+  componentId: "core-12_10_0__sc-1ijdug2-12"
 })(["", " border-top:1px solid ", ";border-bottom:1px solid ", ";padding:", "px ", "px;color:", ";font-style:italic;background-color:", ";margin:-", "px -", "px ", "px -", "px;flex:1 1 100%;"], getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
 //# sourceMappingURL=Modal.styles.js.map

package/dist/MultiSelect/MultiSelect.styles.js

@@ -6,26 +6,26 @@ import { getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledMultiSelectValues = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectValues",
-  componentId: "core-12_8_1__sc-s9ym9q-0"
+  componentId: "core-12_10_0__sc-s9ym9q-0"
 })(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-left:", "px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.md, spacing.xs);
 export var StyledMultiSelectToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectToken",
-  componentId: "core-12_8_1__sc-s9ym9q-1"
+  componentId: "core-12_10_0__sc-s9ym9q-1"
 })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
 export var StyledMultiSelectSearchInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledMultiSelectSearchInput",
-  componentId: "core-12_8_1__sc-s9ym9q-2"
+  componentId: "core-12_10_0__sc-s9ym9q-2"
 })(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;", " ", " &::-ms-clear{display:none;}&:focus{box-shadow:none;outline:none;}&::placeholder{color:", ";}"], getTypographyIntent('body'), function (_ref) {
   var $isNavigatingTokens = _ref.$isNavigatingTokens;
   return $isNavigatingTokens && css(["color:transparent;"]);
 }, colors.gray45);
 export var StyledMultiSelectSearch = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectSearch",
-  componentId: "core-12_8_1__sc-s9ym9q-3"
+  componentId: "core-12_10_0__sc-s9ym9q-3"
 })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
 export var StyledMultiSelectSearchIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultiSelectSearchIcon",
-  componentId: "core-12_8_1__sc-s9ym9q-4"
+  componentId: "core-12_10_0__sc-s9ym9q-4"
 })(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;margin-right:", "px;min-width:40px;width:40px;"], spacing.xs, spacing.md);
 export var StyledMultiSelectClearIcon = StyledSelectClearIcon;
 export var StyledMultiSelectArrowContainer = StyledSelectArrowContainer;
@@ -33,7 +33,7 @@ export var StyledMultiSelectArrow = StyledSelectArrow;
 export var StyledMultiSelectMenu = StyledSelectMenu;
 export var StyledMultiSelectButton = /*#__PURE__*/styled(StyledSelectButton).withConfig({
   displayName: "StyledMultiSelectButton",
-  componentId: "core-12_8_1__sc-s9ym9q-5"
+  componentId: "core-12_10_0__sc-s9ym9q-5"
 })(["height:auto;padding:0;white-space:normal;&:focus-within{", "}", ""], getFocus(), function (_ref2) {
   var $emptyValue = _ref2.$emptyValue;
   return $emptyValue && css(["", "{cursor:pointer;}"], StyledMultiSelectSearchInput);

package/dist/NextMenu/NextMenu.styles.js

@@ -6,14 +6,14 @@ export var optionMinHeight = 32;
 export var defaultMenuHeight = 64;
 export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledOptions",
-  componentId: "core-12_8_1__sc-3o6zya-0"
+  componentId: "core-12_10_0__sc-3o6zya-0"
 })([""]);
 export var StyledItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledItem",
-  componentId: "core-12_8_1__sc-3o6zya-1"
+  componentId: "core-12_10_0__sc-3o6zya-1"
 })(["", ";padding:", "px ", "px;cursor:pointer;list-style-type:none;"], getTypographyIntent('body'), spacing.xs, spacing.md);
 export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroup",
-  componentId: "core-12_8_1__sc-3o6zya-2"
+  componentId: "core-12_10_0__sc-3o6zya-2"
 })(["", ";padding:", "px ", "px ", "px;font-weight:", ";background:white;list-style-type:none;"], getTypographyIntent('body'), spacing.md, spacing.md, spacing.xs, typographyWeights.semibold);
 //# sourceMappingURL=NextMenu.styles.js.map

package/dist/Notation/Notation.js

@@ -14,7 +14,7 @@ var variantColorMap = {
 };
 var StyledNotation = /*#__PURE__*/styled.i.withConfig({
   displayName: "StyledNotation",
-  componentId: "core-12_8_1__sc-160q1m6-0"
+  componentId: "core-12_10_0__sc-160q1m6-0"
 })(["", " color:", ";font-style:italic;"], getTypographyIntent('small'), function (_ref) {
   var variant = _ref.variant;
   return variant ? colors[variantColorMap[variant]] : colors.gray15;

package/dist/NumberInput/NumberInput.styles.js

@@ -12,37 +12,37 @@ var inputBgColor = colors.white;
 var inputBorder = "".concat(colors.gray70, " solid 1px");
 var StyledRootAddon = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRootAddon",
-  componentId: "core-12_8_1__sc-1782nvg-0"
+  componentId: "core-12_10_0__sc-1782nvg-0"
 })(["display:inline-flex;align-items:center;height:100%;position:absolute;top:0;color:", ";", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? colors.gray70 : colors.gray45;
 }, getTypographyIntent('body'));
 export var StyledPrefix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
   displayName: "StyledPrefix",
-  componentId: "core-12_8_1__sc-1782nvg-1"
+  componentId: "core-12_10_0__sc-1782nvg-1"
 })(["left:", "px;"], spacing.md);
 export var StyledSuffix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
   displayName: "StyledSuffix",
-  componentId: "core-12_8_1__sc-1782nvg-2"
+  componentId: "core-12_10_0__sc-1782nvg-2"
 })(["right:", "px;"], function (_ref2) {
   var withIncrementer = _ref2.withIncrementer;
   return withIncrementer ? spacing.md + incrementerWidth : spacing.md;
 });
 export var StyledIncrementerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIncrementerWrapper",
-  componentId: "core-12_8_1__sc-1782nvg-3"
+  componentId: "core-12_10_0__sc-1782nvg-3"
 })(["display:flex;flex-direction:column;position:absolute;top:1px;right:1px;height:100%;"]);
 export var StyledIncrementerButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledIncrementerButton",
-  componentId: "core-12_8_1__sc-1782nvg-4"
+  componentId: "core-12_10_0__sc-1782nvg-4"
 })(["display:inline-flex;justify-content:center;align-items:center;width:", "px;height:calc(50% - 1px);border:none;border-radius:0px;outline:none;background-color:", ";padding:0;cursor:pointer;&:first-child,&:last-child{border-left:", ";&:disabled{border-color:", ";background-color:", ";}}&:first-child{border-top-right-radius:2px;}&:last-child{border-top:", ";border-bottom-right-radius:2px;}svg{fill:", ";}&:hover{svg{fill:", ";}}&:disabled{cursor:default;svg{fill:", ";}}"], incrementerWidth, inputBgColor, inputBorder, colors.gray70, colors.gray94, inputBorder, colors.gray45, colors.gray10, colors.gray70);
 export var StyledInput = /*#__PURE__*/styled(Input).withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_8_1__sc-1782nvg-5"
+  componentId: "core-12_10_0__sc-1782nvg-5"
 })([""]);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_8_1__sc-1782nvg-6"
+  componentId: "core-12_10_0__sc-1782nvg-6"
 })(["position:relative;", ""], function (_ref3) {
   var hasIncrementer = _ref3.hasIncrementer;
   return hasIncrementer && css(["", "{padding-right:", "px;}"], StyledInput, spacing.md + incrementerWidth);

package/dist/Overlay/OverlayArrow.styles.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 export var arrowSize = 8;
 export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledArrow",
-  componentId: "core-12_8_1__sc-1epxw7u-0"
+  componentId: "core-12_10_0__sc-1epxw7u-0"
 })(["position:absolute;background:inherit;width:", "px;height:", "px;transform:rotate(45deg);"], arrowSize, arrowSize);
 //# sourceMappingURL=OverlayArrow.styles.js.map

package/dist/PageLayout/PageLayout.styles.d.ts

@@ -4,7 +4,9 @@ export declare const StyledPageHeader: import("styled-components").StyledCompone
     $transparent?: boolean | undefined;
 }, never>;
 export declare const StyledPageTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledPageBreadcrumbs: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const StyledPageBreadcrumbs: import("styled-components").StyledComponent<"div", any, {
+    as: string;
+}, "as">;
 export declare const StyledPageBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const getActions: () => import("styled-components").FlattenSimpleInterpolation;
 export declare const StyledPageActions: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageLayout/PageLayout.styles.js

@@ -14,46 +14,52 @@ export var adjustMaxWidth = function adjustMaxWidth(breakpointMinWidth) {
 };
 export var StyledPageHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_8_1__sc-1cvdbsv-0"
+  componentId: "core-12_10_0__sc-1cvdbsv-0"
 })(["padding-top:", "px;padding-right:", "px;padding-left:", "px;@media ", "{padding-right:", "px;padding-left:", "px;}", ""], headerVerticalSpacing, outerPageSpacing, outerPageSpacing, getSmallScreenBreakpointValue(), outerPageSpacingSmaller, outerPageSpacingSmaller, function (_ref) {
   var $transparent = _ref.$transparent;
   return !$transparent && css(["", " background-color:", ";"], getShadow(1.5), colors.white);
 });
-export var StyledPageTitle = /*#__PURE__*/styled.div.withConfig({
+var StyledPageHeaderItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledPageHeaderItem",
+  componentId: "core-12_10_0__sc-1cvdbsv-1"
+})(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
+export var StyledPageTitle = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTitle",
-  componentId: "core-12_8_1__sc-1cvdbsv-1"
-})(["margin-top:", "px;&:first-child{margin-top:0;}&:last-child{padding-bottom:", "px;}"], headerVerticalSpacing, headerVerticalSpacing);
-export var StyledPageBreadcrumbs = /*#__PURE__*/styled.nav.withConfig({
+  componentId: "core-12_10_0__sc-1cvdbsv-2"
+})(["&:last-child{padding-bottom:", "px;}"], headerVerticalSpacing);
+export var StyledPageBreadcrumbs = /*#__PURE__*/styled(StyledPageHeaderItem).attrs({
+  as: 'nav'
+}).withConfig({
   displayName: "StyledPageBreadcrumbs",
-  componentId: "core-12_8_1__sc-1cvdbsv-2"
-})(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
-export var StyledPageBanner = /*#__PURE__*/styled.div.withConfig({
+  componentId: "core-12_10_0__sc-1cvdbsv-3"
+})([""]);
+export var StyledPageBanner = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageBanner",
-  componentId: "core-12_8_1__sc-1cvdbsv-3"
-})(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
+  componentId: "core-12_10_0__sc-1cvdbsv-4"
+})([""]);
 export var getActions = function getActions() {
   return css(["flex-shrink:0;padding-left:", "px;> button,> a{&:first-child{margin-left:0;}margin-left:", "px;}"], spacing.xl, spacing.sm);
 };
 export var StyledPageActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageActions",
-  componentId: "core-12_8_1__sc-1cvdbsv-4"
+  componentId: "core-12_10_0__sc-1cvdbsv-5"
 })(["", ""], getActions());
-export var StyledPageTabs = /*#__PURE__*/styled.div.withConfig({
+export var StyledPageTabs = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTabs",
-  componentId: "core-12_8_1__sc-1cvdbsv-5"
-})(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
+  componentId: "core-12_10_0__sc-1cvdbsv-6"
+})([""]);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_8_1__sc-1cvdbsv-6"
+  componentId: "core-12_10_0__sc-1cvdbsv-7"
 })(["padding-top:", "px;padding-left:", "px;padding-right:", "px;@media ", "{padding-top:", "px;padding-left:", "px;padding-right:", "px;}"], outerPageSpacing, outerPageSpacing, outerPageSpacing, getSmallScreenBreakpointValue(), outerPageSpacingSmaller, outerPageSpacingSmaller, outerPageSpacingSmaller);
 var navigationWidth = 200;
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_8_1__sc-1cvdbsv-7"
+  componentId: "core-12_10_0__sc-1cvdbsv-8"
 })(["float:left;max-height:100vh;min-width:", "px;overflow-y:auto;position:sticky;top:0;width:", "px;", "{padding:20px ", "px 0 0;}@media screen and (max-width:1024px){display:none;}"], navigationWidth, navigationWidth, StyledAnchorNavigation, spacing.sm);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_8_1__sc-1cvdbsv-8"
+  componentId: "core-12_10_0__sc-1cvdbsv-9"
 })([""]);
 var panelWidth = 400;
 var zIndexes = {
@@ -66,7 +72,7 @@ export var animationDuration = {
 };
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_8_1__sc-1cvdbsv-9"
+  componentId: "core-12_10_0__sc-1cvdbsv-10"
 })(["background-color:", ";", " position:sticky;bottom:0;z-index:", ";", ""], colors.white, function (_ref2) {
   var $hasShadow = _ref2.$hasShadow;
   return $hasShadow && getShadow(2, 'top');
@@ -76,7 +82,7 @@ export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledAside = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAside",
-  componentId: "core-12_8_1__sc-1cvdbsv-10"
+  componentId: "core-12_10_0__sc-1cvdbsv-11"
 })(["", " @media ", "{position:absolute;right:0;}"], function (_ref4) {
   var $closed = _ref4.$closed,
     $open = _ref4.$open;
@@ -96,7 +102,7 @@ var getPanelAnimation = function getPanelAnimation() {
 };
 export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsidePanel",
-  componentId: "core-12_8_1__sc-1cvdbsv-11"
+  componentId: "core-12_10_0__sc-1cvdbsv-12"
 })(["", " @media ", "{", "}", " ", " border-left:1px solid ", ";width:", "px;position:fixed;background-color:", ";overflow:auto;z-index:", ";", " ", ""], function (_ref7) {
   var $rightOffset = _ref7.$rightOffset;
   return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], getSmallScreenBreakpointValue(), getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
@@ -115,7 +121,7 @@ export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageMain",
-  componentId: "core-12_8_1__sc-1cvdbsv-12"
+  componentId: "core-12_10_0__sc-1cvdbsv-13"
 })(["position:relative;max-width:100%;background-color:", ";", " ", ""], colors.gray96, function () {
   return isIE11() && css(["flex:1 0 0%;"]);
 }, function (_ref12) {
@@ -130,13 +136,13 @@ export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageContainer",
-  componentId: "core-12_8_1__sc-1cvdbsv-13"
+  componentId: "core-12_10_0__sc-1cvdbsv-14"
 })(["display:grid;grid-template-columns:1fr auto;", ""], function () {
   return isIE11() && css(["display:flex;flex-wrap:wrap;"]);
 });
 export var StyledAsideFluidContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsideFluidContainer",
-  componentId: "core-12_8_1__sc-1cvdbsv-14"
+  componentId: "core-12_10_0__sc-1cvdbsv-15"
 })(["", ""], function (_ref13) {
   var $closed = _ref13.$closed,
     $open = _ref13.$open;

package/dist/PageLayout/PageLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","minScrimSize","colors","getShadow","spacing","isIE11","getSmallScreenBreakpointValue","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","adjustMaxWidth","breakpointMinWidth","StyledPageHeader","div","withConfig","displayName","componentId","_ref","$transparent","white","StyledPageTitle","StyledPageBreadcrumbs","nav","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { getSmallScreenBreakpointValue } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const adjustMaxWidth = (breakpointMinWidth: number) =>\n  breakpointMinWidth - 0.02\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nexport const StyledPageTitle = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled.nav`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageBanner = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledBody = styled.div`\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${getSmallScreenBreakpointValue()} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${getSmallScreenBreakpointValue()} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${getSmallScreenBreakpointValue()} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${getSmallScreenBreakpointValue()} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n\n  ${({ $minusHeight }) => {\n    return css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `\n  }}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div`\n  display: grid;\n  grid-template-columns: 1fr auto;\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","minScrimSize","colors","getShadow","spacing","isIE11","getSmallScreenBreakpointValue","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","adjustMaxWidth","breakpointMinWidth","StyledPageHeader","div","withConfig","displayName","componentId","_ref","$transparent","white","StyledPageHeaderItem","StyledPageTitle","StyledPageBreadcrumbs","attrs","as","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { getSmallScreenBreakpointValue } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const adjustMaxWidth = (breakpointMinWidth: number) =>\n  breakpointMinWidth - 0.02\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nconst StyledPageHeaderItem = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageTitle = styled(StyledPageHeaderItem)`\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled(StyledPageHeaderItem).attrs({\n  as: 'nav',\n})``\n\nexport const StyledPageBanner = styled(StyledPageHeaderItem)``\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled(StyledPageHeaderItem)``\n\nexport const StyledBody = styled.div`\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${getSmallScreenBreakpointValue()} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${getSmallScreenBreakpointValue()} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${getSmallScreenBreakpointValue()} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${getSmallScreenBreakpointValue()} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n\n  ${({ $minusHeight }) => {\n    return css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `\n  }}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div`\n  display: grid;\n  grid-template-columns: 1fr auto;\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,sBAAsB,QAAQ,6CAA6C;AACpF,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,6BAA6B,QAAQ,oBAAoB;AAElE,IAAMC,qBAAqB,GAAGH,OAAO,CAACI,EAAE;AACxC,IAAMC,gBAAgB,GAAGL,OAAO,CAACM,EAAE;AACnC,IAAMC,uBAAuB,GAAGP,OAAO,CAACQ,EAAE;AAE1C,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,kBAA0B;EAAA,OACvDA,kBAAkB,GAAG,IAAI;AAAA;AAE3B,OAAO,IAAMC,gBAAgB,gBAAGlB,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+HACzBZ,qBAAqB,EACnBE,gBAAgB,EACjBA,gBAAgB,EAEvBH,6BAA6B,CAAC,CAAC,EACrBK,uBAAuB,EACxBA,uBAAuB,EAGvC,UAAAS,IAAA;EAAA,IAAGC,YAAY,GAAAD,IAAA,CAAZC,YAAY;EAAA,OACf,CAACA,YAAY,IACbvB,GAAG,kCACCK,SAAS,CAAC,GAAG,CAAC,EACID,MAAM,CAACoB,KAAK,CACjC;AAAA,EACJ;AAED,IAAMC,oBAAoB,gBAAG1B,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDACvBZ,qBAAqB,CAKpC;AAED,OAAO,IAAMiB,eAAe,gBAAG3B,MAAM,CAAC0B,oBAAoB,CAAC,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAErCZ,qBAAqB,CAE1C;AAED,OAAO,IAAMkB,qBAAqB,gBAAG5B,MAAM,CAAC0B,oBAAoB,CAAC,CAACG,KAAK,CAAC;EACtEC,EAAE,EAAE;AACN,CAAC,CAAC,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEJ,OAAO,IAAMS,gBAAgB,gBAAG/B,MAAM,CAAC0B,oBAAoB,CAAC,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE9D,OAAO,IAAMU,UAAU,GAAG,SAAbA,UAAUA,CAAA;EAAA,OAAS/B,GAAG,uGAEjBM,OAAO,CAAC0B,EAAE,EAQT1B,OAAO,CAACI,EAAE;AAAA,CAE5B;AAED,OAAO,IAAMuB,iBAAiB,gBAAGlC,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACvCU,UAAU,CAAC,CAAC,CACf;AAED,OAAO,IAAMG,cAAc,gBAAGnC,MAAM,CAAC0B,oBAAoB,CAAC,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE5D,OAAO,IAAMc,UAAU,gBAAGpC,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8IACnBV,gBAAgB,EACfA,gBAAgB,EACfA,gBAAgB,EAExBH,6BAA6B,CAAC,CAAC,EACvBK,uBAAuB,EACtBA,uBAAuB,EACtBA,uBAAuB,CAE3C;AAED,IAAMuB,eAAe,GAAG,GAAG;AAE3B,OAAO,IAAMC,gBAAgB,gBAAGtC,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0LAG3Be,eAAe,EAInBA,eAAe,EAEtBlC,sBAAsB,EACNI,OAAO,CAACI,EAAE,CAM7B;AAED,OAAO,IAAM4B,aAAa,gBAAGvC,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEzC,IAAMkB,UAAU,GAAG,GAAG;AACtB,IAAMC,QAAQ,GAAG;EACfC,eAAe,EAAE,CAAC;EAClBC,iBAAiB,EAAE,CAAC;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,IAAMC,iBAAiB,GAAG;EAC/BC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,IAAMC,YAAY,gBAAG/C,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAIhBjB,MAAM,CAACoB,KAAK,EAE9B,UAAAuB,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI3C,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;AAAA,GAI5CmC,QAAQ,CAACG,MAAM,EAExB,UAAAM,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OACfA,YAAY,IACZlD,GAAG,iCACQQ,6BAA6B,CAAC,CAAC,EAC3BgC,QAAQ,CAACG,MAAM,CAE7B;AAAA,EACJ;AAED,OAAO,IAAMQ,WAAW,gBAAGpD,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDACjC,UAAA+B,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;IAAEC,KAAK,GAAAF,KAAA,CAALE,KAAK;EAAA,OACjB/C,MAAM,CAAC,CAAC,IACRP,GAAG,iGAMwB4C,iBAAiB,CAACC,KAAK,EAE9CQ,OAAO,IACTrD,GAAG,mBAEF,EAECsD,KAAK,IACPtD,GAAG,yBACauC,UAAU,CACzB,CACF;AAAA,GAGM/B,6BAA6B,CAAC,CAAC,CAIzC;AAED,IAAM+C,aAAa,GAAG,MAAM;AAE5B,IAAMC,OAAO,gBAAGvD,SAAS,oEAEGsD,aAAa,CAKxC;AAED,IAAME,QAAQ,gBAAGxD,SAAS,oEAKEsD,aAAa,CAExC;AAED,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA;EAAA,OAAS1D,GAAG,gBAC/B,UAAA2D,KAAA;IAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OACXA,QAAQ,IACR5D,GAAG,sCACYwD,OAAO,EAAaZ,iBAAiB,CAACC,KAAK,CACzD;EAAA,GAED,UAAAgB,KAAA;IAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OACXA,QAAQ,IACR9D,GAAG,sCACYyD,QAAQ,EAAab,iBAAiB,CAACC,KAAK,CAC1D;EAAA;AAAA,CACJ;AAED,OAAO,IAAMkB,gBAAgB,gBAAGhE,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0JAUtC,UAAA2C,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OAAOjE,GAAG,iEAChBQ,6BAA6B,CAAC,CAAC,EACpCH,SAAS,CAAC,CAAC,CAAC,EAEHmC,QAAQ,CAACE,iBAAiB,EAC5BuB,YAAY;AAAA,CAExB,EAMQzD,6BAA6B,CAAC,CAAC,EACpCkD,iBAAiB,CAAC,CAAC,EAGrB,UAAAQ,KAAA;EAAA,IAAGC,aAAa,GAAAD,KAAA,CAAbC,aAAa;EAAA,OAAOA,aAAa,IAAIT,iBAAiB,CAAC,CAAC;AAAA,GAE3D,UAAAU,KAAA;EAAA,IAAGf,OAAO,GAAAe,KAAA,CAAPf,OAAO;EAAA,OACVA,OAAO,IACPrD,GAAG,mBAEF;AAAA,GAEsBI,MAAM,CAACiE,MAAM,EAC7B9B,UAAU,EAECnC,MAAM,CAACkE,MAAM,EAGtB9B,QAAQ,CAACC,eAAe,EAEjC,UAAA8B,MAAA,EAAsB;EAAA,IAAnBC,YAAY,GAAAD,MAAA,CAAZC,YAAY;EACf,OAAOxE,GAAG,oCACgBwE,YAAY;AAExC,CAAC,EAEC,UAAAC,MAAA;EAAA,IAAGC,UAAU,GAAAD,MAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,KAAK,IAAI,IACnB1E,GAAG,kBACM0E,UAAU,CAClB;AAAA,EACJ;AAED,OAAO,IAAMC,cAAc,gBAAG5E,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yEAKlBjB,MAAM,CAACkE,MAAM,EAE/B;EAAA,OACA/D,MAAM,CAAC,CAAC,IACRP,GAAG,kBAEF;AAAA,GAED,UAAA4E,MAAA,EAA6B;EAAA,IAA1BC,mBAAmB,GAAAD,MAAA,CAAnBC,mBAAmB;EACtB,IAAI,CAACA,mBAAmB,EAAE;IACxB,OAAO,EAAE;EACX;EAEA,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACD,mBAAmB,CAAC,EAAE;IACnD,OAAO7E,GAAG,uCACmBG,YAAY;EAE3C;EAEA,OAAOH,GAAG;AAGZ,CAAC,CACF;AAED,OAAO,IAAM+E,mBAAmB,gBAAGhF,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAGzC;EAAA,OACAd,MAAM,CAAC,CAAC,IACRP,GAAG,kCAGF;AAAA,EACJ;AAED,OAAO,IAAMgF,yBAAyB,gBAAGjF,MAAM,CAACmB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAI/C,UAAA4D,MAAA;EAAA,IAAG5B,OAAO,GAAA4B,MAAA,CAAP5B,OAAO;IAAEC,KAAK,GAAA2B,MAAA,CAAL3B,KAAK;EAAA,OACjB,CAAC/C,MAAM,CAAC,CAAC,IACTP,GAAG,wCACmB4C,iBAAiB,CAACC,KAAK,EAEzCQ,OAAO,IACTrD,GAAG,cAEF,EAECsD,KAAK,IACPtD,GAAG,oBACQuC,UAAU,CACpB,CACF;AAAA,EACJ"}

package/dist/Pagination/Pagination.js

@@ -98,7 +98,7 @@ export var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref2,
     totalItems: formattedNumber(items || 0)
   })), /*#__PURE__*/React.createElement(StyledCurrentPage, {
     id: labelId
-  }, i18n.t('core.pagination.page'), ":"), /*#__PURE__*/React.createElement(PaginationSelect, {
+  }, i18n.t('core.pagination.page')), /*#__PURE__*/React.createElement(PaginationSelect, {
     activePage: activePage,
     "aria-labelledby": "".concat(labelId, " ").concat(selectId),
     disabled: pages <= 1,

package/dist/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","NumberFormatter","useId","React","useI18nContext","StyledButton","StyledContainer","StyledCurrentPage","StyledPageCount","PaginationSelect","noop","usePagination","_ref","_ref$activePage","activePage","_ref$items","items","_ref$onSelectPage","onSelectPage","_ref$perPage","perPage","pages","Math","ceil","end","min","isFirst","isLast","selectNext","selectPage","selection","item","selectPrev","start","max","Pagination","forwardRef","_ref2","ref","_ref2$activePage","_ref2$onSelectPage","_ref2$perPage","props","_objectWithoutProperties","_excluded","_usePagination","i18n","labelId","selectId","formattedNumber","formatter","locale","formatNumber","createElement","_extends","italic","color","t","totalItems","id","concat","disabled","onSelect","variant","icon","onClick","displayName"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist'\nimport { NumberFormatter } from '@procore/globalization-toolkit'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { Selection } from '../MenuImperative/MenuImperative.types'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n  StyledButton,\n  StyledContainer,\n  StyledCurrentPage,\n  StyledPageCount,\n} from './Pagination.styles'\nimport type {\n  PaginationHook,\n  PaginationHookConfig,\n  PresetPaginationProps,\n} from './Pagination.types'\nimport { PaginationSelect } from './PaginationSelect'\n\nfunction noop() {}\n\nconst usePagination = ({\n  activePage = 0,\n  items = 0,\n  onSelectPage = () => {},\n  perPage = 0,\n}: PaginationHookConfig): PaginationHook => {\n  const pages = Math.ceil(items / perPage)\n  activePage = pages === 0 ? 0 : activePage\n\n  return {\n    end: Math.min(activePage * perPage, items),\n    isFirst: activePage < 2,\n    isLast: activePage === pages,\n    pages,\n    selectNext: () => onSelectPage(activePage + 1),\n    selectPage: (selection: Selection) => onSelectPage(selection.item),\n    selectPrev: () => onSelectPage(activePage - 1),\n    start: Math.max((activePage - 1) * perPage + 1, 0),\n  }\n}\n\n/**\n\n We paginate pages that display large data sets to our users. This helps reduce\n page load time and makes the data easier to navigate.\n\n Pagination is commonly seen on tool landing pages, where we display 150 objects\n or table rows per page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-pagination--demo)\n\n @see [Design Guidelines](https://design.procore.com/pagination)\n\n */\nexport const Pagination = React.forwardRef<\n  HTMLDivElement,\n  PresetPaginationProps\n>(function Pagination(\n  { activePage = 1, items, onSelectPage = noop, perPage = 50, ...props },\n  ref\n) {\n  const {\n    end,\n    isFirst,\n    isLast,\n    pages,\n    selectNext,\n    selectPage,\n    selectPrev,\n    start,\n  } = usePagination({\n    activePage,\n    items,\n    onSelectPage,\n    perPage,\n  })\n\n  const i18n = useI18nContext()\n  const labelId = useId()\n  const selectId = useId()\n\n  function formattedNumber(items: number) {\n    const formatter = new NumberFormatter({ locale: i18n.locale })\n\n    return formatter.formatNumber(items)\n  }\n\n  return (\n    <StyledContainer ref={ref} {...props}>\n      <StyledPageCount ref={ref} italic color=\"gray45\">\n        {i18n.t('core.pagination.notation', {\n          end: formattedNumber(end),\n          start: formattedNumber(start),\n          totalItems: formattedNumber(items || 0),\n        })}\n      </StyledPageCount>\n      <StyledCurrentPage id={labelId}>\n        {i18n.t('core.pagination.page')}:\n      </StyledCurrentPage>\n      <PaginationSelect\n        activePage={activePage}\n        aria-labelledby={`${labelId} ${selectId}`}\n        disabled={pages <= 1}\n        id={selectId}\n        onSelect={selectPage}\n        pages={pages}\n      />\n      <StyledButton\n        disabled={isFirst}\n        variant=\"tertiary\"\n        aria-label={i18n.t('core.pagination.prevPage')}\n        icon={<ChevronLeft />}\n        onClick={selectPrev}\n      />\n      <StyledButton\n        disabled={isLast}\n        variant=\"tertiary\"\n        aria-label={i18n.t('core.pagination.nextPage')}\n        icon={<ChevronRight />}\n        onClick={selectNext}\n      />\n    </StyledContainer>\n  )\n})\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","NumberFormatter","useId","React","useI18nContext","StyledButton","StyledContainer","StyledCurrentPage","StyledPageCount","PaginationSelect","noop","usePagination","_ref","_ref$activePage","activePage","_ref$items","items","_ref$onSelectPage","onSelectPage","_ref$perPage","perPage","pages","Math","ceil","end","min","isFirst","isLast","selectNext","selectPage","selection","item","selectPrev","start","max","Pagination","forwardRef","_ref2","ref","_ref2$activePage","_ref2$onSelectPage","_ref2$perPage","props","_objectWithoutProperties","_excluded","_usePagination","i18n","labelId","selectId","formattedNumber","formatter","locale","formatNumber","createElement","_extends","italic","color","t","totalItems","id","concat","disabled","onSelect","variant","icon","onClick","displayName"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist'\nimport { NumberFormatter } from '@procore/globalization-toolkit'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { Selection } from '../MenuImperative/MenuImperative.types'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n  StyledButton,\n  StyledContainer,\n  StyledCurrentPage,\n  StyledPageCount,\n} from './Pagination.styles'\nimport type {\n  PaginationHook,\n  PaginationHookConfig,\n  PresetPaginationProps,\n} from './Pagination.types'\nimport { PaginationSelect } from './PaginationSelect'\n\nfunction noop() {}\n\nconst usePagination = ({\n  activePage = 0,\n  items = 0,\n  onSelectPage = () => {},\n  perPage = 0,\n}: PaginationHookConfig): PaginationHook => {\n  const pages = Math.ceil(items / perPage)\n  activePage = pages === 0 ? 0 : activePage\n\n  return {\n    end: Math.min(activePage * perPage, items),\n    isFirst: activePage < 2,\n    isLast: activePage === pages,\n    pages,\n    selectNext: () => onSelectPage(activePage + 1),\n    selectPage: (selection: Selection) => onSelectPage(selection.item),\n    selectPrev: () => onSelectPage(activePage - 1),\n    start: Math.max((activePage - 1) * perPage + 1, 0),\n  }\n}\n\n/**\n\n We paginate pages that display large data sets to our users. This helps reduce\n page load time and makes the data easier to navigate.\n\n Pagination is commonly seen on tool landing pages, where we display 150 objects\n or table rows per page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-pagination--demo)\n\n @see [Design Guidelines](https://design.procore.com/pagination)\n\n */\nexport const Pagination = React.forwardRef<\n  HTMLDivElement,\n  PresetPaginationProps\n>(function Pagination(\n  { activePage = 1, items, onSelectPage = noop, perPage = 50, ...props },\n  ref\n) {\n  const {\n    end,\n    isFirst,\n    isLast,\n    pages,\n    selectNext,\n    selectPage,\n    selectPrev,\n    start,\n  } = usePagination({\n    activePage,\n    items,\n    onSelectPage,\n    perPage,\n  })\n\n  const i18n = useI18nContext()\n  const labelId = useId()\n  const selectId = useId()\n\n  function formattedNumber(items: number) {\n    const formatter = new NumberFormatter({ locale: i18n.locale })\n\n    return formatter.formatNumber(items)\n  }\n\n  return (\n    <StyledContainer ref={ref} {...props}>\n      <StyledPageCount ref={ref} italic color=\"gray45\">\n        {i18n.t('core.pagination.notation', {\n          end: formattedNumber(end),\n          start: formattedNumber(start),\n          totalItems: formattedNumber(items || 0),\n        })}\n      </StyledPageCount>\n      <StyledCurrentPage id={labelId}>\n        {i18n.t('core.pagination.page')}\n      </StyledCurrentPage>\n      <PaginationSelect\n        activePage={activePage}\n        aria-labelledby={`${labelId} ${selectId}`}\n        disabled={pages <= 1}\n        id={selectId}\n        onSelect={selectPage}\n        pages={pages}\n      />\n      <StyledButton\n        disabled={isFirst}\n        variant=\"tertiary\"\n        aria-label={i18n.t('core.pagination.prevPage')}\n        icon={<ChevronLeft />}\n        onClick={selectPrev}\n      />\n      <StyledButton\n        disabled={isLast}\n        variant=\"tertiary\"\n        aria-label={i18n.t('core.pagination.nextPage')}\n        icon={<ChevronRight />}\n        onClick={selectNext}\n      />\n    </StyledContainer>\n  )\n})\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}

package/dist/Pagination/Pagination.styles.js

@@ -5,22 +5,22 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_8_1__sc-fy34i1-0"
+  componentId: "core-12_10_0__sc-fy34i1-0"
 })(["display:flex;align-items:center;"]);
 export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledPageCount",
-  componentId: "core-12_8_1__sc-fy34i1-1"
+  componentId: "core-12_10_0__sc-fy34i1-1"
 })(["margin-right:", "px;"], spacing.xl);
 export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledCurrentPage",
-  componentId: "core-12_8_1__sc-fy34i1-2"
+  componentId: "core-12_10_0__sc-fy34i1-2"
 })(["margin-right:", "px;"], spacing.sm);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_8_1__sc-fy34i1-3"
+  componentId: "core-12_10_0__sc-fy34i1-3"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_8_1__sc-fy34i1-4"
+  componentId: "core-12_10_0__sc-fy34i1-4"
 })(["max-height:300px;max-width:248px;"]);
 //# sourceMappingURL=Pagination.styles.js.map

package/dist/Panel/Panel.js

@@ -45,8 +45,11 @@ var HeaderAction = /*#__PURE__*/React.forwardRef(function HeaderAction(_ref, ref
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Tooltip, {
     overlay: title,
+    trigger: ['hover', 'focus'],
     ref: ref
-  }, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-label": title
+  }, props, {
     variant: variant
   }), children));
 });
@@ -71,11 +74,13 @@ var MoreMenu = /*#__PURE__*/React.forwardRef(function MoreMenu(_ref2, ref) {
 export var MoreIcon = function MoreIcon(_ref3) {
   var children = _ref3.children,
     qa = _ref3.qa;
+  var i18n = useI18nContext();
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
     trigger: "click",
     placement: "bottom-right",
     overlay: /*#__PURE__*/React.createElement(MoreMenu, null, children)
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": i18n.t('core.dropdown.moreOptions'),
     "data-qa": qa === null || qa === void 0 ? void 0 : qa.moreIcon,
     variant: "tertiary",
     icon: /*#__PURE__*/React.createElement(EllipsisVertical, null)
@@ -106,7 +111,7 @@ export var TitleTooltip = function TitleTooltip(_ref7) {
     return children;
   }
   return /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: "hover",
+    trigger: ['hover', 'focus'],
     overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, overlay),
     placement: "bottom"
   }, children);