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

package/lib-esm/SegmentedControl/SegmentedControlIconButton.js

@@ -1,5 +1,4 @@
 import { c } from 'react-compiler-runtime';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
@@ -16,14 +15,14 @@ const SegmentedControlIconButton = t0 => {
   let description;
   let rest;
   let selected;
-  let t1;
+  let sxProp;
   let tooltipDirection;
   if ($[0] !== t0) {
     ({
       "aria-label": ariaLabel,
       icon: Icon,
       selected,
-      sx: t1,
+      sx: sxProp,
       className,
       description,
       tooltipDirection,
@@ -36,7 +35,7 @@ const SegmentedControlIconButton = t0 => {
     $[4] = description;
     $[5] = rest;
     $[6] = selected;
-    $[7] = t1;
+    $[7] = sxProp;
     $[8] = tooltipDirection;
   } else {
     Icon = $[1];
@@ -45,188 +44,187 @@ const SegmentedControlIconButton = t0 => {
     description = $[4];
     rest = $[5];
     selected = $[6];
-    t1 = $[7];
+    sxProp = $[7];
     tooltipDirection = $[8];
   }
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const tooltipFlagEnabled = useFeatureFlag("primer_react_segmented_control_tooltip");
   if (tooltipFlagEnabled) {
-    let t2;
+    let t1;
     if ($[9] !== className) {
-      t2 = clsx(classes.Item, className);
+      t1 = clsx(classes.Item, className);
       $[9] = className;
-      $[10] = t2;
+      $[10] = t1;
     } else {
-      t2 = $[10];
+      t1 = $[10];
     }
-    const t3 = selected || undefined;
-    const t4 = description ? undefined : "label";
-    const t5 = description ? description : ariaLabel;
-    const t6 = description ? ariaLabel : undefined;
-    let t7;
+    const t2 = selected || undefined;
+    const t3 = description ? undefined : "label";
+    const t4 = description ? description : ariaLabel;
+    const t5 = description ? ariaLabel : undefined;
+    let t6;
     if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-      t7 = clsx(classes.Button, classes.IconButton);
-      $[11] = t7;
+      t6 = clsx(classes.Button, classes.IconButton);
+      $[11] = t6;
     } else {
-      t7 = $[11];
+      t6 = $[11];
     }
-    let t8;
+    let t7;
     if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-      t8 = clsx(classes.Content, "segmentedControl-content");
-      $[12] = t8;
+      t7 = clsx(classes.Content, "segmentedControl-content");
+      $[12] = t7;
     } else {
-      t8 = $[12];
+      t7 = $[12];
     }
-    let t9;
+    let t8;
     if ($[13] !== Icon) {
-      t9 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
+      t8 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
       $[13] = Icon;
-      $[14] = t9;
+      $[14] = t8;
     } else {
-      t9 = $[14];
+      t8 = $[14];
     }
-    let t10;
-    if ($[15] !== t9) {
-      t10 = /*#__PURE__*/jsx("span", {
-        className: t8,
-        children: t9
+    let t9;
+    if ($[15] !== t8) {
+      t9 = /*#__PURE__*/jsx("span", {
+        className: t7,
+        children: t8
       });
-      $[15] = t9;
-      $[16] = t10;
+      $[15] = t8;
+      $[16] = t9;
     } else {
-      t10 = $[16];
+      t9 = $[16];
     }
-    let t11;
-    if ($[17] !== rest || $[18] !== selected || $[19] !== t10 || $[20] !== t6) {
-      t11 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t10;
+    if ($[17] !== rest || $[18] !== selected || $[19] !== t5 || $[20] !== t9) {
+      t10 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "button",
         "aria-current": selected,
-        "aria-label": t6,
-        className: t7,
+        "aria-label": t5,
+        className: t6,
         ...rest,
-        children: t10
+        children: t9
       });
       $[17] = rest;
       $[18] = selected;
-      $[19] = t10;
-      $[20] = t6;
-      $[21] = t11;
+      $[19] = t5;
+      $[20] = t9;
+      $[21] = t10;
     } else {
-      t11 = $[21];
+      t10 = $[21];
     }
-    let t12;
-    if ($[22] !== t11 || $[23] !== t4 || $[24] !== t5 || $[25] !== tooltipDirection) {
-      t12 = /*#__PURE__*/jsx(Tooltip, {
-        type: t4,
-        text: t5,
+    let t11;
+    if ($[22] !== t10 || $[23] !== t3 || $[24] !== t4 || $[25] !== tooltipDirection) {
+      t11 = /*#__PURE__*/jsx(Tooltip, {
+        type: t3,
+        text: t4,
         direction: tooltipDirection,
-        children: t11
+        children: t10
       });
-      $[22] = t11;
-      $[23] = t4;
-      $[24] = t5;
+      $[22] = t10;
+      $[23] = t3;
+      $[24] = t4;
       $[25] = tooltipDirection;
-      $[26] = t12;
+      $[26] = t11;
     } else {
-      t12 = $[26];
+      t11 = $[26];
     }
-    let t13;
-    if ($[27] !== sxProp || $[28] !== t12 || $[29] !== t2 || $[30] !== t3) {
-      t13 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t12;
+    if ($[27] !== sxProp || $[28] !== t1 || $[29] !== t11 || $[30] !== t2) {
+      t12 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "li",
         sx: sxProp,
-        className: t2,
-        "data-selected": t3,
-        children: t12
+        className: t1,
+        "data-selected": t2,
+        children: t11
       });
       $[27] = sxProp;
-      $[28] = t12;
-      $[29] = t2;
-      $[30] = t3;
-      $[31] = t13;
+      $[28] = t1;
+      $[29] = t11;
+      $[30] = t2;
+      $[31] = t12;
     } else {
-      t13 = $[31];
+      t12 = $[31];
     }
-    return t13;
+    return t12;
   } else {
-    let t2;
+    let t1;
     if ($[32] !== className) {
-      t2 = clsx(classes.Item, className);
+      t1 = clsx(classes.Item, className);
       $[32] = className;
-      $[33] = t2;
+      $[33] = t1;
     } else {
-      t2 = $[33];
+      t1 = $[33];
     }
-    const t3 = selected || undefined;
-    let t4;
+    const t2 = selected || undefined;
+    let t3;
     if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = clsx(classes.Button, classes.IconButton);
-      $[34] = t4;
+      t3 = clsx(classes.Button, classes.IconButton);
+      $[34] = t3;
     } else {
-      t4 = $[34];
+      t3 = $[34];
     }
-    let t5;
+    let t4;
     if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = clsx(classes.Content, "segmentedControl-content");
-      $[35] = t5;
+      t4 = clsx(classes.Content, "segmentedControl-content");
+      $[35] = t4;
     } else {
-      t5 = $[35];
+      t4 = $[35];
     }
-    let t6;
+    let t5;
     if ($[36] !== Icon) {
-      t6 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
+      t5 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
       $[36] = Icon;
-      $[37] = t6;
+      $[37] = t5;
     } else {
-      t6 = $[37];
+      t5 = $[37];
     }
-    let t7;
-    if ($[38] !== t6) {
-      t7 = /*#__PURE__*/jsx("span", {
-        className: t5,
-        children: t6
+    let t6;
+    if ($[38] !== t5) {
+      t6 = /*#__PURE__*/jsx("span", {
+        className: t4,
+        children: t5
       });
-      $[38] = t6;
-      $[39] = t7;
+      $[38] = t5;
+      $[39] = t6;
     } else {
-      t7 = $[39];
+      t6 = $[39];
     }
-    let t8;
-    if ($[40] !== ariaLabel || $[41] !== rest || $[42] !== selected || $[43] !== t7) {
-      t8 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t7;
+    if ($[40] !== ariaLabel || $[41] !== rest || $[42] !== selected || $[43] !== t6) {
+      t7 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "button",
         "aria-label": ariaLabel,
         "aria-current": selected,
-        className: t4,
+        className: t3,
         ...rest,
-        children: t7
+        children: t6
       });
       $[40] = ariaLabel;
       $[41] = rest;
       $[42] = selected;
-      $[43] = t7;
-      $[44] = t8;
+      $[43] = t6;
+      $[44] = t7;
     } else {
-      t8 = $[44];
+      t7 = $[44];
     }
-    let t9;
-    if ($[45] !== sxProp || $[46] !== t2 || $[47] !== t3 || $[48] !== t8) {
-      t9 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t8;
+    if ($[45] !== sxProp || $[46] !== t1 || $[47] !== t2 || $[48] !== t7) {
+      t8 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "li",
         sx: sxProp,
-        className: t2,
-        "data-selected": t3,
-        children: t8
+        className: t1,
+        "data-selected": t2,
+        children: t7
       });
       $[45] = sxProp;
-      $[46] = t2;
-      $[47] = t3;
-      $[48] = t8;
-      $[49] = t9;
+      $[46] = t1;
+      $[47] = t2;
+      $[48] = t7;
+      $[49] = t8;
     } else {
-      t9 = $[49];
+      t8 = $[49];
     }
-    return t9;
+    return t8;
   }
 };
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StyledWrapperProps } from '../internal/components/TextInputWrapper';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-export type SelectProps = Omit<Omit<React.ComponentProps<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>, 'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'> & {
+export type SelectProps = Omit<Omit<React.ComponentProps<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant' | 'contrast'>, 'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'> & {
     placeholder?: string;
 };
 declare const _default: PolymorphicForwardRefComponent<"select", SelectProps> & {

package/lib-esm/Select/Select.js

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

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

@@ -0,0 +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}.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

@@ -1,9 +1,10 @@
+import { type IconProps } from '@primer/octicons-react';
 import React from 'react';
 import type { AnchoredOverlayProps } from '../AnchoredOverlay';
 import type { AnchoredOverlayWrapperAnchorProps } from '../AnchoredOverlay/AnchoredOverlay';
 import type { FilteredActionListProps } from '../FilteredActionList';
 import type { OverlayProps } from '../Overlay';
-import type { ItemInput } from './types';
+import type { ItemInput } from './';
 import type { ButtonProps, LinkButtonProps } from '../Button/types';
 interface SelectPanelSingleSelection {
     selected: ItemInput | undefined;
@@ -33,6 +34,8 @@ interface SelectPanelBaseProps {
         title: string;
         body: string | React.ReactElement;
         variant: 'empty' | 'error' | 'warning';
+        icon?: React.ComponentType<IconProps>;
+        action?: React.ReactElement;
     };
     /**
      * @deprecated Use `secondaryAction` instead.
@@ -46,6 +49,7 @@ interface SelectPanelBaseProps {
      * @default undefined (uses feature flag default)
      */
     disableFullscreenOnNarrow?: boolean;
+    showSelectAll?: boolean;
 }
 type SelectPanelVariantProps = {
     variant?: 'anchored';
@@ -54,15 +58,15 @@ type SelectPanelVariantProps = {
     variant: 'modal';
     onCancel: () => void;
 };
-export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant'> & 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, ...listProps }: SelectPanelProps): JSX.Element;
+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, 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 & {
     SecondaryActionButton: React.FC<ButtonProps>;
     SecondaryActionLink: React.FC<LinkButtonProps & {
         alignContent?: import("../Button/types").AlignContent;
-        icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement | null;
+        icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement | null;
         leadingVisual?: React.ElementType | React.ReactElement | null;
         trailingVisual?: React.ElementType | React.ReactElement | null;
         trailingAction?: React.ElementType | null;