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

package/lib/utils/testing.jsx

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkExports = exports.behavesAsComponent = exports.unloadCSS = exports.loadCSS = exports.getClasses = exports.getClassName = exports.getProps = exports.getComputedStyles = exports.renderStyles = exports.percent = exports.px = exports.rendersClass = exports.renderClasses = exports.renderRoot = exports.render = exports.mount = exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("util");
+const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
+const enzyme_1 = __importDefault(require("enzyme"));
+const enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
+const __1 = require("..");
+const theme_1 = __importDefault(require("../theme"));
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const readFile = util_1.promisify(require('fs').readFile);
+exports.COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
+enzyme_1.default.configure({ adapter: new enzyme_adapter_react_17_1.default() });
+function mount(component) {
+    return enzyme_1.default.mount(component);
+}
+exports.mount = mount;
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * into its intermediate object representation with 'type',
+ * 'props', and 'children' keys
+ *
+ * The returned object can be matched with expect().toEqual(), e.g.
+ *
+ * ```js
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
+ * ```
+ */
+function render(component, theme = theme_1.default) {
+    return react_test_renderer_1.default
+        .create(<__1.ThemeProvider theme={theme}>{component}</__1.ThemeProvider>)
+        .toJSON();
+}
+exports.render = render;
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+function renderRoot(component) {
+    return react_test_renderer_1.default.create(component).root;
+}
+exports.renderRoot = renderRoot;
+/**
+ * Get the HTML class names rendered by the component instance
+ * as an array.
+ *
+ * ```js
+ * expect(renderClasses(<div className='a b' />))
+ *   .toEqual(['a', 'b'])
+ * ```
+ */
+function renderClasses(component) {
+    const { props: { className } } = render(component);
+    return className ? className.trim().split(' ') : [];
+}
+exports.renderClasses = renderClasses;
+/**
+ * Returns true if a node renders with a single class.
+ */
+function rendersClass(node, klass) {
+    return renderClasses(node).includes(klass);
+}
+exports.rendersClass = rendersClass;
+function px(value) {
+    return typeof value === 'number' ? `${value}px` : value;
+}
+exports.px = px;
+function percent(value) {
+    return typeof value === 'number' ? `${value}%` : value;
+}
+exports.percent = percent;
+function renderStyles(node) {
+    const { props: { className } } = render(node);
+    return getComputedStyles(className);
+}
+exports.renderStyles = renderStyles;
+function getComputedStyles(className) {
+    const div = document.createElement('div');
+    div.className = className;
+    const computed = {};
+    for (const sheet of document.styleSheets) {
+        // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
+        for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSMediaRule) {
+                readMedia(rule);
+            }
+            else if (rule instanceof CSSStyleRule) {
+                readRule(rule, computed);
+            }
+            else {
+                // console.warn('rule.type =', rule.type)
+            }
+        }
+    }
+    return computed;
+    function matchesSafe(node, selector) {
+        if (!selector) {
+            return false;
+        }
+        try {
+            return node.matches(selector);
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    function readRule(rule, dest) {
+        if (matchesSafe(div, rule.selectorText)) {
+            const { style } = rule;
+            for (let i = 0; i < style.length; i++) {
+                const prop = style[i];
+                dest[prop] = style.getPropertyValue(prop);
+            }
+        }
+        else {
+            // console.warn('no match:', rule.selectorText)
+        }
+    }
+    function readMedia(mediaRule) {
+        const key = `@media ${mediaRule.media[0]}`;
+        // const dest = computed[key] || (computed[key] = {})
+        const dest = {};
+        for (const rule of mediaRule.cssRules) {
+            if (rule instanceof CSSStyleRule) {
+                readRule(rule, dest);
+            }
+        }
+        // Don't add media rule to computed styles
+        // if no styles were actually applied
+        if (Object.keys(dest).length > 0) {
+            computed[key] = dest;
+        }
+    }
+}
+exports.getComputedStyles = getComputedStyles;
+/**
+ * This provides a layer of compatibility between the render() function from
+ * react-test-renderer and Enzyme's mount()
+ */
+function getProps(node) {
+    return typeof node.props === 'function' ? node.props() : node.props;
+}
+exports.getProps = getProps;
+function getClassName(node) {
+    return getProps(node).className;
+}
+exports.getClassName = getClassName;
+function getClasses(node) {
+    const className = getClassName(node);
+    return className ? className.trim().split(/ +/) : [];
+}
+exports.getClasses = getClasses;
+async function loadCSS(path) {
+    const css = await readFile(require.resolve(path), 'utf8');
+    const style = document.createElement('style');
+    style.setAttribute('data-path', path);
+    style.textContent = css;
+    document.head.appendChild(style);
+    return style;
+}
+exports.loadCSS = loadCSS;
+function unloadCSS(path) {
+    const style = document.querySelector(`style[data-path="${path}"]`);
+    if (style) {
+        style.remove();
+        return true;
+    }
+}
+exports.unloadCSS = unloadCSS;
+function behavesAsComponent({ Component, toRender, options }) {
+    options = options || {};
+    const getElement = () => (toRender ? toRender() : <Component />);
+    if (!options.skipSx) {
+        it('implements sx prop behavior', () => {
+            expect(getElement()).toImplementSxBehavior();
+        });
+    }
+    if (!options.skipAs) {
+        it('respects the as prop', () => {
+            const As = react_1.default.forwardRef((_props, ref) => <div className="as-component" ref={ref}/>);
+            const elem = react_1.default.cloneElement(getElement(), { as: As });
+            expect(render(elem)).toEqual(render(<As />));
+        });
+    }
+    it('sets a valid displayName', () => {
+        expect(Component.displayName).toMatch(exports.COMPONENT_DISPLAY_NAME_REGEX);
+    });
+    it('renders consistently', () => {
+        expect(render(getElement())).toMatchSnapshot();
+    });
+}
+exports.behavesAsComponent = behavesAsComponent;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function checkExports(path, exports) {
+    it('has declared exports', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const mod = require(`../${path}`);
+        expect(mod).toSetExports(exports);
+    });
+}
+exports.checkExports = checkExports;

package/lib/utils/theme.js

@@ -1,68 +1,54 @@
 "use strict";
-
 // Utility functions used in theme-preval.js
 // This file needs to be a JavaScript file using CommonJS to be compatiable with preval
 const isEmpty = require('lodash.isempty');
-
 const isObject = require('lodash.isobject');
-
 const chroma = require('chroma-js');
-
 function fontStack(fonts) {
-  return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', ');
-} // The following functions are a temporary measure for splitting shadow values out from the colors object.
+    return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ');
+}
+// The following functions are a temporary measure for splitting shadow values out from the colors object.
 // Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation
 // will not be needed.
-
-
 function isShadowValue(value) {
-  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+    return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
 }
-
 function isColorValue(value) {
-  return chroma.valid(value);
+    return chroma.valid(value);
 }
-
 function filterObject(obj, predicate) {
-  if (Array.isArray(obj)) {
-    return obj.filter(predicate);
-  }
-
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    if (isObject(value)) {
-      const result = filterObject(value, predicate); // Don't include empty objects or arrays
-
-      if (!isEmpty(result)) {
-        acc[key] = result;
-      }
-    } else if (predicate(value)) {
-      acc[key] = value;
+    if (Array.isArray(obj)) {
+        return obj.filter(predicate);
     }
-
-    return acc;
-  }, {});
+    return Object.entries(obj).reduce((acc, [key, value]) => {
+        if (isObject(value)) {
+            const result = filterObject(value, predicate);
+            // Don't include empty objects or arrays
+            if (!isEmpty(result)) {
+                acc[key] = result;
+            }
+        }
+        else if (predicate(value)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
 }
-
 function partitionColors(colors) {
-  return {
-    colors: filterObject(colors, value => isColorValue(value)),
-    shadows: filterObject(colors, value => isShadowValue(value))
-  };
+    return {
+        colors: filterObject(colors, value => isColorValue(value)),
+        shadows: filterObject(colors, value => isShadowValue(value))
+    };
 }
-
 function omitScale(obj) {
-  const {
-    scale,
-    ...rest
-  } = obj;
-  return rest;
+    const { scale, ...rest } = obj;
+    return rest;
 }
-
 module.exports = {
-  fontStack,
-  isShadowValue,
-  isColorValue,
-  filterObject,
-  partitionColors,
-  omitScale
-};
+    fontStack,
+    isShadowValue,
+    isColorValue,
+    filterObject,
+    partitionColors,
+    omitScale
+};

package/lib/utils/types/AriaRole.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/ComponentProps.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/Flatten.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/KeyPaths.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/MandateProps.js

@@ -1 +1,16 @@
-"use strict";
+"use strict";
+/*
+Used to convert a list of properties in a type from optional to required
+
+For example, we could make a new type from `Datum`
+where 'id' and 'label' required:
+  type Datum = {
+    description?: string
+    id?: string
+    label?: string
+    value: string
+  }
+
+  type DatumWithRequiredIdAndLabel = MandateProps<Datum, 'id' | 'label'>
+*/
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/Merge.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/index.js

@@ -1,70 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _AriaRole = require("./AriaRole");
-
-Object.keys(_AriaRole).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _AriaRole[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _AriaRole[key];
-    }
-  });
-});
-
-var _ComponentProps = require("./ComponentProps");
-
-Object.keys(_ComponentProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ComponentProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ComponentProps[key];
-    }
-  });
-});
-
-var _Flatten = require("./Flatten");
-
-Object.keys(_Flatten).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Flatten[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Flatten[key];
-    }
-  });
-});
-
-var _Merge = require("./Merge");
-
-Object.keys(_Merge).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Merge[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Merge[key];
-    }
-  });
-});
-
-var _MandateProps = require("./MandateProps");
-
-Object.keys(_MandateProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _MandateProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _MandateProps[key];
-    }
-  });
-});
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AriaRole"), exports);
+__exportStar(require("./ComponentProps"), exports);
+__exportStar(require("./Flatten"), exports);
+__exportStar(require("./Merge"), exports);
+__exportStar(require("./MandateProps"), exports);

package/lib/utils/uniqueId.js

@@ -1,12 +1,9 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uniqueId = uniqueId;
 // Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uniqueId = void 0;
 let idSeed = 10000;
-
 function uniqueId() {
-  return `__primer_id_${idSeed++}`;
-}
+    return `__primer_id_${idSeed++}`;
+}
+exports.uniqueId = uniqueId;

package/lib/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib/utils/use-force-update.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForceUpdate = void 0;
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+const react_1 = __importDefault(require("react"));
+const useForceUpdate = () => {
+    const [, rerender] = react_1.default.useState({});
+    return react_1.default.useCallback(() => rerender({}), []);
+};
+exports.useForceUpdate = useForceUpdate;

package/lib/utils/useIsomorphicLayoutEffect.js

@@ -1,12 +1,9 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
-var _default = useIsomorphicLayoutEffect;
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined'
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;
+exports.default = useIsomorphicLayoutEffect;

package/lib/utils/userAgent.js

@@ -1,15 +1,11 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isMacOS = isMacOS;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMacOS = void 0;
 let isMac = undefined;
-
 function isMacOS() {
-  if (isMac === undefined) {
-    isMac = /^mac/i.test(window.navigator.platform);
-  }
-
-  return isMac;
-}
+    if (isMac === undefined) {
+        isMac = /^mac/i.test(window.navigator.platform);
+    }
+    return isMac;
+}
+exports.isMacOS = isMacOS;

package/lib-esm/ActionList/Item.js

@@ -113,7 +113,7 @@ export const TextContainer = styled.span.withConfig({
 const BaseVisualContainer = styled.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";"], get('space.3'), get('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
   componentId: "jqpvy8-5"
@@ -136,10 +136,16 @@ const DescriptionContainer = styled.span.withConfig({
   displayName: "Item__DescriptionContainer",
   componentId: "jqpvy8-8"
 })(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
-const MultiSelectInput = styled.input.withConfig({
-  displayName: "Item__MultiSelectInput",
+const MultiSelectIcon = styled.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["pointer-events:none;"]);
+})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.border.default'), get('colors.fg.onEmphasis'), get('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
@@ -174,12 +180,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     }
 
     onKeyPress === null || onKeyPress === void 0 ? void 0 : 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 === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
@@ -217,15 +217,24 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     onClick: clickHandler,
     hoverBackground: disabled ? 'inherit' : hoverBackground,
     focusBackground: disabled ? 'inherit' : focusBackground
-  }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectInput, {
-    disabled: disabled,
-    tabIndex: -1,
-    type: "checkbox",
-    checked: selected,
-    "aria-label": text,
-    readOnly: true,
-    "aria-readonly": "false"
-  })) : selected && /*#__PURE__*/React.createElement(CheckIcon, {
+  }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
+    selected: selected,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("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"
+  }))) : selected && /*#__PURE__*/React.createElement(CheckIcon, {
     fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
   })), LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisualContainer, {
     variant: variant,

package/lib-esm/ActionList2/Description.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SxProp } from '../sx';
+export declare 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 declare const Description: React.FC<DescriptionProps>;

package/lib-esm/ActionList2/Description.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '../Box';
+import { merge } from '../sx';
+import Truncate from '../Truncate';
+import { Slot } from './Item';
+export const Description = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
+  const styles = {
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  };
+  return /*#__PURE__*/React.createElement(Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId,
+    disabled
+  }) => variant === 'block' ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    sx: merge({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/React.createElement(Truncate, {
+    id: inlineDescriptionId,
+    sx: merge({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+Description.displayName = "Description";

package/lib-esm/ActionList2/Divider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;