@procore/core-react 12.21.2 → 12.23.0

package/dist/AvatarStack/AvatarStack.styles.js

@@ -7,32 +7,32 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_21_2__sc-ft72hu-0"
+  componentId: "core-12_23_0__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}&[role='img']:focus{outline:none;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_21_2__sc-ft72hu-1"
+  componentId: "core-12_23_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_21_2__sc-ft72hu-2"
+  componentId: "core-12_23_0__sc-ft72hu-2"
 })(["padding-top:", "px;padding-bottom:", "px;padding-left:", "px;"], spacing.sm, spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_21_2__sc-ft72hu-3"
+  componentId: "core-12_23_0__sc-ft72hu-3"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_21_2__sc-ft72hu-4"
+  componentId: "core-12_23_0__sc-ft72hu-4"
 })(["display:flex;margin-left:", "px;margin-bottom:", "px;"], spacing.md, spacing.lg);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_21_2__sc-ft72hu-5"
+  componentId: "core-12_23_0__sc-ft72hu-5"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_21_2__sc-ft72hu-6"
+  componentId: "core-12_23_0__sc-ft72hu-6"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { BadgeLabelProps, BadgeProps } from './Badge.types';
-export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, BadgeProps, never>;
-export declare const StyledBadgeLabel: import("styled-components").StyledComponent<"span", any, BadgeLabelProps, never>;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BadgeProps>> & string;
+export declare const StyledBadgeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BadgeLabelProps>> & string;

package/dist/Badge/Badge.styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadge",
-  componentId: "core-12_21_2__sc-rpertu-0"
+  componentId: "core-12_23_0__sc-rpertu-0"
 })(["display:inline-block;position:relative;"]);
 export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledBadgeLabel",
-  componentId: "core-12_21_2__sc-rpertu-1"
+  componentId: "core-12_23_0__sc-rpertu-1"
 })(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
 //# sourceMappingURL=Badge.styles.js.map

package/dist/BadgePill/BadgePill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BadgePillProps } from './BadgePill.types';
+export declare const BadgePill: (props: BadgePillProps) => React.JSX.Element;

package/dist/BadgePill/BadgePill.js

@@ -0,0 +1,25 @@
+var _excluded = ["children", "dotIndicator", "value", "hidden", "xOffset", "yOffset"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { StyledBadgeContainer, StyledBadgeContent, StyledBadgeCounter, StyledBadgeDotIndicator } from './BadgePill.styles';
+var MAX_DISPLAY_VALUE = 99;
+export var BadgePill = function BadgePill(props) {
+  var children = props.children,
+    dotIndicator = props.dotIndicator,
+    value = props.value,
+    hidden = props.hidden,
+    xOffset = props.xOffset,
+    yOffset = props.yOffset,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(StyledBadgeContainer, null, children, /*#__PURE__*/React.createElement(StyledBadgeContent, _extends({}, restProps, {
+    $overlapping: !!children,
+    $hidden: hidden,
+    $xOffset: xOffset,
+    $yOffset: yOffset
+  }), dotIndicator && /*#__PURE__*/React.createElement(StyledBadgeDotIndicator, null), !dotIndicator && /*#__PURE__*/React.createElement(StyledBadgeCounter, {
+    $oneDigit: value >= 0 && value < 10
+  }, value > MAX_DISPLAY_VALUE ? "".concat(MAX_DISPLAY_VALUE, "+") : value)));
+};
+//# sourceMappingURL=BadgePill.js.map

package/dist/BadgePill/BadgePill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgePill.js","names":["React","StyledBadgeContainer","StyledBadgeContent","StyledBadgeCounter","StyledBadgeDotIndicator","MAX_DISPLAY_VALUE","BadgePill","props","children","dotIndicator","value","hidden","xOffset","yOffset","restProps","_objectWithoutProperties","_excluded","createElement","_extends","$overlapping","$hidden","$xOffset","$yOffset","$oneDigit","concat"],"sources":["../../src/BadgePill/BadgePill.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  StyledBadgeContainer,\n  StyledBadgeContent,\n  StyledBadgeCounter,\n  StyledBadgeDotIndicator,\n} from './BadgePill.styles'\nimport type { BadgePillProps } from './BadgePill.types'\n\nconst MAX_DISPLAY_VALUE = 99\n\nexport const BadgePill = (props: BadgePillProps) => {\n  const {\n    children,\n    dotIndicator,\n    value,\n    hidden,\n    xOffset,\n    yOffset,\n    ...restProps\n  } = props\n\n  return (\n    <StyledBadgeContainer>\n      {children}\n      <StyledBadgeContent\n        {...restProps}\n        $overlapping={!!children}\n        $hidden={hidden}\n        $xOffset={xOffset}\n        $yOffset={yOffset}\n      >\n        {dotIndicator && <StyledBadgeDotIndicator />}\n        {!dotIndicator && (\n          <StyledBadgeCounter $oneDigit={value >= 0 && value < 10}>\n            {value > MAX_DISPLAY_VALUE ? `${MAX_DISPLAY_VALUE}+` : value}\n          </StyledBadgeCounter>\n        )}\n      </StyledBadgeContent>\n    </StyledBadgeContainer>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,oBAAoB,EACpBC,kBAAkB,EAClBC,kBAAkB,EAClBC,uBAAuB,QAClB,oBAAoB;AAG3B,IAAMC,iBAAiB,GAAG,EAAE;AAE5B,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,KAAqB,EAAK;EAClD,IACEC,QAAQ,GAOND,KAAK,CAPPC,QAAQ;IACRC,YAAY,GAMVF,KAAK,CANPE,YAAY;IACZC,KAAK,GAKHH,KAAK,CALPG,KAAK;IACLC,MAAM,GAIJJ,KAAK,CAJPI,MAAM;IACNC,OAAO,GAGLL,KAAK,CAHPK,OAAO;IACPC,OAAO,GAELN,KAAK,CAFPM,OAAO;IACJC,SAAS,GAAAC,wBAAA,CACVR,KAAK,EAAAS,SAAA;EAET,oBACEhB,KAAA,CAAAiB,aAAA,CAAChB,oBAAoB,QAClBO,QAAQ,eACTR,KAAA,CAAAiB,aAAA,CAACf,kBAAkB,EAAAgB,QAAA,KACbJ,SAAS;IACbK,YAAY,EAAE,CAAC,CAACX,QAAS;IACzBY,OAAO,EAAET,MAAO;IAChBU,QAAQ,EAAET,OAAQ;IAClBU,QAAQ,EAAET;EAAQ,IAEjBJ,YAAY,iBAAIT,KAAA,CAAAiB,aAAA,CAACb,uBAAuB,MAAE,CAAC,EAC3C,CAACK,YAAY,iBACZT,KAAA,CAAAiB,aAAA,CAACd,kBAAkB;IAACoB,SAAS,EAAEb,KAAK,IAAI,CAAC,IAAIA,KAAK,GAAG;EAAG,GACrDA,KAAK,GAAGL,iBAAiB,MAAAmB,MAAA,CAAMnB,iBAAiB,SAAMK,KACrC,CAEJ,CACA,CAAC;AAE3B,CAAC"}

package/dist/BadgePill/BadgePill.styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledBadgeContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $overlapping: boolean;
+    $hidden?: boolean | undefined;
+    $xOffset?: number | undefined;
+    $yOffset?: number | undefined;
+}>> & string;
+export declare const StyledBadgeDotIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledBadgeCounter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $oneDigit?: boolean | undefined;
+}>> & string;

package/dist/BadgePill/BadgePill.styles.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { getTypographyIntent } from '../Typography';
+import { colors } from '../_styles/colors';
+export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledBadgeContainer",
+  componentId: "core-12_23_0__sc-s2n9gd-0"
+})(["display:inline-flex;position:relative;"]);
+export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledBadgeContent",
+  componentId: "core-12_23_0__sc-s2n9gd-1"
+})(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
+  var $overlapping = _ref.$overlapping,
+    _ref$$xOffset = _ref.$xOffset,
+    $xOffset = _ref$$xOffset === void 0 ? 0 : _ref$$xOffset,
+    _ref$$yOffset = _ref.$yOffset,
+    $yOffset = _ref$$yOffset === void 0 ? 0 : _ref$$yOffset;
+  return $overlapping && "\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    transform: translate(\n      calc(50% + ".concat($xOffset, "px),\n      calc(-50% + ").concat($yOffset * -1, "px)\n    );\n  ");
+}, function (props) {
+  return props.$hidden ? 'visibility: hidden;' : '';
+});
+export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledBadgeDotIndicator",
+  componentId: "core-12_23_0__sc-s2n9gd-2"
+})(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
+var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
+var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
+export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledBadgeCounter",
+  componentId: "core-12_23_0__sc-s2n9gd-3"
+})(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
+  return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
+});
+//# sourceMappingURL=BadgePill.styles.js.map

package/dist/BadgePill/BadgePill.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgePill.styles.js","names":["styled","getTypographyIntent","colors","StyledBadgeContainer","div","withConfig","displayName","componentId","StyledBadgeContent","_ref","$overlapping","_ref$$xOffset","$xOffset","_ref$$yOffset","$yOffset","concat","props","$hidden","StyledBadgeDotIndicator","orange50","oneDigitStyles","multiDigitStyles","StyledBadgeCounter","white","$oneDigit"],"sources":["../../src/BadgePill/BadgePill.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\n\nexport const StyledBadgeContainer = styled.div`\n  display: inline-flex;\n  position: relative;\n`\n\nexport const StyledBadgeContent = styled.div<{\n  $overlapping: boolean\n  $hidden?: boolean\n  $xOffset?: number\n  $yOffset?: number\n}>`\n  position: relative;\n  ${({ $overlapping, $xOffset = 0, $yOffset = 0 }) =>\n    $overlapping &&\n    `\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    transform: translate(\n      calc(50% + ${$xOffset}px),\n      calc(-50% + ${$yOffset * -1}px)\n    );\n  `}\n  ${(props) => (props.$hidden ? 'visibility: hidden;' : '')}\n  pointer-events: none;\n  user-select: none;\n`\n\nexport const StyledBadgeDotIndicator = styled.div`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ${colors.orange50};\n`\n\nconst oneDigitStyles = `\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n`\n\nconst multiDigitStyles = `\n  border-radius: 10px;\n  padding: 2px 8px;\n`\n\nexport const StyledBadgeCounter = styled.div<{ $oneDigit?: boolean }>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: ${colors.white};\n  background-color: ${colors.orange50};\n  ${getTypographyIntent('small')}\n  ${(props) => (props.$oneDigit ? oneDigitStyles : multiDigitStyles)}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAO,IAAMC,oBAAoB,gBAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8CAG7C;AAED,OAAO,IAAMC,kBAAkB,gBAAGR,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0EAOxC,UAAAE,IAAA;EAAA,IAAGC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IAAAC,aAAA,GAAAF,IAAA,CAAEG,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,CAAC,GAAAA,aAAA;IAAAE,aAAA,GAAAJ,IAAA,CAAEK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,CAAC,GAAAA,aAAA;EAAA,OAC3CH,YAAY,2HAAAK,MAAA,CAOGH,QAAQ,8BAAAG,MAAA,CACPD,QAAQ,GAAG,CAAC,CAAC,oBAE9B;AAAA,GACC,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,OAAO,GAAG,qBAAqB,GAAG,EAAE;AAAA,CAAC,CAG1D;AAED,OAAO,IAAMC,uBAAuB,gBAAGlB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sEAI3BL,MAAM,CAACiB,QAAQ,CACpC;AAED,IAAMC,cAAc,4FAKnB;AAED,IAAMC,gBAAgB,oDAGrB;AAED,OAAO,IAAMC,kBAAkB,gBAAGtB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iHAIjCL,MAAM,CAACqB,KAAK,EACDrB,MAAM,CAACiB,QAAQ,EACjClB,mBAAmB,CAAC,OAAO,CAAC,EAC5B,UAACe,KAAK;EAAA,OAAMA,KAAK,CAACQ,SAAS,GAAGJ,cAAc,GAAGC,gBAAgB;AAAA,CAAC,CACnE"}

package/dist/BadgePill/BadgePill.types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+declare type BadgePillBaseProps = {
+    /**
+     * Hide the badge conditionally
+     * @since 12.22.0
+     */
+    hidden?: boolean;
+};
+declare type BadgePillDotIndicatorProps = {
+    /**
+     * Renders a small dot indicator
+     * @since 12.22.0
+     */
+    dotIndicator: true;
+    value?: undefined;
+};
+declare type BadgePillCounterProps = {
+    dotIndicator?: undefined;
+    /**
+     * Renders a numeric counter value
+     * @since 12.22.0
+     */
+    value: number;
+};
+declare type BadgePillVariantProps = BadgePillDotIndicatorProps | BadgePillCounterProps;
+declare type BadgePillInlineProps = {
+    children?: undefined;
+    xOffset?: undefined;
+    yOffset?: undefined;
+};
+declare type BadgePillOverlappingProps = {
+    /**
+     * The content that the badge will overlap
+     * @since 12.22.0
+     */
+    children: ReactNode;
+    /**
+     * Horizontal offset of the badge in pixels
+     * @since 12.22.0
+     */
+    xOffset?: number;
+    /**
+     * Vertical offset of the badge in pixels
+     * @since 12.22.0
+     */
+    yOffset?: number;
+};
+declare type BadgePillPositionProps = BadgePillInlineProps | BadgePillOverlappingProps;
+export declare type BadgePillProps = BadgePillBaseProps & BadgePillPositionProps & BadgePillVariantProps;
+export {};

package/dist/BadgePill/BadgePill.types.js

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

package/dist/BadgePill/BadgePill.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgePill.types.js","names":[],"sources":["../../src/BadgePill/BadgePill.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\ntype BadgePillBaseProps = {\n  /**\n   * Hide the badge conditionally\n   * @since 12.22.0\n   */\n  hidden?: boolean\n}\n\ntype BadgePillDotIndicatorProps = {\n  /**\n   * Renders a small dot indicator\n   * @since 12.22.0\n   */\n  dotIndicator: true\n  value?: undefined\n}\n\ntype BadgePillCounterProps = {\n  dotIndicator?: undefined\n  /**\n   * Renders a numeric counter value\n   * @since 12.22.0\n   */\n  value: number\n}\n\ntype BadgePillVariantProps = BadgePillDotIndicatorProps | BadgePillCounterProps\n\ntype BadgePillInlineProps = {\n  children?: undefined\n  xOffset?: undefined\n  yOffset?: undefined\n}\n\ntype BadgePillOverlappingProps = {\n  /**\n   * The content that the badge will overlap\n   * @since 12.22.0\n   */\n  children: ReactNode\n  /**\n   * Horizontal offset of the badge in pixels\n   * @since 12.22.0\n   */\n  xOffset?: number\n  /**\n   * Vertical offset of the badge in pixels\n   * @since 12.22.0\n   */\n  yOffset?: number\n}\n\ntype BadgePillPositionProps = BadgePillInlineProps | BadgePillOverlappingProps\n\nexport type BadgePillProps = BadgePillBaseProps &\n  BadgePillPositionProps &\n  BadgePillVariantProps\n"],"mappings":""}

package/dist/BadgePill/index.d.ts

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

package/dist/BadgePill/index.js

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

package/dist/BadgePill/index.js.map

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

package/dist/Banner/Banner.js

@@ -68,7 +68,7 @@ var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   return /*#__PURE__*/React.createElement(StyledBannerContainer, _extends({
     ref: ref,
     $isExpandable: isExpandable,
-    variant: variant
+    $variant: variant
   }, props), isExpandable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledExpandableContentContainer, {
     justifyContent: "space-between",
     alignItems: "center",

package/dist/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["Clear","EllipsisVertical","Error","Info","Warning","partition","React","Button","Card","Flex","Menu","useMenu","OverlayTrigger","useI18nContext","OverflowObserver","addSubcomponents","mergeRefs","StyledAction","StyledActionsTrigger","StyledBannerContainer","StyledBody","StyledContent","StyledExpandableContent","StyledExpandableContentContainer","StyledIconContainer","StyledMiniBannerContainer","StyledTitle","defaultIcons","error","createElement","size","attention","info","UNSAFE_attention_emphasized","Banner_","forwardRef","Banner","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","_ref2","element","isValidElement","type","ExpandableContent","Children","toArray","_ref3","_slicedToArray","expandableContentNodes","content","isExpandable","length","iconElement","useMemo","find","child","Icon","hasCustomIcon","icon","_extends","$isExpandable","Fragment","justifyContent","alignItems","gap","grow","Content","_ref4","_excluded2","_ref5","_ref5$expanded","expanded","_ref5$expandableConte","expandableContentMaxHeight","_excluded3","containerRef","useRef","_ref6","overflowRef","isOverflowingY","onAnimationEnd","current","$isOverflowingY","$expandableContentMaxHeight","tabIndex","Title","_ref7","_excluded4","Body","_ref8","_excluded5","Action","_ref9","_excluded6","DropdownAction","_ref0","_excluded7","Item","item","Actions","_ref1","_excluded8","actionButtons","filter","overlay","node","focus","usingHook","isSelectable","_ref10","Options","map","_ref11","idx","actionButtonProps","key","placement","arrow","_ref12","_excluded9","Dismiss","_ref13","_excluded0","I18n","t","ErrorBanner","_ref14","_excluded1","InfoBanner","_ref15","_excluded10","AttentionBanner","_ref16","_excluded11","ActionBanner","UNSAFE_MiniBanner","MiniBanner","_ref17","_ref17$variant","_excluded12","displayName"],"sources":["../../src/Banner/Banner.tsx"],"sourcesContent":["import {\n  Clear,\n  EllipsisVertical,\n  Error,\n  Info,\n  Warning,\n} from '@procore/core-icons/dist'\nimport { partition } from 'ramda'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { Flex } from '../Flex'\nimport { Menu, useMenu } from '../Menu/Menu'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport type { ButtonAttributes, DivAttributes, Props } from '../_utils/types'\nimport {\n  StyledAction,\n  StyledActionsTrigger,\n  StyledBannerContainer,\n  StyledBody,\n  StyledContent,\n  StyledExpandableContent,\n  StyledExpandableContentContainer,\n  StyledIconContainer,\n  StyledMiniBannerContainer,\n  StyledTitle,\n} from './Banner.styles'\nimport type {\n  BannerExpandableContentProps,\n  BannerIconProps,\n  BannerProps,\n  BannerVariant,\n} from './Banner.types'\n\nconst defaultIcons: Record<BannerVariant, React.ReactNode> = {\n  error: <Error size=\"lg\" />,\n  attention: <Warning size=\"lg\" />,\n  info: <Info size=\"lg\" />,\n  UNSAFE_attention_emphasized: <Warning size=\"lg\" />,\n}\n\nconst Banner_ = React.forwardRef<HTMLDivElement, DivAttributes & BannerProps>(\n  function Banner({ children, variant, ...props }, ref) {\n    const [expandableContentNodes, content] = partition(\n      (element: React.ReactNode) =>\n        React.isValidElement(element) && element.type === ExpandableContent,\n      React.Children.toArray(children)\n    ) as [React.ReactElement[], React.ReactElement[]]\n    const isExpandable = expandableContentNodes.length !== 0\n\n    const iconElement = React.useMemo(() => {\n      return React.Children.toArray(children).find(\n        (child) => React.isValidElement(child) && child.type === Icon\n      ) as React.ReactElement<BannerIconProps> | undefined\n    }, [children])\n\n    const hasCustomIcon = iconElement && iconElement.props.icon\n\n    return (\n      <StyledBannerContainer\n        ref={ref}\n        $isExpandable={isExpandable}\n        variant={variant}\n        {...props}\n      >\n        {isExpandable ? (\n          <>\n            <StyledExpandableContentContainer\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              gap=\"lg\"\n            >\n              {!hasCustomIcon && <Icon icon={defaultIcons[variant]} />}\n              {content}\n            </StyledExpandableContentContainer>\n            {expandableContentNodes}\n          </>\n        ) : (\n          <Flex\n            justifyContent=\"flex-start\"\n            alignItems=\"center\"\n            gap=\"lg\"\n            grow=\"1\"\n          >\n            {!hasCustomIcon && <Icon icon={defaultIcons[variant]} />}\n            {content}\n          </Flex>\n        )}\n      </StyledBannerContainer>\n    )\n  }\n)\n\nconst Content = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Content({ children, ...props }, ref) {\n    return (\n      <StyledContent {...props} ref={ref}>\n        {children}\n      </StyledContent>\n    )\n  }\n)\n\nconst ExpandableContent = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & BannerExpandableContentProps\n>(function ExpandableContent(\n  { children, expanded = false, expandableContentMaxHeight = 120, ...props },\n  ref\n) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  return expanded ? (\n    <OverflowObserver>\n      {({ ref: overflowRef, isOverflowingY }) => (\n        <StyledExpandableContent\n          ref={mergeRefs(ref, containerRef)}\n          data-qa=\"core-banner-expandable-content\"\n          onAnimationEnd={() => overflowRef(containerRef.current)}\n          $isOverflowingY={isOverflowingY}\n          $expandableContentMaxHeight={expandableContentMaxHeight}\n          {...props}\n          {...(isOverflowingY && { tabIndex: 0 })}\n        >\n          {children}\n        </StyledExpandableContent>\n      )}\n    </OverflowObserver>\n  ) : null\n})\n\nconst Title = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Title({ children, ...props }, ref) {\n    return (\n      <StyledTitle {...props} ref={ref}>\n        {children}\n      </StyledTitle>\n    )\n  }\n)\n\nconst Body = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Body({ children, ...props }, ref) {\n    return (\n      <StyledBody {...props} ref={ref}>\n        {children}\n      </StyledBody>\n    )\n  }\n)\n\nconst Action = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Action({ children, ...props }, ref) {\n    return (\n      <StyledAction {...props} ref={ref}>\n        {children}\n      </StyledAction>\n    )\n  }\n)\n\nconst DropdownAction = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function DropdownAction({ children, ...props }, ref) {\n    return (\n      <Menu.Item ref={ref} item={null} {...(props as any)}>\n        {children}\n      </Menu.Item>\n    )\n  }\n)\n\nconst Actions = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(\n  function Actions({ children, ...props }, ref) {\n    const actionButtons = React.Children.toArray(children).filter(\n      (element: React.ReactNode) =>\n        React.isValidElement(element) && element.type === Action\n    ) as React.ReactElement[]\n\n    return (\n      <OverlayTrigger\n        overlay={\n          <Card>\n            <Menu\n              ref={(node) => node?.focus()}\n              usingHook={useMenu({\n                isSelectable: ({ type }) => type === DropdownAction,\n              })}\n            >\n              <Menu.Options>\n                {actionButtons.map(({ props: actionButtonProps }, idx) => (\n                  <DropdownAction key={idx} {...actionButtonProps} />\n                ))}\n              </Menu.Options>\n            </Menu>\n          </Card>\n        }\n        ref={ref}\n        placement=\"bottom-right\"\n      >\n        <StyledActionsTrigger\n          data-qa=\"core-banner-actions-trigger\"\n          variant=\"tertiary\"\n          arrow={false}\n          icon={<EllipsisVertical />}\n          {...props}\n        />\n      </OverlayTrigger>\n    )\n  }\n)\n\nconst Icon = React.forwardRef<HTMLDivElement, DivAttributes & BannerIconProps>(\n  function Icon({ children, icon, ...props }, ref) {\n    return (\n      <StyledIconContainer ref={ref} aria-hidden=\"true\" {...props}>\n        {icon}\n      </StyledIconContainer>\n    )\n  }\n)\n\nconst Dismiss = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(\n  function Dismiss({ children, ...props }, ref) {\n    const I18n = useI18nContext()\n\n    return (\n      <Button\n        aria-label={I18n.t('core.banner.dismissAlert')}\n        ref={ref}\n        {...props}\n        icon={<Clear />}\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nexport const ErrorBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function ErrorBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"error\" {...props}>\n      <Icon icon={<Error size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n\nexport const InfoBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function InfoBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"info\" {...props}>\n      <Icon icon={<Info size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n\n/**\n * @since 11.26.0\n */\nexport const AttentionBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function AttentionBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"attention\" {...props}>\n      <Icon icon={<Warning size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n/**\n * @deprecated ActionBanner was renamed to AttentionBanner.\n * @deprecatedSince 11.26.0\n */\nexport const ActionBanner = AttentionBanner\n\nexport const UNSAFE_MiniBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props & { variant?: BannerVariant }\n>(function MiniBanner({ children, variant = 'info', ...props }, ref) {\n  return (\n    <StyledMiniBannerContainer ref={ref} variant={variant} {...props}>\n      {children}\n    </StyledMiniBannerContainer>\n  )\n})\n\nBanner_.displayName = 'Banner'\n\nBody.displayName = 'Banner.Body'\n\nContent.displayName = 'Banner.Content'\n\nExpandableContent.displayName = 'Banner.ExpandableContent'\n\nTitle.displayName = 'Banner.Title'\n\nAction.displayName = 'Banner.Action'\n\nActions.displayName = 'Banner.Actions'\n\nDropdownAction.displayName = 'Banner.DropdownAction'\n\nIcon.displayName = 'Banner.Icon'\n\nDismiss.displayName = 'Banner.Dismiss'\n\nErrorBanner.displayName = 'ErrorBanner'\n\nInfoBanner.displayName = 'InfoBanner'\n\nAttentionBanner.displayName = 'AttentionBanner'\n\nActionBanner.displayName = 'ActionBanner'\n\nUNSAFE_MiniBanner.displayName = 'MiniBanner'\n\n/**\n\n\n We use banners to contextually convey complicated or supplemental information\n to a user. Depending on the type of banner, we can provide more information\n about a feature or page the user is on, an action the user needs to perform,\n or an error the user has encountered.\n\n Procore banners are informative and actionable. Always explain what the user\n needs to know (and in some cases, why they’re seeing the banner), and provide\n an actionable next step.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-banner--demo)\n\n @see [Design Guidelines](https://design.procore.com/banner)\n\n */\nexport const Banner = addSubcomponents(\n  {\n    Body,\n    Content,\n    ExpandableContent,\n    Title,\n    Action,\n    Actions,\n    Icon,\n    Dismiss,\n  },\n  Banner_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["Clear","EllipsisVertical","Error","Info","Warning","partition","React","Button","Card","Flex","Menu","useMenu","OverlayTrigger","useI18nContext","OverflowObserver","addSubcomponents","mergeRefs","StyledAction","StyledActionsTrigger","StyledBannerContainer","StyledBody","StyledContent","StyledExpandableContent","StyledExpandableContentContainer","StyledIconContainer","StyledMiniBannerContainer","StyledTitle","defaultIcons","error","createElement","size","attention","info","UNSAFE_attention_emphasized","Banner_","forwardRef","Banner","_ref","ref","children","variant","props","_objectWithoutProperties","_excluded","_ref2","element","isValidElement","type","ExpandableContent","Children","toArray","_ref3","_slicedToArray","expandableContentNodes","content","isExpandable","length","iconElement","useMemo","find","child","Icon","hasCustomIcon","icon","_extends","$isExpandable","$variant","Fragment","justifyContent","alignItems","gap","grow","Content","_ref4","_excluded2","_ref5","_ref5$expanded","expanded","_ref5$expandableConte","expandableContentMaxHeight","_excluded3","containerRef","useRef","_ref6","overflowRef","isOverflowingY","onAnimationEnd","current","$isOverflowingY","$expandableContentMaxHeight","tabIndex","Title","_ref7","_excluded4","Body","_ref8","_excluded5","Action","_ref9","_excluded6","DropdownAction","_ref0","_excluded7","Item","item","Actions","_ref1","_excluded8","actionButtons","filter","overlay","node","focus","usingHook","isSelectable","_ref10","Options","map","_ref11","idx","actionButtonProps","key","placement","arrow","_ref12","_excluded9","Dismiss","_ref13","_excluded0","I18n","t","ErrorBanner","_ref14","_excluded1","InfoBanner","_ref15","_excluded10","AttentionBanner","_ref16","_excluded11","ActionBanner","UNSAFE_MiniBanner","MiniBanner","_ref17","_ref17$variant","_excluded12","displayName"],"sources":["../../src/Banner/Banner.tsx"],"sourcesContent":["import {\n  Clear,\n  EllipsisVertical,\n  Error,\n  Info,\n  Warning,\n} from '@procore/core-icons/dist'\nimport { partition } from 'ramda'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { Flex } from '../Flex'\nimport { Menu, useMenu } from '../Menu/Menu'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport type { ButtonAttributes, DivAttributes, Props } from '../_utils/types'\nimport {\n  StyledAction,\n  StyledActionsTrigger,\n  StyledBannerContainer,\n  StyledBody,\n  StyledContent,\n  StyledExpandableContent,\n  StyledExpandableContentContainer,\n  StyledIconContainer,\n  StyledMiniBannerContainer,\n  StyledTitle,\n} from './Banner.styles'\nimport type {\n  BannerExpandableContentProps,\n  BannerIconProps,\n  BannerProps,\n  BannerVariant,\n} from './Banner.types'\n\nconst defaultIcons: Record<BannerVariant, React.ReactNode> = {\n  error: <Error size=\"lg\" />,\n  attention: <Warning size=\"lg\" />,\n  info: <Info size=\"lg\" />,\n  UNSAFE_attention_emphasized: <Warning size=\"lg\" />,\n}\n\nconst Banner_ = React.forwardRef<HTMLDivElement, DivAttributes & BannerProps>(\n  function Banner({ children, variant, ...props }, ref) {\n    const [expandableContentNodes, content] = partition(\n      (element: React.ReactNode) =>\n        React.isValidElement(element) && element.type === ExpandableContent,\n      React.Children.toArray(children)\n    ) as [React.ReactElement[], React.ReactElement[]]\n    const isExpandable = expandableContentNodes.length !== 0\n\n    const iconElement = React.useMemo(() => {\n      return React.Children.toArray(children).find(\n        (child) => React.isValidElement(child) && child.type === Icon\n      ) as React.ReactElement<BannerIconProps> | undefined\n    }, [children])\n\n    const hasCustomIcon = iconElement && iconElement.props.icon\n\n    return (\n      <StyledBannerContainer\n        ref={ref}\n        $isExpandable={isExpandable}\n        $variant={variant}\n        {...props}\n      >\n        {isExpandable ? (\n          <>\n            <StyledExpandableContentContainer\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              gap=\"lg\"\n            >\n              {!hasCustomIcon && <Icon icon={defaultIcons[variant]} />}\n              {content}\n            </StyledExpandableContentContainer>\n            {expandableContentNodes}\n          </>\n        ) : (\n          <Flex\n            justifyContent=\"flex-start\"\n            alignItems=\"center\"\n            gap=\"lg\"\n            grow=\"1\"\n          >\n            {!hasCustomIcon && <Icon icon={defaultIcons[variant]} />}\n            {content}\n          </Flex>\n        )}\n      </StyledBannerContainer>\n    )\n  }\n)\n\nconst Content = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Content({ children, ...props }, ref) {\n    return (\n      <StyledContent {...props} ref={ref}>\n        {children}\n      </StyledContent>\n    )\n  }\n)\n\nconst ExpandableContent = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & BannerExpandableContentProps\n>(function ExpandableContent(\n  { children, expanded = false, expandableContentMaxHeight = 120, ...props },\n  ref\n) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  return expanded ? (\n    <OverflowObserver>\n      {({ ref: overflowRef, isOverflowingY }) => (\n        <StyledExpandableContent\n          ref={mergeRefs(ref, containerRef)}\n          data-qa=\"core-banner-expandable-content\"\n          onAnimationEnd={() => overflowRef(containerRef.current)}\n          $isOverflowingY={isOverflowingY}\n          $expandableContentMaxHeight={expandableContentMaxHeight}\n          {...props}\n          {...(isOverflowingY && { tabIndex: 0 })}\n        >\n          {children}\n        </StyledExpandableContent>\n      )}\n    </OverflowObserver>\n  ) : null\n})\n\nconst Title = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Title({ children, ...props }, ref) {\n    return (\n      <StyledTitle {...props} ref={ref}>\n        {children}\n      </StyledTitle>\n    )\n  }\n)\n\nconst Body = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Body({ children, ...props }, ref) {\n    return (\n      <StyledBody {...props} ref={ref}>\n        {children}\n      </StyledBody>\n    )\n  }\n)\n\nconst Action = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function Action({ children, ...props }, ref) {\n    return (\n      <StyledAction {...props} ref={ref}>\n        {children}\n      </StyledAction>\n    )\n  }\n)\n\nconst DropdownAction = React.forwardRef<HTMLDivElement, DivAttributes & Props>(\n  function DropdownAction({ children, ...props }, ref) {\n    return (\n      <Menu.Item ref={ref} item={null} {...(props as any)}>\n        {children}\n      </Menu.Item>\n    )\n  }\n)\n\nconst Actions = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(\n  function Actions({ children, ...props }, ref) {\n    const actionButtons = React.Children.toArray(children).filter(\n      (element: React.ReactNode) =>\n        React.isValidElement(element) && element.type === Action\n    ) as React.ReactElement[]\n\n    return (\n      <OverlayTrigger\n        overlay={\n          <Card>\n            <Menu\n              ref={(node) => node?.focus()}\n              usingHook={useMenu({\n                isSelectable: ({ type }) => type === DropdownAction,\n              })}\n            >\n              <Menu.Options>\n                {actionButtons.map(({ props: actionButtonProps }, idx) => (\n                  <DropdownAction key={idx} {...actionButtonProps} />\n                ))}\n              </Menu.Options>\n            </Menu>\n          </Card>\n        }\n        ref={ref}\n        placement=\"bottom-right\"\n      >\n        <StyledActionsTrigger\n          data-qa=\"core-banner-actions-trigger\"\n          variant=\"tertiary\"\n          arrow={false}\n          icon={<EllipsisVertical />}\n          {...props}\n        />\n      </OverlayTrigger>\n    )\n  }\n)\n\nconst Icon = React.forwardRef<HTMLDivElement, DivAttributes & BannerIconProps>(\n  function Icon({ children, icon, ...props }, ref) {\n    return (\n      <StyledIconContainer ref={ref} aria-hidden=\"true\" {...props}>\n        {icon}\n      </StyledIconContainer>\n    )\n  }\n)\n\nconst Dismiss = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(\n  function Dismiss({ children, ...props }, ref) {\n    const I18n = useI18nContext()\n\n    return (\n      <Button\n        aria-label={I18n.t('core.banner.dismissAlert')}\n        ref={ref}\n        {...props}\n        icon={<Clear />}\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nexport const ErrorBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function ErrorBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"error\" {...props}>\n      <Icon icon={<Error size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n\nexport const InfoBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function InfoBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"info\" {...props}>\n      <Icon icon={<Info size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n\n/**\n * @since 11.26.0\n */\nexport const AttentionBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props\n>(function AttentionBanner({ children, ...props }, ref) {\n  return (\n    <Banner ref={ref} variant=\"attention\" {...props}>\n      <Icon icon={<Warning size=\"lg\" />} />\n      {children}\n    </Banner>\n  )\n})\n/**\n * @deprecated ActionBanner was renamed to AttentionBanner.\n * @deprecatedSince 11.26.0\n */\nexport const ActionBanner = AttentionBanner\n\nexport const UNSAFE_MiniBanner = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & Props & { variant?: BannerVariant }\n>(function MiniBanner({ children, variant = 'info', ...props }, ref) {\n  return (\n    <StyledMiniBannerContainer ref={ref} variant={variant} {...props}>\n      {children}\n    </StyledMiniBannerContainer>\n  )\n})\n\nBanner_.displayName = 'Banner'\n\nBody.displayName = 'Banner.Body'\n\nContent.displayName = 'Banner.Content'\n\nExpandableContent.displayName = 'Banner.ExpandableContent'\n\nTitle.displayName = 'Banner.Title'\n\nAction.displayName = 'Banner.Action'\n\nActions.displayName = 'Banner.Actions'\n\nDropdownAction.displayName = 'Banner.DropdownAction'\n\nIcon.displayName = 'Banner.Icon'\n\nDismiss.displayName = 'Banner.Dismiss'\n\nErrorBanner.displayName = 'ErrorBanner'\n\nInfoBanner.displayName = 'InfoBanner'\n\nAttentionBanner.displayName = 'AttentionBanner'\n\nActionBanner.displayName = 'ActionBanner'\n\nUNSAFE_MiniBanner.displayName = 'MiniBanner'\n\n/**\n\n\n We use banners to contextually convey complicated or supplemental information\n to a user. Depending on the type of banner, we can provide more information\n about a feature or page the user is on, an action the user needs to perform,\n or an error the user has encountered.\n\n Procore banners are informative and actionable. Always explain what the user\n needs to know (and in some cases, why they’re seeing the banner), and provide\n an actionable next step.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-banner--demo)\n\n @see [Design Guidelines](https://design.procore.com/banner)\n\n */\nexport const Banner = addSubcomponents(\n  {\n    Body,\n    Content,\n    ExpandableContent,\n    Title,\n    Action,\n    Actions,\n    Icon,\n    Dismiss,\n  },\n  Banner_\n)\n"],"mappings":"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"}

package/dist/Banner/Banner.styles.d.ts

@@ -1,20 +1,29 @@
 /// <reference types="react" />
 import type { FlexProps } from '../Flex';
 import type { BannerProps, BannerVariant } from './Banner.types';
-export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", any, {
+declare type StyledBannerContainerProps = {
     $isExpandable: boolean;
-} & BannerProps, never>;
-export declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExpandableContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledExpandableContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, FlexProps & {
+    $variant: BannerProps['variant'];
+} & Omit<BannerProps, 'variant'>;
+export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBannerContainerProps>> & string;
+export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledExpandableContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledExpandableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, FlexProps & {
     $isOverflowingY: boolean;
     $expandableContentMaxHeight: number;
-}, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledActionsTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Dropdown/Dropdown.types").DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledMiniBannerContainer: import("styled-components").StyledComponent<"div", any, {
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & FlexProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledActionsTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Dropdown/Dropdown.types").DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Dropdown/Dropdown.types").DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledMiniBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     variant: BannerVariant;
-}, never>;
+}>> & string;
+export {};

package/dist/Banner/Banner.styles.js

@@ -39,10 +39,10 @@ var expandContent = function expandContent(maxHeight) {
 };
 export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBannerContainer",
-  componentId: "core-12_21_2__sc-149wm7c-0"
+  componentId: "core-12_23_0__sc-149wm7c-0"
 })(["align-items:center;border-left:", "px solid;border-radius:", "px;color:", ";display:flex;justify-content:space-between;min-height:52px;padding:0 ", "px;", " ", " ", ""], bannerLeft, borderRadius.md, colors.gray15, spacing.lg, bannerShadow, function (_ref) {
-  var variant = _ref.variant;
-  var _bannerVariantColors$ = bannerVariantColors[variant],
+  var $variant = _ref.$variant;
+  var _bannerVariantColors$ = bannerVariantColors[$variant],
     primary = _bannerVariantColors$.primary,
     secondary = _bannerVariantColors$.secondary;
   return css(["border-left-color:", ";background-color:", ";& ", "{color:", ";}"], primary, secondary, StyledIconContainer, primary);
@@ -52,15 +52,15 @@ export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_21_2__sc-149wm7c-1"
+  componentId: "core-12_23_0__sc-149wm7c-1"
 })(["align-self:center;margin:", "px ", "px ", "px 0;width:100%;"], spacing.sm, spacing.lg, spacing.sm);
 export var StyledExpandableContentContainer = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContentContainer",
-  componentId: "core-12_21_2__sc-149wm7c-2"
+  componentId: "core-12_23_0__sc-149wm7c-2"
 })(["color:", ";min-height:52px;padding:0 ", "px;position:relative;z-index:1;", ""], colors.gray15, spacing.lg, bannerShadow);
 export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContent",
-  componentId: "core-12_21_2__sc-149wm7c-3"
+  componentId: "core-12_23_0__sc-149wm7c-3"
 })(["animation-duration:450ms;animation-fill-mode:forwards;animation-timing-function:ease-out;background-color:", ";box-sizing:border-box;font-size:14px;font-weight:500;letter-spacing:0.25px;line-height:20px;overflow-y:auto;padding:0 ", "px;position:relative;z-index:0;", " ", ""], colors.white, spacing.xl * 2 + spacing.sm, function (_ref3) {
   var $isOverflowingY = _ref3.$isOverflowingY;
   return $isOverflowingY && focusable;
@@ -70,23 +70,23 @@ export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
 });
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_21_2__sc-149wm7c-4"
+  componentId: "core-12_23_0__sc-149wm7c-4"
 })(["", " color:", ";font-weight:", ";"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_21_2__sc-149wm7c-5"
+  componentId: "core-12_23_0__sc-149wm7c-5"
 })(["", " color:", ";"], getTypographyIntent('body'), colors.gray15);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_21_2__sc-149wm7c-6"
+  componentId: "core-12_23_0__sc-149wm7c-6"
 })(["flex:0 0 auto;margin:", "px 0;"], spacing.lg);
 export var StyledActionsTrigger = /*#__PURE__*/styled(DropdownButton).withConfig({
   displayName: "StyledActionsTrigger",
-  componentId: "core-12_21_2__sc-149wm7c-7"
+  componentId: "core-12_23_0__sc-149wm7c-7"
 })(["flex-shrink:0;& + ", ",& + ", "{margin-left:-", "px;}"], StyledButton, StyledLinkButton, spacing.sm);
 export var StyledAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAction",
-  componentId: "core-12_21_2__sc-149wm7c-8"
+  componentId: "core-12_23_0__sc-149wm7c-8"
 })(["margin:", "px 0 ", "px -", "px;& + ", ",& + ", ",& + ", "{margin-left:-", "px;}", ",", "{background:rgba(0,0,0,0.05);color:", ";&:hover{background:", ";color:", ";}}"], spacing.sm, spacing.sm, spacing.sm, StyledButton, StyledLinkButton, StyledActionsTrigger, spacing.sm, StyledButton, StyledLinkButton, colors.gray15, colors.gray85, colors.gray15);
 function getMiniBannerIconColor(_ref5) {
   var variant = _ref5.variant;
@@ -94,6 +94,6 @@ function getMiniBannerIconColor(_ref5) {
 }
 export var StyledMiniBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMiniBannerContainer",
-  componentId: "core-12_21_2__sc-149wm7c-9"
+  componentId: "core-12_23_0__sc-149wm7c-9"
 })(["align-items:center;background-color:", ";display:flex;justify-content:space-between;padding:0 ", "px;", " ", " & ", "{margin:", "px;}"], colors.gray96, spacing.md, getTypographyIntent('small'), getMiniBannerIconColor, StyledContent, spacing.sm);
 //# sourceMappingURL=Banner.styles.js.map

package/dist/Banner/Banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.styles.js","names":["styled","css","keyframes","StyledButton","StyledLinkButton","DropdownButton","Flex","getTypographyIntent","typographyWeights","borderRadius","colors","focusable","getShadow","spacing","bannerLeft","bannerVariantColors","attention","primary","yellow40","secondary","yellow94","error","red50","red98","info","blue50","blue96","UNSAFE_attention_emphasized","orange50","orange98","miniBannerVariantColors","yellow50","green50","bannerShadow","expandContent","maxHeight","sm","StyledBannerContainer","div","withConfig","displayName","componentId","md","gray15","lg","_ref","variant","_bannerVariantColors$","StyledIconContainer","_ref2","$isExpandable","StyledContent","StyledExpandableContentContainer","StyledExpandableContent","white","xl","_ref3","$isOverflowingY","_ref4","$expandableContentMaxHeight","StyledTitle","semibold","StyledBody","StyledActionsTrigger","StyledAction","gray85","getMiniBannerIconColor","_ref5","StyledMiniBannerContainer","gray96"],"sources":["../../src/Banner/Banner.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledButton, StyledLinkButton } from '../Button/Button.styles'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport type { FlexProps } from '../Flex'\nimport { Flex } from '../Flex'\nimport { getTypographyIntent, typographyWeights } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { focusable } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { BannerProps, BannerVariant } from './Banner.types'\n\nconst bannerLeft = 8\n\nconst bannerVariantColors = {\n  attention: {\n    primary: colors.yellow40,\n    secondary: colors.yellow94,\n  },\n  error: {\n    primary: colors.red50,\n    secondary: colors.red98,\n  },\n  info: {\n    primary: colors.blue50,\n    secondary: colors.blue96,\n  },\n  UNSAFE_attention_emphasized: {\n    primary: colors.orange50,\n    secondary: colors.orange98,\n  },\n} as const\n\nconst miniBannerVariantColors = {\n  attention: colors.yellow50,\n  error: colors.red50,\n  info: colors.blue50,\n  UNSAFE_attention_emphasized: colors.green50,\n}\n\nconst bannerShadow = getShadow(1, 'bottom')\n\nconst expandContent = (maxHeight: number) => keyframes`\n  from {\n    padding-top: 0;\n    padding-bottom: 0;\n    max-height: 0;\n    min-height: 0;\n    overflow-y: hidden;\n  }\n  to {\n    padding-top: ${spacing.sm}px;\n    padding-bottom: ${spacing.sm}px;\n    min-height: 32px;\n    max-height: ${maxHeight}px;\n    overflow-y: auto;\n  }\n`\n\nexport const StyledBannerContainer = styled.div<\n  { $isExpandable: boolean } & BannerProps\n>`\n  align-items: center;\n  border-left: ${bannerLeft}px solid;\n  border-radius: ${borderRadius.md}px;\n  color: ${colors.gray15};\n  display: flex;\n  justify-content: space-between;\n  min-height: 52px;\n  padding: 0 ${spacing.lg}px;\n\n  ${bannerShadow}\n\n  ${({ variant }) => {\n    const { primary, secondary } = bannerVariantColors[variant]\n\n    return css`\n      border-left-color: ${primary};\n      background-color: ${secondary};\n\n      & ${StyledIconContainer} {\n        color: ${primary};\n      }\n    `\n  }}\n\n  ${({ $isExpandable }) =>\n    $isExpandable &&\n    css`\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n    `}\n`\n\nexport const StyledContent = styled.div`\n  align-self: center;\n  margin: ${spacing.sm}px ${spacing.lg}px ${spacing.sm}px 0;\n  width: 100%;\n`\n\nexport const StyledExpandableContentContainer = styled(Flex)`\n  color: ${colors.gray15};\n  min-height: 52px;\n  padding: 0 ${spacing.lg}px;\n  position: relative;\n  z-index: 1;\n\n  ${bannerShadow}\n`\n\nexport const StyledExpandableContent = styled(Flex)<\n  FlexProps & { $isOverflowingY: boolean; $expandableContentMaxHeight: number }\n>`\n  animation-duration: 450ms;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-out;\n  background-color: ${colors.white};\n  box-sizing: border-box;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.25px;\n  line-height: 20px;\n  overflow-y: auto;\n  padding: 0 ${spacing.xl * 2 + spacing.sm}px;\n  position: relative;\n  z-index: 0;\n\n  ${({ $isOverflowingY }) => $isOverflowingY && focusable}\n  ${({ $expandableContentMaxHeight }) =>\n    css`\n      animation-name: ${expandContent($expandableContentMaxHeight)};\n    `}\n`\n\nexport const StyledTitle = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray15};\n  font-weight: ${typographyWeights.semibold};\n`\n\nexport const StyledBody = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray15};\n`\n\nexport const StyledIconContainer = styled.div`\n  flex: 0 0 auto;\n  margin: ${spacing.lg}px 0;\n`\n\nexport const StyledActionsTrigger = styled(DropdownButton)`\n  flex-shrink: 0;\n\n  & + ${StyledButton}, & + ${StyledLinkButton} {\n    margin-left: -${spacing.sm}px;\n  }\n`\n\nexport const StyledAction = styled.div`\n  margin: ${spacing.sm}px 0 ${spacing.sm}px -${spacing.sm}px;\n\n  & + ${StyledButton}, & + ${StyledLinkButton}, & + ${StyledActionsTrigger} {\n    margin-left: -${spacing.sm}px;\n  }\n\n  ${StyledButton}, ${StyledLinkButton} {\n    background: rgba(0, 0, 0, 0.05);\n    color: ${colors.gray15};\n\n    &:hover {\n      background: ${colors.gray85};\n      color: ${colors.gray15};\n    }\n  }\n`\n\nfunction getMiniBannerIconColor({ variant }: { variant: BannerVariant }) {\n  return css`\n    & ${StyledIconContainer} {\n      color: ${miniBannerVariantColors[variant]};\n    }\n  `\n}\n\nexport const StyledMiniBannerContainer = styled.div<{\n  variant: BannerVariant\n}>`\n  align-items: center;\n  background-color: ${colors.gray96};\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${spacing.md}px;\n\n  ${getTypographyIntent('small')}\n\n  ${getMiniBannerIconColor}\n\n  & ${StyledContent} {\n    margin: ${spacing.sm}px;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Banner.styles.js","names":["styled","css","keyframes","StyledButton","StyledLinkButton","DropdownButton","Flex","getTypographyIntent","typographyWeights","borderRadius","colors","focusable","getShadow","spacing","bannerLeft","bannerVariantColors","attention","primary","yellow40","secondary","yellow94","error","red50","red98","info","blue50","blue96","UNSAFE_attention_emphasized","orange50","orange98","miniBannerVariantColors","yellow50","green50","bannerShadow","expandContent","maxHeight","sm","StyledBannerContainer","div","withConfig","displayName","componentId","md","gray15","lg","_ref","$variant","_bannerVariantColors$","StyledIconContainer","_ref2","$isExpandable","StyledContent","StyledExpandableContentContainer","StyledExpandableContent","white","xl","_ref3","$isOverflowingY","_ref4","$expandableContentMaxHeight","StyledTitle","semibold","StyledBody","StyledActionsTrigger","StyledAction","gray85","getMiniBannerIconColor","_ref5","variant","StyledMiniBannerContainer","gray96"],"sources":["../../src/Banner/Banner.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledButton, StyledLinkButton } from '../Button/Button.styles'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport type { FlexProps } from '../Flex'\nimport { Flex } from '../Flex'\nimport { getTypographyIntent, typographyWeights } from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { focusable } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { BannerProps, BannerVariant } from './Banner.types'\n\ntype StyledBannerContainerProps = {\n  $isExpandable: boolean\n  $variant: BannerProps['variant']\n} & Omit<BannerProps, 'variant'>\n\nconst bannerLeft = 8\n\nconst bannerVariantColors = {\n  attention: {\n    primary: colors.yellow40,\n    secondary: colors.yellow94,\n  },\n  error: {\n    primary: colors.red50,\n    secondary: colors.red98,\n  },\n  info: {\n    primary: colors.blue50,\n    secondary: colors.blue96,\n  },\n  UNSAFE_attention_emphasized: {\n    primary: colors.orange50,\n    secondary: colors.orange98,\n  },\n} as const\n\nconst miniBannerVariantColors = {\n  attention: colors.yellow50,\n  error: colors.red50,\n  info: colors.blue50,\n  UNSAFE_attention_emphasized: colors.green50,\n}\n\nconst bannerShadow = getShadow(1, 'bottom')\n\nconst expandContent = (maxHeight: number) => keyframes`\n  from {\n    padding-top: 0;\n    padding-bottom: 0;\n    max-height: 0;\n    min-height: 0;\n    overflow-y: hidden;\n  }\n  to {\n    padding-top: ${spacing.sm}px;\n    padding-bottom: ${spacing.sm}px;\n    min-height: 32px;\n    max-height: ${maxHeight}px;\n    overflow-y: auto;\n  }\n`\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerProps>`\n  align-items: center;\n  border-left: ${bannerLeft}px solid;\n  border-radius: ${borderRadius.md}px;\n  color: ${colors.gray15};\n  display: flex;\n  justify-content: space-between;\n  min-height: 52px;\n  padding: 0 ${spacing.lg}px;\n\n  ${bannerShadow}\n\n  ${({ $variant }) => {\n    const { primary, secondary } = bannerVariantColors[$variant]\n\n    return css`\n      border-left-color: ${primary};\n      background-color: ${secondary};\n\n      & ${StyledIconContainer} {\n        color: ${primary};\n      }\n    `\n  }}\n\n  ${({ $isExpandable }) =>\n    $isExpandable &&\n    css`\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n    `}\n`\n\nexport const StyledContent = styled.div`\n  align-self: center;\n  margin: ${spacing.sm}px ${spacing.lg}px ${spacing.sm}px 0;\n  width: 100%;\n`\n\nexport const StyledExpandableContentContainer = styled(Flex)`\n  color: ${colors.gray15};\n  min-height: 52px;\n  padding: 0 ${spacing.lg}px;\n  position: relative;\n  z-index: 1;\n\n  ${bannerShadow}\n`\n\nexport const StyledExpandableContent = styled(Flex)<\n  FlexProps & { $isOverflowingY: boolean; $expandableContentMaxHeight: number }\n>`\n  animation-duration: 450ms;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-out;\n  background-color: ${colors.white};\n  box-sizing: border-box;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.25px;\n  line-height: 20px;\n  overflow-y: auto;\n  padding: 0 ${spacing.xl * 2 + spacing.sm}px;\n  position: relative;\n  z-index: 0;\n\n  ${({ $isOverflowingY }) => $isOverflowingY && focusable}\n  ${({ $expandableContentMaxHeight }) =>\n    css`\n      animation-name: ${expandContent($expandableContentMaxHeight)};\n    `}\n`\n\nexport const StyledTitle = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray15};\n  font-weight: ${typographyWeights.semibold};\n`\n\nexport const StyledBody = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray15};\n`\n\nexport const StyledIconContainer = styled.div`\n  flex: 0 0 auto;\n  margin: ${spacing.lg}px 0;\n`\n\nexport const StyledActionsTrigger = styled(DropdownButton)`\n  flex-shrink: 0;\n\n  & + ${StyledButton}, & + ${StyledLinkButton} {\n    margin-left: -${spacing.sm}px;\n  }\n`\n\nexport const StyledAction = styled.div`\n  margin: ${spacing.sm}px 0 ${spacing.sm}px -${spacing.sm}px;\n\n  & + ${StyledButton}, & + ${StyledLinkButton}, & + ${StyledActionsTrigger} {\n    margin-left: -${spacing.sm}px;\n  }\n\n  ${StyledButton}, ${StyledLinkButton} {\n    background: rgba(0, 0, 0, 0.05);\n    color: ${colors.gray15};\n\n    &:hover {\n      background: ${colors.gray85};\n      color: ${colors.gray15};\n    }\n  }\n`\n\nfunction getMiniBannerIconColor({ variant }: { variant: BannerVariant }) {\n  return css`\n    & ${StyledIconContainer} {\n      color: ${miniBannerVariantColors[variant]};\n    }\n  `\n}\n\nexport const StyledMiniBannerContainer = styled.div<{\n  variant: BannerVariant\n}>`\n  align-items: center;\n  background-color: ${colors.gray96};\n  display: flex;\n  justify-content: space-between;\n  padding: 0 ${spacing.md}px;\n\n  ${getTypographyIntent('small')}\n\n  ${getMiniBannerIconColor}\n\n  & ${StyledContent} {\n    margin: ${spacing.sm}px;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,yBAAyB;AACxE,SAASC,cAAc,QAAQ,sBAAsB;AAErD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,mBAAmB,EAAEC,iBAAiB,QAAQ,eAAe;AACtE,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAQ5C,IAAMC,UAAU,GAAG,CAAC;AAEpB,IAAMC,mBAAmB,GAAG;EAC1BC,SAAS,EAAE;IACTC,OAAO,EAAEP,MAAM,CAACQ,QAAQ;IACxBC,SAAS,EAAET,MAAM,CAACU;EACpB,CAAC;EACDC,KAAK,EAAE;IACLJ,OAAO,EAAEP,MAAM,CAACY,KAAK;IACrBH,SAAS,EAAET,MAAM,CAACa;EACpB,CAAC;EACDC,IAAI,EAAE;IACJP,OAAO,EAAEP,MAAM,CAACe,MAAM;IACtBN,SAAS,EAAET,MAAM,CAACgB;EACpB,CAAC;EACDC,2BAA2B,EAAE;IAC3BV,OAAO,EAAEP,MAAM,CAACkB,QAAQ;IACxBT,SAAS,EAAET,MAAM,CAACmB;EACpB;AACF,CAAU;AAEV,IAAMC,uBAAuB,GAAG;EAC9Bd,SAAS,EAAEN,MAAM,CAACqB,QAAQ;EAC1BV,KAAK,EAAEX,MAAM,CAACY,KAAK;EACnBE,IAAI,EAAEd,MAAM,CAACe,MAAM;EACnBE,2BAA2B,EAAEjB,MAAM,CAACsB;AACtC,CAAC;AAED,IAAMC,YAAY,GAAGrB,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC;AAE3C,IAAMsB,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,SAAiB;EAAA,OAAKjC,SAAS,uLASnCW,OAAO,CAACuB,EAAE,EACPvB,OAAO,CAACuB,EAAE,EAEdD,SAAS;AAAA,CAG1B;AAED,OAAO,IAAME,qBAAqB,gBAAGrC,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+KAE9B3B,UAAU,EACRL,YAAY,CAACiC,EAAE,EACvBhC,MAAM,CAACiC,MAAM,EAIT9B,OAAO,CAAC+B,EAAE,EAErBX,YAAY,EAEZ,UAAAY,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAAC,qBAAA,GAA+BhC,mBAAmB,CAAC+B,QAAQ,CAAC;IAApD7B,OAAO,GAAA8B,qBAAA,CAAP9B,OAAO;IAAEE,SAAS,GAAA4B,qBAAA,CAAT5B,SAAS;EAE1B,OAAOlB,GAAG,uEACagB,OAAO,EACRE,SAAS,EAEzB6B,mBAAmB,EACZ/B,OAAO;AAGtB,CAAC,EAEC,UAAAgC,KAAA;EAAA,IAAGC,aAAa,GAAAD,KAAA,CAAbC,aAAa;EAAA,OAChBA,aAAa,IACbjD,GAAG,0DAIF;AAAA,EACJ;AAED,OAAO,IAAMkD,aAAa,gBAAGnD,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEAE3B5B,OAAO,CAACuB,EAAE,EAAMvB,OAAO,CAAC+B,EAAE,EAAM/B,OAAO,CAACuB,EAAE,CAErD;AAED,OAAO,IAAMgB,gCAAgC,gBAAGpD,MAAM,CAACM,IAAI,CAAC,CAAAiC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qFACjD/B,MAAM,CAACiC,MAAM,EAET9B,OAAO,CAAC+B,EAAE,EAIrBX,YAAY,CACf;AAED,OAAO,IAAMoB,uBAAuB,gBAAGrD,MAAM,CAACM,IAAI,CAAC,CAAAiC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0RAM7B/B,MAAM,CAAC4C,KAAK,EAOnBzC,OAAO,CAAC0C,EAAE,GAAG,CAAC,GAAG1C,OAAO,CAACuB,EAAE,EAItC,UAAAoB,KAAA;EAAA,IAAGC,eAAe,GAAAD,KAAA,CAAfC,eAAe;EAAA,OAAOA,eAAe,IAAI9C,SAAS;AAAA,GACrD,UAAA+C,KAAA;EAAA,IAAGC,2BAA2B,GAAAD,KAAA,CAA3BC,2BAA2B;EAAA,OAC9B1D,GAAG,2BACiBiC,aAAa,CAACyB,2BAA2B,CAAC;AAAA,CAC7D,CACJ;AAED,OAAO,IAAMC,WAAW,gBAAG5D,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0CACjClC,mBAAmB,CAAC,MAAM,CAAC,EACpBG,MAAM,CAACiC,MAAM,EACPnC,iBAAiB,CAACqD,QAAQ,CAC1C;AAED,OAAO,IAAMC,UAAU,gBAAG9D,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAChClC,mBAAmB,CAAC,MAAM,CAAC,EACpBG,MAAM,CAACiC,MAAM,CACvB;AAED,OAAO,IAAMK,mBAAmB,gBAAGhD,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uCAEjC5B,OAAO,CAAC+B,EAAE,CACrB;AAED,OAAO,IAAMmB,oBAAoB,gBAAG/D,MAAM,CAACK,cAAc,CAAC,CAAAkC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAGlDtC,YAAY,EAASC,gBAAgB,EACzBS,OAAO,CAACuB,EAAE,CAE7B;AAED,OAAO,IAAM4B,YAAY,gBAAGhE,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8KAC1B5B,OAAO,CAACuB,EAAE,EAAQvB,OAAO,CAACuB,EAAE,EAAOvB,OAAO,CAACuB,EAAE,EAEjDjC,YAAY,EAASC,gBAAgB,EAAS2D,oBAAoB,EACtDlD,OAAO,CAACuB,EAAE,EAG1BjC,YAAY,EAAKC,gBAAgB,EAExBM,MAAM,CAACiC,MAAM,EAGNjC,MAAM,CAACuD,MAAM,EAClBvD,MAAM,CAACiC,MAAM,CAG3B;AAED,SAASuB,sBAAsBA,CAAAC,KAAA,EAA0C;EAAA,IAAvCC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EACvC,OAAOnE,GAAG,0BACJ+C,mBAAmB,EACZlB,uBAAuB,CAACsC,OAAO,CAAC;AAG/C;AAEA,OAAO,IAAMC,yBAAyB,gBAAGrE,MAAM,CAACsC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8IAI7B/B,MAAM,CAAC4D,MAAM,EAGpBzD,OAAO,CAAC6B,EAAE,EAErBnC,mBAAmB,CAAC,OAAO,CAAC,EAE5B2D,sBAAsB,EAEpBf,aAAa,EACLtC,OAAO,CAACuB,EAAE,CAEvB"}

package/dist/Box/Box.js

@@ -67,7 +67,7 @@ export var Box = /*#__PURE__*/React.forwardRef(function Box(_ref, ref) {
   var legacyProps = getLegacyDisplayAndDirection(display);
   return /*#__PURE__*/React.createElement(StyledBox, _extends({}, props, {
     ref: ref,
-    $as: as,
+    as: as,
     $alignContent: alignContent,
     $alignItems: alignItems,
     $alignSelf: alignSelf,

package/dist/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":["React","StyledBox","getLegacyDisplayAndDirection","d","display","direction","includes","undefined","Box","forwardRef","_ref","ref","as","alignContent","alignItems","alignSelf","children","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","gap","justifyContent","margin","marginBottom","marginLeft","marginRight","marginTop","order","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","props","_objectWithoutProperties","_excluded","legacyProps","createElement","_extends","$as","$alignContent","$alignItems","$alignSelf","$display","$flex","$flexBasis","$flexDirection","$flexGrow","$flexShrink","$flexWrap","$gap","$justifyContent","$margin","$marginBottom","$marginLeft","$marginRight","$marginTop","$order","$padding","$paddingBottom","$paddingLeft","$paddingRight","$paddingTop","$textAlign","displayName"],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledBox } from './Box.styles'\nimport type { BoxProps, Display, FlexDirection } from './Box.types'\n\n// TODO remove this after we decommission the LegacyDisplay type\nfunction getLegacyDisplayAndDirection(d?: Display) {\n  if (!d) {\n    return {}\n  }\n\n  let display = d\n\n  let direction: FlexDirection | undefined = display.includes('flex')\n    ? 'row'\n    : undefined\n\n  if (d.includes('flex-inline') || d.includes('inline-flex')) {\n    display = 'inline-flex'\n  } else if (d.includes('flex')) {\n    display = 'flex'\n  }\n\n  if (d.includes('column-reverse')) {\n    direction = 'column-reverse'\n  } else if (d.includes('column')) {\n    direction = 'column'\n  }\n\n  if (d.includes('row-reverse')) {\n    direction = 'row-reverse'\n  } else if (d.includes('row')) {\n    direction = 'row'\n  }\n\n  return {\n    display,\n    direction,\n  }\n}\n\n/**\n * `Box` is a general layout utility for CSS properties like `display`, `text-align`,\n * flex, spacing, and layout properties.\n */\nexport const Box = React.forwardRef<HTMLDivElement, DivAttributes & BoxProps>(\n  function Box(\n    {\n      as,\n      alignContent,\n      alignItems,\n      alignSelf,\n      children,\n      display,\n      flex,\n      flexBasis,\n      flexDirection,\n      flexGrow,\n      flexShrink,\n      flexWrap,\n      gap,\n      justifyContent,\n      margin,\n      marginBottom,\n      marginLeft,\n      marginRight,\n      marginTop,\n      order,\n      padding,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingTop,\n      textAlign,\n      ...props\n    },\n    ref\n  ) {\n    const legacyProps = getLegacyDisplayAndDirection(display)\n\n    return (\n      <StyledBox\n        {...props}\n        ref={ref}\n        $as={as}\n        $alignContent={alignContent}\n        $alignItems={alignItems}\n        $alignSelf={alignSelf}\n        $display={legacyProps.display}\n        $flex={flex}\n        $flexBasis={flexBasis}\n        $flexDirection={flexDirection ?? legacyProps.direction}\n        $flexGrow={flexGrow}\n        $flexShrink={flexShrink}\n        $flexWrap={flexWrap}\n        $gap={gap}\n        $justifyContent={justifyContent}\n        $margin={margin}\n        $marginBottom={marginBottom}\n        $marginLeft={marginLeft}\n        $marginRight={marginRight}\n        $marginTop={marginTop}\n        $order={order}\n        $padding={padding}\n        $paddingBottom={paddingBottom}\n        $paddingLeft={paddingLeft}\n        $paddingRight={paddingRight}\n        $paddingTop={paddingTop}\n        $textAlign={textAlign}\n      >\n        {children}\n      </StyledBox>\n    )\n  }\n)\n\nBox.displayName = 'Box'\n"],"mappings":"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"}
+{"version":3,"file":"Box.js","names":["React","StyledBox","getLegacyDisplayAndDirection","d","display","direction","includes","undefined","Box","forwardRef","_ref","ref","as","alignContent","alignItems","alignSelf","children","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","gap","justifyContent","margin","marginBottom","marginLeft","marginRight","marginTop","order","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","props","_objectWithoutProperties","_excluded","legacyProps","createElement","_extends","$alignContent","$alignItems","$alignSelf","$display","$flex","$flexBasis","$flexDirection","$flexGrow","$flexShrink","$flexWrap","$gap","$justifyContent","$margin","$marginBottom","$marginLeft","$marginRight","$marginTop","$order","$padding","$paddingBottom","$paddingLeft","$paddingRight","$paddingTop","$textAlign","displayName"],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledBox } from './Box.styles'\nimport type { BoxProps, Display, FlexDirection } from './Box.types'\n\n// TODO remove this after we decommission the LegacyDisplay type\nfunction getLegacyDisplayAndDirection(d?: Display) {\n  if (!d) {\n    return {}\n  }\n\n  let display = d\n\n  let direction: FlexDirection | undefined = display.includes('flex')\n    ? 'row'\n    : undefined\n\n  if (d.includes('flex-inline') || d.includes('inline-flex')) {\n    display = 'inline-flex'\n  } else if (d.includes('flex')) {\n    display = 'flex'\n  }\n\n  if (d.includes('column-reverse')) {\n    direction = 'column-reverse'\n  } else if (d.includes('column')) {\n    direction = 'column'\n  }\n\n  if (d.includes('row-reverse')) {\n    direction = 'row-reverse'\n  } else if (d.includes('row')) {\n    direction = 'row'\n  }\n\n  return {\n    display,\n    direction,\n  }\n}\n\n/**\n * `Box` is a general layout utility for CSS properties like `display`, `text-align`,\n * flex, spacing, and layout properties.\n */\nexport const Box = React.forwardRef<HTMLDivElement, DivAttributes & BoxProps>(\n  function Box(\n    {\n      as,\n      alignContent,\n      alignItems,\n      alignSelf,\n      children,\n      display,\n      flex,\n      flexBasis,\n      flexDirection,\n      flexGrow,\n      flexShrink,\n      flexWrap,\n      gap,\n      justifyContent,\n      margin,\n      marginBottom,\n      marginLeft,\n      marginRight,\n      marginTop,\n      order,\n      padding,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingTop,\n      textAlign,\n      ...props\n    },\n    ref\n  ) {\n    const legacyProps = getLegacyDisplayAndDirection(display)\n\n    return (\n      <StyledBox\n        {...props}\n        ref={ref}\n        as={as}\n        $alignContent={alignContent}\n        $alignItems={alignItems}\n        $alignSelf={alignSelf}\n        $display={legacyProps.display}\n        $flex={flex}\n        $flexBasis={flexBasis}\n        $flexDirection={flexDirection ?? legacyProps.direction}\n        $flexGrow={flexGrow}\n        $flexShrink={flexShrink}\n        $flexWrap={flexWrap}\n        $gap={gap}\n        $justifyContent={justifyContent}\n        $margin={margin}\n        $marginBottom={marginBottom}\n        $marginLeft={marginLeft}\n        $marginRight={marginRight}\n        $marginTop={marginTop}\n        $order={order}\n        $padding={padding}\n        $paddingBottom={paddingBottom}\n        $paddingLeft={paddingLeft}\n        $paddingRight={paddingRight}\n        $paddingTop={paddingTop}\n        $textAlign={textAlign}\n      >\n        {children}\n      </StyledBox>\n    )\n  }\n)\n\nBox.displayName = 'Box'\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS,QAAQ,cAAc;AAGxC;AACA,SAASC,4BAA4BA,CAACC,CAAW,EAAE;EACjD,IAAI,CAACA,CAAC,EAAE;IACN,OAAO,CAAC,CAAC;EACX;EAEA,IAAIC,OAAO,GAAGD,CAAC;EAEf,IAAIE,SAAoC,GAAGD,OAAO,CAACE,QAAQ,CAAC,MAAM,CAAC,GAC/D,KAAK,GACLC,SAAS;EAEb,IAAIJ,CAAC,CAACG,QAAQ,CAAC,aAAa,CAAC,IAAIH,CAAC,CAACG,QAAQ,CAAC,aAAa,CAAC,EAAE;IAC1DF,OAAO,GAAG,aAAa;EACzB,CAAC,MAAM,IAAID,CAAC,CAACG,QAAQ,CAAC,MAAM,CAAC,EAAE;IAC7BF,OAAO,GAAG,MAAM;EAClB;EAEA,IAAID,CAAC,CAACG,QAAQ,CAAC,gBAAgB,CAAC,EAAE;IAChCD,SAAS,GAAG,gBAAgB;EAC9B,CAAC,MAAM,IAAIF,CAAC,CAACG,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC/BD,SAAS,GAAG,QAAQ;EACtB;EAEA,IAAIF,CAAC,CAACG,QAAQ,CAAC,aAAa,CAAC,EAAE;IAC7BD,SAAS,GAAG,aAAa;EAC3B,CAAC,MAAM,IAAIF,CAAC,CAACG,QAAQ,CAAC,KAAK,CAAC,EAAE;IAC5BD,SAAS,GAAG,KAAK;EACnB;EAEA,OAAO;IACLD,OAAO,EAAPA,OAAO;IACPC,SAAS,EAATA;EACF,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA,OAAO,IAAMG,GAAG,gBAAGR,KAAK,CAACS,UAAU,CACjC,SAASD,GAAGA,CAAAE,IAAA,EA8BVC,GAAG,EACH;EAAA,IA7BEC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IACZC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRZ,OAAO,GAAAM,IAAA,CAAPN,OAAO;IACPa,IAAI,GAAAP,IAAA,CAAJO,IAAI;IACJC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IACTC,aAAa,GAAAT,IAAA,CAAbS,aAAa;IACbC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,UAAU,GAAAX,IAAA,CAAVW,UAAU;IACVC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACRC,GAAG,GAAAb,IAAA,CAAHa,GAAG;IACHC,cAAc,GAAAd,IAAA,CAAdc,cAAc;IACdC,MAAM,GAAAf,IAAA,CAANe,MAAM;IACNC,YAAY,GAAAhB,IAAA,CAAZgB,YAAY;IACZC,UAAU,GAAAjB,IAAA,CAAViB,UAAU;IACVC,WAAW,GAAAlB,IAAA,CAAXkB,WAAW;IACXC,SAAS,GAAAnB,IAAA,CAATmB,SAAS;IACTC,KAAK,GAAApB,IAAA,CAALoB,KAAK;IACLC,OAAO,GAAArB,IAAA,CAAPqB,OAAO;IACPC,aAAa,GAAAtB,IAAA,CAAbsB,aAAa;IACbC,WAAW,GAAAvB,IAAA,CAAXuB,WAAW;IACXC,YAAY,GAAAxB,IAAA,CAAZwB,YAAY;IACZC,UAAU,GAAAzB,IAAA,CAAVyB,UAAU;IACVC,SAAS,GAAA1B,IAAA,CAAT0B,SAAS;IACNC,KAAK,GAAAC,wBAAA,CAAA5B,IAAA,EAAA6B,SAAA;EAIV,IAAMC,WAAW,GAAGtC,4BAA4B,CAACE,OAAO,CAAC;EAEzD,oBACEJ,KAAA,CAAAyC,aAAA,CAACxC,SAAS,EAAAyC,QAAA,KACJL,KAAK;IACT1B,GAAG,EAAEA,GAAI;IACTC,EAAE,EAAEA,EAAG;IACP+B,aAAa,EAAE9B,YAAa;IAC5B+B,WAAW,EAAE9B,UAAW;IACxB+B,UAAU,EAAE9B,SAAU;IACtB+B,QAAQ,EAAEN,WAAW,CAACpC,OAAQ;IAC9B2C,KAAK,EAAE9B,IAAK;IACZ+B,UAAU,EAAE9B,SAAU;IACtB+B,cAAc,EAAE9B,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIqB,WAAW,CAACnC,SAAU;IACvD6C,SAAS,EAAE9B,QAAS;IACpB+B,WAAW,EAAE9B,UAAW;IACxB+B,SAAS,EAAE9B,QAAS;IACpB+B,IAAI,EAAE9B,GAAI;IACV+B,eAAe,EAAE9B,cAAe;IAChC+B,OAAO,EAAE9B,MAAO;IAChB+B,aAAa,EAAE9B,YAAa;IAC5B+B,WAAW,EAAE9B,UAAW;IACxB+B,YAAY,EAAE9B,WAAY;IAC1B+B,UAAU,EAAE9B,SAAU;IACtB+B,MAAM,EAAE9B,KAAM;IACd+B,QAAQ,EAAE9B,OAAQ;IAClB+B,cAAc,EAAE9B,aAAc;IAC9B+B,YAAY,EAAE9B,WAAY;IAC1B+B,aAAa,EAAE9B,YAAa;IAC5B+B,WAAW,EAAE9B,UAAW;IACxB+B,UAAU,EAAE9B;EAAU,IAErBpB,QACQ,CAAC;AAEhB,CACF,CAAC;AAEDR,GAAG,CAAC2D,WAAW,GAAG,KAAK"}

package/dist/Box/Box.styles.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { $BoxProps } from './Box.types';
-export declare const StyledBox: import("styled-components").StyledComponent<"div", any, $BoxProps, never>;
+export declare const StyledBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, $BoxProps>> & string;