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

package/lib-esm/Select/Select.js

@@ -64,97 +64,89 @@ const ArrowIndicator = t0 => {
 };
 const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
   var _ref, _defaultValue;
-  const $ = c(41);
+  const $ = c(37);
   let block;
   let children;
   let className;
-  let contrast;
   let defaultValue;
   let disabled;
   let placeholder;
   let required;
   let rest;
   let size;
-  let sx;
   let validationStatus;
   if ($[0] !== t0) {
     ({
       block,
       children,
       className,
-      contrast,
       defaultValue,
       disabled,
       placeholder,
       size,
       required,
       validationStatus,
-      sx,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = block;
     $[2] = children;
     $[3] = className;
-    $[4] = contrast;
-    $[5] = defaultValue;
-    $[6] = disabled;
-    $[7] = placeholder;
-    $[8] = required;
-    $[9] = rest;
-    $[10] = size;
-    $[11] = sx;
-    $[12] = validationStatus;
+    $[4] = defaultValue;
+    $[5] = disabled;
+    $[6] = placeholder;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = size;
+    $[10] = validationStatus;
   } else {
     block = $[1];
     children = $[2];
     className = $[3];
-    contrast = $[4];
-    defaultValue = $[5];
-    disabled = $[6];
-    placeholder = $[7];
-    required = $[8];
-    rest = $[9];
-    size = $[10];
-    sx = $[11];
-    validationStatus = $[12];
+    defaultValue = $[4];
+    disabled = $[5];
+    placeholder = $[6];
+    required = $[7];
+    rest = $[8];
+    size = $[9];
+    validationStatus = $[10];
   }
   let t1;
-  if ($[13] !== className) {
+  if ($[11] !== className) {
     t1 = clsx(classes.TextInputWrapper, className);
-    $[13] = className;
-    $[14] = t1;
+    $[11] = className;
+    $[12] = t1;
   } else {
-    t1 = $[14];
+    t1 = $[12];
   }
   const t2 = validationStatus === "error" ? "true" : "false";
   const t3 = disabled && classes.Disabled;
   let t4;
-  if ($[15] !== t3) {
+  if ($[13] !== t3) {
     t4 = clsx(classes.Select, t3);
-    $[15] = t3;
-    $[16] = t4;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t4 = $[16];
+    t4 = $[14];
   }
   const t5 = Boolean(placeholder);
   const t6 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : undefined;
   let t7;
-  if ($[17] !== placeholder || $[18] !== required) {
+  if ($[15] !== placeholder || $[16] !== required) {
     t7 = placeholder && /*#__PURE__*/jsx("option", {
       value: "",
       disabled: required,
       hidden: required,
       children: placeholder
     });
-    $[17] = placeholder;
-    $[18] = required;
-    $[19] = t7;
+    $[15] = placeholder;
+    $[16] = required;
+    $[17] = t7;
   } else {
-    t7 = $[19];
+    t7 = $[17];
   }
   let t8;
-  if ($[20] !== children || $[21] !== disabled || $[22] !== ref || $[23] !== required || $[24] !== rest || $[25] !== t2 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7) {
+  if ($[18] !== children || $[19] !== disabled || $[20] !== ref || $[21] !== required || $[22] !== rest || $[23] !== t2 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7) {
     t8 = /*#__PURE__*/jsxs("select", {
       ...rest,
       ref: ref,
@@ -166,52 +158,48 @@ const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
       defaultValue: t6,
       children: [t7, children]
     });
-    $[20] = children;
-    $[21] = disabled;
-    $[22] = ref;
-    $[23] = required;
-    $[24] = rest;
-    $[25] = t2;
-    $[26] = t4;
-    $[27] = t5;
-    $[28] = t6;
-    $[29] = t7;
-    $[30] = t8;
+    $[18] = children;
+    $[19] = disabled;
+    $[20] = ref;
+    $[21] = required;
+    $[22] = rest;
+    $[23] = t2;
+    $[24] = t4;
+    $[25] = t5;
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = t8;
   } else {
-    t8 = $[30];
+    t8 = $[28];
   }
   let t9;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
     t9 = /*#__PURE__*/jsx(ArrowIndicator, {
       className: classes.ArrowIndicator
     });
-    $[31] = t9;
+    $[29] = t9;
   } else {
-    t9 = $[31];
+    t9 = $[29];
   }
   let t10;
-  if ($[32] !== block || $[33] !== contrast || $[34] !== disabled || $[35] !== size || $[36] !== sx || $[37] !== t1 || $[38] !== t8 || $[39] !== validationStatus) {
+  if ($[30] !== block || $[31] !== disabled || $[32] !== size || $[33] !== t1 || $[34] !== t8 || $[35] !== validationStatus) {
     t10 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
-      contrast: contrast,
       disabled: disabled,
       size: size,
       validationStatus: validationStatus,
       className: t1,
-      sx: sx,
       children: [t8, t9]
     });
-    $[32] = block;
-    $[33] = contrast;
-    $[34] = disabled;
-    $[35] = size;
-    $[36] = sx;
-    $[37] = t1;
-    $[38] = t8;
-    $[39] = validationStatus;
-    $[40] = t10;
+    $[30] = block;
+    $[31] = disabled;
+    $[32] = size;
+    $[33] = t1;
+    $[34] = t8;
+    $[35] = validationStatus;
+    $[36] = t10;
   } else {
-    t10 = $[40];
+    t10 = $[36];
   }
   return t10;
 });

package/lib-esm/SelectPanel/{SelectPanel-06900070.css → SelectPanel-e11ce210.css}

@@ -1,2 +1,2 @@
-.prc-SelectPanel-Overlay-arLk6{--max-height:0}.prc-SelectPanel-Wrapper-43Iz8{display:flex;flex-direction:column;height:inherit;max-height:inherit}.prc-SelectPanel-Header-4dLqk{align-items:flex-start;display:flex;justify-content:space-between;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:var(--base-size-8,.5rem)}.prc-SelectPanel-Header-4dLqk:where([data-variant=fullscreen]){flex-shrink:0;min-height:40px}.prc-SelectPanel-Title--CZN1{font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Wrapper-43Iz8[data-variant=modal] .prc-SelectPanel-Title--CZN1{margin-top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-Wrapper-43Iz8[data-variant=anchored] .prc-SelectPanel-Title--CZN1{margin-top:var(--base-size-8,.5rem)}}.prc-SelectPanel-Subtitle-tMSzu{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SelectPanel-Notice-xDTd4,.prc-SelectPanel-Subtitle-tMSzu{font-size:var(--text-body-size-small,.75rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Notice-xDTd4{border:var(--borderWidth-thin,.0625rem) solid;border-radius:var(--borderRadius-medium,.375rem);display:flex;flex-direction:row;gap:var(--base-size-8,.5rem);margin-right:var(--base-size-8,.5rem);margin-top:var(--base-size-4,.25rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel-Notice-xDTd4 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-Notice-xDTd4:where([data-variant=info]){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));color:var(--fgColor-accent,var(--color-accent-fg))}.prc-SelectPanel-Notice-xDTd4:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-attention,var(--color-attention-fg))}.prc-SelectPanel-Notice-xDTd4:where([data-variant=error]){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-Footer-78rgp{border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,var(--color-border-default));display:flex;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-FilteredActionList-wzS7m{height:inherit;max-height:inherit}.prc-SelectPanel-Message-CSpwI{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;padding:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel-Message-CSpwI a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-MessageTitle-o6PpS{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel-MessageBody-89DEz{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel-MessageIcon-GS8ry{color:var(--fgColor-attention,var(--color-attention-fg));margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel-MessageIcon-GS8ry:where([data-variant=error]){color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-MessageAction-qwola{margin-top:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveCloseButton-3mdX2{display:inline-grid}.prc-SelectPanel-ResponsiveFooter-e-JSD{align-items:center;display:none;justify-content:center;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-display-footer=always]){display:flex}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-display-footer=only-small]){display:flex}}.prc-SelectPanel-ResponsiveFooter-e-JSD[data-stretch-secondary-action=never]{justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-secondary-action=only-big]){justify-content:space-between}}.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-save-button=only-small]){justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-save-button=only-small]){justify-content:center}}.prc-SelectPanel-SecondaryAction-aWzLU{align-items:stretch;display:flex;flex-grow:1;justify-content:center}.prc-SelectPanel-SecondaryAction-aWzLU[data-stretch-secondary-action=never]{align-items:flex-start;flex-grow:0}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-SecondaryAction-aWzLU:where([data-stretch-secondary-action=only-big]){align-items:flex-start;flex-grow:0}}.prc-SelectPanel-CancelSaveButtons-kk2cT{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.prc-SelectPanel-ResponsiveCancelSaveButtons-j1--s{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveCancelSaveButtons-j1--s{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}}.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y{display:flex}}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y:where([data-stretch-save-button=only-small]){flex-grow:1}}.prc-SelectPanel-Backdrop-7XJa-{background-color:var(--overlay-backdrop-bgColor,var(--color-overlay-backdrop));inset:0;position:absolute}
-/*# sourceMappingURL=SelectPanel-06900070.css.map */
+.prc-SelectPanel-Overlay-arLk6{--max-height:0}.prc-SelectPanel-Wrapper-43Iz8{display:flex;flex-direction:column;height:inherit;max-height:inherit}.prc-SelectPanel-Header-4dLqk{align-items:flex-start;display:flex;justify-content:space-between;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:var(--base-size-8,.5rem)}.prc-SelectPanel-Header-4dLqk:where([data-variant=fullscreen]){flex-shrink:0;min-height:40px}.prc-SelectPanel-Title--CZN1{font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Wrapper-43Iz8[data-variant=modal] .prc-SelectPanel-Title--CZN1{margin-top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-Wrapper-43Iz8[data-variant=anchored] .prc-SelectPanel-Title--CZN1{margin-top:var(--base-size-8,.5rem)}}.prc-SelectPanel-Subtitle-tMSzu{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SelectPanel-Notice-xDTd4,.prc-SelectPanel-Subtitle-tMSzu{font-size:var(--text-body-size-small,.75rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Notice-xDTd4{border:var(--borderWidth-thin,.0625rem) solid;border-radius:var(--borderRadius-medium,.375rem);display:flex;flex-direction:row;gap:var(--base-size-8,.5rem);margin-right:var(--base-size-8,.5rem);margin-top:var(--base-size-4,.25rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel-Notice-xDTd4 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-Notice-xDTd4:where([data-variant=info]){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));color:var(--fgColor-accent,var(--color-accent-fg))}.prc-SelectPanel-Notice-xDTd4:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-attention,var(--color-attention-fg))}.prc-SelectPanel-Notice-xDTd4:where([data-variant=error]){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-Footer-78rgp{border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,var(--color-border-default));display:flex;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-FilteredActionList-wzS7m{height:inherit;max-height:inherit}.prc-SelectPanel-Message-CSpwI{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;padding:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel-Message-CSpwI a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-MessageTitle-o6PpS{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel-MessageBody-89DEz{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel-MessageIcon-GS8ry{color:var(--fgColor-attention,var(--color-attention-fg));margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel-MessageIcon-GS8ry:where([data-variant=error]){color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-MessageAction-qwola{margin-top:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveCloseButton-3mdX2{display:inline-grid}.prc-SelectPanel-ResponsiveFooter-e-JSD{align-items:center;display:none;justify-content:center;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-display-footer=always]){display:flex}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-display-footer=only-small]){display:flex}}.prc-SelectPanel-ResponsiveFooter-e-JSD[data-stretch-secondary-action=never]{justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-secondary-action=only-big]){justify-content:space-between}}.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-save-button=only-small]){justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-e-JSD:where([data-stretch-save-button=only-small]){justify-content:center}}.prc-SelectPanel-SecondaryAction-aWzLU{align-items:stretch;display:flex;flex-grow:1;justify-content:center}.prc-SelectPanel-SecondaryAction-aWzLU[data-stretch-secondary-action=never]{align-items:flex-start;flex-grow:0}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-SecondaryAction-aWzLU:where([data-stretch-secondary-action=only-big]){align-items:flex-start;flex-grow:0}}.prc-SelectPanel-CancelSaveButtons-kk2cT{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.prc-SelectPanel-ResponsiveCancelSaveButtons-j1--s{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveCancelSaveButtons-j1--s{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}}.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y{display:flex}}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-Ooz4Y:where([data-stretch-save-button=only-small]){flex-grow:1}}.prc-SelectPanel-Backdrop-7XJa-{background-color:var(--overlay-backdrop-bgColor,var(--color-overlay-backdrop));inset:0;position:absolute}.prc-SelectPanel-TextInput-TjXuJ{margin:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=SelectPanel-e11ce210.css.map */

package/lib-esm/SelectPanel/SelectPanel-e11ce210.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SelectPanel/SelectPanel.module.css"],"names":[],"mappings":"AAAA,+BAEE,cACF,CAEA,+BACE,YAAa,CAGb,qBAAsB,CAFtB,cAAe,CACf,kBAEF,CAEA,8BAGE,sBAAuB,CAFvB,YAAa,CACb,6BAA8B,CAI9B,qCAAgC,CADhC,sCAAiC,CADjC,oCAQF,CAJE,+DAEE,aAAc,CADd,eAEF,CAGF,6BAEE,8CAAuC,CADvC,oCAEF,CAEA,gFACE,mCAEF,CASE,mDADF,mFAEI,mCAEJ,CADE,CAGF,gCAGE,gDACF,CAEA,8DAJE,4CAAsC,CADtC,oCAmBF,CAdA,8BAWE,6CAAqC,CAErC,gDAAyC,CAZzC,YAAa,CASb,kBAAmB,CAEnB,4BAAuB,CALvB,qCAAgC,CADhC,oCAA8B,CAD9B,2DASF,CAEA,gCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,yDAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,4DAEE,6EAAgD,CAChD,4EAAgD,CAFhD,wDAGF,CAEA,0DAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,8BAGE,iDAAyC,CACzC,uEAA4C,CAH5C,YAAa,CACb,gCAGF,CAEA,0CAGE,cAAe,CACf,kBACF,CAEA,+BAOE,kBAAmB,CANnB,YAAa,CAIb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAPvB,WAAY,CAIZ,sBAAuB,CAHvB,kCAA4B,CAC5B,iBAWF,CAJE,iCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,oCACE,8CAAuC,CACvC,gDACF,CAEA,mCAGE,kBAAmB,CADnB,gDAA2B,CAD3B,4CAAsC,CAGtC,oCACF,CAEA,mCAEE,wDAA+B,CAD/B,sCAMF,CAHE,+DACE,kDACF,CAGF,qCACE,mCACF,CAEA,6CACE,mBACF,CAEA,wCAEE,kBAAmB,CADnB,YAAa,CAGb,sBAAuB,CADvB,gCA8BF,CA3BE,4EACE,YACF,CAGE,mDADF,gFAEI,YAEJ,CADE,CAGF,6EACE,6BACF,CAGE,mDADF,wFAEI,6BAEJ,CADE,CAGF,qFACE,6BAKF,CAHE,mDAHF,qFAII,sBAEJ,CADE,CAIJ,uCAEE,mBAAoB,CACpB,YAAa,CAFb,WAAY,CAGZ,sBAaF,CAXE,4EAEE,sBAAuB,CADvB,WAEF,CAGE,mDADF,uFAGI,sBAAuB,CADvB,WAGJ,CADE,CAIJ,yCACE,YAAa,CACb,oCAA+B,CAC/B,wBACF,CAEA,mDACE,YAOF,CALE,mDAHF,mDAII,YAAa,CACb,oCAA+B,CAC/B,wBAEJ,CADE,CAGF,4CACE,YAWF,CATE,mDAHF,4CAII,YAQJ,CAPE,CAGE,mDADF,yFAEI,WAEJ,CADE,CAIJ,gCAGE,8EAAiD,CADjD,OAAQ,CADR,iBAGF,CAEA,iCACE,+BACF","file":"SelectPanel-e11ce210.css","sourcesContent":[".Overlay {\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n}\n\n.Wrapper {\n  display: flex;\n  height: inherit;\n  max-height: inherit;\n  flex-direction: column;\n}\n\n.Header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-top: var(--base-size-8);\n  padding-right: var(--base-size-8);\n  padding-left: var(--base-size-8);\n\n  &:where([data-variant='fullscreen']) {\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n}\n\n.Title {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-medium);\n}\n\n.Wrapper[data-variant='modal'] .Title {\n  margin-top: var(--base-size-8);\n  /* styling specific to the modal variant */\n}\n\n/*\n * Align SelectPanel header text with AnchoredOverlay close button\n * \n * Ensures the title properly aligns with the close button position\n * in anchor variant on narrow viewports.\n */\n.Wrapper[data-variant='anchored'] .Title {\n  @media screen and (--viewportRange-narrow) {\n    margin-top: var(--base-size-8);\n  }\n}\n\n.Subtitle {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.Notice {\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  margin-top: var(--base-size-4);\n  margin-right: var(--base-size-8);\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-small);\n  flex-direction: row;\n  border: var(--borderWidth-thin) solid;\n  gap: var(--base-size-8);\n  border-radius: var(--borderRadius-medium);\n}\n\n.Notice a {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.Notice:where([data-variant='info']) {\n  color: var(--fgColor-accent);\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n.Notice: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.Notice: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.Footer {\n  display: flex;\n  padding: var(--base-size-8);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n}\n\n.FilteredActionList {\n  /* inheriting height and maxHeight ensures that the FilteredActionList is never taller\n     than the Overlay (which would break scrolling the items) */\n  height: inherit;\n  max-height: inherit;\n}\n\n.Message {\n  display: flex;\n  height: 100%;\n  padding: 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.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.MessageBody {\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.MessageIcon {\n  margin-bottom: var(--base-size-8);\n  color: var(--fgColor-attention);\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n  }\n}\n\n.MessageAction {\n  margin-top: var(--base-size-8);\n}\n\n.ResponsiveCloseButton {\n  display: inline-grid;\n}\n\n.ResponsiveFooter {\n  display: none;\n  align-items: center;\n  padding: var(--base-size-8);\n  justify-content: center;\n\n  &:where([data-display-footer='always']) {\n    display: flex;\n  }\n\n  &:where([data-display-footer='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      display: flex;\n    }\n  }\n\n  &[data-stretch-secondary-action='never'] {\n    justify-content: space-between;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      justify-content: space-between;\n    }\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    justify-content: space-between;\n\n    @media screen and (--viewportRange-narrow) {\n      justify-content: center;\n    }\n  }\n}\n\n.SecondaryAction {\n  flex-grow: 1;\n  align-items: stretch;\n  display: flex;\n  justify-content: center;\n\n  &[data-stretch-secondary-action='never'] {\n    flex-grow: 0;\n    align-items: flex-start;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 0;\n      align-items: flex-start;\n    }\n  }\n}\n\n.CancelSaveButtons {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n}\n\n.ResponsiveCancelSaveButtons {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n    gap: var(--stack-gap-condensed);\n    justify-content: flex-end;\n  }\n}\n\n.ResponsiveSaveButton {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 1;\n    }\n  }\n}\n\n.Backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: var(--overlay-backdrop-bgColor);\n}\n\n.TextInput {\n  margin: var(--base-size-8);\n}\n"]}

package/lib-esm/SelectPanel/SelectPanel.d.ts

@@ -59,7 +59,7 @@ type SelectPanelVariantProps = {
     onCancel: () => void;
 };
 export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
-declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, sx, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, ...listProps }: SelectPanelProps): JSX.Element;
+declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, ...listProps }: SelectPanelProps): JSX.Element;
 declare const SecondaryButton: React.FC<ButtonProps>;
 declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
 export declare const SelectPanel: typeof Panel & {

package/lib-esm/SelectPanel/SelectPanel.js

@@ -91,7 +91,6 @@ function Panel({
   footer,
   textInputProps,
   overlayProps,
-  sx,
   loading,
   initialLoadingType = 'spinner',
   className,
@@ -477,9 +476,7 @@ function Panel({
   };
   const extendedTextInputProps = useMemo(() => {
     return {
-      sx: {
-        m: 2
-      },
+      className: classes.TextInput,
       contrast: true,
       leadingVisual: SearchIcon,
       'aria-label': inputLabel,
@@ -668,11 +665,7 @@ function Panel({
             title: (message === null || message === void 0 ? void 0 : message.title) || EMPTY_MESSAGE.title,
             description: typeof (message === null || message === void 0 ? void 0 : message.body) === 'string' ? message.body : EMPTY_MESSAGE.description
           },
-          fullScreenOnNarrow: usingFullScreenOnNarrow
-          // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-          // than the Overlay (which would break scrolling the items)
-          ,
-          sx: sx,
+          fullScreenOnNarrow: usingFullScreenOnNarrow,
           className: clsx(className, classes.FilteredActionList)
         }), footer ? /*#__PURE__*/jsx("div", {
           className: classes.Footer,

package/lib-esm/SelectPanel/SelectPanel.module.css.js

@@ -1,5 +1,5 @@
-import './SelectPanel-06900070.css';
+import './SelectPanel-e11ce210.css';
 
-var classes = {"Overlay":"prc-SelectPanel-Overlay-arLk6","Wrapper":"prc-SelectPanel-Wrapper-43Iz8","Header":"prc-SelectPanel-Header-4dLqk","Title":"prc-SelectPanel-Title--CZN1","Subtitle":"prc-SelectPanel-Subtitle-tMSzu","Notice":"prc-SelectPanel-Notice-xDTd4","Footer":"prc-SelectPanel-Footer-78rgp","FilteredActionList":"prc-SelectPanel-FilteredActionList-wzS7m","Message":"prc-SelectPanel-Message-CSpwI","MessageTitle":"prc-SelectPanel-MessageTitle-o6PpS","MessageBody":"prc-SelectPanel-MessageBody-89DEz","MessageIcon":"prc-SelectPanel-MessageIcon-GS8ry","MessageAction":"prc-SelectPanel-MessageAction-qwola","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-3mdX2","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-e-JSD","SecondaryAction":"prc-SelectPanel-SecondaryAction-aWzLU","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-kk2cT","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-Ooz4Y","Backdrop":"prc-SelectPanel-Backdrop-7XJa-"};
+var classes = {"Overlay":"prc-SelectPanel-Overlay-arLk6","Wrapper":"prc-SelectPanel-Wrapper-43Iz8","Header":"prc-SelectPanel-Header-4dLqk","Title":"prc-SelectPanel-Title--CZN1","Subtitle":"prc-SelectPanel-Subtitle-tMSzu","Notice":"prc-SelectPanel-Notice-xDTd4","Footer":"prc-SelectPanel-Footer-78rgp","FilteredActionList":"prc-SelectPanel-FilteredActionList-wzS7m","Message":"prc-SelectPanel-Message-CSpwI","MessageTitle":"prc-SelectPanel-MessageTitle-o6PpS","MessageBody":"prc-SelectPanel-MessageBody-89DEz","MessageIcon":"prc-SelectPanel-MessageIcon-GS8ry","MessageAction":"prc-SelectPanel-MessageAction-qwola","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-3mdX2","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-e-JSD","SecondaryAction":"prc-SelectPanel-SecondaryAction-aWzLU","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-kk2cT","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-Ooz4Y","Backdrop":"prc-SelectPanel-Backdrop-7XJa-","TextInput":"prc-SelectPanel-TextInput-TjXuJ"};
 
 export { classes as default };

package/lib-esm/SideNav.d.ts

@@ -3,7 +3,6 @@ import type { ComponentProps } from './utils/types';
 import { type LinkProps } from './Link';
 import type React from 'react';
 import { type PropsWithChildren } from 'react';
-import type { SxProp } from './sx';
 type SideNavBaseProps = {
     as?: React.ElementType;
     variant?: 'lightweight' | 'normal';
@@ -11,8 +10,8 @@ type SideNavBaseProps = {
     className?: string;
     children?: React.ReactNode;
     'aria-label'?: string;
-} & SxProp;
-declare function SideNav({ as, variant, className, bordered, children, 'aria-label': ariaLabel, sx: sxProp, }: SideNavBaseProps): React.JSX.Element;
+};
+declare function SideNav({ as: Component, variant, className, bordered, children, 'aria-label': ariaLabel, }: SideNavBaseProps): React.JSX.Element;
 type StyledSideNavLinkProps = PropsWithChildren<{
     to?: To;
     selected?: boolean;

package/lib-esm/SideNav.js

@@ -1,27 +1,23 @@
 import { clsx } from 'clsx';
 import classes from './SideNav.module.css.js';
-import { BoxWithFallback } from './internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from './Link/Link.js';
 
 function SideNav({
-  as = 'nav',
+  as: Component = 'nav',
   variant = 'normal',
   className,
   bordered,
   children,
-  'aria-label': ariaLabel,
-  sx: sxProp
+  'aria-label': ariaLabel
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
     [classes.SideNavBordered]: bordered
   });
-  return /*#__PURE__*/jsx(BoxWithFallback, {
-    as: as,
+  return /*#__PURE__*/jsx(Component, {
     className: newClassName,
     "aria-label": ariaLabel,
-    sx: sxProp,
     children: children
   });
 }
@@ -40,11 +36,9 @@ const SideNavLink = ({
   });
   // according to their docs, NavLink supports aria-current:
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-  return /*#__PURE__*/jsx(BoxWithFallback, {
-    as: Link,
+  return /*#__PURE__*/jsx(Link, {
     "aria-current": isReactRouter || selected ? 'page' : undefined,
     className: newClassName,
-    variant: variant,
     ...rest,
     children: children
   });

package/lib-esm/StateLabel/StateLabel-50420ff5.css

@@ -0,0 +1,2 @@
+.prc-StateLabel-StateLabel-ukDwa{align-items:center;border-radius:var(--borderRadius-full,624.9375rem);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));display:inline-flex;font-weight:var(--base-text-weight-semibold,600);line-height:16px;text-align:center}.prc-StateLabel-StateLabel-ukDwa:where([data-variant=small]){font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-StateLabel-StateLabel-ukDwa:where([data-variant=normal]){font-size:var(--text-body-size-medium,.875rem);padding:var(--base-size-8,.5rem) var(--base-size-12,.75rem)}.prc-StateLabel-StateLabel-ukDwa:where([data-status=issueClosed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=issueClosedNotPlanned]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=pullClosed]){background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-closed-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=pullMerged]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=pullQueued]){background-color:var(--bgColor-attention-emphasis,var(--color-attention-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-attention-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=issueOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=pullOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=draft]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=issueDraft]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=unavailable]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=open]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-ukDwa:where([data-status=closed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-Icon-NuDm4{margin-right:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=StateLabel-50420ff5.css.map */

package/lib-esm/StateLabel/StateLabel-50420ff5.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/StateLabel/StateLabel.module.css"],"names":[],"mappings":"AAAA,iCAEE,kBAAmB,CAMnB,kDAAuC,CAFvC,2DAAgC,CALhC,mBAAoB,CAEpB,gDAA6C,CAE7C,gBAAiB,CAEjB,iBAEF,CAGA,6DAEE,4CAAsC,CADtC,0DAEF,CAEA,8DAEE,8CAAuC,CADvC,2DAEF,CAGA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4EACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,iEACE,4EAAgD,CAEhD,+FAAkG,CADlG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,kFAAmD,CAEnD,kGAAqG,CADrG,2DAEF,CAEA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4DACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,iEACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,kEACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,2DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,6DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,2BACE,sCACF","file":"StateLabel-50420ff5.css","sourcesContent":[".StateLabel {\n  display: inline-flex;\n  align-items: center;\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 16px;\n  color: var(--fgColor-onEmphasis);\n  text-align: center;\n  border-radius: var(--borderRadius-full);\n}\n\n/* Size variants */\n.StateLabel:where([data-variant='small']) {\n  padding: var(--base-size-4) var(--base-size-8);\n  font-size: var(--text-body-size-small);\n}\n\n.StateLabel:where([data-variant='normal']) {\n  padding: var(--base-size-8) var(--base-size-12);\n  font-size: var(--text-body-size-medium);\n}\n\n/* Status color variants */\n.StateLabel:where([data-status='issueClosed']) {\n  background-color: var(--bgColor-done-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueClosedNotPlanned']) {\n  background-color: var(--bgColor-neutral-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullClosed']) {\n  background-color: var(--bgColor-closed-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullMerged']) {\n  background-color: var(--bgColor-done-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullQueued']) {\n  background-color: var(--bgColor-attention-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueOpened']) {\n  background-color: var(--bgColor-open-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullOpened']) {\n  background-color: var(--bgColor-open-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='draft']) {\n  background-color: var(--bgColor-neutral-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueDraft']) {\n  background-color: var(--bgColor-neutral-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='unavailable']) {\n  background-color: var(--bgColor-neutral-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='open']) {\n  background-color: var(--bgColor-open-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='closed']) {\n  background-color: var(--bgColor-done-emphasis);\n  color: var(--fgColor-onEmphasis);\n  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.Icon {\n  margin-right: var(--base-size-4);\n}\n"]}

package/lib-esm/StateLabel/StateLabel.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from '../utils/types';
+import type React from 'react';
 declare const octiconMap: {
     issueOpened: import("@primer/octicons-react").Icon;
     pullOpened: import("@primer/octicons-react").Icon;
@@ -13,12 +13,13 @@ declare const octiconMap: {
     open: null;
     closed: null;
 };
-type StyledStateLabelBaseProps = {
+export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
     variant?: 'small' | 'normal';
     status: keyof typeof octiconMap;
 };
-declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, StyledStateLabelBaseProps, never>;
-export type StateLabelProps = ComponentProps<typeof StateLabelBase>;
-declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): import("react").JSX.Element;
+declare const StateLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: "small" | "normal";
+    status: keyof typeof octiconMap;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default StateLabel;
 //# sourceMappingURL=StateLabel.d.ts.map

package/lib-esm/StateLabel/StateLabel.js

@@ -1,8 +1,7 @@
 import { c } from 'react-compiler-runtime';
-import { AlertIcon, GitMergeQueueIcon, IssueDraftIcon, GitPullRequestDraftIcon, GitMergeIcon, GitPullRequestClosedIcon, SkipIcon, IssueClosedIcon, GitPullRequestIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
-import { variant } from 'styled-system';
-import { get } from '../constants.js';
+import { AlertIcon, GitMergeQueueIcon, IssueDraftIcon, GitPullRequestDraftIcon, GitMergeIcon, GitPullRequestClosedIcon, SkipIcon, IssueClosedIcon, GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import classes from './StateLabel.module.css.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Octicon from '../Octicon/Octicon.js';
@@ -35,93 +34,10 @@ const labelMap = {
   open: '',
   closed: ''
 };
-const colorVariants = variant({
-  prop: 'status',
-  variants: {
-    issueClosed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    },
-    issueClosedNotPlanned: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    pullClosed: {
-      backgroundColor: 'closed.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)'
-    },
-    pullMerged: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    },
-    pullQueued: {
-      backgroundColor: 'attention.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)'
-    },
-    issueOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    pullOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    draft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    issueDraft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    unavailable: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    open: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    closed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    }
-  }
-});
-const sizeVariants = variant({
-  prop: 'variant',
-  variants: {
-    small: {
-      paddingX: 2,
-      paddingY: 1,
-      fontSize: 0
-    },
-    normal: {
-      paddingX: '12px',
-      paddingY: 2,
-      fontSize: 1
-    }
-  }
-});
-const StateLabelBase = styled.span.withConfig({
-  displayName: "StateLabel__StateLabelBase",
-  componentId: "sc-qthdln-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants);
-function StateLabel(t0) {
-  const $ = c(17);
+const StateLabel = /*#__PURE__*/forwardRef((t0, ref) => {
+  const $ = c(22);
   let children;
+  let className;
   let rest;
   let status;
   let t1;
@@ -130,65 +46,81 @@ function StateLabel(t0) {
       children,
       status,
       variant: t1,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
-    $[3] = status;
-    $[4] = t1;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = status;
+    $[5] = t1;
   } else {
     children = $[1];
-    rest = $[2];
-    status = $[3];
-    t1 = $[4];
+    className = $[2];
+    rest = $[3];
+    status = $[4];
+    t1 = $[5];
   }
   const variantProp = t1 === undefined ? "normal" : t1;
   let t2;
-  if ($[5] !== variantProp) {
+  if ($[6] !== variantProp) {
     t2 = variantProp === "small" ? {
       width: "1em"
     } : {};
-    $[5] = variantProp;
-    $[6] = t2;
+    $[6] = variantProp;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   const octiconProps = t2;
   const noIconStatus = status === "open" || status === "closed";
   let t3;
-  if ($[7] !== noIconStatus || $[8] !== octiconProps || $[9] !== status) {
-    t3 = status && !noIconStatus && /*#__PURE__*/jsx(Octicon, {
+  if ($[8] !== className) {
+    t3 = clsx(classes.StateLabel, className);
+    $[8] = className;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== noIconStatus || $[11] !== octiconProps || $[12] !== status) {
+    t4 = !noIconStatus && /*#__PURE__*/jsx(Octicon, {
       ...octiconProps,
-      icon: octiconMap[status] || QuestionIcon,
+      icon: octiconMap[status],
       "aria-label": labelMap[status],
       className: classes.Icon
     });
-    $[7] = noIconStatus;
-    $[8] = octiconProps;
-    $[9] = status;
-    $[10] = t3;
+    $[10] = noIconStatus;
+    $[11] = octiconProps;
+    $[12] = status;
+    $[13] = t4;
   } else {
-    t3 = $[10];
+    t4 = $[13];
   }
-  let t4;
-  if ($[11] !== children || $[12] !== rest || $[13] !== status || $[14] !== t3 || $[15] !== variantProp) {
-    t4 = /*#__PURE__*/jsxs(StateLabelBase, {
+  let t5;
+  if ($[14] !== children || $[15] !== ref || $[16] !== rest || $[17] !== status || $[18] !== t3 || $[19] !== t4 || $[20] !== variantProp) {
+    t5 = /*#__PURE__*/jsxs("span", {
       ...rest,
-      variant: variantProp,
-      status: status,
-      children: [t3, children]
+      ref: ref,
+      className: t3,
+      "data-variant": variantProp,
+      "data-status": status,
+      children: [t4, children]
     });
-    $[11] = children;
-    $[12] = rest;
-    $[13] = status;
-    $[14] = t3;
-    $[15] = variantProp;
-    $[16] = t4;
+    $[14] = children;
+    $[15] = ref;
+    $[16] = rest;
+    $[17] = status;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = variantProp;
+    $[21] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[21];
   }
-  return t4;
-}
+  return t5;
+});
+StateLabel.displayName = 'StateLabel';
 
 export { StateLabel as default };

package/lib-esm/StateLabel/StateLabel.module.css.js

@@ -1,5 +1,5 @@
-import './StateLabel-cd27f475.css';
+import './StateLabel-50420ff5.css';
 
-var classes = {"Icon":"prc-StateLabel-Icon-NuDm4"};
+var classes = {"StateLabel":"prc-StateLabel-StateLabel-ukDwa","Icon":"prc-StateLabel-Icon-NuDm4"};
 
 export { classes as default };