@primer/react 38.29.0-rc.e2fa16f13 → 38.29.0-rc.edaf62be4

package/dist/TreeView/TreeView.js

@@ -17,6 +17,7 @@ import { ButtonComponent } from '../Button/Button.js';
 import { ActionList } from '../ActionList/index.js';
 import { usePlatform } from '../KeybindingHint/platform.js';
 import { isSlot } from '../utils/is-slot.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getAccessibleKeybindingHintString } from '../KeybindingHint/utils.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
@@ -265,7 +266,17 @@ Root.displayName = 'TreeView';
 // ----------------------------------------------------------------------------
 // TreeView.Item
 
-const Item = /*#__PURE__*/React.forwardRef(({
+// We build this type manually (instead of using `PolymorphicProps`) so we can omit
+// `ref` and `onSelect` from the underlying element's props:
+// - `ref` is provided solely by `fixedForwardRef` (typed as `Ref<unknown>`), preserving
+//   backward compatibility with consumers that pass `Ref<HTMLElement>` rather than the
+//   intrinsic element's ref type (e.g. `Ref<HTMLLIElement>` for the default `<li>`).
+// - Our custom `onSelect` (typed against `HTMLElement`) replaces the native
+//   `ReactEventHandler<HTMLLIElement>` that would otherwise be intersected in
+//   and conflict with existing consumers.
+// `DistributiveOmit` keeps the omit distributing over `as` union types.
+
+const ItemImpl = fixedForwardRef(({
   id: itemId,
   containIntrinsicSize,
   current: isCurrentItem = false,
@@ -277,8 +288,19 @@ const Item = /*#__PURE__*/React.forwardRef(({
   className,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  secondaryActions
+  secondaryActions,
+  as: Component,
+  ...restProps
 }, ref) => {
+  // When `as` is provided (and resolves to something other than the default
+  // `'li'`), we render the polymorphic element as the `role="treeitem"` and
+  // wrap it in an `<li role="none">` so the markup remains valid (a
+  // `<ul role="tree">` may only directly contain `<li>` elements). When `as`
+  // is omitted, or explicitly set to `'li'`, we render an `<li>` directly as
+  // the treeitem to preserve the historical DOM shape and ref typing for
+  // existing consumers and to avoid nesting `<li>` inside `<li>`.
+  const ItemElement = Component !== null && Component !== void 0 ? Component : 'li';
+  const isPolymorphic = Component !== undefined && Component !== 'li';
   const [slots, rest] = useSlots(children, {
     leadingAction: LeadingAction,
     leadingVisual: LeadingVisual,
@@ -320,9 +342,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const platform = usePlatform();
 
   // Set the expanded state and cache it
-  const setIsExpandedWithCache = React.useCallback(
-  // eslint-disable-next-line react-hooks/preserve-manual-memoization
-  newIsExpanded => {
+  const setIsExpandedWithCache = React.useCallback(newIsExpanded => {
     var _expandedStateCache$c3;
     setIsExpanded(newIsExpanded);
     (_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 ? void 0 : _expandedStateCache$c3.set(itemId, newIsExpanded);
@@ -345,34 +365,34 @@ const Item = /*#__PURE__*/React.forwardRef(({
       action();
     }
   }, [secondaryActions]);
-  const handleKeyDown = React.useCallback(event_0 => {
-    switch (event_0.key) {
+  const handleKeyDown = React.useCallback(event => {
+    switch (event.key) {
       case 'Enter':
       case ' ':
         if (onSelect) {
-          onSelect(event_0);
+          onSelect(event);
         } else {
-          toggle(event_0);
+          toggle(event);
         }
-        event_0.stopPropagation();
+        event.stopPropagation();
         break;
       case 'ArrowRight':
         // Ignore if modifier keys are pressed
-        if (event_0.altKey || event_0.metaKey) return;
-        event_0.preventDefault();
-        event_0.stopPropagation();
+        if (event.altKey || event.metaKey) return;
+        event.preventDefault();
+        event.stopPropagation();
         setIsExpandedWithCache(true);
         break;
       case 'ArrowLeft':
         // Ignore if modifier keys are pressed
-        if (event_0.altKey || event_0.metaKey) return;
-        event_0.preventDefault();
-        event_0.stopPropagation();
+        if (event.altKey || event.metaKey) return;
+        event.preventDefault();
+        event.stopPropagation();
         setIsExpandedWithCache(false);
         break;
       case 'U':
       case 'u':
-        if (!(event_0.shiftKey && (event_0.metaKey || event_0.ctrlKey))) return;
+        if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
         activateActionsDialog();
         break;
     }
@@ -380,6 +400,106 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
   const shortcut = `Shift+${platform === 'apple' ? 'Meta' : 'Control'}+U`;
   const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, platform)}) for more actions.`;
+  const itemElement =
+  /*#__PURE__*/
+  // @ts-ignore TypeScript can't infer that the `ref` here is compatible
+  // with every possible polymorphic `ItemElement` (it's typed as
+  // `Ref<unknown>` by `fixedForwardRef`), so we cast at the boundary.
+  jsxs(ItemElement, {
+    ...restProps,
+    className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
+    ref: ref,
+    tabIndex: 0,
+    id: itemId,
+    role: "treeitem",
+    "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
+    "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
+    "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
+    "aria-level": level,
+    "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
+    "aria-current": isCurrentItem ? 'true' : undefined,
+    "aria-selected": isFocused ? 'true' : 'false',
+    "data-has-leading-action": slots.leadingAction ? true : undefined,
+    "data-loading": isLoadingPlaceholder ? true : undefined,
+    onKeyDown: handleKeyDown,
+    onFocus: event => {
+      // Defer scroll to the next animation frame so that rapid keyboard
+      // navigation (held key) coalesces into a single reflow per frame
+      scrollElementIntoView(event.currentTarget.firstElementChild);
+
+      // Set the focused state
+      setIsFocused(true);
+
+      // Prevent focus event from bubbling up to parent items
+      event.stopPropagation();
+    },
+    onBlur: () => setIsFocused(false),
+    onClick: event => {
+      if (onSelect) {
+        onSelect(event);
+      } else {
+        toggle(event);
+      }
+      event.stopPropagation();
+    },
+    onAuxClick: event => {
+      if (onSelect && event.button === 1) {
+        onSelect(event);
+      }
+      event.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
+      style: {
+        // @ts-ignore CSS custom property
+        '--level': level,
+        contentVisibility: containIntrinsicSize ? 'auto' : undefined,
+        containIntrinsicSize
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          gridArea: 'spacer',
+          display: 'flex'
+        },
+        children: /*#__PURE__*/jsx(LevelIndicatorLines, {
+          level: level
+        })
+      }), slots.leadingAction, hasSubTree ?
+      /*#__PURE__*/
+      // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
+      // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
+      // This has specific advice that the chevron be available only to pointer event.
+      // If they take up a button role, they become unnecessary and numerous tab stops.
+      jsx("div", {
+        className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
+        onClick: event => {
+          if (onSelect) {
+            toggle(event);
+          }
+        },
+        children: isExpanded ? /*#__PURE__*/jsx(ChevronDownIcon, {
+          size: TOGGLE_ICON_SIZE
+        }) : /*#__PURE__*/jsx(ChevronRightIcon, {
+          size: TOGGLE_ICON_SIZE
+        })
+      }) : null, /*#__PURE__*/jsxs("div", {
+        id: labelId,
+        className: clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent),
+        children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
+          className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
+          children: childrenWithoutSubTree
+        }), slots.trailingVisual]
+      }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(TrailingAction, {
+          items: secondaryActions,
+          shortcutText: trailingActionShortcutText
+        }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
+          items: secondaryActions,
+          onClose: () => setActionCommandPressed(false)
+        }) : null]
+      }) : null]
+    }), subTree]
+  });
   return /*#__PURE__*/jsx(ItemContext.Provider, {
     value: {
       itemId,
@@ -392,102 +512,15 @@ const Item = /*#__PURE__*/React.forwardRef(({
       trailingVisualId,
       trailingActionId
     },
-    children: /*#__PURE__*/jsxs("li", {
-      className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
-      ref: ref,
-      tabIndex: 0,
-      id: itemId,
-      role: "treeitem",
-      "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
-      "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
-      "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
-      "aria-level": level,
-      "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
-      "aria-current": isCurrentItem ? 'true' : undefined,
-      "aria-selected": isFocused ? 'true' : 'false',
-      "data-has-leading-action": slots.leadingAction ? true : undefined,
-      "data-loading": isLoadingPlaceholder ? true : undefined,
-      onKeyDown: handleKeyDown,
-      onFocus: event_1 => {
-        // Defer scroll to the next animation frame so that rapid keyboard
-        // navigation (held key) coalesces into a single reflow per frame
-        scrollElementIntoView(event_1.currentTarget.firstElementChild);
-
-        // Set the focused state
-        setIsFocused(true);
-
-        // Prevent focus event from bubbling up to parent items
-        event_1.stopPropagation();
-      },
-      onBlur: () => setIsFocused(false),
-      onClick: event_2 => {
-        if (onSelect) {
-          onSelect(event_2);
-        } else {
-          toggle(event_2);
-        }
-        event_2.stopPropagation();
-      },
-      onAuxClick: event_3 => {
-        if (onSelect && event_3.button === 1) {
-          onSelect(event_3);
-        }
-        event_3.stopPropagation();
-      },
-      children: [/*#__PURE__*/jsxs("div", {
-        className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
-        style: {
-          // @ts-ignore CSS custom property
-          '--level': level,
-          contentVisibility: containIntrinsicSize ? 'auto' : undefined,
-          containIntrinsicSize
-        },
-        children: [/*#__PURE__*/jsx("div", {
-          style: {
-            gridArea: 'spacer',
-            display: 'flex'
-          },
-          children: /*#__PURE__*/jsx(LevelIndicatorLines, {
-            level: level
-          })
-        }), slots.leadingAction, hasSubTree ?
-        /*#__PURE__*/
-        // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
-        // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
-        // This has specific advice that the chevron be available only to pointer event.
-        // If they take up a button role, they become unnecessary and numerous tab stops.
-        jsx("div", {
-          className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
-          onClick: event_4 => {
-            if (onSelect) {
-              toggle(event_4);
-            }
-          },
-          children: isExpanded ? /*#__PURE__*/jsx(ChevronDownIcon, {
-            size: TOGGLE_ICON_SIZE
-          }) : /*#__PURE__*/jsx(ChevronRightIcon, {
-            size: TOGGLE_ICON_SIZE
-          })
-        }) : null, /*#__PURE__*/jsxs("div", {
-          id: labelId,
-          className: clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent),
-          children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
-            className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
-            children: childrenWithoutSubTree
-          }), slots.trailingVisual]
-        }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(TrailingAction, {
-            items: secondaryActions,
-            shortcutText: trailingActionShortcutText
-          }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
-            items: secondaryActions,
-            onClose: () => setActionCommandPressed(false)
-          }) : null]
-        }) : null]
-      }), subTree]
-    })
+    children: isPolymorphic ? /*#__PURE__*/jsx("li", {
+      role: "none",
+      children: itemElement
+    }) : itemElement
   });
 });
+const Item = Object.assign(ItemImpl, {
+  displayName: 'TreeView.Item'
+});
 
 /** Lines to indicate the depth of an item in a TreeView */
 const LevelIndicatorLines = t0 => {
@@ -520,7 +553,6 @@ const LevelIndicatorLines = t0 => {
   }
   return t2;
 };
-Item.displayName = 'TreeView.Item';
 
 // ----------------------------------------------------------------------------
 // TreeView.SubTree
@@ -755,118 +787,121 @@ const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
   } = t0;
   const itemId = useId();
   if (count) {
-    let t1;
+    const t1 = ref;
+    let t2;
     if ($[0] !== count) {
-      t1 = Array.from({
+      t2 = Array.from({
         length: count
       }).map(_temp3);
       $[0] = count;
-      $[1] = t1;
+      $[1] = t2;
     } else {
-      t1 = $[1];
+      t2 = $[1];
     }
-    let t2;
+    let t3;
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-      $[2] = t2;
+      t3 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
+      $[2] = t3;
     } else {
-      t2 = $[2];
+      t3 = $[2];
     }
-    let t3;
+    let t4;
     if ($[3] !== count) {
-      t3 = /*#__PURE__*/jsxs("div", {
-        className: t2,
+      t4 = /*#__PURE__*/jsxs("div", {
+        className: t3,
         children: ["Loading ", count, " items"]
       });
       $[3] = count;
-      $[4] = t3;
+      $[4] = t4;
     } else {
-      t3 = $[4];
+      t4 = $[4];
     }
-    let t4;
-    if ($[5] !== itemId || $[6] !== ref || $[7] !== t1 || $[8] !== t3) {
-      t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+    let t5;
+    if ($[5] !== itemId || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
+      t5 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
         value: true,
         children: /*#__PURE__*/jsxs(Item, {
           id: itemId,
-          ref: ref,
-          children: [t1, t3]
+          ref: t1,
+          children: [t2, t4]
         })
       });
       $[5] = itemId;
-      $[6] = ref;
-      $[7] = t1;
-      $[8] = t3;
-      $[9] = t4;
+      $[6] = t1;
+      $[7] = t2;
+      $[8] = t4;
+      $[9] = t5;
     } else {
-      t4 = $[9];
+      t5 = $[9];
     }
-    return t4;
+    return t5;
   }
-  let t1;
+  const t1 = ref;
   let t2;
+  let t3;
   if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = /*#__PURE__*/jsx(LeadingVisual, {
+    t2 = /*#__PURE__*/jsx(LeadingVisual, {
       children: /*#__PURE__*/jsx(Spinner, {
         size: "small"
       })
     });
-    t2 = /*#__PURE__*/jsx(Text, {
+    t3 = /*#__PURE__*/jsx(Text, {
       className: "fgColor-muted",
       children: "Loading..."
     });
-    $[10] = t1;
-    $[11] = t2;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t1 = $[10];
-    t2 = $[11];
+    t2 = $[10];
+    t3 = $[11];
   }
-  let t3;
-  if ($[12] !== itemId || $[13] !== ref) {
-    t3 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+  let t4;
+  if ($[12] !== itemId || $[13] !== t1) {
+    t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
       value: true,
       children: /*#__PURE__*/jsxs(Item, {
         id: itemId,
-        ref: ref,
-        children: [t1, t2]
+        ref: t1,
+        children: [t2, t3]
       })
     });
     $[12] = itemId;
-    $[13] = ref;
-    $[14] = t3;
+    $[13] = t1;
+    $[14] = t4;
   } else {
-    t3 = $[14];
+    t4 = $[14];
   }
-  return t3;
+  return t4;
 });
 const EmptyItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const $ = c(4);
   const t0 = useId();
-  let t1;
+  const t1 = ref;
+  let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = /*#__PURE__*/jsx(Text, {
+    t2 = /*#__PURE__*/jsx(Text, {
       className: "fgColor-muted",
       children: "No items found"
     });
-    $[0] = t1;
+    $[0] = t2;
   } else {
-    t1 = $[0];
+    t2 = $[0];
   }
-  let t2;
-  if ($[1] !== ref || $[2] !== t0) {
-    t2 = /*#__PURE__*/jsx(Item, {
+  let t3;
+  if ($[1] !== t0 || $[2] !== t1) {
+    t3 = /*#__PURE__*/jsx(Item, {
       expanded: null,
       id: t0,
-      ref: ref,
-      children: t1
+      ref: t1,
+      children: t2
     });
-    $[1] = ref;
-    $[2] = t0;
-    $[3] = t2;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t3;
   } else {
-    t2 = $[3];
+    t3 = $[3];
   }
-  return t2;
+  return t3;
 });
 function useSubTree(children) {
   const $ = c(8);

package/dist/deprecated/ActionList/Group.d.ts

@@ -25,5 +25,5 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
 /**
  * Collects related `Items` in an `ActionList`.
  */
-export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;
+export declare function Group({ header, items, groupId: _groupId, ...props }: GroupProps): JSX.Element;
 //# sourceMappingURL=Group.d.ts.map

package/dist/deprecated/ActionList/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAOxE"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAO3F"}

package/dist/deprecated/ActionList/Group.js

@@ -11,11 +11,15 @@ function Group(t0) {
   let items;
   let props;
   if ($[0] !== t0) {
-    ({
-      header,
-      items,
-      ...props
-    } = t0);
+    const {
+      header: t1,
+      items: t2,
+      groupId: _groupId,
+      ...t3
+    } = t0;
+    header = t1;
+    items = t2;
+    props = t3;
     $[0] = t0;
     $[1] = header;
     $[2] = items;

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"]}