@procore/core-react 12.26.0 → 12.26.2

package/dist/Thumbnail/Thumbnail.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.styles.js","names":["styled","css","getTypographyIntent","Typography","typographyWeights","borderRadius","colors","getEllipsis","getFocus","spacing","DocumentIcon","thumbnailSizeSm","thumbnailSizeLg","labelHeight","labelFontSize","tickSize","rowLayoutCaptionWidth","multilineCaptionMaxHeight","lg","captionBase","gray15","_ref","$layout","sm","_ref2","xs","_ref3","$error","red50","_ref4","$disabled","gray70","StyledMultilineCaption","div","withConfig","displayName","componentId","StyledCaptionText","span","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","StyledLabelText","StyledThumbnailFigCaption","figcaption","_ref5","_ref5$$color","$color","bold","white","StyledLabel","thumbnailBase","gray85","md","_ref6","$clickable","_ref7","$selected","StyledTickIcon","_ref8","$focused","_ref9","_ref0","$size","sizeInPx","concat","svg","_ref1","_ref10","StyledFileIcon","StyledImageThumbnailPreview","_ref11","$bgImage","StyledImageThumbnailOverlay","blackOverlay","black","whiteOverlay","StyledImageThumbnailImage","img","StyledImageThumbnail","_ref12","_ref13","_ref14","_ref15","_ref16","_ref17","StyledThumbnailWrapper","_ref18","_ref19","isRowLayout","StyledPlaceholderThumbnail","_ref20","gray96","_ref21","_ref22","_ref23"],"sources":["../../src/Thumbnail/Thumbnail.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { TypographyProps } from '../Typography'\nimport {\n  getTypographyIntent,\n  Typography,\n  typographyWeights,\n} from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type { LayoutVariant, QaTags, SizeVariant } from './Thumbnail.types'\nimport { DocumentIcon } from './ThumbnailDocumentIcon'\n\nconst thumbnailSizeSm = 40\nconst thumbnailSizeLg = 104\nconst labelHeight = 24\nconst labelFontSize = 12\nconst tickSize = 24\nconst rowLayoutCaptionWidth = 288\nconst multilineCaptionMaxHeight = spacing.lg * 2\n\ninterface CaptionProps {\n  $layout: LayoutVariant\n  $error: boolean\n  $disabled: boolean\n}\n\ninterface StyledThumbnailProps {\n  $focused: boolean\n  $disabled: boolean\n  $selected: boolean\n  $clickable: boolean\n  $size: SizeVariant\n}\n\ninterface StyledTickIconProps {\n  $selected: boolean\n  $size: SizeVariant\n}\n\nconst captionBase = css<CaptionProps>`\n  color: ${colors.gray15};\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ${({ $layout }) =>\n    $layout === 'row' &&\n    css`\n      align-items: center;\n      margin-left: ${spacing.sm}px;\n      width: ${rowLayoutCaptionWidth}px;\n    `}\n\n  ${({ $layout }) =>\n    $layout === 'column' &&\n    css`\n      margin-top: ${spacing.xs / 2}px;\n      width: ${thumbnailSizeLg}px;\n    `}\n\n  ${({ $error }) =>\n    $error &&\n    css`\n      color: ${colors.red50};\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      color: ${colors.gray70};\n    `}\n`\n\nexport const StyledMultilineCaption = styled.div<CaptionProps>`\n  ${captionBase};\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ${multilineCaptionMaxHeight}px;\n`\n\nexport const StyledCaptionText = styled.span`\n  // fix word wrap issue in IE\n  width: 100%;\n`\n\nexport const StyledPlaceholderCaption = styled.div<CaptionProps>`\n  ${captionBase}\n`\n\nexport const StyledSingleLineCaption = styled.div<CaptionProps>`\n  display: flex;\n  ${captionBase}\n`\n\nexport const StyledSinglelineCaptionBody = styled.span`\n  ${getEllipsis}\n`\n\nexport const StyledSinglelineCaptionEnding = styled.span`\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n`\n\nexport const StyledLabelText = styled(Typography)`\n  ${getEllipsis()}\n`\n\nexport const StyledThumbnailFigCaption = styled.figcaption<{\n  $color?: TypographyProps['color']\n}>`\n  ${getTypographyIntent('small')}\n  ${getEllipsis()}\n  color: ${({ $color = 'gray15' }) => colors[$color]};\n  font-weight: ${typographyWeights.bold};\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  background-color: ${colors.white};\n`\n\nexport const StyledLabel = styled.div`\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  font-size: ${labelFontSize}px;\n  background-color: ${colors.white};\n`\n\nconst thumbnailBase = css<StyledThumbnailProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${colors.gray85};\n  border-radius: ${borderRadius.md}px;\n  margin: 0;\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 1;\n        transform: scale(1);\n      }\n    `}\n\n  &:focus {\n    ${getFocus()};\n  }\n\n  ${({ $focused }) => $focused && getFocus()}\n\n  ${({ $disabled, $clickable }) =>\n    $disabled &&\n    $clickable &&\n    css`\n      cursor: not-allowed;\n    `}\n\n  ${({ $size }) => {\n    const sizeInPx = `${$size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm}px`\n    return css`\n      width: ${sizeInPx};\n      height: ${sizeInPx};\n    `\n  }}\n`\n\nexport const StyledTickIcon = styled.svg<StyledTickIconProps>`\n  position: absolute;\n  top: ${spacing.sm}px;\n  right: ${spacing.sm}px;\n  width: ${tickSize}px;\n  height: ${tickSize}px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${({ $size }) =>\n    $size === 'sm' &&\n    css`\n      top: 50%;\n      left: 50%;\n      margin-top: ${-tickSize / 2}px;\n      margin-left: ${-tickSize / 2}px;\n    `}\n`\n\nexport const StyledFileIcon = styled(DocumentIcon)`\n  width: 36.5%;\n  height: auto;\n`\n\nexport const StyledImageThumbnailPreview = styled.div<{ $bgImage: string }>`\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ${({ $bgImage }) => css`\n    background-image: url(${$bgImage});\n  `}\n`\n\nexport const StyledImageThumbnailOverlay = styled.div`\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst blackOverlay = `\n  background-color: ${colors.black};\n  opacity: 0.2;\n`\n\nconst whiteOverlay = `\n  background-color: ${colors.white};\n  opacity: 0.5;\n`\n\nexport const StyledImageThumbnailImage = styled.img``\n\nexport const StyledImageThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase};\n  flex-direction: column;\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      &,\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${whiteOverlay}\n        }\n      }\n      ${StyledImageThumbnailPreview},\n      ${StyledTickIcon},\n        ${StyledImageThumbnailImage} {\n        filter: saturate(0);\n      }\n      ${StyledFileIcon} {\n        filter: saturate(0);\n        z-index: -1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: ${$selected ? 0 : 1};\n      }\n    `}\n\n  ${({ $selected, $focused }) =>\n    $selected &&\n    $focused &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $selected &&\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 0;\n      }\n    `}\n\n  ${({ $focused, $disabled }) =>\n    $focused &&\n    !$disabled &&\n    css`\n      ${StyledImageThumbnailOverlay} {\n        display: block;\n      }\n    `}\n\n  ${({ $clickable, $disabled }) =>\n    $clickable &&\n    !$disabled &&\n    css`\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${blackOverlay}\n        }\n      }\n    `}\n`\n\nexport const StyledThumbnailWrapper = styled.div<{\n  $layout: LayoutVariant\n  $size: SizeVariant\n  qa?: QaTags\n}>`\n  display: flex;\n  ${({ $size }) =>\n    $size === 'lg'\n      ? `\n        width: ${thumbnailSizeLg}px;\n      `\n      : ''}\n  ${({ $layout }) => {\n    const isRowLayout = $layout === 'row'\n    return isRowLayout\n      ? css`\n          flex-direction: row;\n          align-items: center;\n        `\n      : css`\n          flex-direction: column;\n          align-items: flex-start;\n        `\n  }}\n`\n\nexport const StyledPlaceholderThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase}\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      &:hover {\n        background-color: ${colors.gray96};\n      }\n    `}\n\n  ${({ $selected, $size }) =>\n    $selected &&\n    $size === 'sm' &&\n    css`\n      ${StyledFileIcon} {\n        display: none;\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${StyledFileIcon},\n      ${StyledTickIcon} {\n        filter: saturate(0);\n        opacity: 0.5;\n      }\n\n      &:hover {\n        background-color: inherit;\n      }\n    `}\n\n  ${({ $disabled, $selected }) =>\n    $disabled &&\n    !$selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 0;\n        transform: scale(0.75);\n      }\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Thumbnail.styles.js","names":["styled","css","getTypographyIntent","Typography","typographyWeights","borderRadius","colors","getEllipsis","getFocus","spacing","DocumentIcon","thumbnailSizeSm","thumbnailSizeLg","labelHeight","labelFontSize","tickSize","rowLayoutCaptionWidth","multilineCaptionMaxHeight","lg","captionBase","gray15","_ref","$layout","sm","_ref2","xs","_ref3","$error","red50","_ref4","$disabled","gray70","StyledMultilineCaption","div","withConfig","displayName","componentId","StyledCaptionText","span","StyledPlaceholderCaption","StyledSingleLineCaption","StyledSinglelineCaptionBody","StyledSinglelineCaptionEnding","StyledLabelText","StyledThumbnailFigCaption","figcaption","_ref5","_ref5$$color","$color","bold","white","StyledLabel","thumbnailBase","gray85","md","_ref6","$clickable","_ref7","$selected","StyledTickIcon","_ref8","$focused","_ref9","_ref0","$size","sizeInPx","concat","svg","_ref1","_ref10","StyledFileIcon","StyledImageThumbnailPreview","_ref11","$bgImage","StyledImageThumbnailOverlay","blackOverlay","black","whiteOverlay","StyledImageThumbnailImage","img","StyledImageThumbnail","_ref12","_ref13","_ref14","_ref15","_ref16","_ref17","StyledThumbnailWrapper","_ref18","_ref19","isRowLayout","StyledPlaceholderThumbnail","_ref20","gray96","_ref21","_ref22","_ref23"],"sources":["../../src/Thumbnail/Thumbnail.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { TypographyProps } from '../Typography'\nimport {\n  getTypographyIntent,\n  Typography,\n  typographyWeights,\n} from '../Typography'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type { LayoutVariant, SizeVariant } from './Thumbnail.types'\nimport { DocumentIcon } from './ThumbnailDocumentIcon'\n\nconst thumbnailSizeSm = 40\nconst thumbnailSizeLg = 104\nconst labelHeight = 24\nconst labelFontSize = 12\nconst tickSize = 24\nconst rowLayoutCaptionWidth = 288\nconst multilineCaptionMaxHeight = spacing.lg * 2\n\ninterface CaptionProps {\n  $layout: LayoutVariant\n  $error: boolean\n  $disabled: boolean\n}\n\ninterface StyledThumbnailProps {\n  $focused: boolean\n  $disabled: boolean\n  $selected: boolean\n  $clickable: boolean\n  $size: SizeVariant\n}\n\ninterface StyledTickIconProps {\n  $selected: boolean\n  $size: SizeVariant\n}\n\nconst captionBase = css<CaptionProps>`\n  color: ${colors.gray15};\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ${({ $layout }) =>\n    $layout === 'row' &&\n    css`\n      align-items: center;\n      margin-left: ${spacing.sm}px;\n      width: ${rowLayoutCaptionWidth}px;\n    `}\n\n  ${({ $layout }) =>\n    $layout === 'column' &&\n    css`\n      margin-top: ${spacing.xs / 2}px;\n      width: ${thumbnailSizeLg}px;\n    `}\n\n  ${({ $error }) =>\n    $error &&\n    css`\n      color: ${colors.red50};\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      color: ${colors.gray70};\n    `}\n`\n\nexport const StyledMultilineCaption = styled.div<CaptionProps>`\n  ${captionBase};\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ${multilineCaptionMaxHeight}px;\n`\n\nexport const StyledCaptionText = styled.span`\n  // fix word wrap issue in IE\n  width: 100%;\n`\n\nexport const StyledPlaceholderCaption = styled.div<CaptionProps>`\n  ${captionBase}\n`\n\nexport const StyledSingleLineCaption = styled.div<CaptionProps>`\n  display: flex;\n  ${captionBase}\n`\n\nexport const StyledSinglelineCaptionBody = styled.span`\n  ${getEllipsis}\n`\n\nexport const StyledSinglelineCaptionEnding = styled.span`\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n`\n\nexport const StyledLabelText = styled(Typography)`\n  ${getEllipsis()}\n`\n\nexport const StyledThumbnailFigCaption = styled.figcaption<{\n  $color?: TypographyProps['color']\n}>`\n  ${getTypographyIntent('small')}\n  ${getEllipsis()}\n  color: ${({ $color = 'gray15' }) => colors[$color]};\n  font-weight: ${typographyWeights.bold};\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  background-color: ${colors.white};\n`\n\nexport const StyledLabel = styled.div`\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ${labelHeight}px;\n  padding: ${spacing.sm / 2}px ${spacing.sm}px;\n  font-size: ${labelFontSize}px;\n  background-color: ${colors.white};\n`\n\nconst thumbnailBase = css<StyledThumbnailProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${colors.gray85};\n  border-radius: ${borderRadius.md}px;\n  margin: 0;\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 1;\n        transform: scale(1);\n      }\n    `}\n\n  &:focus {\n    ${getFocus()};\n  }\n\n  ${({ $focused }) => $focused && getFocus()}\n\n  ${({ $disabled, $clickable }) =>\n    $disabled &&\n    $clickable &&\n    css`\n      cursor: not-allowed;\n    `}\n\n  ${({ $size }) => {\n    const sizeInPx = `${$size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm}px`\n    return css`\n      width: ${sizeInPx};\n      height: ${sizeInPx};\n    `\n  }}\n`\n\nexport const StyledTickIcon = styled.svg<StyledTickIconProps>`\n  position: absolute;\n  top: ${spacing.sm}px;\n  right: ${spacing.sm}px;\n  width: ${tickSize}px;\n  height: ${tickSize}px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${({ $size }) =>\n    $size === 'sm' &&\n    css`\n      top: 50%;\n      left: 50%;\n      margin-top: ${-tickSize / 2}px;\n      margin-left: ${-tickSize / 2}px;\n    `}\n`\n\nexport const StyledFileIcon = styled(DocumentIcon)`\n  width: 36.5%;\n  height: auto;\n`\n\nexport const StyledImageThumbnailPreview = styled.div<{ $bgImage: string }>`\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ${({ $bgImage }) => css`\n    background-image: url(${$bgImage});\n  `}\n`\n\nexport const StyledImageThumbnailOverlay = styled.div`\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst blackOverlay = `\n  background-color: ${colors.black};\n  opacity: 0.2;\n`\n\nconst whiteOverlay = `\n  background-color: ${colors.white};\n  opacity: 0.5;\n`\n\nexport const StyledImageThumbnailImage = styled.img``\n\nexport const StyledImageThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase};\n  flex-direction: column;\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      &,\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${whiteOverlay}\n        }\n      }\n      ${StyledImageThumbnailPreview},\n      ${StyledTickIcon},\n        ${StyledImageThumbnailImage} {\n        filter: saturate(0);\n      }\n      ${StyledFileIcon} {\n        filter: saturate(0);\n        z-index: -1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: ${$selected ? 0 : 1};\n      }\n    `}\n\n  ${({ $selected, $focused }) =>\n    $selected &&\n    $focused &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 1;\n      }\n    `}\n\n  ${({ $selected, $focused, $disabled }) =>\n    $selected &&\n    $focused &&\n    $disabled &&\n    css`\n      ${StyledTickIcon} {\n        z-index: 0;\n      }\n    `}\n\n  ${({ $focused, $disabled }) =>\n    $focused &&\n    !$disabled &&\n    css`\n      ${StyledImageThumbnailOverlay} {\n        display: block;\n      }\n    `}\n\n  ${({ $clickable, $disabled }) =>\n    $clickable &&\n    !$disabled &&\n    css`\n      &:hover {\n        ${StyledImageThumbnailOverlay} {\n          display: block;\n          ${blackOverlay}\n        }\n      }\n    `}\n`\n\nexport const StyledThumbnailWrapper = styled.div<{\n  $layout: LayoutVariant\n  $size: SizeVariant\n}>`\n  display: flex;\n  ${({ $size }) =>\n    $size === 'lg'\n      ? `\n        width: ${thumbnailSizeLg}px;\n      `\n      : ''}\n  ${({ $layout }) => {\n    const isRowLayout = $layout === 'row'\n    return isRowLayout\n      ? css`\n          flex-direction: row;\n          align-items: center;\n        `\n      : css`\n          flex-direction: column;\n          align-items: flex-start;\n        `\n  }}\n`\n\nexport const StyledPlaceholderThumbnail = styled.div<StyledThumbnailProps>`\n  ${thumbnailBase}\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      &:hover {\n        background-color: ${colors.gray96};\n      }\n    `}\n\n  ${({ $selected, $size }) =>\n    $selected &&\n    $size === 'sm' &&\n    css`\n      ${StyledFileIcon} {\n        display: none;\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${StyledFileIcon},\n      ${StyledTickIcon} {\n        filter: saturate(0);\n        opacity: 0.5;\n      }\n\n      &:hover {\n        background-color: inherit;\n      }\n    `}\n\n  ${({ $disabled, $selected }) =>\n    $disabled &&\n    !$selected &&\n    css`\n      ${StyledTickIcon} {\n        opacity: 0;\n        transform: scale(0.75);\n      }\n    `}\n`\n"],"mappings":"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"}

package/dist/ThumbnailGrid/ThumbnailGrid.styles.js

@@ -7,31 +7,31 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
   displayName: "StyledCheckbox",
-  componentId: "core-12_26_0__sc-1inrbm9-0"
+  componentId: "core-12_26_2__sc-1inrbm9-0"
 })(["input{z-index:2;}"]);
 export var StyledGroupCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroupCell",
-  componentId: "core-12_26_0__sc-1inrbm9-1"
+  componentId: "core-12_26_2__sc-1inrbm9-1"
 })(["display:flex;align-items:flex-end;padding-bottom:", "px;"], spacing.md);
 export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
   displayName: "StyledThumbnail",
-  componentId: "core-12_26_0__sc-1inrbm9-2"
+  componentId: "core-12_26_2__sc-1inrbm9-2"
 })(["display:inline-flex;&:focus{outline:none;}"]);
 // VariableSizeGrid has provided width and height as inline style, so to make it flexible and support responsive !important was added
 export var StyledVariableSizeGrid = /*#__PURE__*/styled(VariableSizeGrid).withConfig({
   displayName: "StyledVariableSizeGrid",
-  componentId: "core-12_26_0__sc-1inrbm9-3"
+  componentId: "core-12_26_2__sc-1inrbm9-3"
 })(["height:100% !important;& > div{width:100% !important;}"]);
 export var StyledGroupTitle = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledGroupTitle",
-  componentId: "core-12_26_0__sc-1inrbm9-4"
+  componentId: "core-12_26_2__sc-1inrbm9-4"
 })(["", ""], getEllipsis);
 export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSpinnerWrapper",
-  componentId: "core-12_26_0__sc-1inrbm9-5"
+  componentId: "core-12_26_2__sc-1inrbm9-5"
 })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
 export var StyledThumbnailGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailGrid",
-  componentId: "core-12_26_0__sc-1inrbm9-6"
+  componentId: "core-12_26_2__sc-1inrbm9-6"
 })(["display:flex;flex-wrap:wrap;outline:none;"]);
 //# sourceMappingURL=ThumbnailGrid.styles.js.map

package/dist/TieredSelect/TieredSelect.styles.js

@@ -9,19 +9,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledTieredSelect = /*#__PURE__*/styled(MenuImperative).withConfig({
   displayName: "StyledTieredSelect",
-  componentId: "core-12_26_0__sc-e1ql06-0"
+  componentId: "core-12_26_2__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_26_0__sc-e1ql06-1"
+  componentId: "core-12_26_2__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_26_0__sc-e1ql06-2"
+  componentId: "core-12_26_2__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_26_0__sc-e1ql06-3"
+  componentId: "core-12_26_2__sc-e1ql06-3"
 })(["background-color:", ";flex-wrap:wrap;margin-top:", "px;max-height:68px;overflow-y:auto;padding:", "px ", "px;", ""], colors.gray96, spacing.sm, spacing.xs, spacing.md, function (_ref) {
   var $nonInteractive = _ref.$nonInteractive;
   if ($nonInteractive) {
@@ -30,22 +30,22 @@ export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).with
 });
 export var StyledTieredSelectHome = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectHome",
-  componentId: "core-12_26_0__sc-e1ql06-4"
+  componentId: "core-12_26_2__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_26_0__sc-e1ql06-5"
+  componentId: "core-12_26_2__sc-e1ql06-5"
 })(["align-items:center;display:flex;justify-content:space-between;padding:2px ", "px;"], spacing.lg);
 export var StyledTieredSelectLoadingMore = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectLoadingMore",
-  componentId: "core-12_26_0__sc-e1ql06-6"
+  componentId: "core-12_26_2__sc-e1ql06-6"
 })(["align-items:center;justify-content:center;padding:", "px ", "px 0px ", "px;"], spacing.xs, spacing.lg, spacing.lg);
 export var StyledTieredSelectOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledTieredSelectOverlay",
-  componentId: "core-12_26_0__sc-e1ql06-7"
+  componentId: "core-12_26_2__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_26_0__sc-e1ql06-8"
+  componentId: "core-12_26_2__sc-e1ql06-8"
 })(["min-height:auto;"]);
 //# sourceMappingURL=TieredSelect.styles.js.map

package/dist/Tile/Tile.styles.js

@@ -44,7 +44,7 @@ var getTileStyles = function getTileStyles(_ref) {
 };
 export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkTile",
-  componentId: "core-12_26_0__sc-8q9p0n-0"
+  componentId: "core-12_26_2__sc-8q9p0n-0"
 })(["", " text-decoration:none;color:inherit;"], function (_ref2) {
   var $orientation = _ref2.$orientation;
   return getTileStyles({
@@ -54,7 +54,7 @@ export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
 });
 export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelectableTile",
-  componentId: "core-12_26_0__sc-8q9p0n-1"
+  componentId: "core-12_26_2__sc-8q9p0n-1"
 })(["", ""], function (_ref3) {
   var $orientation = _ref3.$orientation,
     $selected = _ref3.$selected,
@@ -72,7 +72,7 @@ export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledInteractableTile",
-  componentId: "core-12_26_0__sc-8q9p0n-2"
+  componentId: "core-12_26_2__sc-8q9p0n-2"
 })(["", ""], function (_ref4) {
   var $orientation = _ref4.$orientation;
   return getTileStyles({
@@ -81,26 +81,26 @@ export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_26_0__sc-8q9p0n-3"
+  componentId: "core-12_26_2__sc-8q9p0n-3"
 })(["grid-area:footer;padding:", "px;> ", "{flex-wrap:wrap-reverse;}"], spacing.lg, StyledActions);
 export var StyledTileContent = /*#__PURE__*/styled(StyledContent).withConfig({
   displayName: "StyledTileContent",
-  componentId: "core-12_26_0__sc-8q9p0n-4"
+  componentId: "core-12_26_2__sc-8q9p0n-4"
 })(["grid-column-start:hero-start;grid-column-end:body-end;padding:", "px;+ ", "{padding-top:0;}> ", ",> ", " > ", ",> ", "{grid-column-gap:", "px;}"], spacing.lg, StyledFooter, SFormRow, SForm, SFormRow, SFormRow, spacing.md);
 export var StyledHeroMedia = /*#__PURE__*/styled.figure.withConfig({
   displayName: "StyledHeroMedia",
-  componentId: "core-12_26_0__sc-8q9p0n-5"
+  componentId: "core-12_26_2__sc-8q9p0n-5"
 })(["grid-area:hero;margin:0;position:relative;overflow:hidden;font-size:0;> *{font-size:initial;}+ ", "{grid-area:body;}> video{background-color:", ";}> img,> picture > img{object-fit:cover;}", ""], StyledTileContent, colors.black, function (_ref5) {
   var $orientation = _ref5.$orientation;
   return $orientation === 'landscape' && !isIE11() ? css(["border-top-left-radius:inherit;border-bottom-left-radius:inherit;> *,> picture > img{height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:inherit;border-top-right-radius:inherit;> *,> picture > img{min-height:inherit;max-height:inherit;height:auto;width:100%;}"]);
 });
 export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroOverlay",
-  componentId: "core-12_26_0__sc-8q9p0n-6"
+  componentId: "core-12_26_2__sc-8q9p0n-6"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;"]);
 export var StyledHeroText = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroText",
-  componentId: "core-12_26_0__sc-8q9p0n-7"
+  componentId: "core-12_26_2__sc-8q9p0n-7"
 })(["grid-area:hero;+ ", "{grid-area:body;}padding:", "px;border-radius:inherit;", ""], StyledTileContent, spacing.lg, function (_ref6) {
   var $orientation = _ref6.$orientation;
   return $orientation === 'landscape' ? css(["display:flex;flex-direction:column;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);

package/dist/Title/Title.styles.js

@@ -5,36 +5,36 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_26_0__sc-1t2ye1d-0"
+  componentId: "core-12_26_2__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_26_0__sc-1t2ye1d-1"
+  componentId: "core-12_26_2__sc-1t2ye1d-1"
 })(["margin-right:", "px;", ""], spacing.md, function (_ref) {
   var alignment = _ref.alignment;
   return css(["align-self:", ";"], alignment);
 });
 export var StyledTitleContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleContent",
-  componentId: "core-12_26_0__sc-1t2ye1d-2"
+  componentId: "core-12_26_2__sc-1t2ye1d-2"
 })(["align-self:center;", ""], function (_ref2) {
   var $hasActions = _ref2.$hasActions;
   return $hasActions && css(["margin-right:", "px;"], spacing.lg);
 });
 export var StyledText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledText",
-  componentId: "core-12_26_0__sc-1t2ye1d-3"
+  componentId: "core-12_26_2__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_26_0__sc-1t2ye1d-4"
+  componentId: "core-12_26_2__sc-1t2ye1d-4"
 })(["margin-left:", "px;", "{vertical-align:text-top;}"], spacing.sm, StyledPill);
 export var StyledTitleActions = /*#__PURE__*/styled(StyledActions).withConfig({
   displayName: "StyledTitleActions",
-  componentId: "core-12_26_0__sc-1t2ye1d-5"
+  componentId: "core-12_26_2__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_26_0__sc-1t2ye1d-6"
+  componentId: "core-12_26_2__sc-1t2ye1d-6"
 })(["display:block;margin-top:", "px;"], spacing.xs);
 //# sourceMappingURL=Title.styles.js.map

package/dist/Toast/Toast.styles.js

@@ -7,7 +7,7 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledToast = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToast",
-  componentId: "core-12_26_0__sc-1l6lk2n-0"
+  componentId: "core-12_26_2__sc-1l6lk2n-0"
 })(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
@@ -16,13 +16,13 @@ export var StyledToast = /*#__PURE__*/styled.div.withConfig({
 // $legacy is direct string inside Toast. Next is with subcomponents
 export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledToastText",
-  componentId: "core-12_26_0__sc-1l6lk2n-1"
+  componentId: "core-12_26_2__sc-1l6lk2n-1"
 })(["", " font-weight:", ";overflow:hidden;", ""], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
   var $legacy = _ref2.$legacy;
   return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
 });
 export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToastButton",
-  componentId: "core-12_26_0__sc-1l6lk2n-2"
+  componentId: "core-12_26_2__sc-1l6lk2n-2"
 })(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/ToggleButton/ToggleButton.styles.js

@@ -3,7 +3,7 @@ import { Button } from '../Button/Button';
 import { colors } from '../_styles/colors';
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_26_0__sc-1x59fxi-0"
+  componentId: "core-12_26_2__sc-1x59fxi-0"
 })(["", ""], function (_ref) {
   var $selected = _ref.$selected;
   return $selected && css(["background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}&:hover{background-color:", ";color:", ";}&:focus{background-color:", ";color:", ";}&:disabled{background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue96, colors.blue70, colors.blue70, colors.blue50);

package/dist/Token/Token.js

@@ -11,7 +11,8 @@ import { addSubcomponents } from '../_utils/addSubcomponents';
 import { StyledLabel, StyledRemove, StyledToken } from './Token.styles';
 var TokenContext = /*#__PURE__*/React.createContext({
   labelId: '',
-  removeId: ''
+  removeId: '',
+  isDisabled: false
 });
 var Parent = /*#__PURE__*/React.forwardRef(function Token(_ref, ref) {
   var children = _ref.children,
@@ -25,17 +26,20 @@ var Parent = /*#__PURE__*/React.forwardRef(function Token(_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var labelId = useId();
   var removeId = useId();
+  var isDisabled = disabled || variant === 'disabled';
+  var isFocused = focused || variant === 'focused';
   return /*#__PURE__*/React.createElement(TokenContext.Provider, {
     value: {
       labelId: labelId,
-      removeId: removeId
+      removeId: removeId,
+      isDisabled: isDisabled
     }
   }, /*#__PURE__*/React.createElement(StyledToken, _extends({
     ref: ref,
     tabIndex: 0
   }, props, {
-    $disabled: disabled || variant === 'disabled',
-    $focused: focused || variant === 'focused',
+    $disabled: isDisabled,
+    $focused: isFocused,
     $error: error
   }), children));
 });
@@ -43,13 +47,15 @@ var Remove = /*#__PURE__*/React.forwardRef(function TokenRemove(props, ref) {
   var i18n = useI18nContext();
   var _React$useContext = React.useContext(TokenContext),
     labelId = _React$useContext.labelId,
-    removeId = _React$useContext.removeId;
+    removeId = _React$useContext.removeId,
+    isDisabled = _React$useContext.isDisabled;
   return /*#__PURE__*/React.createElement(StyledRemove, _extends({
     ref: ref,
     "aria-hidden": "false",
     "aria-label": i18n.t('core.token.remove'),
     "aria-labelledby": "".concat(removeId, " ").concat(labelId),
-    id: removeId
+    id: removeId,
+    disabled: isDisabled
   }, props, {
     icon: /*#__PURE__*/React.createElement(Clear, {
       role: "img"

package/dist/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":["Clear","useId","React","useI18nContext","addSubcomponents","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","Remove","TokenRemove","i18n","_React$useContext","useContext","t","concat","id","icon","role","size","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport { StyledLabel, StyledRemove, StyledToken } from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const labelId = useId()\n  const removeId = useId()\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={0}\n        {...props}\n        $disabled={disabled || variant === 'disabled'}\n        $focused={focused || variant === 'focused'}\n        $error={error}\n      >\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":"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"}
+{"version":3,"file":"Token.js","names":["Clear","useId","React","useI18nContext","addSubcomponents","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","isDisabled","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","isFocused","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","Remove","TokenRemove","i18n","_React$useContext","useContext","t","concat","id","icon","role","size","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport { StyledLabel, StyledRemove, StyledToken } from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n  isDisabled: false,\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const labelId = useId()\n  const removeId = useId()\n  const isDisabled = disabled || variant === 'disabled'\n  const isFocused = focused || variant === 'focused'\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId, isDisabled }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={0}\n        {...props}\n        $disabled={isDisabled}\n        $focused={isFocused}\n        $error={error}\n      >\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId, isDisabled } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        disabled={isDisabled}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":"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"}

package/dist/Token/Token.styles.js

@@ -6,15 +6,15 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_26_0__sc-zqi94b-0"
+  componentId: "core-12_26_2__sc-zqi94b-0"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_26_0__sc-zqi94b-1"
-})(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40);
+  componentId: "core-12_26_2__sc-zqi94b-1"
+})(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40, colors.white);
 export var StyledToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToken",
-  componentId: "core-12_26_0__sc-zqi94b-2"
+  componentId: "core-12_26_2__sc-zqi94b-2"
 })(["align-items:center;background-color:", ";border-radius:200px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:24px;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", " ", " ", ""], colors.blue50, colors.white, spacing.xs, spacing.md, colors.blue45, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused,

package/dist/Token/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getTypographyIntent","colors","getEllipsis","getFocus","spacing","StyledLabel","span","withConfig","displayName","componentId","StyledRemove","white","sm","blue40","StyledToken","div","blue50","xs","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AACzD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCT,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMQ,YAAY,gBAAGb,MAAM,CAACE,MAAM,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oJAE/BR,MAAM,CAACU,KAAK,EAGRP,OAAO,CAACQ,EAAE,EAAQR,OAAO,CAACQ,EAAE,EAKzBX,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACY,MAAM,CAEzB;AAED,OAAO,IAAMC,WAAW,gBAAGjB,MAAM,CAACkB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfR,MAAM,CAACe,MAAM,EAGxBf,MAAM,CAACU,KAAK,EAOVP,OAAO,CAACa,EAAE,EAAMb,OAAO,CAACc,EAAE,EAIfjB,MAAM,CAACkB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACRxB,GAAG,sCACCK,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACkB,MAAM,EAE/B,CAACK,SAAS,IACZ1B,GAAG,8CACCY,YAAY,EACQT,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACkB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT1B,GAAG,0FACmBG,MAAM,CAAC0B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNhC,GAAG,wCAGqBG,MAAM,CAAC8B,KAAK,CAEnC;AAAA,EACJ"}
+{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getTypographyIntent","colors","getEllipsis","getFocus","spacing","StyledLabel","span","withConfig","displayName","componentId","StyledRemove","white","sm","blue40","StyledToken","div","blue50","xs","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: ${colors.white};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AACzD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCT,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMQ,YAAY,gBAAGb,MAAM,CAACE,MAAM,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMAE/BR,MAAM,CAACU,KAAK,EAGRP,OAAO,CAACQ,EAAE,EAAQR,OAAO,CAACQ,EAAE,EAKzBX,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACY,MAAM,EAKbZ,MAAM,CAACU,KAAK,CAExB;AAED,OAAO,IAAMG,WAAW,gBAAGjB,MAAM,CAACkB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfR,MAAM,CAACe,MAAM,EAGxBf,MAAM,CAACU,KAAK,EAOVP,OAAO,CAACa,EAAE,EAAMb,OAAO,CAACc,EAAE,EAIfjB,MAAM,CAACkB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACRxB,GAAG,sCACCK,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACkB,MAAM,EAE/B,CAACK,SAAS,IACZ1B,GAAG,8CACCY,YAAY,EACQT,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACkB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT1B,GAAG,0FACmBG,MAAM,CAAC0B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNhC,GAAG,wCAGqBG,MAAM,CAAC8B,KAAK,CAEnC;AAAA,EACJ"}

package/dist/Token/Token.types.d.ts

@@ -37,4 +37,5 @@ export interface TokenProps {
 export interface TokenContextApi {
     labelId: string;
     removeId: string;
+    isDisabled: boolean;
 }

package/dist/Token/Token.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n}\n"],"mappings":""}
+{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n  isDisabled: boolean\n}\n"],"mappings":""}

package/dist/ToolHeader/ToolHeader.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBadge",
-  componentId: "core-12_26_0__sc-1jpjx47-0"
+  componentId: "core-12_26_2__sc-1jpjx47-0"
 })(["", " border-radius:10px;border-style:solid;border-width:1px;display:inline-block;margin-bottom:", "px;padding:1px ", "px;", ""], getTypographyIntent('small'), spacing.sm, spacing.sm, function (_ref) {
   var $variant = _ref.$variant;
   if ($variant) {
@@ -18,22 +18,22 @@ export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
 // TODO in v12 remove cursor: pointer;
 export var StyledToolHeaderIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeaderIconContainer",
-  componentId: "core-12_26_0__sc-1jpjx47-1"
+  componentId: "core-12_26_2__sc-1jpjx47-1"
 })(["color:", ";cursor:pointer;display:inline-flex;flex:0 0 auto;"], colors.orange50);
 export var StyledHeaderTabs = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderTabs",
-  componentId: "core-12_26_0__sc-1jpjx47-2"
+  componentId: "core-12_26_2__sc-1jpjx47-2"
 })(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_26_0__sc-1jpjx47-3"
+  componentId: "core-12_26_2__sc-1jpjx47-3"
 })(["flex:0 0 auto;margin-left:auto;padding-left:", "px;"], spacing.lg);
 export var StyledToolHeaderTitle = /*#__PURE__*/styled(H1).withConfig({
   displayName: "StyledToolHeaderTitle",
-  componentId: "core-12_26_0__sc-1jpjx47-4"
+  componentId: "core-12_26_2__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_26_0__sc-1jpjx47-5"
+  componentId: "core-12_26_2__sc-1jpjx47-5"
 })(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg);
 //# sourceMappingURL=ToolHeader.styles.js.map

package/dist/ToolLandingPage/ToolLandingPage.styles.js

@@ -3,14 +3,14 @@ import { Page } from '../PageLayout';
 import { spacing } from '../_styles/spacing';
 export var StyledTitleOuter = /*#__PURE__*/styled(Page.Title).withConfig({
   displayName: "StyledTitleOuter",
-  componentId: "core-12_26_0__sc-wa8j06-0"
+  componentId: "core-12_26_2__sc-wa8j06-0"
 })(["align-items:center;display:flex;gap:", "px;"], spacing.md);
 export var StyledTitleInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleInner",
-  componentId: "core-12_26_0__sc-wa8j06-1"
+  componentId: "core-12_26_2__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_26_0__sc-wa8j06-2"
+  componentId: "core-12_26_2__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.styles.js

@@ -6,10 +6,10 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledTooltip = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTooltip",
-  componentId: "core-12_26_0__sc-1fawsi4-0"
+  componentId: "core-12_26_2__sc-1fawsi4-0"
 })(["", " color:", ";max-width:200px;padding:", "px ", "px;position:relative;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;"], getTypographyIntent('small'), colors.white, spacing.sm, spacing.md);
 export var StyledContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_26_0__sc-1fawsi4-1"
+  componentId: "core-12_26_2__sc-1fawsi4-1"
 })(["display:inline-flex;background-color:", ";border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], colors.gray15, borderRadius.md, getShadow(3, 'bottom'), colors.gray15);
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tree/Tree.styles.js

@@ -5,11 +5,11 @@ import { Typography } from '../Typography/Typography';
 import { colors } from '../_styles/colors';
 export var StyledFilenameCaption = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledFilenameCaption",
-  componentId: "core-12_26_0__sc-2d45b5-0"
+  componentId: "core-12_26_2__sc-2d45b5-0"
 })(["display:flex;width:100%;"]);
 export var StyledTree = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTree",
-  componentId: "core-12_26_0__sc-2d45b5-1"
+  componentId: "core-12_26_2__sc-2d45b5-1"
 })(["width:100%;height:100%;min-height:36px;outline:none;overflow:auto;"]);
 export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -17,7 +17,7 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   }
 }).withConfig({
   displayName: "StyledTreeRowContainer",
-  componentId: "core-12_26_0__sc-2d45b5-2"
+  componentId: "core-12_26_2__sc-2d45b5-2"
 })(["display:flex;align-items:center;height:36px;background:transparent;box-shadow:inset 4px 0px 0px transparent;cursor:default;outline:none;", " &:hover{background:", ";}", " ", ""], function (_ref) {
   var isSelectable = _ref.isSelectable,
     $isSelectable = _ref.$isSelectable;
@@ -35,30 +35,30 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
 });
 export var StyledTreeRowContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowContent",
-  componentId: "core-12_26_0__sc-2d45b5-3"
+  componentId: "core-12_26_2__sc-2d45b5-3"
 })(["display:flex;align-items:center;"]);
 export var StyledTreeRowWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowWrapper",
-  componentId: "core-12_26_0__sc-2d45b5-4"
+  componentId: "core-12_26_2__sc-2d45b5-4"
 })(["outline:none;"]);
 var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledIconBase",
-  componentId: "core-12_26_0__sc-2d45b5-5"
+  componentId: "core-12_26_2__sc-2d45b5-5"
 })(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;min-width:24px;min-height:24px;"]);
 export var StyledChevronContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronContainer",
-  componentId: "core-12_26_0__sc-2d45b5-6"
+  componentId: "core-12_26_2__sc-2d45b5-6"
 })([""]);
 export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_26_0__sc-2d45b5-7"
+  componentId: "core-12_26_2__sc-2d45b5-7"
 })(["color:", ";"], function (_ref4) {
   var $isSelected = _ref4.$isSelected;
   return $isSelected ? colors.blue45 : colors.gray40;
 });
 export var StyledChevron = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevron",
-  componentId: "core-12_26_0__sc-2d45b5-8"
+  componentId: "core-12_26_2__sc-2d45b5-8"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
   var $isExpanded = _ref5.$isExpanded;
   return $isExpanded ? 90 : 0;