@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/package-lock.json

@@ -9,8 +9,8 @@
       "version": "31.1.0",
       "license": "MIT",
       "dependencies": {
-        "@primer/octicons-react": "^13.0.0",
-        "@primer/primitives": "5.1.0",
+        "@primer/octicons-react": "^16.1.0",
+        "@primer/primitives": "6.1.0",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
         "@styled-system/css": "5.1.5",
@@ -90,6 +90,8 @@
         "lodash.isobject": "3.0.2",
         "prettier": "2.3.2",
         "react": "17.0.2",
+        "react-dnd": "14.0.4",
+        "react-dnd-html5-backend": "14.0.2",
         "react-dom": "17.0.2",
         "react-test-renderer": "17.0.2",
         "rollup": "2.56.3",
@@ -7548,9 +7550,9 @@
       }
     },
     "node_modules/@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "engines": {
         "node": ">=8"
       },
@@ -7559,9 +7561,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -7598,6 +7600,24 @@
         "react": "^16.8.0 || ^17.0.0-rc.1"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -17234,6 +17254,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -31528,6 +31559,45 @@
         "node": ">= 8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "node_modules/react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -31956,6 +32026,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",
@@ -43266,15 +43345,15 @@
       "dev": true
     },
     "@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -43302,6 +43381,24 @@
         "@babel/runtime": "^7.6.2"
       }
     },
+    "@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -50661,6 +50758,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -61611,6 +61719,28 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "requires": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -61956,6 +62086,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.c7f73427",
+  "version": "31.2.1-rc.0e01900c",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,7 +20,8 @@
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "release": "npm run build && changeset publish",
-    "size": "size-limit"
+    "size": "size-limit",
+    "typecheck": "npx tsc --project tsconfig.json"
   },
   "repository": "primer/react",
   "keywords": [
@@ -43,8 +44,8 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/octicons-react": "^16.1.0",
+    "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -124,6 +125,8 @@
     "lodash.isobject": "3.0.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
+    "react-dnd": "14.0.4",
+    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rollup": "2.56.3",

package/script/build

@@ -14,7 +14,7 @@ npx cross-env NODE_ENV=production rollup -c
 npx cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions ".js,.ts,.jsx,.tsx"
 npx babel src --out-dir lib-esm --extensions ".js,.ts,.jsx,.tsx"
 
-# Type check
+# Build type declarations
 npx tsc --project tsconfig.build.json
 
 # Copy type declarations

package/src/ActionList/Item.tsx

@@ -295,6 +295,9 @@ const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled
   height: 20px;
   width: ${get('space.3')};
   margin-right: ${get('space.2')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `
 
 const ColoredVisualContainer = styled(BaseVisualContainer)`
@@ -333,8 +336,16 @@ const DescriptionContainer = styled.span`
   flex-basis: var(--description-container-flex-basis);
 `
 
-const MultiSelectInput = styled.input`
-  pointer-events: none;
+const MultiSelectIcon = styled.svg<{selected?: boolean}>`
+  rect {
+    fill: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.canvas.default'))};
+    stroke: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.border.default'))};
+  }
+  path {
+    fill: ${get('colors.fg.onEmphasis')};
+    boxshadow: ${get('shadow.small')};
+    opacity: ${({selected}) => (selected ? 1 : 0)};
+  }
 `
 
 /**
@@ -372,11 +383,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
         return
       }
       onKeyPress?.(event)
-      const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox'
-      if (isCheckbox && event.key === ' ') {
-        // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
-        return
-      }
 
       if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
         onAction?.(itemProps, event)
@@ -425,19 +431,26 @@ export const Item = React.forwardRef((itemProps, ref) => {
         <BaseVisualContainer>
           {selectionVariant === 'multiple' ? (
             <>
-              {/*
-               * readOnly is required because we are doing a one-way bind to `checked`.
-               * aria-readonly="false" tells screen that they can still interact with the checkbox
+              {/**
+               * we use a svg instead of an input because there should not
+               * be an interactive element inside an option
+               * svg copied from primer/css
                */}
-              <MultiSelectInput
-                disabled={disabled}
-                tabIndex={-1}
-                type="checkbox"
-                checked={selected}
-                aria-label={text}
-                readOnly
-                aria-readonly="false"
-              />
+              <MultiSelectIcon
+                selected={selected}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+                <path
+                  fillRule="evenodd"
+                  strokeWidth="0"
+                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+                />
+              </MultiSelectIcon>
             </>
           ) : (
             selected && <CheckIcon fill={theme?.colors.fg.default} />

package/src/ActionList2/Description.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import Truncate from '../Truncate'
+import {Slot, ItemContext} from './Item'
+
+export type DescriptionProps = {
+  /**
+   * Secondary text style variations.
+   *
+   * - `"inline"` - Secondary text is positioned beside primary text.
+   * - `"block"` - Secondary text is positioned below primary text.
+   */
+  variant?: 'inline' | 'block'
+} & SxProp
+
+export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+  const styles = {
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  }
+
+  return (
+    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
+        variant === 'block' ? (
+          <Box
+            as="span"
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            id={blockDescriptionId}
+          >
+            {props.children}
+          </Box>
+        ) : (
+          <Truncate
+            id={inlineDescriptionId}
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            title={props.children as string}
+            inline={true}
+            maxWidth="100%"
+          >
+            {props.children}
+          </Truncate>
+        )
+      }
+    </Slot>
+  )
+}

package/src/ActionList2/Divider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Box from '../Box'
+import {get} from '../constants'
+import {Theme} from '../ThemeProvider'
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export function Divider(): JSX.Element {
+  return (
+    <Box
+      as="li"
+      role="separator"
+      sx={{
+        height: 1,
+        backgroundColor: 'actionListItem.inlineDivider',
+        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
+        marginBottom: 2,
+        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+      }}
+      data-component="ActionList.Divider"
+    />
+  )
+}

package/src/ActionList2/Group.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {Header, HeaderProps} from './Header'
+import {ListProps} from './List'
+
+export type GroupProps = HeaderProps &
+  SxProp & {
+    selectionVariant?: ListProps['selectionVariant'] | false
+  }
+
+type ContextProps = Pick<GroupProps, 'selectionVariant'>
+export const GroupContext = React.createContext<ContextProps>({})
+
+export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+  return (
+    <Box
+      as="li"
+      sx={{
+        '&:not(:first-child)': {marginTop: 2},
+        listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
+        ...sx
+      }}
+      {...props}
+    >
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      <GroupContext.Provider value={{selectionVariant}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {props.children}
+        </Box>
+      </GroupContext.Provider>
+    </Box>
+  )
+}

package/src/ActionList2/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {ListContext} from './List'
+
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export type HeaderProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+} & SxProp
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  }
+
+  return (
+    <Box sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}