@primer/components 0.0.0-202110343939 → 0.0.0-20211040245

package/lib-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -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;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +276,7 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "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("@styled-system/css").SystemStyleObject | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/lib-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -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;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +276,7 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -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;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +276,7 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -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;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +276,7 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
@@ -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;
+    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +276,7 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | 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-esm/CircleBadge.d.ts

@@ -5,7 +5,7 @@ import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const CircleBadge: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
-    variant?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
     size?: number | undefined;
 } & SystemCommonProps & SxProp, never>;
 declare const CircleBadgeIcon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
@@ -15,7 +15,7 @@ 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?: "large" | "medium" | "small" | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
     size?: number | undefined;
 } & SystemCommonProps & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
     Icon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {

package/lib-esm/CircleOcticon.d.ts

@@ -13,6 +13,7 @@ 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;
@@ -88,7 +89,6 @@ 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?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "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'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "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("@styled-system/css").SystemStyleObject | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
         theme?: any;
     };
 }

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

@@ -41,8 +41,12 @@ export interface DatePickerProps extends DatePickerConfiguration {
      * 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;
+    renderAnchor?: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
     value?: Selection;
+    /**
+     * Minimum date to select
+     */
+    minDate?: Date | null;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;
 export {};

package/lib-esm/DatePicker/DatePicker.js

@@ -22,7 +22,7 @@ export const DatePicker = ({
   open,
   overlayProps,
   placeholder,
-  renderAnchor,
+  renderAnchor = null,
   showInputPrompt,
   value,
   variant,

package/lib-esm/DatePicker/DatePickerOverlay.js

@@ -24,12 +24,14 @@ export const DatePickerOverlay = ({
     }
   };
 
-  return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({}, rest, {
     onClose: onOverlayClose,
+    focusTrapSettings: {
+      restoreFocusOnCleanUp: true
+    },
     focusZoneSettings: {
       disabled: true
-    }
-  }, rest, {
+    },
     "aria-modal": "true",
     "aria-labelledby": `${currentViewingDate.getMonth()} ${currentViewingDate.getFullYear()}`,
     "aria-live": "polite"

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -1,10 +1,10 @@
-import { addMonths, subMonths } from 'date-fns';
+import { isAfter, isBefore, addMonths, subMonths, isWeekend, addDays, subDays, addWeeks, subWeeks, isSaturday, isSunday, nextSaturday, previousFriday, previousSunday, subYears, addYears, nextMonday, isMonday, previousMonday, isFriday, nextFriday, format } from 'date-fns';
 import React, { useCallback, useMemo, useRef } from 'react';
 import Box from '../Box';
 import { Month } from './Month';
 import styled from 'styled-components';
 import { COMMON, get, TYPOGRAPHY } from '../constants';
-import useDatePicker from './useDatePicker';
+import useDatePicker, { normalizeDate } from './useDatePicker';
 import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
 import StyledOcticon from '../StyledOcticon';
 import Button, { ButtonPrimary } from '../Button';
@@ -48,6 +48,8 @@ export const DatePickerPanel = () => {
     goToMonth,
     nextMonth,
     previousMonth,
+    onDayFocus,
+    setFocusDate,
     viewMode
   } = useDatePicker();
   const panelRef = useRef(null);
@@ -59,6 +61,136 @@ export const DatePickerPanel = () => {
     bindKeys: FocusKeys.Tab,
     focusInStrategy: 'closest'
   });
+  const getNextFocusable = useCallback((direction, from, event) => {
+    var _datePanelRef$current, _datePanelRef$current2;
+
+    const key = event.key;
+    const {
+      disableWeekends,
+      minDate,
+      maxDate
+    } = configuration;
+    const fromDate = from === null || from === void 0 ? void 0 : from.getAttribute('data-date');
+    const focusDate = fromDate ? new Date(fromDate) : new Date();
+    let newDate = normalizeDate(focusDate);
+
+    switch (key) {
+      case 'ArrowRight':
+        {
+          // Increase selection by 1 day
+          newDate = normalizeDate(addDays(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+
+          if (disableWeekends && isWeekend(newDate)) {
+            const monday = nextMonday(newDate);
+            newDate = maxDate && isAfter(monday, maxDate) ? maxDate : monday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          // Decrease selection by 1 day
+          newDate = normalizeDate(subDays(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+
+          if (disableWeekends && isWeekend(newDate)) {
+            const friday = previousFriday(newDate);
+            newDate = minDate && isBefore(friday, minDate) ? minDate : friday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          // Decrease selection by 1 week
+          newDate = normalizeDate(subWeeks(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          // Increase selection by 1 week
+          newDate = normalizeDate(addWeeks(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'Home':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = normalizeDate(isMonday(focusDate) ? focusDate : previousMonday(focusDate));
+          } else {
+            newDate = normalizeDate(isSunday(focusDate) ? focusDate : previousSunday(focusDate));
+          }
+
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'End':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = normalizeDate(isFriday(focusDate) ? focusDate : nextFriday(focusDate));
+          } else {
+            newDate = normalizeDate(isSaturday(focusDate) ? focusDate : nextSaturday(focusDate));
+          }
+
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageUp':
+        {
+          newDate = normalizeDate(event.shiftKey ? subYears(focusDate, 1) : subMonths(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageDown':
+        {
+          newDate = normalizeDate(event.shiftKey ? addYears(focusDate, 1) : addMonths(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      default:
+        {
+          break;
+        }
+    }
+
+    return (_datePanelRef$current = (_datePanelRef$current2 = datePanelRef.current) === null || _datePanelRef$current2 === void 0 ? void 0 : _datePanelRef$current2.querySelector(`[data-date="${format(newDate, 'MM/dd/yyyy')}"]`)) !== null && _datePanelRef$current !== void 0 ? _datePanelRef$current : undefined;
+  }, [configuration, onDayFocus, setFocusDate]);
+  useFocusZone({
+    containerRef: datePanelRef,
+    bindKeys: FocusKeys.ArrowAll | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
+    focusInStrategy: 'previous',
+    getNextFocusable
+  }, [getNextFocusable]);
   useFocusZone({
     containerRef: footerRef,
     bindKeys: FocusKeys.Tab,
@@ -170,8 +302,7 @@ export const DatePickerPanel = () => {
     icon: ChevronRightIcon,
     color: "fg.muted"
   }))), /*#__PURE__*/React.createElement(DatePickerPanelMonths, {
-    ref: datePanelRef,
-    tabIndex: 0
+    ref: datePanelRef
   }, /*#__PURE__*/React.createElement(Month, {
     date: currentViewingDate
   }), viewMode === '2-month' && /*#__PURE__*/React.createElement(Month, {

package/lib-esm/DatePicker/Day.js

@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import styled from 'styled-components';
 import Box from '../Box';
 import Text from '../Text';
 import { get } from '../constants';
 import useDatePicker from './useDatePicker';
+import { format } from 'date-fns';
 const DayBaseComponent = styled(Box).withConfig({
   displayName: "Day__DayBaseComponent",
   componentId: "sc-1japneh-0"
@@ -71,7 +72,6 @@ const getStateStyles = (props, prop, state) => {
   const {
     blocked,
     disabled,
-    focused,
     selected,
     today
   } = props;
@@ -94,8 +94,6 @@ const getStateStyles = (props, prop, state) => {
     return states.blocked[prop];
   } else if (disabled) {
     return states.disabled[prop];
-  } else if (focused) {
-    return states.default.hover[prop];
   } else {
     return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
   }
@@ -112,7 +110,7 @@ const DayComponent = styled(DayBaseComponent).attrs(props => ({
 })).withConfig({
   displayName: "Day__DayComponent",
   componentId: "sc-1japneh-1"
-})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;user-select:none;transition:0.1s color ease;width:30px;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;padding:4px 0;position:relative;transition:0.1s color ease;user-select:none;width:16px;&:after{content:'';display:", ";position:absolute;bottom:0;background:", ";width:100%;height:2px;border-radius:1px;}}&:hover,&:focus{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.today ? 'block' : 'none', props => props.selected && props.selected !== 'middle' ? get('colors.fg.onEmphasis')(props) : get('colors.accent.emphasis')(props), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
 export const Day = ({
   date,
   onAction
@@ -126,6 +124,16 @@ export const Day = ({
     selected,
     today
   } = useDatePicker(date);
+  const dayRef = useRef(null);
+  useEffect(() => {
+    if (focused) {
+      setTimeout(() => {
+        var _dayRef$current;
+
+        return (_dayRef$current = dayRef.current) === null || _dayRef$current === void 0 ? void 0 : _dayRef$current.focus();
+      }, 0);
+    }
+  }, [focused]);
   const keyPressHandler = useCallback(event => {
     if (disabled) {
       return;
@@ -145,12 +153,10 @@ export const Day = ({
     onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
   }, [disabled, onSelection, date, onAction]);
   const todayStyles = useMemo(() => today ? {
-    border: '2px solid',
-    padding: '4px 6px',
-    borderRadius: '16px',
     fontWeight: 'bold'
   } : {}, [today]);
   return /*#__PURE__*/React.createElement(DayComponent, {
+    ref: dayRef,
     role: "gridcell",
     "aria-disabled": disabled,
     "aria-selected": selected !== false,
@@ -162,7 +168,9 @@ export const Day = ({
     onClick: clickHandler,
     onMouseEnter: () => onDayFocus(date),
     onFocus: () => onDayFocus(date),
-    onKeyPress: keyPressHandler
+    onKeyPress: keyPressHandler,
+    tabIndex: -1,
+    "data-date": format(date, 'MM/dd/yyyy')
   }, /*#__PURE__*/React.createElement(Text, {
     sx: todayStyles
   }, date.getDate()));