@primer/react 0.0.0-20260617202152 → 0.0.0-20260617213021

package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css

@@ -1,2 +1,2 @@
-.prc-SelectPanel2-Overlay--Q-FI{border:none;color:var(--fgColor-default,#1f2328);padding:0;--max-height:0;--position-top:0;--position-left:0}.prc-SelectPanel2-Overlay--Q-FI:where([open]){display:flex}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){left:var(--position-left);margin:0;top:var(--position-top)}:is(.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]))::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal]){bottom:0;left:0;right:0;top:0}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal])::backdrop{background-color:var(--overlay-backdrop-bgColor,#c8d1da66)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){border-radius:unset;height:100%;left:0;margin:0;max-height:100vh;max-width:100vw;top:0;width:100%}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=bottom-sheet]){border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;margin:0;max-height:calc(100vh - 64px);max-width:100vw;top:auto;width:100%}.prc-SelectPanel2-Form-bZ9HS{width:100%}.prc-SelectPanel2-Container-e5e6-,.prc-SelectPanel2-Form-bZ9HS{display:flex;flex-direction:column}.prc-SelectPanel2-Container-e5e6-{flex-grow:1;flex-shrink:1;justify-content:space-between;overflow:hidden}.prc-SelectPanel2-Container-e5e6- ul{flex-grow:1;overflow-y:auto}.prc-SelectPanel2-Container-e5e6- li:not(:focus,[data-is-active-descendant],[data-active]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-SelectPanel2-HeaderContent-MsaAS{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-description]){align-items:flex-start}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-search-input]){margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-TitleWrapper-HzPu3{margin-left:var(--base-size-8,.5rem);margin-top:0}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-description]){margin-top:2px}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-on-back]){margin-left:var(--base-size-4,.25rem)}.prc-SelectPanel2-TextInput-lHH1n{padding-left:var(--base-size-8,.5rem)!important}.prc-SelectPanel2-TextInput-lHH1n:has(input:placeholder-shown) .TextInput-action{display:none}.prc-SelectPanel2-Checkbox-AYR38{margin-top:0}.prc-SelectPanel2-FlexBox-gWPRg{display:flex}.prc-SelectPanel2-Title-T-h3f{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel2-Description-qTXfi{display:block;font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-ClearAction-tQj-f,.prc-SelectPanel2-Description-qTXfi{color:var(--fgColor-muted,#59636e)}.prc-SelectPanel2-ClearAction-tQj-f{background:none}.prc-SelectPanel2-Footer-TibV0{align-items:center;border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,#d1d9e0);display:flex;flex-shrink:0;justify-content:space-between;min-height:44px;padding:var(--base-size-16,1rem)}.prc-SelectPanel2-Footer-TibV0:where([data-hide-primary-actions]){padding:var(--base-size-8,.5rem)}.prc-SelectPanel2-FooterContent-UjAOM{flex-grow:0}.prc-SelectPanel2-FooterContent-UjAOM:where([data-hide-primary-actions]){flex-grow:1}.prc-SelectPanel2-FooterActions-T6yQR,.prc-SelectPanel2-SecondaryCheckbox-omkf-{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-SecondaryCheckbox-omkf-{align-items:center}.prc-SelectPanel2-SmallText-c42ay{font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-SelectPanelLoading-mtyhD{align-items:center;display:flex;flex-direction:column;gap:var(--stack-gap-normal,1rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px)}.prc-SelectPanel2-LoadingText-DB0wN{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageFull-nY-qF{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px);padding-left:var(--base-size-24,1.5rem);padding-right:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel2-MessageFull-nY-qF a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-Octicon-zt-zU{margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Error-ZrZQQ{color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Warning-PDsVF{color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-MessageTitle-T7v9d{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500)}.prc-SelectPanel2-MessageContent-UZ9vY{align-items:center;color:var(--fgColor-muted,#59636e);flex-direction:column;font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageContent-UZ9vY,.prc-SelectPanel2-MessageInline-sErQf{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-MessageInline-sErQf{border-bottom:var(--borderWidth-thin,.0625rem) solid;font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel2-MessageInline-sErQf a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=error]){background-color:var(--bgColor-danger-muted,#ffebe9);border-color:var(--borderColor-danger-muted,#ff818266);color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,#fff8c5);border-color:var(--borderColor-attention-muted,#d4a72c66);color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-Header-LKyEJ{border-bottom:var(--borderWidth-thin,.0625rem) solid;border-bottom-color:var(--borderColor-default,#d1d9e0);display:flex;flex-direction:column;padding:var(--base-size-8,.5rem)}
+.prc-SelectPanel2-Overlay--Q-FI{border:none;color:var(--fgColor-default,#1f2328);padding:0;--max-height:0;--position-top:0;--position-left:0}.prc-SelectPanel2-Overlay--Q-FI:where([open]){display:flex}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){left:var(--position-left);margin:0;top:var(--position-top)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal]){bottom:0;left:0;right:0;top:0}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal])::backdrop{background-color:var(--overlay-backdrop-bgColor,#c8d1da66)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){border-radius:unset;height:100%;left:0;margin:0;max-height:100vh;max-width:100vw;top:0;width:100%}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=bottom-sheet]){border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;margin:0;max-height:calc(100vh - 64px);max-width:100vw;top:auto;width:100%}.prc-SelectPanel2-Form-bZ9HS{width:100%}.prc-SelectPanel2-Container-e5e6-,.prc-SelectPanel2-Form-bZ9HS{display:flex;flex-direction:column}.prc-SelectPanel2-Container-e5e6-{flex-grow:1;flex-shrink:1;justify-content:space-between;overflow:hidden}.prc-SelectPanel2-Container-e5e6- ul{flex-grow:1;overflow-y:auto}.prc-SelectPanel2-Container-e5e6- li:not(:focus,[data-is-active-descendant],[data-active]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-SelectPanel2-HeaderContent-MsaAS{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-description]){align-items:flex-start}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-search-input]){margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-TitleWrapper-HzPu3{margin-left:var(--base-size-8,.5rem);margin-top:0}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-description]){margin-top:2px}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-on-back]){margin-left:var(--base-size-4,.25rem)}.prc-SelectPanel2-TextInput-lHH1n{padding-left:var(--base-size-8,.5rem)!important}.prc-SelectPanel2-TextInput-lHH1n:has(input:placeholder-shown) .TextInput-action{display:none}.prc-SelectPanel2-Checkbox-AYR38{margin-top:0}.prc-SelectPanel2-FlexBox-gWPRg{display:flex}.prc-SelectPanel2-Title-T-h3f{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel2-Description-qTXfi{display:block;font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-ClearAction-tQj-f,.prc-SelectPanel2-Description-qTXfi{color:var(--fgColor-muted,#59636e)}.prc-SelectPanel2-ClearAction-tQj-f{background:none}.prc-SelectPanel2-Footer-TibV0{align-items:center;border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,#d1d9e0);display:flex;flex-shrink:0;justify-content:space-between;min-height:44px;padding:var(--base-size-16,1rem)}.prc-SelectPanel2-Footer-TibV0:where([data-hide-primary-actions]){padding:var(--base-size-8,.5rem)}.prc-SelectPanel2-FooterContent-UjAOM{flex-grow:0}.prc-SelectPanel2-FooterContent-UjAOM:where([data-hide-primary-actions]){flex-grow:1}.prc-SelectPanel2-FooterActions-T6yQR,.prc-SelectPanel2-SecondaryCheckbox-omkf-{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-SecondaryCheckbox-omkf-{align-items:center}.prc-SelectPanel2-SmallText-c42ay{font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-SelectPanelLoading-mtyhD{align-items:center;display:flex;flex-direction:column;gap:var(--stack-gap-normal,1rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px)}.prc-SelectPanel2-LoadingText-DB0wN{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageFull-nY-qF{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px);padding-left:var(--base-size-24,1.5rem);padding-right:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel2-MessageFull-nY-qF a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-Octicon-zt-zU{margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Error-ZrZQQ{color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Warning-PDsVF{color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-MessageTitle-T7v9d{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500)}.prc-SelectPanel2-MessageContent-UZ9vY{align-items:center;color:var(--fgColor-muted,#59636e);flex-direction:column;font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageContent-UZ9vY,.prc-SelectPanel2-MessageInline-sErQf{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-MessageInline-sErQf{border-bottom:var(--borderWidth-thin,.0625rem) solid;font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel2-MessageInline-sErQf a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=error]){background-color:var(--bgColor-danger-muted,#ffebe9);border-color:var(--borderColor-danger-muted,#ff818266);color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,#fff8c5);border-color:var(--borderColor-attention-muted,#d4a72c66);color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-Header-LKyEJ{border-bottom:var(--borderWidth-thin,.0625rem) solid;border-bottom-color:var(--borderColor-default,#d1d9e0);display:flex;flex-direction:column;padding:var(--base-size-8,.5rem)}
 /*# sourceMappingURL=SelectPanel-608e207e.css.map */

package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,gJACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CAMF,CAHE,iFACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-608e207e.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(input:placeholder-shown) :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}
+{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CAMF,CAHE,iFACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-608e207e.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(input:placeholder-shown) :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}

package/dist/experimental/SelectPanel2/SelectPanel.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import type { ButtonProps, TextInputProps, LinkProps, CheckboxProps } from '../../index';
+import type { ButtonProps } from '../../Button';
+import type { TextInputProps } from '../../TextInput';
+import type { LinkProps } from '../../Link';
+import type { CheckboxProps } from '../../Checkbox';
 import type { OverlayProps } from '../../Overlay/Overlay';
 import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
 import type { PositionSettings } from '@primer/behaviors';

package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAOvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAydD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAqCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAtRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAiEnF,CAAA"}
+{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,iBAAiB,CAAA;AAEnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,YAAY,CAAA;AACzC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAA;AAYjD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAOvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA0dD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAqCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAtRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAiEnF,CAAA"}

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { AlertIcon, SearchIcon, XCircleFillIcon, ArrowLeftIcon, FilterRemoveIcon, XIcon } from '@primer/octicons-react';
+import { IconButton } from '../../Button/IconButton.js';
+import { ButtonComponent } from '../../Button/Button.js';
 import { ActionListContainerContext } from '../../ActionList/ActionListContainerContext.js';
 import { useSlots } from '../../hooks/useSlots.js';
 import { BaseOverlay } from '../../Overlay/Overlay.js';
@@ -17,9 +19,7 @@ import { useAnchoredPosition } from '../../hooks/useAnchoredPosition.js';
 import { AriaStatus } from '../../live-region/AriaStatus.js';
 import Octicon from '../../Octicon/Octicon.js';
 import Spinner from '../../Spinner/Spinner.js';
-import { ButtonComponent } from '../../Button/Button.js';
 import TextInput from '../../TextInput/TextInput.js';
-import { IconButton } from '../../Button/IconButton.js';
 import Heading from '../../Heading/Heading.js';
 import { useFormControlForwardedProps } from '../../FormControl/_FormControlContext.js';
 import Link from '../../Link/Link.js';
@@ -171,6 +171,7 @@ const Panel = ({
   // tl;dr: react takes over autofocus instead of letting the browser handle it,
   // but not for dialogs, so we have to do it
   React.useEffect(function initialFocus() {
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
     if (internalOpen) {
       const searchInput = document.querySelector('dialog[open] input');
       if (searchInput) searchInput.focus();else moveFocusToList();

package/dist/hooks/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;SAGK;IACL,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAe,EACf,YAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAoE5E"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;SAGK;IACL,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAe,EACf,YAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAsE5E"}

package/dist/hooks/useControllableState.js

@@ -41,12 +41,14 @@ function useControllableState({
 
     // Uncontrolled -> Controlled
     // If the component prop is uncontrolled, the prop value should be undefined
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
     if (controlled.current === false && controlledValue) {
       process.env.NODE_ENV !== "production" ? warning(true, 'A component is changing an uncontrolled %s component to be controlled. ' + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
     }
 
     // Controlled -> Uncontrolled
     // If the component prop is controlled, the prop value should be defined
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
     if (controlled.current === true && !controlledValue) {
       process.env.NODE_ENV !== "production" ? warning(true, 'A component is changing a controlled %s component to be uncontrolled. ' + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
     }

package/dist/hooks/useDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDetails.d.ts","sourceRoot":"","sources":["../../src/hooks/useDetails.tsx"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,GAAG,EAAE,mBAAmB,EAAE,WAAW,EAAE,cAAc,EAAC,EAAE,oBAAoB;;;;sBA8BtE,KAAK,CAAC,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC;;;;EAYlE;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"useDetails.d.ts","sourceRoot":"","sources":["../../src/hooks/useDetails.tsx"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,GAAG,EAAE,mBAAmB,EAAE,WAAW,EAAE,cAAc,EAAC,EAAE,oBAAoB;;;;sBA+BtE,KAAK,CAAC,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC;;;;EAYlE;AAED,eAAe,UAAU,CAAA"}

package/dist/hooks/useDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../src/hooks/useDialog.ts"],"names":[],"mappings":"AAcA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACrD,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAgB,EAChB,eAAe,EACf,cAAc,GACf,EAAE,mBAAmB;;2BAsEV,KAAK,CAAC,aAAa;;EAyB9B;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../src/hooks/useDialog.ts"],"names":[],"mappings":"AAcA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACrD,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAgB,EAChB,eAAe,EACf,cAAc,GACf,EAAE,mBAAmB;;2BAyEV,KAAK,CAAC,aAAa;;EAyB9B;AAED,eAAe,SAAS,CAAA"}

package/dist/hooks/useFocusZone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusZone.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusZone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,yBAAyB,CAAC;IAC/F;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,GAAE,qBAA0B,EACpC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChE,CAoCA"}
+{"version":3,"file":"useFocusZone.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusZone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,yBAAyB,CAAC;IAC/F;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,GAAE,qBAA0B,EACpC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChE,CAqCA"}

package/dist/hooks/useFocusZone.js

@@ -11,7 +11,9 @@ function useFocusZone(settings = {}, dependencies = []) {
   const disabled = settings.disabled;
   const abortController = React.useRef();
   useEffect(() => {
-    if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+    if (containerRef.current instanceof HTMLElement && (
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
+    !useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
       if (!disabled) {
         var _activeDescendantCont;
         const vanillaSettings = {

package/dist/hooks/useMenuInitialFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuInitialFocus.d.ts","sourceRoot":"","sources":["../../src/hooks/useMenuInitialFocus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,mBAAmB,GAC9B,MAAM,OAAO,EACb,eAAe,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClD,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAsEhD,CAAA"}
+{"version":3,"file":"useMenuInitialFocus.d.ts","sourceRoot":"","sources":["../../src/hooks/useMenuInitialFocus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,mBAAmB,GAC9B,MAAM,OAAO,EACb,eAAe,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClD,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAuEhD,CAAA"}

package/dist/hooks/useMenuInitialFocus.js

@@ -35,6 +35,7 @@ const useMenuInitialFocus = (open, containerRef, anchorRef) => {
    * ArrowUp: last element
    */
   React.useEffect(function moveFocusOnOpen() {
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
     if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return; // wait till the menu is open
 
     const iterable = iterateFocusableElements(containerRef.current);

package/dist/hooks/useMergedRefs.js

@@ -1,5 +1,4 @@
-import { c } from 'react-compiler-runtime';
-import 'react';
+import { useCallback } from 'react';
 import { reactMajorVersion, isExperimentalReactVersion } from '../utils/environment.js';
 
 /**
@@ -42,35 +41,23 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
  * }
  */
 function useMergedRefs(refA, refB) {
-  const $ = c(3);
-  let t0;
-  if ($[0] !== refA || $[1] !== refB) {
-    t0 = value => {
-      const cleanupA = setRef(refA, value);
-      const cleanupB = setRef(refB, value);
-      if (!supportsRefCleanup) {
-        return;
-      }
-      return () => {
-        if (cleanupA) {
-          cleanupA();
-        } else {
-          setRef(refA, null);
-        }
-        if (cleanupB) {
-          cleanupB();
-        } else {
-          setRef(refB, null);
-        }
-      };
+  return useCallback(value => {
+    const cleanupA = setRef(refA, value);
+    const cleanupB = setRef(refB, value);
+
+    // TODO: remove when we are on React 19
+    if (!supportsRefCleanup) {
+      return;
+    }
+
+    // Only works in React 19. In React 18, the cleanup function will be ignored and the ref will get called with
+    // `null` which will be passed to each ref as expected.
+    return () => {
+      // For object refs and callback refs that don't return cleanups, we still need to pass `null` on cleanup
+      if (cleanupA) cleanupA();else setRef(refA, null);
+      if (cleanupB) cleanupB();else setRef(refB, null);
     };
-    $[0] = refA;
-    $[1] = refB;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
+  }, [refA, refB]);
 }
 
 /**

package/dist/hooks/useMnemonics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMnemonics.d.ts","sourceRoot":"","sources":["../../src/hooks/useMnemonics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,EAAE,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;CA2E5F,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,aAAa,YAEjD,CAAA"}
+{"version":3,"file":"useMnemonics.d.ts","sourceRoot":"","sources":["../../src/hooks/useMnemonics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,EAAE,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;CA4E5F,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,aAAa,YAEjD,CAAA"}

package/dist/internal/components/TextInputWrapper-b2f7f9fa.css

@@ -1,2 +1,2 @@
-.prc-components-TextInputBaseWrapper-wY-n0{align-items:stretch;background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--control-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,inset 0 1px 0 0 #1f23280a);color:var(--fgColor-default,#1f2328);cursor:text;display:inline-flex;font-size:var(--text-body-size-medium,.875rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-32,2rem);outline:none;overflow:hidden;vertical-align:middle}.prc-components-TextInputBaseWrapper-wY-n0 input,.prc-components-TextInputBaseWrapper-wY-n0 textarea{cursor:text}.prc-components-TextInputBaseWrapper-wY-n0 select{cursor:pointer}:is(.prc-components-TextInputBaseWrapper-wY-n0 input,.prc-components-TextInputBaseWrapper-wY-n0 textarea,.prc-components-TextInputBaseWrapper-wY-n0 select)::placeholder{color:var(--fgColor-muted,#59636e)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-no-trailing-action]:focus-within),.prc-components-TextInputBaseWrapper-wY-n0:where([data-trailing-action][data-focused]){border-color:var(--borderColor-accent-emphasis,#0969da);outline:var(--borderWidth-thick,.125rem) solid var(--borderColor-accent-emphasis,#0969da);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0>textarea{padding:var(--base-size-12,.75rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-contrast]){background-color:var(--control-bgColor-contrast,var(--bgColor-inset,#f6f8fa))}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]){background-color:var(--control-bgColor-disabled,#eff2f5);border-color:var(--control-borderColor-disabled,#818b981a);box-shadow:none;color:var(--fgColor-disabled,#818b98)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) input,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) select,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) textarea{cursor:not-allowed}.prc-components-TextInputBaseWrapper-wY-n0:where([data-monospace]){font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]){border-color:var(--borderColor-danger-emphasis,#cf222e)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where([data-no-trailing-action]):focus-within,.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where([data-trailing-action][data-focused]){border-color:var(--control-borderColor-danger,#cf222e);outline:2px solid var(--control-borderColor-danger,#cf222e);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=success]){border-color:var(--bgColor-success-emphasis,#1f883d)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-block]){align-self:stretch;display:flex;width:100%}@media screen and (min-width:48rem){.prc-components-TextInputBaseWrapper-wY-n0{font-size:var(--text-body-size-medium,.875rem)}}.prc-components-TextInputBaseWrapper-wY-n0{--inner-action-size:var(--base-size-24,1.5rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=small]){--inner-action-size:var(--base-size-20,1.25rem);font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-28,1.75rem);padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=large]){--inner-action-size:var(--base-size-28,1.75rem);height:var(--base-size-40,2.5rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=small]){font-size:(--text-body-size-small);line-height:var(--base-size-20,1.25rem);min-height:28px;padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=large]){font-size:var(--text-title-size-medium,1.25rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputWrapper-Hpdqi,.prc-components-TextInputWrapper-Hpdqi>input,.prc-components-TextInputWrapper-Hpdqi>select{padding-left:0;padding-right:0}.prc-components-TextInputWrapper-Hpdqi{background-position:right 8px center;background-repeat:no-repeat}.prc-components-TextInputWrapper-Hpdqi>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi .TextInput-action,.prc-components-TextInputWrapper-Hpdqi .TextInput-icon{align-self:center;color:var(--fgColor-muted,#59636e);flex-shrink:0}.prc-components-TextInputWrapper-Hpdqi:where([data-leading-visual]){padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-trailing-visual][data-no-trailing-action]){padding-right:var(--base-size-8,.5rem)}:is(.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-visual]),.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-action]))>input,:is(.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-visual]),.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-action]))>select{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-trailing-visual][data-no-trailing-action])>input,.prc-components-TextInputWrapper-Hpdqi:where([data-no-trailing-visual][data-no-trailing-action])>select{padding-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action])>input,.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action])>select{padding-left:var(--base-size-12,.75rem);padding-right:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-leading-visual]){padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-trailing-visual][data-no-trailing-action]){padding-right:var(--base-size-12,.75rem)}
+.prc-components-TextInputBaseWrapper-wY-n0{align-items:stretch;background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--control-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,inset 0 1px 0 0 #1f23280a);color:var(--fgColor-default,#1f2328);cursor:text;display:inline-flex;font-size:var(--text-body-size-medium,.875rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-32,2rem);outline:none;overflow:hidden;vertical-align:middle}.prc-components-TextInputBaseWrapper-wY-n0 input,.prc-components-TextInputBaseWrapper-wY-n0 textarea{cursor:text}.prc-components-TextInputBaseWrapper-wY-n0 select{cursor:pointer}.prc-components-TextInputBaseWrapper-wY-n0 input::placeholder{color:var(--fgColor-muted,#59636e)}.prc-components-TextInputBaseWrapper-wY-n0 textarea::placeholder{color:var(--fgColor-muted,#59636e)}.prc-components-TextInputBaseWrapper-wY-n0 select::placeholder{color:var(--fgColor-muted,#59636e)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-no-trailing-action]:focus-within),.prc-components-TextInputBaseWrapper-wY-n0:where([data-trailing-action][data-focused]){border-color:var(--borderColor-accent-emphasis,#0969da);outline:var(--borderWidth-thick,.125rem) solid var(--borderColor-accent-emphasis,#0969da);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0>textarea{padding:var(--base-size-12,.75rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-contrast]){background-color:var(--control-bgColor-contrast,var(--bgColor-inset,#f6f8fa))}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]){background-color:var(--control-bgColor-disabled,#eff2f5);border-color:var(--control-borderColor-disabled,#818b981a);box-shadow:none;color:var(--fgColor-disabled,#818b98)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) input,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) select,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) textarea{cursor:not-allowed}.prc-components-TextInputBaseWrapper-wY-n0:where([data-monospace]){font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]){border-color:var(--borderColor-danger-emphasis,#cf222e)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where([data-no-trailing-action]):focus-within,.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where([data-trailing-action][data-focused]){border-color:var(--control-borderColor-danger,#cf222e);outline:2px solid var(--control-borderColor-danger,#cf222e);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=success]){border-color:var(--bgColor-success-emphasis,#1f883d)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-block]){align-self:stretch;display:flex;width:100%}@media screen and (min-width:48rem){.prc-components-TextInputBaseWrapper-wY-n0{font-size:var(--text-body-size-medium,.875rem)}}.prc-components-TextInputBaseWrapper-wY-n0{--inner-action-size:var(--base-size-24,1.5rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=small]){--inner-action-size:var(--base-size-20,1.25rem);font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-28,1.75rem);padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=large]){--inner-action-size:var(--base-size-28,1.75rem);height:var(--base-size-40,2.5rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=small]){font-size:(--text-body-size-small);line-height:var(--base-size-20,1.25rem);min-height:28px;padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=large]){font-size:var(--text-title-size-medium,1.25rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputWrapper-Hpdqi,.prc-components-TextInputWrapper-Hpdqi>input,.prc-components-TextInputWrapper-Hpdqi>select{padding-left:0;padding-right:0}.prc-components-TextInputWrapper-Hpdqi{background-position:right 8px center;background-repeat:no-repeat}.prc-components-TextInputWrapper-Hpdqi>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi .TextInput-action,.prc-components-TextInputWrapper-Hpdqi .TextInput-icon{align-self:center;color:var(--fgColor-muted,#59636e);flex-shrink:0}.prc-components-TextInputWrapper-Hpdqi:where([data-leading-visual]){padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-trailing-visual][data-no-trailing-action]){padding-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-visual])>input{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-action])>input{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-visual])>select{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-trailing-action])>select{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-trailing-visual][data-no-trailing-action])>input,.prc-components-TextInputWrapper-Hpdqi:where([data-no-trailing-visual][data-no-trailing-action])>select{padding-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action])>input,.prc-components-TextInputWrapper-Hpdqi:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action])>select{padding-left:var(--base-size-12,.75rem);padding-right:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-leading-visual]){padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-trailing-visual][data-no-trailing-action]){padding-right:var(--base-size-12,.75rem)}
 /*# sourceMappingURL=TextInputWrapper-b2f7f9fa.css.map */

package/dist/internal/components/TextInputWrapper-b2f7f9fa.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/internal/components/TextInputWrapper.module.css.js"],"names":[],"mappings":"AAAA,2CAeE,mBAAoB,CALpB,4CAAwC,CACxC,qFAAqE,CACrE,gDAAyC,CAEzC,wDAA+B,CAP/B,oCAA6B,CAE7B,WAAY,CARZ,mBAAoB,CAGpB,8CAAuC,CAEvC,uCAAgC,CAJhC,mCAA+B,CAW/B,YAAa,CAVb,eAAgB,CAKhB,qBA6IF,CApIE,qGAEE,WACF,CAEA,kDACE,cACF,CAKE,yKACE,kCACF,CAGF,gLAEE,uDAAgD,CAChD,yFAA0E,CAC1E,mBACF,CAEA,oDACE,kCACF,CAEA,kEAGE,6EACF,CAEA,kEAEE,wDAAiD,CACjD,0DAAiD,CACjD,eAAgB,CAHhB,qCAUF,CALE,4NAGE,kBACF,CAGF,mEACE,mHACF,CAEA,0EACE,uDAQF,CANE,8OAEE,sDAA+C,CAC/C,2DAAoD,CACpD,mBACF,CAGF,4EAEE,oDACF,CAEA,+DAGE,kBAAmB,CAFnB,YAAa,CACb,UAEF,CAGA,oCA3FF,2CA4FI,8CAyDJ,CAxDE,CA7FF,2CA+FE,8CAsDF,CApDE,oEACE,+CAAwC,CASxC,4CAAsC,CAEtC,uCAAgC,CAThC,sCAA+B,CAK/B,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eAQF,CAEA,oEACE,+CAAwC,CAExC,iCAA2B,CAK3B,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAKF,CAGA,uEASE,kCAAmC,CAEnC,uCAAgC,CAVhC,eAAgB,CAKhB,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eASF,CAGA,uEAOE,+CAAwC,CAFxC,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAMF,CAOA,kIAGE,cAAe,CADf,eAEF,CARF,uCAcE,oCAAqC,CAHrC,2BA+CF,CA1CE,yDACE,qCACF,CAEA,gHAEE,iBAAkB,CAClB,kCAA2B,CAC3B,aACF,CAGA,oEACE,qCACF,CAGA,8FACE,sCACF,CAKE,2YAEE,qCACF,CAIF,+MAEE,sCACF,CAGA,+PAEE,uCAAiC,CACjC,wCACF,CAKA,6FACE,uCACF,CAEA,uHACE,wCACF","file":"TextInputWrapper-b2f7f9fa.css","sourcesContent":[".TextInputBaseWrapper {\n  display: inline-flex;\n  min-height: var(--base-size-32);\n  overflow: hidden;\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-20);\n  color: var(--fgColor-default);\n  vertical-align: middle;\n  cursor: text;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  outline: none;\n  box-shadow: var(--shadow-inset);\n  align-items: stretch;\n\n  input,\n  textarea {\n    cursor: text;\n  }\n\n  select {\n    cursor: pointer;\n  }\n\n  input,\n  textarea,\n  select {\n    &::placeholder {\n      color: var(--fgColor-muted);\n    }\n  }\n\n  &:where([data-trailing-action][data-focused]),\n  &:where([data-no-trailing-action]:focus-within) {\n    border-color: var(--borderColor-accent-emphasis);\n    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);\n    outline-offset: -1px;\n  }\n\n  > textarea {\n    padding: var(--base-size-12);\n  }\n\n  &:where([data-contrast]) {\n    /* this variable is available behind a feature flag in gh/gh */\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--control-bgColor-contrast, var(--bgColor-inset));\n  }\n\n  &:where([data-disabled]) {\n    color: var(--fgColor-disabled);\n    background-color: var(--control-bgColor-disabled);\n    border-color: var(--control-borderColor-disabled);\n    box-shadow: none;\n\n    input,\n    textarea,\n    select {\n      cursor: not-allowed;\n    }\n  }\n\n  &:where([data-monospace]) {\n    font-family: var(--fontStack-monospace);\n  }\n\n  &:where([data-validation='error']) {\n    border-color: var(--borderColor-danger-emphasis);\n\n    &:where([data-trailing-action][data-focused]),\n    &:where([data-no-trailing-action]):focus-within {\n      border-color: var(--control-borderColor-danger);\n      outline: 2px solid var(--control-borderColor-danger);\n      outline-offset: -1px;\n    }\n  }\n\n  &:where([data-validation='success']) {\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n    align-self: stretch;\n  }\n\n  /* Ensures inputs don't zoom on mobile but are body-font size on desktop */\n  @media screen and (--viewportRange-regular) {\n    font-size: var(--text-body-size-medium);\n  }\n\n  --inner-action-size: var(--base-size-24); /* Default size */\n\n  &:where([data-size='small']) {\n    --inner-action-size: var(--base-size-20);\n\n    min-height: var(--base-size-28);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  &:where([data-size='large']) {\n    --inner-action-size: var(--base-size-28);\n\n    height: var(--base-size-40);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='small']) {\n    min-height: 28px;\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    font-size: (--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='large']) {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-title-size-medium);\n  }\n}\n\n.TextInputWrapper {\n  padding-right: 0;\n  padding-left: 0;\n\n  > input,\n  > select {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  /* Repeat and position set for form states (success, error, etc) */\n  background-repeat: no-repeat;\n\n  /* For form validation. This keeps images 8px from right and centered vertically. */\n  background-position: right 8px center;\n\n  & > :not(:last-child) {\n    margin-right: var(--base-size-8);\n  }\n\n  & :global(.TextInput-icon) /* stylelint-disable-line selector-class-pattern */,\n  & :global(.TextInput-action)  /* stylelint-disable-line selector-class-pattern */ {\n    align-self: center;\n    color: var(--fgColor-muted);\n    flex-shrink: 0;\n  }\n\n  /* With leading visual */\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-8);\n  }\n\n  /* With trailing visual */\n  &:where([data-trailing-visual][data-no-trailing-action]) {\n    padding-right: var(--base-size-8);\n  }\n\n  /* Only trailing visual */\n  &:where([data-no-leading-visual][data-trailing-visual]),\n  &:where([data-no-leading-visual][data-trailing-action]) {\n    > input,\n    > select {\n      padding-left: var(--base-size-8);\n    }\n  }\n\n  /* Only leading visual */\n  &:where([data-no-trailing-visual][data-no-trailing-action]) > input,\n  &:where([data-no-trailing-visual][data-no-trailing-action]) > select {\n    padding-right: var(--base-size-8);\n  }\n\n  /* No visuals at all */\n  &:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action]) > input,\n  &:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action]) > select {\n    padding-left: var(--base-size-12);\n    padding-right: var(--base-size-12);\n  }\n}\n\n/* Large size input */\n.TextInputWrapper:where([data-size='large']) {\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-12);\n  }\n\n  &:where([data-trailing-visual][data-no-trailing-action]) {\n    padding-right: var(--base-size-12);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/internal/components/TextInputWrapper.module.css.js"],"names":[],"mappings":"AAAA,2CAeE,mBAAoB,CALpB,4CAAwC,CACxC,qFAAqE,CACrE,gDAAyC,CAEzC,wDAA+B,CAP/B,oCAA6B,CAE7B,WAAY,CARZ,mBAAoB,CAGpB,8CAAuC,CAEvC,uCAAgC,CAJhC,mCAA+B,CAW/B,YAAa,CAVb,eAAgB,CAKhB,qBA6IF,CApIE,qGAEE,WACF,CAEA,kDACE,cACF,CAKE,8DACE,kCACF,CAFA,iEACE,kCACF,CAFA,+DACE,kCACF,CAGF,gLAEE,uDAAgD,CAChD,yFAA0E,CAC1E,mBACF,CAEA,oDACE,kCACF,CAEA,kEAGE,6EACF,CAEA,kEAEE,wDAAiD,CACjD,0DAAiD,CACjD,eAAgB,CAHhB,qCAUF,CALE,4NAGE,kBACF,CAGF,mEACE,mHACF,CAEA,0EACE,uDAQF,CANE,8OAEE,sDAA+C,CAC/C,2DAAoD,CACpD,mBACF,CAGF,4EAEE,oDACF,CAEA,+DAGE,kBAAmB,CAFnB,YAAa,CACb,UAEF,CAGA,oCA3FF,2CA4FI,8CAyDJ,CAxDE,CA7FF,2CA+FE,8CAsDF,CApDE,oEACE,+CAAwC,CASxC,4CAAsC,CAEtC,uCAAgC,CAThC,sCAA+B,CAK/B,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eAQF,CAEA,oEACE,+CAAwC,CAExC,iCAA2B,CAK3B,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAKF,CAGA,uEASE,kCAAmC,CAEnC,uCAAgC,CAVhC,eAAgB,CAKhB,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eASF,CAGA,uEAOE,+CAAwC,CAFxC,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAMF,CAOA,kIAGE,cAAe,CADf,eAEF,CARF,uCAcE,oCAAqC,CAHrC,2BA+CF,CA1CE,yDACE,qCACF,CAEA,gHAEE,iBAAkB,CAClB,kCAA2B,CAC3B,aACF,CAGA,oEACE,qCACF,CAGA,8FACE,sCACF,CAKE,mGAEE,qCACF,CAHA,mGAEE,qCACF,CAHA,oGAEE,qCACF,CAHA,oGAEE,qCACF,CAIF,+MAEE,sCACF,CAGA,+PAEE,uCAAiC,CACjC,wCACF,CAKA,6FACE,uCACF,CAEA,uHACE,wCACF","file":"TextInputWrapper-b2f7f9fa.css","sourcesContent":[".TextInputBaseWrapper {\n  display: inline-flex;\n  min-height: var(--base-size-32);\n  overflow: hidden;\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-20);\n  color: var(--fgColor-default);\n  vertical-align: middle;\n  cursor: text;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  outline: none;\n  box-shadow: var(--shadow-inset);\n  align-items: stretch;\n\n  input,\n  textarea {\n    cursor: text;\n  }\n\n  select {\n    cursor: pointer;\n  }\n\n  input,\n  textarea,\n  select {\n    &::placeholder {\n      color: var(--fgColor-muted);\n    }\n  }\n\n  &:where([data-trailing-action][data-focused]),\n  &:where([data-no-trailing-action]:focus-within) {\n    border-color: var(--borderColor-accent-emphasis);\n    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);\n    outline-offset: -1px;\n  }\n\n  > textarea {\n    padding: var(--base-size-12);\n  }\n\n  &:where([data-contrast]) {\n    /* this variable is available behind a feature flag in gh/gh */\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--control-bgColor-contrast, var(--bgColor-inset));\n  }\n\n  &:where([data-disabled]) {\n    color: var(--fgColor-disabled);\n    background-color: var(--control-bgColor-disabled);\n    border-color: var(--control-borderColor-disabled);\n    box-shadow: none;\n\n    input,\n    textarea,\n    select {\n      cursor: not-allowed;\n    }\n  }\n\n  &:where([data-monospace]) {\n    font-family: var(--fontStack-monospace);\n  }\n\n  &:where([data-validation='error']) {\n    border-color: var(--borderColor-danger-emphasis);\n\n    &:where([data-trailing-action][data-focused]),\n    &:where([data-no-trailing-action]):focus-within {\n      border-color: var(--control-borderColor-danger);\n      outline: 2px solid var(--control-borderColor-danger);\n      outline-offset: -1px;\n    }\n  }\n\n  &:where([data-validation='success']) {\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n    align-self: stretch;\n  }\n\n  /* Ensures inputs don't zoom on mobile but are body-font size on desktop */\n  @media screen and (--viewportRange-regular) {\n    font-size: var(--text-body-size-medium);\n  }\n\n  --inner-action-size: var(--base-size-24); /* Default size */\n\n  &:where([data-size='small']) {\n    --inner-action-size: var(--base-size-20);\n\n    min-height: var(--base-size-28);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  &:where([data-size='large']) {\n    --inner-action-size: var(--base-size-28);\n\n    height: var(--base-size-40);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='small']) {\n    min-height: 28px;\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    font-size: (--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='large']) {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-title-size-medium);\n  }\n}\n\n.TextInputWrapper {\n  padding-right: 0;\n  padding-left: 0;\n\n  > input,\n  > select {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  /* Repeat and position set for form states (success, error, etc) */\n  background-repeat: no-repeat;\n\n  /* For form validation. This keeps images 8px from right and centered vertically. */\n  background-position: right 8px center;\n\n  & > :not(:last-child) {\n    margin-right: var(--base-size-8);\n  }\n\n  & :global(.TextInput-icon) /* stylelint-disable-line selector-class-pattern */,\n  & :global(.TextInput-action)  /* stylelint-disable-line selector-class-pattern */ {\n    align-self: center;\n    color: var(--fgColor-muted);\n    flex-shrink: 0;\n  }\n\n  /* With leading visual */\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-8);\n  }\n\n  /* With trailing visual */\n  &:where([data-trailing-visual][data-no-trailing-action]) {\n    padding-right: var(--base-size-8);\n  }\n\n  /* Only trailing visual */\n  &:where([data-no-leading-visual][data-trailing-visual]),\n  &:where([data-no-leading-visual][data-trailing-action]) {\n    > input,\n    > select {\n      padding-left: var(--base-size-8);\n    }\n  }\n\n  /* Only leading visual */\n  &:where([data-no-trailing-visual][data-no-trailing-action]) > input,\n  &:where([data-no-trailing-visual][data-no-trailing-action]) > select {\n    padding-right: var(--base-size-8);\n  }\n\n  /* No visuals at all */\n  &:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action]) > input,\n  &:where([data-no-leading-visual][data-no-trailing-visual][data-no-trailing-action]) > select {\n    padding-left: var(--base-size-12);\n    padding-right: var(--base-size-12);\n  }\n}\n\n/* Large size input */\n.TextInputWrapper:where([data-size='large']) {\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-12);\n  }\n\n  &:where([data-trailing-visual][data-no-trailing-action]) {\n    padding-right: var(--base-size-12);\n  }\n}\n"]}

package/dist/utils/StressTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StressTest.d.ts","sourceRoot":"","sources":["../../src/utils/StressTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7E;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0HhD,CAAA"}
+{"version":3,"file":"StressTest.d.ts","sourceRoot":"","sources":["../../src/utils/StressTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7E;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+HhD,CAAA"}

package/dist/utils/descendant-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"descendant-registry.d.ts","sourceRoot":"","sources":["../../src/utils/descendant-registry.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,QAAQ,EACb,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;CAChF;AAQD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,wBAAwB,CAAC,CAAC;0CAgCG,aAAa,CAAC,CAAC,CAAC;;mCAfrB,CAAC;EA8FxC"}
+{"version":3,"file":"descendant-registry.d.ts","sourceRoot":"","sources":["../../src/utils/descendant-registry.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,QAAQ,EACb,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;CAChF;AAQD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,wBAAwB,CAAC,CAAC;0CAgCG,aAAa,CAAC,CAAC,CAAC;;mCAfrB,CAAC;EA+FxC"}

package/dist/utils/form-story-helpers.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
-import type { CheckboxGroup, FormControl } from '../index';
+import type CheckboxGroup from '../CheckboxGroup';
+import type FormControl from '../FormControl';
 import type { ComponentProps } from './types';
 import type { ArgTypes } from '@storybook/react';
 import type { InputType } from 'storybook/internal/csf';

package/dist/utils/form-story-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-story-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/form-story-helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,UAAU,CAAA;AACxD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAC3E,KAAK,6BAA6B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,CAAA;AACD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AACD,KAAK,yCAAyC,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,GAAG;IACjG,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG,+BAA+B,GACpE,6BAA6B,GAC7B,+BAA+B,GAC/B,yCAAyC,CAAA;AAE3C,KAAK,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AAC9F,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AACpH,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAC9G,KAAK,gCAAgC,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,GAAG;IACtF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,WAAW,GAAG,OAAO,IAAI,qBAAqB,GACxE,oBAAoB,GACpB,sBAAsB,GACtB,OAAO,CAAC,gCAAgC,CAAC,GAAG,qEAAqE;AACjH,WAAW,CAAA;AAEb,eAAO,MAAM,oBAAoB,EAAE,QAoClC,CAAA;AA0BD,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,4BAc5C,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAsE,CAAA;AAE/G,eAAO,MAAM,2BAA2B,EAAE,QAyCzC,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QA4DjC,CAAA;AAID,eAAO,MAAM,oCAAoC,6CAO3C,CAAA;AAEN,eAAO,MAAM,kCAAkC,GAAI,sGAQhD,eAAe;;;;;;;;;;;;;;;;CAKhB,CAAA"}
+{"version":3,"file":"form-story-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/form-story-helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAA;AACjD,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAA;AAC7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAC3E,KAAK,6BAA6B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,CAAA;AACD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AACD,KAAK,yCAAyC,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,GAAG;IACjG,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG,+BAA+B,GACpE,6BAA6B,GAC7B,+BAA+B,GAC/B,yCAAyC,CAAA;AAE3C,KAAK,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AAC9F,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AACpH,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAC9G,KAAK,gCAAgC,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,GAAG;IACtF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,WAAW,GAAG,OAAO,IAAI,qBAAqB,GACxE,oBAAoB,GACpB,sBAAsB,GACtB,OAAO,CAAC,gCAAgC,CAAC,GAAG,qEAAqE;AACjH,WAAW,CAAA;AAEb,eAAO,MAAM,oBAAoB,EAAE,QAoClC,CAAA;AA0BD,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,4BAc5C,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAsE,CAAA;AAE/G,eAAO,MAAM,2BAA2B,EAAE,QAyCzC,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QA4DjC,CAAA;AAID,eAAO,MAAM,oCAAoC,6CAO3C,CAAA;AAEN,eAAO,MAAM,kCAAkC,GAAI,sGAQhD,eAAe;;;;;;;;;;;;;;;;CAKhB,CAAA"}

package/dist/utils/modern-polymorphic.d.ts

@@ -2,7 +2,7 @@ import type { ComponentPropsWithRef, ElementType } from 'react';
 /**
  * Distributive Omit utility type that works correctly with union types
  */
-type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends unknown ? Omit<T, TOmitted> : never;
+export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends unknown ? Omit<T, TOmitted> : never;
 /**
  * Fixed version of forwardRef that provides better type inference for polymorphic components
  */

package/dist/utils/modern-polymorphic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modern-polymorphic.d.ts","sourceRoot":"","sources":["../../src/utils/modern-polymorphic.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,qBAAqB,EAAE,WAAW,EAAC,MAAM,OAAO,CAAA;AAE7D;;GAEG;AACH,KAAK,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAEtG;;GAEG;AAGH,KAAK,eAAe,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EACnC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,KACrD,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;AAE3D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAiB,eAAe,CAAA;AAE5D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAC1B,GAAG,SAAS,WAAW,EACvB,eAAe,SAAS,WAAW,GAAG,KAAK,EAC3C,KAAK,GAAG,MAAM,IACZ,gBAAgB,CAAC,qBAAqB,CAAC,WAAW,SAAS,GAAG,GAAG,eAAe,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,GAAG;IAC3G,EAAE,CAAC,EAAE,GAAG,CAAA;CACT,CAAA"}
+{"version":3,"file":"modern-polymorphic.d.ts","sourceRoot":"","sources":["../../src/utils/modern-polymorphic.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,qBAAqB,EAAE,WAAW,EAAC,MAAM,OAAO,CAAA;AAE7D;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAE7G;;GAEG;AAGH,KAAK,eAAe,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EACnC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,KACrD,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;AAE3D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAiB,eAAe,CAAA;AAE5D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAC1B,GAAG,SAAS,WAAW,EACvB,eAAe,SAAS,WAAW,GAAG,KAAK,EAC3C,KAAK,GAAG,MAAM,IACZ,gBAAgB,CAAC,qBAAqB,CAAC,WAAW,SAAS,GAAG,GAAG,eAAe,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,GAAG;IAC3G,EAAE,CAAC,EAAE,GAAG,CAAA;CACT,CAAA"}

package/dist/utils/story-helpers.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
-import type { CheckboxGroup, FormControl } from '../index';
+import type CheckboxGroup from '../CheckboxGroup';
+import type FormControl from '../FormControl';
 import type { ComponentProps } from './types';
 import type { ArgTypes } from '@storybook/react';
 import type { InputType } from 'storybook/internal/csf';

package/dist/utils/story-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/story-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,UAAU,CAAA;AACxD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAC3E,KAAK,6BAA6B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,CAAA;AACD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AACD,KAAK,yCAAyC,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,GAAG;IACjG,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG,+BAA+B,GACpE,6BAA6B,GAC7B,+BAA+B,GAC/B,yCAAyC,CAAA;AAE3C,KAAK,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AAC9F,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AACpH,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAC9G,KAAK,gCAAgC,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,GAAG;IACtF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,WAAW,GAAG,OAAO,IAAI,qBAAqB,GACxE,oBAAoB,GACpB,sBAAsB,GACtB,OAAO,CAAC,gCAAgC,CAAC,GAAG,qEAAqE;AACjH,WAAW,CAAA;AAEb,eAAO,MAAM,oBAAoB,EAAE,QAoClC,CAAA;AA0BD,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,4BAc5C,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAsE,CAAA;AAE/G,eAAO,MAAM,2BAA2B,EAAE,QAyCzC,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QA4DjC,CAAA;AAID,eAAO,MAAM,oCAAoC,6CAO3C,CAAA;AAEN,eAAO,MAAM,kCAAkC,GAAI,sGAQhD,eAAe;;;;;;;;;;;;;;;;CAKhB,CAAA;AAGF,eAAO,MAAM,cAAc,GAAI,UAAU,IAAI,EAAE;;;;;;CAa9C,CAAA"}
+{"version":3,"file":"story-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/story-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAA;AACjD,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAA;AAC7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAC3E,KAAK,6BAA6B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,CAAA;AACD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AACD,KAAK,yCAAyC,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,GAAG;IACjG,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG,+BAA+B,GACpE,6BAA6B,GAC7B,+BAA+B,GAC/B,yCAAyC,CAAA;AAE3C,KAAK,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AAC9F,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AACpH,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAC9G,KAAK,gCAAgC,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,GAAG;IACtF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,WAAW,GAAG,OAAO,IAAI,qBAAqB,GACxE,oBAAoB,GACpB,sBAAsB,GACtB,OAAO,CAAC,gCAAgC,CAAC,GAAG,qEAAqE;AACjH,WAAW,CAAA;AAEb,eAAO,MAAM,oBAAoB,EAAE,QAoClC,CAAA;AA0BD,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,4BAc5C,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAsE,CAAA;AAE/G,eAAO,MAAM,2BAA2B,EAAE,QAyCzC,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QA4DjC,CAAA;AAID,eAAO,MAAM,oCAAoC,6CAO3C,CAAA;AAEN,eAAO,MAAM,kCAAkC,GAAI,sGAQhD,eAAe;;;;;;;;;;;;;;;;CAKhB,CAAA;AAGF,eAAO,MAAM,cAAc,GAAI,UAAU,IAAI,EAAE;;;;;;CAa9C,CAAA"}

package/generated/components.json

@@ -534,6 +534,12 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "Whether the TrailingAction is in a loading state. When true, the TrailingAction will render a spinner instead of an icon. Only available when `as` is 'button'."
+            },
+            {
+              "name": "tooltipDirection",
+              "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
+              "defaultValue": "'w'",
+              "description": "Direction of the tooltip shown when hovering over the TrailingAction. Only applies when `icon` is set."
             }
           ]
         },
@@ -1035,7 +1041,7 @@
         },
         {
           "id": "components-autocomplete-features--in-a-dialog",
-          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <form className={classes.FormPadding}>\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </form>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <form className={classes.FormPadding}>\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </form>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -3140,7 +3146,7 @@
         },
         {
           "id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
-          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         },
         {
           "id": "components-dialog-features--bottom-sheet-narrow",
@@ -3428,7 +3434,7 @@
         },
         {
           "id": "components-formcontrol-features--with-custom-input",
-          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-validation custom-input-caption\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </div>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('noSpaces')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    } else if (value) {\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-validation custom-input-caption\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </div>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--with-checkbox-and-radio-inputs",
@@ -3440,7 +3446,7 @@
         },
         {
           "id": "components-formcontrol-features--validation-example",
-          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <FormControl>\n      <FormControl.Label>GitHub handle</FormControl.Label>\n      <TextInput block value={value} onChange={handleInputChange} />\n      {validationResult === 'noSpaces' && (\n        <FormControl.Validation variant=\"error\">\n          GitHub handles cannot contain spaces\n        </FormControl.Validation>\n      )}\n      {validationResult === 'validName' && (\n        <FormControl.Validation variant=\"success\">\n          Valid name\n        </FormControl.Validation>\n      )}\n      <FormControl.Caption>\n        With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n        &quot;@monalisa&quot;\n      </FormControl.Caption>\n    </FormControl>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('noSpaces')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    } else if (value) {\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <FormControl>\n      <FormControl.Label>GitHub handle</FormControl.Label>\n      <TextInput block value={value} onChange={handleInputChange} />\n      {validationResult === 'noSpaces' && (\n        <FormControl.Validation variant=\"error\">\n          GitHub handles cannot contain spaces\n        </FormControl.Validation>\n      )}\n      {validationResult === 'validName' && (\n        <FormControl.Validation variant=\"success\">\n          Valid name\n        </FormControl.Validation>\n      )}\n      <FormControl.Caption>\n        With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n        &quot;@monalisa&quot;\n      </FormControl.Caption>\n    </FormControl>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--with-select-panel",
@@ -5605,7 +5611,7 @@
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-registration",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-initialize-state\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
         },
         {
           "id": "behaviors-portal-features--multiple-portal-roots",
@@ -8781,6 +8787,12 @@
             {
               "name": "ref",
               "type": "React.Ref<HTMLElement>"
+            },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'li'",
+              "description": "The element type to render the tree item as. When set to a different element type or component, the polymorphic element is rendered with `role=\"treeitem\"` and is wrapped in an `li` element with `role=\"none\"` so the markup remains valid inside a `ul` with `role=\"tree\"`."
             }
           ]
         },
@@ -9276,7 +9288,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-filter-buttons",
-          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "0.0.0-20260617202152",
+  "version": "0.0.0-20260617213021",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -98,7 +98,7 @@
   "devDependencies": {
     "@actions/core": "1.11.1",
     "@babel/cli": "7.28.6",
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.6",
     "@babel/parser": "7.29.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",