@procore/core-react 12.6.0 → 12.8.0

package/dist/Modal/Modal.styles.js

@@ -16,26 +16,45 @@ export var modalPixelWidths = {
   lg: 1152,
   xl: 1920
 };
+var compactModalFullscreenMaxHeight = 940;
+var screenWidthPixelBreakpoints = {
+  mobile: {
+    small: {
+      min: 0,
+      max: 439
+    },
+    large: {
+      min: 440,
+      max: 767
+    }
+  }
+};
 export var StyledModal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_6_0__sc-1ijdug2-0"
+  componentId: "core-12_8_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_6_0__sc-1ijdug2-1"
+  componentId: "core-12_8_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_6_0__sc-1ijdug2-2"
-})(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", ""], function (_ref) {
-  var $placement = _ref.$placement;
+  componentId: "core-12_8_0__sc-1ijdug2-2"
+})(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", " ", ""], function (_ref) {
+  var $compact = _ref.$compact;
+  if (!$compact) {
+    return '';
+  }
+  return css(["@media (max-width:", "px) and (max-height:", "px){border-radius:0;height:100vh;width:100vw;}@media (min-width:", "px) and (max-width:", "px){max-height:calc(100vh - 24px);width:416px;}@media (min-height:", "px){height:916px;max-width:100vw;}"], screenWidthPixelBreakpoints.mobile.small.max, compactModalFullscreenMaxHeight, screenWidthPixelBreakpoints.mobile.large.min, screenWidthPixelBreakpoints.mobile.large.max, compactModalFullscreenMaxHeight + 1);
+}, function (_ref2) {
+  var $placement = _ref2.$placement;
   if ($placement === 'top') {
     return css(["top:5vh;"]);
   }
   return css(["top:50vh;transform:translateY(-50%);"]);
-}, function (_ref2) {
-  var $width = _ref2.$width,
-    $placement = _ref2.$placement;
+}, function (_ref3) {
+  var $width = _ref3.$width,
+    $placement = _ref3.$placement;
   if ($width) {
     return css(["left:", "px;right:", "px;margin-left:auto;margin-right:auto;max-width:", "px;", "{max-width:none;}"], modalPixelGutter, modalPixelGutter, modalPixelWidths[$width], StyledModalBody);
   }
@@ -44,51 +63,88 @@ export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
 });
 export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooter",
-  componentId: "core-12_6_0__sc-1ijdug2-3"
+  componentId: "core-12_8_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_6_0__sc-1ijdug2-4"
-})(["", " box-sizing:border-box;color:", ";display:flex;flex-direction:column;max-width:", ";overflow:auto;", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_ref3) {
-  var noSideSpacing = _ref3.noSideSpacing;
+  componentId: "core-12_8_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);
-}, StyledSection, StyledSectionInner, function (_ref4) {
-  var isOverflowingY = _ref4.isOverflowingY;
+}, function (_ref5) {
+  var $compact = _ref5.$compact;
+  if (!$compact) {
+    // TODO deprecated, moving width up. delete line in breaking change
+    return css(["max-width:", ";"], modalMaxWidth);
+  }
+  return css(["padding:8px 16px;"]);
+}, StyledSection, StyledSectionInner, function (_ref6) {
+  var isOverflowingY = _ref6.isOverflowingY;
   return isOverflowingY && css(["& + ", "{border-top-width:1px;border-top-style:solid;border-top-color:", ";", "{border-top:none;}}"], StyledModalFooter, colors.gray85, StyledModalFooterSummary);
 });
 export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalContent",
-  componentId: "core-12_6_0__sc-1ijdug2-5"
-})(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;"]);
+  componentId: "core-12_8_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;
+  if (!$compact) {
+    return '';
+  }
+  return css(["max-height:unset;"]);
+});
 export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledModalFooterNotation",
-  componentId: "core-12_6_0__sc-1ijdug2-6"
+  componentId: "core-12_8_0__sc-1ijdug2-6"
 })(["flex-grow:1;"]);
 export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeader",
-  componentId: "core-12_6_0__sc-1ijdug2-7"
-})(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;padding:", "px ", "px;position:relative;", ""], colors.gray10, spacing.xl, spacing.xxl, function (_ref5) {
-  var $isBodyScrolled = _ref5.$isBodyScrolled;
+  componentId: "core-12_8_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;
+  if ($compact) {
+    return css(["border-bottom:1px solid ", ";"], colors.gray85);
+  }
   return css(["border-bottom:1px solid ", ";"], $isBodyScrolled ? colors.gray85 : 'transparent');
+}, function (_ref9) {
+  var $compact = _ref9.$compact;
+  var spacings = "".concat(spacing.xl, "px ").concat(spacing.xxl, "px");
+  if ($compact) {
+    spacings = "".concat(spacing.md, "px ").concat(spacing.lg, "px");
+  }
+  return css(["padding:", ";"], spacings);
 });
 export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeading",
-  componentId: "core-12_6_0__sc-1ijdug2-8"
-})(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;"], getTypographyIntent('h2'), spacing.lg);
+  componentId: "core-12_8_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');
+}, function (_ref11) {
+  var $compact = _ref11.$compact;
+  return $compact ? 36 : spacing.lg;
+}, function (_ref12) {
+  var $compact = _ref12.$compact;
+  if (!$compact) {
+    return '';
+  }
+  return css(["min-height:unset;"]);
+});
 export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalCancel",
-  componentId: "core-12_6_0__sc-1ijdug2-9"
+  componentId: "core-12_8_0__sc-1ijdug2-9"
 })(["flex:0 0 auto;"]);
 export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalScrim",
-  componentId: "core-12_6_0__sc-1ijdug2-10"
+  componentId: "core-12_8_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_6_0__sc-1ijdug2-11"
+  componentId: "core-12_8_0__sc-1ijdug2-11"
 })(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
 export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooterSummary",
-  componentId: "core-12_6_0__sc-1ijdug2-12"
+  componentId: "core-12_8_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/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","names":["Warning","styled","css","Card","StyledSection","StyledSectionInner","Typography","getTypographyIntent","colors","spacing","fadeInClassName","fadeOutClassName","modalMaxWidth","modalPixelGutter","xl","modalPixelWidths","sm","md","lg","StyledModal","div","withConfig","displayName","componentId","StyledModalButtons","StyledModalContainer","_ref","$placement","_ref2","$width","StyledModalBody","StyledModalFooter","xxl","gray15","_ref3","noSideSpacing","_ref4","isOverflowingY","gray85","StyledModalFooterSummary","StyledModalContent","StyledModalFooterNotation","StyledModalHeader","gray10","_ref5","$isBodyScrolled","StyledModalHeading","StyledModalCancel","StyledModalScrim","StyledModalWarningIcon","yellow40","gray98"],"sources":["../../src/Modal/Modal.styles.ts"],"sourcesContent":["import { Warning } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { Card } from '../Card/Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { Typography } from '../Typography/Typography'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ModalPlacement, ModalWidth } from './Modal.types'\n\nexport const fadeInClassName = 'fade-in'\nexport const fadeOutClassName = 'fade-out'\nexport const modalMaxWidth = '640px'\nexport const modalPixelGutter = spacing.xl\nexport const modalPixelWidths = {\n  sm: 432,\n  md: 688,\n  lg: 1152,\n  xl: 1920,\n}\n\nexport const StyledModal = styled.div`\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.${fadeInClassName} {\n    opacity: 1;\n  }\n\n  &.${fadeOutClassName} {\n    opacity: 0;\n  }\n`\n\nexport const StyledModalButtons = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ${spacing.lg}px;\n\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledModalContainer = styled(Card)<{\n  $placement: ModalPlacement\n  $width?: ModalWidth\n}>`\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ${({ $placement }) => {\n    if ($placement === 'top') {\n      return css`\n        top: 5vh;\n      `\n    }\n\n    return css`\n      top: 50vh;\n      transform: translateY(-50%);\n    `\n  }}\n\n  ${({ $width, $placement }) => {\n    if ($width) {\n      return css`\n        left: ${modalPixelGutter}px;\n        right: ${modalPixelGutter}px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ${modalPixelWidths[$width]}px;\n\n        // TODO deprecated, moving width up\n        ${StyledModalBody} {\n          max-width: none;\n        }\n      `\n    }\n    // TODO deprecated, uses new centering, required width\n    return css`\n      left: 50vw;\n      transform: translateX(-50%)\n        ${$placement === 'center' && 'translateY(-50%)'};\n    `\n  }}\n`\n\nexport const StyledModalFooter = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ${spacing.xl}px ${spacing.xxl}px ${spacing.xxl}px;\n`\n\nexport const StyledModalBody = styled.div<{\n  isOverflowingY: boolean\n  noSideSpacing: boolean\n}>`\n  ${getTypographyIntent('body')}\n\n  box-sizing: border-box;\n  color: ${colors.gray15};\n  display: flex;\n  flex-direction: column;\n  // TODO deprecated, delete line in breaking change\n  max-width: ${modalMaxWidth};\n  overflow: auto;\n  ${({ noSideSpacing }) => {\n    return css`\n      padding: ${spacing.xl}px ${noSideSpacing ? 0 : spacing.xxl}px;\n    `\n  }}\n\n  > ${StyledSection} {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: 0;\n    }\n  }\n\n  ${({ isOverflowingY }) =>\n    isOverflowingY &&\n    css`\n      & + ${StyledModalFooter} {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ${colors.gray85};\n        ${StyledModalFooterSummary} {\n          border-top: none;\n        }\n      }\n    `}\n`\n\nexport const StyledModalContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n`\n\nexport const StyledModalFooterNotation = styled(Typography)`\n  flex-grow: 1;\n`\n\nexport const StyledModalHeader = styled.div<{ $isBodyScrolled: boolean }>`\n  align-items: flex-start;\n  color: ${colors.gray10};\n  display: flex;\n  flex: 0 0 auto;\n  padding: ${spacing.xl}px ${spacing.xxl}px;\n  position: relative;\n  ${({ $isBodyScrolled }) => css`\n    border-bottom: 1px solid ${$isBodyScrolled ? colors.gray85 : 'transparent'};\n  `}\n`\n\nexport const StyledModalHeading = styled.div`\n  ${getTypographyIntent('h2')}\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ${spacing.lg}px;\n`\n\nexport const StyledModalCancel = styled.div`\n  flex: 0 0 auto;\n`\n\nexport const StyledModalScrim = styled.div`\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n`\n\nexport const StyledModalWarningIcon = styled(Warning)`\n  color: ${colors.yellow40};\n  margin-right: ${spacing.sm}px;\n`\nexport const StyledModalFooterSummary = styled.div`\n  ${getTypographyIntent('small')}\n  border-top: 1px solid ${colors.gray85};\n  border-bottom: 1px solid ${colors.gray85};\n  padding: ${spacing.md}px ${spacing.xxl}px;\n  color: ${colors.gray15};\n  font-style: italic;\n  background-color: ${colors.gray98};\n  margin: -${spacing.xl}px -${spacing.xxl}px ${spacing.xl}px -${spacing.xxl}px;\n  flex: 1 1 100%;\n`\n"],"mappings":"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"}
+{"version":3,"file":"Modal.styles.js","names":["Warning","styled","css","Card","StyledSection","StyledSectionInner","Typography","getTypographyIntent","colors","spacing","fadeInClassName","fadeOutClassName","modalMaxWidth","modalPixelGutter","xl","modalPixelWidths","sm","md","lg","compactModalFullscreenMaxHeight","screenWidthPixelBreakpoints","mobile","small","min","max","large","StyledModal","div","withConfig","displayName","componentId","StyledModalButtons","StyledModalContainer","_ref","$compact","_ref2","$placement","_ref3","$width","StyledModalBody","StyledModalFooter","xxl","gray15","_ref4","noSideSpacing","_ref5","_ref6","isOverflowingY","gray85","StyledModalFooterSummary","StyledModalContent","_ref7","_ref7$$compact","StyledModalFooterNotation","StyledModalHeader","gray10","_ref8","$isBodyScrolled","_ref9","spacings","concat","StyledModalHeading","_ref10","_ref11","_ref12","StyledModalCancel","StyledModalScrim","StyledModalWarningIcon","yellow40","gray98"],"sources":["../../src/Modal/Modal.styles.ts"],"sourcesContent":["import { Warning } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { Card } from '../Card/Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { Typography } from '../Typography/Typography'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ModalPlacement, ModalWidth } from './Modal.types'\n\nexport const fadeInClassName = 'fade-in'\nexport const fadeOutClassName = 'fade-out'\nexport const modalMaxWidth = '640px'\nexport const modalPixelGutter = spacing.xl\nexport const modalPixelWidths = {\n  sm: 432,\n  md: 688,\n  lg: 1152,\n  xl: 1920,\n}\n\nconst compactModalFullscreenMaxHeight = 940\nconst screenWidthPixelBreakpoints = {\n  mobile: {\n    small: {\n      min: 0,\n      max: 439,\n    },\n    large: {\n      min: 440,\n      max: 767,\n    },\n  },\n}\n\nexport const StyledModal = styled.div`\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.${fadeInClassName} {\n    opacity: 1;\n  }\n\n  &.${fadeOutClassName} {\n    opacity: 0;\n  }\n`\n\nexport const StyledModalButtons = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ${spacing.lg}px;\n\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledModalContainer = styled(Card)<{\n  $compact: boolean\n  $placement: ModalPlacement\n  $width?: ModalWidth\n}>`\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      @media (max-width: ${screenWidthPixelBreakpoints.mobile.small\n          .max}px) and (max-height: ${compactModalFullscreenMaxHeight}px) {\n        border-radius: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n      @media (min-width: ${screenWidthPixelBreakpoints.mobile.large\n          .min}px) and (max-width: ${screenWidthPixelBreakpoints.mobile.large\n          .max}px) {\n        max-height: calc(100vh - 24px);\n        width: 416px;\n      }\n      @media (min-height: ${compactModalFullscreenMaxHeight + 1}px) {\n        height: 916px;\n        max-width: 100vw;\n      }\n    `\n  }}\n\n  ${({ $placement }) => {\n    if ($placement === 'top') {\n      return css`\n        top: 5vh;\n      `\n    }\n\n    return css`\n      top: 50vh;\n      transform: translateY(-50%);\n    `\n  }}\n\n  ${({ $width, $placement }) => {\n    if ($width) {\n      return css`\n        left: ${modalPixelGutter}px;\n        right: ${modalPixelGutter}px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ${modalPixelWidths[$width]}px;\n\n        // TODO deprecated, moving width up. delete line in breaking change\n        ${StyledModalBody} {\n          max-width: none;\n        }\n      `\n    }\n    // TODO deprecated, uses new centering, required width\n    return css`\n      left: 50vw;\n      transform: translateX(-50%)\n        ${$placement === 'center' && 'translateY(-50%)'};\n    `\n  }}\n`\n\nexport const StyledModalFooter = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ${spacing.xl}px ${spacing.xxl}px ${spacing.xxl}px;\n`\n\nexport const StyledModalBody = styled.div<{\n  $compact: boolean\n  isOverflowingY: boolean\n  noSideSpacing: boolean\n}>`\n  ${getTypographyIntent('body')}\n\n  box-sizing: border-box;\n  color: ${colors.gray15};\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  ${({ noSideSpacing }) => {\n    return css`\n      padding: ${spacing.xl}px ${noSideSpacing ? 0 : spacing.xxl}px;\n    `\n  }}\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      // TODO deprecated, moving width up. delete line in breaking change\n      return css`\n        max-width: ${modalMaxWidth};\n      `\n    }\n\n    return css`\n      padding: 8px 16px;\n    `\n  }}\n\n  > ${StyledSection} {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: 0;\n    }\n  }\n\n  ${({ isOverflowingY }) =>\n    isOverflowingY &&\n    css`\n      & + ${StyledModalFooter} {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ${colors.gray85};\n        ${StyledModalFooterSummary} {\n          border-top: none;\n        }\n      }\n    `}\n`\n\nexport const StyledModalContent = styled.div<{ $compact?: boolean }>`\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n\n  ${({ $compact = false }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      max-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalFooterNotation = styled(Typography)`\n  flex-grow: 1;\n`\n\nexport const StyledModalHeader = styled.div<{\n  $compact: boolean\n  $isBodyScrolled: boolean\n}>`\n  align-items: flex-start;\n  color: ${colors.gray10};\n  display: flex;\n  flex: 0 0 auto;\n  position: relative;\n  ${({ $compact, $isBodyScrolled }) => {\n    if ($compact) {\n      return css`\n        border-bottom: 1px solid ${colors.gray85};\n      `\n    }\n\n    return css`\n      border-bottom: 1px solid\n        ${$isBodyScrolled ? colors.gray85 : 'transparent'};\n    `\n  }}\n\n  ${({ $compact }) => {\n    let spacings = `${spacing.xl}px ${spacing.xxl}px`\n\n    if ($compact) {\n      spacings = `${spacing.md}px ${spacing.lg}px`\n    }\n\n    return css`\n      padding: ${spacings};\n    `\n  }}\n`\n\nexport const StyledModalHeading = styled.div<{ $compact: boolean }>`\n  ${({ $compact }) => getTypographyIntent($compact ? 'h3' : 'h2')}\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ${({ $compact }) => ($compact ? 36 : spacing.lg)}px;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      min-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalCancel = styled.div`\n  flex: 0 0 auto;\n`\n\nexport const StyledModalScrim = styled.div`\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n`\n\nexport const StyledModalWarningIcon = styled(Warning)`\n  color: ${colors.yellow40};\n  margin-right: ${spacing.sm}px;\n`\nexport const StyledModalFooterSummary = styled.div`\n  ${getTypographyIntent('small')}\n  border-top: 1px solid ${colors.gray85};\n  border-bottom: 1px solid ${colors.gray85};\n  padding: ${spacing.md}px ${spacing.xxl}px;\n  color: ${colors.gray15};\n  font-style: italic;\n  background-color: ${colors.gray98};\n  margin: -${spacing.xl}px -${spacing.xxl}px ${spacing.xl}px -${spacing.xxl}px;\n  flex: 1 1 100%;\n`\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,2BAA2B;AAC7E,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,eAAe,GAAG,SAAS;AACxC,OAAO,IAAMC,gBAAgB,GAAG,UAAU;AAC1C,OAAO,IAAMC,aAAa,GAAG,OAAO;AACpC,OAAO,IAAMC,gBAAgB,GAAGJ,OAAO,CAACK,EAAE;AAC1C,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,IAAI;EACRJ,EAAE,EAAE;AACN,CAAC;AAED,IAAMK,+BAA+B,GAAG,GAAG;AAC3C,IAAMC,2BAA2B,GAAG;EAClCC,MAAM,EAAE;IACNC,KAAK,EAAE;MACLC,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE;IACP,CAAC;IACDC,KAAK,EAAE;MACLF,GAAG,EAAE,GAAG;MACRC,GAAG,EAAE;IACP;EACF;AACF,CAAC;AAED,OAAO,IAAME,WAAW,gBAAGzB,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sJAS/BpB,eAAe,EAIfC,gBAAgB,CAGrB;AAED,OAAO,IAAMoB,kBAAkB,gBAAG9B,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAG3BrB,OAAO,CAACS,EAAE,EAGRT,OAAO,CAACO,EAAE,CAE5B;AAED,OAAO,IAAMgB,oBAAoB,gBAAG/B,MAAM,CAACE,IAAI,CAAC,CAAAyB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAU5C,UAAAG,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,EAAE;EACX;EAEA,OAAOhC,GAAG,wPACakB,2BAA2B,CAACC,MAAM,CAACC,KAAK,CACxDE,GAAG,EAAwBL,+BAA+B,EAK1CC,2BAA2B,CAACC,MAAM,CAACI,KAAK,CACxDF,GAAG,EAAuBH,2BAA2B,CAACC,MAAM,CAACI,KAAK,CAClED,GAAG,EAIcL,+BAA+B,GAAG,CAAC;AAK7D,CAAC,EAEC,UAAAgB,KAAA,EAAoB;EAAA,IAAjBC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EACb,IAAIA,UAAU,KAAK,KAAK,EAAE;IACxB,OAAOlC,GAAG;EAGZ;EAEA,OAAOA,GAAG;AAIZ,CAAC,EAEC,UAAAmC,KAAA,EAA4B;EAAA,IAAzBC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEF,UAAU,GAAAC,KAAA,CAAVD,UAAU;EACrB,IAAIE,MAAM,EAAE;IACV,OAAOpC,GAAG,yGACAW,gBAAgB,EACfA,gBAAgB,EAGZE,gBAAgB,CAACuB,MAAM,CAAC,EAGnCC,eAAe;EAIrB;EACA;EACA,OAAOrC,GAAG,iDAGJkC,UAAU,KAAK,QAAQ,IAAI,kBAAkB;AAErD,CAAC,CACF;AAED,OAAO,IAAMI,iBAAiB,gBAAGvC,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4HAM9BrB,OAAO,CAACK,EAAE,EAAML,OAAO,CAACgC,GAAG,EAAMhC,OAAO,CAACgC,GAAG,CACxD;AAED,OAAO,IAAMF,eAAe,gBAAGtC,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yLAKrCvB,mBAAmB,CAAC,MAAM,CAAC,EAGpBC,MAAM,CAACkC,MAAM,EAIpB,UAAAC,KAAA,EAAuB;EAAA,IAApBC,aAAa,GAAAD,KAAA,CAAbC,aAAa;EAChB,OAAO1C,GAAG,6BACGO,OAAO,CAACK,EAAE,EAAM8B,aAAa,GAAG,CAAC,GAAGnC,OAAO,CAACgC,GAAG;AAE9D,CAAC,EAEC,UAAAI,KAAA,EAAkB;EAAA,IAAfX,QAAQ,GAAAW,KAAA,CAARX,QAAQ;EACX,IAAI,CAACA,QAAQ,EAAE;IACb;IACA,OAAOhC,GAAG,sBACKU,aAAa;EAE9B;EAEA,OAAOV,GAAG;AAGZ,CAAC,EAEGE,aAAa,EAIGC,kBAAkB,EAKpC,UAAAyC,KAAA;EAAA,IAAGC,cAAc,GAAAD,KAAA,CAAdC,cAAc;EAAA,OACjBA,cAAc,IACd7C,GAAG,yGACKsC,iBAAiB,EAGDhC,MAAM,CAACwC,MAAM,EAC/BC,wBAAwB,CAI7B;AAAA,EACJ;AAED,OAAO,IAAMC,kBAAkB,gBAAGjD,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAOxC,UAAAqB,KAAA,EAA0B;EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAvBjB,QAAQ;IAARA,QAAQ,GAAAkB,cAAA,cAAG,KAAK,GAAAA,cAAA;EACnB,IAAI,CAAClB,QAAQ,EAAE;IACb,OAAO,EAAE;EACX;EAEA,OAAOhC,GAAG;AAGZ,CAAC,CACF;AAED,OAAO,IAAMmD,yBAAyB,gBAAGpD,MAAM,CAACK,UAAU,CAAC,CAAAsB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oBAE1D;AAED,OAAO,IAAMwB,iBAAiB,gBAAGrD,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iGAKhCtB,MAAM,CAAC+C,MAAM,EAIpB,UAAAC,KAAA,EAAmC;EAAA,IAAhCtB,QAAQ,GAAAsB,KAAA,CAARtB,QAAQ;IAAEuB,eAAe,GAAAD,KAAA,CAAfC,eAAe;EAC5B,IAAIvB,QAAQ,EAAE;IACZ,OAAOhC,GAAG,oCACmBM,MAAM,CAACwC,MAAM;EAE5C;EAEA,OAAO9C,GAAG,oCAEJuD,eAAe,GAAGjD,MAAM,CAACwC,MAAM,GAAG,aAAa;AAEvD,CAAC,EAEC,UAAAU,KAAA,EAAkB;EAAA,IAAfxB,QAAQ,GAAAwB,KAAA,CAARxB,QAAQ;EACX,IAAIyB,QAAQ,MAAAC,MAAA,CAAMnD,OAAO,CAACK,EAAE,SAAA8C,MAAA,CAAMnD,OAAO,CAACgC,GAAG,OAAI;EAEjD,IAAIP,QAAQ,EAAE;IACZyB,QAAQ,MAAAC,MAAA,CAAMnD,OAAO,CAACQ,EAAE,SAAA2C,MAAA,CAAMnD,OAAO,CAACS,EAAE,OAAI;EAC9C;EAEA,OAAOhB,GAAG,oBACGyD,QAAQ;AAEvB,CAAC,CACF;AAED,OAAO,IAAME,kBAAkB,gBAAG5D,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qGACxC,UAAAgC,MAAA;EAAA,IAAG5B,QAAQ,GAAA4B,MAAA,CAAR5B,QAAQ;EAAA,OAAO3B,mBAAmB,CAAC2B,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAAA,GAK9C,UAAA6B,MAAA;EAAA,IAAG7B,QAAQ,GAAA6B,MAAA,CAAR7B,QAAQ;EAAA,OAAQA,QAAQ,GAAG,EAAE,GAAGzB,OAAO,CAACS,EAAE;AAAA,CAAC,EAE7D,UAAA8C,MAAA,EAAkB;EAAA,IAAf9B,QAAQ,GAAA8B,MAAA,CAAR9B,QAAQ;EACX,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,EAAE;EACX;EAEA,OAAOhC,GAAG;AAGZ,CAAC,CACF;AAED,OAAO,IAAM+D,iBAAiB,gBAAGhE,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAE1C;AAED,OAAO,IAAMoC,gBAAgB,gBAAGjE,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0GAQzC;AAED,OAAO,IAAMqC,sBAAsB,gBAAGlE,MAAM,CAACD,OAAO,CAAC,CAAA4B,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wCAC1CtB,MAAM,CAAC4D,QAAQ,EACR3D,OAAO,CAACO,EAAE,CAC3B;AACD,OAAO,IAAMiC,wBAAwB,gBAAGhD,MAAM,CAAC0B,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kMAC9CvB,mBAAmB,CAAC,OAAO,CAAC,EACNC,MAAM,CAACwC,MAAM,EACVxC,MAAM,CAACwC,MAAM,EAC7BvC,OAAO,CAACQ,EAAE,EAAMR,OAAO,CAACgC,GAAG,EAC7BjC,MAAM,CAACkC,MAAM,EAEFlC,MAAM,CAAC6D,MAAM,EACtB5D,OAAO,CAACK,EAAE,EAAOL,OAAO,CAACgC,GAAG,EAAMhC,OAAO,CAACK,EAAE,EAAOL,OAAO,CAACgC,GAAG,CAE1E"}

package/dist/Modal/Modal.types.d.ts

@@ -19,6 +19,12 @@ export interface ModalCloseContextApi {
     onClose: ModalOnClose | undefined;
 }
 export interface ModalCloseableHeaderProps extends DivAttributes {
+    /**
+     * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
+     * @defaultValue false
+     * @since 12.8.0
+     */
+    compact?: boolean;
     qa?: {
         closeButton?: string;
     };
@@ -36,6 +42,12 @@ export interface ModalProps extends Props {
      * @since 11.12.0
      */
     'aria-label'?: string;
+    /**
+     * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
+     * @defaultValue false
+     * @since 12.8.0
+     */
+    compact?: boolean;
     /**
      * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.
      *
@@ -86,6 +98,12 @@ export interface ModalProps extends Props {
     width?: ModalWidth;
 }
 export interface ModalContainerProps extends Props {
+    /**
+     * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
+     * @defaultValue false
+     * @since 12.8.0
+     */
+    compact?: boolean;
     /**
      * @since 10.19.0
      */
@@ -124,6 +142,12 @@ export interface ModalCloseableHeaderProps extends Props {
     };
 }
 export interface ModalBodyProps extends DivAttributes {
+    /**
+     * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
+     * @defaultValue false
+     * @since 12.8.0
+     */
+    compact?: boolean;
     /**
      * Removes left, right paddings from the modal body when true
      * @defaultValue false

package/dist/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n *  - `x` Close Button in the Modal Header\n *  - `scrim` Overlay dimmed scrim\n *  - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\ntype ModalOnClose = (\n  event: // clicked scrim\n  | React.MouseEvent<HTMLDivElement>\n    // clicked x button\n    | React.MouseEvent<HTMLButtonElement>\n    // pressed escape key\n    | React.KeyboardEvent<HTMLElement>,\n  how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n  /**\n   * Escape key will always close a dialog. This adds additional UI or UX to close.\n   */\n  howToClose: ModalOptionalCloseStartegy[] | undefined\n  onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps extends DivAttributes {\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-label'?: string\n  /**\n   * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n   *\n   * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n   *\n   * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n   * @defaultValue []\n   * @since 11.12.0\n   */\n  howToClose?: ModalOptionalCloseStartegy[]\n  /**\n   * Aligns with `role` and `ref` location.\n   */\n  id?: string\n  /**\n   * Callback for clicking the overlay\n   * @since 10.19.0\n   */\n  onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n  /**\n   * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n   * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n   * to the trigger when closed. Also enables the Escape key to close the Modal.\n   * @since 11.6.0\n   */\n  onClose?: ModalOnClose\n  /**\n   * Modal open state\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n   */\n  role?: 'dialog'\n  /**\n   * Vertical placement of the modal\n   * @defaultValue center\n   * @since 10.19.0\n   */\n  placement?: ModalPlacement\n  /**\n   * Sets a width on the container and uses next centering.\n   * Future will default to `md`\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  placement: ModalPlacement\n  /**\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n  /**\n   * Headline message\n   * @since 10.19.0\n   */\n  headline?: string\n\n  /**\n   * The dismiss onClick callback\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends DivAttributes {\n  /**\n   * Removes left, right paddings from the modal body when true\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  noSideSpacing?: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n *  - `x` Close Button in the Modal Header\n *  - `scrim` Overlay dimmed scrim\n *  - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\ntype ModalOnClose = (\n  event: // clicked scrim\n  | React.MouseEvent<HTMLDivElement>\n    // clicked x button\n    | React.MouseEvent<HTMLButtonElement>\n    // pressed escape key\n    | React.KeyboardEvent<HTMLElement>,\n  how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n  /**\n   * Escape key will always close a dialog. This adds additional UI or UX to close.\n   */\n  howToClose: ModalOptionalCloseStartegy[] | undefined\n  onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps extends DivAttributes {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-label'?: string\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n   *\n   * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n   *\n   * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n   * @defaultValue []\n   * @since 11.12.0\n   */\n  howToClose?: ModalOptionalCloseStartegy[]\n  /**\n   * Aligns with `role` and `ref` location.\n   */\n  id?: string\n  /**\n   * Callback for clicking the overlay\n   * @since 10.19.0\n   */\n  onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n  /**\n   * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n   * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n   * to the trigger when closed. Also enables the Escape key to close the Modal.\n   * @since 11.6.0\n   */\n  onClose?: ModalOnClose\n  /**\n   * Modal open state\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n   */\n  role?: 'dialog'\n  /**\n   * Vertical placement of the modal\n   * @defaultValue center\n   * @since 10.19.0\n   */\n  placement?: ModalPlacement\n  /**\n   * Sets a width on the container and uses next centering.\n   * Future will default to `md`\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * @since 10.19.0\n   */\n  placement: ModalPlacement\n  /**\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n  /**\n   * Headline message\n   * @since 10.19.0\n   */\n  headline?: string\n\n  /**\n   * The dismiss onClick callback\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends DivAttributes {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * Removes left, right paddings from the modal body when true\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  noSideSpacing?: boolean\n}\n"],"mappings":""}

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_6_0__sc-s9ym9q-0"
+  componentId: "core-12_8_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_6_0__sc-s9ym9q-1"
+  componentId: "core-12_8_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_6_0__sc-s9ym9q-2"
+  componentId: "core-12_8_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_6_0__sc-s9ym9q-3"
+  componentId: "core-12_8_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_6_0__sc-s9ym9q-4"
+  componentId: "core-12_8_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_6_0__sc-s9ym9q-5"
+  componentId: "core-12_8_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/NextListPage/NextListPage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { NextListPageProps } from './NextListPage.types';
+export declare const NextListPage_: React.ForwardRefExoticComponent<NextListPageProps & React.RefAttributes<HTMLDivElement>>;
+/**
+
+ A list page is basically a copy of SettingsPage/DetailPage. However, it has some differences.
+ NextListPage does not have Breadcrumbs, nested sections (although, we may need them in the future), and Footer.
+
+ @since TBD
+
+ @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-nextlistpage--edit)
+
+ @see [Design Guidelines](https://design.procore.com/tool-landing-layout)
+
+ */
+export declare const NextListPage: React.ForwardRefExoticComponent<NextListPageProps & React.RefAttributes<HTMLDivElement>> & {
+    Main: React.ForwardRefExoticComponent<import("../PageLayout/PageLayout.types").PageMainProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<import("../PageLayout").PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Banner: React.ForwardRefExoticComponent<import("../_utils/types").Props & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<import("../_utils/types").Props & React.RefAttributes<HTMLDivElement>>;
+    Tabs: React.ForwardRefExoticComponent<import("../_utils/types").Props & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("../PageLayout").PageProps & React.RefAttributes<HTMLDivElement>>;
+    Aside: React.ForwardRefExoticComponent<import("../PageLayout").PageAsideProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/NextListPage/NextListPage.js

@@ -0,0 +1,44 @@
+var _excluded = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { DetailPage, DetailPageViewContext } from '../DetailPage';
+import { Page } from '../PageLayout';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+export var NextListPage_ = /*#__PURE__*/React.forwardRef(function NextListPage_(_ref, ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(DetailPageViewContext.Provider, {
+    value: {
+      width: 'xl',
+      hasNavigation: false
+    }
+  }, /*#__PURE__*/React.createElement(Page, _extends({
+    ref: ref
+  }, props), children));
+});
+
+/**
+
+ A list page is basically a copy of SettingsPage/DetailPage. However, it has some differences.
+ NextListPage does not have Breadcrumbs, nested sections (although, we may need them in the future), and Footer.
+
+ @since TBD
+
+ @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-nextlistpage--edit)
+
+ @see [Design Guidelines](https://design.procore.com/tool-landing-layout)
+
+ */
+export var NextListPage = addSubcomponents({
+  Main: Page.Main,
+  Header: Page.Header,
+  Banner: Page.Banner,
+  Title: Page.Title,
+  Tabs: Page.Tabs,
+  Body: DetailPage.Body,
+  Aside: Page.Aside
+}, NextListPage_);
+NextListPage_.displayName = 'NextListPage';
+//# sourceMappingURL=NextListPage.js.map

package/dist/NextListPage/NextListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextListPage.js","names":["React","DetailPage","DetailPageViewContext","Page","addSubcomponents","NextListPage_","forwardRef","_ref","ref","children","props","_objectWithoutProperties","_excluded","createElement","Provider","value","width","hasNavigation","_extends","NextListPage","Main","Header","Banner","Title","Tabs","Body","Aside","displayName"],"sources":["../../src/NextListPage/NextListPage.tsx"],"sourcesContent":["import React from 'react'\nimport { DetailPage, DetailPageViewContext } from '../DetailPage'\nimport { Page } from '../PageLayout'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { NextListPageProps } from './NextListPage.types'\n\nexport const NextListPage_ = React.forwardRef<\n  HTMLDivElement,\n  NextListPageProps\n>(function NextListPage_({ children, ...props }, ref) {\n  return (\n    <DetailPageViewContext.Provider\n      value={{ width: 'xl', hasNavigation: false }}\n    >\n      <Page ref={ref} {...props}>\n        {children}\n      </Page>\n    </DetailPageViewContext.Provider>\n  )\n})\n\n/**\n\n A list page is basically a copy of SettingsPage/DetailPage. However, it has some differences.\n NextListPage does not have Breadcrumbs, nested sections (although, we may need them in the future), and Footer.\n\n @since TBD\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-nextlistpage--edit)\n\n @see [Design Guidelines](https://design.procore.com/tool-landing-layout)\n\n */\nexport const NextListPage = addSubcomponents(\n  {\n    Main: Page.Main,\n    Header: Page.Header,\n    Banner: Page.Banner,\n    Title: Page.Title,\n    Tabs: Page.Tabs,\n    Body: DetailPage.Body,\n    Aside: Page.Aside,\n  },\n  NextListPage_\n)\n\nNextListPage_.displayName = 'NextListPage'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,qBAAqB,QAAQ,eAAe;AACjE,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,gBAAgB,QAAQ,4BAA4B;AAG7D,OAAO,IAAMC,aAAa,gBAAGL,KAAK,CAACM,UAAU,CAG3C,SAASD,aAAaA,CAAAE,IAAA,EAAyBC,GAAG,EAAE;EAAA,IAA3BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC3C,oBACEZ,KAAA,CAAAa,aAAA,CAACX,qBAAqB,CAACY,QAAQ;IAC7BC,KAAK,EAAE;MAAEC,KAAK,EAAE,IAAI;MAAEC,aAAa,EAAE;IAAM;EAAE,gBAE7CjB,KAAA,CAAAa,aAAA,CAACV,IAAI,EAAAe,QAAA;IAACV,GAAG,EAAEA;EAAI,GAAKE,KAAK,GACtBD,QACG,CACwB,CAAC;AAErC,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMU,YAAY,GAAGf,gBAAgB,CAC1C;EACEgB,IAAI,EAAEjB,IAAI,CAACiB,IAAI;EACfC,MAAM,EAAElB,IAAI,CAACkB,MAAM;EACnBC,MAAM,EAAEnB,IAAI,CAACmB,MAAM;EACnBC,KAAK,EAAEpB,IAAI,CAACoB,KAAK;EACjBC,IAAI,EAAErB,IAAI,CAACqB,IAAI;EACfC,IAAI,EAAExB,UAAU,CAACwB,IAAI;EACrBC,KAAK,EAAEvB,IAAI,CAACuB;AACd,CAAC,EACDrB,aACF,CAAC;AAEDA,aAAa,CAACsB,WAAW,GAAG,cAAc"}

package/dist/NextListPage/NextListPage.types.d.ts

@@ -0,0 +1,3 @@
+import type { DetailPageProps } from '../DetailPage';
+export interface NextListPageProps extends Omit<DetailPageProps, 'width' | 'hasNavigation'> {
+}

package/dist/NextListPage/NextListPage.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NextListPage.types.js.map

package/dist/NextListPage/NextListPage.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextListPage.types.js","names":[],"sources":["../../src/NextListPage/NextListPage.types.ts"],"sourcesContent":["import type { DetailPageProps } from '../DetailPage'\n\nexport interface NextListPageProps\n  extends Omit<DetailPageProps, 'width' | 'hasNavigation'> {}\n"],"mappings":""}

package/dist/NextListPage/index.d.ts

@@ -0,0 +1,2 @@
+export { NextListPage } from './NextListPage';
+export type { NextListPageProps } from './NextListPage.types';

package/dist/NextListPage/index.js

@@ -0,0 +1,2 @@
+export { NextListPage } from './NextListPage';
+//# sourceMappingURL=index.js.map

package/dist/NextListPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["NextListPage"],"sources":["../../src/NextListPage/index.ts"],"sourcesContent":["export { NextListPage } from './NextListPage'\nexport type { NextListPageProps } from './NextListPage.types'\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB"}

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_6_0__sc-3o6zya-0"
+  componentId: "core-12_8_0__sc-3o6zya-0"
 })([""]);
 export var StyledItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledItem",
-  componentId: "core-12_6_0__sc-3o6zya-1"
+  componentId: "core-12_8_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_6_0__sc-3o6zya-2"
+  componentId: "core-12_8_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_6_0__sc-160q1m6-0"
+  componentId: "core-12_8_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_6_0__sc-1782nvg-0"
+  componentId: "core-12_8_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_6_0__sc-1782nvg-1"
+  componentId: "core-12_8_0__sc-1782nvg-1"
 })(["left:", "px;"], spacing.md);
 export var StyledSuffix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
   displayName: "StyledSuffix",
-  componentId: "core-12_6_0__sc-1782nvg-2"
+  componentId: "core-12_8_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_6_0__sc-1782nvg-3"
+  componentId: "core-12_8_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_6_0__sc-1782nvg-4"
+  componentId: "core-12_8_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_6_0__sc-1782nvg-5"
+  componentId: "core-12_8_0__sc-1782nvg-5"
 })([""]);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_6_0__sc-1782nvg-6"
+  componentId: "core-12_8_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_6_0__sc-1epxw7u-0"
+  componentId: "core-12_8_0__sc-1epxw7u-0"
 })(["position:absolute;background:inherit;width:", "px;height:", "px;transform:rotate(45deg);"], arrowSize, arrowSize);
 //# sourceMappingURL=OverlayArrow.styles.js.map