@procore/core-react 12.50.0 → 12.51.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 12.51.0
+
+### Minor Changes
+
+- 1785fc0: Add `enableShadowDOM` and `isShadowDOMEnabled` exports to opt core-react's React Aria focus behavior into shadow DOM traversal. This allows app bootstrap code to enable shadow-root-aware focus containment and tab order for components like Tearsheet, Modal, and overlays.
+- 103bc86: Upgrade cdn-translations package to latest version v1
+- 1d2c7fd: `Breadcrumbs` will chain a provided `aria-labelledby` to the existing label; multiple breacrumbs on a page need unique names. Test Breaking - Update existing navigation aria-label to _Breadcrumbs_ from _Breadcrumb_
+
+### Patch Changes
+
+- a8c02c4: Add keyboard focus border to menu items for WCAG 2.1 SC 1.4.11 compliance. When navigating menu options via keyboard, a 2px inset blue border (`colors.blue40`) now appears on the highlighted item. Mouse hover continues to show only the background color change. Affected components: MenuImperative (shared StyledItem covering Select, MultiSelect, Dropdown, TieredSelect, GroupSelect, PillSelect, DateSelect, Menu, Tabs), SuperSelect, and DropdownFlyout.
+- Internal- Primary Button CSS variables
+
+## 12.50.1
+
+### Patch Changes
+
+- f0bb16b: Fix disabled state color and background color for StyledMultiInput when being used in erb routes.
+- 195f0ba: - Update `Dropdown` accessibility semantics so searchable dropdowns has `aria-haspopup="dialog"`.
+- 0b792e4: Fix `AnchorNavigation` scrolling alignment in page layouts with sticky/global headers
+
 ## 12.50.0
 
 ### Minor Changes

package/README.md

@@ -63,6 +63,20 @@ export function ButtonCustom(props: ButtonProps) {
 }
 ```
 
+### Shadow DOM focus support
+
+If your app renders interactive content inside an open shadow root (for example, micro-frontend content in a custom element), enable React Aria shadow-DOM focus traversal for core-react at app bootstrap.
+
+This ensures focus containment and tab order can move through shadow-root content for components that use React Aria focus management, like Tearsheet, Modal, and overlays.
+
+```tsx
+import { enableShadowDOM } from '@procore/core-react'
+
+enableShadowDOM()
+```
+
+Call this once before mounting your app. The call is idempotent, and each application using its own core-react instance should invoke it during bootstrap.
+
 ## Developing
 
 To get started, type the following from the project root directory:

package/dist/AnchorNavigation/AnchorNavigation.styles.js

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

package/dist/AnchorNavigation/AnchorNavigationProvider.js

@@ -40,6 +40,14 @@ function getElementScrollPosition(element, scroller) {
   } while (el && el !== scroller);
   return y;
 }
+function getEffectiveOffset(offset) {
+  var remoteHeader = document.getElementById('remote-header-container');
+  if (!remoteHeader) {
+    return offset;
+  }
+  var headerBottom = remoteHeader.getBoundingClientRect().bottom;
+  return offset + Math.max(headerBottom, 0);
+}
 export function AnchorNavigationProvider(_ref) {
   var children = _ref.children,
     _ref$offset = _ref.offset,
@@ -58,6 +66,7 @@ export function AnchorNavigationProvider(_ref) {
     var _ref$current = ref.current,
       sections = _ref$current.sections,
       scroller = _ref$current.scroller;
+    var effectiveOffset = getEffectiveOffset(offset);
     setSelected(id);
     var element = (_sections$find = sections.find(function (section) {
       return section.id === id;
@@ -65,7 +74,7 @@ export function AnchorNavigationProvider(_ref) {
     if (element) {
       ;
       (scroller || window).scrollTo({
-        top: getElementScrollPosition(element, scroller) - offset,
+        top: getElementScrollPosition(element, scroller) - effectiveOffset,
         behavior: 'smooth'
       });
 
@@ -98,7 +107,7 @@ export function AnchorNavigationProvider(_ref) {
         ref.current.blockScrollTimestamp = now;
         return;
       }
-      var y = (scroller ? scroller.scrollTop : window.scrollY || document.documentElement.scrollTop) + offset;
+      var y = (scroller ? scroller.scrollTop : window.scrollY || document.documentElement.scrollTop) + getEffectiveOffset(offset);
 
       // Before the first element
       if (getElementScrollPosition(sections[0].element, scroller) > y) {

package/dist/AnchorNavigation/AnchorNavigationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorNavigationProvider.js","names":["throttle","React","AnchorNavigationContext","createContext","offset","sections","selected","registerSection","unregisterSection","onSelect","useAnchorNavigationContext","useContext","findScrollContainer","element","parent","parentElement","_window$getComputedSt","window","getComputedStyle","overflow","split","every","o","document","documentElement","getElementScrollPosition","scroller","y","el","offsetTop","offsetParent","AnchorNavigationProvider","_ref","children","_ref$offset","_React$useState","useState","_React$useState2","_slicedToArray","setSelected","ref","useRef","blockScrollTimestamp","changeSelected","id","_sections$find","_ref$current","current","find","section","scrollTo","top","behavior","Date","getTime","heading","querySelector","HTMLElement","hasAttribute","setAttribute","focus","preventScroll","useEffect","onScroll","event","_ref$current2","now","length","scrollTop","scrollY","_sections$","selectedIndex","findIndex","item","selectedElement","Math","max","throttleScrollEvent","addEventListener","capture","passive","removeEventListener","cancel","label","_ref$current3","index","push","splice","createElement","Provider","value"],"sources":["../../src/AnchorNavigation/AnchorNavigationProvider.tsx"],"sourcesContent":["import throttle from 'lodash.throttle'\nimport React from 'react'\nimport type { AnchorNavigationElementSection } from './AnchorNavigation.types'\n\nexport const AnchorNavigationContext = React.createContext<{\n  offset: number\n  sections: AnchorNavigationElementSection[]\n  selected: string\n  registerSection: (id: string, label: string, element: HTMLElement) => void\n  unregisterSection: (id: string) => void\n  onSelect: (id: string, withScroll?: boolean) => void\n}>({\n  offset: 0,\n  sections: [],\n  selected: '',\n  registerSection: () => {},\n  unregisterSection: () => {},\n  onSelect: () => {},\n})\n\nexport const useAnchorNavigationContext = () =>\n  React.useContext(AnchorNavigationContext)\n\ninterface AnchorNavigationProviderProps {\n  offset?: number\n}\n\nfunction findScrollContainer(element: HTMLElement): HTMLElement {\n  let parent = element.parentElement\n  while (parent) {\n    const { overflow } = window.getComputedStyle(parent)\n    if (overflow.split(' ').every((o) => o === 'auto' || o === 'scroll')) {\n      return parent\n    }\n    parent = parent.parentElement\n  }\n\n  return document.documentElement\n}\n\nfunction getElementScrollPosition(\n  element: HTMLElement,\n  scroller: HTMLElement | null\n): number {\n  let y = 0\n  let el: HTMLElement | null = element\n\n  do {\n    y += el.offsetTop\n    el = el.offsetParent as HTMLElement | null\n  } while (el && el !== scroller)\n\n  return y\n}\n\nexport function AnchorNavigationProvider({\n  children,\n  offset = 0,\n}: React.PropsWithChildren<AnchorNavigationProviderProps>) {\n  const [selected, setSelected] = React.useState('')\n  const ref = React.useRef<{\n    sections: AnchorNavigationElementSection[]\n    blockScrollTimestamp: number\n    scroller: HTMLElement | null\n  }>({\n    sections: [],\n    blockScrollTimestamp: 0,\n    scroller: null,\n  })\n\n  const changeSelected = (id: string) => {\n    const { sections, scroller } = ref.current\n    setSelected(id)\n\n    const element = sections.find((section) => section.id === id)?.element\n\n    if (element) {\n      ;(scroller || window).scrollTo({\n        top: getElementScrollPosition(element, scroller) - offset,\n        behavior: 'smooth',\n      })\n\n      // Disable scroll listener to avoid changing active element\n      ref.current.blockScrollTimestamp = new Date().getTime()\n\n      // Move focus to the section heading for keyboard and screen reader users\n      const heading = element.querySelector('h1, h2, h3, h4, h5, h6')\n      if (heading instanceof HTMLElement) {\n        if (!heading.hasAttribute('tabindex')) {\n          heading.setAttribute('tabindex', '-1')\n        }\n        heading.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    const onScroll = (event?: Event) => {\n      const { blockScrollTimestamp, sections, scroller } = ref.current\n      const now = new Date().getTime()\n\n      if (!sections.length) return\n\n      // Disable scroll event when auto scrolling by clicking on the anchor\n      if (now - blockScrollTimestamp < 200) {\n        ref.current.blockScrollTimestamp = now\n        return\n      }\n\n      const y =\n        (scroller\n          ? scroller.scrollTop\n          : window.scrollY || document.documentElement.scrollTop) + offset\n\n      // Before the first element\n      if (getElementScrollPosition(sections[0].element, scroller) > y) {\n        if (event) {\n          setSelected(sections[0]?.id)\n        }\n        return\n      }\n\n      // Get first element overflowing top, get the previous one\n      const selectedIndex = sections.findIndex(\n        (item) => getElementScrollPosition(item.element, scroller) > y\n      )\n\n      const selectedElement =\n        selectedIndex === -1\n          ? sections[sections.length - 1]\n          : sections[Math.max(selectedIndex - 1, 0)]\n\n      if (selectedElement) {\n        setSelected(selectedElement.id)\n      }\n    }\n\n    const throttleScrollEvent = throttle(onScroll, 100)\n    addEventListener('scroll', throttleScrollEvent, {\n      capture: false,\n      passive: true,\n    })\n    onScroll()\n\n    return () => {\n      removeEventListener('scroll', throttleScrollEvent, { capture: false })\n      throttleScrollEvent.cancel()\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const registerSection = (id: string, label: string, element: HTMLElement) => {\n    if (!ref.current.scroller) {\n      ref.current.scroller = findScrollContainer(element)\n    }\n\n    const { sections, scroller } = ref.current\n\n    if (sections.find((section) => section.id === id)) {\n      return\n    }\n\n    const y = getElementScrollPosition(element, scroller)\n    const index = sections.findIndex(\n      (section) => getElementScrollPosition(section.element, scroller) > y\n    )\n\n    if (index === -1) {\n      sections.push({ id, label, element })\n    } else {\n      sections.splice(index, 0, { id, label, element })\n    }\n\n    if (sections.length === 1) {\n      setSelected(id)\n    }\n  }\n\n  const unregisterSection = (id: string) => {\n    const { sections } = ref.current\n    const index = sections.findIndex((section) => section.id === id)\n    if (index !== -1) {\n      sections.splice(index, 1)\n    }\n  }\n\n  return (\n    <AnchorNavigationContext.Provider\n      value={{\n        offset,\n        selected,\n        sections: ref.current.sections,\n        onSelect: changeSelected,\n        registerSection,\n        unregisterSection,\n      }}\n    >\n      {children}\n    </AnchorNavigationContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"AnchorNavigationProvider.js","names":["throttle","React","AnchorNavigationContext","createContext","offset","sections","selected","registerSection","unregisterSection","onSelect","useAnchorNavigationContext","useContext","findScrollContainer","element","parent","parentElement","_window$getComputedSt","window","getComputedStyle","overflow","split","every","o","document","documentElement","getElementScrollPosition","scroller","y","el","offsetTop","offsetParent","getEffectiveOffset","remoteHeader","getElementById","headerBottom","getBoundingClientRect","bottom","Math","max","AnchorNavigationProvider","_ref","children","_ref$offset","_React$useState","useState","_React$useState2","_slicedToArray","setSelected","ref","useRef","blockScrollTimestamp","changeSelected","id","_sections$find","_ref$current","current","effectiveOffset","find","section","scrollTo","top","behavior","Date","getTime","heading","querySelector","HTMLElement","hasAttribute","setAttribute","focus","preventScroll","useEffect","onScroll","event","_ref$current2","now","length","scrollTop","scrollY","_sections$","selectedIndex","findIndex","item","selectedElement","throttleScrollEvent","addEventListener","capture","passive","removeEventListener","cancel","label","_ref$current3","index","push","splice","createElement","Provider","value"],"sources":["../../src/AnchorNavigation/AnchorNavigationProvider.tsx"],"sourcesContent":["import throttle from 'lodash.throttle'\nimport React from 'react'\nimport type { AnchorNavigationElementSection } from './AnchorNavigation.types'\n\nexport const AnchorNavigationContext = React.createContext<{\n  offset: number\n  sections: AnchorNavigationElementSection[]\n  selected: string\n  registerSection: (id: string, label: string, element: HTMLElement) => void\n  unregisterSection: (id: string) => void\n  onSelect: (id: string, withScroll?: boolean) => void\n}>({\n  offset: 0,\n  sections: [],\n  selected: '',\n  registerSection: () => {},\n  unregisterSection: () => {},\n  onSelect: () => {},\n})\n\nexport const useAnchorNavigationContext = () =>\n  React.useContext(AnchorNavigationContext)\n\ninterface AnchorNavigationProviderProps {\n  offset?: number\n}\n\nfunction findScrollContainer(element: HTMLElement): HTMLElement {\n  let parent = element.parentElement\n  while (parent) {\n    const { overflow } = window.getComputedStyle(parent)\n    if (overflow.split(' ').every((o) => o === 'auto' || o === 'scroll')) {\n      return parent\n    }\n    parent = parent.parentElement\n  }\n\n  return document.documentElement\n}\n\nfunction getElementScrollPosition(\n  element: HTMLElement,\n  scroller: HTMLElement | null\n): number {\n  let y = 0\n  let el: HTMLElement | null = element\n\n  do {\n    y += el.offsetTop\n    el = el.offsetParent as HTMLElement | null\n  } while (el && el !== scroller)\n\n  return y\n}\n\nfunction getEffectiveOffset(offset: number): number {\n  const remoteHeader = document.getElementById('remote-header-container')\n\n  if (!remoteHeader) {\n    return offset\n  }\n\n  const headerBottom = remoteHeader.getBoundingClientRect().bottom\n\n  return offset + Math.max(headerBottom, 0)\n}\n\nexport function AnchorNavigationProvider({\n  children,\n  offset = 0,\n}: React.PropsWithChildren<AnchorNavigationProviderProps>) {\n  const [selected, setSelected] = React.useState('')\n  const ref = React.useRef<{\n    sections: AnchorNavigationElementSection[]\n    blockScrollTimestamp: number\n    scroller: HTMLElement | null\n  }>({\n    sections: [],\n    blockScrollTimestamp: 0,\n    scroller: null,\n  })\n\n  const changeSelected = (id: string) => {\n    const { sections, scroller } = ref.current\n    const effectiveOffset = getEffectiveOffset(offset)\n    setSelected(id)\n\n    const element = sections.find((section) => section.id === id)?.element\n\n    if (element) {\n      ;(scroller || window).scrollTo({\n        top: getElementScrollPosition(element, scroller) - effectiveOffset,\n        behavior: 'smooth',\n      })\n\n      // Disable scroll listener to avoid changing active element\n      ref.current.blockScrollTimestamp = new Date().getTime()\n\n      // Move focus to the section heading for keyboard and screen reader users\n      const heading = element.querySelector('h1, h2, h3, h4, h5, h6')\n      if (heading instanceof HTMLElement) {\n        if (!heading.hasAttribute('tabindex')) {\n          heading.setAttribute('tabindex', '-1')\n        }\n        heading.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    const onScroll = (event?: Event) => {\n      const { blockScrollTimestamp, sections, scroller } = ref.current\n      const now = new Date().getTime()\n\n      if (!sections.length) return\n\n      // Disable scroll event when auto scrolling by clicking on the anchor\n      if (now - blockScrollTimestamp < 200) {\n        ref.current.blockScrollTimestamp = now\n        return\n      }\n\n      const y =\n        (scroller\n          ? scroller.scrollTop\n          : window.scrollY || document.documentElement.scrollTop) +\n        getEffectiveOffset(offset)\n\n      // Before the first element\n      if (getElementScrollPosition(sections[0].element, scroller) > y) {\n        if (event) {\n          setSelected(sections[0]?.id)\n        }\n        return\n      }\n\n      // Get first element overflowing top, get the previous one\n      const selectedIndex = sections.findIndex(\n        (item) => getElementScrollPosition(item.element, scroller) > y\n      )\n\n      const selectedElement =\n        selectedIndex === -1\n          ? sections[sections.length - 1]\n          : sections[Math.max(selectedIndex - 1, 0)]\n\n      if (selectedElement) {\n        setSelected(selectedElement.id)\n      }\n    }\n\n    const throttleScrollEvent = throttle(onScroll, 100)\n    addEventListener('scroll', throttleScrollEvent, {\n      capture: false,\n      passive: true,\n    })\n    onScroll()\n\n    return () => {\n      removeEventListener('scroll', throttleScrollEvent, { capture: false })\n      throttleScrollEvent.cancel()\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const registerSection = (id: string, label: string, element: HTMLElement) => {\n    if (!ref.current.scroller) {\n      ref.current.scroller = findScrollContainer(element)\n    }\n    const { sections, scroller } = ref.current\n\n    if (sections.find((section) => section.id === id)) {\n      return\n    }\n\n    const y = getElementScrollPosition(element, scroller)\n    const index = sections.findIndex(\n      (section) => getElementScrollPosition(section.element, scroller) > y\n    )\n\n    if (index === -1) {\n      sections.push({ id, label, element })\n    } else {\n      sections.splice(index, 0, { id, label, element })\n    }\n\n    if (sections.length === 1) {\n      setSelected(id)\n    }\n  }\n\n  const unregisterSection = (id: string) => {\n    const { sections } = ref.current\n    const index = sections.findIndex((section) => section.id === id)\n    if (index !== -1) {\n      sections.splice(index, 1)\n    }\n  }\n\n  return (\n    <AnchorNavigationContext.Provider\n      value={{\n        offset,\n        selected,\n        sections: ref.current.sections,\n        onSelect: changeSelected,\n        registerSection,\n        unregisterSection,\n      }}\n    >\n      {children}\n    </AnchorNavigationContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAOA,QAAQ,MAAM,iBAAiB;AACtC,OAAOC,KAAK,MAAM,OAAO;AAGzB,OAAO,IAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAOvD;EACDC,MAAM,EAAE,CAAC;EACTC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,eAAe,EAAE,SAAjBA,eAAeA,CAAA,EAAQ,CAAC,CAAC;EACzBC,iBAAiB,EAAE,SAAnBA,iBAAiBA,CAAA,EAAQ,CAAC,CAAC;EAC3BC,QAAQ,EAAE,SAAVA,QAAQA,CAAA,EAAQ,CAAC;AACnB,CAAC,CAAC;AAEF,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAA;EAAA,OACrCT,KAAK,CAACU,UAAU,CAACT,uBAAuB,CAAC;AAAA;AAM3C,SAASU,mBAAmBA,CAACC,OAAoB,EAAe;EAC9D,IAAIC,MAAM,GAAGD,OAAO,CAACE,aAAa;EAClC,OAAOD,MAAM,EAAE;IACb,IAAAE,qBAAA,GAAqBC,MAAM,CAACC,gBAAgB,CAACJ,MAAM,CAAC;MAA5CK,QAAQ,GAAAH,qBAAA,CAARG,QAAQ;IAChB,IAAIA,QAAQ,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,KAAK,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,KAAK,MAAM,IAAIA,CAAC,KAAK,QAAQ;IAAA,EAAC,EAAE;MACpE,OAAOR,MAAM;IACf;IACAA,MAAM,GAAGA,MAAM,CAACC,aAAa;EAC/B;EAEA,OAAOQ,QAAQ,CAACC,eAAe;AACjC;AAEA,SAASC,wBAAwBA,CAC/BZ,OAAoB,EACpBa,QAA4B,EACpB;EACR,IAAIC,CAAC,GAAG,CAAC;EACT,IAAIC,EAAsB,GAAGf,OAAO;EAEpC,GAAG;IACDc,CAAC,IAAIC,EAAE,CAACC,SAAS;IACjBD,EAAE,GAAGA,EAAE,CAACE,YAAkC;EAC5C,CAAC,QAAQF,EAAE,IAAIA,EAAE,KAAKF,QAAQ;EAE9B,OAAOC,CAAC;AACV;AAEA,SAASI,kBAAkBA,CAAC3B,MAAc,EAAU;EAClD,IAAM4B,YAAY,GAAGT,QAAQ,CAACU,cAAc,CAAC,yBAAyB,CAAC;EAEvE,IAAI,CAACD,YAAY,EAAE;IACjB,OAAO5B,MAAM;EACf;EAEA,IAAM8B,YAAY,GAAGF,YAAY,CAACG,qBAAqB,CAAC,CAAC,CAACC,MAAM;EAEhE,OAAOhC,MAAM,GAAGiC,IAAI,CAACC,GAAG,CAACJ,YAAY,EAAE,CAAC,CAAC;AAC3C;AAEA,OAAO,SAASK,wBAAwBA,CAAAC,IAAA,EAGmB;EAAA,IAFzDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,WAAA,GAAAF,IAAA,CACRpC,MAAM;IAANA,MAAM,GAAAsC,WAAA,cAAG,CAAC,GAAAA,WAAA;EAEV,IAAAC,eAAA,GAAgC1C,KAAK,CAAC2C,QAAQ,CAAC,EAAE,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA3CrC,QAAQ,GAAAuC,gBAAA;IAAEE,WAAW,GAAAF,gBAAA;EAC5B,IAAMG,GAAG,GAAG/C,KAAK,CAACgD,MAAM,CAIrB;IACD5C,QAAQ,EAAE,EAAE;IACZ6C,oBAAoB,EAAE,CAAC;IACvBxB,QAAQ,EAAE;EACZ,CAAC,CAAC;EAEF,IAAMyB,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,EAAU,EAAK;IAAA,IAAAC,cAAA;IACrC,IAAAC,YAAA,GAA+BN,GAAG,CAACO,OAAO;MAAlClD,QAAQ,GAAAiD,YAAA,CAARjD,QAAQ;MAAEqB,QAAQ,GAAA4B,YAAA,CAAR5B,QAAQ;IAC1B,IAAM8B,eAAe,GAAGzB,kBAAkB,CAAC3B,MAAM,CAAC;IAClD2C,WAAW,CAACK,EAAE,CAAC;IAEf,IAAMvC,OAAO,IAAAwC,cAAA,GAAGhD,QAAQ,CAACoD,IAAI,CAAC,UAACC,OAAO;MAAA,OAAKA,OAAO,CAACN,EAAE,KAAKA,EAAE;IAAA,EAAC,cAAAC,cAAA,uBAA7CA,cAAA,CAA+CxC,OAAO;IAEtE,IAAIA,OAAO,EAAE;MACX;MAAC,CAACa,QAAQ,IAAIT,MAAM,EAAE0C,QAAQ,CAAC;QAC7BC,GAAG,EAAEnC,wBAAwB,CAACZ,OAAO,EAAEa,QAAQ,CAAC,GAAG8B,eAAe;QAClEK,QAAQ,EAAE;MACZ,CAAC,CAAC;;MAEF;MACAb,GAAG,CAACO,OAAO,CAACL,oBAAoB,GAAG,IAAIY,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;;MAEvD;MACA,IAAMC,OAAO,GAAGnD,OAAO,CAACoD,aAAa,CAAC,wBAAwB,CAAC;MAC/D,IAAID,OAAO,YAAYE,WAAW,EAAE;QAClC,IAAI,CAACF,OAAO,CAACG,YAAY,CAAC,UAAU,CAAC,EAAE;UACrCH,OAAO,CAACI,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;QACxC;QACAJ,OAAO,CAACK,KAAK,CAAC;UAAEC,aAAa,EAAE;QAAK,CAAC,CAAC;MACxC;IACF;EACF,CAAC;EAEDrE,KAAK,CAACsE,SAAS,CAAC,YAAM;IACpB,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,KAAa,EAAK;MAClC,IAAAC,aAAA,GAAqD1B,GAAG,CAACO,OAAO;QAAxDL,oBAAoB,GAAAwB,aAAA,CAApBxB,oBAAoB;QAAE7C,QAAQ,GAAAqE,aAAA,CAARrE,QAAQ;QAAEqB,QAAQ,GAAAgD,aAAA,CAARhD,QAAQ;MAChD,IAAMiD,GAAG,GAAG,IAAIb,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;MAEhC,IAAI,CAAC1D,QAAQ,CAACuE,MAAM,EAAE;;MAEtB;MACA,IAAID,GAAG,GAAGzB,oBAAoB,GAAG,GAAG,EAAE;QACpCF,GAAG,CAACO,OAAO,CAACL,oBAAoB,GAAGyB,GAAG;QACtC;MACF;MAEA,IAAMhD,CAAC,GACL,CAACD,QAAQ,GACLA,QAAQ,CAACmD,SAAS,GAClB5D,MAAM,CAAC6D,OAAO,IAAIvD,QAAQ,CAACC,eAAe,CAACqD,SAAS,IACxD9C,kBAAkB,CAAC3B,MAAM,CAAC;;MAE5B;MACA,IAAIqB,wBAAwB,CAACpB,QAAQ,CAAC,CAAC,CAAC,CAACQ,OAAO,EAAEa,QAAQ,CAAC,GAAGC,CAAC,EAAE;QAC/D,IAAI8C,KAAK,EAAE;UAAA,IAAAM,UAAA;UACThC,WAAW,EAAAgC,UAAA,GAAC1E,QAAQ,CAAC,CAAC,CAAC,cAAA0E,UAAA,uBAAXA,UAAA,CAAa3B,EAAE,CAAC;QAC9B;QACA;MACF;;MAEA;MACA,IAAM4B,aAAa,GAAG3E,QAAQ,CAAC4E,SAAS,CACtC,UAACC,IAAI;QAAA,OAAKzD,wBAAwB,CAACyD,IAAI,CAACrE,OAAO,EAAEa,QAAQ,CAAC,GAAGC,CAAC;MAAA,CAChE,CAAC;MAED,IAAMwD,eAAe,GACnBH,aAAa,KAAK,CAAC,CAAC,GAChB3E,QAAQ,CAACA,QAAQ,CAACuE,MAAM,GAAG,CAAC,CAAC,GAC7BvE,QAAQ,CAACgC,IAAI,CAACC,GAAG,CAAC0C,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;MAE9C,IAAIG,eAAe,EAAE;QACnBpC,WAAW,CAACoC,eAAe,CAAC/B,EAAE,CAAC;MACjC;IACF,CAAC;IAED,IAAMgC,mBAAmB,GAAGpF,QAAQ,CAACwE,QAAQ,EAAE,GAAG,CAAC;IACnDa,gBAAgB,CAAC,QAAQ,EAAED,mBAAmB,EAAE;MAC9CE,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACX,CAAC,CAAC;IACFf,QAAQ,CAAC,CAAC;IAEV,OAAO,YAAM;MACXgB,mBAAmB,CAAC,QAAQ,EAAEJ,mBAAmB,EAAE;QAAEE,OAAO,EAAE;MAAM,CAAC,CAAC;MACtEF,mBAAmB,CAACK,MAAM,CAAC,CAAC;IAC9B,CAAC;EACH,CAAC,EAAE,EAAE,CAAC,EAAC;;EAEP,IAAMlF,eAAe,GAAG,SAAlBA,eAAeA,CAAI6C,EAAU,EAAEsC,KAAa,EAAE7E,OAAoB,EAAK;IAC3E,IAAI,CAACmC,GAAG,CAACO,OAAO,CAAC7B,QAAQ,EAAE;MACzBsB,GAAG,CAACO,OAAO,CAAC7B,QAAQ,GAAGd,mBAAmB,CAACC,OAAO,CAAC;IACrD;IACA,IAAA8E,aAAA,GAA+B3C,GAAG,CAACO,OAAO;MAAlClD,QAAQ,GAAAsF,aAAA,CAARtF,QAAQ;MAAEqB,QAAQ,GAAAiE,aAAA,CAARjE,QAAQ;IAE1B,IAAIrB,QAAQ,CAACoD,IAAI,CAAC,UAACC,OAAO;MAAA,OAAKA,OAAO,CAACN,EAAE,KAAKA,EAAE;IAAA,EAAC,EAAE;MACjD;IACF;IAEA,IAAMzB,CAAC,GAAGF,wBAAwB,CAACZ,OAAO,EAAEa,QAAQ,CAAC;IACrD,IAAMkE,KAAK,GAAGvF,QAAQ,CAAC4E,SAAS,CAC9B,UAACvB,OAAO;MAAA,OAAKjC,wBAAwB,CAACiC,OAAO,CAAC7C,OAAO,EAAEa,QAAQ,CAAC,GAAGC,CAAC;IAAA,CACtE,CAAC;IAED,IAAIiE,KAAK,KAAK,CAAC,CAAC,EAAE;MAChBvF,QAAQ,CAACwF,IAAI,CAAC;QAAEzC,EAAE,EAAFA,EAAE;QAAEsC,KAAK,EAALA,KAAK;QAAE7E,OAAO,EAAPA;MAAQ,CAAC,CAAC;IACvC,CAAC,MAAM;MACLR,QAAQ,CAACyF,MAAM,CAACF,KAAK,EAAE,CAAC,EAAE;QAAExC,EAAE,EAAFA,EAAE;QAAEsC,KAAK,EAALA,KAAK;QAAE7E,OAAO,EAAPA;MAAQ,CAAC,CAAC;IACnD;IAEA,IAAIR,QAAQ,CAACuE,MAAM,KAAK,CAAC,EAAE;MACzB7B,WAAW,CAACK,EAAE,CAAC;IACjB;EACF,CAAC;EAED,IAAM5C,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAI4C,EAAU,EAAK;IACxC,IAAQ/C,QAAQ,GAAK2C,GAAG,CAACO,OAAO,CAAxBlD,QAAQ;IAChB,IAAMuF,KAAK,GAAGvF,QAAQ,CAAC4E,SAAS,CAAC,UAACvB,OAAO;MAAA,OAAKA,OAAO,CAACN,EAAE,KAAKA,EAAE;IAAA,EAAC;IAChE,IAAIwC,KAAK,KAAK,CAAC,CAAC,EAAE;MAChBvF,QAAQ,CAACyF,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;IAC3B;EACF,CAAC;EAED,oBACE3F,KAAA,CAAA8F,aAAA,CAAC7F,uBAAuB,CAAC8F,QAAQ;IAC/BC,KAAK,EAAE;MACL7F,MAAM,EAANA,MAAM;MACNE,QAAQ,EAARA,QAAQ;MACRD,QAAQ,EAAE2C,GAAG,CAACO,OAAO,CAAClD,QAAQ;MAC9BI,QAAQ,EAAE0C,cAAc;MACxB5C,eAAe,EAAfA,eAAe;MACfC,iBAAiB,EAAjBA;IACF;EAAE,GAEDiC,QAC+B,CAAC;AAEvC"}

package/dist/Avatar/Avatar.styles.js

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

package/dist/AvatarStack/AvatarStack.styles.js

@@ -8,36 +8,36 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_50_0__sc-ft72hu-0"
+  componentId: "core-12_51_0__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_50_0__sc-ft72hu-1"
+  componentId: "core-12_51_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledFoldedPopoverContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFoldedPopoverContent",
-  componentId: "core-12_50_0__sc-ft72hu-2"
+  componentId: "core-12_51_0__sc-ft72hu-2"
 })(["display:flex;flex-direction:column;max-height:var(", ",100vh);"], OVERLAY_AVAILABLE_HEIGHT_VAR);
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_50_0__sc-ft72hu-3"
+  componentId: "core-12_51_0__sc-ft72hu-3"
 })(["padding-top:", "px;padding-left:", "px;flex:1 1 auto;min-height:0;overflow-y:auto;"], spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_50_0__sc-ft72hu-4"
+  componentId: "core-12_51_0__sc-ft72hu-4"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_50_0__sc-ft72hu-5"
+  componentId: "core-12_51_0__sc-ft72hu-5"
 })(["display:flex;margin-left:", "px;margin-top:", "px;margin-bottom:", "px;"], spacing.md, spacing.md, spacing.md);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_50_0__sc-ft72hu-6"
+  componentId: "core-12_51_0__sc-ft72hu-6"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_50_0__sc-ft72hu-7"
+  componentId: "core-12_51_0__sc-ft72hu-7"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.js

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

package/dist/BadgePill/BadgePill.styles.js

@@ -3,11 +3,11 @@ import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContainer",
-  componentId: "core-12_50_0__sc-s2n9gd-0"
+  componentId: "core-12_51_0__sc-s2n9gd-0"
 })(["display:inline-flex;position:relative;"]);
 export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContent",
-  componentId: "core-12_50_0__sc-s2n9gd-1"
+  componentId: "core-12_51_0__sc-s2n9gd-1"
 })(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
   var $overlapping = _ref.$overlapping,
     _ref$$xOffset = _ref.$xOffset,
@@ -20,13 +20,13 @@ export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeDotIndicator",
-  componentId: "core-12_50_0__sc-s2n9gd-2"
+  componentId: "core-12_51_0__sc-s2n9gd-2"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
 var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
 var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
 export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeCounter",
-  componentId: "core-12_50_0__sc-s2n9gd-3"
+  componentId: "core-12_51_0__sc-s2n9gd-3"
 })(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
   return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
 });

package/dist/Banner/Banner.styles.js

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

package/dist/Box/Box.styles.js

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -31,8 +31,21 @@ AFTER:
 </Breadcrumbs>
 ```
 
- @a11y Use `variant="list"` for semantic `ol`, `li` elements in addition to `nav`. When multiple
- breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.
+ @a11y Required Use `variant="list"` for semantic `ol`, `li` elements in addition to `nav`.
+
+ When multiple breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.
+ When breadcrumbs are rendered inside specialized containers (for example `Panel`, `Modal`,
+ `Tearsheet`) set `aria-labelledby` to the container heading id and provide a stable `id` on
+ `Breadcrumbs`. This allows self-reference label chaining so the final accessible name includes
+ both the container context and the breadcrumb label.
+
+ Example:
+ ```
+ <Breadcrumbs aria-labelledby="panel-title" variant="list">
+   ...
+ </Breadcrumbs>
+ <H2 id="panel-title">Panel Title</H2>
+ ```
 
  @example
   <Breadcrumbs variant="list">

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "variant"],
+var _excluded = ["children", "variant", "id", "aria-label", "aria-labelledby"],
   _excluded2 = ["variant"],
   _excluded3 = ["isLast"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -11,6 +11,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { ChevronRight } from '@procore/core-icons';
+import { useId } from '@react-aria/utils';
 import React from 'react';
 import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
@@ -23,8 +24,15 @@ var Breadcrumbs_ = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_ref, ref)
   var children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? BreadcrumbVariants.LEGACY : _ref$variant,
+    providedId = _ref.id,
+    providedAriaLabel = _ref['aria-label'],
+    providedAriaLabelledBy = _ref['aria-labelledby'],
     props = _objectWithoutProperties(_ref, _excluded);
   var i18n = useI18nContext();
+  var generatedId = useId();
+  var selfLabelId = providedId || (providedAriaLabelledBy ? generatedId : undefined);
+  var ariaLabel = providedAriaLabel !== null && providedAriaLabel !== void 0 ? providedAriaLabel : i18n.t('core.breadcrumbs.label');
+  var ariaLabelledBy = providedAriaLabelledBy ? "".concat(providedAriaLabelledBy, " ").concat(selfLabelId) : undefined;
   var childrenArray = React.Children.toArray(children);
   var isLegacy = variant === BreadcrumbVariants.LEGACY;
   var navigationList = childrenArray.filter(function (child) {
@@ -43,7 +51,9 @@ var Breadcrumbs_ = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_ref, ref)
     }, /*#__PURE__*/React.cloneElement(child, cloneProps), isLegacy && !isLast ? separator : /*#__PURE__*/React.createElement(React.Fragment, null));
   });
   return /*#__PURE__*/React.createElement(StyledContainer, _extends({
-    "aria-label": i18n.t('core.breadcrumbs.label')
+    id: selfLabelId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   }, props, {
     ref: ref
   }), !isLegacy ? /*#__PURE__*/React.createElement(StyledList, null, navigationList) : navigationList);
@@ -106,8 +116,21 @@ AFTER:
 </Breadcrumbs>
 ```
 
- @a11y Use `variant="list"` for semantic `ol`, `li` elements in addition to `nav`. When multiple
- breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.
+ @a11y Required Use `variant="list"` for semantic `ol`, `li` elements in addition to `nav`.
+
+ When multiple breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.
+ When breadcrumbs are rendered inside specialized containers (for example `Panel`, `Modal`,
+ `Tearsheet`) set `aria-labelledby` to the container heading id and provide a stable `id` on
+ `Breadcrumbs`. This allows self-reference label chaining so the final accessible name includes
+ both the container context and the breadcrumb label.
+
+ Example:
+ ```
+ <Breadcrumbs aria-labelledby="panel-title" variant="list">
+   ...
+ </Breadcrumbs>
+ <H2 id="panel-title">Panel Title</H2>
+ ```
 
  @example
   <Breadcrumbs variant="list">

package/dist/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["ChevronRight","React","useI18nContext","addSubcomponents","StyledContainer","StyledCrumb","StyledList","StyledSeparator","BreadcrumbVariants","separator","createElement","Breadcrumbs_","forwardRef","Breadcrumbs","_ref","ref","children","_ref$variant","variant","LEGACY","props","_objectWithoutProperties","_excluded","i18n","childrenArray","Children","toArray","isLegacy","navigationList","filter","child","map","i","isLast","length","aria","active","undefined","cloneProps","_objectSpread","Fragment","key","concat","cloneElement","_extends","t","Crumb","_ref2","_ref2$variant","_excluded2","childrenWithAriaAttrs","isValidElement","showSeparator","hasOwnProperty","crumbProps","_excluded3","as","displayName"],"sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from '@procore/core-icons'\nimport type { ForwardedRef } from 'react'\nimport React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledContainer,\n  StyledCrumb,\n  StyledList,\n  StyledSeparator,\n} from './Breadcrumbs.styles'\nimport type { BreadcrumbCrumbProps, BreadcrumbProps } from './Breadcrumbs.types'\nimport { BreadcrumbVariants } from './Breadcrumbs.types'\n\nconst separator = (\n  <StyledSeparator aria-hidden={true}>\n    <ChevronRight />\n  </StyledSeparator>\n)\n\nconst Breadcrumbs_ = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLDivElement> & BreadcrumbProps\n>(function Breadcrumbs(\n  { children, variant = BreadcrumbVariants.LEGACY, ...props },\n  ref\n) {\n  const i18n = useI18nContext()\n  const childrenArray = React.Children.toArray(children)\n  const isLegacy = variant === BreadcrumbVariants.LEGACY\n\n  const navigationList = childrenArray\n    .filter((child) => child)\n    .map((child, i) => {\n      const isLast = i === childrenArray.length - 1\n      const aria = {\n        'aria-current': (child as React.ReactElement).props.active || undefined,\n      }\n      const cloneProps = isLegacy\n        ? aria\n        : {\n            ...aria,\n            isLast,\n            variant,\n          }\n\n      return (\n        <React.Fragment key={`separator-${i}`}>\n          {React.cloneElement(child as React.ReactElement, cloneProps)}\n          {isLegacy && !isLast ? separator : <></>}\n        </React.Fragment>\n      )\n    })\n  return (\n    <StyledContainer\n      aria-label={i18n.t('core.breadcrumbs.label')}\n      {...props}\n      ref={ref}\n    >\n      {!isLegacy ? <StyledList>{navigationList}</StyledList> : navigationList}\n    </StyledContainer>\n  )\n})\n\ntype NavCrumbProps = React.LiHTMLAttributes<HTMLLIElement> &\n  BreadcrumbCrumbProps\ntype LegacyCrumbProps = React.HTMLAttributes<HTMLDivElement> &\n  BreadcrumbCrumbProps\n\nexport const Crumb = React.forwardRef<\n  HTMLLIElement | HTMLDivElement,\n  NavCrumbProps | LegacyCrumbProps\n>(function Crumb({ variant = BreadcrumbVariants.LEGACY, ...props }, ref) {\n  const childrenWithAriaAttrs = React.Children.toArray(props.children)\n    .filter((child) => child)\n    .map((child) => {\n      if (React.isValidElement<{ 'aria-current'?: boolean }>(child)) {\n        return React.cloneElement(child, {\n          'aria-current': props.active || undefined,\n        })\n      } else {\n        return child\n      }\n    })\n  const isLegacy = variant === BreadcrumbVariants.LEGACY\n  const showSeparator =\n    !isLegacy && props.hasOwnProperty('isLast') && !props.isLast\n  const { isLast, ...crumbProps } = props\n  return (\n    <StyledCrumb\n      as={isLegacy ? 'div' : 'li'}\n      {...(crumbProps as NavCrumbProps)}\n      ref={ref as ForwardedRef<HTMLLIElement>}\n    >\n      {childrenWithAriaAttrs}\n      {showSeparator ? separator : <></>}\n    </StyledCrumb>\n  )\n})\n\nBreadcrumbs_.displayName = 'Breadcrumbs'\n\nCrumb.displayName = 'Breadcrumbs.Crumb'\n\n//  * @codemod npx ...\n//  * @deprecatedSince 12.x.x\n/**\n * @description  We use breadcrumbs to provide navigational information to the user on every\n * tool’s child page in Procore. The last element is the active view.\n *\n * __Important!__ Prior versions support placing an anchor element in-between `Breadcrumbs` and\n * `Breadcrumbs.Crumb` elements; going forward anchor elements must be inside `Breadcrumbs.Crumb`.\n *\n * Additionally __set `variant=\"list\"` to enable list markup__, it will eventually be the default\n * but requires users to place hyperlinks inside the `Breadcrumbs.Crumb` (`li`) to be proper HTML.\n\nBEFORE:\n```\n<Breadcrumbs>\n  <a href=\"#\">\n    <Breadcrumbs.Crumb>Deprecated</Breadcrumbs.Crumb>\n  </a>\n</Breadcrumbs>\n```\n\nAFTER:\n```\n<Breadcrumbs variant=\"list\">\n  <Breadcrumbs.Crumb>\n    <a href=\"#\">Standard</a>\n  </Breadcrumbs.Crumb>\n</Breadcrumbs>\n```\n\n @a11y Use `variant=\"list\"` for semantic `ol`, `li` elements in addition to `nav`. When multiple\n breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.\n\n @example\n  <Breadcrumbs variant=\"list\">\n    <Breadcrumbs.Crumb>\n      <a href=\"#\">List Items</a>\n    </Breadcrumbs.Crumb>\n    <Breadcrumbs.Crumb active>\n      Current Item\n    <Breadcrumbs.Crumb>\n  </Breadcrumbs>\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-breadcrumbs--demo)\n\n @see [Design Guidelines](https://design.procore.com/breadcrumb)\n\n */\nexport const Breadcrumbs = addSubcomponents(\n  {\n    Crumb,\n  },\n  Breadcrumbs_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["ChevronRight","useId","React","useI18nContext","addSubcomponents","StyledContainer","StyledCrumb","StyledList","StyledSeparator","BreadcrumbVariants","separator","createElement","Breadcrumbs_","forwardRef","Breadcrumbs","_ref","ref","children","_ref$variant","variant","LEGACY","providedId","id","providedAriaLabel","providedAriaLabelledBy","props","_objectWithoutProperties","_excluded","i18n","generatedId","selfLabelId","undefined","ariaLabel","t","ariaLabelledBy","concat","childrenArray","Children","toArray","isLegacy","navigationList","filter","child","map","i","isLast","length","aria","active","cloneProps","_objectSpread","Fragment","key","cloneElement","_extends","Crumb","_ref2","_ref2$variant","_excluded2","childrenWithAriaAttrs","isValidElement","showSeparator","hasOwnProperty","crumbProps","_excluded3","as","displayName"],"sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport type { ForwardedRef } from 'react'\nimport React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledContainer,\n  StyledCrumb,\n  StyledList,\n  StyledSeparator,\n} from './Breadcrumbs.styles'\nimport type { BreadcrumbCrumbProps, BreadcrumbProps } from './Breadcrumbs.types'\nimport { BreadcrumbVariants } from './Breadcrumbs.types'\n\nconst separator = (\n  <StyledSeparator aria-hidden={true}>\n    <ChevronRight />\n  </StyledSeparator>\n)\n\nconst Breadcrumbs_ = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLDivElement> & BreadcrumbProps\n>(function Breadcrumbs(\n  {\n    children,\n    variant = BreadcrumbVariants.LEGACY,\n    id: providedId,\n    'aria-label': providedAriaLabel,\n    'aria-labelledby': providedAriaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const generatedId = useId()\n  const selfLabelId =\n    providedId || (providedAriaLabelledBy ? generatedId : undefined)\n  const ariaLabel = providedAriaLabel ?? i18n.t('core.breadcrumbs.label')\n  const ariaLabelledBy = providedAriaLabelledBy\n    ? `${providedAriaLabelledBy} ${selfLabelId}`\n    : undefined\n  const childrenArray = React.Children.toArray(children)\n  const isLegacy = variant === BreadcrumbVariants.LEGACY\n\n  const navigationList = childrenArray\n    .filter((child) => child)\n    .map((child, i) => {\n      const isLast = i === childrenArray.length - 1\n      const aria = {\n        'aria-current': (child as React.ReactElement).props.active || undefined,\n      }\n      const cloneProps = isLegacy\n        ? aria\n        : {\n            ...aria,\n            isLast,\n            variant,\n          }\n\n      return (\n        <React.Fragment key={`separator-${i}`}>\n          {React.cloneElement(child as React.ReactElement, cloneProps)}\n          {isLegacy && !isLast ? separator : <></>}\n        </React.Fragment>\n      )\n    })\n  return (\n    <StyledContainer\n      id={selfLabelId}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      ref={ref}\n    >\n      {!isLegacy ? <StyledList>{navigationList}</StyledList> : navigationList}\n    </StyledContainer>\n  )\n})\n\ntype NavCrumbProps = React.LiHTMLAttributes<HTMLLIElement> &\n  BreadcrumbCrumbProps\ntype LegacyCrumbProps = React.HTMLAttributes<HTMLDivElement> &\n  BreadcrumbCrumbProps\n\nexport const Crumb = React.forwardRef<\n  HTMLLIElement | HTMLDivElement,\n  NavCrumbProps | LegacyCrumbProps\n>(function Crumb({ variant = BreadcrumbVariants.LEGACY, ...props }, ref) {\n  const childrenWithAriaAttrs = React.Children.toArray(props.children)\n    .filter((child) => child)\n    .map((child) => {\n      if (React.isValidElement<{ 'aria-current'?: boolean }>(child)) {\n        return React.cloneElement(child, {\n          'aria-current': props.active || undefined,\n        })\n      } else {\n        return child\n      }\n    })\n  const isLegacy = variant === BreadcrumbVariants.LEGACY\n  const showSeparator =\n    !isLegacy && props.hasOwnProperty('isLast') && !props.isLast\n  const { isLast, ...crumbProps } = props\n  return (\n    <StyledCrumb\n      as={isLegacy ? 'div' : 'li'}\n      {...(crumbProps as NavCrumbProps)}\n      ref={ref as ForwardedRef<HTMLLIElement>}\n    >\n      {childrenWithAriaAttrs}\n      {showSeparator ? separator : <></>}\n    </StyledCrumb>\n  )\n})\n\nBreadcrumbs_.displayName = 'Breadcrumbs'\n\nCrumb.displayName = 'Breadcrumbs.Crumb'\n\n//  * @codemod npx ...\n//  * @deprecatedSince 12.x.x\n/**\n * @description  We use breadcrumbs to provide navigational information to the user on every\n * tool’s child page in Procore. The last element is the active view.\n *\n * __Important!__ Prior versions support placing an anchor element in-between `Breadcrumbs` and\n * `Breadcrumbs.Crumb` elements; going forward anchor elements must be inside `Breadcrumbs.Crumb`.\n *\n * Additionally __set `variant=\"list\"` to enable list markup__, it will eventually be the default\n * but requires users to place hyperlinks inside the `Breadcrumbs.Crumb` (`li`) to be proper HTML.\n\nBEFORE:\n```\n<Breadcrumbs>\n  <a href=\"#\">\n    <Breadcrumbs.Crumb>Deprecated</Breadcrumbs.Crumb>\n  </a>\n</Breadcrumbs>\n```\n\nAFTER:\n```\n<Breadcrumbs variant=\"list\">\n  <Breadcrumbs.Crumb>\n    <a href=\"#\">Standard</a>\n  </Breadcrumbs.Crumb>\n</Breadcrumbs>\n```\n\n @a11y Required Use `variant=\"list\"` for semantic `ol`, `li` elements in addition to `nav`.\n\n When multiple breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.\n When breadcrumbs are rendered inside specialized containers (for example `Panel`, `Modal`,\n `Tearsheet`) set `aria-labelledby` to the container heading id and provide a stable `id` on\n `Breadcrumbs`. This allows self-reference label chaining so the final accessible name includes\n both the container context and the breadcrumb label.\n\n Example:\n ```\n <Breadcrumbs aria-labelledby=\"panel-title\" variant=\"list\">\n   ...\n </Breadcrumbs>\n <H2 id=\"panel-title\">Panel Title</H2>\n ```\n\n @example\n  <Breadcrumbs variant=\"list\">\n    <Breadcrumbs.Crumb>\n      <a href=\"#\">List Items</a>\n    </Breadcrumbs.Crumb>\n    <Breadcrumbs.Crumb active>\n      Current Item\n    <Breadcrumbs.Crumb>\n  </Breadcrumbs>\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-breadcrumbs--demo)\n\n @see [Design Guidelines](https://design.procore.com/breadcrumb)\n\n */\nexport const Breadcrumbs = addSubcomponents(\n  {\n    Crumb,\n  },\n  Breadcrumbs_\n)\n"],"mappings":"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"}

package/dist/Breadcrumbs/Breadcrumbs.styles.js

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

package/dist/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -12,6 +12,15 @@ export declare enum BreadcrumbVariants {
     LEGACY = "legacy"
 }
 export interface BreadcrumbProps extends Props {
+    /**
+     * @a11y Required when multiple breadcrumb navs are present on a single page. Reference the h2 or h3.
+     * Chains the provided id with the breadcrumbs's internal label 'Breadcrumbs' to read them together.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * @defaultValue "Breadcrumbs"
+     */
+    'aria-label'?: string;
     /**
      * @a11y Set `variant="list"` to enable `ol` and `li` semantic markup with the crumbs. Add the hyperlinks **inside** each crumb as children.
      * @description Enables the next version of semantic breacrumbs. Set `variant="list"` and add the hyperlinks **inside** each crumb as children.

package/dist/Breadcrumbs/Breadcrumbs.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.types.js","names":["BreadcrumbVariants"],"sources":["../../src/Breadcrumbs/Breadcrumbs.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\n/**\n * @deprecated The `list` variant describes the change better, `ol` `li`. The component always renders a `nav`.\n *\n * BEFORE variant=\"nav\"\n * AFTER variant=\"list\"\n * @deprecatedSince 11.33.0\n * @since 11.6.0\n */\nexport enum BreadcrumbVariants {\n  NAV = 'nav',\n  LEGACY = 'legacy',\n}\n\nexport interface BreadcrumbProps extends Props {\n  /**\n   * @a11y Set `variant=\"list\"` to enable `ol` and `li` semantic markup with the crumbs. Add the hyperlinks **inside** each crumb as children.\n   * @description Enables the next version of semantic breacrumbs. Set `variant=\"list\"` and add the hyperlinks **inside** each crumb as children.\n   *\n   * BEFORE undefined | variant=\"nav\", anchors outside crumb\n   *\n   * AFTER variant=\"list\", anchors inside crumb\n   * @since 11.33.0\n   */\n  variant?: BreadcrumbVariants | 'list'\n}\n\nexport interface BreadcrumbCrumbProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  active?: boolean\n  /**\n   * @since 11.6.0\n   */\n  isLast?: boolean\n  /**\n   * @deprecated Handled by parent prop. Use `Breadcrumb variant=\"list\"` with anchors INSIDE `Breadcumb.Crumb`.\n   * @since 11.6.0\n   */\n  variant?: BreadcrumbVariants\n}\n"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA"}
+{"version":3,"file":"Breadcrumbs.types.js","names":["BreadcrumbVariants"],"sources":["../../src/Breadcrumbs/Breadcrumbs.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\n/**\n * @deprecated The `list` variant describes the change better, `ol` `li`. The component always renders a `nav`.\n *\n * BEFORE variant=\"nav\"\n * AFTER variant=\"list\"\n * @deprecatedSince 11.33.0\n * @since 11.6.0\n */\nexport enum BreadcrumbVariants {\n  NAV = 'nav',\n  LEGACY = 'legacy',\n}\n\nexport interface BreadcrumbProps extends Props {\n  /**\n   * @a11y Required when multiple breadcrumb navs are present on a single page. Reference the h2 or h3.\n   * Chains the provided id with the breadcrumbs's internal label 'Breadcrumbs' to read them together.\n   */\n  'aria-labelledby'?: string\n  /**\n   * @defaultValue \"Breadcrumbs\"\n   */\n  'aria-label'?: string\n  /**\n   * @a11y Set `variant=\"list\"` to enable `ol` and `li` semantic markup with the crumbs. Add the hyperlinks **inside** each crumb as children.\n   * @description Enables the next version of semantic breacrumbs. Set `variant=\"list\"` and add the hyperlinks **inside** each crumb as children.\n   *\n   * BEFORE undefined | variant=\"nav\", anchors outside crumb\n   *\n   * AFTER variant=\"list\", anchors inside crumb\n   * @since 11.33.0\n   */\n  variant?: BreadcrumbVariants | 'list'\n}\n\nexport interface BreadcrumbCrumbProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  active?: boolean\n  /**\n   * @since 11.6.0\n   */\n  isLast?: boolean\n  /**\n   * @deprecated Handled by parent prop. Use `Breadcrumb variant=\"list\"` with anchors INSIDE `Breadcumb.Crumb`.\n   * @since 11.6.0\n   */\n  variant?: BreadcrumbVariants\n}\n"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA"}