@primer/components 32.0.2-rc.859381a1 → 32.1.1-rc.b4502a34

package/lib/stories/Checkbox.stories.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Indeterminate = exports.Uncontrolled = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _2 = require("..");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: 'Forms/Checkbox',
+  component: _2.Checkbox,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_2.BaseStyles, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const StyledLabel = _styledComponents.default.label.withConfig({
+  displayName: "Checkboxstories__StyledLabel",
+  componentId: "sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], _constants.COMMON);
+
+const StyledSubLabel = (0, _styledComponents.default)(_2.Text).withConfig({
+  displayName: "Checkboxstories__StyledSubLabel",
+  componentId: "sdupvr-1"
+})(["color:", ";font-size:13px;", ""], (0, _constants.get)('colors.fg.muted'), _constants.COMMON);
+
+const Default = args => {
+  const [isChecked, setChecked] = (0, _react.useState)(false);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+    (0, _addonActions.action)('Change event triggered');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "controlled-checkbox",
+    onChange: handleChange,
+    checked: isChecked
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "always-checked-checkbox",
+    checked: true
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "always-checked-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always checked"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "always-unchecked-checkbox",
+    checked: false
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "always-unchecked-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always unchecked"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, {
+    id: "disabled-checkbox",
+    disabled: true,
+    checked: false
+  }), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "disabled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Inactive"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "disabled=\"true\""))));
+};
+
+exports.Default = Default;
+
+const Uncontrolled = args => {
+  const checkboxRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true;
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: "uncontrolled-checkbox",
+    ref: checkboxRef
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "uncontrolled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Uncontrolled checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "Checked by default")));
+};
+
+exports.Uncontrolled = Uncontrolled;
+Uncontrolled.displayName = "Uncontrolled";
+
+const Indeterminate = args => {
+  const [checkboxes, setCheckboxes] = (0, _react.useState)([false, false, false, false]);
+
+  const handleChange = (_, index) => {
+    const newCheckboxes = [...checkboxes];
+    newCheckboxes[index] = !checkboxes[index];
+    setCheckboxes(newCheckboxes);
+  };
+
+  const handleIndeterminateChange = () => {
+    if (checkboxes.every(checkbox => checkbox)) {
+      return setCheckboxes(checkboxes.map(() => false));
+    }
+
+    const newCheckboxes = checkboxes.map(() => true);
+    setCheckboxes(newCheckboxes);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, {
+    id: "indeterminate-checkbox",
+    checked: checkboxes.every(Boolean),
+    onChange: handleIndeterminateChange,
+    indeterminate: !checkboxes.every(Boolean)
+  }), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/_react.default.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/_react.default.createElement(_2.Box, {
+    key: `sub-checkbox-${index}`,
+    as: "form",
+    sx: {
+      p: 1,
+      pl: 7,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Checkbox, _extends({
+    id: `sub-checkbox-${index}`,
+    checked: checkboxes[index],
+    onChange: event => handleChange(event, index)
+  }, args)), /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: `sub-checkbox-${index}`
+  }, /*#__PURE__*/_react.default.createElement(_2.Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Checkbox ", index + 1)))));
+};
+
+exports.Indeterminate = Indeterminate;

package/lib/utils/testing.d.ts

@@ -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-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, {

package/lib-esm/ActionList2/Selection.js

@@ -37,7 +37,9 @@ export const Selection = ({
     sx: {
       rect: {
         fill: selected ? 'accent.fg' : 'canvas.default',
-        stroke: selected ? 'accent.fg' : 'border.default'
+        stroke: selected ? 'accent.fg' : 'border.default',
+        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+
       },
       path: {
         fill: 'fg.onEmphasis',

package/lib-esm/Autocomplete/Autocomplete.d.ts

@@ -290,6 +290,7 @@ declare const _default: React.FC<{
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
+        css?: import("@emotion/core").InterpolationWithTheme<any>;
         disabled?: boolean | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -282,6 +282,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;

package/lib-esm/Button/Button.d.ts

@@ -268,6 +268,7 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib-esm/Button/ButtonClose.d.ts

@@ -264,6 +264,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;
     formAction?: string | undefined;
@@ -273,6 +274,6 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     formTarget?: string | undefined;
 } & {
     theme?: any;
-}, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
+}, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
 export declare type ButtonCloseProps = ComponentProps<typeof ButtonClose>;
 export default ButtonClose;

package/lib-esm/Button/ButtonDanger.d.ts

@@ -268,6 +268,7 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib-esm/Button/ButtonInvisible.d.ts

@@ -268,6 +268,7 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib-esm/Button/ButtonOutline.d.ts

@@ -268,6 +268,7 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib-esm/Button/ButtonPrimary.d.ts

@@ -268,6 +268,7 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     disabled?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib-esm/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the checkbox validation state
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native checkbox component
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib-esm/Checkbox.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import styled from 'styled-components';
+import { useProvidedRefOrCreate } from './hooks';
+import React, { useLayoutEffect } from 'react';
+import sx from './sx';
+const StyledCheckbox = styled.input.withConfig({
+  displayName: "Checkbox__StyledCheckbox",
+  componentId: "i51804-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
+/**
+ * An accessible, native checkbox component
+ */
+
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  checked,
+  indeterminate,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  ...rest
+}, ref) => {
+  const checkboxRef = useProvidedRefOrCreate(ref);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
+    type: "checkbox",
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    ref: ref || checkboxRef,
+    checked: indeterminate ? false : checked,
+    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
+    sx: sxProp,
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
+  }, rest));
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;

package/lib-esm/CircleOcticon.d.ts

@@ -383,6 +383,7 @@ declare namespace CircleOcticon {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        css?: import("@emotion/core").InterpolationWithTheme<any>;
         borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         theme?: any;

package/lib-esm/Dialog.d.ts

@@ -385,6 +385,7 @@ declare namespace DialogHeader {
         onAnimationIterationCapture?: React.Validator<React.AnimationEventHandler<HTMLDivElement> | null | undefined> | undefined;
         onTransitionEnd?: React.Validator<React.TransitionEventHandler<HTMLDivElement> | null | undefined> | undefined;
         onTransitionEndCapture?: React.Validator<React.TransitionEventHandler<HTMLDivElement> | null | undefined> | undefined;
+        css?: React.Validator<import("@emotion/core").InterpolationWithTheme<any>> | undefined;
         borderX?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderY?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         theme?: React.Validator<any> | undefined;
@@ -397,9 +398,9 @@ declare type InternalDialogProps = {
     initialFocusRef?: React.RefObject<HTMLElement>;
     returnFocusRef?: React.RefObject<HTMLElement>;
 } & ComponentProps<typeof DialogBase>;
-declare const Dialog: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>>;
+declare const Dialog: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>>;
 export declare type DialogProps = ComponentProps<typeof Dialog>;
-declare const _default: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>> & {
     Header: typeof DialogHeader;
 };
 export default _default;