@primer/components 0.0.0-2021102224222 → 0.0.0-202110343939

package/lib/ActionList/Header.js

@@ -45,7 +45,7 @@ function Header({
   return /*#__PURE__*/_react.default.createElement(StyledHeader, _extends({
     role: "heading",
     variant: variant
-  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, "auxiliaryText"));
 }
 
 Header.displayName = "Header";

package/lib/ActionList/Item.d.ts

@@ -28,19 +28,13 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
-     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
-     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
-    /**
-     * Icon or text positioned after `Item` text.
-     */
-    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib/ActionList/Item.js

@@ -187,7 +187,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
-    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -279,10 +278,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
-    variant: variant,
-    disabled: disabled
-  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));

package/lib/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -26,6 +26,8 @@ interface AnchoredOverlayPropsWithoutAnchor {
      */
     anchorRef: React.RefObject<HTMLElement>;
 }
+export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
+export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
 export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
 interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
     /**
@@ -35,11 +37,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
     /**
      * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
      */
-    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
+    onOpen?: (gesture: OverlayOpenGesture) => unknown;
     /**
      * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
      */
-    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
+    onClose?: (gesture: OverlayCloseGesture) => unknown;
     /**
      * Props to be spread on the internal `Overlay` component.
      */

package/lib/AnchoredOverlay/AnchoredOverlay.js

@@ -11,8 +11,6 @@ var _Overlay = _interopRequireDefault(require("../Overlay"));
 
 var _useFocusTrap = require("../hooks/useFocusTrap");
 
-var _useFocusZone = require("../hooks/useFocusZone");
-
 var _hooks = require("../hooks");
 
 var _ssr = require("@react-aria/ssr");
@@ -81,12 +79,12 @@ const AnchoredOverlay = ({
     if (!open && overlayRef.current) {
       updateOverlayRef(null);
     }
-  }, [open, overlayRef, updateOverlayRef]);
-  (0, _useFocusZone.useFocusZone)({
-    containerRef: overlayRef,
-    disabled: !open || !position,
-    ...focusZoneSettings
-  });
+  }, [open, overlayRef, updateOverlayRef]); // useFocusZone({
+  //   containerRef: overlayRef,
+  //   disabled: !open || !position,
+  //   ...focusZoneSettings
+  // })
+
   (0, _useFocusTrap.useFocusTrap)({
     containerRef: overlayRef,
     disabled: !open || !position,

package/lib/Autocomplete/Autocomplete.d.ts

@@ -12,12 +12,14 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<{
     id?: string | undefined;
 }> & {
-    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & {
+    } & ({} | {
+        children?: React.ReactNode;
+    })) & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -74,7 +76,7 @@ declare const _default: React.FC<{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -89,7 +91,7 @@ declare const _default: React.FC<{
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: boolean | "true" | "false" | undefined;
         'aria-flowto'?: string | undefined;
@@ -288,9 +290,9 @@ declare const _default: React.FC<{
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         disabled?: boolean | undefined;
-        variant?: "small" | "large" | undefined;
+        variant?: "large" | "small" | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
     } & {

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -4,12 +4,14 @@ import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;
 };
-declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & {
+} & ({} | {
+    children?: React.ReactNode;
+})) & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -66,7 +68,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -81,7 +83,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -280,9 +282,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     block?: boolean | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     disabled?: boolean | undefined;
-    variant?: "small" | "large" | undefined;
+    variant?: "large" | "small" | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {

package/lib/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { SxProp } from '../sx';
 import { ComponentProps } from '../utils/types';
 declare const Button: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     color?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -55,7 +55,7 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -70,7 +70,7 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -268,7 +268,6 @@ 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;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -276,7 +275,8 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonBase.d.ts

@@ -6,7 +6,7 @@ export declare const buttonSystemProps: import("styled-system").styleFn;
 export declare type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps;
 declare const ButtonBase: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export declare type ButtonBaseProps = ComponentProps<typeof ButtonBase>;
 export default ButtonBase;

package/lib/Button/ButtonClose.d.ts

@@ -74,7 +74,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -89,7 +89,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -306,7 +306,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/lib/Button/ButtonDanger.d.ts

@@ -3,7 +3,7 @@ import { SxProp } from '../sx';
 import { ComponentProps } from '../utils/types';
 declare const ButtonDanger: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     color?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -55,7 +55,7 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -70,7 +70,7 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -268,7 +268,6 @@ 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;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -276,7 +275,8 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonInvisible.d.ts

@@ -3,7 +3,7 @@ import { SxProp } from '../sx';
 import { ComponentProps } from '../utils/types';
 declare const ButtonInvisible: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     color?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -55,7 +55,7 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -70,7 +70,7 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -268,7 +268,6 @@ 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;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -276,7 +275,8 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonOutline.d.ts

@@ -3,7 +3,7 @@ import { SxProp } from '../sx';
 import { ComponentProps } from '../utils/types';
 declare const ButtonOutline: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     color?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -55,7 +55,7 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -70,7 +70,7 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -268,7 +268,6 @@ 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;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -276,7 +275,8 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonPrimary.d.ts

@@ -3,7 +3,7 @@ import { SxProp } from '../sx';
 import { ComponentProps } from '../utils/types';
 export declare const ButtonPrimary: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     color?: string | undefined;
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -55,7 +55,7 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -70,7 +70,7 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -268,7 +268,6 @@ 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;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -276,7 +275,8 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/CircleBadge.d.ts

@@ -1,24 +1,25 @@
 /// <reference types="hoist-non-react-statics" />
 /// <reference types="react" />
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const CircleBadge: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
     size?: number | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 declare const CircleBadgeIcon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
     icon: import("react").ElementType<any>;
-} & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, import("./constants").SystemCommonProps & SxProp, never>;
+} & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SystemCommonProps & SxProp, never>;
 export declare type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
 export declare type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
 declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
     inline?: boolean | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
+    variant?: "large" | "medium" | "small" | undefined;
     size?: number | undefined;
-} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+} & SystemCommonProps & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
     Icon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
         icon: import("react").ElementType<any>;
-    } & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, import("./constants").SystemCommonProps & SxProp, never>;
+    } & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SystemCommonProps & SxProp, never>;
 };
 export default _default;

package/lib/CircleBadge.js

@@ -37,7 +37,7 @@ const sizeStyles = ({
 const CircleBadge = _styledComponents.default.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), sizeStyles, _sx.default);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), _constants.COMMON, sizeStyles, _sx.default);
 
 const CircleBadgeIcon = (0, _styledComponents.default)(_StyledOcticon.default).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",

package/lib/CircleOcticon.d.ts

@@ -13,7 +13,6 @@ declare namespace CircleOcticon {
     var defaultProps: {
         size: number;
         lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignContent?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignItems?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignSelf?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -89,6 +88,7 @@ declare namespace CircleOcticon {
         zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         background?: import("styled-system").ResponsiveValue<import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderBottom?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderLeft?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeft<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -151,7 +151,7 @@ declare namespace CircleOcticon {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -166,7 +166,7 @@ declare namespace CircleOcticon {
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: boolean | "true" | "false" | undefined;
         'aria-flowto'?: string | undefined;
@@ -384,7 +384,7 @@ declare namespace CircleOcticon {
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         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;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         theme?: any;
     };
 }

package/lib/DatePicker/DatePicker.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { DatePickerConfiguration, Selection } from './useDatePicker';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps extends DatePickerConfiguration {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    initialValue?: 'today' | Date | string | null;
+    iconOnly?: boolean;
+    placeholder?: string;
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open?: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: OpenGesture) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: CloseGesture) => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    value?: Selection;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};