@procore/core-react 11.32.0 → 12.0.0

package/dist/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":["React","StyledBox","getLegacyDisplayAndDirection","d","display","direction","includes","undefined","Box","forwardRef","_ref","ref","as","alignContent","alignItems","alignSelf","children","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","gap","justifyContent","margin","marginBottom","marginLeft","marginRight","marginTop","order","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","props","_objectWithoutProperties","_excluded","legacyProps","createElement","_extends","$as","$alignContent","$alignItems","$alignSelf","$display","$flex","$flexBasis","$flexDirection","$flexGrow","$flexShrink","$flexWrap","$gap","$justifyContent","$margin","$marginBottom","$marginLeft","$marginRight","$marginTop","$order","$padding","$paddingBottom","$paddingLeft","$paddingRight","$paddingTop","$textAlign","displayName"],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledBox } from './Box.styles'\nimport type { BoxProps, Display, FlexDirection } from './Box.types'\n\n// TODO remove this after we decommission the LegacyDisplay type\nfunction getLegacyDisplayAndDirection(d?: Display) {\n  if (!d) {\n    return {}\n  }\n\n  let display = d\n\n  let direction: FlexDirection | undefined = display.includes('flex')\n    ? 'row'\n    : undefined\n\n  if (d.includes('flex-inline') || d.includes('inline-flex')) {\n    display = 'inline-flex'\n  } else if (d.includes('flex')) {\n    display = 'flex'\n  }\n\n  if (d.includes('column-reverse')) {\n    direction = 'column-reverse'\n  } else if (d.includes('column')) {\n    direction = 'column'\n  }\n\n  if (d.includes('row-reverse')) {\n    direction = 'row-reverse'\n  } else if (d.includes('row')) {\n    direction = 'row'\n  }\n\n  return {\n    display,\n    direction,\n  }\n}\n\nexport const Box = React.forwardRef<HTMLDivElement, DivAttributes & BoxProps>(\n  function Box(\n    {\n      as,\n      alignContent,\n      alignItems,\n      alignSelf,\n      children,\n      display,\n      flex,\n      flexBasis,\n      flexDirection,\n      flexGrow,\n      flexShrink,\n      flexWrap,\n      gap,\n      justifyContent,\n      margin,\n      marginBottom,\n      marginLeft,\n      marginRight,\n      marginTop,\n      order,\n      padding,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingTop,\n      textAlign,\n      ...props\n    },\n    ref\n  ) {\n    const legacyProps = getLegacyDisplayAndDirection(display)\n\n    return (\n      <StyledBox\n        {...props}\n        ref={ref}\n        $as={as}\n        $alignContent={alignContent}\n        $alignItems={alignItems}\n        $alignSelf={alignSelf}\n        $display={legacyProps.display}\n        $flex={flex}\n        $flexBasis={flexBasis}\n        $flexDirection={flexDirection ?? legacyProps.direction}\n        $flexGrow={flexGrow}\n        $flexShrink={flexShrink}\n        $flexWrap={flexWrap}\n        $gap={gap}\n        $justifyContent={justifyContent}\n        $margin={margin}\n        $marginBottom={marginBottom}\n        $marginLeft={marginLeft}\n        $marginRight={marginRight}\n        $marginTop={marginTop}\n        $order={order}\n        $padding={padding}\n        $paddingBottom={paddingBottom}\n        $paddingLeft={paddingLeft}\n        $paddingRight={paddingRight}\n        $paddingTop={paddingTop}\n        $textAlign={textAlign}\n      >\n        {children}\n      </StyledBox>\n    )\n  }\n)\n\nBox.displayName = 'Box'\n"],"mappings":"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"}
+{"version":3,"file":"Box.js","names":["React","StyledBox","getLegacyDisplayAndDirection","d","display","direction","includes","undefined","Box","forwardRef","_ref","ref","as","alignContent","alignItems","alignSelf","children","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","gap","justifyContent","margin","marginBottom","marginLeft","marginRight","marginTop","order","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","props","_objectWithoutProperties","_excluded","legacyProps","createElement","_extends","$as","$alignContent","$alignItems","$alignSelf","$display","$flex","$flexBasis","$flexDirection","$flexGrow","$flexShrink","$flexWrap","$gap","$justifyContent","$margin","$marginBottom","$marginLeft","$marginRight","$marginTop","$order","$padding","$paddingBottom","$paddingLeft","$paddingRight","$paddingTop","$textAlign","displayName"],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledBox } from './Box.styles'\nimport type { BoxProps, Display, FlexDirection } from './Box.types'\n\n// TODO remove this after we decommission the LegacyDisplay type\nfunction getLegacyDisplayAndDirection(d?: Display) {\n  if (!d) {\n    return {}\n  }\n\n  let display = d\n\n  let direction: FlexDirection | undefined = display.includes('flex')\n    ? 'row'\n    : undefined\n\n  if (d.includes('flex-inline') || d.includes('inline-flex')) {\n    display = 'inline-flex'\n  } else if (d.includes('flex')) {\n    display = 'flex'\n  }\n\n  if (d.includes('column-reverse')) {\n    direction = 'column-reverse'\n  } else if (d.includes('column')) {\n    direction = 'column'\n  }\n\n  if (d.includes('row-reverse')) {\n    direction = 'row-reverse'\n  } else if (d.includes('row')) {\n    direction = 'row'\n  }\n\n  return {\n    display,\n    direction,\n  }\n}\n\n/**\n * `Box` is a general layout utility for CSS properties like `display`, `text-align`,\n * flex, spacing, and layout properties.\n */\nexport const Box = React.forwardRef<HTMLDivElement, DivAttributes & BoxProps>(\n  function Box(\n    {\n      as,\n      alignContent,\n      alignItems,\n      alignSelf,\n      children,\n      display,\n      flex,\n      flexBasis,\n      flexDirection,\n      flexGrow,\n      flexShrink,\n      flexWrap,\n      gap,\n      justifyContent,\n      margin,\n      marginBottom,\n      marginLeft,\n      marginRight,\n      marginTop,\n      order,\n      padding,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingTop,\n      textAlign,\n      ...props\n    },\n    ref\n  ) {\n    const legacyProps = getLegacyDisplayAndDirection(display)\n\n    return (\n      <StyledBox\n        {...props}\n        ref={ref}\n        $as={as}\n        $alignContent={alignContent}\n        $alignItems={alignItems}\n        $alignSelf={alignSelf}\n        $display={legacyProps.display}\n        $flex={flex}\n        $flexBasis={flexBasis}\n        $flexDirection={flexDirection ?? legacyProps.direction}\n        $flexGrow={flexGrow}\n        $flexShrink={flexShrink}\n        $flexWrap={flexWrap}\n        $gap={gap}\n        $justifyContent={justifyContent}\n        $margin={margin}\n        $marginBottom={marginBottom}\n        $marginLeft={marginLeft}\n        $marginRight={marginRight}\n        $marginTop={marginTop}\n        $order={order}\n        $padding={padding}\n        $paddingBottom={paddingBottom}\n        $paddingLeft={paddingLeft}\n        $paddingRight={paddingRight}\n        $paddingTop={paddingTop}\n        $textAlign={textAlign}\n      >\n        {children}\n      </StyledBox>\n    )\n  }\n)\n\nBox.displayName = 'Box'\n"],"mappings":"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"}

package/dist/Box/Box.styles.js

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

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -5,9 +5,45 @@ declare type NavCrumbProps = LiAttributes & BreadcrumbCrumbProps;
 declare type LegacyCrumbProps = DivAttributes & BreadcrumbCrumbProps;
 export declare const Crumb: React.ForwardRefExoticComponent<(NavCrumbProps | LegacyCrumbProps) & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
 /**
+ * @description  We use breadcrumbs to provide navigational information to the user on every
+ * tool’s child page in Procore. The last element is the active view.
+ *
+ * __Important!__ Prior versions support placing an anchor element in-between `Breadcrumbs` and
+ * `Breadcrumbs.Crumb` elements; going forward anchor elements must be inside `Breadcrumbs.Crumb`.
+ *
+ * Additionally __set `variant="list"` to enable list markup__, it will eventually be the default
+ * but requires users to place hyperlinks inside the `Breadcrumbs.Crumb` (`li`) to be proper HTML.
 
- We use breadcrumbs to provide navigational information to the user on every
- tool’s child page in Procore.
+BEFORE:
+```
+<Breadcrumbs>
+  <a href="#">
+    <Breadcrumbs.Crumb>Deprecated</Breadcrumbs.Crumb>
+  </a>
+</Breadcrumbs>
+```
+
+AFTER:
+```
+<Breadcrumbs variant="list">
+  <Breadcrumbs.Crumb>
+    <a href="#">Standard</a>
+  </Breadcrumbs.Crumb>
+</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`.
+
+ @example
+  <Breadcrumbs variant="list">
+    <Breadcrumbs.Crumb>
+      <a href="#">List Items</a>
+    </Breadcrumbs.Crumb>
+    <Breadcrumbs.Crumb active>
+      Current Item
+    <Breadcrumbs.Crumb>
+  </Breadcrumbs>
 
  @since 10.19.0
 

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -73,10 +73,48 @@ export var Crumb = /*#__PURE__*/React.forwardRef(function Crumb(_ref2, ref) {
 Breadcrumbs_.displayName = 'Breadcrumbs';
 Crumb.displayName = 'Breadcrumbs.Crumb';
 
+//  * @codemod npx ...
+//  * @deprecatedSince 12.x.x
 /**
+ * @description  We use breadcrumbs to provide navigational information to the user on every
+ * tool’s child page in Procore. The last element is the active view.
+ *
+ * __Important!__ Prior versions support placing an anchor element in-between `Breadcrumbs` and
+ * `Breadcrumbs.Crumb` elements; going forward anchor elements must be inside `Breadcrumbs.Crumb`.
+ *
+ * Additionally __set `variant="list"` to enable list markup__, it will eventually be the default
+ * but requires users to place hyperlinks inside the `Breadcrumbs.Crumb` (`li`) to be proper HTML.
 
- We use breadcrumbs to provide navigational information to the user on every
- tool’s child page in Procore.
+BEFORE:
+```
+<Breadcrumbs>
+  <a href="#">
+    <Breadcrumbs.Crumb>Deprecated</Breadcrumbs.Crumb>
+  </a>
+</Breadcrumbs>
+```
+
+AFTER:
+```
+<Breadcrumbs variant="list">
+  <Breadcrumbs.Crumb>
+    <a href="#">Standard</a>
+  </Breadcrumbs.Crumb>
+</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`.
+
+ @example
+  <Breadcrumbs variant="list">
+    <Breadcrumbs.Crumb>
+      <a href="#">List Items</a>
+    </Breadcrumbs.Crumb>
+    <Breadcrumbs.Crumb active>
+      Current Item
+    <Breadcrumbs.Crumb>
+  </Breadcrumbs>
 
  @since 10.19.0
 

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","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 type {\n  DivAttributes,\n  LiAttributes,\n  NavAttributes,\n} from '../_utils/types'\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  NavAttributes & 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 = LiAttributes & BreadcrumbCrumbProps\ntype LegacyCrumbProps = DivAttributes & 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  return (\n    <StyledCrumb\n      as={isLegacy ? 'div' : 'li'}\n      {...(props 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/**\n\n We use breadcrumbs to provide navigational information to the user on every\n tool’s child page in Procore.\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","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","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 type {\n  DivAttributes,\n  LiAttributes,\n  NavAttributes,\n} from '../_utils/types'\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  NavAttributes & 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 = LiAttributes & BreadcrumbCrumbProps\ntype LegacyCrumbProps = DivAttributes & 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  return (\n    <StyledCrumb\n      as={isLegacy ? 'div' : 'li'}\n      {...(props 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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,CAACa,MAAM;EAC9D,oBACEhC,KAAA,CAAAS,aAAA,CAACL,WAAW,EAAAuC,QAAA;IACVU,EAAE,EAAE3B,QAAQ,GAAG,KAAK,GAAG;EAAK,GACvBP,KAAK;IACVL,GAAG,EAAEA;EAAmC,IAEvCmC,qBAAqB,EACrBE,aAAa,GAAG3C,SAAS,gBAAGR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAuC,QAAA,MAAI,CACtB,CAAC;AAElB,CAAC,CAAC;AAEF7B,YAAY,CAAC4C,WAAW,GAAG,aAAa;AAExCT,KAAK,CAACS,WAAW,GAAG,mBAAmB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAM1C,WAAW,GAAGV,gBAAgB,CACzC;EACE2C,KAAK,EAALA;AACF,CAAC,EACDnC,YACF,CAAC"}

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-11_32_0__sc-1q6nqfz-0"
+  componentId: "core-12_0_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-11_32_0__sc-1q6nqfz-1"
+  componentId: "core-12_0_0__sc-1q6nqfz-1"
 })(["display:flex;margin:0;padding-left:0;"]);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSeparator",
-  componentId: "core-11_32_0__sc-1q6nqfz-2"
+  componentId: "core-12_0_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-11_32_0__sc-1q6nqfz-3"
+  componentId: "core-12_0_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

@@ -1,5 +1,10 @@
 import type { Props } from '../_utils/types';
 /**
+ * @deprecated The `list` variant describes the change better, `ol` `li`. The component always renders a `nav`.
+ *
+ * BEFORE variant="nav"
+ * AFTER variant="list"
+ * @deprecatedSince 11.33.0
  * @since 11.6.0
  */
 export declare enum BreadcrumbVariants {
@@ -8,9 +13,15 @@ export declare enum BreadcrumbVariants {
 }
 export interface BreadcrumbProps extends Props {
     /**
-     * @since 11.6.0
+     * @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.
+     *
+     * BEFORE undefined | variant="nav", anchors outside crumb
+     *
+     * AFTER variant="list", anchors inside crumb
+     * @since 11.33.0
      */
-    variant?: BreadcrumbVariants;
+    variant?: BreadcrumbVariants | 'list';
 }
 export interface BreadcrumbCrumbProps extends Props {
     /**
@@ -22,6 +33,7 @@ export interface BreadcrumbCrumbProps extends Props {
      */
     isLast?: boolean;
     /**
+     * @deprecated Handled by parent prop. Use `Breadcrumb variant="list"` with anchors INSIDE `Breadcumb.Crumb`.
      * @since 11.6.0
      */
     variant?: BreadcrumbVariants;

package/dist/Breadcrumbs/Breadcrumbs.types.js

@@ -1,4 +1,9 @@
 /**
+ * @deprecated The `list` variant describes the change better, `ol` `li`. The component always renders a `nav`.
+ *
+ * BEFORE variant="nav"
+ * AFTER variant="list"
+ * @deprecatedSince 11.33.0
  * @since 11.6.0
  */
 export var BreadcrumbVariants = /*#__PURE__*/function (BreadcrumbVariants) {

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 * @since 11.6.0\n */\nexport enum BreadcrumbVariants {\n  NAV = 'nav',\n  LEGACY = 'legacy',\n}\n\nexport interface BreadcrumbProps extends Props {\n  /**\n   * @since 11.6.0\n   */\n  variant?: BreadcrumbVariants\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   * @since 11.6.0\n   */\n  variant?: BreadcrumbVariants\n}\n"],"mappings":"AAEA;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 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"}

package/dist/Button/Button.styles.js

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

package/dist/Calendar/Calendar.d.ts

@@ -1,62 +1,179 @@
 import React from 'react';
 import type { BodyProps, CalendarContainerProps, CalendarProps, DayProps, NavigationProps, NextPrevProps, SelectProps, WeekdaysProps, WeekProps } from './Calendar.types';
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare function Body({ dueDateTime: dueDateTime_, displayDate: displayDate_, disabledDate, onSelect: onSelect_, selectedEnd: selectedEnd_, selectedStart: selectedStart_, ...props }: BodyProps): React.JSX.Element;
 export declare namespace Body {
     var displayName: string;
 }
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Container: React.ForwardRefExoticComponent<CalendarContainerProps & React.RefAttributes<HTMLDivElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Day: React.ForwardRefExoticComponent<DayProps & React.RefAttributes<HTMLDivElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Next: React.ForwardRefExoticComponent<NextPrevProps & React.RefAttributes<HTMLButtonElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Prev: React.ForwardRefExoticComponent<NextPrevProps & React.RefAttributes<HTMLButtonElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Week: React.ForwardRefExoticComponent<WeekProps & React.RefAttributes<HTMLDivElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Weekdays: React.ForwardRefExoticComponent<WeekdaysProps & React.RefAttributes<HTMLDivElement>>;
 /**
+ * @parent Calendar
  * @deprecatedSince 11.6.0
- * @deprecated Intended for internal library development. Export will be removed in a future release.
+ * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
+ * please use the parent as a self closing tag.
+ *
+ * AFTER `<Calendar onSelect />`
  */
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Calendar_: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Body: typeof Body;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Container: React.ForwardRefExoticComponent<CalendarContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Day: React.ForwardRefExoticComponent<DayProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Next: React.ForwardRefExoticComponent<NextPrevProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Prev: React.ForwardRefExoticComponent<NextPrevProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Week: React.ForwardRefExoticComponent<WeekProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecatedSince 11.6.0
+     * @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
+     *
+    AFTER
+    ```
+      <Calendar onSelect />
+    ```
+    */
     Weekdays: React.ForwardRefExoticComponent<WeekdaysProps & React.RefAttributes<HTMLDivElement>>;
 };