@primer/components 31.0.2-rc.95622264 → 31.2.0-rc.c285489d

package/lib/__tests__/KeyPaths.types.test.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatesKeyPathsFromObject = generatesKeyPathsFromObject;
+
+function generatesKeyPathsFromObject(x) {
+  return x;
+}

package/lib/sx.d.ts

@@ -1,6 +1,12 @@
-import { SystemStyleObject } from '@styled-system/css';
+import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
+import { ThemeColorPaths, ThemeShadowPaths } from './theme';
+import { ColorProps, ShadowProps } from 'styled-system';
+export declare type BetterCssProperties = {
+    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
+};
+export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
 export interface SxProp {
-    sx?: SystemStyleObject;
+    sx?: BetterSystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;

package/lib/theme.d.ts

@@ -1,2 +1,80 @@
 import { theme } from './theme-preval';
+import { KeyPaths } from './utils/types/KeyPaths';
 export default theme;
+declare type ThemeColors = {
+    fg: {
+        default: string;
+        muted: string;
+        subtle: string;
+        onEmphasis: string;
+    };
+    canvas: {
+        default: string;
+        overlay: string;
+        inset: string;
+        subtle: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+        subtle: string;
+    };
+    neutral: {
+        emphasisPlus: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    accent: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    success: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    attention: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    severe: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    danger: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    done: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    sponsors: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+};
+declare type ThemeShadows = {
+    shadow: {
+        small: string;
+        medium: string;
+        large: string;
+        extraLarge: string;
+    };
+};
+export declare type ThemeColorPaths = KeyPaths<ThemeColors>;
+export declare type ThemeShadowPaths = KeyPaths<ThemeShadows>;

package/lib/theme.js

@@ -7,5 +7,7 @@ exports.default = void 0;
 
 var _themePreval = require("./theme-preval");
 
-var _default = _themePreval.theme;
+var _default = _themePreval.theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
 exports.default = _default;

package/lib/utils/types/KeyPaths.d.ts

@@ -0,0 +1,3 @@
+export declare type KeyPaths<O extends Record<string, unknown>> = {
+    [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never;
+}[keyof O];

package/lib/utils/types/KeyPaths.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -74,7 +74,7 @@ declare const _default: React.FC<{
         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 _default: React.FC<{
         '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;
@@ -288,9 +288,9 @@ declare const _default: React.FC<{
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         block?: boolean | undefined;
-        sx?: import("@styled-system/css").SystemStyleObject | undefined;
+        sx?: import("../sx").BetterSystemStyleObject | undefined;
         disabled?: boolean | undefined;
-        variant?: "large" | "small" | undefined;
+        variant?: "small" | "large" | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
     } & {

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

@@ -66,7 +66,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     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;
@@ -81,7 +81,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     '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;
@@ -280,9 +280,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     block?: boolean | undefined;
-    sx?: import("@styled-system/css").SystemStyleObject | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
     disabled?: boolean | undefined;
-    variant?: "large" | "small" | undefined;
+    variant?: "small" | "large" | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {

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/Dialog.d.ts

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