@primer/react 0.0.0-20260324015348 → 0.0.0-20260324023447

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/react
 
-## 0.0.0-20260324015348
+## 0.0.0-20260324023447
 
 ### Minor Changes
 

package/dist/FilteredActionList/FilteredActionList-6808e67a.css

@@ -0,0 +1,2 @@
+.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-Container-647gF [data-dividers=true] .prc-FilteredActionList-ActionListItem-RSinr{content-visibility:visible}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
+/*# sourceMappingURL=FilteredActionList-6808e67a.css.map */

package/dist/FilteredActionList/FilteredActionList-6808e67a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAiBF,CAXE,gKAEE,gCAAiC,CADjC,uBAEF,CAKA,0GACE,0BACF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDCjCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDuCA,CAGF,mGACE,wGAKF,CAHE,yGCzCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BD+CA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-6808e67a.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Header {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  z-index: 1;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\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  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n\n  /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are\n     positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment\n     which clips these, so we must disable it for items in lists with dividers. */\n  & [data-dividers='true'] .ActionListItem {\n    content-visibility: visible;\n  }\n}\n\n.ActionList {\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: var(--base-size-4);\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: calc(100% - var(--base-size-8));\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

package/dist/FilteredActionList/FilteredActionList.module.css.js

@@ -1,4 +1,4 @@
-import './FilteredActionList-02db90c6.css';
+import './FilteredActionList-6808e67a.css';
 
 var classes = {"Root":"prc-FilteredActionList-Root-QgIk1","Header":"prc-FilteredActionList-Header-y6ihu","Container":"prc-FilteredActionList-Container-647gF","ActionListItem":"prc-FilteredActionList-ActionListItem-RSinr","ActionList":"prc-FilteredActionList-ActionList-3-Bxb","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-CJvWO","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-X2ij0","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-Axs5l","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-Bi-PZ"};
 

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAoF/E,CAAA;AAED,wBAAgB,QAAQ;YAjHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA0G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsF/E,CAAA;AAED,wBAAgB,QAAQ;YAnHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA4G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}

package/dist/ThemeProvider.js

@@ -1,5 +1,6 @@
 import { c } from 'react-compiler-runtime';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import theme from './theme.js';
 import deepmerge from 'deepmerge';
 import { useSyncedState } from './hooks/useSyncedState.js';
@@ -29,99 +30,61 @@ const getServerHandoff = id => {
   }
   return {};
 };
-const ThemeProvider = t0 => {
+const ThemeProvider = ({
+  children,
+  ...props
+}) => {
   var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
-  const $ = c(43);
-  let children;
-  let props;
-  if ($[0] !== t0) {
-    ({
-      children,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = props;
-  } else {
-    children = $[1];
-    props = $[2];
-  }
+  // Get fallback values from parent ThemeProvider (if exists)
   const {
     theme: fallbackTheme,
     colorMode: fallbackColorMode,
     dayScheme: fallbackDayScheme,
     nightScheme: fallbackNightScheme
   } = useTheme();
+
+  // Initialize state
   const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
   const uniqueDataId = useId();
-  let t1;
-  if ($[3] !== uniqueDataId) {
-    t1 = () => getServerHandoff(uniqueDataId).resolvedServerColorMode;
-    $[3] = uniqueDataId;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  const [serverColorMode, setServerColorMode] = React.useState(t1);
+  const {
+    resolvedServerColorMode
+  } = getServerHandoff(uniqueDataId);
+  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
   const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
   const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
   const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
   const systemColorMode = useSystemColorMode();
-  let t2;
-  if ($[5] !== colorMode || $[6] !== serverColorMode || $[7] !== systemColorMode) {
-    t2 = serverColorMode !== null && serverColorMode !== void 0 ? serverColorMode : resolveColorMode(colorMode, systemColorMode);
-    $[5] = colorMode;
-    $[6] = serverColorMode;
-    $[7] = systemColorMode;
-    $[8] = t2;
-  } else {
-    t2 = $[8];
-  }
-  const resolvedColorMode = t2;
-  let t3;
-  if ($[9] !== dayScheme || $[10] !== nightScheme || $[11] !== resolvedColorMode) {
-    t3 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-    $[9] = dayScheme;
-    $[10] = nightScheme;
-    $[11] = resolvedColorMode;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  const colorScheme = t3;
-  let t4;
-  if ($[13] !== colorScheme || $[14] !== theme$1) {
-    t4 = applyColorScheme(theme$1, colorScheme);
-    $[13] = colorScheme;
-    $[14] = theme$1;
-    $[15] = t4;
-  } else {
-    t4 = $[15];
-  }
+  // eslint-disable-next-line react-hooks/refs
+  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
   const {
     resolvedTheme,
     resolvedColorScheme
-  } = t4;
-  let t5;
-  let t6;
-  if ($[16] !== serverColorMode) {
-    t5 = function clearServerPassthrough() {
-      if (serverColorMode !== undefined) {
-        setServerColorMode(undefined);
+  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
+
+  // this effect will only run on client
+  React.useEffect(function updateColorModeAfterServerPassthrough() {
+    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
+    if (resolvedColorModePassthrough.current) {
+      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
+      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
+        window.setTimeout(() => {
+          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
+          // ref: https://github.com/reactwg/react-18/discussions/21
+          ReactDOM.flushSync(() => {
+            // override colorMode to whatever is resolved on the client to get a re-render
+            setColorMode(resolvedColorModeOnClient);
+          });
+
+          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
+          setColorMode(colorMode);
+        });
       }
-    };
-    t6 = [serverColorMode];
-    $[16] = serverColorMode;
-    $[17] = t5;
-    $[18] = t6;
-  } else {
-    t5 = $[17];
-    t6 = $[18];
-  }
-  React.useEffect(t5, t6);
-  let t7;
-  if ($[19] !== colorMode || $[20] !== colorScheme || $[21] !== dayScheme || $[22] !== nightScheme || $[23] !== resolvedColorMode || $[24] !== resolvedColorScheme || $[25] !== resolvedTheme || $[26] !== setColorMode || $[27] !== setDayScheme || $[28] !== setNightScheme) {
-    t7 = {
+      resolvedColorModePassthrough.current = null;
+    }
+  }, [colorMode, systemColorMode, setColorMode]);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: {
       theme: resolvedTheme,
       colorScheme,
       colorMode,
@@ -132,72 +95,24 @@ const ThemeProvider = t0 => {
       setColorMode,
       setDayScheme,
       setNightScheme
-    };
-    $[19] = colorMode;
-    $[20] = colorScheme;
-    $[21] = dayScheme;
-    $[22] = nightScheme;
-    $[23] = resolvedColorMode;
-    $[24] = resolvedColorScheme;
-    $[25] = resolvedTheme;
-    $[26] = setColorMode;
-    $[27] = setDayScheme;
-    $[28] = setNightScheme;
-    $[29] = t7;
-  } else {
-    t7 = $[29];
-  }
-  const contextValue = t7;
-  const t8 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
-  let t9;
-  if ($[30] !== props.preventSSRMismatch || $[31] !== resolvedColorMode || $[32] !== uniqueDataId) {
-    t9 = props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
-      type: "application/json",
-      id: `__PRIMER_DATA_${uniqueDataId}__`,
-      dangerouslySetInnerHTML: {
-        __html: JSON.stringify({
-          resolvedServerColorMode: resolvedColorMode
-        })
-      }
-    }) : null;
-    $[30] = props.preventSSRMismatch;
-    $[31] = resolvedColorMode;
-    $[32] = uniqueDataId;
-    $[33] = t9;
-  } else {
-    t9 = $[33];
-  }
-  let t10;
-  if ($[34] !== children || $[35] !== dayScheme || $[36] !== nightScheme || $[37] !== t8 || $[38] !== t9) {
-    t10 = /*#__PURE__*/jsxs("div", {
-      "data-color-mode": t8,
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light',
       "data-light-theme": dayScheme,
       "data-dark-theme": nightScheme,
-      children: [children, t9]
-    });
-    $[34] = children;
-    $[35] = dayScheme;
-    $[36] = nightScheme;
-    $[37] = t8;
-    $[38] = t9;
-    $[39] = t10;
-  } else {
-    t10 = $[39];
-  }
-  let t11;
-  if ($[40] !== contextValue || $[41] !== t10) {
-    t11 = /*#__PURE__*/jsx(ThemeContext.Provider, {
-      value: contextValue,
-      children: t10
-    });
-    $[40] = contextValue;
-    $[41] = t10;
-    $[42] = t11;
-  } else {
-    t11 = $[42];
-  }
-  return t11;
+      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
+        type: "application/json",
+        id: `__PRIMER_DATA_${uniqueDataId}__`,
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            resolvedServerColorMode: resolvedColorMode
+          })
+        }
+      }) : null]
+    })
+  });
 };
+ThemeProvider.displayName = "ThemeProvider";
 function useTheme() {
   return React.useContext(ThemeContext);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "0.0.0-20260324015348",
+  "version": "0.0.0-20260324023447",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/FilteredActionList/FilteredActionList-02db90c6.css

@@ -1,2 +0,0 @@
-.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
-/*# sourceMappingURL=FilteredActionList-02db90c6.css.map */

package/dist/FilteredActionList/FilteredActionList-02db90c6.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAUF,CAJE,gKAEE,gCAAiC,CADjC,uBAEF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDC1BA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDgCA,CAGF,mGACE,wGAKF,CAHE,yGClCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDwCA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-02db90c6.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Header {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  z-index: 1;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\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  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.ActionList {\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: var(--base-size-4);\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: calc(100% - var(--base-size-8));\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}