@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

package/lib/theme.js

@@ -1,4 +1,13 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const theme_preval_1 = require("./theme-preval");
-exports.default = theme_preval_1.theme;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _themePreval = require("./theme-preval");
+
+var _default = _themePreval.theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+exports.default = _default;

package/lib/utils/iterateFocusableElements.js

@@ -1,6 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTabbable = exports.isFocusable = exports.iterateFocusableElements = void 0;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iterateFocusableElements = iterateFocusableElements;
+exports.isFocusable = isFocusable;
+exports.isTabbable = isTabbable;
+
+/**
+ * Options to the focusable elements iterator
+ */
+
 /**
  * Returns an iterator over all of the focusable elements within `container`.
  * Note: If `container` is itself focusable it will be included in the results.
@@ -8,75 +18,86 @@ exports.isTabbable = exports.isFocusable = exports.iterateFocusableElements = vo
  * @param reverse If true, iterate backwards through focusable elements.
  */
 function* iterateFocusableElements(container, options = {}) {
-    const strict = options.strict ?? false;
-    const acceptFn = options.onlyTabbable ?? false ? isTabbable : isFocusable;
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-        acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
-    });
-    let nextNode = null;
-    // Allow the container to participate
-    if (!options.reverse && acceptFn(container, strict)) {
-        yield container;
-    }
-    // If iterating in reverse, continue traversing down into the last child until we reach
-    // a leaf DOM node
-    if (options.reverse) {
-        let lastChild = walker.lastChild();
-        while (lastChild) {
-            nextNode = lastChild;
-            lastChild = walker.lastChild();
-        }
-    }
-    else {
-        nextNode = walker.firstChild();
-    }
-    while (nextNode instanceof HTMLElement) {
-        yield nextNode;
-        nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+  var _options$strict, _options$onlyTabbable;
+
+  const strict = (_options$strict = options.strict) !== null && _options$strict !== void 0 ? _options$strict : false;
+  const acceptFn = ((_options$onlyTabbable = options.onlyTabbable) !== null && _options$onlyTabbable !== void 0 ? _options$onlyTabbable : false) ? isTabbable : isFocusable;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let nextNode = null; // Allow the container to participate
+
+  if (!options.reverse && acceptFn(container, strict)) {
+    yield container;
+  } // If iterating in reverse, continue traversing down into the last child until we reach
+  // a leaf DOM node
+
+
+  if (options.reverse) {
+    let lastChild = walker.lastChild();
+
+    while (lastChild) {
+      nextNode = lastChild;
+      lastChild = walker.lastChild();
     }
-    // Allow the container to participate (in reverse)
-    if (options.reverse && acceptFn(container, strict)) {
-        yield container;
-    }
-    return undefined;
+  } else {
+    nextNode = walker.firstChild();
+  }
+
+  while (nextNode instanceof HTMLElement) {
+    yield nextNode;
+    nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+  } // Allow the container to participate (in reverse)
+
+
+  if (options.reverse && acceptFn(container, strict)) {
+    yield container;
+  }
+
+  return undefined;
 }
-exports.iterateFocusableElements = iterateFocusableElements;
 /**
  * Determines whether the given element is focusable. If `strict` is true, we may
  * perform additional checks that require a reflow (less performant).
  * @param elem
  * @param strict
  */
+
+
 function isFocusable(elem, strict = false) {
-    // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
-    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
-        elem.disabled;
-    const hiddenInert = elem.hidden;
-    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
-        return false;
-    }
-    // Each of the conditions checked below require a reflow, thus are gated by the `strict`
-    // argument. If any are true, the element is not focusable, even if tabindex is set.
-    if (strict) {
-        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-        const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
-        const clientRectsInert = elem.getClientRects().length === 0;
-        if (sizeInert || visibilityInert || clientRectsInert) {
-            return false;
-        }
-    }
-    // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
-    if (elem.getAttribute('tabindex') != null) {
-        return true;
+  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
+  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) && elem.disabled;
+  const hiddenInert = elem.hidden;
+  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+
+  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    return false;
+  } // Each of the conditions checked below require a reflow, thus are gated by the `strict`
+  // argument. If any are true, the element is not focusable, even if tabindex is set.
+
+
+  if (strict) {
+    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+    const clientRectsInert = elem.getClientRects().length === 0;
+
+    if (sizeInert || visibilityInert || clientRectsInert) {
+      return false;
     }
-    // One last way `elem.tabIndex` can be wrong.
-    if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
-        return false;
-    }
-    return elem.tabIndex !== -1;
+  } // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
+
+
+  if (elem.getAttribute('tabindex') != null) {
+    return true;
+  } // One last way `elem.tabIndex` can be wrong.
+
+
+  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+    return false;
+  }
+
+  return elem.tabIndex !== -1;
 }
-exports.isFocusable = isFocusable;
 /**
  * Determines whether the given element is tabbable. If `strict` is true, we may
  * perform additional checks that require a reflow (less performant). This check
@@ -85,7 +106,8 @@ exports.isFocusable = isFocusable;
  * @param elem
  * @param strict
  */
+
+
 function isTabbable(elem, strict = false) {
-    return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
-}
-exports.isTabbable = isTabbable;
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}

package/lib/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_high_contrast" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
@@ -541,4 +541,5 @@ interface BehavesAsComponent {
 }
 export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
 export declare function checkExports(path: string, exports: Record<any, any>): void;
+export declare function checkStoriesForAxeViolations(name: string): void;
 export {};

package/lib/utils/testing.js

@@ -19,6 +19,7 @@ exports.loadCSS = loadCSS;
 exports.unloadCSS = unloadCSS;
 exports.behavesAsComponent = behavesAsComponent;
 exports.checkExports = checkExports;
+exports.checkStoriesForAxeViolations = checkStoriesForAxeViolations;
 exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -31,6 +32,10 @@ var _enzyme = _interopRequireDefault(require("enzyme"));
 
 var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
 
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
 var _ = require("..");
 
 var _theme = _interopRequireDefault(require("../theme"));
@@ -270,4 +275,28 @@ function checkExports(path, exports) {
 
     expect(mod).toSetExports(exports);
   });
+}
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+  });
 }

package/lib/utils/theme.js

@@ -1,54 +1,68 @@
 "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);
+  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;
     }
-    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;
-    }, {});
+
+    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,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";

package/lib/utils/types/ComponentProps.js

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

package/lib/utils/types/Flatten.js

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

package/lib/utils/types/KeyPaths.js

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

package/lib/utils/types/MandateProps.js

@@ -1,16 +1 @@
-"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 });
+"use strict";

package/lib/utils/types/Merge.js

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

package/lib/utils/types/index.js

@@ -1,17 +1,70 @@
 "use strict";
-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);
+
+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];
+    }
+  });
+});

package/lib/utils/uniqueId.js

@@ -1,9 +1,12 @@
 "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++}`;
-}
-exports.uniqueId = uniqueId;
+  return `__primer_id_${idSeed++}`;
+}

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

@@ -1,13 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.useForceUpdate = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // 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({}), []);
+  const [, rerender] = _react.default.useState({});
+
+  return _react.default.useCallback(() => rerender({}), []);
 };
-exports.useForceUpdate = useForceUpdate;
+
+exports.useForceUpdate = useForceUpdate;

package/lib/utils/useIsomorphicLayoutEffect.js

@@ -1,9 +1,12 @@
 "use strict";
-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;
+
+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;

package/lib/utils/userAgent.js

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

package/lib-esm/ActionList/Item.js

@@ -93,7 +93,7 @@ export const TextContainer = styled.span.withConfig({
 const BaseVisualContainer = styled.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
   componentId: "jqpvy8-5"
@@ -104,7 +104,7 @@ const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
 const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
   componentId: "jqpvy8-6"
-})(["flex-shrink:0;display:flex;flex-direction:column;justify-content:center;"]);
+})(["display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
   componentId: "jqpvy8-7"
@@ -119,7 +119,7 @@ const DescriptionContainer = styled.span.withConfig({
 const MultiSelectIcon = styled.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
   selected

package/lib-esm/ActionList2/Item.js

@@ -51,7 +51,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   variant = 'default',
   disabled = false,
   selected = undefined,
-  onSelect = () => null,
+  onSelect,
   sx: sxProp = {},
   id,
   _PrivateItemWrapper,
@@ -133,10 +133,12 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     }
   };
   const clickHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
   }, [onSelect, disabled]);
   const keyPressHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {

package/lib-esm/ActionList2/List.js

@@ -22,8 +22,7 @@ export const List = /*#__PURE__*/React.forwardRef(({
     paddingY: variant === 'inset' ? 2 : 0
   };
   return /*#__PURE__*/React.createElement(ListBox, _extends({
-    sx: merge(styles, sxProp),
-    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
+    sx: merge(styles, sxProp)
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {