@primer/react 38.0.0-rc.2 → 38.0.0-rc.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @primer/react
 
+## 38.0.0-rc.3
+
+### Major Changes
+
+- [#6754](https://github.com/primer/react/pull/6754) [`4d080aa`](https://github.com/primer/react/commit/4d080aa4c8718d2f4ab42c841cf2c8d252cdd19f) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Update Popover to no longer support sx
+
+- [#6666](https://github.com/primer/react/pull/6666) [`71382dc`](https://github.com/primer/react/commit/71382dc5c0726f46a9da7823a9543334b7d0fcca) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes styled-system usage from TextInputWrapper and related components and Storybook stories.
+
+- [#6425](https://github.com/primer/react/pull/6425) [`e23d965`](https://github.com/primer/react/commit/e23d96524783863d92fc770a36c564b14098242b) Thanks [@joshblack](https://github.com/joshblack)! - Update @primer/react to only export ESM bundles
+
+- [#6806](https://github.com/primer/react/pull/6806) [`9d13904`](https://github.com/primer/react/commit/9d13904037541d8f4f68d5d833f632304cace06e) Thanks [@joshblack](https://github.com/joshblack)! - Remove the `sx` prop from `Announce`, `AriaAlert`, and `AriaStatus`
+
+- [#6741](https://github.com/primer/react/pull/6741) [`4896ef1`](https://github.com/primer/react/commit/4896ef1b541e47e5f6364c5eb0f7ab357594e456) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the SegmentedControl component.
+
+### Minor Changes
+
+- [#6815](https://github.com/primer/react/pull/6815) [`2024709`](https://github.com/primer/react/commit/2024709eca73533c74ee042cb1524e78e495fba2) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: add PortalContext
+
+- [#6709](https://github.com/primer/react/pull/6709) [`78784b3`](https://github.com/primer/react/commit/78784b3127acb844ec8a60d4a36141addb75d43d) Thanks [@pksjce](https://github.com/pksjce)! - Remove overflow property from popover (It has no usage)
+
+- [#6721](https://github.com/primer/react/pull/6721) [`d6378c2`](https://github.com/primer/react/commit/d6378c246748403275ca17bc8aa7f713157ab1b7) Thanks [@cheshire137](https://github.com/cheshire137)! - Add count to SegmentedControlButton
+
+- [#6843](https://github.com/primer/react/pull/6843) [`f082c77`](https://github.com/primer/react/commit/f082c77768526d9f97566a793e80a386cc0bc699) Thanks [@camchenry](https://github.com/camchenry)! - Allow changing initially focused button in ConfirmationDialog
+
+### Patch Changes
+
+- [#6669](https://github.com/primer/react/pull/6669) [`627cc4b`](https://github.com/primer/react/commit/627cc4bc2663cc50a6b21cf6ec8b8e99b7b260bb) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use Banner instead of custom implementation for SelectPanel notice
+
+- [#6664](https://github.com/primer/react/pull/6664) [`2910207`](https://github.com/primer/react/commit/2910207766bf6d7168ce356f401d99d26538c496) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumbs : Add overflow menu for responsive behavior
+
+- [#6664](https://github.com/primer/react/pull/6664) [`2910207`](https://github.com/primer/react/commit/2910207766bf6d7168ce356f401d99d26538c496) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumb overflow styling
+
+- [#6846](https://github.com/primer/react/pull/6846) [`37ce4aa`](https://github.com/primer/react/commit/37ce4aaf2830fbe0423e0d7546dfdad6e21ac398) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds `sx` prop back to TextInput
+
 ## 38.0.0-rc.2
 
 ### Major Changes

package/dist/Banner/Banner-459c533a.css

@@ -0,0 +1,2 @@
+.prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-layout=compact]{padding:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden=""]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}@media screen and (min-width:48rem){.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
+/*# sourceMappingURL=Banner-459c533a.css.map */

package/dist/Banner/Banner-459c533a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCA8CF,CArCE,uCAXF,yBAYI,4BAoCJ,CAnCE,CAEA,8CACE,iCACF,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,qDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,yGACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,oCACE,uEACE,YACF,CAEA,sEACE,YACF,CACF,CAEA,oGACE,2CACF,CAGA,2IACE,YACF,CAGA,0IACE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-459c533a.css","sourcesContent":[".Banner {\n  display: grid;\n  padding: var(--base-size-8);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--banner-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thin) solid var(--banner-borderColor);\n  border-radius: var(--borderRadius-medium);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n\n  @supports (container-type: inline-size) {\n    container: banner / inline-size;\n  }\n\n  &[data-layout='compact'] {\n    padding: var(--base-size-4);\n  }\n\n  &[data-variant='critical'] {\n    --banner-bgColor: var(--bgColor-danger-muted);\n    --banner-borderColor: var(--borderColor-danger-muted);\n    --banner-icon-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='info'] {\n    --banner-bgColor: var(--bgColor-accent-muted);\n    --banner-borderColor: var(--borderColor-accent-muted);\n    --banner-icon-fgColor: var(--fgColor-accent);\n  }\n\n  &[data-variant='success'] {\n    --banner-bgColor: var(--bgColor-success-muted);\n    --banner-borderColor: var(--borderColor-success-muted);\n    --banner-icon-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='upsell'] {\n    --banner-bgColor: var(--bgColor-upsell-muted);\n    --banner-borderColor: var(--borderColor-upsell-muted);\n    --banner-icon-fgColor: var(--fgColor-upsell);\n  }\n\n  &[data-variant='warning'] {\n    --banner-bgColor: var(--bgColor-attention-muted);\n    --banner-borderColor: var(--borderColor-attention-muted);\n    --banner-icon-fgColor: var(--fgColor-attention);\n  }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n  font-size: var(--text-body-size-medium);\n  align-items: start;\n  line-height: var(--text-body-lineHeight-medium);\n  row-gap: var(--base-size-4);\n  column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n  display: grid;\n  row-gap: var(--base-size-4);\n  grid-column-start: 1;\n  margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n  margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n  .BannerContent {\n    flex: 1 1 0%;\n  }\n}\n\n.BannerTitle {\n  margin: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n  /* 20px is the line box height of the trailing action buttons */\n  height: var(--base-size-20);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n  /* stylelint-disable-next-line primer/colors */\n  fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n  height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n  margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n  margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n  display: flex;\n  column-gap: var(--base-size-12);\n  align-items: center;\n  margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n  display: none;\n}\n\n@media screen and (--viewportRange-regular) {\n  .BannerActions :where([data-primary-action='trailing']) {\n    display: flex;\n  }\n\n  .BannerActions :where([data-primary-action='leading']) {\n    display: none;\n  }\n}\n\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {\n  margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {\n  display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {\n  display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n  .BannerContainer {\n    display: grid;\n  }\n\n  .BannerContainer:has(.BannerActionsContainer) {\n    grid-template-rows: auto auto;\n  }\n\n  .BannerActions {\n    margin-block-end: var(--base-size-6);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: none;\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: flex;\n  }\n}\n\n@container banner (min-width: 500px) {\n  .BannerContainer {\n    display: grid;\n    grid-template-columns: auto auto;\n  }\n\n  :where(.Banner):not([data-dismissible])\n    :where(.BannerActionsContainer[data-primary-action='trailing'])\n    :where([data-variant='link']:only-child) {\n    padding-inline: 0 var(--base-size-12);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: flex;\n    min-height: var(--base-size-32, 2rem);\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: none;\n  }\n}\n"]}

package/{lib-esm → dist}/Banner/Banner.d.ts

@@ -48,6 +48,10 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
      * Specify the type of the Banner
      */
     variant?: BannerVariant;
+    /**
+     * Specify the layout of the Banner. Compact layout will reduce the padding.
+     */
+    layout?: 'default' | 'compact';
 };
 export declare const Banner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     /**
@@ -95,6 +99,10 @@ export declare const Banner: React.ForwardRefExoticComponent<Omit<React.Detailed
      * Specify the type of the Banner
      */
     variant?: BannerVariant;
+    /**
+     * Specify the layout of the Banner. Compact layout will reduce the padding.
+     */
+    layout?: "default" | "compact";
 } & React.RefAttributes<HTMLElement>>;
 type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type BannerTitleProps<As extends HeadingElement> = {

package/dist/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"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"}

package/{lib-esm → dist}/Banner/Banner.js

@@ -73,6 +73,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner({
     "data-variant": variant,
     tabIndex: -1,
     ref: ref,
+    "data-layout": rest.layout || 'default',
     children: [/*#__PURE__*/jsx("div", {
       className: classes.BannerIcon,
       children: icon && supportsCustomIcon ? icon : iconForVariant[variant]

package/{lib-esm → dist}/Banner/Banner.module.css.js

@@ -1,4 +1,4 @@
-import './Banner-6396546f.css';
+import './Banner-459c533a.css';
 
 var classes = {"Banner":"prc-Banner-Banner-IR8eJ","BannerContainer":"prc-Banner-BannerContainer-lbx3d","BannerContent":"prc-Banner-BannerContent-zTITK","BannerActions":"prc-Banner-BannerActions-XCfHL","BannerTitle":"prc-Banner-BannerTitle-TcuJl","BannerIcon":"prc-Banner-BannerIcon-WuOyf","BannerDismiss":"prc-Banner-BannerDismiss-uBZVm","BannerActionsContainer":"prc-Banner-BannerActionsContainer-ukGMH"};
 

package/{lib → dist}/Banner/index.d.ts

@@ -11,6 +11,7 @@ export declare const Banner: import("react").ForwardRefExoticComponent<Omit<impo
     secondaryAction?: React.ReactNode;
     title?: React.ReactNode;
     variant?: import("./Banner").BannerVariant;
+    layout?: "default" | "compact";
 } & import("react").RefAttributes<HTMLElement>> & {
     Title: typeof BannerTitle;
     Description: typeof BannerDescription;

package/{lib → dist}/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,iBAAiB,EAGlB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EACV,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,UAAU,CAAA;AAEjB,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAKjB,CAAA;AAEF,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,EACxB,0BAA0B,GAC3B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,iBAAiB,EAGlB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EACV,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,UAAU,CAAA;AAEjB,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CAKjB,CAAA;AAEF,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,EACxB,0BAA0B,GAC3B,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs-7cbdf03c.css

@@ -0,0 +1,2 @@
+.prc-Breadcrumbs-BreadcrumbsBase-6gqOz{display:flex;justify-content:space-between;width:100%}.prc-Breadcrumbs-BreadcrumbsList-K7eeK{margin-bottom:0;margin-top:0;padding-left:0}:is([data-overflow=menu],[data-overflow=menu-with-root]) .prc-Breadcrumbs-BreadcrumbsList-K7eeK{display:flex;flex-direction:row;white-space:nowrap}.prc-Breadcrumbs-ItemSeparator-nYObp{align-self:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap}.prc-Breadcrumbs-ItemWrapper-Mfwuj{list-style:none}.prc-Breadcrumbs-ItemWrapper-Mfwuj,.prc-Breadcrumbs-ItemWrapper-Mfwuj:after{display:inline-block;font-size:var(--text-body-size-medium,.875rem)}.prc-Breadcrumbs-ItemWrapper-Mfwuj:after{border-right:.1em solid var(--fgColor-muted,var(--color-fg-muted));content:"";height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.prc-Breadcrumbs-ItemWrapper-Mfwuj:first-child{margin-left:0}.prc-Breadcrumbs-ItemWrapper-Mfwuj:last-child:after{content:none}.prc-Breadcrumbs-Item-7BKO-{display:inline-block;font-size:var(--text-body-size-medium,.875rem)}.prc-Breadcrumbs-Item-7BKO-:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:1px}[data-variant=normal] .prc-Breadcrumbs-Item-7BKO-{color:var(--fgColor-link,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-):not([aria-current]):hover{-webkit-text-decoration:underline;text-decoration:underline}:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-):focus-visible{-webkit-text-decoration:none;text-decoration:none}[aria-current]:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-){color:var(--fgColor-default,var(--color-fg-default))}[data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-{border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-6,.375rem);-webkit-text-decoration:none;text-decoration:none}:is([data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-):hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));-webkit-text-decoration:none;text-decoration:none}[aria-current]:is([data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-){font-weight:var(--base-text-weight-semibold,600)}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr{align-items:center;display:inline-grid;flex:0 99999 auto;grid-auto-flow:column;list-style:none;min-width:auto;white-space:nowrap}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:has(.prc-Breadcrumbs-MenuOverlay-aCOyl){white-space:normal}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:first-child{margin-left:0}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:last-child .prc-Breadcrumbs-ItemSeparator-nYObp{display:none}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai{display:inline-block;position:relative}:is(.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai) summary{cursor:pointer;list-style:none}:is(:is(.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai) summary)::-webkit-details-marker{display:none}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuOverlay-aCOyl{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));max-height:100vh;max-width:var(--overlay-width-small,20rem);min-width:var(--overlay-width-xsmall,12rem);overflow:hidden;position:absolute;top:calc(var(--overlay-offset,.25rem) + var(--control-small-size,1.75rem));z-index:1}@media (prefers-reduced-motion:no-preference){.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuOverlay-aCOyl{animation:prc-Breadcrumbs-overlay-appear-Ct2Xv .2s cubic-bezier(.33,1,.68,1)}}
+/*# sourceMappingURL=Breadcrumbs-7cbdf03c.css.map */

package/dist/Breadcrumbs/Breadcrumbs-7cbdf03c.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Breadcrumbs/Breadcrumbs.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,uCACE,YAAa,CACb,6BAA8B,CAC9B,UACF,CAEA,uCAGE,eAAgB,CADhB,YAAa,CADb,cAGF,CAIE,gGAEE,YAAa,CACb,kBAAmB,CAFnB,kBAGF,CAGF,qCAGE,iBAAkB,CAFlB,gDAA2B,CAC3B,YAAa,CAEb,sBAAuB,CAEvB,wBAAiB,CAAjB,gBAAiB,CADjB,kBAEF,CAEA,mCAGE,eAuBF,CArBE,4EAJA,oBAAqB,CACrB,8CAaA,CAVA,yCAQE,kEAA8C,CAF9C,UAAW,CAJX,WAAa,CAEb,aAAe,CAKf,2CACF,CAEA,+CACE,aACF,CAGE,oDACE,YACF,CAIJ,4BACE,oBAAqB,CACrB,8CAKF,CAHE,0CC3DA,eAAgB,CAFhB,kEAAgC,CAChC,kBD8DA,CAIA,kDACE,gDAA0B,CAC1B,4BAAqB,CAArB,oBAeF,CAZI,iFACE,iCAA0B,CAA1B,yBACF,CAGF,qEACE,4BAAqB,CAArB,oBACF,CAEA,qEACE,oDACF,CAKF,oDAKE,gDAAyC,CAJzC,oDAA6B,CAG7B,uCAAiC,CADjC,yCAAkC,CADlC,4BAAqB,CAArB,oBAaF,CARE,+DACE,kGAAoD,CACpD,4BAAqB,CAArB,oBACF,CAEA,uEACE,gDACF,CAIJ,uCAGE,kBAAmB,CAFnB,mBAAoB,CAGpB,iBAAkB,CAFlB,qBAAsB,CAKtB,eAAgB,CAFhB,cAAe,CACf,kBAiDF,CA7CE,+EACE,kBACF,CAEA,mDACE,aACF,CAGE,uFACE,YACF,CAGF,0EAEE,oBAAqB,CADrB,iBAWF,CARE,uFAEE,cAAe,CADf,eAMF,CAHE,oHACE,YACF,CAIJ,0EAKE,mEAAwC,CADxC,8CAAwC,CADxC,mEAAwC,CAIxC,gBAAiB,CACjB,0CAAqC,CAFrC,2CAAsC,CAGtC,eAAgB,CARhB,iBAAkB,CAUlB,0EAA4D,CAT5D,SAcF,CAHE,8CAbF,0EAcI,4EAEJ,CADE","file":"Breadcrumbs-7cbdf03c.css","sourcesContent":[".BreadcrumbsBase {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.BreadcrumbsList {\n  padding-left: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n[data-overflow='menu'],\n[data-overflow='menu-with-root'] {\n  & .BreadcrumbsList {\n    white-space: nowrap;\n    display: flex;\n    flex-direction: row;\n  }\n}\n\n.ItemSeparator {\n  color: var(--fgColor-muted);\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.ItemWrapper {\n  display: inline-block;\n  font-size: var(--text-body-size-medium);\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    font-size: var(--text-body-size-medium);\n    content: '';\n    /* stylelint-disable-next-line primer/borders, primer/colors */\n    border-right: 0.1em solid var(--fgColor-muted);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n\n  &:last-child {\n    &::after {\n      content: none;\n    }\n  }\n}\n\n.Item {\n  display: inline-block;\n  font-size: var(--text-body-size-medium);\n\n  &:focus-visible {\n    @mixin focusOutline 1px;\n  }\n}\n\n[data-variant='normal'] {\n  & .Item {\n    color: var(--fgColor-link);\n    text-decoration: none;\n\n    &:not([aria-current]) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    &:focus-visible {\n      text-decoration: none;\n    }\n\n    &[aria-current] {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n[data-variant='spacious'] {\n  & .Item {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    padding-inline: var(--base-size-6);\n    padding-block: var(--base-size-4);\n    border-radius: var(--borderRadius-medium);\n\n    &:hover {\n      background: var(--control-transparent-bgColor-hover);\n      text-decoration: none;\n    }\n\n    &[aria-current] {\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n}\n\n.BreadcrumbsItem {\n  display: inline-grid;\n  grid-auto-flow: column;\n  align-items: center;\n  flex: 0 99999 auto;\n  min-width: auto;\n  white-space: nowrap;\n  list-style: none;\n\n  /* allow menu items to wrap line */\n  &:has(.MenuOverlay) {\n    white-space: normal;\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n\n  &:last-child {\n    .ItemSeparator {\n      display: none;\n    }\n  }\n\n  .MenuDetails {\n    position: relative;\n    display: inline-block;\n\n    & summary {\n      list-style: none;\n      cursor: pointer;\n\n      &::-webkit-details-marker {\n        display: none;\n      }\n    }\n  }\n\n  .MenuOverlay {\n    position: absolute;\n    z-index: 1;\n    box-shadow: var(--shadow-floating-small);\n    border-radius: var(--borderRadius-large);\n    background-color: var(--overlay-bgColor);\n    min-width: var(--overlay-width-xsmall);\n    max-height: 100vh;\n    max-width: var(--overlay-width-small);\n    overflow: hidden;\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(var(--overlay-offset) + var(--control-small-size));\n\n    @media (prefers-reduced-motion: no-preference) {\n      animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n    }\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

package/{lib → dist}/Breadcrumbs/Breadcrumbs.d.ts

@@ -4,9 +4,25 @@ import type { SxProp } from '../sx';
 import type { ComponentProps } from '../utils/types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 export type BreadcrumbsProps = React.PropsWithChildren<{
+    /**
+     * Optional class name for the breadcrumbs container.
+     */
     className?: string;
+    /**
+     * Controls the overflow behavior of the breadcrumbs.
+     * By default all overflowing crumbs will "wrap" in the given space taking up extra height.
+     * In the "menu" option we'll see the overflowing crumbs as part of a menu like dropdown instead of the root breadcrumb.
+     * In "menu-with-root" we see that instead of the root, the menu button will take the place of the next breadcrumb.
+     */
+    overflow?: 'wrap' | 'menu' | 'menu-with-root';
+    /**
+     * Controls the visual variant of the breadcrumbs.
+     * By default, the breadcrumbs will have a normal appearance.
+     * In the "spacious" option, the breadcrumbs will have increased padding and a more relaxed layout.
+     */
+    variant?: 'normal' | 'spacious';
 } & SxProp>;
-declare function Breadcrumbs({ className, children, sx: sxProp }: BreadcrumbsProps): React.JSX.Element;
+declare function Breadcrumbs({ className, children, sx: sxProp, overflow, variant }: BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }

package/dist/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAa/F,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CAChC,GAAG,MAAM,CACX,CAAA;AA+GD,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAiN9G;kBAjNQ,WAAW;;;AA6NpB,KAAK,0BAA0B,GAAG;IAChC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,GACR,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GACvC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA;AAElC,QAAA,MAAM,eAAe,EAUf,8BAA8B,CAAC,GAAG,EAAE,0BAA0B,CAAC,CAAA;AAMrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;;;;AACzE,wBAAkE;AAElE;;GAEG;AACH,eAAO,MAAM,UAAU;;CAAsD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA"}