@primer/components 0.0.0-202192602912 → 0.0.0-20219266052

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

@@ -3,19 +3,16 @@ 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" | "large" | "medium" | 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;
     translate?: "yes" | "no" | undefined;
-    hidden?: boolean | undefined;
-    children?: import("react").ReactNode;
-    value?: string | number | readonly string[] | undefined;
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,10 +22,11 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
@@ -55,11 +53,11 @@ 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?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -70,12 +68,12 @@ 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" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: boolean | "true" | "false" | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -105,6 +103,7 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string;
     } | undefined;
@@ -268,6 +267,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;
+    value?: string | number | readonly string[] | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +275,8 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
+    variant?: "small" | "large" | "medium" | 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-esm/Button/ButtonOutline.d.ts

@@ -3,19 +3,16 @@ 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" | "large" | "medium" | 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;
     translate?: "yes" | "no" | undefined;
-    hidden?: boolean | undefined;
-    children?: import("react").ReactNode;
-    value?: string | number | readonly string[] | undefined;
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,10 +22,11 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
@@ -55,11 +53,11 @@ 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?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -70,12 +68,12 @@ 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" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: boolean | "true" | "false" | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -105,6 +103,7 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string;
     } | undefined;
@@ -268,6 +267,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;
+    value?: string | number | readonly string[] | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +275,8 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
+    variant?: "small" | "large" | "medium" | 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-esm/Button/ButtonPrimary.d.ts

@@ -3,19 +3,16 @@ 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" | "large" | "medium" | 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;
     translate?: "yes" | "no" | undefined;
-    hidden?: boolean | undefined;
-    children?: import("react").ReactNode;
-    value?: string | number | readonly string[] | undefined;
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,10 +22,11 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
@@ -55,11 +53,11 @@ 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?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -70,12 +68,12 @@ 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" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: boolean | "true" | "false" | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -105,6 +103,7 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string;
     } | undefined;
@@ -268,6 +267,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;
+    value?: string | number | readonly string[] | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
@@ -275,8 +275,8 @@ export declare const ButtonPrimary: import("styled-components").StyledComponent<
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
+    variant?: "small" | "large" | "medium" | 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-esm/Button/ButtonStyles.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { get } from '../constants';
-export default css(["position:relative;display:inline-block;padding:6px 16px;font-family:inherit;font-weight:", ";line-height:20px;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border-radius:", ";appearance:none;text-decoration:none;text-align:center;&:hover{text-decoration:none;}&:focus{outline:none;}&:disabled{cursor:default;}&:disabled svg{opacity:0.6;}"], get('fontWeights.bold'), get('radii.2'));
+export default css(["position:relative;display:inline-block;font-family:inherit;font-weight:", ";line-height:20px;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border-radius:", ";appearance:none;text-decoration:none;text-align:center;&:hover{text-decoration:none;}&:focus{outline:none;}&:disabled{cursor:default;}&:disabled svg{opacity:0.6;}"], get('fontWeights.bold'), get('radii.2'));

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" | "large" | "medium" | 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" | "large" | "medium" | 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

@@ -12,7 +12,9 @@ declare function CircleOcticon(props: CircleOcticonProps): JSX.Element;
 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;
+        boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, 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;
@@ -37,7 +39,6 @@ declare namespace CircleOcticon {
         borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTopStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         bottom?: import("styled-system").ResponsiveValue<import("csstype").Property.Bottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
         display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         flexBasis?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexBasis<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -48,7 +49,6 @@ declare namespace CircleOcticon {
         fontFamily?: import("styled-system").ResponsiveValue<import("csstype").Property.FontFamily, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         fontStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.FontStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoFlow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoFlow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -61,6 +61,7 @@ declare namespace CircleOcticon {
         justifySelf?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifySelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         left?: import("styled-system").ResponsiveValue<import("csstype").Property.Left<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         letterSpacing?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -85,7 +86,6 @@ declare namespace CircleOcticon {
         translate?: "yes" | "no" | undefined;
         verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        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;
@@ -104,16 +104,29 @@ declare namespace CircleOcticon {
         margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        hidden?: boolean | undefined;
-        children?: React.ReactNode;
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        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;
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -121,10 +134,11 @@ declare namespace CircleOcticon {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         className?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
@@ -151,11 +165,11 @@ declare namespace CircleOcticon {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "true" | "false" | undefined;
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
         'aria-busy'?: boolean | "true" | "false" | undefined;
         'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
         'aria-colcount'?: number | undefined;
@@ -166,12 +180,12 @@ 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" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: boolean | "true" | "false" | undefined;
         'aria-flowto'?: string | undefined;
         'aria-grabbed'?: boolean | "true" | "false" | undefined;
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
         'aria-hidden'?: boolean | "true" | "false" | undefined;
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
@@ -201,6 +215,7 @@ declare namespace CircleOcticon {
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;
         'aria-valuetext'?: string | undefined;
+        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string;
         } | undefined;
@@ -364,24 +379,9 @@ declare namespace CircleOcticon {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        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;
+        gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, 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;