@procore/core-react 12.22.0 → 12.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 12.23.0
+
+### Minor Changes
+
+- 5848cca: Update I18nProviders to have the option to pull translations from the CDN package cdn-translations with `enableCDN` prop or context inheritance
+
+### Patch Changes
+
+- e14e204: There is a fix for inconvenient disappears after releasing the mouse outside of the popover component
+- dfaab43: Added some aria to Contact Item and updated documentation
+- Updated dependencies [fac7a44]
+- Updated dependencies [b091686]
+  - @procore/core-icons@12.8.0
+
 ## 12.22.0
 
 ### Minor Changes

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,11 +5,11 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_22_0__sc-aacdj4-0"
+  componentId: "core-12_23_0__sc-aacdj4-0"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_22_0__sc-aacdj4-1"
+  componentId: "core-12_23_0__sc-aacdj4-1"
 })(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -22,7 +22,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_22_0__sc-aacdj4-2"
+  componentId: "core-12_23_0__sc-aacdj4-2"
 })(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_22_0__sc-7q2ydl-0"
+  componentId: "core-12_23_0__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_22_0__sc-7q2ydl-1"
+  componentId: "core-12_23_0__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_22_0__sc-7q2ydl-2"
+  componentId: "core-12_23_0__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_22_0__sc-7q2ydl-3"
+  componentId: "core-12_23_0__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_22_0__sc-7q2ydl-4"
+  componentId: "core-12_23_0__sc-7q2ydl-4"
 })(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus, getGapOutlineFocus, function (_ref2) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;

package/dist/AvatarStack/AvatarStack.styles.d.ts

@@ -8,8 +8,9 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "link";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "href">> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    type?: string | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     media?: string | undefined;
@@ -276,7 +277,6 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     hrefLang?: string | undefined;
     ping?: string | undefined;
     target?: import("react").HTMLAttributeAnchorTarget | undefined;
-    type?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
 } & {
     'aria-label': string;
@@ -289,8 +289,9 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "link";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "href">> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    type?: string | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     media?: string | undefined;
@@ -557,7 +558,6 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     hrefLang?: string | undefined;
     ping?: string | undefined;
     target?: import("react").HTMLAttributeAnchorTarget | undefined;
-    type?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
 } & {
     'aria-labelledby': string;
@@ -570,8 +570,8 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "button";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -845,8 +845,8 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "button";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -1120,8 +1120,8 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "img";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -1393,8 +1393,8 @@ export declare const StyledAvatar: import("styled-components/dist/types").IStyle
     role: "img";
 } & Required<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>> & {
     is?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     translate?: "no" | "yes" | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;

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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__sc-ft72hu-6"
+  componentId: "core-12_23_0__sc-ft72hu-6"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

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_22_0__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_22_0__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.styles.js

@@ -39,7 +39,7 @@ var expandContent = function expandContent(maxHeight) {
 };
 export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBannerContainer",
-  componentId: "core-12_22_0__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],
@@ -52,15 +52,15 @@ export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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_22_0__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/Box/Box.styles.js

@@ -21,7 +21,7 @@ function sizeToPx(size) {
 }
 export var StyledBox = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBox",
-  componentId: "core-12_22_0__sc-fgsy0p-0"
+  componentId: "core-12_23_0__sc-fgsy0p-0"
 })(["", " ", ""], function (_ref) {
   var as = _ref.as;
   if (as === 'ol' || as === 'ul') {

package/dist/Breadcrumbs/Breadcrumbs.styles.js

@@ -4,19 +4,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_22_0__sc-1q6nqfz-0"
+  componentId: "core-12_23_0__sc-1q6nqfz-0"
 })(["color:", ";display:flex;align-items:center;a,a:hover{display:inline-flex;text-decoration:none;}"], colors.gray50);
 export var StyledList = /*#__PURE__*/styled.ol.withConfig({
   displayName: "StyledList",
-  componentId: "core-12_22_0__sc-1q6nqfz-1"
+  componentId: "core-12_23_0__sc-1q6nqfz-1"
 })(["display:flex;margin:0;padding-left:0;"]);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSeparator",
-  componentId: "core-12_22_0__sc-1q6nqfz-2"
+  componentId: "core-12_23_0__sc-1q6nqfz-2"
 })(["align-items:center;display:inline-flex;justify-content:center;margin:0px ", "px;"], spacing.xs);
 export var StyledCrumb = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledCrumb",
-  componentId: "core-12_22_0__sc-1q6nqfz-3"
+  componentId: "core-12_23_0__sc-1q6nqfz-3"
 })(["", " align-items:center;color:", ";display:inline-flex;min-height:24px;text-decoration:none;&:hover{cursor:", ";text-decoration:", ";}> a{color:", ";", "}", ""], getTypographyIntent('body'), colors.gray45, function (_ref) {
   var active = _ref.active;
   return active ? 'default' : 'pointer';

package/dist/Button/Button.styles.js

@@ -93,11 +93,11 @@ function getColors(loading, variant) {
 }
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_22_0__sc-c5bhwh-0"
+  componentId: "core-12_23_0__sc-c5bhwh-0"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledSpinner",
-  componentId: "core-12_22_0__sc-c5bhwh-1"
+  componentId: "core-12_23_0__sc-c5bhwh-1"
 })(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
   var size = _ref.size;
   var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
@@ -105,14 +105,14 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 });
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_22_0__sc-c5bhwh-2"
+  componentId: "core-12_23_0__sc-c5bhwh-2"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 export function getButtonStyles(block, disabled, loading, size, variant) {
   return css(["", " ", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
 }
 export var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_22_0__sc-c5bhwh-3"
+  componentId: "core-12_23_0__sc-c5bhwh-3"
 })(["", ""], function (_ref2) {
   var $block = _ref2.$block,
     disabled = _ref2.disabled,
@@ -123,7 +123,7 @@ export var StyledButton = /*#__PURE__*/styled.button.withConfig({
 });
 export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkButton",
-  componentId: "core-12_22_0__sc-c5bhwh-4"
+  componentId: "core-12_23_0__sc-c5bhwh-4"
 })(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
   var $block = _ref3.$block,
     $disabled = _ref3.$disabled,

package/dist/Calendar/Calendar.styles.js

@@ -8,31 +8,31 @@ var cellSize = 36; // TODO one-off size
 
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_22_0__sc-1kkl86t-0"
+  componentId: "core-12_23_0__sc-1kkl86t-0"
 })(["", ";display:inline-flex;flex-direction:column;padding:", "px ", "px ", "px;"], getTypographyIntent('small'), spacing.lg, spacing.md, spacing.md);
 export var StyledPaginator = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledPaginator",
-  componentId: "core-12_22_0__sc-1kkl86t-1"
+  componentId: "core-12_23_0__sc-1kkl86t-1"
 })(["flex:0 0 auto;"]);
 export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelect",
-  componentId: "core-12_22_0__sc-1kkl86t-2"
+  componentId: "core-12_23_0__sc-1kkl86t-2"
 })(["display:inline-flex;flex:1 1 0;margin-left:", "px;> div{font-size:12px;}"], spacing.sm);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_22_0__sc-1kkl86t-3"
+  componentId: "core-12_23_0__sc-1kkl86t-3"
 })(["display:inline-flex;margin-bottom:", "px;", " + ", ",", " + ", "{margin-left:", "px;}"], spacing.sm, StyledPaginator, StyledSelect, StyledSelect, StyledPaginator, spacing.sm);
 export var StyledCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCell",
-  componentId: "core-12_22_0__sc-1kkl86t-4"
+  componentId: "core-12_23_0__sc-1kkl86t-4"
 })(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;"], cellSize, cellSize);
 export var StyledDayHeaderCell = /*#__PURE__*/styled(StyledCell).withConfig({
   displayName: "StyledDayHeaderCell",
-  componentId: "core-12_22_0__sc-1kkl86t-5"
+  componentId: "core-12_23_0__sc-1kkl86t-5"
 })(["cursor:default;font-weight:", ";"], typographyWeights.semibold);
 export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
   displayName: "StyledDayCell",
-  componentId: "core-12_22_0__sc-1kkl86t-6"
+  componentId: "core-12_23_0__sc-1kkl86t-6"
 })(["", ""], function (_ref) {
   var _ref$$disabled = _ref.$disabled,
     $disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
@@ -55,6 +55,6 @@ export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
 });
 export var StyledWeekRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWeekRow",
-  componentId: "core-12_22_0__sc-1kkl86t-7"
+  componentId: "core-12_23_0__sc-1kkl86t-7"
 })(["display:inline-flex;padding-bottom:2px;user-select:none;&:last-child{padding-bottom:0;}", "{&:first-child{border-top-left-radius:", "px;border-bottom-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;border-bottom-right-radius:", "px;}}"], StyledCell, borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
 //# sourceMappingURL=Calendar.styles.js.map

package/dist/Card/Card.styles.js

@@ -4,7 +4,7 @@ import { colors } from '../_styles/colors';
 import { getShadow } from '../_styles/shadows';
 export var StyledCardContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCardContainer",
-  componentId: "core-12_22_0__sc-2fii7b-0"
+  componentId: "core-12_23_0__sc-2fii7b-0"
 })(["background-color:", ";border-radius:", "px;transition:box-shadow 0.2s ease-in-out;", " ", ""], colors.white, borderRadius.md, function (_ref) {
   var $level = _ref.$level,
     $shadowStrength = _ref.$shadowStrength;