@procore/core-react 12.25.1 → 12.26.0

package/dist/Panel/Panel.styles.js

@@ -1,8 +1,9 @@
 import styled, { css } from 'styled-components';
 import { Card } from '../Card';
 import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
-import { Typography } from '../Typography';
+import { H2 } from '../Semantic';
 import { colors } from '../_styles/colors';
+import { getFocusInset } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 var headerActionSize = 36;
 var buttonShadowWidth = 2;
@@ -10,15 +11,15 @@ var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
 var panel = /*#__PURE__*/css(["display:flex;align-items:center;padding:", "px;background:", ";"], spacing.lg, colors.white);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_25_1__sc-lidix2-0"
+  componentId: "core-12_26_0__sc-lidix2-0"
 })(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
-export var StyledTitle = /*#__PURE__*/styled(Typography).withConfig({
+export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_25_1__sc-lidix2-1"
+  componentId: "core-12_26_0__sc-lidix2-1"
 })(["flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBackAction",
-  componentId: "core-12_25_1__sc-lidix2-2"
+  componentId: "core-12_26_0__sc-lidix2-2"
 })(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
   var $active = _ref.$active;
   return $active ? headerActionSize : 0;
@@ -34,38 +35,38 @@ export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledMoreMenu",
-  componentId: "core-12_25_1__sc-lidix2-3"
+  componentId: "core-12_26_0__sc-lidix2-3"
 })(["max-height:128px;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_25_1__sc-lidix2-4"
+  componentId: "core-12_26_0__sc-lidix2-4"
 })(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
 export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCloseButton",
-  componentId: "core-12_25_1__sc-lidix2-5"
+  componentId: "core-12_26_0__sc-lidix2-5"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_25_1__sc-lidix2-6"
-})(["height:100%;background:", ";overflow-y:auto;> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
+  componentId: "core-12_26_0__sc-lidix2-6"
+})(["height:100%;background:", ";overflow-y:auto;&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
   var secondaryBgColor = _ref5.secondaryBgColor;
   return secondaryBgColor ? colors.gray96 : colors.white;
-}, StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
+}, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
 export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
   displayName: "StyledPanel",
-  componentId: "core-12_25_1__sc-lidix2-7"
+  componentId: "core-12_26_0__sc-lidix2-7"
 })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
 export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterNotation",
-  componentId: "core-12_25_1__sc-lidix2-8"
+  componentId: "core-12_26_0__sc-lidix2-8"
 })(["flex-grow:1;"]);
 export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterActions",
-  componentId: "core-12_25_1__sc-lidix2-9"
+  componentId: "core-12_26_0__sc-lidix2-9"
 })(["", ""], gutter);
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_25_1__sc-lidix2-10"
+  componentId: "core-12_26_0__sc-lidix2-10"
 })(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
   var $hasShadow = _ref6.$hasShadow;
   return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);

package/dist/Panel/Panel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.styles.js","names":["styled","css","Card","StyledSection","StyledSectionInner","Typography","colors","spacing","headerActionSize","buttonShadowWidth","gutter","sm","panel","lg","white","StyledHeader","div","withConfig","displayName","componentId","gray85","StyledTitle","StyledHeaderBackAction","_ref","$active","_ref2","_ref3","_ref4","StyledMoreMenu","StyledHeaderActions","StyledCloseButton","StyledBody","_ref5","secondaryBgColor","gray96","StyledPanel","aside","StyledFooterNotation","StyledFooterActions","StyledFooter","_ref6","$hasShadow"],"sources":["../../src/Panel/Panel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { Typography } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst headerActionSize = 36\nconst buttonShadowWidth = 2\n\nconst gutter = css`\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nconst panel = css`\n  display: flex;\n  align-items: center;\n  padding: ${spacing.lg}px;\n  background: ${colors.white};\n`\n\nexport const StyledHeader = styled.div`\n  border-bottom: 1px solid ${colors.gray85};\n\n  ${panel}\n`\n\nexport const StyledTitle = styled(Typography)`\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const StyledHeaderBackAction = styled.div<{ $active: boolean }>`\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ${({ $active }) => ($active ? headerActionSize : 0)}px;\n  margin-right: ${({ $active }) => ($active ? spacing.lg : 0)}px;\n  opacity: ${({ $active }) => ($active ? 1 : 0)};\n  transform: translateX(\n    ${({ $active }) =>\n      $active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth)}px\n  );\n`\n\nexport const StyledMoreMenu = styled(Card)`\n  max-height: 128px;\n`\n\nexport const StyledHeaderActions = styled.div`\n  display: flex;\n  margin-left: ${spacing.lg}px;\n  flex-shrink: 0;\n\n  ${gutter}\n`\n\nexport const StyledCloseButton = styled.div`\n  margin-left: ${spacing.sm}px;\n`\n\nexport const StyledBody = styled.div<{ secondaryBgColor?: boolean }>`\n  height: 100%;\n  background: ${({ secondaryBgColor }) =>\n    secondaryBgColor ? colors.gray96 : colors.white};\n  overflow-y: auto;\n\n  > ${StyledSection} {\n    padding-left: ${spacing.lg}px;\n    padding-right: ${spacing.lg}px;\n\n    ${StyledSection} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: ${spacing.lg}px;\n    }\n  }\n`\n\nexport const StyledPanel = styled.aside`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ${colors.white};\n  overflow: hidden;\n`\n\nexport const StyledFooterNotation = styled.div`\n  flex-grow: 1;\n`\n\nexport const StyledFooterActions = styled.div`\n  ${gutter}\n`\n\nexport const StyledFooter = styled.div<{ $hasShadow: boolean }>`\n  border-top: 1px solid ${colors.gray85};\n  justify-content: flex-end;\n\n  ${panel}\n\n  ${({ $hasShadow }) =>\n    $hasShadow &&\n    css`\n      box-shadow: 0 -4px 6px 0 #0000001a;\n      z-index: 1;\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Panel.styles.js","names":["styled","css","Card","StyledSection","StyledSectionInner","H2","colors","getFocusInset","spacing","headerActionSize","buttonShadowWidth","gutter","sm","panel","lg","white","StyledHeader","div","withConfig","displayName","componentId","gray85","StyledTitle","StyledHeaderBackAction","_ref","$active","_ref2","_ref3","_ref4","StyledMoreMenu","StyledHeaderActions","StyledCloseButton","StyledBody","_ref5","secondaryBgColor","gray96","StyledPanel","aside","StyledFooterNotation","StyledFooterActions","StyledFooter","_ref6","$hasShadow"],"sources":["../../src/Panel/Panel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { H2 } from '../Semantic'\nimport { colors } from '../_styles/colors'\nimport { getFocusInset } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nconst headerActionSize = 36\nconst buttonShadowWidth = 2\n\nconst gutter = css`\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nconst panel = css`\n  display: flex;\n  align-items: center;\n  padding: ${spacing.lg}px;\n  background: ${colors.white};\n`\n\nexport const StyledHeader = styled.div`\n  border-bottom: 1px solid ${colors.gray85};\n\n  ${panel}\n`\n\nexport const StyledTitle = styled(H2)`\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const StyledHeaderBackAction = styled.div<{ $active: boolean }>`\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ${({ $active }) => ($active ? headerActionSize : 0)}px;\n  margin-right: ${({ $active }) => ($active ? spacing.lg : 0)}px;\n  opacity: ${({ $active }) => ($active ? 1 : 0)};\n  transform: translateX(\n    ${({ $active }) =>\n      $active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth)}px\n  );\n`\n\nexport const StyledMoreMenu = styled(Card)`\n  max-height: 128px;\n`\n\nexport const StyledHeaderActions = styled.div`\n  display: flex;\n  margin-left: ${spacing.lg}px;\n  flex-shrink: 0;\n\n  ${gutter}\n`\n\nexport const StyledCloseButton = styled.div`\n  margin-left: ${spacing.sm}px;\n`\n\nexport const StyledBody = styled.div<{ secondaryBgColor?: boolean }>`\n  height: 100%;\n  background: ${({ secondaryBgColor }) =>\n    secondaryBgColor ? colors.gray96 : colors.white};\n  overflow-y: auto;\n\n  &:focus-visible {\n    ${getFocusInset()}\n  }\n\n  > ${StyledSection} {\n    padding-left: ${spacing.lg}px;\n    padding-right: ${spacing.lg}px;\n\n    ${StyledSection} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: ${spacing.lg}px;\n    }\n  }\n`\n\nexport const StyledPanel = styled.aside`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ${colors.white};\n  overflow: hidden;\n`\n\nexport const StyledFooterNotation = styled.div`\n  flex-grow: 1;\n`\n\nexport const StyledFooterActions = styled.div`\n  ${gutter}\n`\n\nexport const StyledFooter = styled.div<{ $hasShadow: boolean }>`\n  border-top: 1px solid ${colors.gray85};\n  justify-content: flex-end;\n\n  ${panel}\n\n  ${({ $hasShadow }) =>\n    $hasShadow &&\n    css`\n      box-shadow: 0 -4px 6px 0 #0000001a;\n      z-index: 1;\n    `}\n`\n"],"mappings":"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"}

package/dist/Panel/Panel.types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { ButtonProps } from '../Button/Button.types';
 import type { SectionProps } from '../Section/Section.types';
-import type { ButtonAttributes, DivAttributes } from '../_utils/types';
 export interface PanelQaTags {
     /**
      * @since 10.19.0
@@ -12,9 +11,15 @@ export interface PanelQaTags {
      */
     title?: string;
 }
-export interface PanelProps extends DivAttributes {
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @a11y `role='region'` should be labelled. It uses the panel's title as a label by default.
+     * This is an optional prop to specify a custom label if needed.
+     * @since 12.24.0
+     */
+    'aria-labelledby'?: string;
 }
-export interface PanelHeaderProps extends DivAttributes {
+export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controls visibility and behavior for the "chevron-left" icon on the left
      * side of the title.
@@ -40,14 +45,14 @@ export interface PanelTitleTooltipProps {
      */
     overlay: React.ReactNode;
 }
-export interface PanelHeaderActionProps extends ButtonAttributes, ButtonProps {
+export interface PanelHeaderActionProps extends ButtonProps {
     /**
      * Tooltip/Overflow menu label text.
      * @since 10.19.0
      * */
     title: string;
 }
-export interface PanelBodyProps extends DivAttributes {
+export interface PanelBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Applies the gray secondary background color.
      * @since 10.19.0
@@ -55,6 +60,10 @@ export interface PanelBodyProps extends DivAttributes {
     secondaryBgColor?: boolean;
 }
 export interface PanelContextShape {
+    /**
+     * @since 12.24.0
+     */
+    ariaLabelledBy?: string;
     /**
      * @since 12.11.2
      */

package/dist/Panel/Panel.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.types.js","names":[],"sources":["../../src/Panel/Panel.types.ts"],"sourcesContent":["import type { ButtonProps } from '../Button/Button.types'\nimport type { SectionProps } from '../Section/Section.types'\nimport type { ButtonAttributes, DivAttributes } from '../_utils/types'\n\nexport interface PanelQaTags {\n  /**\n   * @since 10.19.0\n   */\n  moreIcon?: string\n  /**\n   * @since 10.19.0\n   */\n  title?: string\n}\n\nexport interface PanelProps extends DivAttributes {}\n\nexport interface PanelHeaderProps extends DivAttributes {\n  /**\n   * Controls visibility and behavior for the \"chevron-left\" icon on the left\n   * side of the title.\n   * @since 10.19.0\n   */\n  onClickBack?: () => void\n  /**\n   * @since 10.19.0\n   */\n  onClose?: () => void\n}\n\nexport interface PanelTitleTooltipProps {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  isVisible: boolean\n  /**\n   * @since 10.19.0\n   */\n  overlay: React.ReactNode\n}\nexport interface PanelHeaderActionProps extends ButtonAttributes, ButtonProps {\n  /**\n   * Tooltip/Overflow menu label text.\n   * @since 10.19.0\n   * */\n  title: string\n}\n\nexport interface PanelBodyProps extends DivAttributes {\n  /**\n   * Applies the gray secondary background color.\n   * @since 10.19.0\n   */\n  secondaryBgColor?: boolean\n}\n\nexport interface PanelContextShape {\n  /**\n   * @since 12.11.2\n   */\n  isScrolling: boolean\n  /**\n   * @since 12.11.2\n   * */\n  setIsScrolling: (value: boolean) => void\n}\n\nexport interface PanelSectionProps extends SectionProps {}\n"],"mappings":""}
+{"version":3,"file":"Panel.types.js","names":[],"sources":["../../src/Panel/Panel.types.ts"],"sourcesContent":["import type { ButtonProps } from '../Button/Button.types'\nimport type { SectionProps } from '../Section/Section.types'\n\nexport interface PanelQaTags {\n  /**\n   * @since 10.19.0\n   */\n  moreIcon?: string\n  /**\n   * @since 10.19.0\n   */\n  title?: string\n}\n\nexport interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * @a11y `role='region'` should be labelled. It uses the panel's title as a label by default.\n   * This is an optional prop to specify a custom label if needed.\n   * @since 12.24.0\n   */\n  'aria-labelledby'?: string\n}\n\nexport interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Controls visibility and behavior for the \"chevron-left\" icon on the left\n   * side of the title.\n   * @since 10.19.0\n   */\n  onClickBack?: () => void\n  /**\n   * @since 10.19.0\n   */\n  onClose?: () => void\n}\n\nexport interface PanelTitleTooltipProps {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  isVisible: boolean\n  /**\n   * @since 10.19.0\n   */\n  overlay: React.ReactNode\n}\nexport interface PanelHeaderActionProps extends ButtonProps {\n  /**\n   * Tooltip/Overflow menu label text.\n   * @since 10.19.0\n   * */\n  title: string\n}\n\nexport interface PanelBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Applies the gray secondary background color.\n   * @since 10.19.0\n   */\n  secondaryBgColor?: boolean\n}\n\nexport interface PanelContextShape {\n  /**\n   * @since 12.24.0\n   */\n  ariaLabelledBy?: string\n  /**\n   * @since 12.11.2\n   */\n  isScrolling: boolean\n  /**\n   * @since 12.11.2\n   * */\n  setIsScrolling: (value: boolean) => void\n}\n\nexport interface PanelSectionProps extends SectionProps {}\n"],"mappings":""}

package/dist/Pill/Pill.js

@@ -4,8 +4,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { useId } from '@react-aria/utils';
 import { useI18nContext } from '../_hooks/I18n';
-import { StyledPill, StyledRemove } from './Pill.styles';
+import { StyledPill, StyledRemove, StyledRemoveButton } from './Pill.styles';
 var Remove = /*#__PURE__*/React.forwardRef(function TokenRemove(_ref, ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'gray' : _ref$color,
@@ -13,8 +14,7 @@ var Remove = /*#__PURE__*/React.forwardRef(function TokenRemove(_ref, ref) {
   var i18n = useI18nContext();
   return /*#__PURE__*/React.createElement(StyledRemove, _extends({
     ref: ref,
-    "aria-hidden": "false",
-    "aria-label": i18n.t('core.token.remove'),
+    role: "img",
     size: "sm",
     $color: color
   }, props));
@@ -37,14 +37,22 @@ export var Pill = /*#__PURE__*/React.forwardRef(function Pill(_ref2, ref) {
     color = _ref2$color === void 0 ? 'gray' : _ref2$color,
     onClear = _ref2.onClear,
     props = _objectWithoutProperties(_ref2, _excluded2);
+  var i18n = useI18nContext();
+  var contentId = useId();
   return /*#__PURE__*/React.createElement(StyledPill, _extends({
     $color: color
   }, props, {
     ref: ref
-  }), props.children, onClear && /*#__PURE__*/React.createElement(Remove, {
-    color: color,
+  }), props.children && /*#__PURE__*/React.createElement("span", {
+    id: contentId
+  }, props.children), onClear && /*#__PURE__*/React.createElement(StyledRemoveButton, {
+    type: "button",
+    "aria-describedby": contentId,
+    "aria-label": i18n.t('core.token.remove'),
     onClick: onClear,
-    tabIndex: 0
-  }));
+    $color: color
+  }, /*#__PURE__*/React.createElement(Remove, {
+    color: color
+  })));
 });
 //# sourceMappingURL=Pill.js.map

package/dist/Pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","names":["React","useI18nContext","StyledPill","StyledRemove","Remove","forwardRef","TokenRemove","_ref","ref","_ref$color","color","props","_objectWithoutProperties","_excluded","i18n","createElement","_extends","t","size","$color","Pill","_ref2","_ref2$color","onClear","_excluded2","children","onClick","tabIndex"],"sources":["../../src/Pill/Pill.tsx"],"sourcesContent":["import React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { Props, SVGAttributes } from '../_utils/types'\nimport { StyledPill, StyledRemove } from './Pill.styles'\nimport type { PillColor, PillProps } from './Pill.types'\n\ntype SVGAttributesWithPillColor = Omit<SVGAttributes, 'color'> & {\n  color: PillColor\n}\n\nconst Remove = React.forwardRef<\n  SVGSVGElement,\n  SVGAttributesWithPillColor & Props\n>(function TokenRemove({ color = 'gray', ...props }, ref) {\n  const i18n = useI18nContext()\n  return (\n    <StyledRemove\n      ref={ref}\n      aria-hidden=\"false\"\n      aria-label={i18n.t('core.token.remove')}\n      size=\"sm\"\n      $color={color}\n      {...props}\n    />\n  )\n})\n\n/**\n\n Pills are used to highlight important information in a list or form such as\n a status.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pill--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill)\n\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { color = 'gray', onClear, ...props },\n  ref\n) {\n  return (\n    <StyledPill $color={color} {...props} ref={ref}>\n      {props.children}\n      {onClear && <Remove color={color} onClick={onClear} tabIndex={0} />}\n    </StyledPill>\n  )\n})\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,eAAe;AAOxD,IAAMC,MAAM,gBAAGJ,KAAK,CAACK,UAAU,CAG7B,SAASC,WAAWA,CAAAC,IAAA,EAA+BC,GAAG,EAAE;EAAA,IAAAC,UAAA,GAAAF,IAAA,CAAjCG,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,MAAM,GAAAA,UAAA;IAAKE,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC/C,IAAMC,IAAI,GAAGb,cAAc,CAAC,CAAC;EAC7B,oBACED,KAAA,CAAAe,aAAA,CAACZ,YAAY,EAAAa,QAAA;IACXR,GAAG,EAAEA,GAAI;IACT,eAAY,OAAO;IACnB,cAAYM,IAAI,CAACG,CAAC,CAAC,mBAAmB,CAAE;IACxCC,IAAI,EAAC,IAAI;IACTC,MAAM,EAAET;EAAM,GACVC,KAAK,CACV,CAAC;AAEN,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMS,IAAI,gBAAGpB,KAAK,CAACK,UAAU,CAA6B,SAASe,IAAIA,CAAAC,KAAA,EAE5Eb,GAAG,EACH;EAAA,IAAAc,WAAA,GAAAD,KAAA,CAFEX,KAAK;IAALA,KAAK,GAAAY,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEC,OAAO,GAAAF,KAAA,CAAPE,OAAO;IAAKZ,KAAK,GAAAC,wBAAA,CAAAS,KAAA,EAAAG,UAAA;EAGnC,oBACExB,KAAA,CAAAe,aAAA,CAACb,UAAU,EAAAc,QAAA;IAACG,MAAM,EAAET;EAAM,GAAKC,KAAK;IAAEH,GAAG,EAAEA;EAAI,IAC5CG,KAAK,CAACc,QAAQ,EACdF,OAAO,iBAAIvB,KAAA,CAAAe,aAAA,CAACX,MAAM;IAACM,KAAK,EAAEA,KAAM;IAACgB,OAAO,EAAEH,OAAQ;IAACI,QAAQ,EAAE;EAAE,CAAE,CACxD,CAAC;AAEjB,CAAC,CAAC"}
+{"version":3,"file":"Pill.js","names":["React","useId","useI18nContext","StyledPill","StyledRemove","StyledRemoveButton","Remove","forwardRef","TokenRemove","_ref","ref","_ref$color","color","props","_objectWithoutProperties","_excluded","i18n","createElement","_extends","role","size","$color","Pill","_ref2","_ref2$color","onClear","_excluded2","contentId","children","id","type","t","onClick"],"sources":["../../src/Pill/Pill.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useId } from '@react-aria/utils'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { Props } from '../_utils/types'\nimport { StyledPill, StyledRemove, StyledRemoveButton } from './Pill.styles'\nimport type { PillColor, PillProps } from './Pill.types'\n\ntype SVGAttributesWithPillColor = Omit<\n  React.SVGAttributes<SVGElement>,\n  'color'\n> & {\n  color: PillColor\n}\n\nconst Remove = React.forwardRef<\n  SVGSVGElement,\n  SVGAttributesWithPillColor & Props\n>(function TokenRemove({ color = 'gray', ...props }, ref) {\n  const i18n = useI18nContext()\n  return (\n    <StyledRemove ref={ref} role=\"img\" size=\"sm\" $color={color} {...props} />\n  )\n})\n\n/**\n\n Pills are used to highlight important information in a list or form such as\n a status.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pill--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill)\n\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { color = 'gray', onClear, ...props },\n  ref\n) {\n  const i18n = useI18nContext()\n  const contentId = useId()\n  return (\n    <StyledPill $color={color} {...props} ref={ref}>\n      {props.children && <span id={contentId}>{props.children}</span>}\n      {onClear && (\n        <StyledRemoveButton\n          type=\"button\"\n          aria-describedby={contentId}\n          aria-label={i18n.t('core.token.remove')}\n          onClick={onClear}\n          $color={color}\n        >\n          <Remove color={color} />\n        </StyledRemoveButton>\n      )}\n    </StyledPill>\n  )\n})\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,UAAU,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,eAAe;AAU5E,IAAMC,MAAM,gBAAGN,KAAK,CAACO,UAAU,CAG7B,SAASC,WAAWA,CAAAC,IAAA,EAA+BC,GAAG,EAAE;EAAA,IAAAC,UAAA,GAAAF,IAAA,CAAjCG,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,MAAM,GAAAA,UAAA;IAAKE,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC/C,IAAMC,IAAI,GAAGd,cAAc,CAAC,CAAC;EAC7B,oBACEF,KAAA,CAAAiB,aAAA,CAACb,YAAY,EAAAc,QAAA;IAACR,GAAG,EAAEA,GAAI;IAACS,IAAI,EAAC,KAAK;IAACC,IAAI,EAAC,IAAI;IAACC,MAAM,EAAET;EAAM,GAAKC,KAAK,CAAG,CAAC;AAE7E,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMS,IAAI,gBAAGtB,KAAK,CAACO,UAAU,CAA6B,SAASe,IAAIA,CAAAC,KAAA,EAE5Eb,GAAG,EACH;EAAA,IAAAc,WAAA,GAAAD,KAAA,CAFEX,KAAK;IAALA,KAAK,GAAAY,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEC,OAAO,GAAAF,KAAA,CAAPE,OAAO;IAAKZ,KAAK,GAAAC,wBAAA,CAAAS,KAAA,EAAAG,UAAA;EAGnC,IAAMV,IAAI,GAAGd,cAAc,CAAC,CAAC;EAC7B,IAAMyB,SAAS,GAAG1B,KAAK,CAAC,CAAC;EACzB,oBACED,KAAA,CAAAiB,aAAA,CAACd,UAAU,EAAAe,QAAA;IAACG,MAAM,EAAET;EAAM,GAAKC,KAAK;IAAEH,GAAG,EAAEA;EAAI,IAC5CG,KAAK,CAACe,QAAQ,iBAAI5B,KAAA,CAAAiB,aAAA;IAAMY,EAAE,EAAEF;EAAU,GAAEd,KAAK,CAACe,QAAe,CAAC,EAC9DH,OAAO,iBACNzB,KAAA,CAAAiB,aAAA,CAACZ,kBAAkB;IACjByB,IAAI,EAAC,QAAQ;IACb,oBAAkBH,SAAU;IAC5B,cAAYX,IAAI,CAACe,CAAC,CAAC,mBAAmB,CAAE;IACxCC,OAAO,EAAEP,OAAQ;IACjBJ,MAAM,EAAET;EAAM,gBAEdZ,KAAA,CAAAiB,aAAA,CAACX,MAAM;IAACM,KAAK,EAAEA;EAAM,CAAE,CACL,CAEZ,CAAC;AAEjB,CAAC,CAAC"}

package/dist/Pill/Pill.styles.d.ts

@@ -12,3 +12,6 @@ export declare const StyledRemove: import("styled-components/dist/types").IStyle
 }>> & string & Omit<import("react").ForwardRefExoticComponent<{
     size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
 } & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color: PillColor;
+}>> & string;

package/dist/Pill/Pill.styles.js

@@ -6,15 +6,19 @@ import { PillColorPalets } from './Pill.colorPalette';
 var pillButtonSize = 16;
 export var StyledPill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPill",
-  componentId: "core-12_25_1__sc-99e1t5-0"
+  componentId: "core-12_26_0__sc-99e1t5-0"
 })(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
   var $color = _ref.$color;
   return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
 });
 export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_25_1__sc-99e1t5-1"
-})(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;margin:0 -", "px 0 ", "px;width:", "px;vertical-align:top;", ""], pillButtonSize, pillButtonSize / 2 - spacing.xxs, spacing.xxs, pillButtonSize, function (_ref2) {
+  componentId: "core-12_26_0__sc-99e1t5-1"
+})(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
+export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StyledRemoveButton",
+  componentId: "core-12_26_0__sc-99e1t5-2"
+})(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
   var $color = _ref2.$color;
   return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);
 });

package/dist/Pill/Pill.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.styles.js","names":["Clear","styled","css","getTypographyIntent","spacing","PillColorPalets","pillButtonSize","StyledPill","span","withConfig","displayName","componentId","sm","xs","_ref","$color","backgroundColor","borderColor","color","StyledRemove","xxs","_ref2"],"sources":["../../src/Pill/Pill.styles.ts"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { spacing } from '../_styles/spacing'\nimport { PillColorPalets } from './Pill.colorPalette'\nimport type { PillColor } from './Pill.types'\n\nconst pillButtonSize = 16\n\nexport const StyledPill = styled.span<{ $color: PillColor }>`\n  ${getTypographyIntent('small')}\n  display: inline-block;\n  padding: 1px ${spacing.sm}px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ${spacing.xs}px;\n  }\n\n  ${({ $color }) => {\n    return css`\n      background-color: ${PillColorPalets[$color].backgroundColor};\n      border-color: ${PillColorPalets[$color].borderColor};\n      color: ${PillColorPalets[$color].color};\n    `\n  }}\n`\nexport const StyledRemove = styled(Clear)<{\n  $color: PillColor\n}>`\n  border-radius: 100%;\n  cursor: pointer;\n  flex: 0 0 auto;\n  height: ${pillButtonSize}px;\n  /* if pillButtonSize is 16 => 8px is the radios - 2px padding = 6px */\n  margin: 0 -${pillButtonSize / 2 - spacing.xxs}px 0 ${spacing.xxs}px;\n  width: ${pillButtonSize}px;\n  vertical-align: top;\n\n  ${({ $color }) => {\n    return css`\n      &:hover {\n        background: ${PillColorPalets[$color].color};\n        color: ${PillColorPalets[$color].backgroundColor};\n      }\n    `\n  }}\n`\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,qBAAqB;AAC3C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,eAAe,QAAQ,qBAAqB;AAGrD,IAAMC,cAAc,GAAG,EAAE;AAEzB,OAAO,IAAMC,UAAU,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIACjCR,mBAAmB,CAAC,OAAO,CAAC,EAEfC,OAAO,CAACQ,EAAE,EAMRR,OAAO,CAACS,EAAE,EAGzB,UAAAC,IAAA,EAAgB;EAAA,IAAbC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACT,OAAOb,GAAG,0DACYG,eAAe,CAACU,MAAM,CAAC,CAACC,eAAe,EAC3CX,eAAe,CAACU,MAAM,CAAC,CAACE,WAAW,EAC1CZ,eAAe,CAACU,MAAM,CAAC,CAACG,KAAK;AAE1C,CAAC,CACF;AACD,OAAO,IAAMC,YAAY,gBAAGlB,MAAM,CAACD,KAAK,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qIAM7BL,cAAc,EAEXA,cAAc,GAAG,CAAC,GAAGF,OAAO,CAACgB,GAAG,EAAQhB,OAAO,CAACgB,GAAG,EACvDd,cAAc,EAGrB,UAAAe,KAAA,EAAgB;EAAA,IAAbN,MAAM,GAAAM,KAAA,CAANN,MAAM;EACT,OAAOb,GAAG,2CAEQG,eAAe,CAACU,MAAM,CAAC,CAACG,KAAK,EAClCb,eAAe,CAACU,MAAM,CAAC,CAACC,eAAe;AAGtD,CAAC,CACF"}
+{"version":3,"file":"Pill.styles.js","names":["Clear","styled","css","getTypographyIntent","spacing","PillColorPalets","pillButtonSize","StyledPill","span","withConfig","displayName","componentId","sm","xs","_ref","$color","backgroundColor","borderColor","color","StyledRemove","StyledRemoveButton","button","xxs","_ref2"],"sources":["../../src/Pill/Pill.styles.ts"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { spacing } from '../_styles/spacing'\nimport { PillColorPalets } from './Pill.colorPalette'\nimport type { PillColor } from './Pill.types'\n\nconst pillButtonSize = 16\n\nexport const StyledPill = styled.span<{ $color: PillColor }>`\n  ${getTypographyIntent('small')}\n  display: inline-block;\n  padding: 1px ${spacing.sm}px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ${spacing.xs}px;\n  }\n\n  ${({ $color }) => {\n    return css`\n      background-color: ${PillColorPalets[$color].backgroundColor};\n      border-color: ${PillColorPalets[$color].borderColor};\n      color: ${PillColorPalets[$color].color};\n    `\n  }}\n`\nexport const StyledRemove = styled(Clear)<{\n  $color: PillColor\n}>`\n  border-radius: 100%;\n  cursor: pointer;\n  flex: 0 0 auto;\n  height: ${pillButtonSize}px;\n  width: ${pillButtonSize}px;\n  vertical-align: top;\n`\n\nexport const StyledRemoveButton = styled.button<{ $color: PillColor }>`\n  border: 0;\n  padding: 0;\n  border-radius: 100%;\n\n  // /* if pillButtonSize is 16 => 8px is the radios - 2px padding = 6px */\n  margin: 0 -${pillButtonSize / 2 - spacing.xxs}px 0 ${spacing.xxs}px;\n\n  color: inherit;\n\n  ${({ $color }) => {\n    return css`\n      &:hover {\n        background: ${PillColorPalets[$color].color};\n        color: ${PillColorPalets[$color].backgroundColor};\n      }\n    `\n  }}\n`\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,qBAAqB;AAC3C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,eAAe,QAAQ,qBAAqB;AAGrD,IAAMC,cAAc,GAAG,EAAE;AAEzB,OAAO,IAAMC,UAAU,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIACjCR,mBAAmB,CAAC,OAAO,CAAC,EAEfC,OAAO,CAACQ,EAAE,EAMRR,OAAO,CAACS,EAAE,EAGzB,UAAAC,IAAA,EAAgB;EAAA,IAAbC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACT,OAAOb,GAAG,0DACYG,eAAe,CAACU,MAAM,CAAC,CAACC,eAAe,EAC3CX,eAAe,CAACU,MAAM,CAAC,CAACE,WAAW,EAC1CZ,eAAe,CAACU,MAAM,CAAC,CAACG,KAAK;AAE1C,CAAC,CACF;AACD,OAAO,IAAMC,YAAY,gBAAGlB,MAAM,CAACD,KAAK,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uGAM7BL,cAAc,EACfA,cAAc,CAExB;AAED,OAAO,IAAMc,kBAAkB,gBAAGnB,MAAM,CAACoB,MAAM,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAMhCL,cAAc,GAAG,CAAC,GAAGF,OAAO,CAACkB,GAAG,EAAQlB,OAAO,CAACkB,GAAG,EAI9D,UAAAC,KAAA,EAAgB;EAAA,IAAbR,MAAM,GAAAQ,KAAA,CAANR,MAAM;EACT,OAAOb,GAAG,2CAEQG,eAAe,CAACU,MAAM,CAAC,CAACG,KAAK,EAClCb,eAAe,CAACU,MAAM,CAAC,CAACC,eAAe;AAGtD,CAAC,CACF"}

package/dist/Pill/Pill.types.d.ts

@@ -15,5 +15,5 @@ export interface PillProps extends React.ComponentPropsWithoutRef<'span'> {
      * ```
      * @since 11.13.1
      */
-    onClear?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Pill/Pill.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.types.js","names":[],"sources":["../../src/Pill/Pill.types.ts"],"sourcesContent":["export type PillColor =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'magenta'\n  | 'red'\n  | 'UNSAFE_orange'\n  | 'yellow'\n\nexport interface PillProps extends React.ComponentPropsWithoutRef<'span'> {\n  /**\n   * Controls the border, background and color of the Pill\n   * @defaultValue gray\n   * @since 10.19.0\n   */\n  color?: PillColor\n  /**\n   * It is possible for this component to have an empty value\n   * (render placeholder). Enables the x icon.\n   * ```\n   * (event) => {}\n   * ```\n   * @since 11.13.1\n   */\n  onClear?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void\n}\n"],"mappings":""}
+{"version":3,"file":"Pill.types.js","names":[],"sources":["../../src/Pill/Pill.types.ts"],"sourcesContent":["export type PillColor =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'magenta'\n  | 'red'\n  | 'UNSAFE_orange'\n  | 'yellow'\n\nexport interface PillProps extends React.ComponentPropsWithoutRef<'span'> {\n  /**\n   * Controls the border, background and color of the Pill\n   * @defaultValue gray\n   * @since 10.19.0\n   */\n  color?: PillColor\n  /**\n   * It is possible for this component to have an empty value\n   * (render placeholder). Enables the x icon.\n   * ```\n   * (event) => {}\n   * ```\n   * @since 11.13.1\n   */\n  onClear?: React.MouseEventHandler<HTMLButtonElement>\n}\n"],"mappings":""}

package/dist/PillSelect/PillSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillSelect.js","names":["Check","React","Pill","Select","Tooltip","OverflowObserver","PillSelectCheckedContainer","PillSelectLabel","PillSelectLabelWrapper","PillSelectOptionWrapper","emptyArr","defaultGetId","option","id","defaultGetLabel","label","defaultGetGroup","groupId","defaultGetSuggested","suggested","defaultGetColor","color","PillSelectOption","forwardRef","_ref","ref","selected","props","_objectWithoutProperties","_excluded","createElement","Option","_extends","size","PillSelectOptGroup","OptGroup","PillSelect","_ref2","afterHide_","afterHide","afterShow_","afterShow","_ref2$getColor","getColor","_ref2$getGroup","getGroup","_ref2$getId","getId","_ref2$getLabel","getLabel","_ref2$getSuggested","getSuggested","_ref2$groupGetId","groupGetId","_ref2$groupGetLabel","groupGetLabel","optgroups","_ref2$options","options","value","_excluded2","_React$useMemo","useMemo","optionsByGroup","map","optgroup","filter","_ref3","length","_React$useState","useState","_React$useState2","_slicedToArray","isOpened","setIsOpened","useCallback","_ref4","isOverflowing","pill","showTooltip","disabled","trigger","overlay","_ref5","Fragment","key","displayName"],"sources":["../../src/PillSelect/PillSelect.tsx"],"sourcesContent":["import { Check } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Pill } from '../Pill/Pill'\nimport { Select } from '../Select/Select'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  PillSelectCheckedContainer,\n  PillSelectLabel,\n  PillSelectLabelWrapper,\n  PillSelectOptionWrapper,\n} from './PillSelect.styles'\nimport type {\n  PillOptGroup,\n  PillOption,\n  PillOptionProps,\n  PillSelectProps,\n} from './PillSelect.types'\n\nconst emptyArr: Array<any> = []\n\nfunction defaultGetId(option: PillOption | PillOptGroup) {\n  return option.id\n}\n\nfunction defaultGetLabel(option: PillOption | PillOptGroup) {\n  return option.label\n}\n\nfunction defaultGetGroup(option: PillOption) {\n  return option.groupId\n}\n\nfunction defaultGetSuggested(option: PillOption) {\n  return option.suggested\n}\n\nexport function defaultGetColor(option: PillOption) {\n  return option.color\n}\n\nconst PillSelectOption = React.forwardRef<HTMLDivElement, PillOptionProps>(\n  function PillSelectOption({ color, label, selected, ...props }, ref) {\n    return (\n      <Select.Option selected={selected} {...props} ref={ref}>\n        <PillSelectOptionWrapper>\n          <Pill color={color}>{label}</Pill>\n          <PillSelectCheckedContainer>\n            {selected && <Check size=\"sm\" />}\n          </PillSelectCheckedContainer>\n        </PillSelectOptionWrapper>\n      </Select.Option>\n    )\n  }\n)\n\nconst PillSelectOptGroup = React.forwardRef<HTMLDivElement, DivAttributes>(\n  function PillSelectOptGroup(props, ref) {\n    return <Select.OptGroup {...props} ref={ref} />\n  }\n)\n\n/**\n\n Pill Selects are used when you need a user to select between one of several\n options that are shown as pills. Often this will be a status, such as marking\n an item “closed”, “draft”, etc.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pillselect--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill-select)\n\n */\nexport const PillSelect = React.forwardRef<\n  HTMLDivElement,\n  PillSelectProps<any, any>\n>(function PillSelect(\n  {\n    afterHide: afterHide_,\n    afterShow: afterShow_,\n    getColor = defaultGetColor,\n    getGroup = defaultGetGroup,\n    getId = defaultGetId,\n    getLabel = defaultGetLabel,\n    getSuggested = defaultGetSuggested,\n    groupGetId = defaultGetId,\n    groupGetLabel = defaultGetLabel,\n    optgroups,\n    options = emptyArr,\n    value,\n    ...props\n  },\n  ref\n) {\n  const { color, id, label } = React.useMemo(() => {\n    if (!value) {\n      return {}\n    }\n    return {\n      color: getColor(value),\n      id: getId(value),\n      label: getLabel(value),\n    }\n  }, [getColor, getId, getLabel, value])\n\n  const optionsByGroup = React.useMemo(\n    () =>\n      optgroups\n        ?.map((optgroup) => ({\n          optgroup,\n          options: options.filter(\n            (option) => getGroup(option) === groupGetId(optgroup)\n          ),\n        }))\n        .filter(({ options }) => options.length),\n    [options, optgroups, groupGetId, getGroup]\n  )\n\n  const [isOpened, setIsOpened] = React.useState(false)\n\n  const afterShow = React.useCallback(() => {\n    setIsOpened(true)\n    afterShow_?.()\n  }, [afterShow_])\n\n  const afterHide = React.useCallback(() => {\n    setIsOpened(false)\n    afterHide_?.()\n  }, [afterHide_])\n\n  return (\n    <Select\n      afterHide={afterHide}\n      afterShow={afterShow}\n      label={\n        label ? (\n          <OverflowObserver>\n            {({ isOverflowing, ref }) => {\n              const pill = (\n                <PillSelectLabel color={color} ref={ref}>\n                  {label}\n                </PillSelectLabel>\n              )\n\n              const showTooltip = isOverflowing && !isOpened\n\n              return (\n                <PillSelectLabelWrapper disabled={props.disabled}>\n                  {showTooltip ? (\n                    <Tooltip trigger=\"hover\" overlay={label}>\n                      {pill}\n                    </Tooltip>\n                  ) : (\n                    pill\n                  )}\n                </PillSelectLabelWrapper>\n              )\n            }}\n          </OverflowObserver>\n        ) : null\n      }\n      {...props}\n      ref={ref}\n    >\n      {optionsByGroup ? (\n        optionsByGroup.map(({ optgroup, options }) => (\n          <React.Fragment key={groupGetId(optgroup)}>\n            <PillSelectOptGroup key={groupGetId(optgroup)}>\n              {groupGetLabel(optgroup)}\n            </PillSelectOptGroup>\n            {options.map((option) => (\n              <PillSelectOption\n                key={getId(option)}\n                color={getColor(option)}\n                label={getLabel(option)}\n                selected={getId(option) === id}\n                suggested={getSuggested(option)}\n                value={option}\n              />\n            ))}\n          </React.Fragment>\n        ))\n      ) : (\n        <>\n          {options.map((option) => (\n            <PillSelectOption\n              key={getId(option)}\n              color={getColor(option)}\n              label={getLabel(option)}\n              selected={getId(option) === id}\n              suggested={getSuggested(option)}\n              value={option}\n            />\n          ))}\n        </>\n      )}\n    </Select>\n  )\n})\n\nPillSelect.displayName = 'PillSelect'\n"],"mappings":"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"}
+{"version":3,"file":"PillSelect.js","names":["Check","React","Pill","Select","Tooltip","OverflowObserver","PillSelectCheckedContainer","PillSelectLabel","PillSelectLabelWrapper","PillSelectOptionWrapper","emptyArr","defaultGetId","option","id","defaultGetLabel","label","defaultGetGroup","groupId","defaultGetSuggested","suggested","defaultGetColor","color","PillSelectOption","forwardRef","_ref","ref","selected","props","_objectWithoutProperties","_excluded","createElement","Option","_extends","size","PillSelectOptGroup","OptGroup","PillSelect","_ref2","afterHide_","afterHide","afterShow_","afterShow","_ref2$getColor","getColor","_ref2$getGroup","getGroup","_ref2$getId","getId","_ref2$getLabel","getLabel","_ref2$getSuggested","getSuggested","_ref2$groupGetId","groupGetId","_ref2$groupGetLabel","groupGetLabel","optgroups","_ref2$options","options","value","_excluded2","_React$useMemo","useMemo","optionsByGroup","map","optgroup","filter","_ref3","length","_React$useState","useState","_React$useState2","_slicedToArray","isOpened","setIsOpened","useCallback","_ref4","isOverflowing","pill","showTooltip","disabled","trigger","overlay","_ref5","Fragment","key","displayName"],"sources":["../../src/PillSelect/PillSelect.tsx"],"sourcesContent":["import { Check } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Pill } from '../Pill/Pill'\nimport { Select } from '../Select/Select'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport {\n  PillSelectCheckedContainer,\n  PillSelectLabel,\n  PillSelectLabelWrapper,\n  PillSelectOptionWrapper,\n} from './PillSelect.styles'\nimport type {\n  PillOptGroup,\n  PillOption,\n  PillOptionProps,\n  PillSelectProps,\n} from './PillSelect.types'\n\nconst emptyArr: Array<any> = []\n\nfunction defaultGetId(option: PillOption | PillOptGroup) {\n  return option.id\n}\n\nfunction defaultGetLabel(option: PillOption | PillOptGroup) {\n  return option.label\n}\n\nfunction defaultGetGroup(option: PillOption) {\n  return option.groupId\n}\n\nfunction defaultGetSuggested(option: PillOption) {\n  return option.suggested\n}\n\nexport function defaultGetColor(option: PillOption) {\n  return option.color\n}\n\nconst PillSelectOption = React.forwardRef<HTMLDivElement, PillOptionProps>(\n  function PillSelectOption({ color, label, selected, ...props }, ref) {\n    return (\n      <Select.Option selected={selected} {...props} ref={ref}>\n        <PillSelectOptionWrapper>\n          <Pill color={color}>{label}</Pill>\n          <PillSelectCheckedContainer>\n            {selected && <Check size=\"sm\" />}\n          </PillSelectCheckedContainer>\n        </PillSelectOptionWrapper>\n      </Select.Option>\n    )\n  }\n)\n\nconst PillSelectOptGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function PillSelectOptGroup(props, ref) {\n  return <Select.OptGroup {...props} ref={ref} />\n})\n\n/**\n\n Pill Selects are used when you need a user to select between one of several\n options that are shown as pills. Often this will be a status, such as marking\n an item “closed”, “draft”, etc.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pillselect--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill-select)\n\n */\nexport const PillSelect = React.forwardRef<\n  HTMLDivElement,\n  PillSelectProps<any, any>\n>(function PillSelect(\n  {\n    afterHide: afterHide_,\n    afterShow: afterShow_,\n    getColor = defaultGetColor,\n    getGroup = defaultGetGroup,\n    getId = defaultGetId,\n    getLabel = defaultGetLabel,\n    getSuggested = defaultGetSuggested,\n    groupGetId = defaultGetId,\n    groupGetLabel = defaultGetLabel,\n    optgroups,\n    options = emptyArr,\n    value,\n    ...props\n  },\n  ref\n) {\n  const { color, id, label } = React.useMemo(() => {\n    if (!value) {\n      return {}\n    }\n    return {\n      color: getColor(value),\n      id: getId(value),\n      label: getLabel(value),\n    }\n  }, [getColor, getId, getLabel, value])\n\n  const optionsByGroup = React.useMemo(\n    () =>\n      optgroups\n        ?.map((optgroup) => ({\n          optgroup,\n          options: options.filter(\n            (option) => getGroup(option) === groupGetId(optgroup)\n          ),\n        }))\n        .filter(({ options }) => options.length),\n    [options, optgroups, groupGetId, getGroup]\n  )\n\n  const [isOpened, setIsOpened] = React.useState(false)\n\n  const afterShow = React.useCallback(() => {\n    setIsOpened(true)\n    afterShow_?.()\n  }, [afterShow_])\n\n  const afterHide = React.useCallback(() => {\n    setIsOpened(false)\n    afterHide_?.()\n  }, [afterHide_])\n\n  return (\n    <Select\n      afterHide={afterHide}\n      afterShow={afterShow}\n      label={\n        label ? (\n          <OverflowObserver>\n            {({ isOverflowing, ref }) => {\n              const pill = (\n                <PillSelectLabel color={color} ref={ref}>\n                  {label}\n                </PillSelectLabel>\n              )\n\n              const showTooltip = isOverflowing && !isOpened\n\n              return (\n                <PillSelectLabelWrapper disabled={props.disabled}>\n                  {showTooltip ? (\n                    <Tooltip trigger=\"hover\" overlay={label}>\n                      {pill}\n                    </Tooltip>\n                  ) : (\n                    pill\n                  )}\n                </PillSelectLabelWrapper>\n              )\n            }}\n          </OverflowObserver>\n        ) : null\n      }\n      {...props}\n      ref={ref}\n    >\n      {optionsByGroup ? (\n        optionsByGroup.map(({ optgroup, options }) => (\n          <React.Fragment key={groupGetId(optgroup)}>\n            <PillSelectOptGroup key={groupGetId(optgroup)}>\n              {groupGetLabel(optgroup)}\n            </PillSelectOptGroup>\n            {options.map((option) => (\n              <PillSelectOption\n                key={getId(option)}\n                color={getColor(option)}\n                label={getLabel(option)}\n                selected={getId(option) === id}\n                suggested={getSuggested(option)}\n                value={option}\n              />\n            ))}\n          </React.Fragment>\n        ))\n      ) : (\n        <>\n          {options.map((option) => (\n            <PillSelectOption\n              key={getId(option)}\n              color={getColor(option)}\n              label={getLabel(option)}\n              selected={getId(option) === id}\n              suggested={getSuggested(option)}\n              value={option}\n            />\n          ))}\n        </>\n      )}\n    </Select>\n  )\n})\n\nPillSelect.displayName = 'PillSelect'\n"],"mappings":"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"}

package/dist/PillSelect/PillSelect.styles.js

@@ -6,19 +6,19 @@ import { spacing } from '../_styles/spacing';
 var checkedIconPlaceholderWidth = 32;
 export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectOptionWrapper",
-  componentId: "core-12_25_1__sc-1ai2ze0-0"
+  componentId: "core-12_26_0__sc-1ai2ze0-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectCheckedContainer",
-  componentId: "core-12_25_1__sc-1ai2ze0-1"
+  componentId: "core-12_26_0__sc-1ai2ze0-1"
 })(["align-items:center;color:", ";display:inline-flex;padding-left:", "px;width:", "px;"], colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
 export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "PillSelectLabel",
-  componentId: "core-12_25_1__sc-1ai2ze0-2"
+  componentId: "core-12_26_0__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_25_1__sc-1ai2ze0-3"
+  componentId: "core-12_26_0__sc-1ai2ze0-3"
 })(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["pointer-events:none;"]);

package/dist/Popover/Popover.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { PopoverContentProps, PopoverProps, PopoverRole } from './Popover.types';
 declare function PopoverInner<Role extends PopoverRole>({ children, initialIsVisible, restoreFocusOnHide, placement, overlay, overlayRef, role, ...props }: PopoverProps<Role>, ref: React.ForwardedRef<HTMLElement>): React.JSX.Element;
 /**
@@ -23,6 +22,6 @@ declare function PopoverInner<Role extends PopoverRole>({ children, initialIsVis
 
 */
 export declare const Popover: (<Role extends PopoverRole>(props: PopoverProps<Role>) => ReturnType<typeof PopoverInner>) & {
-    Content: React.ForwardRefExoticComponent<DivAttributes & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","_ref2$restoreFocusOnH","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n  PopoverContentProps,\n  PopoverProps,\n  PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & PopoverContentProps\n>(function Content(\n  { children, block = false, fluid = false, placement = 'top', ...props },\n  ref\n) {\n  return (\n    <StyledPopover ref={ref}>\n      <StyledPopoverContent\n        {...props}\n        $block={block}\n        $fluid={fluid}\n        $placement={placement}\n      >\n        {children}\n      </StyledPopoverContent>\n    </StyledPopover>\n  )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n  {\n    children,\n    initialIsVisible = false,\n    restoreFocusOnHide = false,\n    placement = 'top',\n    overlay,\n    overlayRef,\n    role,\n    ...props\n  }: PopoverProps<Role>,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const overlayNode = isReactElement(overlay) ? (\n    React.cloneElement(overlay, { placement })\n  ) : (\n    <React.Fragment />\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        role,\n        ref,\n        restoreFocusOnHide,\n        shrinkOverlay: true,\n        arrow: true,\n        overlayRef,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n  props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","_ref2$restoreFocusOnH","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n  PopoverContentProps,\n  PopoverProps,\n  PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & PopoverContentProps\n>(function Content(\n  { children, block = false, fluid = false, placement = 'top', ...props },\n  ref\n) {\n  return (\n    <StyledPopover ref={ref}>\n      <StyledPopoverContent\n        {...props}\n        $block={block}\n        $fluid={fluid}\n        $placement={placement}\n      >\n        {children}\n      </StyledPopoverContent>\n    </StyledPopover>\n  )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n  {\n    children,\n    initialIsVisible = false,\n    restoreFocusOnHide = false,\n    placement = 'top',\n    overlay,\n    overlayRef,\n    role,\n    ...props\n  }: PopoverProps<Role>,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const overlayNode = isReactElement(overlay) ? (\n    React.cloneElement(overlay, { placement })\n  ) : (\n    <React.Fragment />\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        role,\n        ref,\n        restoreFocusOnHide,\n        shrinkOverlay: true,\n        arrow: true,\n        overlayRef,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n  props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}

package/dist/Popover/Popover.styles.js

@@ -5,8 +5,8 @@ import { getShadow } from '../_styles/shadows';
 export var popoverArrowSize = 6;
 export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPopoverContent",
-  componentId: "core-12_25_1__sc-1cd0ihn-0"
-})(["background-color:", ";border-radius:", "px;color:", ";display:inline-block;max-width:250px;position:relative;", ""], colors.white, borderRadius.md, colors.gray15, function (_ref) {
+  componentId: "core-12_26_0__sc-1cd0ihn-0"
+})(["background-color:", ";border-radius:inherit;color:", ";display:inline-block;max-width:250px;position:relative;", ""], colors.white, colors.gray15, function (_ref) {
   var $block = _ref.$block,
     $fluid = _ref.$fluid;
   if ($block || $fluid) {
@@ -15,6 +15,6 @@ export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPopover",
-  componentId: "core-12_25_1__sc-1cd0ihn-1"
-})(["display:inline-block;", " & + [data-overlay-arrow]{background:", ";}"], getShadow(3), colors.white);
+  componentId: "core-12_26_0__sc-1cd0ihn-1"
+})(["display:inline-block;border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], borderRadius.md, getShadow(3), colors.white);
 //# sourceMappingURL=Popover.styles.js.map

package/dist/Popover/Popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.js","names":["styled","css","borderRadius","colors","getShadow","popoverArrowSize","StyledPopoverContent","span","withConfig","displayName","componentId","white","md","gray15","_ref","$block","$fluid","StyledPopover","div"],"sources":["../../src/Popover/Popover.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport type { Placement } from '../_utils/placement'\n\nexport const popoverArrowSize = 6\n\ninterface StyledPopoverProps {\n  $block: boolean\n  $fluid: boolean\n  $placement: Placement\n}\n\nexport const StyledPopoverContent = styled.span<StyledPopoverProps>`\n  background-color: ${colors.white};\n  border-radius: ${borderRadius.md}px;\n\n  color: ${colors.gray15};\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ${({ $block, $fluid }) => {\n    if ($block || $fluid) {\n      return css`\n        max-width: none;\n      `\n    }\n  }}\n`\n\nexport const StyledPopover = styled.div`\n  display: inline-block;\n  ${getShadow(3)}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.white};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAG9C,OAAO,IAAMC,gBAAgB,GAAG,CAAC;AAQjC,OAAO,IAAMC,oBAAoB,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0HACzBP,MAAM,CAACQ,KAAK,EACfT,YAAY,CAACU,EAAE,EAEvBT,MAAM,CAACU,MAAM,EAKpB,UAAAC,IAAA,EAAwB;EAAA,IAArBC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EACjB,IAAID,MAAM,IAAIC,MAAM,EAAE;IACpB,OAAOf,GAAG;EAGZ;AACF,CAAC,CACF;AAED,OAAO,IAAMgB,aAAa,gBAAGjB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAEnCN,SAAS,CAAC,CAAC,CAAC,EAGED,MAAM,CAACQ,KAAK,CAE7B"}
+{"version":3,"file":"Popover.styles.js","names":["styled","css","borderRadius","colors","getShadow","popoverArrowSize","StyledPopoverContent","span","withConfig","displayName","componentId","white","gray15","_ref","$block","$fluid","StyledPopover","div","md"],"sources":["../../src/Popover/Popover.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport type { Placement } from '../_utils/placement'\n\nexport const popoverArrowSize = 6\n\ninterface StyledPopoverProps {\n  $block: boolean\n  $fluid: boolean\n  $placement: Placement\n}\n\nexport const StyledPopoverContent = styled.span<StyledPopoverProps>`\n  background-color: ${colors.white};\n  border-radius: inherit;\n\n  color: ${colors.gray15};\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ${({ $block, $fluid }) => {\n    if ($block || $fluid) {\n      return css`\n        max-width: none;\n      `\n    }\n  }}\n`\n\nexport const StyledPopover = styled.div`\n  display: inline-block;\n  border-radius: ${borderRadius.md}px;\n  ${getShadow(3)}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.white};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAG9C,OAAO,IAAMC,gBAAgB,GAAG,CAAC;AAQjC,OAAO,IAAMC,oBAAoB,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HACzBP,MAAM,CAACQ,KAAK,EAGvBR,MAAM,CAACS,MAAM,EAKpB,UAAAC,IAAA,EAAwB;EAAA,IAArBC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EACjB,IAAID,MAAM,IAAIC,MAAM,EAAE;IACpB,OAAOd,GAAG;EAGZ;AACF,CAAC,CACF;AAED,OAAO,IAAMe,aAAa,gBAAGhB,MAAM,CAACiB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAEpBR,YAAY,CAACgB,EAAE,EAC9Bd,SAAS,CAAC,CAAC,CAAC,EAGED,MAAM,CAACQ,KAAK,CAE7B"}

package/dist/Portal/Portal.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortal",
-  componentId: "core-12_25_1__sc-15o1h2-0"
+  componentId: "core-12_26_0__sc-15o1h2-0"
 })(["left:0;pointer-events:none;position:fixed;top:0;> *{pointer-events:all;}"]);
 //# sourceMappingURL=Portal.styles.js.map

package/dist/ProgressBar/ProgressBar.styles.js

@@ -7,11 +7,11 @@ var animationDelay = '300ms';
 var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
 export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
   displayName: "StyledProgressBarLoader",
-  componentId: "core-12_25_1__sc-vdy2wl-0"
+  componentId: "core-12_26_0__sc-vdy2wl-0"
 })([""]);
 export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgressBar",
-  componentId: "core-12_25_1__sc-vdy2wl-1"
+  componentId: "core-12_26_0__sc-vdy2wl-1"
 })(["overflow:hidden;position:relative;display:block;height:", "px;background-color:", ";border-radius:", "px;margin:", "px 0;transition:background-color 0s linear;", " ", ""], loaderGridUnit, function (_ref) {
   var $complete = _ref.$complete;
   return $complete ? colors.blue50 : colors.gray94;

package/dist/ProgressBar/ProgressBar.types.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="react" />
 import type { LoaderProps } from '../Loader/Loader.types';
-import type { DivAttributes } from '../_utils/types';
 declare type ValueTextRender = (props: {
     value: number;
 }) => string;
-export interface ProgressBarProps extends LoaderProps, Omit<DivAttributes, 'aria-valuetext' | 'role'> {
+export interface ProgressBarProps extends LoaderProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-valuetext' | 'role'> {
     /**
      * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.
      * If this would not be accurate, use this property to make the progress bar value understandable.

package/dist/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.types.js","names":[],"sources":["../../src/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { LoaderProps } from '../Loader/Loader.types'\nimport type { DivAttributes } from '../_utils/types'\n\ntype ValueTextRender = (props: { value: number }) => string\n\n// TODO: add required 'aria-label' when closer to the major version\nexport interface ProgressBarProps\n  extends LoaderProps,\n    Omit<DivAttributes, 'aria-valuetext' | 'role'> {\n  /**\n   * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.\n   * If this would not be accurate, use this property to make the progress bar value understandable.\n   *\n   * @since 11.8.0\n   */\n  ['aria-valuetext']?: string | ValueTextRender\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.types.js","names":[],"sources":["../../src/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { LoaderProps } from '../Loader/Loader.types'\n\ntype ValueTextRender = (props: { value: number }) => string\n\n// TODO: add required 'aria-label' when closer to the major version\nexport interface ProgressBarProps\n  extends LoaderProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-valuetext' | 'role'> {\n  /**\n   * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.\n   * If this would not be accurate, use this property to make the progress bar value understandable.\n   *\n   * @since 11.8.0\n   */\n  ['aria-valuetext']?: string | ValueTextRender\n}\n"],"mappings":""}

package/dist/RadioButton/RadioButton.styles.js

@@ -9,7 +9,7 @@ export var dataQa = {
 var radioButtonSize = 20;
 export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledRadioButton",
-  componentId: "core-12_25_1__sc-nd95zs-0"
+  componentId: "core-12_26_0__sc-nd95zs-0"
 })(["color:", ";display:flex;position:relative;vertical-align:middle;& + &{margin-top:", "px;}", " ", ""], colors.gray15, spacing.md, function (_ref) {
   var $error = _ref.$error;
   return $error && css(["", ":before,", ":checked:not(:disabled) + ", ":before{border-color:", ";}", ":checked:disabled + ", ":before{border-color:", ";}"], StyledRadioButtonLabel, StyledRadioButtonInput, StyledRadioButtonLabel, colors.red50, StyledRadioButtonInput, StyledRadioButtonLabel, colors.gray85);
@@ -19,10 +19,10 @@ export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
 });
 export var StyledRadioButtonLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRadioButtonLabel",
-  componentId: "core-12_25_1__sc-nd95zs-1"
+  componentId: "core-12_26_0__sc-nd95zs-1"
 })(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray70, radioButtonSize, radioButtonSize, radioButtonSize);
 export var StyledRadioButtonInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledRadioButtonInput",
-  componentId: "core-12_25_1__sc-nd95zs-2"
+  componentId: "core-12_26_0__sc-nd95zs-2"
 })(["left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;&:focus:not(:checked),&[data-qa=", "]:not(:checked){&:not(:disabled) + ", ":before{", "}}&:focus:checked:not(:disabled),&[data-qa=", "]:checked:not(:disabled){+ ", ":before{box-shadow:0 0 0 2px ", ";}}&:checked + ", ":before{border:6px solid ", ";}&:disabled + ", ":before{border-color:", ";}&:disabled:checked + ", ":before{border-color:", ";}"], dataQa.focused, StyledRadioButtonLabel, getFocus(), dataQa.focused, StyledRadioButtonLabel, colors.blue40, StyledRadioButtonLabel, colors.blue50, StyledRadioButtonLabel, colors.gray85, StyledRadioButtonLabel, colors.blue85);
 //# sourceMappingURL=RadioButton.styles.js.map

package/dist/Required/Required.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredMark",
-  componentId: "core-12_25_1__sc-bja1ql-0"
+  componentId: "core-12_26_0__sc-bja1ql-0"
 })(["color:", ";", ""], colors.red50, function (_ref) {
   var $showLabel = _ref.$showLabel;
   if ($showLabel) {
@@ -15,10 +15,10 @@ export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledRequiredContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredContainer",
-  componentId: "core-12_25_1__sc-bja1ql-1"
+  componentId: "core-12_26_0__sc-bja1ql-1"
 })(["", " ", " > &{margin-left:", "px;}"], getTypographyIntent('small'), StyledCheckboxLabel, spacing.xs);
 export var StyledRequiredText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredText",
-  componentId: "core-12_25_1__sc-bja1ql-2"
+  componentId: "core-12_26_0__sc-bja1ql-2"
 })(["font-style:italic;color:", ";margin-left:4px;"], colors.gray45);
 //# sourceMappingURL=Required.styles.js.map