@procore/core-react 12.17.4 → 12.17.5

package/dist/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","names":["styled","css","Card","StyledItem","getTypographyIntent","colors","spacing","hiddenTab","visible","borderRadius","xs","StyledTabBase","div","withConfig","displayName","componentId","StyledTabInnerBase","StyledDropdownTabBase","getTabStyle","xl","_ref","$active","gray15","_ref2","$dark","gray90","blue40","StyledTab","StyledTabInner","_ref3","_ref4","white","gray70","StyledDropdownTab","StyledDropdownTabInner","StyledLink","span","getHelixHeaderTabStyles","sm","blue70","_ref5","gray30","StyledGlobalNavigationTab","StyledGlobalNavigationDropdownTab","StyledGlobalNavigationDropdownTabInner","StyledGlobalNavigationLink","StyledOverlay","blue50","StyledTabList","StyledTabs","nav","_ref6","_ref7","index","_ref8","_ref8$index","getStyledComponents","helixHeader","arguments","length","undefined","Tab","TabInner","Link","DropdownTab","DropdownTabInner"],"sources":["../../src/Tabs/Tabs.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card/Card'\nimport { StyledItem } from '../MenuImperative/MenuImperative.styles'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\ntype TabStyleProps = {\n  $active?: boolean\n  $dark?: boolean\n}\n\nconst hiddenTab = css`\n  pointer-events: none;\n  position: absolute;\n  visibility: hidden;\n`\n\nconst visible = css`\n  pointer-events: all;\n  position: relative;\n  visibility: visible;\n`\n\nconst borderRadius = css`\n  border-radius: ${spacing.xs}px ${spacing.xs}px 0 0;\n`\n\n//// START BASE LAYOUT COMPONENTS FOR TABS ////\n\n/**\n * Elements to handle general layout and browser resets.\n * Will be the referencable element (class) other selectors\n * that need to target general layout references.\n */\nconst StyledTabBase = styled.div<TabStyleProps>`\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n\n  // Browser button and anchor style resets\n  text-decoration: none;\n  background-color: transparent;\n  border: none;\n  font-family: inherit;\n  padding: 0;\n`\n\nconst StyledTabInnerBase = styled.div<TabStyleProps>`\n  align-self: baseline;\n  box-sizing: border-box;\n\n  &,\n  > a {\n    display: flex;\n    text-decoration: none;\n    width: 100%;\n  }\n`\n\n// This so that it can be visible/hidden via CSS down below\nconst StyledDropdownTabBase = styled(StyledTabBase)`\n  ${hiddenTab}\n`\n\n//// END BASE LAYOUT COMPONENTS FOR TABS ////\n\n//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n/**\n * Styles specific to the Design System general cases (not Global nav)\n */\nfunction getTabStyle() {\n  return css<TabStyleProps>`\n    ${borderRadius}\n    height: 26px;\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.xl}px;\n    }\n\n    a& {\n      ${borderRadius}\n    }\n\n    &,\n    a&,\n    button& {\n      ${({ $active }) => {\n        if ($active) {\n          return css`\n            border-bottom: 3px solid ${colors.gray15};\n          `\n        }\n      }}\n    }\n\n    &:focus,\n    &:focus-within,\n    &:hover {\n      background: ${({ $dark }) => ($dark ? 'transparent' : colors.gray90)};\n    }\n\n    &:focus,\n    &:focus-within {\n      box-shadow: inset 0 0 0 2px ${colors.blue40};\n      outline: none;\n\n      a {\n        outline: none;\n      }\n    }\n  `\n}\n\nconst StyledTab = styled(StyledTabBase)<TabStyleProps>`\n  ${getTabStyle}\n`\n\nconst StyledTabInner = styled(StyledTabInnerBase)<TabStyleProps>`\n  ${getTypographyIntent('body')}\n\n  padding: 0 ${spacing.xs}px;\n  font-weight: ${({ $active }) => ($active ? 600 : 400)};\n\n  &,\n  > a {\n    ${borderRadius}\n    color: ${colors.gray15};\n    height: 23px;\n  }\n\n  /* TODO: Dark mode was not considered for helix updates,\n  *  matching previous UX patterns - April 2nd 2024\n  */\n  ${({ $active, $dark }) => {\n    if ($dark) {\n      return css`\n        &,\n        > a,\n        button&,\n        a& {\n          color: ${$active ? colors.white : colors.gray70};\n\n          &:hover {\n            color: white;\n          }\n        }\n      `\n    }\n  }}\n`\n\nconst StyledDropdownTab = styled(StyledDropdownTabBase)`\n  ${getTabStyle}\n`\n\nconst StyledDropdownTabInner = styled(StyledTabInner)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledLink = styled.span`\n  align-items: center;\n  display: flex;\n  height: 23px; // TODO one-off\n  ${borderRadius}\n  box-sizing: border-box;\n`\n\n//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n//// START HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nfunction getHelixHeaderTabStyles() {\n  return css<TabStyleProps>`\n    border-radius: 4px;\n    color: ${colors.white};\n    height: 24px;\n    overflow: hidden;\n    padding: ${spacing.xs}px;\n    text-align: center;\n\n    ${getTypographyIntent('small')};\n    font-weight: 600; // Different than typograhy intent small, must be defined after\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.sm}px;\n    }\n\n    &:hover {\n      background: rgba(117, 131, 138, 0.3);\n      color: ${colors.white};\n      text-decoration: none;\n    }\n\n    &:focus {\n      outline: 2px solid ${colors.blue70};\n      outline-offset: -2px;\n      background: rgba(117, 131, 138, 0.3);\n    }\n\n    ${({ $active }) => {\n      if ($active) {\n        return css`\n          background: ${colors.gray30};\n        `\n      }\n    }}\n  `\n}\n\nconst StyledGlobalNavigationTab = styled(StyledTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTab = styled(StyledDropdownTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTabInner = styled(StyledTabInnerBase)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledGlobalNavigationLink = styled.span`\n  padding-left: 6px;\n  padding-right: 6px;\n`\n\n//// END HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nexport const StyledOverlay = styled(Card)`\n  max-height: 40vh;\n\n  ${StyledItem} {\n    padding: 0;\n    display: flex;\n    justify-content: center;\n\n    a {\n      margin: unset;\n      padding: unset;\n    }\n  }\n\n  ${StyledLink} {\n    padding: 0;\n    display: flex;\n  }\n\n  ${StyledTabInnerBase} {\n    // unsure why top and bottom are not uniform\n    // design docs show uniform 4px\n    padding: 2px 16px 4px 16px;\n  }\n\n  ${StyledLink},\n  ${StyledTabBase} {\n    color: ${colors.gray15};\n    border-radius: 0;\n    display: flex;\n    width: 100%;\n\n    background: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n    padding: 0;\n  }\n\n  [data-selected='true'] {\n    ${StyledLink}, ${StyledTabBase} {\n      border-bottom-color: transparent;\n      color: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledTabList = styled.div`\n  display: flex;\n  width: 100%;\n`\n\nexport const StyledTabs = styled.nav<{\n  $dark?: boolean\n  index?: number\n}>`\n  background-color: ${({ $dark }) => $dark && colors.gray15};\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n\n  ${StyledTabBase} {\n    // we want to hide all tabs after overflow index\n    &:nth-child(1n + ${({ index }) => index}) {\n      // but not the \"More\" dropdown tab\n      &:not(${StyledDropdownTabBase}) {\n        ${hiddenTab}\n      }\n    }\n  }\n\n  ${({ index = -1 }) =>\n    index >= 0 &&\n    css`\n      ${StyledDropdownTabBase} {\n        ${visible}\n      }\n    `}\n`\n\n/**\n * Switches between different Tab styles of traditional and helix header navigation.\n * Allows separate style CSS without conditionals across all the components.\n * @returns Subcomponents to render\n */\nexport function getStyledComponents(helixHeader = false) {\n  if (helixHeader) {\n    return {\n      Tab: StyledGlobalNavigationTab,\n      TabInner: StyledTabInnerBase,\n      Link: StyledGlobalNavigationLink,\n      DropdownTab: StyledGlobalNavigationDropdownTab,\n      DropdownTabInner: StyledGlobalNavigationDropdownTabInner,\n    }\n  }\n  return {\n    Tab: StyledTab,\n    TabInner: StyledTabInner,\n    Link: StyledLink,\n    DropdownTab: StyledDropdownTab,\n    DropdownTabInner: StyledDropdownTabInner,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.styles.js","names":["styled","css","Card","StyledItem","getTypographyIntent","colors","spacing","hiddenTab","visible","borderRadius","xs","StyledTabBase","div","withConfig","displayName","componentId","StyledTabInnerBase","StyledDropdownTabBase","getTabStyle","xl","_ref","$selected","gray15","_ref2","$dark","gray90","blue40","StyledTab","StyledTabInner","_ref3","_ref4","white","gray70","StyledDropdownTab","StyledDropdownTabInner","StyledLink","span","getHelixHeaderTabStyles","sm","blue70","_ref5","gray30","StyledGlobalNavigationTab","StyledGlobalNavigationDropdownTab","StyledGlobalNavigationDropdownTabInner","StyledGlobalNavigationLink","StyledOverlay","blue50","StyledTabList","StyledTabs","nav","_ref6","_ref7","index","_ref8","_ref8$index","getStyledComponents","helixHeader","arguments","length","undefined","Tab","TabInner","Link","DropdownTab","DropdownTabInner"],"sources":["../../src/Tabs/Tabs.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledItem } from '../MenuImperative/MenuImperative.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\ntype TabStyleProps = {\n  $selected?: boolean\n  $dark?: boolean\n}\n\nconst hiddenTab = css`\n  pointer-events: none;\n  position: absolute;\n  visibility: hidden;\n`\n\nconst visible = css`\n  pointer-events: all;\n  position: relative;\n  visibility: visible;\n`\n\nconst borderRadius = css`\n  border-radius: ${spacing.xs}px ${spacing.xs}px 0 0;\n`\n\n//// START BASE LAYOUT COMPONENTS FOR TABS ////\n\n/**\n * Elements to handle general layout and browser resets.\n * Will be the referencable element (class) other selectors\n * that need to target general layout references.\n */\nconst StyledTabBase = styled.div<TabStyleProps>`\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n\n  // Browser button and anchor style resets\n  text-decoration: none;\n  background-color: transparent;\n  border: none;\n  font-family: inherit;\n  padding: 0;\n`\n\nconst StyledTabInnerBase = styled.div<TabStyleProps>`\n  align-self: baseline;\n  box-sizing: border-box;\n\n  &,\n  > a {\n    display: flex;\n    text-decoration: none;\n    width: 100%;\n  }\n`\n\n// This so that it can be visible/hidden via CSS down below\nconst StyledDropdownTabBase = styled(StyledTabBase)`\n  ${hiddenTab}\n`\n\n//// END BASE LAYOUT COMPONENTS FOR TABS ////\n\n//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n/**\n * Styles specific to the Design System general cases (not Global nav)\n */\nfunction getTabStyle() {\n  return css<TabStyleProps>`\n    ${borderRadius};\n    height: 26px;\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.xl}px;\n    }\n\n    a& {\n      ${borderRadius}\n    }\n\n    &,\n    a&,\n    button& {\n      ${({ $selected }) => {\n        if ($selected) {\n          return css`\n            border-bottom: 3px solid ${colors.gray15};\n          `\n        }\n      }}\n    }\n\n    &:focus,\n    &:focus-within,\n    &:hover {\n      background: ${({ $dark }) => ($dark ? 'transparent' : colors.gray90)};\n    }\n\n    &:focus,\n    &:focus-within {\n      box-shadow: inset 0 0 0 2px ${colors.blue40};\n      outline: none;\n\n      a {\n        outline: none;\n      }\n    }\n  `\n}\n\nconst StyledTab = styled(StyledTabBase)<TabStyleProps>`\n  ${getTabStyle}\n`\n\nconst StyledTabInner = styled(StyledTabInnerBase)<TabStyleProps>`\n  ${getTypographyIntent('body')}\n\n  padding: 0 ${spacing.xs}px;\n  font-weight: ${({ $selected }) => ($selected ? 600 : 400)};\n\n  &,\n  > a {\n    ${borderRadius};\n    color: ${colors.gray15};\n    height: 23px;\n  }\n\n  /* TODO: Dark mode was not considered for helix updates,\n  *  matching previous UX patterns - April 2nd 2024\n  */\n  ${({ $selected, $dark }) => {\n    if ($dark) {\n      return css`\n        &,\n        > a,\n        button&,\n        a& {\n          color: ${$selected ? colors.white : colors.gray70};\n\n          &:hover {\n            color: white;\n          }\n        }\n      `\n    }\n  }}\n`\n\nconst StyledDropdownTab = styled(StyledDropdownTabBase)`\n  ${getTabStyle}\n`\n\nconst StyledDropdownTabInner = styled(StyledTabInner)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledLink = styled.span`\n  align-items: center;\n  display: flex;\n  height: 23px; // TODO one-off\n  ${borderRadius};\n  box-sizing: border-box;\n`\n\n//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n//// START HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nfunction getHelixHeaderTabStyles() {\n  return css<TabStyleProps>`\n    border-radius: 4px;\n    color: ${colors.white};\n    height: 24px;\n    overflow: hidden;\n    padding: ${spacing.xs}px;\n    text-align: center;\n\n    ${getTypographyIntent('small')};\n    font-weight: 600; // Different than typograhy intent small, must be defined after\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.sm}px;\n    }\n\n    &:hover {\n      background: rgba(117, 131, 138, 0.3);\n      color: ${colors.white};\n      text-decoration: none;\n    }\n\n    &:focus {\n      outline: 2px solid ${colors.blue70};\n      outline-offset: -2px;\n      background: rgba(117, 131, 138, 0.3);\n    }\n\n    ${({ $selected }) => {\n      if ($selected) {\n        return css`\n          background: ${colors.gray30};\n        `\n      }\n    }}\n  `\n}\n\nconst StyledGlobalNavigationTab = styled(StyledTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTab = styled(StyledDropdownTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTabInner = styled(StyledTabInnerBase)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledGlobalNavigationLink = styled.span`\n  padding-left: 6px;\n  padding-right: 6px;\n`\n\n//// END HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nexport const StyledOverlay = styled(Card)`\n  max-height: 40vh;\n\n  ${StyledItem} {\n    padding: 0;\n    display: flex;\n    justify-content: center;\n\n    a {\n      margin: unset;\n      padding: unset;\n    }\n  }\n\n  ${StyledLink} {\n    padding: 0;\n    display: flex;\n  }\n\n  ${StyledTabInnerBase} {\n    // unsure why top and bottom are not uniform\n    // design docs show uniform 4px\n    padding: 2px 16px 4px 16px;\n  }\n\n  ${StyledLink},\n  ${StyledTabBase} {\n    color: ${colors.gray15};\n    border-radius: 0;\n    display: flex;\n    width: 100%;\n\n    background: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n    padding: 0;\n  }\n\n  [data-selected='true'] {\n    ${StyledLink}, ${StyledTabBase} {\n      border-bottom-color: transparent;\n      color: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledTabList = styled.div`\n  display: flex;\n  width: 100%;\n`\n\nexport const StyledTabs = styled.nav<{\n  $dark?: boolean\n  index?: number\n}>`\n  background-color: ${({ $dark }) => $dark && colors.gray15};\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n\n  ${StyledTabBase} {\n    // we want to hide all tabs after overflow index\n    &:nth-child(1n + ${({ index }) => index}) {\n      // but not the \"More\" dropdown tab\n      &:not(${StyledDropdownTabBase}) {\n        ${hiddenTab}\n      }\n    }\n  }\n\n  ${({ index = -1 }) =>\n    index >= 0 &&\n    css`\n      ${StyledDropdownTabBase} {\n        ${visible}\n      }\n    `}\n`\n\n/**\n * Switches between different Tab styles of traditional and helix header navigation.\n * Allows separate style CSS without conditionals across all the components.\n * @returns Subcomponents to render\n */\nexport function getStyledComponents(helixHeader = false) {\n  if (helixHeader) {\n    return {\n      Tab: StyledGlobalNavigationTab,\n      TabInner: StyledTabInnerBase,\n      Link: StyledGlobalNavigationLink,\n      DropdownTab: StyledGlobalNavigationDropdownTab,\n      DropdownTabInner: StyledGlobalNavigationDropdownTabInner,\n    }\n  }\n  return {\n    Tab: StyledTab,\n    TabInner: StyledTabInner,\n    Link: StyledLink,\n    DropdownTab: StyledDropdownTab,\n    DropdownTabInner: StyledDropdownTabInner,\n  }\n}\n"],"mappings":"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"}

package/dist/Tabs/Tabs.types.d.ts

@@ -27,8 +27,15 @@ export interface BaseTabProps extends Props {
     /**
      * The tab is active
      * @since 10.19.0
+     * @deprecated Please use `selected` instead
+     * @deprecatedSince 12.18.0
      */
     active?: boolean;
+    /**
+     * The tab is selected
+     * @since 12.18.0
+     */
+    selected?: boolean;
     /**
      * Whether or not tab is in dark mode
      * @private
@@ -64,7 +71,7 @@ export interface BaseTabProps extends Props {
      */
     overflowing?: boolean;
     /**
-     * @deprecated please use the `active` and `dark` props to configure style. The
+     * @deprecated please use the `selected` props to configure style. The
      * `dropdown`, `hover`, and `overflowing` variants were only for internal use
      * and should not be used in clients
      * @deprecatedSince 11

package/dist/Tabs/Tabs.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.js","names":["tabVariant","none","active","dark","dropdown","hover","overflowing"],"sources":["../../src/Tabs/Tabs.types.ts"],"sourcesContent":["import type { AriaButtonProps } from '@react-aria/button'\nimport type React from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type TabRoleType = 'link' | 'button'\n\nexport interface TabPolyMap extends Record<TabRoleType, React.ElementType> {\n  button: 'button'\n  link: 'a'\n}\n\nexport type TabRole = TabRoleType | undefined\n\nexport type TabRef<Role extends TabRole = undefined> = Role extends TabRoleType\n  ? Polymorphic.Ref<TabPolyMap, Role>\n  : React.ComponentPropsWithRef<'div'>['ref']\n\nexport type TabProps<Role extends TabRole = undefined> = Role extends 'link'\n  ? Polymorphic.ComponentPropsWithRef<TabPolyMap, 'link', 'href', BaseTabProps>\n  : Role extends 'button'\n  ? Polymorphic.ComponentPropsWithRef<\n      TabPolyMap,\n      'button',\n      never,\n      BaseTabProps & { onPress: AriaButtonProps['onPress'] }\n    >\n  : BaseTabProps & { ref?: TabRef<undefined> }\n\nexport const tabVariant = {\n  none: '',\n  active: 'active',\n  dark: 'dark',\n  dropdown: 'dropdown',\n  hover: 'hover',\n  overflowing: 'overflowing',\n} as const\n\ntype TabVariant = (typeof tabVariant)[keyof typeof tabVariant]\n\nexport interface BaseTabProps extends Props {\n  /**\n   * The tab is active\n   * @since 10.19.0\n   */\n  active?: boolean\n\n  /**\n   * Whether or not tab is in dark mode\n   * @private\n   * @since 10.19.0\n   * @deprecated Custom styles intended for the global navigation header.\n   * Future Core-React will look holistically at themes and dark mode support.\n   *\n   * AFTER - Regular Tab styles. If needing dark support, please reach out.\n   * @deprecatedSince 12.8.0\n   */\n  dark?: boolean\n\n  /**\n   * @private\n   * @since 10.19.0\n   */\n  onMount?: (el: HTMLDivElement | null) => void\n\n  /**\n   * @private\n   */\n  onUnmount?: () => void\n\n  /**\n   * @deprecated This was never intended to be a public facing API and does not\n   * do anything. It will be removed in the future.\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  dropdown?: boolean\n\n  /**\n   * @deprecated This was never intended to be a public facing API and does not\n   * do anything. It will be removed in the future.\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  overflowing?: boolean\n\n  /**\n   * @deprecated please use the `active` and `dark` props to configure style. The\n   * `dropdown`, `hover`, and `overflowing` variants were only for internal use\n   * and should not be used in clients\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  variant?: TabVariant\n  /**\n   * @since 11.6.0\n   */\n  disabled?: boolean\n  /**\n   * Sets the Tab's role\n   * @since 11.6.0\n   */\n  role?: TabRole\n  /**\n   * Tab styles specific to the global navigation header.\n   * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n   * @since 12.8.0\n   */\n  UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabsTabProps extends BaseTabProps {}\n\nexport interface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  more?: string\n}\n\nexport interface TabsProps extends Props {\n  /**\n   * @since 10.19.0\n   * @deprecated Custom styles intended for the global navigation header.\n   * Future Core-React will look holistically at themes and dark mode support.\n   *\n   * AFTER - Regular Tab styles. If needing dark support, please reach out.\n   * @deprecatedSince 12.8.0\n   */\n  dark?: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n  /**\n   * Tab styles specific to the global navigation header.\n   * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n   * @since 12.8.0\n   */\n  UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabDropdownProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  visible?: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n}\n"],"mappings":"AA6BA,OAAO,IAAMA,UAAU,GAAG;EACxBC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,QAAQ;EAChBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,OAAO;EACdC,WAAW,EAAE;AACf,CAAU"}
+{"version":3,"file":"Tabs.types.js","names":["tabVariant","none","active","dark","dropdown","hover","overflowing"],"sources":["../../src/Tabs/Tabs.types.ts"],"sourcesContent":["import type { AriaButtonProps } from '@react-aria/button'\nimport type React from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type TabRoleType = 'link' | 'button'\n\nexport interface TabPolyMap extends Record<TabRoleType, React.ElementType> {\n  button: 'button'\n  link: 'a'\n}\n\nexport type TabRole = TabRoleType | undefined\n\nexport type TabRef<Role extends TabRole = undefined> = Role extends TabRoleType\n  ? Polymorphic.Ref<TabPolyMap, Role>\n  : React.ComponentPropsWithRef<'div'>['ref']\n\nexport type TabProps<Role extends TabRole = undefined> = Role extends 'link'\n  ? Polymorphic.ComponentPropsWithRef<TabPolyMap, 'link', 'href', BaseTabProps>\n  : Role extends 'button'\n  ? Polymorphic.ComponentPropsWithRef<\n      TabPolyMap,\n      'button',\n      never,\n      BaseTabProps & { onPress: AriaButtonProps['onPress'] }\n    >\n  : BaseTabProps & { ref?: TabRef<undefined> }\n\nexport const tabVariant = {\n  none: '',\n  active: 'active',\n  dark: 'dark',\n  dropdown: 'dropdown',\n  hover: 'hover',\n  overflowing: 'overflowing',\n} as const\n\ntype TabVariant = (typeof tabVariant)[keyof typeof tabVariant]\n\nexport interface BaseTabProps extends Props {\n  /**\n   * The tab is active\n   * @since 10.19.0\n   * @deprecated Please use `selected` instead\n   * @deprecatedSince 12.18.0\n   */\n  active?: boolean\n\n  /**\n   * The tab is selected\n   * @since 12.18.0\n   */\n  selected?: boolean\n\n  /**\n   * Whether or not tab is in dark mode\n   * @private\n   * @since 10.19.0\n   * @deprecated Custom styles intended for the global navigation header.\n   * Future Core-React will look holistically at themes and dark mode support.\n   *\n   * AFTER - Regular Tab styles. If needing dark support, please reach out.\n   * @deprecatedSince 12.8.0\n   */\n  dark?: boolean\n\n  /**\n   * @private\n   * @since 10.19.0\n   */\n  onMount?: (el: HTMLDivElement | null) => void\n\n  /**\n   * @private\n   */\n  onUnmount?: () => void\n\n  /**\n   * @deprecated This was never intended to be a public facing API and does not\n   * do anything. It will be removed in the future.\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  dropdown?: boolean\n\n  /**\n   * @deprecated This was never intended to be a public facing API and does not\n   * do anything. It will be removed in the future.\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  overflowing?: boolean\n\n  /**\n   * @deprecated please use the `selected` props to configure style. The\n   * `dropdown`, `hover`, and `overflowing` variants were only for internal use\n   * and should not be used in clients\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  variant?: TabVariant\n  /**\n   * @since 11.6.0\n   */\n  disabled?: boolean\n  /**\n   * Sets the Tab's role\n   * @since 11.6.0\n   */\n  role?: TabRole\n  /**\n   * Tab styles specific to the global navigation header.\n   * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n   * @since 12.8.0\n   */\n  UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabsTabProps extends BaseTabProps {}\n\nexport interface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  more?: string\n}\n\nexport interface TabsProps extends Props {\n  /**\n   * @since 10.19.0\n   * @deprecated Custom styles intended for the global navigation header.\n   * Future Core-React will look holistically at themes and dark mode support.\n   *\n   * AFTER - Regular Tab styles. If needing dark support, please reach out.\n   * @deprecatedSince 12.8.0\n   */\n  dark?: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n  /**\n   * Tab styles specific to the global navigation header.\n   * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n   * @since 12.8.0\n   */\n  UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabDropdownProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  visible?: boolean\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n}\n"],"mappings":"AA6BA,OAAO,IAAMA,UAAU,GAAG;EACxBC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,QAAQ;EAChBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,OAAO;EACdC,WAAW,EAAE;AACf,CAAU"}

package/dist/Tearsheet/Tearsheet.styles.js

@@ -47,7 +47,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
 };
 export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetContent",
-  componentId: "core-12_17_4__sc-ljrxoq-0"
+  componentId: "core-12_17_5__sc-ljrxoq-0"
 })(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
   var $open = _ref.$open,
     $placement = _ref.$placement;
@@ -67,7 +67,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
 export var minScrimSize = spacing.xxl * 3;
 export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetBody",
-  componentId: "core-12_17_4__sc-ljrxoq-1"
+  componentId: "core-12_17_5__sc-ljrxoq-1"
 })(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";", " ", "}"], colors.white, function (_ref5) {
   var $block = _ref5.$block,
     $placement = _ref5.$placement,
@@ -88,7 +88,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
 var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
 export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledScrimContainer",
-  componentId: "core-12_17_4__sc-ljrxoq-2"
+  componentId: "core-12_17_5__sc-ljrxoq-2"
 })(["", ""], function (_ref7) {
   var $placement = _ref7.$placement;
   var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
@@ -96,7 +96,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledButtonContainer",
-  componentId: "core-12_17_4__sc-ljrxoq-3"
+  componentId: "core-12_17_5__sc-ljrxoq-3"
 })(["", ""], function (_ref8) {
   var $placement = _ref8.$placement;
   switch ($placement) {
@@ -111,7 +111,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledButtonCard",
-  componentId: "core-12_17_4__sc-ljrxoq-4"
+  componentId: "core-12_17_5__sc-ljrxoq-4"
 })(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref9) {
   var $open = _ref9.$open;
   return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);

package/dist/TextArea/TextArea.styles.js

@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
 import { spacing } from '../_styles/spacing';
 export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   displayName: "StyledTextArea",
-  componentId: "core-12_17_4__sc-u5mow1-0"
+  componentId: "core-12_17_5__sc-u5mow1-0"
 })(["", " height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
   var _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'both' : _ref$resize;

package/dist/TextEditorOutput/TextEditorOutput.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledEditor = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledEditor",
-  componentId: "core-12_17_4__sc-1lje1b0-0"
+  componentId: "core-12_17_5__sc-1lje1b0-0"
 })(["> .tox-tinymce{border:none;}"]);
 //# sourceMappingURL=TextEditorOutput.styles.js.map

package/dist/Thumbnail/Thumbnail.styles.js

@@ -28,35 +28,35 @@ var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;
 });
 export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultilineCaption",
-  componentId: "core-12_17_4__sc-195f70c-0"
+  componentId: "core-12_17_5__sc-195f70c-0"
 })(["", " display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
 export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledCaptionText",
-  componentId: "core-12_17_4__sc-195f70c-1"
+  componentId: "core-12_17_5__sc-195f70c-1"
 })(["width:100%;"]);
 export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderCaption",
-  componentId: "core-12_17_4__sc-195f70c-2"
+  componentId: "core-12_17_5__sc-195f70c-2"
 })(["", ""], captionBase);
 export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSingleLineCaption",
-  componentId: "core-12_17_4__sc-195f70c-3"
+  componentId: "core-12_17_5__sc-195f70c-3"
 })(["display:flex;", ""], captionBase);
 export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionBody",
-  componentId: "core-12_17_4__sc-195f70c-4"
+  componentId: "core-12_17_5__sc-195f70c-4"
 })(["", ""], getEllipsis);
 export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionEnding",
-  componentId: "core-12_17_4__sc-195f70c-5"
+  componentId: "core-12_17_5__sc-195f70c-5"
 })(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
 export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledLabelText",
-  componentId: "core-12_17_4__sc-195f70c-6"
+  componentId: "core-12_17_5__sc-195f70c-6"
 })(["", ""], getEllipsis());
 export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
   displayName: "StyledThumbnailFigCaption",
-  componentId: "core-12_17_4__sc-195f70c-7"
+  componentId: "core-12_17_5__sc-195f70c-7"
 })(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
   var _ref5$$color = _ref5.$color,
     $color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
@@ -64,7 +64,7 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
 }, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_17_4__sc-195f70c-8"
+  componentId: "core-12_17_5__sc-195f70c-8"
 })(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
 var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
   var clickable = _ref6.clickable;
@@ -86,7 +86,7 @@ var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align
 });
 export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
   displayName: "StyledTickIcon",
-  componentId: "core-12_17_4__sc-195f70c-9"
+  componentId: "core-12_17_5__sc-195f70c-9"
 })(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref11) {
   var selected = _ref11.selected;
   return selected ? "\n        opacity: 1;\n        transform: scale(1);\n      " : '';
@@ -96,28 +96,28 @@ export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
 });
 export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
   displayName: "StyledFileIcon",
-  componentId: "core-12_17_4__sc-195f70c-10"
+  componentId: "core-12_17_5__sc-195f70c-10"
 })(["width:36.5%;height:auto;"]);
 export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailPreview",
-  componentId: "core-12_17_4__sc-195f70c-11"
+  componentId: "core-12_17_5__sc-195f70c-11"
 })(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref13) {
   var $bgImage = _ref13.$bgImage;
   return css(["background-image:url(", ");"], $bgImage);
 });
 export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailOverlay",
-  componentId: "core-12_17_4__sc-195f70c-12"
+  componentId: "core-12_17_5__sc-195f70c-12"
 })(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
 var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
 var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
 export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
   displayName: "StyledImageThumbnailImage",
-  componentId: "core-12_17_4__sc-195f70c-13"
+  componentId: "core-12_17_5__sc-195f70c-13"
 })([""]);
 export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnail",
-  componentId: "core-12_17_4__sc-195f70c-14"
+  componentId: "core-12_17_5__sc-195f70c-14"
 })(["", " flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref14) {
   var disabled = _ref14.disabled;
   return disabled ? "\n        &,\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(whiteOverlay, "\n          }\n        }\n        ").concat(StyledImageThumbnailPreview, ",\n        ").concat(StyledTickIcon, ",\n        ").concat(StyledImageThumbnailImage, " {\n          filter: saturate(0);\n        }\n        ").concat(StyledFileIcon, " {\n          filter: saturate(0);\n          z-index: -1;\n        }\n      ") : '';
@@ -146,7 +146,7 @@ export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailWrapper",
-  componentId: "core-12_17_4__sc-195f70c-15"
+  componentId: "core-12_17_5__sc-195f70c-15"
 })(["display:flex;", " ", ""], function (_ref20) {
   var size = _ref20.size;
   return size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
@@ -157,7 +157,7 @@ export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderThumbnail",
-  componentId: "core-12_17_4__sc-195f70c-16"
+  componentId: "core-12_17_5__sc-195f70c-16"
 })(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref22) {
   var clickable = _ref22.clickable;
   return clickable ? "\n        &:hover {\n          background-color: ".concat(colors.gray96, ";\n        }\n\n      ") : '';

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_17_4__sc-1inrbm9-0"
+  componentId: "core-12_17_5__sc-1inrbm9-0"
 })(["input{z-index:2;}"]);
 export var StyledGroupCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGroupCell",
-  componentId: "core-12_17_4__sc-1inrbm9-1"
+  componentId: "core-12_17_5__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_17_4__sc-1inrbm9-2"
+  componentId: "core-12_17_5__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_17_4__sc-1inrbm9-3"
+  componentId: "core-12_17_5__sc-1inrbm9-3"
 })(["height:100% !important;& > div{width:100% !important;}"]);
 export var StyledGroupTitle = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledGroupTitle",
-  componentId: "core-12_17_4__sc-1inrbm9-4"
+  componentId: "core-12_17_5__sc-1inrbm9-4"
 })(["", ""], getEllipsis);
 export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSpinnerWrapper",
-  componentId: "core-12_17_4__sc-1inrbm9-5"
+  componentId: "core-12_17_5__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_17_4__sc-1inrbm9-6"
+  componentId: "core-12_17_5__sc-1inrbm9-6"
 })(["display:flex;flex-wrap:wrap;outline:none;"]);
 //# sourceMappingURL=ThumbnailGrid.styles.js.map

package/dist/TieredSelect/TierSelectionTieredSelect.js

@@ -21,7 +21,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { ChevronRight, Home, Plus } from '@procore/core-icons/dist';
+import { ChevronRight, Help, Home, Plus } from '@procore/core-icons/dist';
 import React from 'react';
 import { Box } from '../Box/Box';
 import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs';
@@ -32,11 +32,12 @@ import { MenuImperative, useMenuImperativeControlNavigation } from '../MenuImper
 import { CloseOnFocus, OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
 import { Select } from '../Select/Select';
 import { Spinner } from '../Spinner/Spinner';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography/Typography';
 import { isEventSource } from '../_hooks/ClickOutside';
 import { useI18nContext } from '../_hooks/I18n';
 import { TieredSelectContext, useHighlightItemEffects } from './TieredSelect';
-import { StyledTieredSelect, StyledTieredSelectArrowButton, StyledTieredSelectBreadcrumbs, StyledTieredSelectHome, StyledTieredSelectLoadingMore, StyledTieredSelectOption, StyledTieredSelectOverlay, StyledTieredSelectSpinnerOverlay } from './TieredSelect.styles';
+import { StyledTieredSelect, StyledTieredSelectArrowButton, StyledTieredSelectBreadcrumbs, StyledTieredSelectHome, StyledTieredSelectIcon, StyledTieredSelectLoadingMore, StyledTieredSelectOption, StyledTieredSelectOverlay, StyledTieredSelectSpinnerOverlay } from './TieredSelect.styles';
 function stopProp(e) {
   if (e.key === 'Escape' || e.key === 'Esc') {
     e.stopPropagation();
@@ -65,6 +66,12 @@ function ArrowButton(_ref) {
     variant: "tertiary"
   }));
 }
+function ItemTooltipIcon() {
+  return /*#__PURE__*/React.createElement(StyledTieredSelectIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Help, null));
+}
 var QuickCreateInput = /*#__PURE__*/React.forwardRef(function QuickCreateInput(_ref2, ref) {
   var autoFocus = _ref2.autoFocus,
     onSubmit = _ref2.onSubmit,
@@ -122,7 +129,8 @@ var TieredSelectMenu = /*#__PURE__*/React.forwardRef(function TieredSelectMenu(_
     getNextGroupId = _React$useContext.getNextGroupId,
     i18nScope = _React$useContext.i18nScope,
     onQuickCreate = _React$useContext.onQuickCreate,
-    onScrollBottom = _React$useContext.onScrollBottom;
+    onScrollBottom = _React$useContext.onScrollBottom,
+    isTierDisabled = _React$useContext.isTierDisabled;
   var quickCreateRef = React.useRef(null);
   var _useOverlayTriggerCon = useOverlayTriggerContext(),
     hide = _useOverlayTriggerCon.hide;
@@ -336,18 +344,35 @@ var TieredSelectMenu = /*#__PURE__*/React.forwardRef(function TieredSelectMenu(_
   })) : null), !isQuickCreating ? /*#__PURE__*/React.createElement(Options, {
     emptyMessage: menuEmptyMessage
   }, filteredOptions.map(function (tier, index) {
-    return /*#__PURE__*/React.createElement(StyledTieredSelectOption, {
+    var _isTierDisabled;
+    var tooltip = (_isTierDisabled = isTierDisabled === null || isTierDisabled === void 0 ? void 0 : isTierDisabled(tier)) !== null && _isTierDisabled !== void 0 ? _isTierDisabled : false;
+    var isDisabled = Boolean(tooltip);
+    var showNextTierArrow = !tooltip && (Boolean(getNextGroupId(tier)) || Boolean(onQuickCreate));
+    var overlay = typeof tooltip === 'string' ? tooltip : null;
+    var menuItem = /*#__PURE__*/React.createElement(StyledTieredSelectOption, {
       item: tier,
       key: "".concat(getId(tier), "-").concat(index),
-      selected: isTierSelected(tier)
-    }, getLabel(tier), (getNextGroupId(tier) || onQuickCreate) && /*#__PURE__*/React.createElement(Box, {
+      selected: isTierSelected(tier),
+      disabled: isDisabled
+    }, getLabel(tier), showNextTierArrow && /*#__PURE__*/React.createElement(Box, {
       paddingLeft: "sm"
     }, /*#__PURE__*/React.createElement(ArrowButton, {
       "data-qa": "tiered-select-arrow",
       onClick: function onClick() {
         return onNavigateForward(tier);
       }
-    })));
+    })), tooltip && /*#__PURE__*/React.createElement(Box, {
+      paddingLeft: "sm"
+    }, /*#__PURE__*/React.createElement(ItemTooltipIcon, null)));
+    if (isDisabled && overlay) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        key: "".concat(getId(tier), "-").concat(index, "-tooltip"),
+        overlay: overlay,
+        trigger: 'hover',
+        placement: "right"
+      }, menuItem);
+    }
+    return menuItem;
   }).concat(loadingMore && !loading ? [/*#__PURE__*/React.createElement(StyledTieredSelectLoadingMore, {
     "data-qa": "tiered-select-loading-more",
     key: 'tiered-select-loading-more'